/* AI특별시 공통 스타일 — pages.py가 만드는 모든 쪽이 함께 쓴다 */
:root{
  --navy:#072953; --navy-2:#0d3570; --navy-deep:#051d3c; --navy-panel:#0b2c58; --navy-line:rgba(255,255,255,.14);
  --ink:#0f1b2d; --text:#3a475c; --muted:#5b6880; --line:#e2e7ee; --line-2:#cbd4e0;
  --bg:#ffffff; --bg-soft:#f5f7fa;
  --accent:#03a29d; --accent-ink:#02716d; --accent-soft:#e4f5f4; --accent-on-navy:#7fdcd6;
  --wrap:1200px; --gut:24px; --ease:cubic-bezier(.22,.61,.36,1);
  --w1:400; --w2:600; --w3:800;
  --r:14px; --shadow:0 18px 50px rgba(5,29,60,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:17px;line-height:1.6;font-weight:var(--w1);word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--navy-2)}
h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-0.02em;font-weight:var(--w3)}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px;font-weight:var(--w2)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* type scale */
.display{font-size:clamp(30px,4.7vw,62px);line-height:1.18;letter-spacing:-0.03em}
.h2{font-size:clamp(28px,3.3vw,44px);line-height:1.26;letter-spacing:-0.025em}
.h3{font-size:22px;line-height:1.4;font-weight:var(--w3)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.kicker{display:inline-block;font-size:14px;font-weight:var(--w2);letter-spacing:.04em;color:var(--accent-ink);margin-bottom:16px}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;font-size:16px;font-weight:var(--w2);text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;cursor:pointer;white-space:nowrap}
.btn .ico{width:20px;height:20px}
.btn:hover .ico{transform:translateX(3px)}
.btn .ico{transition:transform .2s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-line{border-color:var(--line-2);color:var(--navy);background:#fff}
.btn-line:hover{border-color:var(--navy)}
.btn-light{background:#fff;color:var(--navy-deep)}
.btn-light:hover{background:var(--accent-soft)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:var(--w2);color:var(--navy);text-decoration:none;font-size:16px}
.more .ico{width:20px;height:20px;transition:transform .2s}
a:hover .more .ico,.more:hover .ico{transform:translateX(4px)}

/* header */
.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:var(--w3);font-size:19px;letter-spacing:-0.02em;flex:none}
.brand img{width:32px;height:32px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;color:var(--text);text-decoration:none;font-size:16px;font-weight:var(--w2);padding:10px 14px;border-radius:8px}
.nav a:hover{color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-15px;height:2px;background:var(--navy)}
.top .cta{flex:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--navy);align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}

/* home hero slider */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero .viewport{overflow:hidden;transition:height .5s var(--ease)}
.hero .track{align-items:flex-start}
.hero .track{display:flex;transition:transform .7s var(--ease)}
.hero .track.dragging{transition:none}
.slide{flex:0 0 100%;min-width:100%;min-height:max(85vh,640px);display:flex;align-items:center;padding:72px 0 120px}
.slide .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center;width:100%}
.slide .eyebrow{display:block;font-size:15px;font-weight:var(--w2);letter-spacing:.04em;color:var(--accent-on-navy);margin-bottom:22px}
.slide .display{color:#fff}
.slide .lead{color:rgba(255,255,255,.78);margin-top:24px;max-width:34em}
.slide .actions{margin-top:40px}
.slide .copy > *{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .slide:not(.is-active) .copy > *{opacity:0;transform:translateY(12px)}
.hero-ctrl{position:absolute;left:0;right:0;bottom:36px}
.hero-ctrl .wrap{display:flex;align-items:center;gap:18px}
.dots{display:flex;gap:8px}
.dots button{width:56px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.dots button span{display:block;width:100%;height:3px;background:rgba(255,255,255,.22);border-radius:2px;position:relative;overflow:hidden}
.dots button span::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.dots button[aria-current="true"] span::after{transform:scaleX(1)}
.hero.autoplay:not(.stopped) .dots button[aria-current="true"] span::after{animation:prog var(--dur,7000ms) linear forwards}
.hero.paused .dots button[aria-current="true"] span::after{animation-play-state:paused}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.count{white-space:nowrap;font-size:14px;font-weight:var(--w2);color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.count b{color:#fff}
.arrows{display:flex;gap:8px;margin-left:auto}
.round{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.round:hover{border-color:#fff}
.round .ico{width:20px;height:20px}
#toggle .i-play{display:none}
.hero.stopped #toggle .i-play{display:block}
.hero.stopped #toggle .i-pause{display:none}

/* hero visual 1: agent graph canvas (pages.py flow_svg, site.js agent graph) */
:root{--amber:#f5b759}
.agfig{background:var(--navy-panel);border:1px solid var(--navy-line);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.28);color:rgba(255,255,255,.78)}
.ag-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--navy-line);font-size:13px;background:rgba(255,255,255,.025);white-space:nowrap}
.ag-bar b{color:#fff;font-weight:var(--w2)}
.ag-run{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(127,220,214,.12);color:var(--accent-on-navy);font-weight:var(--w2);font-size:12px}
.ag-run em{font-style:normal}
.ag-run i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ag-run.live i{animation:agpulse 1.2s ease-in-out infinite}
.ag-tag{font-size:12px;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:1px 9px}
.ag-legend{margin-left:auto;display:flex;gap:14px;font-size:12px;color:rgba(255,255,255,.66)}
.ag-legend span{display:inline-flex;align-items:center;gap:6px}
.ag-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lg-agent{background:#174a8a;border:1px solid var(--accent-on-navy)}
.lg-gate{background:var(--accent)}
.lg-loop{border:1.5px dashed var(--amber)}
.ag-canvas{position:relative;padding:14px 14px 8px;background-color:#0a2850;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:16px 16px,80px 80px,80px 80px;background-position:-1px -1px}
.ag{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.ag-m{display:none}
/* edges, ports, packet */
.ag .eg{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.6;color:rgba(255,255,255,.4);transition:stroke .3s}
.ag .eg.on{stroke:rgba(127,220,214,.62);color:var(--accent-on-navy)}
.ag .eg.live{stroke:var(--accent-on-navy);stroke-width:2.2}
.ag .eg.loop{stroke:rgba(245,183,89,.5);color:var(--amber);stroke-dasharray:4 5}
.ag .eg.loop.live{stroke:var(--amber);stroke-width:2.2}
.ag .pt{fill:#0a2850;stroke:rgba(255,255,255,.5);stroke-width:1.4;transition:fill .3s}
.ag .pt.on{fill:var(--accent-on-navy);stroke:var(--accent-on-navy)}
.ag .pk{opacity:0;pointer-events:none}
.ag .pk .pc{fill:#fff}
.ag .pk .ph{fill:var(--accent-on-navy);opacity:.35}
.ag .pk.warn .pc{fill:#ffe1a8}
.ag .pk.warn .ph{fill:var(--amber)}
.ag .lc rect{fill:rgba(245,183,89,.12);stroke:rgba(245,183,89,.55);stroke-width:1}
.ag .lc text{fill:var(--amber);font-size:12px;font-weight:600}
.ag-m .lc text{font-size:12px}
.ag .lc use{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag .lc.live rect{fill:rgba(245,183,89,.24)}
/* nodes */
.ag .nd .bx{fill:#103a70;stroke:rgba(127,220,214,.3);stroke-width:1.2;transition:stroke .3s,fill .3s}
.ag .nd.plain .bx{fill:#0c2e5b;stroke:rgba(255,255,255,.32)}
.ag .nd .tile{fill:rgba(255,255,255,.09)}
.ag .nd .ic{fill:none;stroke:var(--accent-on-navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ag .nd.plain .ic{stroke:#fff}
.ag .nd .lb{fill:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ag .nd .en{fill:var(--accent-on-navy);font-size:11.5px}
.ag .nd.plain .en{fill:rgba(255,255,255,.65)}
.ag .nd .dv{stroke:rgba(255,255,255,.1)}
.ag .nd .mt{fill:rgba(255,255,255,.74);font-size:12px}
.ag .nd .sp{fill:rgba(255,255,255,.6);font-size:11px;font-weight:600;letter-spacing:.04em}
.ag .nd .tb{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.12)}
.ag .nd .ti{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ag .chip rect{fill:rgba(255,255,255,.08);transition:fill .3s}
.ag .chip text{fill:rgba(255,255,255,.6);font-size:11px;font-weight:600}
.ag-m .chip text{font-size:12.5px}
.ag-m .nd .lb{font-size:16px}
.ag-m .nd .en{font-size:13.5px}
.ag .nd[data-s="run"] .bx{stroke:var(--accent-on-navy);stroke-width:2;fill:#14467f}
.ag .nd[data-s="run"] .chip rect{fill:rgba(127,220,214,.2);animation:agpulse 1s ease-in-out infinite}
.ag .nd[data-s="run"] .chip text{fill:var(--accent-on-navy)}
.ag .nd[data-s="done"] .chip rect{fill:rgba(3,162,157,.3)}
.ag .nd[data-s="done"] .chip text{fill:#a6f0ea}
.ag .nd[data-s="fail"] .bx{stroke:var(--amber);stroke-width:2}
.ag .nd[data-s="fail"] .chip rect{fill:rgba(245,183,89,.2)}
.ag .nd[data-s="fail"] .chip text{fill:var(--amber)}
/* approval gate (HITL) */
.ag .nd.gate .bx{fill:var(--accent);stroke:#5fe0d9;stroke-width:1.5}
.ag .nd.gate .tile{fill:rgba(5,29,60,.14)}
.ag .nd.gate .ic{stroke:var(--navy-deep)}
.ag .nd.gate .lb{fill:var(--navy-deep)}
.ag .nd.gate .en,.ag .nd.gate .mt{fill:rgba(5,29,60,.82)}
.ag .nd.gate .dv{stroke:rgba(5,29,60,.18)}
.ag .nd.gate .chip rect{fill:rgba(5,29,60,.16)}
.ag .nd.gate .chip text{fill:var(--navy-deep)}
.ag .nd.gate[data-s="wait"] .chip rect{fill:#fff}
.ag .nd.gate[data-s="done"] .chip rect{fill:var(--navy-deep)}
.ag .nd.gate[data-s="done"] .chip text{fill:#a6f0ea}
.ag .nd.gate .ring{fill:none;stroke:var(--accent-on-navy);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.ag .nd.gate[data-s="wait"] .ring{animation:agring 1.1s ease-out infinite}
.ag .gb rect{transition:transform .15s,fill .15s}
.ag .gb text{font-size:12px;font-weight:700}
.ag-m .gb text{font-size:12.5px}
.ag .gb.no rect{fill:none;stroke:rgba(5,29,60,.45);stroke-width:1.2}
.ag .gb.no text{fill:var(--navy-deep)}
.ag .gb.ok rect{fill:var(--navy-deep)}
.ag .gb.ok text{fill:#fff}
.ag .nd.gate[data-s="wait"] .gb.ok rect{fill:#0b3466;stroke:#fff;stroke-width:1.5}
.ag .nd.gate.press .gb.ok rect{fill:#020f22;transform:translateY(1px)}
.ag .cur{opacity:0;fill:#fff;stroke:var(--navy-deep);stroke-width:1.2;stroke-linejoin:round;transition:opacity .25s}
.ag .nd.gate.press .cur,.ag .nd.gate.aim .cur{opacity:1}
/* footer: log + minimap */
.ag-foot{display:flex;gap:14px;align-items:stretch;border-top:1px solid var(--navy-line);padding:10px 14px 12px 16px;background:rgba(0,0,0,.12)}
.aglog{flex:1;min-width:0;height:72px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;line-height:24px}
.aglog li{display:none;gap:10px;align-items:center;white-space:nowrap}
.aglog li.on{display:flex}
.aglog li.new{animation:aglog .35s var(--ease)}
.aglog i{font-style:normal;font-size:12px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.aglog b{flex:none;min-width:40px;text-align:center;font-size:12px;font-weight:600;border-radius:5px;padding:0 6px;line-height:18px;background:rgba(127,220,214,.12);color:var(--accent-on-navy)}
.aglog li.w b{background:rgba(245,183,89,.2);color:#ffd28a}
.aglog li.g b{background:var(--accent);color:var(--navy-deep)}
.aglog span{overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.78)}
.aglog li:last-child span{color:#fff}
.ag-mini{flex:none;width:124px;border:1px solid var(--navy-line);border-radius:8px;padding:6px 7px 4px;background:rgba(5,29,60,.5);display:flex;flex-direction:column;gap:2px}
.ag-mini svg{display:block;width:100%;height:auto}
.ag-mini span{font-size:11px;color:rgba(255,255,255,.68);letter-spacing:.04em}
.ag-mini rect{fill:rgba(255,255,255,.18);transition:fill .3s}
.ag-mini rect.gate{fill:rgba(3,162,157,.6)}
.ag-mini rect.run{fill:var(--accent-on-navy)}
.ag-mini rect.vp{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
@keyframes agpulse{50%{opacity:.45}}
@keyframes agring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@keyframes aglog{from{transform:translateY(24px)}to{transform:none}}

/* hero visual 2: document stack */
.stack{position:relative;aspect-ratio:1.18;max-width:600px;margin-left:auto;width:100%}
.stack .sheet{position:absolute;width:76%;background:#fff;border-radius:8px;padding:6px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.stack .sheet img{border-radius:4px}
.stack .sheet{width:70%;transition:transform .6s var(--ease)}
.stack .s1{left:16%;top:0;transform:rotate(-4deg)}
.stack .s2{left:24%;top:11%;transform:rotate(-1deg)}
.stack .s3{left:30%;top:23%;transform:rotate(2.5deg)}
.slide.is-active .stack .s1{animation:sheetin .8s var(--ease) both}
.slide.is-active .stack .s2{animation:sheetin .8s .12s var(--ease) both}
.slide.is-active .stack .s3{animation:sheetin .8s .24s var(--ease) both}
@keyframes sheetin{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.stack .chip{position:absolute;right:0;top:0;background:#fff;color:var(--navy-deep);border-radius:12px;padding:14px 18px;font-weight:var(--w2);font-size:15px;line-height:1.35;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.stack .chip b{display:block;font-size:24px;font-weight:var(--w3);letter-spacing:-0.02em}
.stack .chip .ico{color:var(--accent-ink);width:28px;height:28px}

/* hero visual 3 + mockups: app window */
.win{background:#fff;color:var(--ink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-size:15px;line-height:1.45}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc;font-size:13px;font-weight:var(--w2);color:var(--muted)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#dfe4ea}
.win-bar span{margin-left:8px}
.win-body{padding:20px}
.hero .win{max-width:540px;margin-left:auto}
.gate-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gate-h b{font-size:19px;font-weight:var(--w3)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--w2);padding:4px 10px;border-radius:999px;background:var(--bg-soft);color:var(--muted);white-space:nowrap}
.tag.gate{background:var(--accent-soft);color:var(--accent-ink)}
.tag.agent{background:#e9eff8;color:var(--navy-2)}
.tag.warn{background:#fdf1e3;color:#8a4a06}
.checks{margin-top:16px;border:1px solid var(--line);border-radius:10px}
.checks li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .ico{width:20px;height:20px;color:var(--accent-ink)}
.checks small{margin-left:auto;color:var(--muted);font-size:13px}
.gate-btns{display:flex;gap:10px;margin-top:18px}
.gate-btns span{flex:1;text-align:center;border-radius:9px;padding:11px 0;font-weight:var(--w2);border:1.5px solid var(--line-2);color:var(--muted)}
.gate-btns span.ok{background:var(--navy);border-color:var(--navy);color:#fff}
.gate-log{margin-top:14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.gate-log .ico{width:16px;height:16px}

/* hero visual 2: deliverables card */
.dl-card{position:absolute;left:0;bottom:2%;width:56%;min-width:260px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.4);padding:16px 16px 12px;font-size:14px;line-height:1.35}
.dl-h{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dl-h .ico{width:22px;height:22px;color:var(--accent-ink)}
.dl-h b{font-size:17px;font-weight:var(--w3);letter-spacing:-.01em}
.dl-h .pill{margin-left:auto;font-size:12px;font-weight:var(--w2);color:#fff;background:var(--navy);border-radius:999px;padding:3px 10px}
.dl-card ol{margin-top:6px}
.dl-card li{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px dashed var(--line)}
.dl-card li:last-child{border-bottom:0}
.dl-card li .no{font-size:11px;font-weight:var(--w2);color:var(--muted);font-variant-numeric:tabular-nums;width:16px}
.dl-card li .ico{width:17px;height:17px;color:var(--navy-2)}
.dl-card li .nm{font-weight:var(--w2);font-size:13.5px}
.dl-card li .ok{margin-left:auto;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--accent);color:#fff;stroke-width:2.6}
.slide.is-active .dl-card li .ok{animation:okin .4s calc(.6s + var(--i) * .38s) var(--ease) both}
.slide.is-active .dl-card li{animation:rowin .4s calc(.5s + var(--i) * .38s) var(--ease) both}
.dl-f{margin-top:6px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@keyframes okin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:.35}to{opacity:1}}

/* hero visual 3: approval window */
.gatewin{position:relative;overflow:visible}
.gatewin .win-bar{border-radius:14px 14px 0 0}
.gatewin .win-bar .cnt{margin-left:auto;font-style:normal;font-size:12px;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px}
.gatewin .gate-h .tag{display:inline-grid}
.gatewin .gate-h .tag>span{grid-area:1/1;text-align:center}
.gatewin .st-ok{visibility:hidden}
.gate-sub{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;color:var(--muted)}
.gate-sub .ico{width:15px;height:15px}
.gate-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;margin-top:16px}
.gl{font-size:12px;font-weight:var(--w2);color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.gl .tag{font-size:11px;padding:1px 8px}
.gatewin .checks{margin-top:0}
.gatewin .checks li{padding:10px 12px;gap:10px;font-size:14px}
.gatewin .checks small{font-size:11px;font-weight:var(--w2);color:var(--navy-2);background:#e9eff8;border-radius:5px;padding:1px 6px}
.slide.is-active .gatewin .checks .ico{animation:okin .35s calc(.4s + var(--i) * .35s) var(--ease) both}
.draft-box{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fbfcfd}
.draft-box .gl{margin-bottom:0}
.draft-box b{font-size:13.5px;font-weight:var(--w2)}
.draft-box .pass{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--w2);color:var(--accent-ink)}
.draft-box .pass .ico{width:15px;height:15px}
.gatewin .gate-btns span{position:relative}
.gatewin .gate-btns span.ok{isolation:isolate;overflow:visible}
.gatewin .gate-btns span.ok::before{content:"";position:absolute;inset:-5px;border-radius:13px;border:2px solid var(--accent);opacity:0;z-index:-2}
.gatewin .gate-btns span.ok::after{content:"";position:absolute;inset:-1.5px;border-radius:9px;background:var(--accent-ink);opacity:0;z-index:-1}
.gatewin .cur{position:absolute;width:16px;height:22px;right:22%;top:60%;fill:#fff;stroke:var(--navy-deep);stroke-width:1.2;opacity:0}
.slide.is-active .gatewin .gate-btns span.ok{animation:okpress 3.6s 1.4s var(--ease) both}
.slide.is-active .gatewin .gate-btns span.ok::before{animation:okring 3.6s 1.4s var(--ease) both}
.slide.is-active .gatewin .gate-btns span.ok::after{animation:okfill 3.6s 1.4s steps(1) both}
.slide.is-active .gatewin .gate-btns span.ok{animation-name:okpress}
.slide.is-active .gatewin .cur{animation:curmove 3.6s 1.4s var(--ease) both}
.slide.is-active .gatewin .toast{animation:toastin 3.6s 1.4s var(--ease) both}
.slide.is-active .gatewin .st-wait{animation:hideat 3.6s 1.4s steps(1) both}
.slide.is-active .gatewin .st-ok{animation:showat 3.6s 1.4s steps(1) both}
.toast{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--navy-deep);color:#fff;border:1px solid rgba(127,220,214,.4);border-radius:12px;padding:10px 16px;font-size:13px;box-shadow:0 18px 40px rgba(0,0,0,.35);white-space:nowrap;opacity:0}
.toast .ico{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--accent);color:var(--navy-deep);stroke-width:2.6}
.toast b{display:block;font-size:13.5px}
.toast span{color:rgba(255,255,255,.75);line-height:1.35}
@keyframes okpress{0%,42%{transform:none}46%{transform:scale(.97)}52%,100%{transform:none}}
@keyframes okring{0%,42%{opacity:0;transform:scale(.98)}48%{opacity:.8;transform:scale(1)}100%{opacity:.5;transform:scale(1)}}
@keyframes okfill{0%,50%{opacity:0}51%,100%{opacity:1}}
@keyframes curmove{0%{opacity:0;translate:40px 26px}20%{opacity:1}42%{translate:0 0;opacity:1}47%{translate:0 2px}75%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes toastin{0%,50%{opacity:0;transform:translate(-50%,10px)}58%,100%{opacity:1;transform:translate(-50%,0)}}
@keyframes hideat{0%,50%{visibility:visible}51%,100%{visibility:hidden}}
@keyframes showat{0%,50%{visibility:hidden}51%,100%{visibility:visible}}

/* sub page head */
.phead{background:var(--navy-deep);color:#fff;min-height:40vh;display:flex;align-items:flex-end;padding:56px 0 64px}
.phead .wrap{width:100%}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:28px}
.crumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}
.crumb a{color:rgba(255,255,255,.85);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb [aria-current]{color:#fff}
.phead h1{color:#fff;font-size:clamp(34px,4.4vw,56px);line-height:1.2;letter-spacing:-0.03em}
.phead p{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.78);max-width:40em}

/* sections */
.sec{padding:128px 0}
.sec.soft{background:var(--bg-soft)}
.sec.tight{padding:96px 0}
.sec-head{max-width:760px;margin-bottom:64px}
.sec-head p{margin-top:18px;font-size:18px;color:var(--text)}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sec-head.row > div{max-width:720px}

/* logo strip */
.logos{padding:44px 0 48px;border-bottom:1px solid var(--line);background:#fff}
.logos-h{text-align:center;font-size:14px;font-weight:var(--w2);color:var(--muted);letter-spacing:.04em;margin-bottom:26px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.hold .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.logo-set{display:flex;align-items:center;gap:72px;padding-right:72px}
.logo-item{position:relative;display:flex;align-items:center;justify-content:center;height:56px;flex:none}
.logo-item img{max-width:none;transition:opacity .25s}
.logo-item .c{position:absolute;opacity:0}
.logo-item:hover .c{opacity:1}
.logo-item:hover .m{opacity:0}
.logo-item.keep .c{position:static;opacity:1}
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 64px}

/* home: pillars */
.statement{max-width:900px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:72px}
.pillar{display:block;text-decoration:none;color:inherit;border-top:2px solid var(--ink);padding-top:28px}
.pillar .ico{width:40px;height:40px;color:var(--navy);stroke-width:1.4}
.pillar .no{float:right;font-size:14px;font-weight:var(--w2);color:var(--muted);font-variant-numeric:tabular-nums}
.pillar h3{margin-top:28px}
.pillar p{margin-top:12px;color:var(--text)}
.pillar .more{margin-top:24px}
.pillar:hover h3{color:var(--navy-2)}

/* home: product feature */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 44px;margin:40px 0 44px}
.facts dt{font-size:14px;font-weight:var(--w2);color:var(--muted)}
.facts dd{font-size:26px;font-weight:var(--w3);color:var(--ink);letter-spacing:-0.02em;margin-top:4px;line-height:1.3}
.paper{background:#fff;border-radius:12px;padding:10px;box-shadow:var(--shadow);border:1px solid var(--line)}
.paper img{border-radius:6px}

/* scenario preview cards (home) */
.scn-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.scn-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:box-shadow .25s,transform .25s}
.scn-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.scn-card .vis{background:var(--bg-soft);padding:36px 32px;border-bottom:1px solid var(--line)}
.scn-card .body{padding:28px 32px 32px}
.scn-card .body p{margin-top:10px}
.scn-card .effect{display:flex;width:fit-content;margin-top:18px}
.scn-card .more{display:flex;width:fit-content;margin-top:22px}

/* flow lanes (scenarios) */
.lanes{display:grid;gap:14px}
.lane{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.lane-h{font-size:14px;font-weight:var(--w2);color:var(--muted);line-height:1.35}
.lane-h b{display:block;color:var(--ink);font-size:16px}
.lane ol{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.st{position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 14px;border-radius:12px;font-size:16px;font-weight:var(--w2);line-height:1.3;color:var(--ink);background:#fff;border:1.5px solid var(--line-2)}
.st .ico{width:22px;height:22px}
.st small{display:block;font-size:12px;font-weight:var(--w2);margin-top:2px;letter-spacing:.02em}
.st:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8aa0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.st.m{color:var(--muted);background:transparent;border-style:dashed}
.st.m small{color:var(--muted)}
.st.a{background:var(--navy);border-color:var(--navy);color:#fff}
.st.a small{color:var(--accent-on-navy)}
.st.h{background:var(--accent);border-color:var(--accent);color:var(--navy-deep)}
.st.h small{color:var(--navy-deep)}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--muted)}
.legend-row span{display:inline-flex;align-items:center;gap:8px}
.legend-row i{width:14px;height:14px;border-radius:4px;display:inline-block}
.legend-row .k-a{background:var(--navy)}
.legend-row .k-h{background:var(--accent)}
.legend-row .k-m{border:1.5px dashed var(--line-2)}
.lane.compact{grid-template-columns:1fr}
.lane.compact ol{gap:22px}
.lane.compact .st{min-height:58px;font-size:15px;padding:8px 12px}
.lane.compact .st:not(:last-child)::after{right:-18px}

/* tabs */
.tablist{display:flex;gap:4px;border-bottom:1px solid var(--line-2);margin-bottom:48px}
.tab{appearance:none;background:none;border:0;padding:16px 18px;font-size:17px;font-weight:var(--w2);color:var(--muted);cursor:pointer;position:relative;display:flex;align-items:center;gap:10px;white-space:nowrap}
.tab .tn{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--navy)}
.tab[aria-selected="true"] .tn{color:var(--accent-ink)}
.panel[hidden]{display:none}
.panel.show{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* services: deliverable panel */
.dlv{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center}
.dlv h3{font-size:28px;letter-spacing:-0.02em}
.dlv .stage{display:inline-block;margin-top:12px;font-size:14px;font-weight:var(--w2);color:var(--accent-ink)}
.dlv p{margin-top:16px}
.ticks{margin-top:24px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks .ico{width:22px;height:22px;color:var(--accent-ink);margin-top:2px}
.ticks.no .ico{color:var(--muted)}
.mockdoc{background:#fff;border-radius:6px;aspect-ratio:1200/848;padding:5% 5.5%;display:flex;flex-direction:column;gap:3.2%;font-size:13px;color:var(--ink)}
.mockdoc .mk{font-size:12px;font-weight:var(--w2);color:var(--accent-ink)}
.mockdoc .mt{font-size:24px;font-weight:var(--w3);letter-spacing:-0.02em;border-bottom:2px solid var(--ink);padding-bottom:3%}
.mockdoc .sec-t{font-weight:var(--w2);display:flex;align-items:center;gap:8px}
.mockdoc .sec-t i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.mockdoc table{width:100%;border-collapse:collapse;font-size:12px}
.mockdoc th{background:var(--bg-soft);font-weight:var(--w2);text-align:left;padding:6px 8px;border:1px solid var(--line)}
.mockdoc td{border:1px solid var(--line);height:26px;padding:0 8px;color:var(--muted)}
.mockdoc .two{display:grid;grid-template-columns:1fr 1fr;gap:4%}
.mockdoc .kv div{display:flex;border:1px solid var(--line);border-top:0;font-size:12px}
.mockdoc .kv div:first-child{border-top:1px solid var(--line)}
.mockdoc .kv b{width:42%;background:var(--bg-soft);padding:5px 8px;font-weight:var(--w2)}
.mockdoc .kv span{padding:5px 8px;color:var(--muted)}

/* services: overview + scope */
.overview{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.overview div{padding:28px 24px 0 0}
.overview dt{font-size:14px;font-weight:var(--w2);color:var(--muted)}
.overview dd{margin-top:8px;font-size:24px;font-weight:var(--w3);color:var(--ink);letter-spacing:-0.02em;line-height:1.35}
.overview dd small{display:block;font-size:15px;font-weight:var(--w1);color:var(--muted);letter-spacing:0;margin-top:6px}
.scope{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.scope > div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px}
.scope h3{display:flex;align-items:center;gap:12px}
.scope h3 .ico{width:28px;height:28px;color:var(--accent-ink)}
.scope .no-h .ico{color:var(--muted)}
.scope .ticks{gap:16px;margin-top:28px;font-size:18px}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.steps::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:2px;background:var(--line-2)}
.step{position:relative}
.step .node{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 8px var(--bg)}
.sec.soft .step .node{box-shadow:0 0 0 8px var(--bg-soft)}
.step .node .ico{width:26px;height:26px}
.step .n{display:block;margin-top:28px;font-size:14px;font-weight:var(--w2);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.step h3{margin-top:6px}
.step .time{display:inline-block;margin-top:10px;font-size:15px;font-weight:var(--w2);color:var(--ink);background:var(--bg-soft);border-radius:999px;padding:3px 12px}
.sec.soft .step .time{background:#fff}
.step p{margin-top:14px}
.step .out{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.step .out b{display:block;color:var(--ink);font-weight:var(--w2);font-size:14px;margin-bottom:4px}

/* principles / rows */
.princ{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.princ li{border-top:1px solid var(--line-2);padding-top:28px}
.princ .ico{width:36px;height:36px;color:var(--navy);stroke-width:1.4}
.princ h3{margin-top:22px;font-size:20px;line-height:1.45}
.princ p{margin-top:10px;color:var(--muted)}
.rows li{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:baseline;padding:36px 0;border-top:1px solid var(--line-2)}
.rows li:last-child{border-bottom:1px solid var(--line-2)}
.rows .no{font-size:15px;font-weight:var(--w2);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.rows h3{font-size:26px}
.rows p{color:var(--text)}

/* scenarios page */
.scn-tabs{margin-bottom:56px}
.scn{display:grid;gap:56px}
.scn-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.scn-top .label{display:inline-block;font-size:13px;font-weight:var(--w2);color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:3px 12px;margin-bottom:20px}
.scn-top h2{font-size:clamp(28px,3vw,40px);line-height:1.25;letter-spacing:-0.025em}
.scn-top p{margin-top:18px}
.effect{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-weight:var(--w2);color:var(--ink);font-size:17px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.effect s{color:var(--muted);text-decoration:none}
.effect .ico{width:20px;height:20px;color:var(--accent-ink)}
.lanes-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 36px 30px}
.lanes-box .legend-row{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* mockup parts */
.mail{display:grid;grid-template-columns:42% 58%}
.mail .list li{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.mail .list li b{display:block;font-size:15px}
.mail .list li.sel{background:#eef3fa;box-shadow:inset 3px 0 0 var(--navy)}
.mail .list .tag{margin-top:6px}
.mail .draft{padding:16px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.bar{display:block;height:9px;border-radius:5px;background:#e6eaf0}
.bar.w9{width:92%}.bar.w8{width:80%}.bar.w7{width:70%}.bar.w6{width:60%}.bar.w5{width:48%}.bar.w4{width:38%}.bar.w3{width:28%}
.grid-t{width:100%;border-collapse:collapse;font-size:14px}
.grid-t th{font-size:13px;font-weight:var(--w2);color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfc}
.grid-t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.grid-t tr.flag td{background:#fff8ef}
.grid-t td .bar{width:70px}
.win-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--line);font-size:14px}
.btn-mini{display:inline-block;border-radius:8px;padding:8px 14px;font-weight:var(--w2);font-size:14px;background:var(--navy);color:#fff}
.btn-mini.line{background:#fff;color:var(--muted);border:1px solid var(--line-2)}
.bubble{margin:16px 20px 20px;display:flex;gap:12px;align-items:flex-start}
.bubble .av{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.bubble .av .ico{width:18px;height:18px}
.bubble .msg{background:var(--bg-soft);border-radius:4px 12px 12px 12px;padding:10px 14px;font-size:14px}
.bubble .msg b{display:block;font-size:13px;color:var(--muted);font-weight:var(--w2)}

/* resources */
.res{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.res-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.res-card .vis{background:var(--bg-soft);padding:44px 40px 0;display:flex;justify-content:center;align-items:flex-end;min-height:340px;overflow:hidden}
.res-card .vis.fan{position:relative}
.res-card .vis.fan img{position:absolute;width:62%;bottom:-18%;border-radius:6px;box-shadow:0 18px 40px rgba(5,29,60,.18);background:#fff;padding:4px}
.res-card .vis.fan img:nth-child(1){left:6%;transform:rotate(-6deg)}
.res-card .vis.fan img:nth-child(2){left:19%;bottom:-12%;transform:rotate(-1deg)}
.res-card .vis.fan img:nth-child(3){left:32%;bottom:-20%;transform:rotate(4deg)}
.res-card .vis.pdf{gap:20px}
.res-card .vis.pdf img{width:42%;box-shadow:0 18px 40px rgba(5,29,60,.18);border-radius:4px 4px 0 0}
.res-card .body{padding:36px 40px 40px;display:flex;flex-direction:column;gap:14px;flex:1}
.res-card .body .actions{margin-top:auto;padding-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14px;font-weight:var(--w2);color:var(--text);background:var(--bg-soft);border-radius:999px;padding:5px 12px}
.links2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.linkrow{display:flex;align-items:center;gap:24px;text-decoration:none;color:inherit;border-top:2px solid var(--ink);padding:28px 0}
.linkrow .ico.big{width:40px;height:40px;color:var(--navy);stroke-width:1.4}
.linkrow h3{font-size:22px}
.linkrow p{color:var(--muted);margin-top:4px}
.linkrow .go{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--navy);flex:none;transition:background .2s,color .2s}
.linkrow:hover .go{background:var(--navy);color:#fff;border-color:var(--navy)}

/* about: business info */
.biz{display:grid;grid-template-columns:200px 1fr;border-top:2px solid var(--ink)}
.biz dt,.biz dd{padding:20px 0;border-bottom:1px solid var(--line)}
.biz dt{font-weight:var(--w2);color:var(--muted);font-size:16px}
.biz dd{color:var(--ink)}

/* contact */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.opt{background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px}
.opt .ico.big{width:44px;height:44px;color:var(--navy);stroke-width:1.4}
.opt h2{font-size:28px;margin-top:28px;letter-spacing:-0.02em}
.opt p{margin-top:12px}
.opt .actions{margin-top:32px}
.opt.dark{background:var(--navy);border-color:var(--navy);color:rgba(255,255,255,.8)}
.opt.dark h2{color:#fff}
.opt.dark .ico.big{color:var(--accent-on-navy)}
.mini-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.mini-steps li{border-top:2px solid var(--line-2);padding-top:20px;font-size:18px;font-weight:var(--w2);color:var(--ink)}
.mini-steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-size:14px;color:var(--accent-ink);margin-bottom:8px;font-variant-numeric:tabular-nums}
.mini-steps small{display:block;font-size:15px;font-weight:var(--w1);color:var(--muted);margin-top:4px}

/* faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:72px}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;display:flex;align-items:center;gap:16px;padding:26px 0;cursor:pointer;font-size:19px;font-weight:var(--w2);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{margin-left:auto;transition:transform .25s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .a{padding:0 48px 28px 0;color:var(--text)}

/* cta band */
.band{background:var(--navy);color:#fff;padding:96px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}
.band h2{color:#fff}
.band p{margin-top:14px;color:rgba(255,255,255,.78);font-size:18px}
.band .actions{flex:none}

/* footer */
.ft{background:#fff;border-top:1px solid var(--line);padding:72px 0 40px;font-size:15px;color:var(--muted)}
.ft-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:56px}
.ft-brand .brand{font-size:18px}
.ft-brand p{margin-top:16px;max-width:22em}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ft-cols h2{font-size:15px;font-weight:var(--w2);color:var(--ink);letter-spacing:0;margin-bottom:16px}
.ft-cols li+li{margin-top:10px}
.ft-cols a{color:var(--muted);text-decoration:none}
.ft-cols a:hover{color:var(--navy);text-decoration:underline}
.ft-legal{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.ft-legal .row2{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:8px}
.ft-legal a{color:var(--ink);font-weight:var(--w2);text-decoration:none}
.ft-legal a:hover{text-decoration:underline}
.ft-legal .sep{color:var(--line-2);margin:0 6px}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1080px){
  .nav a{padding:10px 10px;font-size:15px}
}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  .top .cta{display:none}
  .nav{display:none;position:fixed;left:0;right:0;top:72px;bottom:0;z-index:45;background:#fff;flex-direction:column;gap:0;padding:8px var(--gut) calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav > a{display:flex;align-items:center;min-height:56px;padding:0 4px;font-size:18px;border-bottom:1px solid var(--line);border-radius:0}
  .nav > a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px}
  .nav-foot{margin-top:auto;padding-top:24px;display:grid;gap:10px}
  .nav-foot a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:12px;font-size:17px;font-weight:var(--w2);text-decoration:none}
  .nav-foot .nav-cta{background:var(--navy);color:#fff}
  .nav-foot .nav-tel{border:1.5px solid var(--line-2);color:var(--navy)}
  .nav-foot .ico{width:20px;height:20px}
  html.menu-open,html.menu-open body{overflow:hidden}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent-ink)}
  .slide .wrap{grid-template-columns:1fr;gap:44px}
  .slide{min-height:auto;padding:56px 0 112px}
  .stack{max-width:520px;margin:0 auto}
  .hero .win{margin:0 auto}
  .feature,.dlv,.scn-top,.faq-wrap{grid-template-columns:1fr;gap:44px}
  .pillars,.princ{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr 1fr;gap:48px 32px}
  .steps::before{display:none}
  .overview{grid-template-columns:1fr 1fr}
  .ft-top{grid-template-columns:1fr}
  .band .wrap{flex-direction:column;align-items:flex-start}
  .rows li{grid-template-columns:56px 1fr;gap:12px 20px}
  .rows li p{grid-column:2}
}
@media (min-width:961px){ .nav .nav-foot{display:none} }
@media (max-width:760px){
  :root{--gut:16px}
  body{font-size:16px}
  .sec{padding:80px 0}
  .sec.tight{padding:64px 0}
  .sec-head{margin-bottom:40px}
  .sec-head.row{flex-direction:column;align-items:flex-start}
  .display{font-size:clamp(30px,8.6vw,36px)}
  .slide .actions .btn{flex:1 1 auto}
  .hero-ctrl{bottom:28px}
  .dots button{width:40px}
  .ag-d,.ag-mini,.ag-legend{display:none}
  .ag-m{display:block}
  .ag-canvas{padding:10px 8px 6px}
  .ag-bar{padding:10px 12px}
  .ag-foot{padding:8px 12px 10px}
  .aglog{height:48px;font-size:13px}
  .stack{aspect-ratio:auto;padding-top:52%}
  .stack .sheet{width:74%}
  .stack .s1{left:22%;top:0}.stack .s2{left:24%;top:8%}.stack .s3{left:26%;top:16%}
  .dl-card{position:relative;left:auto;bottom:auto;width:100%;min-width:0;margin-top:-6%}
  .gate-grid{grid-template-columns:1fr}
  .toast{bottom:-18px;font-size:12px;padding:8px 12px}
  .scn-cards,.res,.opts,.links2,.scope{grid-template-columns:1fr}
  .scn-card .vis{padding:24px 18px}
  .scn-card .body{padding:22px 20px 24px}
  .facts{grid-template-columns:1fr 1fr;gap:16px 24px}
  .facts dd{font-size:22px}
  .overview dd{font-size:20px}
  .scope > div,.opt{padding:28px 22px}
  .steps{grid-template-columns:1fr;gap:36px}
  .tablist{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:0;margin-bottom:32px}
  .tab{border:1px solid var(--line-2);border-radius:10px;padding:12px;font-size:15px;white-space:normal;text-align:left}
  .tab[aria-selected="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
  .tab[aria-selected="true"] .tn{color:var(--accent-on-navy)}
  .tab[aria-selected="true"]::after{display:none}
  .lane{grid-template-columns:1fr;gap:10px}
  .lane ol{grid-template-columns:1fr;gap:20px}
  .st{min-height:54px;font-size:16px;padding:8px 14px}
  .st small{font-size:13px}
  .st:not(:last-child)::after{right:auto;left:28px;top:auto;bottom:-18px;transform:rotate(90deg)}
  .lanes-box{padding:22px 16px}
  .lane.compact ol{gap:20px}
  .lane.compact .st:not(:last-child)::after{right:auto;left:28px}
  .mail{grid-template-columns:1fr}
  .mail .draft{border-left:0;border-top:1px solid var(--line)}
  .grid-t{font-size:13px}
  .grid-t th,.grid-t td{padding:9px 8px}
  .grid-t td .bar{width:44px}
  .res-card .vis{min-height:240px;padding:28px 20px 0}
  .res-card .body{padding:26px 22px 28px}
  .mini-steps{grid-template-columns:1fr 1fr}
  .biz{grid-template-columns:1fr}
  .biz dt{padding-bottom:0;border-bottom:0}
  .biz dd{padding-top:6px}
  .faq summary{font-size:17px;padding:20px 0}
  .faq .a{padding-right:0}
  .ft-cols{grid-template-columns:1fr 1fr}
  .band{padding:72px 0}
  .phead{padding:40px 0 48px;min-height:34vh}
  .logo-set{gap:44px;padding-right:44px}
  .logo-item{zoom:.8}
  .count{display:none}
  .logo-grid{gap:28px 40px}
  .mockdoc .mt{font-size:15px}
  .mockdoc{font-size:10px;gap:2.4%}
  .mockdoc table,.mockdoc .kv div{font-size:9px}
  .mockdoc td{height:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .slide:not(.is-active) .copy > *{opacity:1;transform:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
  .marquee-track .logo-set[aria-hidden]{display:none}
  .logo-set{flex-wrap:wrap;justify-content:center;gap:32px 56px;padding:0 var(--gut)}
}

/* AI tools row (logo strip below partners; tools, not partners) */
.ai-row{margin-top:30px;padding-top:26px;border-top:1px dashed var(--line-2);max-width:1080px}
.ai-row .logos-h{margin-bottom:20px}
.ai-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 52px}
.ai-logos .logo-item{height:44px}
.ai-row.about{margin:56px auto 0;padding-top:40px}
@media (max-width:760px){
  .ai-logos{gap:20px 36px}
  .ai-logos .logo-item{zoom:.8}
}

/* buttons: full width */
.btn-block{width:100%}
.ft-legal a[href^="tel:"]{font-weight:var(--w1);color:inherit;text-decoration:underline;text-underline-offset:3px}

/* contact: form + side cards */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}
.cform-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px;scroll-margin-top:96px;box-shadow:0 10px 30px rgba(5,29,60,.06)}
.cform-card:focus{outline:none}
.cform .muted{margin-top:10px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fld{margin-top:22px;border:0;padding:0;min-width:0}
.fld label,.fld legend{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--w2);color:var(--ink);margin-bottom:8px;padding:0}
.req{font-size:12px;font-weight:var(--w2);color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:1px 6px}
.opt-l{font-size:12px;font-weight:var(--w1);color:var(--muted)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:10px;padding:12px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:120px;line-height:1.55}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,53,112,.14)}
.fld.bad input,.fld.bad textarea{border-color:#b42318;box-shadow:0 0 0 3px rgba(180,35,24,.10)}
.hint{margin-top:8px;font-size:14px;color:var(--muted)}
.err{margin-top:8px;font-size:14px;font-weight:var(--w2);color:#b42318}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;margin:0!important}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line-2);border-radius:999px;font-size:15px;font-weight:var(--w2);color:var(--text);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pill input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.pill input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.agree{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.chk{display:flex!important;align-items:center;gap:10px;min-height:44px;margin:0!important;cursor:pointer;font-size:15px}
.chk input{width:22px;height:22px;accent-color:var(--navy);flex:none;margin:0}
.agree a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--navy-2)}
.agree .err{flex-basis:100%;margin-top:0}
.fnote{margin-top:18px;padding:12px 14px;border-radius:10px;background:#fdf1e3;color:#7a3f04;font-size:15px}
.fnote a{color:inherit;font-weight:var(--w2)}
.cform .btn-block{margin-top:22px;min-height:56px;font-size:17px}
.cform .btn[disabled]{opacity:.6;cursor:progress}
.fsmall{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}
.cform-done{text-align:center;padding:24px 8px}
.cform-done .ok-ico{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.cform-done .ok-ico .ico{width:32px;height:32px;stroke-width:2.2}
.cform-done h2{margin-top:20px;font-size:24px}
.cform-done p{margin-top:12px}
.contact-side{display:grid;gap:20px}
.contact-side .opt{padding:32px}
.contact-side .opt h2{font-size:24px;margin-top:20px}
.tel-no{margin-top:10px!important;font-size:28px;font-weight:var(--w3);letter-spacing:-.01em}
.tel-no a{color:#fff;text-decoration:none}
.hours{margin-top:4px!important;font-size:14px;color:rgba(255,255,255,.72)}
.contact-side .actions{margin-top:22px}
.contact-side .btn-line{white-space:normal;word-break:break-all}

/* privacy */
.policy-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.policy-toc{position:sticky;top:96px;border-left:2px solid var(--line);padding-left:18px}
.policy-toc p{font-size:13px;font-weight:var(--w2);color:var(--muted);letter-spacing:.04em;margin-bottom:10px}
.policy-toc li a{display:block;padding:6px 0;font-size:15px;color:var(--text);text-decoration:none}
.policy-toc li a:hover{color:var(--navy)}
.policy{max-width:760px}
.policy section{padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.policy section:first-child{border-top:0;padding-top:0}
.policy h2{display:flex;align-items:baseline;gap:12px;font-size:22px}
.policy h2 span{font-size:14px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.policy p,.policy ul{margin-top:12px}
.policy a{color:var(--navy-2)}
.dots li{position:relative;padding-left:16px;margin-top:6px}
.dots li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tbl-wrap{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptbl{width:100%;border-collapse:collapse;font-size:15px}
.ptbl th{background:var(--bg-soft);text-align:left;font-size:14px;color:var(--muted);font-weight:var(--w2);padding:12px 16px}
.ptbl td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink)}

/* AI 상담 (FAQ chat) */
.chat{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,calc(12px + env(safe-area-inset-bottom)));z-index:50}
.chat-fab{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-size:16px;font-weight:var(--w2);cursor:pointer;box-shadow:0 14px 34px rgba(5,29,60,.28);transition:transform .25s var(--ease),opacity .25s}
.chat-fab .ico{width:22px;height:22px;color:var(--accent-on-navy)}
.chat-fab:hover{background:var(--navy-2)}
.chat-fab[aria-expanded="true"]{opacity:0;transform:scale(.9);pointer-events:none}
.chat.tucked .chat-fab{opacity:0;transform:translateY(90px);pointer-events:none}
.chat-panel{position:absolute;right:0;bottom:0;width:392px;max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(5,29,60,.28);overflow:hidden;transform-origin:bottom right}
.chat-panel[hidden]{display:none}
.chat-panel.in{animation:chatin .28s var(--ease)}
@keyframes chatin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 14px 14px 18px;background:var(--navy-deep);color:#fff}
.chat-head h2{color:#fff;font-size:17px;letter-spacing:-.01em}
.chat-head p{font-size:13px;color:rgba(255,255,255,.7)}
.chat-av{width:38px;height:38px;border-radius:11px;background:rgba(127,220,214,.16);color:var(--accent-on-navy);display:flex;align-items:center;justify-content:center;flex:none}
.chat-x{margin-left:auto;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chat-x:hover{background:rgba(255,255,255,.08)}
.chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 6px;display:flex;flex-direction:column;gap:12px;background:var(--bg-soft)}
.msg{max-width:88%;font-size:15px;line-height:1.6}
.msg p{padding:12px 14px;border-radius:4px 16px 16px 16px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--navy);border-color:var(--navy);color:#fff;border-radius:16px 4px 16px 16px}
.msg.new{animation:msgin .3s var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .lk{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.msg .lk a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--line-2);color:var(--navy);font-size:14px;font-weight:var(--w2);text-decoration:none}
.msg .lk a .ico{width:16px;height:16px}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--bg-soft);border-top:1px solid var(--line)}
.chat-chips button{min-height:44px;padding:0 14px;border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:var(--w2);cursor:pointer}
.chat-chips button:hover{background:var(--navy);color:#fff}
.chat-chips button.home{border-color:var(--line-2);color:var(--muted)}
.chat-chips button.home .ico{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.chat-exit{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.chat-exit a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:12px;border:1.5px solid var(--line-2);font-size:14px;font-weight:var(--w2);color:var(--navy);text-decoration:none;white-space:nowrap}
.chat-exit a.go{background:var(--navy);border-color:var(--navy);color:#fff}
.chat-exit .ico{width:17px;height:17px}
.chat-backdrop{display:none}
@media (max-width:760px){
  .contact-grid,.policy-wrap{grid-template-columns:1fr;gap:20px}
  .cform-card{padding:24px 18px;border-radius:16px}
  .frow{grid-template-columns:1fr}
  .contact-side .opt{padding:24px 20px}
  .policy-toc{position:static;border-left:0;padding:16px 18px;background:var(--bg-soft);border-radius:12px}
  .policy-toc ol{display:flex;flex-wrap:wrap;gap:4px 8px}
  .policy-toc li a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:999px}
  .ptbl{font-size:14px}
  .ptbl th,.ptbl td{padding:10px 12px}
  .chat{right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  .chat-fab{min-height:52px;padding:0 18px 0 14px;font-size:15px}
  .chat.open{left:0;right:0;bottom:0}
  .chat-panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:86vh;max-height:86dvh;border-radius:20px 20px 0 0;border-bottom:0}
  .chat-panel.in{animation:sheetup .3s var(--ease)}
  .chat-backdrop{display:block;position:fixed;inset:0;background:rgba(5,29,60,.42);z-index:-1}
  .chat-backdrop[hidden]{display:none}
  .chat-exit{grid-template-columns:1fr 1fr 1fr}
  .chat-exit a{font-size:13.5px;gap:4px}
  html.chat-lock,html.chat-lock body{overflow:hidden}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* touch targets: 44px minimum (all widths for brand, more, crumbs; footer on phones) */
.brand{min-height:44px}
.more{min-height:44px}
.crumb a,.crumb [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.crumb ol{margin-bottom:16px}
.req,.opt-l{font-size:13px}
.biz dd a,.tel-no a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){
  .dots button{width:44px;height:44px}
  .ft-cols li+li{margin-top:0}
  .ft-cols a{display:inline-flex;align-items:center;min-height:44px}
  .ft-cols h2{margin-bottom:4px}
  .ft-legal a{display:inline-flex;align-items:center;min-height:44px}
  .ft-legal p{font-size:14px}
  .ft-legal .row2{gap:0 24px;align-items:center}
  .scn-card .more,.pillar .more{margin-top:12px}
}
.crumb a{position:relative}
.crumb a::after{content:"";position:absolute;inset:0 -14px}
.ft-cols a{min-width:44px}
html.menu-open .chat{display:none}
.quick-call{display:none}
@media (max-width:760px){
  .quick-call{display:block}
  .quick-call .btn{min-height:54px;font-size:17px}
  .quick-call p{margin-top:8px;text-align:center;font-size:14px;color:var(--muted)}
}