:root{--ink:#1d1d1f;--sub:#5b5b66;--line:#e6e6ec;--bg:#fbfbfd;--accent:#3a6df0;--card:#fff}
@media (prefers-color-scheme:dark){:root{--ink:#f2f2f5;--sub:#a5a5b0;--line:#2c2c33;--bg:#111114;--card:#18181c}}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.logo{font-weight:700;font-size:20px;letter-spacing:.01em}
.lang button{border:1px solid var(--line);background:transparent;color:var(--sub);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer}
.lang button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.hero{padding:72px 0 56px;text-align:center}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.2;margin:0 0 18px}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--sub);margin:0 auto 28px;max-width:640px}
.cta{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:600}
.btn.main{background:var(--accent);color:#fff}.btn.alt{border:1px solid var(--line);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:24px 0 56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{margin:0 0 8px;font-size:18px}.card p{margin:0;color:var(--sub);font-size:15px}
h2{font-size:26px;margin:24px 0 8px;text-align:center}
.lead{color:var(--sub);text-align:center;margin:0 auto 8px;max-width:640px}
ol.how{max-width:640px;margin:16px auto 56px;padding-left:22px;color:var(--sub)}ol.how li{margin:8px 0}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--sub);font-size:13px;text-align:center}
.reel{margin:40px auto 0;max-width:900px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.reel video{display:block;width:100%;height:auto}
.reel .v{display:none}
@media (prefers-reduced-motion:reduce){.reel video{animation:none}}
[data-en]{display:none}html[lang=en] [data-ko]{display:none}html[lang=en] [data-en]{display:revert}
nav.tabs{display:flex;gap:4px;flex-wrap:wrap}
nav.tabs a{color:var(--sub);text-decoration:none;padding:6px 12px;border-radius:999px;font-size:14px}
nav.tabs a[aria-current=page]{color:var(--ink);background:var(--line)}
.flow{overflow:hidden;padding:8px 0 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.flow .track{display:flex;gap:16px;width:max-content;animation:flow 48s linear infinite}
.flow:hover .track{animation-play-state:paused}
.flow figure{margin:0;width:380px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.flow video,.flow img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#000}
.flow figcaption{padding:10px 14px;font-size:14px;color:var(--sub)}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.flow .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.page{padding:40px 0 64px}.page h1{font-size:34px;margin:0 0 8px}.page>p.lead{text-align:left;margin:0 0 24px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shots img,.shots video{display:block;width:100%;height:auto;background:#000}.shots video{aspect-ratio:16/10;object-fit:contain}
.shots figcaption{padding:10px 14px;font-size:14px;color:var(--sub)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 18px 60px;margin:0 0 12px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.steps h3{margin:0 0 6px;font-size:17px}.steps p{margin:0;color:var(--sub)}
.gal{max-width:900px;margin:40px auto 56px}
.gal .stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.gal .stage img{display:block;width:100%;height:auto;cursor:pointer}
.gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:26px;cursor:pointer}
.gal .prev{left:12px}.gal .next{right:12px}
.gal .gcap{text-align:center;color:var(--sub);margin:12px 0}
.gal .thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gal .th{border:2px solid transparent;border-radius:10px;padding:0;background:none;cursor:pointer;opacity:.6}
.gal .th.on{border-color:var(--accent);opacity:1}
.gal .th img{display:block;width:96px;height:60px;object-fit:cover;border-radius:8px}
.reel{position:relative}.snd{position:absolute;right:12px;bottom:12px;z-index:2;border:0;border-radius:999px;padding:8px 14px;background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:pointer}
@media (min-width:700px){.grid.g2{grid-template-columns:repeat(2,1fr)}}
.player .stage{position:relative;aspect-ratio:1728/1080;background:#000;overflow:hidden}.player .stage picture,.player .stage img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer;opacity:0;transition:opacity .2s}.player.live video{opacity:1}
.pbar{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff}
.pbar{transition:opacity .25s}.player.idle,.player.idle video{cursor:none}.player.idle .pbar{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pbar{transition:none}}
.prow{display:flex;align-items:center;gap:6px;margin-top:4px}
.pbar button{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;width:36px;height:36px;padding:0;font-size:15px;line-height:1;cursor:pointer;flex:none}
.ptime{font-size:13px;font-variant-numeric:tabular-nums;margin-left:4px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.rng{-webkit-appearance:none;appearance:none;display:block;height:20px;margin:0;background:transparent;cursor:pointer;--p:0%}
.rng::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.35) var(--p))}
.rng::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.rng::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;margin-top:-5px}
.rng::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
#pseek{width:100%}.rng.vol{width:72px;flex:none}
.player:focus-visible,.pbar button:focus-visible,.rng:focus-visible,.pdots button:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px}
.player:fullscreen{max-width:none;width:100%;height:100%;border-radius:0;border:0;display:flex;align-items:center;justify-content:center;background:#000}.player:fullscreen .stage{width:min(100vw,calc(100vh*1.6));height:auto;max-height:100vh}
.player:-webkit-full-screen{max-width:none;width:100%;height:100%;border-radius:0;border:0;display:flex;align-items:center;justify-content:center;background:#000}.player:-webkit-full-screen .stage{width:min(100vw,calc(100vh*1.6));height:auto}
@media (max-width:420px){.rng.vol{display:none}.pbar button{width:34px;height:34px}.ptime{font-size:12px;margin-left:2px}.prow{gap:4px}}
.pdots{display:flex;gap:8px;justify-content:center;margin:12px 0 0}
.pdots button{width:12px;height:12px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.pdots button.on{background:var(--accent)}
/* ---- ZEUSKIM-MOBILE: adaptive layout (no framework; clamp() type and spacing) ---- */
body{font-size:clamp(16px,.35vw + 15px,17px);-webkit-text-size-adjust:100%}
img,video{max-width:100%}
.wrap{padding:0 clamp(16px,4.5vw,24px)}
header{flex-wrap:wrap;gap:8px 16px;padding:clamp(10px,2.5vw,20px) 0}
.logo a{display:inline-flex;align-items:center;min-height:44px}
.hero{padding:clamp(32px,9vw,72px) 0 clamp(28px,6vw,56px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
h2{font-size:clamp(22px,3.2vw + 12px,26px)}
.page{padding:clamp(20px,5vw,40px) 0 clamp(36px,8vw,64px)}.page h1{font-size:clamp(26px,5vw + 8px,34px)}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));padding:clamp(16px,4vw,24px) 0 clamp(32px,7vw,56px)}
.shots{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.shots.phones{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));max-width:900px}
.shots.phones img{border-radius:0;aspect-ratio:780/1688;object-fit:contain}
h2.sh{text-align:left;margin:32px 0 12px}
.card h3{font-size:clamp(17px,1.4vw + 12px,18px)}.card p{font-size:15px}
.flow figure{width:min(380px,78vw)}
.steps li{padding:16px 14px 16px 54px}.steps li::before{left:14px}
footer{font-size:14px;padding:20px 0 32px}
.lang button{min-height:44px;min-width:44px;font-size:15px;padding:4px 14px}
nav.tabs a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;white-space:nowrap}
@media (max-width:820px){
  header{display:grid;grid-template-columns:1fr auto;align-items:center}
  nav.tabs{grid-column:1/-1;order:3;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,4.5vw,24px));padding:0 clamp(16px,4.5vw,24px);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a{flex:none;scroll-snap-align:center;padding:0 14px}
  nav.tabs a[aria-current=page]{background:var(--ink);color:var(--bg)}
}
@media (max-width:700px){.pbar button{width:44px;height:44px;font-size:17px}.prow{flex-wrap:wrap;gap:4px 6px}.ptime{font-size:13px}.pbar{padding:14px 10px 8px}.rng.vol{display:none}}
.pdots{gap:0}.pdots button{width:32px;height:44px;background:none;position:relative}.pdots button::after{content:"";position:absolute;left:10px;right:10px;top:16px;bottom:16px;border-radius:50%;background:var(--line)}.pdots button.on::after{background:var(--accent)}
.reel .snd{min-height:44px;min-width:44px}
/* gallery: segmented control + two panes */
.gal{margin:clamp(24px,6vw,40px) auto clamp(32px,7vw,56px)}
.seg{display:flex;width:fit-content;margin:0 auto 16px;padding:4px;border-radius:999px;background:var(--line)}
.gtab{min-height:44px;min-width:44px;padding:0 clamp(18px,5vw,28px);border:0;border-radius:999px;background:transparent;color:var(--sub);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.gtab[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.gtab:focus-visible,.gal .nav:focus-visible,.gal .th:focus-visible,.gal .pth:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px}
.gal .gcap{font-size:15px;min-height:1.6em}
.gal .th{min-width:44px;min-height:44px}
.phwrap{position:relative}
.ptrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 8px}
.ptrack::-webkit-scrollbar{display:none}
.slide{margin:0;flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;text-align:center}
.slide img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.16);background:var(--card)}
.slide figcaption{padding:10px 4px 0;font-size:15px;color:var(--sub)}
.phwrap .nav{top:42%}
.pthumbs{display:flex;gap:8px;justify-content:center;margin-top:12px}
.pth{width:44px;padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;opacity:.6}
.pth.on{border-color:var(--accent);opacity:1}.pth img{display:block;width:100%;height:auto;border-radius:5px}
@media (max-width:699px){
  .slide{flex-basis:100%}.slide img{width:min(100%,270px);margin:0 auto}
  .phwrap .nav{width:44px;height:44px}.gal .prev,.phwrap .pprev{left:2px}.gal .next,.phwrap .pnext{right:2px}
  .shots.phones{grid-template-columns:repeat(2,1fr);gap:12px}
}
.badge{margin:0 0 6px;font-size:clamp(13px,1vw + 9px,13px);color:var(--accent);font-weight:600}
.pdots{flex-wrap:wrap}.pdots button{width:44px}.pdots button::after{left:17px;right:17px}
.shots figcaption{font-size:15px}
@media (max-width:700px){.badge{font-size:15px}}
@media (min-width:700px){.phwrap{padding:0 56px}.phwrap .pprev{left:4px}.phwrap .pnext{right:4px}.phwrap .nav{background:rgba(0,0,0,.55)}}
/* ZEUSKIM-SHOTS: gallery arrows sit BESIDE the picture (desktop) or in the thumbnail row (phones) - never on top of it */
.gal{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,calc(100vw - 48px));max-width:none}
.gal .nav{position:static;transform:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--line);color:var(--ink);font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex:none}
.gal .nav:hover{background:var(--accent);color:#fff}
.dgal,.phwrap{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"prev view next" ". cap ." ". orig ." ". thumbs .";column-gap:12px;align-items:center;padding:0}
.dgal .prev,.phwrap .pprev{grid-area:prev}.dgal .next,.phwrap .pnext{grid-area:next}
.dview{grid-area:view;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.dview img{display:block;width:100%;height:auto;aspect-ratio:3456/2160;cursor:pointer}
.dgal .gcap{grid-area:cap;margin:12px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.dgal .gorig{grid-area:orig;margin:0 0 10px;text-align:center;font-size:14px;color:var(--sub)}
.dgal .gorig a{color:var(--accent);display:inline-flex;align-items:center;min-height:32px}
.dgal .thumbs{grid-area:thumbs;display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.dgal .th{flex:none;scroll-snap-align:center}
.dgal .th img{width:96px;height:60px}
.phwrap{grid-template-areas:"prev view next" ". thumbs ."}
.phwrap .ptrack{grid-area:view}.phwrap .pthumbs{grid-area:thumbs;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:none}
.pth{flex:none}
@media (max-width:699px){
  .dgal,.phwrap{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"view view view" "cap cap cap" "orig orig orig" "prev thumbs next";column-gap:8px}
  .phwrap{grid-template-areas:"view view view" "prev thumbs next"}
  .dgal .thumbs,.phwrap .pthumbs{margin:0}
  .dgal .th img{width:72px;height:45px}
}
.dshots{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.dshots a{display:block}
.dshots img{aspect-ratio:3456/2160}
.phwrap .pprev,.phwrap .pnext{align-self:center}

.identity{font-weight:700;color:var(--sub);letter-spacing:.03em}.state{font-size:13px;font-weight:700;color:var(--sub);margin:0 0 8px}.state.ok{color:#166534}.state.wip{color:#a16207}.state.next{color:#475569}.state a{font-weight:400}dl dt{font-weight:700;margin-top:1.2em}dl dd{margin:.3em 0 0;color:var(--sub)}

/* ---- SITE-FAST R1: first-5-seconds, hierarchy, Korean line breaks, status pills ---- */
body{word-break:keep-all;overflow-wrap:break-word;line-height:1.65}
h1,h2,h3,.lead,.sub{text-wrap:balance}p,dd,summary{text-wrap:pretty}
:root{--ok-bg:#dcfce7;--ok:#166534;--wip-bg:#fef3c7;--wip:#854d0e;--next-bg:#e8ecf2;--next:#334155;--ph:#e9ebf0}
@media (prefers-color-scheme:dark){:root{--ok-bg:#12351f;--ok:#86efac;--wip-bg:#3a2e0b;--wip:#fcd34d;--next-bg:#262b35;--next:#cbd5e1;--ph:#1e2026}}
.wrap{max-width:1040px}
.hero{padding:clamp(18px,5vw,48px) 0 clamp(20px,4vw,32px)}
.identity{margin:0 0 clamp(10px,2vw,16px);font-size:clamp(13px,1vw + 10px,15px)}
.hero h1{font-size:clamp(30px,6.4vw,54px);letter-spacing:-.02em;line-height:1.18;margin:0 0 clamp(10px,2vw,16px)}
.hero .sub{font-size:clamp(16px,1.2vw + 12px,19px);color:var(--sub);margin:0 auto clamp(16px,3vw,24px);max-width:600px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;width:100%}
.btn{padding:0 22px;border-radius:14px}.hero .btn{flex:0 1 auto}
@media (max-width:520px){.hero .cta .btn{flex:1 1 0;padding:0 10px;font-size:15px}}
.btn.main{box-shadow:0 6px 18px rgba(58,109,240,.28)}
.reel{max-width:960px;margin-top:clamp(20px,4vw,32px)}
.more{text-align:center;margin:0 0 36px;font-size:15px}.more a{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px}.more a:hover{text-decoration:underline}
.hero + .reel{}
.player .gcap{}
#ptitle{font-size:15px}
/* header compact on phones: logo + language on one row, tabs scroll with a fade hint */
@media (max-width:820px){
  header{padding:6px 0 0;gap:0 12px}
  .lang button{min-width:40px;padding:0 12px;font-size:14px;min-height:40px}
  nav.tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:36px}
  nav.tabs a{min-height:40px;font-size:15px}
}
/* big play affordance when paused / autoplay blocked */
.player .stage::after{content:"";position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/38px no-repeat;opacity:0;pointer-events:none;transition:opacity .2s}
.player.paused .stage::after{opacity:1}
/* phone player: one compact row (play, time, sound, fullscreen); prev/next live in the dots below */
@media (max-width:700px){
  #prep,#pprev,#pnext{display:none}
  .prow{flex-wrap:nowrap}.pbar button{width:40px;height:40px}
  .player .pbar{padding:22px 8px 6px}
}
/* status pills (됨 / 개발 중 / 곧) */
.state{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:999px;font-size:13px;font-weight:700;margin:0 0 12px;line-height:1.5}
.state::before{font-weight:800}
.state.ok{background:var(--ok-bg);color:var(--ok)}.state.ok::before{content:"✓"}
.state.wip{background:var(--wip-bg);color:var(--wip)}.state.wip::before{content:"…"}
.state.next{background:var(--next-bg);color:var(--next)}.state.next::before{content:"○"}
/* sections: calmer cards, real hierarchy */
h2{font-size:clamp(24px,3.4vw + 10px,34px);letter-spacing:-.015em;margin:clamp(40px,8vw,72px) 0 10px}
.lead{font-size:clamp(16px,1vw + 12px,18px);margin-bottom:6px}
.card{border-radius:18px;padding:clamp(18px,3vw,26px);transition:transform .15s,box-shadow .15s}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08)}}
.card h3{font-size:clamp(18px,1vw + 13px,20px);letter-spacing:-.01em}
.card p{line-height:1.6}
/* gallery: neutral skeleton instead of black while images load */
.dview,.dview img,.slide img,.dgal .th img,.pth img{background:var(--ph)}.dview{border-color:var(--line)}
.dview img{min-height:0}
/* FAQ and closing call to action */
.faq{max-width:760px;margin:0 auto}.faq h2{margin-bottom:18px}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:650;font-size:17px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:22px;color:var(--sub);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--sub)}
.faq summary:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px;border-radius:6px}
.closer{text-align:center;margin:clamp(40px,8vw,72px) 0 clamp(32px,6vw,56px);padding:clamp(28px,6vw,48px) 20px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.closer h2{margin-top:0}.closer .cta{display:flex;gap:10px;justify-content:center;margin-top:18px}
footer{line-height:1.8}

/* ---- SITE-FAST R1b: product-site hero (laptop / Mac window drawn by us), one feature per screen ---- */
body{background:var(--bg)}
.hero2{position:relative;overflow-x:clip;text-align:center;padding:clamp(14px,4vw,40px) 0 clamp(24px,5vw,48px)}

.hero2 .identity{margin:0 0 12px;font-size:clamp(13px,1vw + 10px,15px)}.ipa{font-weight:500;opacity:.8}
.hero2 h1{font-size:clamp(36px,9vw,72px);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px;font-weight:800}
.hero2 .l1{color:var(--sub)}.hero2 .l2{color:var(--ink)}
.hero2 .sub{font-size:clamp(16px,1.4vw + 12px,20px);color:var(--sub);max-width:620px;margin:0 auto 22px}
.hero2 .cta{display:flex;gap:12px;justify-content:center}
.hero2 .btn{min-height:52px;font-size:17px;padding:0 26px;flex:0 1 auto}
@media (max-width:520px){.hero2 .cta .btn{flex:1 1 0;padding:0 8px;font-size:16px}}
.hero2 .btn.main{background:linear-gradient(180deg,#4d80ff,#3a6df0)}
.trial{font-size:14px;color:var(--sub);margin:12px auto 0;max-width:520px}
.devsel{display:flex;width:fit-content;max-width:100%;margin:clamp(20px,4vw,32px) auto 18px;padding:4px;border-radius:999px;background:var(--line)}
.devsel button{min-height:44px;padding:0 clamp(12px,3vw,22px);border:0;border-radius:999px;background:transparent;color:var(--sub);font:inherit;font-size:clamp(13px,1vw + 10px,15px);font-weight:650;cursor:pointer}
.devsel button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.devsel button:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px}
.devs{max-width:900px;margin:0 auto}.dev{margin:0}.dev[hidden]{display:none}
.dev figcaption{margin-top:18px;font-size:14px;color:var(--sub)}
.mini{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;margin:0 2px}.mini.ok{background:var(--ok-bg);color:var(--ok)}.mini.next{background:var(--next-bg);color:var(--next)}
/* laptop: slim black bezel, camera dot, thin silver base */
.pc .lid{position:relative;margin:0 auto;width:min(100%,820px);padding:clamp(6px,1.4vw,12px) clamp(6px,1.4vw,12px) clamp(8px,1.8vw,16px);background:#0c0c0f;border-radius:clamp(10px,2vw,18px) clamp(10px,2vw,18px) 6px 6px;box-shadow:0 0 0 1px #2c2c33,0 30px 70px rgba(30,30,60,.28)}
.pc .lid::before{content:"";position:absolute;left:50%;top:clamp(2px,.6vw,5px);width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#23232a}
.pc .scr{aspect-ratio:16/10;background:var(--ph);border-radius:3px;overflow:hidden}.pc .scr img,.pc .scr picture{display:block;width:100%;height:100%;object-fit:cover}
.pc .base{position:relative;width:min(112%,920px);left:50%;transform:translateX(-50%);height:clamp(9px,1.6vw,15px);margin-top:-1px;border-radius:0 0 clamp(12px,2.4vw,22px) clamp(12px,2.4vw,22px);background:linear-gradient(#d9dbe2,#b4b7c1);box-shadow:0 14px 30px rgba(30,30,60,.22)}
.pc .base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:55%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#a2a5b0}
.pc,.mac{text-align:center}
/* Mac: our own plain desktop with the real capture in a window (no Apple marks) */
.macdesk{position:relative;aspect-ratio:16/10;margin:0 auto;width:min(100%,820px);border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#5d7aa8,#8f9bc7 45%,#c3a8c9);box-shadow:0 30px 70px rgba(30,30,60,.28)}
.mbar{position:absolute;left:0;right:0;top:0;height:clamp(16px,3vw,24px);display:flex;gap:14px;align-items:center;padding:0 12px;background:rgba(255,255,255,.28);backdrop-filter:blur(8px);font-size:clamp(9px,1.5vw,12px);color:#10131a;text-align:left}.mbar span{flex:1}.mbar b{font-weight:700}.mbar em{font-style:normal}
.mwin{position:absolute;left:8%;right:8%;top:11%;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.18)}
.mwin img{display:block;width:100%;height:auto;aspect-ratio:16/10;background:var(--ph)}
.wbar{display:flex;align-items:center;gap:6px;padding:0 10px;height:clamp(16px,2.6vw,26px);background:#2b2c33;color:#c9cad3;font-size:11px}.wbar i{width:clamp(7px,1.2vw,10px);height:clamp(7px,1.2vw,10px);border-radius:50%;background:#ff5f57}.wbar i:nth-child(2){background:#febc2e}.wbar i:nth-child(3){background:#28c840}.wbar span{flex:1;text-align:center;margin-right:36px}
/* features: one per screen */
.vid{text-align:center}.vid h2{margin-top:clamp(20px,5vw,48px)}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center;margin:clamp(56px,10vw,120px) 0}
.feat.rev .ftxt{order:2}
.ftxt .ftag{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--accent)}.ftxt h2{text-align:left;margin:0 0 12px;font-size:clamp(26px,3vw + 12px,40px);line-height:1.2}
.ftxt p{color:var(--sub);font-size:clamp(16px,.8vw + 13px,19px);margin:0}.ftxt .state{margin:0 0 10px}
.win{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(30,30,60,.18);background:var(--ph)}
.win picture,.win img{display:block;width:100%}.win img{height:auto;aspect-ratio:3456/2160;background:var(--ph)}
.win.soon{display:grid;place-items:center;aspect-ratio:16/10;border-style:dashed;box-shadow:none;background:transparent;color:var(--sub);padding:20px;text-align:center}
@media (max-width:819px){.feat{grid-template-columns:1fr;gap:20px;margin:clamp(44px,12vw,72px) 0}.feat.rev .ftxt{order:0}.ftxt h2{font-size:clamp(25px,6vw,32px)}}
body{background:radial-gradient(ellipse 70% 520px at 50% 220px,rgba(122,140,255,.16),rgba(255,160,200,.08) 55%,transparent 80%) no-repeat,var(--bg)}
.hero2 h1{font-size:clamp(34px,8.2vw,72px)}
@media (max-width:520px){.hero2 .sub{font-size:16px;margin-bottom:16px}.hero2 .btn{min-height:48px}.trial{font-size:13px}.devsel{margin:16px auto 12px}}
.pdots button.on{background:none}
.vid .more{margin:4px 0 0}