/* ==========================================================================
   VASTORE — DESIGN FOUNDATION
   The single source of truth for colour, type, space, depth and motion.
   Every other stylesheet reads from these tokens and declares no raw hex.
   ========================================================================== */

:root{
 /* --- Ink: the deep navy the brand is built on -------------------------- */
 --ink-950:#060B15;
 --ink-900:#0A1220;
 --ink-850:#0D182B;
 --ink-800:#111E34;
 --ink-750:#16263F;
 --ink-700:#1B2D4B;
 --ink-600:#243A5C;
 --ink-500:#31496F;

 /* --- Ember: the Vastore accent, one ramp instead of five oranges ------- */
 --ember-100:#FFF3EA;
 --ember-200:#FFE0CB;
 --ember-300:#FFC59D;
 --ember-400:#FFA771;
 --ember-500:#FF8A3D;  /* primary accent */
 --ember-600:#F06F1B;
 --ember-700:#C85610;
 --ember-750:#B44B0D;
 --ember-800:#9C420C;

 /* --- Aqua: a cool counterweight for systems & data surfaces ----------- */
 --aqua-200:#D6F5F1;
 --aqua-300:#9BE7DF;
 --aqua-400:#5FD3C8;
 --aqua-500:#2FB5A9;
 --aqua-600:#1B8F86;
 --aqua-700:#146C66;

 /* --- Neutrals, warmed very slightly so they sit with the ember -------- */
 --n-0:#FFFFFF;
 --n-25:#FBFCFE;
 --n-50:#F6F8FC;
 --n-100:#EFF2F8;
 --n-200:#E3E8F1;
 --n-300:#D0D8E5;
 --n-400:#AEB9CB;
 --n-500:#616F86;
 --n-600:#4F5D74;
 --n-700:#4B5A72;

 /* --- Semantic roles -------------------------------------------------- */
 --ink:var(--ink-800);
 --navy:var(--ink-700);
 --brand:var(--ember-500);
 --brand-deep:var(--ember-750);
 --brand-tint:var(--ember-100);
 --orange:var(--ember-500);          /* legacy alias, still referenced */
 --paper:var(--n-50);
 --surface:var(--n-0);
 --surface-sunken:var(--n-100);
 --line:var(--n-200);
 --line-strong:var(--n-300);
 --ink-muted:var(--n-600);
 --ink-soft:var(--n-500);
 --white:var(--n-0);

 /* On-dark roles: readable text over ink surfaces */
 --on-dark:#F4F7FD;
 --on-dark-muted:#AFBCD2;
 --on-dark-faint:#8090AB;
 --on-dark-line:color-mix(in srgb, var(--on-dark) 13%, transparent);
 --on-dark-line-strong:color-mix(in srgb, var(--on-dark) 26%, transparent);
 --on-dark-veil:color-mix(in srgb, var(--on-dark) 7%, transparent);

 /* Status */
 --ok-bg:#EAF6F0;--ok-line:#C2E2D2;--ok-ink:#14624A;
 --warn-bg:var(--ember-100);--warn-ink:var(--ember-800);
 --bad-bg:#FEF1F2;--bad-line:#F6CDD1;--bad-ink:#9E2B36;

 /* --- Gradients -------------------------------------------------------- */
 --grad-ember:linear-gradient(118deg,var(--ember-400),var(--ember-600));
 --grad-ember-gold:linear-gradient(112deg,#FFD08A,var(--ember-500) 52%,var(--ember-700));
 --grad-ink:linear-gradient(160deg,var(--ink-750),var(--ink-900));
 --grad-aqua:linear-gradient(125deg,var(--aqua-400),var(--aqua-600));
 --grad-text:linear-gradient(96deg,var(--ember-300),var(--ember-500) 45%,#FFD9A8);
 --glass:color-mix(in srgb, var(--on-dark) 6%, transparent);

 /* --- Typography ------------------------------------------------------- */
 --display:'Manrope','Segoe UI',system-ui,sans-serif;
 --body:'DM Sans','Segoe UI',system-ui,sans-serif;
 --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

 --fs-micro:clamp(10.5px,.68vw,11.5px);
 --fs-label:clamp(11.5px,.75vw,13px);
 --fs-small:clamp(13px,.88vw,14.5px);
 --fs-body:clamp(15.5px,1vw,17px);
 --fs-lead:clamp(17px,1.25vw,19.5px);
 --fs-h4:clamp(18px,1.4vw,22px);
 --fs-h3:clamp(21px,1.75vw,27px);
 --fs-h2:clamp(31px,3.7vw,55px);
 --fs-h1:clamp(42px,5.6vw,86px);
 --fs-mega:clamp(52px,8.4vw,124px);

 --track-mega:-.055em;
 --track-tight:-.04em;
 --track-label:.14em;
 --track-wide:.22em;

 /* --- Space ------------------------------------------------------------ */
 --gutter:clamp(20px,4vw,48px);
 --shell:1280px;
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:22px;
 --s-6:30px;--s-7:40px;--s-8:54px;--s-9:72px;--s-10:96px;
 --section-y:clamp(68px,8vw,124px);

 /* --- Radii ------------------------------------------------------------ */
 --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;--r-pill:999px;

 /* --- Depth ------------------------------------------------------------ */
 --sh-xs:0 1px 2px rgb(9 18 34 / .05);
 --sh-sm:0 2px 8px rgb(9 18 34 / .06);
 --sh-md:0 10px 28px -8px rgb(9 18 34 / .13);
 --sh-lg:0 24px 56px -16px rgb(9 18 34 / .19);
 --sh-xl:0 40px 90px -24px rgb(9 18 34 / .26);
 --sh-ember:0 18px 44px -14px rgb(240 111 27 / .45);
 --sh-inner:inset 0 1px 0 color-mix(in srgb,var(--on-dark) 9%,transparent);

 /* --- Motion ----------------------------------------------------------- */
 --ease:cubic-bezier(.32,.72,0,1);
 --ease-out:cubic-bezier(.16,1,.3,1);
 --ease-spring:cubic-bezier(.34,1.56,.64,1);
 --ease-in-out:cubic-bezier(.66,0,.34,1);
 --t-fast:.18s;
 --t-base:.32s;
 --t-slow:.6s;
 --t-reveal:.9s;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
 scroll-behavior:smooth;
 scroll-padding-top:clamp(72px,9vw,108px);
 -webkit-text-size-adjust:100%;
}

body{
 margin:0;
 font-family:var(--body);
 font-size:var(--fs-body);
 line-height:1.65;
 background:var(--paper);
 color:var(--ink);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 overflow-x:clip;
}
body.dialog-open{overflow:hidden}

h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:var(--track-mega);font-weight:700}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.045em;font-weight:600}
h3{font-size:var(--fs-h3);line-height:1.28;letter-spacing:var(--track-tight);font-weight:650}
h4{font-size:var(--fs-h4);line-height:1.35;letter-spacing:-.03em;font-weight:650}
p{margin:0;text-wrap:pretty}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.55}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%}
svg{display:block;width:24px;height:24px}
input,textarea,select{font:inherit}

::selection{background:var(--ember-400);color:var(--ink-900)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[role=button]:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--ember-600);
 outline-offset:3px;
 border-radius:var(--r-xs);
}
.on-ink a:focus-visible,.on-ink button:focus-visible{outline-color:var(--ember-400)}

/* Scrollbar — quiet, brand-tinted */
@supports selector(::-webkit-scrollbar){
 ::-webkit-scrollbar{width:11px;height:11px}
 ::-webkit-scrollbar-track{background:var(--n-100)}
 ::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:var(--r-pill);border:3px solid var(--n-100)}
 ::-webkit-scrollbar-thumb:hover{background:var(--n-400)}
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.container{width:min(var(--shell),calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding-block:var(--section-y)}

.skip-link{
 position:fixed;top:var(--s-2);left:var(--s-2);z-index:200;
 padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);
 background:var(--ember-500);color:var(--ink-900);font-weight:700;
 transform:translateY(-200%);transition:transform var(--t-base) var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

/* ==========================================================================
   SHARED PRIMITIVES
   ========================================================================== */

/* — Eyebrow ------------------------------------------------------------- */
.eyebrow{
 display:flex;align-items:center;gap:var(--s-3);
 margin:0 0 var(--s-5);
 font-size:var(--fs-label);font-weight:600;
 letter-spacing:var(--track-label);text-transform:uppercase;
 color:var(--on-dark-muted);
}
.eyebrow>span{
 width:var(--s-5);height:2px;flex:none;border-radius:2px;
 background:var(--grad-ember);
}
.eyebrow.dark{color:var(--ink-muted)}
.eyebrow.dark>span{background:var(--brand-deep)}

/* — Buttons ------------------------------------------------------------- */
.button{
 position:relative;isolation:isolate;
 display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);
 padding:16px 26px;border-radius:var(--r-pill);
 font-size:var(--fs-small);font-weight:700;letter-spacing:-.01em;
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),color var(--t-base);
 overflow:hidden;
}
.button svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease-spring)}
.button::before{
 content:'';position:absolute;inset:0;z-index:-1;
 background:var(--grad-ember-gold);
 transition:opacity var(--t-base) var(--ease);
}
.button::after{
 content:'';position:absolute;inset:0;z-index:-1;
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#FFE7C8,transparent 62%);
 opacity:0;transition:opacity var(--t-base) var(--ease);
}
.button.orange{background:var(--ember-500);color:var(--ink-900);box-shadow:var(--sh-ember)}
.button:hover{transform:translateY(-3px);box-shadow:0 24px 52px -14px rgb(240 111 27 / .55)}
.button:hover::after{opacity:.75}
.button:hover svg{transform:translate(3px,-3px)}
.button:active{transform:translateY(-1px)}

.button.ghost{background:none;color:var(--on-dark);border:1px solid var(--on-dark-line-strong);box-shadow:none}
.button.ghost::before{background:var(--glass);opacity:0}
.button.ghost:hover{box-shadow:none;border-color:var(--ember-400);color:var(--n-0)}
.button.ghost:hover::before{opacity:1}
.button.ghost::after{display:none}

/* — Text link with animated rule ---------------------------------------- */
.text-link{
 position:relative;display:inline-flex;align-items:center;gap:var(--s-3);
 padding-block:var(--s-2);font-size:var(--fs-small);font-weight:650;
}
.text-link svg{width:16px;height:16px;transition:transform var(--t-base) var(--ease-spring)}
.text-link::after{
 content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
 background:currentColor;transform-origin:left;
 transition:transform var(--t-base) var(--ease-out);
}
.text-link:hover{color:var(--brand-deep)}
.text-link:hover svg{transform:translate(3px,-3px)}
.text-link:hover::after{transform:scaleX(.35)}
.text-link.light{color:var(--on-dark-muted)}
.text-link.light:hover{color:var(--ember-400)}

/* — Circle link --------------------------------------------------------- */
.circle-link{
 position:relative;isolation:isolate;flex:none;
 width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
 border:1px solid var(--line-strong);
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.circle-link svg{width:17px;height:17px;transition:transform var(--t-base) var(--ease-spring)}
.circle-link::before{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;
 background:var(--grad-ember);transform:scale(.2);opacity:0;
 transition:transform var(--t-base) var(--ease-spring),opacity var(--t-base) var(--ease);
}
.circle-link:hover{border-color:transparent;color:var(--ink-900)}
.circle-link:hover::before{transform:scale(1);opacity:1}
.circle-link:hover svg{transform:translate(2px,-2px)}

/* — Chip / pill --------------------------------------------------------- */
.chip{
 display:inline-flex;align-items:center;gap:var(--s-2);
 padding:7px 13px;border-radius:var(--r-pill);
 font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;
 border:1px solid var(--line);background:var(--surface);color:var(--ink-muted);
}
.on-ink .chip{border-color:var(--on-dark-line-strong);background:var(--glass);color:var(--on-dark-muted)}

/* — Section heading ----------------------------------------------------- */
.section-heading{
 display:grid;grid-template-columns:1.35fr 1fr;align-items:end;
 gap:var(--s-7) var(--s-8);margin-bottom:var(--s-8);
}
.section-heading h2 span{color:var(--ink-soft)}
.section-heading h2 em{font-style:normal;color:var(--brand)}
.section-intro{max-width:42ch;font-size:var(--fs-body);color:var(--ink-muted)}
.section-intro .preview-hint{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--ink-soft)}

/* Dark-surface helper */
.on-ink{background:var(--ink-900);color:var(--on-dark)}
.on-ink h2 span{color:var(--on-dark-faint)}
.on-ink .section-intro{color:var(--on-dark-muted)}

/* ==========================================================================
   DECORATIVE LAYERS
   ========================================================================== */

/* Fine grain overlay — keeps big dark fields from banding */
.grain::after{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 opacity:.34;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Hairline grid — architectural texture behind dark sections */
.gridlines::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background-image:
  linear-gradient(to right,var(--on-dark-veil) 1px,transparent 1px),
  linear-gradient(to bottom,var(--on-dark-veil) 1px,transparent 1px);
 background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
 mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000,transparent 78%);
}

/* Soft aurora blobs */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{
 position:absolute;display:block;border-radius:50%;
 filter:blur(clamp(50px,8vw,110px));opacity:.5;
 /* Own layer: the blur rasterises once and only the transform animates. */
 will-change:transform;
 animation:drift 22s var(--ease-in-out) infinite alternate;
}
.aurora i:nth-child(1){width:44vw;height:44vw;top:-14%;right:-8%;background:color-mix(in srgb,var(--ember-600) 48%,transparent)}
.aurora i:nth-child(2){width:38vw;height:38vw;bottom:-18%;left:-10%;background:color-mix(in srgb,var(--ink-500) 62%,transparent);animation-delay:-7s}
.aurora i:nth-child(3){width:30vw;height:30vw;top:34%;left:38%;background:color-mix(in srgb,var(--aqua-600) 34%,transparent);animation-delay:-13s}

@keyframes drift{
 from{transform:translate3d(0,0,0) scale(1)}
 to{transform:translate3d(4%,-6%,0) scale(1.14)}
}

/* ==========================================================================
   MOTION PRIMITIVES — consumed by the reveal observer in app/motion.tsx
   ========================================================================== */

/* Scoped to [data-motion=on], which the inline head script sets before
   first paint. With scripting off, nothing is ever hidden. */
[data-motion=on] [data-reveal]{
 opacity:0;
 transform:translate3d(var(--rx,0),var(--ry,26px),0) scale(var(--rs,1));
 transition:
  opacity var(--t-reveal) var(--ease-out) var(--rd,0ms),
  transform var(--t-reveal) var(--ease-out) var(--rd,0ms),
  filter var(--t-reveal) var(--ease-out) var(--rd,0ms);
 filter:blur(var(--rb,0));
}
[data-motion=on] [data-reveal="left"]{--rx:-40px;--ry:0}
[data-motion=on] [data-reveal="right"]{--rx:40px;--ry:0}
[data-motion=on] [data-reveal="scale"]{--rs:.94;--ry:16px}
[data-motion=on] [data-reveal="blur"]{--rb:12px;--ry:18px}
[data-motion=on] [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* Per-character / per-word headline reveal */
.split{display:inline-block}
.split .ln{display:block;overflow:hidden}
.split .wd{
 display:inline-block;
 transform:translate3d(0,110%,0) rotate(3deg);
 opacity:0;
 transition:transform 1s var(--ease-out) var(--wd,0ms),opacity .7s var(--ease-out) var(--wd,0ms);
}
.split.is-in .wd{transform:none;opacity:1}
/* Already scrolled past: no stagger, just the finished state. */
.split.is-instant .wd{transition:none}

/* Number counters */
.tally{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;
 }
 [data-reveal],.split .wd{opacity:1!important;transform:none!important;filter:none!important}
 .aurora i{animation:none}
}

/* ==========================================================================
   RESPONSIVE BASE
   ========================================================================== */

@media (max-width:900px){
 .section-heading{grid-template-columns:1fr;align-items:start}
 .section-intro{max-width:56ch}
}
@media (max-width:640px){
 .button{padding:14px 21px}
}