/* zarvix.ai — responsive concept. One image source, separate DOM UI.
   Tweak colors and spacing here. Text/scenarios live in index.html + content.js. */
:root {
  --ink:#15191d; --muted:#777e87; --line:#e9ebee; --paper:#f6f7f8;
  --blue:#3478ef; --green:#319e70; --radius:24px;
  --page-pad:clamp(24px,4.5vw,80px); --header-height:88px;
  --story-travel:3300px; --viewport-height:100svh;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans CJK KR","Malgun Gothic",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{position:fixed;inset:0;width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
#page-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-padding-top:110px}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button,a{touch-action:manipulation}
button{border:0}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #6fa6ff;outline-offset:6px}
button:disabled{cursor:default}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{word-break:keep-all}
button svg,a svg{pointer-events:none}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:12px;padding:12px 22px;background:#fff;color:#111;transform:translateY(-160%);z-index:1000;border-radius:10px}
.skip-link:focus{transform:none}
.site-header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 var(--page-pad);position:fixed;inset:0 0 auto;z-index:90;color:white;transition:background .3s,color .3s,box-shadow .3s}
.site-header.is-solid{color:var(--ink);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.07)}
.brand{width:164px;position:relative;flex-shrink:0;display:block}
.brand img{width:100%;height:auto}
.brand-white{opacity:1}
.brand-black{position:absolute;inset:0;opacity:0}
.site-header.is-solid .brand-white{opacity:0}
.site-header.is-solid .brand-black{opacity:1}
.header-actions{display:flex;align-items:center;gap:18px}
.motion-toggle{display:none}
.motion-toggle .icon{width:17px;height:17px}
.is-solid .motion-toggle{border-color:#ddd}
.nav-cta{display:flex;align-items:center;gap:16px;color:var(--ink);background:#fff;border:1px solid #ffffff88;border-radius:50px;font-size:13px;font-weight:650;padding:12px 19px;transition:transform .2s,background .2s}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta .icon{width:16px;height:16px}
.is-solid .nav-cta{background:var(--ink);color:#fff}