/* ============================================================
   YWR homepage — Design System v2.0 (2026-07-02)
   단일 진실원: planning/ywr_brand/design-system.html
   모든 색은 확정 마스터 팔레트에서만 도출 — 임의 hex 발명 금지.
   ============================================================ */
:root{
  /* --- scales (테마 불변) --- */
  --navy-50:#F5F7FB; --navy-100:#E7EBF3; --navy-300:#ADB8CE; --navy-400:#8798B4;
  --navy-700:#33415E; --navy-800:#1C2433; --navy-900:#0F1726; --navy-950:#0B0E14;
  --blue-100:#DCE4FB; --blue-200:#B8C9F7; --blue-300:#8CAAF1; --blue-400:#6488E7;
  --blue-500:#3D63DD; --blue-600:#2E4EBB; --blue-700:#243D95; --blue-800:#1C2F73; --blue-900:#152450;
  --slate-500:#71819C; --slate-700:#465165; --slate-900:#212632;
  /* 확장 액센트 — 역할 고정 (teal=에이전트 활동 · violet=AI 추론 · ember=웜 카운터포인트) */
  --teal-300:#68D2BF; --teal-400:#3BB8A3; --teal-700:#146458; --teal-900:#0F413B;
  --violet-300:#AA9FE8; --violet-700:#473789; --violet-900:#2C2354;
  --ember-800:#6E301A;

  /* --- semantic (dark) --- */
  --sem-success-fg:#6FDBA8; --sem-error-fg:#F19194;
  --sem-info-fg:#8CAAF1; --sem-info-bg:#152450; --sem-info-bd:#243D95;

  /* --- theme: dark (마케팅 표면 기본) --- */
  --bg:var(--navy-950); --surface:var(--navy-900); --surface-raised:var(--navy-800);
  --border:var(--navy-700); --border-soft:var(--slate-900);
  --text-1:var(--navy-50); --text-2:var(--navy-300); --text-3:var(--navy-400);
  --interactive:var(--blue-400); --interactive-hover:var(--blue-300);
  --interactive-disabled:var(--slate-700); --focus-ring:var(--blue-300);

  /* --- gradients (마케팅 표면 전용, 스펙 5종 중 사용분) --- */
  --grad-deep-signal:linear-gradient(135deg,#0B0E14 0%,#0F1726 45%,#243D95 100%);
  --grad-ember-horizon:linear-gradient(135deg,#0F1726 0%,#552818 70%,#D45F2C 100%);
  --grad-institutional-depth:linear-gradient(180deg,#1C2433 0%,#0F1726 55%,#0B0E14 100%);

  /* --- spacing (4px scale) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  /* --- radius --- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  /* --- elevation (dark) --- */
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 14px rgba(0,0,0,.55);
  --shadow-3:0 18px 46px rgba(0,0,0,.62);
  /* --- motion --- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decel:cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* --- type --- */
  --font-sans:"Pretendard","Pretendard Variable","Inter","Helvetica Neue","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Consolas","Menlo",monospace;

  --maxw:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-2);
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* 단어 중간에서 줄바꿈되지 않도록 — 한국어/영어 모두 어절 단위로만 개행 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3{text-wrap:balance;color:var(--text-1)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
strong{color:var(--text-1);font-weight:700}
::selection{background:var(--blue-700);color:var(--navy-50)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s6)}

.skip{position:absolute;left:-999px;top:0;background:var(--blue-500);color:#fff;padding:10px 16px;border-radius:var(--r-sm);z-index:200}
.skip:focus{left:16px;top:16px}

/* ===== Buttons (DS §04) ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;font-size:13.5px;
  padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:13px 26px;font-size:15px}
/* 흰 글자 대비 확보: blue-500 5.2:1 / hover blue-600 7.2:1 (blue-400은 3.4:1로 미달) */
.btn-primary{background:var(--blue-500);color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface);color:var(--text-1)}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,14,20,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);
}
.site-header.scrolled{border-bottom-color:var(--border-soft);background:rgba(11,14,20,.9)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center}
.nav-links{display:flex;gap:28px;margin-left:8px;font-size:14px}
.nav-links a{color:var(--text-2);transition:color var(--dur-fast) var(--ease-standard);padding:4px 0}
.nav-links a:hover{color:var(--text-1)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:18px}

/* Language toggle */
.lang-toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:6px 4px;color:var(--text-3);
}
.lang-toggle .lang-opt{color:var(--text-3);transition:color var(--dur-fast) var(--ease-standard)}
.lang-toggle .lang-opt.active{color:var(--text-1)}
.lang-toggle .lang-sep{color:var(--border)}
.lang-toggle:hover .lang-opt:not(.active){color:var(--text-2)}
.lang-toggle-m{align-self:flex-start;margin-top:10px;font-size:14px}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;width:42px;height:42px;flex-direction:column;gap:5px;justify-content:center;align-items:center;cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:var(--text-1);border-radius:2px;transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;flex-direction:column;gap:6px;padding:12px 24px 22px;border-bottom:1px solid var(--border-soft);background:var(--surface)}
.mobile-menu a{padding:12px 4px;color:var(--text-1);border-bottom:1px solid var(--border-soft);font-size:16px}
.mobile-menu a.btn{border:1px solid transparent;margin-top:10px;justify-content:center}

/* ===== Hero — Deep Signal (스펙 승인 1차 히어로 그라디언트) ===== */
.hero{
  position:relative;
  background:var(--grad-deep-signal);
  border-bottom:1px solid var(--blue-800);
  padding:clamp(72px,11vw,132px) 0 clamp(56px,8vw,88px);
  overflow:hidden;
}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;font-weight:400;
  text-transform:uppercase;color:var(--interactive);margin-bottom:var(--s5);
}
.hero .eyebrow{color:var(--blue-200)}
.hero-title{
  font-size:clamp(32px,4.6vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.02em;
  color:#fff;max-width:16ch;
}
.accent-text{color:var(--blue-300)}
.hero-sub{
  margin-top:var(--s6);font-size:clamp(15.5px,1.8vw,18px);color:var(--blue-100);
  max-width:54ch;line-height:1.65;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s8)}
.hero-rule{height:2px;width:200px;background:var(--blue-500);border-radius:1px;margin:var(--s8) 0 var(--s6)}
.hero-live{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--teal-300);
  background:rgba(15,65,59,.5);border:1px solid var(--teal-700);
  padding:7px 14px;border-radius:var(--r-pill);
}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--teal-400);position:relative;flex:none}
.pulse-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal-400);animation:ping 1.8s var(--ease-decel) infinite}
.pulse-dot-sm{width:7px;height:7px}
.pulse-dot-sm::after{inset:-3px}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}

/* Hero 3D constellation (three.js) — 활성화되면 SVG 비주얼을 대체 */
.hero-3d{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease-decel);
}
.hero.has-3d .hero-3d{opacity:1}
.hero-3d canvas{position:absolute;inset:0;width:100%;height:100%}
/* 좌측 카피 가독성 스크림 — 캔버스 위, 텍스트 아래 */
.hero-3d::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,14,20,.42) 0%,rgba(11,14,20,.14) 46%,rgba(11,14,20,0) 66%);
}
.hero.has-3d .hero-visual{display:none}
@media (max-width:980px){
  /* 모바일: 성좌를 헤더 바로 아래 상단 밴드에 먼저 보여주고, 카피/CTA가 그 아래 온다 */
  .hero.has-3d{padding-top:330px}
  .hero-3d::after{background:linear-gradient(180deg,rgba(11,14,20,.02) 0%,rgba(11,14,20,.3) 58%,rgba(11,14,20,.5) 100%)}
}

/* Hero layout + orbiting agents visual */
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s12)}
.hero-visual{display:flex;justify-content:center;align-items:center;min-width:0}
.agents-viz{width:100%;max-width:440px;height:auto;overflow:visible}
.agents-viz .ring{fill:none;stroke:var(--navy-700);stroke-width:1.2;opacity:.8}
.agents-viz .orbit-1 .ring{stroke-dasharray:2 8}
.agents-viz .orbit-3 .ring{stroke-dasharray:5 6}
.agents-viz .node{fill:var(--navy-300)}
.agents-viz .node-accent{fill:var(--interactive)}
.agents-viz .node-live{fill:var(--teal-400)}
.agents-viz .node-dim{fill:var(--slate-500);opacity:.55}
.agents-viz .spoke{stroke:var(--interactive);stroke-width:1.4;stroke-dasharray:4 7;opacity:.55}
.agents-viz .hub-bg{fill:var(--surface-raised);stroke:var(--navy-700);stroke-width:1}
.agents-viz .hub-ring{fill:none;stroke:var(--interactive);stroke-width:1.6}
.agents-viz .hub-notch{fill:var(--interactive)}
.agents-viz .orbit{transform-box:view-box;transform-origin:220px 220px;animation:viz-spin 42s linear infinite}
.agents-viz .orbit-2{animation-duration:30s;animation-direction:reverse}
.agents-viz .orbit-3{animation-duration:22s}
.agents-viz .node{animation:viz-pulse 3s ease-in-out infinite}
.agents-viz .node-accent,.agents-viz .node-live{animation-duration:2.3s}
.agents-viz .spoke{animation:viz-flow 1.7s linear infinite}
.agents-viz .hub-ring{transform-box:view-box;transform-origin:220px 220px;animation:viz-breathe 3.6s ease-in-out infinite}
@keyframes viz-spin{to{transform:rotate(360deg)}}
@keyframes viz-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes viz-flow{to{stroke-dashoffset:-22}}
@keyframes viz-breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.13);opacity:.9}}

/* ===== Trust strip ===== */
.trust-strip{border-bottom:1px solid var(--border-soft);background:var(--surface)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);padding:var(--s8) var(--s6)}
.trust-item{display:flex;flex-direction:column;gap:5px;text-align:center}
.trust-num{font-size:clamp(17px,2.2vw,22px);font-weight:800;color:var(--text-1);letter-spacing:-.015em}
.trust-label{font-size:12.5px;color:var(--text-3)}

/* ===== Generic section (DS 섹션 스캐폴딩 — kicker + notch rule) ===== */
.section{padding:clamp(68px,9vw,110px) 0}
.section-alt{background:var(--grad-institutional-depth)}
.section-title{
  font-size:clamp(24px,2.6vw,26px);font-weight:800;letter-spacing:-.015em;
  line-height:1.15;margin-bottom:var(--s4);
}
.section-title::after{content:"";display:block;height:2px;width:64px;background:var(--interactive);border-radius:1px;margin-top:var(--s5)}
.section-lead{font-size:clamp(15px,1.8vw,17px);color:var(--text-2);max-width:62ch;margin-bottom:var(--s12);line-height:1.7}

/* ===== Platform cards ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.card{
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s8) var(--s6);
  transition:transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--interactive)}
.card-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  background:var(--sem-info-bg);border:1px solid var(--sem-info-bd);color:var(--sem-info-fg);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:var(--s5);
}
.card h3{font-size:19px;font-weight:700;margin-bottom:var(--s3);letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--text-2);line-height:1.65}

/* ===== Ontology ===== */
.ont-grid{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:var(--s12)}
.ont-copy .section-lead{margin-bottom:var(--s8)}
.ont-points{list-style:none;display:grid;gap:var(--s5)}
.ont-points li{border-left:2px solid var(--blue-700);padding-left:var(--s4)}
.ont-points h3{font-size:15.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.ont-points p{font-size:14px;color:var(--text-2);line-height:1.6}
.ont-visual{position:relative}
/* 온톨로지 3D 그래프 (three.js) — 활성화되면 SVG 비주얼을 대체. 박스 높이는 계속 SVG가 결정 */
.ont-3d{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease-decel);
}
.ont-visual.has-3d .ont-3d{opacity:1}
.ont-3d canvas{position:absolute;inset:0;width:100%;height:100%}
.ont-visual.has-3d .ont-viz{opacity:0}
.ont-viz{width:100%;height:auto}
.ont-viz .ont-edges line{
  stroke:var(--blue-700);stroke-width:1;opacity:.85;
  stroke-dasharray:4 5;animation:ontDash 16s linear infinite;
}
@keyframes ontDash{to{stroke-dashoffset:-90}}
.ont-node{fill:var(--navy-900);stroke:var(--blue-400);stroke-width:1.5}
.ont-node-live{stroke:var(--teal-400)}
.ont-halo{fill:none;stroke:var(--teal-400);animation:ontPing 2.6s var(--ease-decel) infinite}
@keyframes ontPing{0%{r:6;opacity:.7}75%,100%{r:16;opacity:0}}
.ont-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;
  fill:var(--text-3);text-anchor:middle;
}
@media (max-width:980px){
  .ont-grid{grid-template-columns:1fr;gap:var(--s6)}
  .ont-visual{max-width:520px;margin:0 auto}
}

/* ===== Live demo ===== */
/* 프로세스 선택 탭 — 9개 엔드투엔드 체인, 데스크톱·모바일 공통 3×3 그리드
   (스크롤 없이 전부 보인다 · 활성 셀 하단에 시나리오 진행률 바) */
.demo-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:880px;margin:0 auto var(--s6);
}
.demo-tab{
  position:relative;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-family:inherit;text-align:left;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-md);
  padding:10px 14px 12px;cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard);
}
.demo-tab-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.demo-tab-no{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--interactive);letter-spacing:.03em;
}
.demo-tab-fn{
  font-size:13.5px;font-weight:700;color:var(--text-2);letter-spacing:-.01em;
  transition:color var(--dur-base) var(--ease-standard);
}
.demo-tab-name{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);
  letter-spacing:.01em;line-height:1.3;word-break:normal;overflow-wrap:anywhere;
}
.demo-tab-prog{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--interactive);border-radius:0 1px 1px 0;
}
.demo-tab:hover{border-color:var(--interactive);background:var(--surface-raised)}
.demo-tab:hover .demo-tab-fn{color:var(--text-1)}
.demo-tab.active{border-color:var(--blue-600);background:var(--sem-info-bg)}
.demo-tab.active .demo-tab-fn{color:var(--sem-info-fg)}
@media (max-width:600px){
  .demo-tabs{gap:7px}
  .demo-tab{padding:8px 10px 10px;gap:2px}
  .demo-tab-fn{font-size:12.5px}
  .demo-tab-no{font-size:10px}
  .demo-tab-name{font-size:9px}
}
@media (max-width:400px){
  .demo-tab{padding:8px 8px 10px}
  .demo-tab-head{gap:5px}
  .demo-tab-fn{font-size:12px;letter-spacing:-.02em}
}

.demo-figure{max-width:880px;margin:0 auto}
.demo-window{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-3);
}
.demo-chrome{
  display:flex;align-items:center;gap:8px;
  padding:10px var(--s4);background:var(--bg);border-bottom:1px solid var(--border-soft);
}
.chrome-dot{width:10px;height:10px;border-radius:50%;background:var(--slate-700);flex:none}
.demo-title{margin-left:6px;font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.demo-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--teal-300);
  background:var(--teal-900);border:1px solid var(--teal-700);
  padding:3px 10px;border-radius:var(--r-pill);
}
/* Live DOM console (demo-console.js) — GIF 대체. 전체 콘텐츠가 항상 DOM에
   있고(opacity 토글) 렌더는 가상 시계의 함수라 높이가 흔들리지 않는다 */
.demo-console{
  background:var(--surface);
  padding:26px clamp(18px,4vw,34px) 30px;
  font-family:var(--font-mono);
  font-size:clamp(11px,1.55vw,14.5px);
  line-height:1.5;
}
.dc-inner{display:flex;flex-direction:column;gap:13px}
.dc-line{
  display:flex;align-items:center;flex-wrap:wrap;min-height:23px;
  color:var(--text-2);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease-decel),transform .45s var(--ease-decel);
}
.dc-line.on{opacity:1;transform:none}
.dc-row-prompt{opacity:1;transform:none;white-space:nowrap}
.dc-dollar{color:var(--interactive)}
.dc-cmd{color:var(--text-1)}
.dc-cursor{
  display:inline-block;width:8px;height:1.15em;background:var(--text-1);
  margin-left:3px;opacity:0;align-self:center;
}
.dc-cursor.on,.dc-row-prompt2 .dc-cursor{opacity:1;animation:dc-blink 1.06s steps(1) infinite}
@keyframes dc-blink{50%{opacity:0}}
.dc-dot{width:9px;height:9px;border-radius:50%;background:var(--teal-400);position:relative;flex:none;margin-right:13px}
.dc-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal-400);animation:ping 1.8s var(--ease-decel) infinite}
.dc-dot.done{background:var(--sem-success-fg)}
.dc-dot.done::after{animation:none;opacity:0}
.dc-status-text{color:var(--teal-300)}
/* 실행 중 스텝 스피너 */
.dc-spin{
  width:13px;height:13px;margin-left:10px;flex:none;border-radius:50%;
  border:2px solid var(--navy-700);border-top-color:var(--interactive);
  opacity:0;
}
.dc-spin.on{opacity:1;animation:dc-rotate .7s linear infinite}
@keyframes dc-rotate{to{transform:rotate(360deg)}}
/* 차이 상세 서브라인 (트리 들여쓰기 + 처리 상태 태그) */
.dc-sub{padding-left:1.6em;font-size:.94em}
.dc-tag{margin-left:12px;font-size:.86em}
.dc-tag-ok{color:var(--sem-success-fg)}
.dc-tag-wait{color:var(--blue-300)}
.dc-sub .dc-ck{width:14px;height:14px}
.dc-sub .dc-check{width:14px;height:14px}
.dc-wait-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-400);margin-left:9px;flex:none;animation:dc-wait 1.4s ease-in-out infinite}
@keyframes dc-wait{0%,100%{opacity:.35}50%{opacity:1}}
.dc-num{color:var(--text-3);white-space:pre}
.dc-ck{
  width:16px;height:16px;margin-left:10px;flex:none;
  opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease-spring),transform .3s var(--ease-spring);
}
.dc-ck.on{opacity:1;transform:none}
.dc-check{width:16px;height:16px;display:block}
.dc-check path{stroke:var(--sem-success-fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dc-bar{
  width:clamp(86px,20vw,220px);height:10px;border-radius:5px;flex:none;
  background:var(--navy-800);border:1px solid var(--navy-700);
  margin-left:16px;overflow:hidden;
}
.dc-bar-fill{display:block;height:100%;width:0;background:var(--interactive);border-radius:5px}
.dc-pct{margin-left:12px;min-width:4ch}
.dc-chip{
  margin-left:12px;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--violet-900);border:1px solid var(--violet-700);color:var(--violet-300);
  font-size:.82em;
  opacity:0;transform:scale(.85);
  transition:opacity .3s var(--ease-spring),transform .3s var(--ease-spring);
}
.dc-chip.on{opacity:1;transform:none}
.dc-row-final{margin-top:10px}
.dc-row-final .dc-ck{margin-left:0;margin-right:11px}
.dc-final-text{color:var(--sem-success-fg)}
.dc-row-prompt2{margin-top:14px}

.demo-controls{display:flex;justify-content:flex-end;margin-top:var(--s3)}
.demo-media-toggle{
  font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:5px 14px;cursor:pointer;
  transition:color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             background var(--dur-base) var(--ease-standard);
}
.demo-media-toggle:hover{color:var(--text-1);background:var(--surface-raised);border-color:var(--interactive)}
.demo-caption{
  margin-top:var(--s3);text-align:center;
  font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:.02em;
}

/* ===== Solutions ===== */
.sol-list{display:flex;flex-direction:column}
.sol-row{display:flex;gap:var(--s8);padding:var(--s8) 0;border-top:1px solid var(--border-soft)}
.sol-row:last-child{border-bottom:1px solid var(--border-soft)}
.sol-no{
  font-family:var(--font-mono);font-size:clamp(22px,2.6vw,30px);font-weight:700;
  color:var(--interactive);min-width:62px;line-height:1.3;
}
.sol-body h3{font-size:clamp(18px,2.2vw,22px);font-weight:700;margin-bottom:var(--s2);letter-spacing:-.01em}
.sol-body p{font-size:15px;color:var(--text-2);max-width:70ch}

/* ===== Trust cards ===== */
.trust-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.tcard{
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6);position:relative;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.tcard:hover{border-color:var(--interactive);box-shadow:var(--shadow-2)}
.tcard::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;background:var(--interactive);border-radius:0 3px 3px 0}
.tcard h3{font-size:17px;font-weight:700;margin-bottom:var(--s2);padding-left:var(--s2);letter-spacing:-.01em}
.tcard p{font-size:14.5px;color:var(--text-2);padding-left:var(--s2)}
.trust-note{
  margin-top:var(--s8);padding:var(--s5) var(--s6);
  background:var(--sem-info-bg);border:1px solid var(--sem-info-bd);border-radius:var(--r-md);
  font-size:14.5px;color:var(--sem-info-fg);max-width:none;
}

/* ===== Why ===== */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s12);margin-top:var(--s10)}
.why-item h3{font-size:19px;font-weight:700;margin-bottom:var(--s2);letter-spacing:-.01em}
.why-item h3::before{content:"—";color:var(--interactive);margin-right:10px;font-weight:800}
.why-item p{font-size:14.5px;color:var(--text-2)}

/* ===== CTA — Ember Horizon (스펙: 웜 2차 히어로 · CTA) ===== */
.cta-section{
  padding:clamp(72px,11vw,120px) 0;
  background:var(--grad-ember-horizon);
  border-top:1px solid var(--ember-800);
  text-align:center;
}
.cta-inner h2{font-size:clamp(25px,3.6vw,34px);font-weight:800;color:#fff;letter-spacing:-.015em;max-width:20ch;margin:0 auto var(--s4);line-height:1.2}
.cta-inner p{font-size:clamp(15px,1.9vw,17px);color:var(--navy-50);max-width:54ch;margin:0 auto var(--s8)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== Footer ===== */
.site-footer{background:var(--bg);border-top:1px solid var(--border-soft);padding:var(--s16) 0 var(--s8)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s10);padding-bottom:var(--s10);border-bottom:1px solid var(--border-soft)}
.footer-brand img{margin-bottom:var(--s4)}
.footer-tagline{color:var(--text-3);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s2)}
.footer-slogan{color:var(--text-3);font-size:14px;max-width:34ch}
.footer-col h3{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s4);font-weight:700;font-family:var(--font-mono)}
.footer-col a{display:block;color:var(--text-2);font-size:14px;padding:6px 0;transition:color var(--dur-fast) var(--ease-standard)}
.footer-col a:hover{color:var(--text-1)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:var(--s6);font-size:12.5px;color:var(--text-3)}
.footer-built{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em}

/* ===== Contact modal ===== */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:var(--s6)}
.modal:not([hidden]){display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,14,20,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-card{
  position:relative;width:100%;max-width:500px;max-height:92vh;overflow:auto;
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6) var(--s8);box-shadow:var(--shadow-3);
  animation:modal-in var(--dur-slow) var(--ease-decel);
}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--text-3);font-size:28px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)}
.modal-x:hover{color:var(--text-1)}
.modal-card h2{font-size:21px;font-weight:800;letter-spacing:-.015em;margin-bottom:5px}
.modal-intro{font-size:14px;color:var(--text-2);margin-bottom:var(--s4);line-height:1.55}
.field{margin-bottom:var(--s3);display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--text-1);font-weight:600}
.field input,.field textarea{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 12px;color:var(--text-1);font-family:inherit;font-size:14px;width:100%;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--interactive);box-shadow:0 0 0 3px color-mix(in srgb,var(--interactive) 28%,transparent)}
.field textarea{resize:vertical;min-height:68px;line-height:1.5}
#contact-form .btn{width:100%;margin-top:5px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{font-size:13.5px;margin-top:10px;min-height:1.2em;line-height:1.45}
.form-status.ok{color:var(--sem-success-fg)}
.form-status.err{color:var(--sem-error-fg)}
#contact-form button[disabled]{background:var(--interactive-disabled);cursor:default}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-decel),transform .6s var(--ease-decel)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .agents-viz .orbit,.agents-viz .node,.agents-viz .spoke,.agents-viz .hub-ring{animation:none}
  .ont-viz .ont-edges line{animation:none}
  .ont-halo{animation:none;opacity:0}
  .pulse-dot::after{animation:none;opacity:0}
  .modal-card{animation:none}
  .dc-line,.dc-ck,.dc-chip{transition:none}
  .dc-cursor.on,.dc-row-prompt2 .dc-cursor{animation:none}
  .dc-dot::after{animation:none;opacity:0}
  .dc-spin.on{animation:none}
  .dc-wait-dot{animation:none;opacity:.8}
}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:6px}
  .hero-visual{order:1;margin-top:var(--s5);max-width:340px;align-self:start}
}
@media (max-width:860px){
  .nav-links,.nav-actions{display:none}
  .nav-toggle{display:flex}
  .mobile-menu:not([hidden]){display:flex}
  .card-grid{grid-template-columns:1fr}
  .trust-cards{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr;gap:var(--s6)}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s4)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s8)}
  .sol-row{flex-direction:column;gap:var(--s2)}
}
@media (max-width:480px){
  .wrap{padding:0 18px}
  .hero-cta .btn,.cta-actions .btn{flex:1 1 100%}
}