:root {
  --ink: #102442;
  --blue: #1767e8;
  --blue-deep: #0a3f9f;
  --blue-pale: #edf5ff;
  --cyan: #69d7e8;
  --line: #dce6f2;
  --muted: #5b6b7f;
  --paper: #ffffff;
  --soft: #f5f8fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, "Pretendard", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(220,230,242,.86);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(1180px, calc(100% - 40px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width:76px; height:42px; object-fit:contain; }
.brand strong { display:block; font-size: 19px; letter-spacing: -.5px; }
.brand small { display:block; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: #758399; }
nav { display:flex; align-items:center; gap: 42px; font-size: 14px; font-weight: 700; }
nav a { position:relative; padding: 30px 0; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:20px; height:2px; background:var(--blue); transition:.2s ease; }
nav a:hover::after { right:0; }
.header-call { display:flex; flex-direction:column; align-items:flex-end; }
.header-call span { font-size:10px; color:#728197; }
.header-call strong { margin-top:3px; color:var(--blue); font-size:17px; }
.header-call strong i { margin:0 7px; color:#b2bfd0; font-style:normal; }

.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 18%, rgba(105,215,232,.25), transparent 24%),
    linear-gradient(180deg,#f7fbff 0%,#fff 72%);
}
.hero-grid {
  width: min(1180px, calc(100% - 40px));
  min-height: 650px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  align-items:center;
  gap: 42px;
  padding: 70px 0 54px;
}
.eyebrow { margin:0 0 18px; color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.09em; }
.eyebrow span { display:inline-block; width:24px; height:2px; margin:0 9px 4px 0; background:currentColor; }
.hero h1 { margin:0; font-size:clamp(44px,5.3vw,70px); line-height:1.13; letter-spacing:-.055em; font-weight:900; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero-lead { max-width:530px; margin:25px 0 30px; font-size:18px; line-height:1.8; color:var(--muted); letter-spacing:-.02em; }
.hero-actions { display:flex; gap:12px; }
.button { min-height:52px; padding:0 24px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; transition:transform .2s ease, box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--blue); color:white; box-shadow:0 12px 30px rgba(23,103,232,.25); }
.button.secondary { border:1px solid #c7d6e8; background:white; }
.trust-list { display:flex; flex-wrap:wrap; gap:10px 19px; margin:27px 0 0; padding:0; list-style:none; color:#4d6077; font-size:12px; font-weight:700; }
.trust-list b { color:var(--blue); }

.hero-visual { position:relative; min-height:480px; display:grid; place-items:center; }
.visual-orbit { position:absolute; border-radius:50%; border:1px solid rgba(23,103,232,.15); }
.orbit-one { width:470px; height:470px; }
.orbit-two { width:350px; height:350px; border-style:dashed; animation:spin 28s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.machine-card { position:relative; width:450px; height:405px; overflow:hidden; border-radius:35px 35px 110px 35px; background:#fff; box-shadow:0 32px 70px rgba(15,55,104,.15); z-index:2; }
.machine-card::after { content:""; position:absolute; inset:auto 22px 18px 22px; height:16px; border-radius:50%; background:rgba(16,36,66,.15); filter:blur(12px); }
.machine-card img { width:100%; height:100%; object-fit:cover; }
.machine-label { position:absolute; top:21px; left:22px; z-index:2; padding:8px 11px; border-radius:7px; background:var(--ink); color:white; font-size:9px; font-weight:900; letter-spacing:.13em; }
.service-badge { position:absolute; right:-5px; bottom:36px; z-index:3; display:flex; gap:12px; align-items:center; padding:15px 19px; border:1px solid #e3eaf2; border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 18px 38px rgba(16,36,66,.14); }
.badge-icon { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--blue-pale); color:var(--blue); font-size:13px; font-weight:900; }
.service-badge strong,.service-badge small { display:block; }
.service-badge strong { font-size:13px; }
.service-badge small { margin-top:4px; color:#738399; font-size:11px; }

.proof-strip { width:min(1180px,calc(100% - 40px)); margin:0 auto 35px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 14px 40px rgba(16,36,66,.06); }
.proof-strip div { padding:24px 28px; border-right:1px solid var(--line); }
.proof-strip div:last-child { border:0; }
.proof-strip strong,.proof-strip span { display:block; }
.proof-strip strong { font-size:16px; }
.proof-strip span { margin-top:6px; color:#7a899c; font-size:11px; }

.plans-section { padding:90px 20px 95px; background:var(--soft); }
.section-heading { text-align:center; }
.section-heading h2 { margin:0; font-size:clamp(34px,4vw,48px); letter-spacing:-.05em; }
.section-heading > p:last-child { margin:15px 0 0; color:var(--muted); font-size:15px; }
.plan-grid { width:min(1180px,100%); margin:48px auto 70px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan-card { position:relative; padding:31px; border:1px solid var(--line); border-radius:19px; background:white; box-shadow:0 8px 24px rgba(16,36,66,.04); }
.plan-card.featured { border:2px solid var(--blue); transform:translateY(-9px); box-shadow:0 18px 42px rgba(23,103,232,.12); }
.plan-label { display:inline-block; padding:6px 9px; border-radius:6px; background:var(--blue-pale); color:var(--blue); font-size:10px; font-weight:900; }
.featured .plan-label { background:var(--blue); color:white; }
.plan-card h3 { margin:19px 0 7px; font-size:21px; letter-spacing:-.03em; }
.model-name { margin:0; color:#8190a3; font-size:12px; }
.price { margin:26px 0 10px; font-size:27px; font-weight:900; letter-spacing:-.04em; }
.plan-note { min-height:43px; margin:0; color:#68788c; font-size:12px; line-height:1.7; }
.plan-card ul { margin:24px 0; padding:18px 0; border-top:1px solid #edf1f6; border-bottom:1px solid #edf1f6; list-style:none; display:grid; gap:10px; font-size:12px; color:#445770; }
.plan-card li::first-letter { color:var(--blue); }
.plan-card > a { display:flex; justify-content:space-between; align-items:center; color:var(--blue); font-size:13px; font-weight:800; }

.service-flow { width:min(1180px,100%); margin:0 auto; padding:58px; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; border-radius:25px; color:white; background:linear-gradient(135deg,#102b54,#0a4bba); box-shadow:0 25px 55px rgba(10,63,159,.2); }
.eyebrow.light { color:#87dded; }
.flow-copy h2 { margin:0; font-size:36px; line-height:1.3; letter-spacing:-.045em; }
.flow-copy > p:last-child { max-width:390px; margin:20px 0 0; color:#cbd9ec; font-size:14px; line-height:1.8; }
.service-flow ol { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:30px 28px; }
.service-flow li { display:flex; gap:15px; align-items:flex-start; }
.service-flow li > span { color:#79dcea; font-size:11px; font-weight:900; padding-top:3px; }
.service-flow strong,.service-flow small { display:block; }
.service-flow strong { font-size:15px; }
.service-flow small { margin-top:6px; color:#b9cae0; font-size:11px; line-height:1.5; }

.contact-section { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:100px 0; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.section-heading.left { text-align:left; }
.section-heading.left h2 { font-size:40px; }
.faq-list { margin-top:30px; border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { padding:21px 4px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font-size:15px; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:var(--blue); font-size:22px; font-weight:400; transition:transform .2s; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details p { margin:-4px 0 21px; padding-right:45px; color:var(--muted); font-size:13px; line-height:1.75; }
.contact-card { position:relative; overflow:hidden; padding:46px; border-radius:26px; color:white; background:linear-gradient(145deg,#1767e8,#0b45a9); box-shadow:0 24px 55px rgba(23,103,232,.22); }
.contact-card::after { content:""; position:absolute; width:260px; height:260px; right:-100px; bottom:-115px; border:45px solid rgba(255,255,255,.08); border-radius:50%; }
.contact-card h2 { position:relative; z-index:1; margin:0; font-size:34px; line-height:1.35; letter-spacing:-.045em; }
.contact-card > p:not(.eyebrow) { position:relative; z-index:1; margin:18px 0 27px; color:#dbe8fb; font-size:13px; line-height:1.7; }
.contact-phone { position:relative; z-index:1; display:block; margin-bottom:14px; }
.contact-phone small { display:block; color:#bcd2f5; font-size:10px; }
.contact-phone strong { display:block; margin-top:4px; font-size:30px; letter-spacing:-.03em; }
.button.white { position:relative; z-index:1; width:100%; background:white; color:var(--blue-deep); }
.contact-meta { position:relative; z-index:1; margin-top:18px; display:flex; flex-wrap:wrap; gap:9px 15px; color:#d4e2f8; font-size:10px; }

footer { border-top:1px solid var(--line); background:#f8fafc; padding:35px max(20px,calc((100% - 1180px)/2)); display:flex; align-items:flex-end; justify-content:space-between; gap:30px; color:#6d7d91; font-size:11px; }
footer strong { color:var(--ink); font-size:15px; }
footer p { margin:7px 0 0; }
.footer-downloads { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.footer-downloads a { display:inline-flex; align-items:center; justify-content:center; min-width:112px; padding:9px 14px; border:1px solid #cbd8e7; border-radius:8px; background:#fff; color:var(--blue); font-size:12px; font-weight:700; text-decoration:none; transition:.2s ease; }
.footer-downloads a:hover { border-color:var(--blue); background:#edf5ff; transform:translateY(-1px); }
.footer-info { max-width:620px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 20px; }
.mobile-call { display:none; }
.plan-phone { width:100%; padding:0; border:0; background:none; color:var(--blue); font:inherit; font-weight:800; text-align:left; cursor:pointer; }
.phone-dialog { width:min(520px,calc(100% - 32px)); padding:34px; border:0; border-radius:24px; color:var(--ink); box-shadow:0 24px 70px rgba(16,39,70,.28); }
.phone-dialog::backdrop { background:rgba(10,25,45,.62); backdrop-filter:blur(3px); }
.dialog-close { position:absolute; top:14px; right:17px; width:38px; height:38px; border:0; border-radius:50%; background:#edf3fa; color:#466078; font-size:26px; cursor:pointer; }
.dialog-kicker { margin:0 0 7px; color:var(--blue); font-size:12px; font-weight:800; }
.phone-dialog h2 { margin:0; font-size:27px; }
.dialog-guide { margin:12px 0 23px; color:#62748a; font-size:13px; line-height:1.65; }
.phone-options { display:grid; gap:10px; }
.phone-options > div { padding:12px; border:1px solid var(--line); border-radius:15px; background:#f8fbff; }
.phone-options a { display:flex; flex-direction:column; justify-content:center; padding:4px 8px; text-decoration:none; }
.phone-options small { color:#71839a; font-size:10px; font-weight:700; }
.phone-options strong { margin-top:2px; color:var(--ink); font-size:20px; }

@media (max-width: 900px) {
  .header-inner { height:68px; }
  nav { display:none; }
  .hero-grid { min-height:auto; grid-template-columns:1fr; gap:35px; padding:58px 0 40px; }
  .hero-copy { text-align:center; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .hero-actions,.trust-list { justify-content:center; }
  .hero-visual { min-height:400px; }
  .machine-card { width:min(450px,85vw); }
  .service-badge { right:5%; }
  .proof-strip { grid-template-columns:1fr 1fr; }
  .proof-strip div:nth-child(2) { border-right:0; }
  .proof-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .plan-grid { grid-template-columns:1fr; max-width:620px; }
  .plan-card.featured { transform:none; }
  .service-flow { grid-template-columns:1fr; gap:38px; }
  .contact-section { grid-template-columns:1fr; gap:55px; }
}

@media (max-width: 600px) {
  .header-inner { width:calc(100% - 30px); }
  .brand-logo { width:60px; height:36px; }
  .brand strong { font-size:16px; }
  .brand small { font-size:7px; }
  .header-call span { display:none; }
  .header-call strong { display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-size:12px; }
  .header-call strong i { display:none; }
  .hero-grid { width:calc(100% - 32px); padding-top:44px; }
  .hero h1 { font-size:42px; }
  .hero-lead { font-size:15px; line-height:1.75; }
  .hero-lead br { display:none; }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .trust-list { display:grid; justify-content:start; text-align:left; width:max-content; max-width:100%; margin:24px auto 0; }
  .hero-visual { min-height:320px; }
  .machine-card { height:300px; border-radius:26px 26px 74px 26px; }
  .orbit-one { width:330px; height:330px; }
  .orbit-two { width:250px; height:250px; }
  .service-badge { left:8px; right:auto; bottom:3px; }
  .proof-strip { width:calc(100% - 32px); margin-bottom:28px; }
  .proof-strip div { padding:18px 15px; }
  .proof-strip strong { font-size:13px; }
  .proof-strip span { font-size:9px; }
  .plans-section { padding:75px 16px 70px; }
  .section-heading h2 { font-size:33px; }
  .section-heading > p:last-child { font-size:13px; line-height:1.6; }
  .plan-grid { margin:35px auto 48px; }
  .plan-card { padding:25px; }
  .service-flow { padding:35px 25px; }
  .flow-copy h2 { font-size:29px; }
  .service-flow ol { grid-template-columns:1fr; gap:23px; }
  .contact-section { width:calc(100% - 32px); padding:70px 0 100px; }
  .section-heading.left h2 { font-size:32px; }
  .faq-list summary { font-size:14px; gap:16px; }
  .contact-card { padding:34px 25px; border-radius:21px; }
  .contact-card h2 { font-size:29px; }
  .contact-phone strong { font-size:29px; }
  footer { padding:30px 20px 100px; flex-direction:column; align-items:flex-start; }
  .footer-info { justify-content:flex-start; }
  .mobile-call { position:fixed; left:14px; right:14px; bottom:12px; z-index:60; min-height:58px; padding:0; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:14px; background:var(--blue); color:white; box-shadow:0 15px 35px rgba(23,103,232,.36); font-size:11px; font-weight:800; }
  .mobile-call a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .mobile-call a + a { border-left:1px solid rgba(255,255,255,.28); }
  .mobile-call span { color:#cfe0ff; font-size:9px; }
  .mobile-call strong { font-size:13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .orbit-two { animation:none; }
  * { transition:none !important; }
}
