/* Delusion Group — design prototype (Mira). One system, top to bottom.
   Tokens → base → layout → components → sections → motion. */

@font-face{font-family:"Be Vietnam Pro";src:url(/assets/fonts/bvp-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/assets/fonts/bvp-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/assets/fonts/bvp-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/assets/fonts/bvp-700.woff2) format("woff2");font-weight:700;font-display:swap}

/* ───────── 1. TOKENS ───────── */
:root{
  /* color — one night canvas, two surface tiers, one accent, one warm highlight (both lifted from the hero D) */
  --bg-0:#05070D;            /* page */
  --bg-1:#090D18;            /* alternate band */
  --surface:#0D1220;         /* cards */
  --surface-2:#121829;       /* raised inside cards */
  --line:rgba(206,216,255,.09);
  --line-2:rgba(206,216,255,.16);
  --text:#EEF1F8;            /* 17.6:1 on bg-0 */
  --text-2:#AAB2C5;          /* 9.1:1 */
  --text-3:#8790A6;          /* 6.0:1 */
  --accent:#6E8CFF;          /* primary button fill (hero blue) */
  --accent-ink:#A9BBFF;      /* links / eyebrows on dark, 9.6:1 */
  --accent-deep:#2B48D8;
  --warm:#F4D9B4;            /* D highlight */
  --hub:#FF9A5C;             /* DeluHub signal */
  --ok:#5BE39A;
  --on-accent:#060A1A;       /* text on accent, 6.4:1 */
  --grad-edge:linear-gradient(140deg,rgba(124,152,255,.55),rgba(206,216,255,.08) 38%,rgba(206,216,255,.06) 62%,rgba(244,217,180,.35));
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(84,118,255,.18),transparent 70%);

  /* type — Be Vietnam Pro, one modular scale (≈1.25) */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-display:clamp(52px,7.4vw,108px);
  --t-h1:clamp(40px,5.2vw,72px);
  --t-h2:clamp(32px,3.7vw,52px);
  --t-h3:clamp(22px,1.9vw,26px);
  --t-h4:18px;
  --t-lead:clamp(18px,1.45vw,20px);
  --t-body:16px;
  --t-small:14px;
  --t-micro:12px;

  /* space — 8px scale */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:48px;--s-8:64px;--s-10:80px;--s-12:96px;--s-16:128px;--s-20:160px;
  --section-y:clamp(80px,10vw,144px);
  --gutter:clamp(24px,4vw,40px);
  --container:1200px;
  --gap:24px;

  /* radius / elevation */
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;--r-pill:999px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -24px rgba(0,0,0,.6);
  --shadow-2:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -32px rgba(0,0,0,.75),0 0 0 1px rgba(124,152,255,.12);

  /* motion tokens */
  --dur-1:160ms;   /* hover, press */
  --dur-2:320ms;   /* state change, toggle */
  --dur-3:640ms;   /* scroll reveal */
  --dur-orbit:28s; /* ambient orbit */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --stagger:80ms;
}

/* ───────── 2. BASE ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg-0)}
body{margin:0;font-family:var(--font);font-size:var(--t-body);line-height:1.6;color:var(--text);background:var(--bg-0);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
::selection{background:rgba(110,140,255,.4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 16px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:16px}

/* ───────── 3. LAYOUT ───────── */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.section--alt{background:var(--bg-1)}
/* the orbit edge: every alt band opens with the hero's orbit arc, so bands feel like one sky, not stripes */
.section--alt::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(124,152,255,.45) 30%,rgba(244,217,180,.3) 70%,transparent)}
.section--alt::after{content:"";position:absolute;inset:0 0 auto;height:320px;background:var(--glow);pointer-events:none}
.section > .container{position:relative;z-index:1}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.stack-2>*+*{margin-top:var(--s-2)}
.stack-3>*+*{margin-top:var(--s-3)}

/* ───────── 4. TYPE ───────── */
.display{font-size:var(--t-display);line-height:.98;letter-spacing:-.035em;font-weight:600}
.h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:-.03em;font-weight:600}
.h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.025em;font-weight:600}
.h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.012em;font-weight:600}
.h4{font-size:var(--t-h4);line-height:1.4;font-weight:600}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--text-2)}
.body-2{color:var(--text-2)}
.small{font-size:var(--t-small);line-height:1.55}
.muted{color:var(--text-3)}
.grad-text{background:linear-gradient(100deg,#fff 10%,#C9D4FF 55%,var(--warm) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.link{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(169,187,255,.45);transition:text-decoration-color var(--dur-1) var(--ease-out)}
.link:hover{text-decoration-color:currentColor}

/* ───────── 5. COMPONENTS ───────── */

/* 5.1 eyebrow — the orbit dot + label used to open every section */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-small);font-weight:500;letter-spacing:.02em;color:var(--accent-ink)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--accent) 60%,var(--accent-deep));box-shadow:0 0 0 4px rgba(110,140,255,.14),0 0 16px rgba(110,140,255,.6)}
.eyebrow--hub::before{background:radial-gradient(circle at 35% 35%,#fff,var(--hub) 60%,#b4532a);box-shadow:0 0 0 4px rgba(255,154,92,.14),0 0 16px rgba(255,154,92,.5)}

/* 5.2 section header — one pattern everywhere: eyebrow, h2, lead; left-aligned; aside slot on wide screens */
.sh{display:grid;gap:var(--s-3);margin-bottom:var(--s-8);grid-template-columns:minmax(0,1fr)}
.sh .h2{max-width:16ch}
.sh .lead{max-width:56ch}
@media (min-width:960px){.sh--split{grid-template-columns:7fr 5fr;align-items:end;column-gap:var(--s-8)}.sh--split > *{grid-column:1}.sh--split .eyebrow{grid-row:1}.sh--split .h2{grid-row:2}.sh--split .lead{grid-column:2;grid-row:2}}

/* 5.3 buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r-pill);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.btn svg{width:16px;height:16px;transition:transform var(--dur-1) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 12px 32px -12px rgba(110,140,255,.8)}
.btn--primary:hover{background:#86A0FF;transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:rgba(169,187,255,.5);background:rgba(110,140,255,.08)}
.btn--text{padding:0 4px;color:var(--text);border-radius:8px}
.btn--text span{border-bottom:1px solid rgba(238,241,248,.4);padding-bottom:2px}
.btn--text:hover span{border-color:var(--text)}
.btn--lg{--h:56px;padding:0 28px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}

/* 5.4 badge / pill */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--t-micro);font-weight:600;letter-spacing:.02em;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--live{color:var(--ok);border-color:rgba(91,227,154,.3);background:rgba(91,227,154,.06)}
.badge--beta{color:var(--hub);border-color:rgba(255,154,92,.32);background:rgba(255,154,92,.06)}
.badge--neutral{color:var(--text-2)}
.badge--soon{height:22px;padding:0 8px;font-size:11px;color:var(--text-3)}
.badge--soon::before{display:none}

/* 5.5 card — gradient hairline edge, same radius/padding everywhere */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--surface);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--shadow-1);isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1;opacity:.75;transition:opacity var(--dur-2) var(--ease-out)}
.card--lift{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
@media (hover:hover){.card--lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}.card--lift:hover::before{opacity:1}}

/* 5.6 icon tile */
.icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--accent-ink);background:radial-gradient(120% 120% at 30% 0%,rgba(110,140,255,.28),rgba(110,140,255,.04) 70%);box-shadow:inset 0 0 0 1px rgba(169,187,255,.22)}
.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon--hub{color:var(--hub);background:radial-gradient(120% 120% at 30% 0%,rgba(255,154,92,.24),rgba(255,154,92,.04) 70%);box-shadow:inset 0 0 0 1px rgba(255,154,92,.25)}

/* 5.7 spec list */
.specs{display:grid;border-top:1px solid var(--line)}
.specs > div{display:grid;grid-template-columns:120px 1fr;gap:var(--s-2);padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:var(--t-small);color:var(--text-3);font-weight:500;padding-top:1px}
.specs dd{color:var(--text-2)}
.specs dd strong{color:var(--text);font-weight:600}

/* 5.8 check list */
.checks{display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;color:var(--text-2)}
.checks li::before{content:"";width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(110,140,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23A9BBFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.checks--hub li::before{background-color:rgba(255,154,92,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23FF9A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* 5.9 price block */
.price{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;padding-top:var(--s-3);border-top:1px solid var(--line)}
.price__label{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.price__value{font-size:clamp(28px,2.6vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.price__note{font-size:var(--t-small);color:var(--text-3)}

/* 5.10 app window — the frame every product preview lives in */
.window{position:relative;border-radius:var(--r-md);background:linear-gradient(180deg,#0F1526,#0A0F1C);box-shadow:0 0 0 1px rgba(169,187,255,.14),0 30px 60px -30px rgba(0,0,0,.9),0 0 80px -40px rgba(110,140,255,.5);overflow:hidden;font-size:13px;line-height:1.45}
.window__bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--text-3);font-size:12px}
.window__dots{display:flex;gap:6px}.window__dots i{width:9px;height:9px;border-radius:50%;background:rgba(206,216,255,.14)}
.window__title{color:var(--text-2);font-weight:500;margin-right:auto;display:flex;align-items:center;gap:8px;min-width:0}
.window__title img{width:16px;height:16px}
.illus-note{margin-top:12px;font-size:var(--t-micro);color:var(--text-3)}

/* 5.11 CTA band — every page ends on the hero's energy */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(40px,6vw,88px);background:radial-gradient(80% 120% at 100% 0%,rgba(84,118,255,.35),transparent 60%),radial-gradient(60% 90% at 0% 100%,rgba(244,217,180,.10),transparent 60%),linear-gradient(180deg,#0E1428,#080C18);box-shadow:var(--shadow-2);isolation:isolate}
.cta-band__orbit{position:absolute;right:-8%;top:50%;width:min(720px,90%);aspect-ratio:2/1;transform:translateY(-50%) rotate(-14deg);z-index:-1;opacity:.9;pointer-events:none}
.cta-band__mark{position:absolute;right:clamp(24px,8%,120px);top:50%;width:clamp(120px,16vw,220px);transform:translateY(-50%);z-index:-1;filter:drop-shadow(0 20px 60px rgba(84,118,255,.5));opacity:.95;pointer-events:none}
.cta-band__inner{max-width:640px;display:grid;gap:var(--s-3)}
.cta-band .h2{max-width:18ch}
.cta-band__meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);color:var(--text-3);font-size:var(--t-small);margin-top:var(--s-1)}

/* 5.12 orbit ring (svg) */
.orbit-ring{fill:none;stroke:url(#orbitStroke);stroke-width:1.4}

/* ───────── 6. HEADER ───────── */
.site-header{position:sticky;top:0;z-index:50;transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),backdrop-filter var(--dur-2);border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(5,7,13,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.site-header__inner{display:flex;align-items:center;gap:var(--s-4);height:72px}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto}
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--text-2);font-size:15px;font-weight:500;transition:color var(--dur-1),background-color var(--dur-1)}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(110,140,255,.12)}
.nav a svg{width:12px;height:12px}
.header-cta{--h:44px}
.menu-btn{display:none;width:48px;height:48px;border-radius:var(--r-pill);place-items:center;border:1px solid var(--line-2)}
.menu-btn svg{width:22px;height:22px}
@media (max-width:860px){
  .nav{position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:rgba(5,7,13,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .nav a{min-height:56px;border-radius:0;padding:0 4px;font-size:18px;border-bottom:1px solid var(--line);color:var(--text)}
  .nav a[aria-current="page"]{background:none;color:var(--accent-ink)}
  .menu-open .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .menu-open{background:rgba(5,7,13,.97)}
  .menu-btn{display:grid}
  .site-header__inner{gap:var(--s-1)}
}
@media (max-width:420px){.header-cta{padding:0 16px;font-size:14px}.brand img{height:22px}}

/* ───────── 7. HERO (home) ───────── */
.hero{position:relative;padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(64px,8vw,120px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:120%;background:radial-gradient(50% 50% at 60% 40%,rgba(64,98,255,.22),transparent 70%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--s-4)}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);min-height:min(720px,calc(100vh - 72px))}}
.hero__copy{display:grid;gap:var(--s-4);position:relative;z-index:2}
.hero__copy .lead{max-width:34ch}
.hero__art{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center}
.hero__d{position:absolute;inset:6% 14%;width:72%;height:auto;object-fit:contain;filter:drop-shadow(0 40px 80px rgba(54,92,255,.45));z-index:1}
.hero__orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__orbit .back{z-index:0}
.orbit-sat{transform-box:view-box;transform-origin:50% 50%}
@media (max-width:959px){.hero__art{order:-1;max-width:420px;margin-bottom:calc(-1*var(--s-4))}}

/* page hero (sub-pages) — same DNA, quieter */
.page-hero{position:relative;padding-top:clamp(40px,7vw,104px);padding-bottom:clamp(56px,7vw,104px);overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;height:140%;background:radial-gradient(45% 45% at 60% 45%,rgba(64,98,255,.2),transparent 70%);pointer-events:none}
.page-hero__grid{display:grid;gap:var(--s-6);align-items:end;position:relative;z-index:1}
@media (min-width:960px){.page-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}}
.page-hero .h1{max-width:18ch}
.page-hero .lead{max-width:52ch}
.page-hero__mark{position:absolute;right:max(var(--gutter),calc((100vw - var(--container))/2 - 40px));top:50%;width:clamp(160px,22vw,300px);transform:translateY(-50%);opacity:.18;filter:blur(.3px) saturate(120%);pointer-events:none}
@media (max-width:959px){.page-hero__mark{display:none}}

/* jump nav (products) */
.jump{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 8px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-2);font-size:var(--t-small);font-weight:500;transition:border-color var(--dur-1),color var(--dur-1),background-color var(--dur-1)}
.jump a:hover{color:var(--text);border-color:rgba(169,187,255,.5);background:rgba(110,140,255,.06)}
.jump b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(110,140,255,.14);color:var(--accent-ink);font-size:12px;font-weight:600}

/* facts panel (about) */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.facts > div{background:var(--surface);padding:var(--s-3)}
.facts dt{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600}
.facts dd{margin-top:6px;font-weight:600;font-size:17px}
.facts .wide{grid-column:1/-1}

/* ───────── 8. SECTIONS ───────── */

/* 8.1 product pair (home) */
.products{display:grid;gap:var(--gap)}
@media (min-width:960px){.products{grid-template-columns:1fr 1fr}}
.product{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-3)}
@media (min-width:600px){.product{padding:var(--s-4)}}
.product__visual{border-radius:var(--r-md);background:radial-gradient(80% 80% at 50% 0%,rgba(84,118,255,.18),transparent 70%),#080C17;padding:clamp(16px,3vw,32px);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.product__visual--hub{background:radial-gradient(80% 80% at 50% 0%,rgba(255,154,92,.14),transparent 70%),#080C17}
.product__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.product__name{display:flex;align-items:center;gap:12px}
.product__name img{width:28px;height:28px}
.product .checks{margin-top:var(--s-1)}
.product .price{margin-top:auto}
.product-more{margin-top:var(--s-4);display:flex;justify-content:center}

/* 8.2 Doffice preview */
.dof{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:300px}
.dof__side{border-right:1px solid var(--line);padding:12px;display:grid;align-content:start;gap:4px}
.dof__compose{height:32px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:600;display:grid;place-items:center;margin-bottom:8px;font-size:12px}
.dof__nav{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:12px}
.dof__nav.on{background:rgba(110,140,255,.14);color:var(--text)}
.dof__nav em{font-style:normal;color:var(--text-3);font-size:11px}
.dof__domain{margin-top:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line);font-size:11px;color:var(--text-3)}
.dof__domain b{display:block;color:var(--text);font-weight:600;font-size:12px}
.dof__main{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);min-width:0}
.dof__list{display:grid}
.mail{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.mail.unread .mail__subj{color:var(--text);font-weight:600}
.mail__av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0A0F1C}
.mail__from{color:var(--text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail__subj{color:var(--text-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail__time{color:var(--text-3);font-size:11px}
.meet{margin:12px;border-radius:12px;background:#0B1122;box-shadow:inset 0 0 0 1px var(--line);padding:12px;display:grid;gap:10px}
.meet__top{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.meet__top b{font-weight:600}
.meet__time{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-variant-numeric:tabular-nums}
.meet__time::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.meet__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{aspect-ratio:4/3;border-radius:8px;display:grid;place-items:center;background:linear-gradient(160deg,#16203A,#0E1528);box-shadow:inset 0 0 0 1px var(--line);font-size:11px;font-weight:600;color:var(--text-2)}
.tile.speak{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 16px -4px var(--accent)}
.tile.guest{color:var(--warm)}
@media (max-width:599px){.dof{grid-template-columns:minmax(0,1fr)}.dof__side{display:none}.meet__tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 8.3 DeluHub preview — DeluHub's own UI: task, timeline, memory */
.hub{display:grid;grid-template-columns:168px minmax(0,1fr)}
.hub__rail{border-right:1px solid var(--line);padding:12px;display:grid;align-content:start;gap:4px}
.hub__label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:4px 8px 6px}
.agent{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;border-radius:8px;color:var(--text-2);font-size:12px;width:100%;text-align:left;transition:background-color var(--dur-1),color var(--dur-1)}
.agent .mono{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.06);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.agent small{margin-left:auto;font-size:10px;color:var(--text-3)}
.agent.is-active{background:rgba(255,154,92,.10);color:var(--text)}
.agent.is-active .mono{background:var(--hub);color:#1a0d05;box-shadow:none}
.agent.is-active small{color:var(--hub)}
button.agent{min-height:44px}
button.agent:hover{background:rgba(255,255,255,.04);color:var(--text)}
.hub__main{padding:14px;display:grid;gap:12px;align-content:start}
.task{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.task b{font-size:14px;font-weight:600;color:var(--text)}
.task .badge{height:22px}
.tl{position:relative;display:grid;gap:10px;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--line-2),rgba(255,154,92,.4))}
.ev{position:relative;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.ev::before{content:"";position:absolute;left:-20px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--bg-1);box-shadow:inset 0 0 0 1.5px var(--text-3)}
.ev__who{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3);margin-bottom:2px}
.ev__who b{color:var(--text-2);font-weight:600}
.ev p{color:var(--text);font-size:12.5px}
.ev--handoff{background:linear-gradient(90deg,rgba(255,154,92,.10),rgba(255,154,92,.02));box-shadow:inset 0 0 0 1px rgba(255,154,92,.28)}
.ev--handoff::before{background:var(--hub);box-shadow:0 0 0 4px rgba(255,154,92,.18)}
.ev--handoff p{color:var(--warm)}
.ev--done::before{background:var(--ok);box-shadow:0 0 0 4px rgba(91,227,154,.15)}
.mem{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mem span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:11px;color:var(--text-2);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.mem span:first-child{background:none;box-shadow:none;padding-left:0;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:600}
.hub-try{margin-top:12px;font-size:var(--t-small);color:var(--text-3)}
@media (max-width:599px){.hub{grid-template-columns:minmax(0,1fr)}.hub__rail{border-right:0;border-bottom:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));}.hub__label{grid-column:1/-1}.agent small{display:none}}
@media (max-width:480px){.acct__tag-opt{display:none}}

/* 8.4 how it works: steps + account panel */
.split{display:grid;gap:var(--s-8);align-items:center}
@media (min-width:960px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.split--rev > :first-child{order:2}}
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:48px 1fr;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:var(--accent-ink);box-shadow:inset 0 0 0 1px rgba(169,187,255,.3);background:rgba(110,140,255,.08)}
.step .h4{margin-bottom:4px}
.acct{padding:0;overflow:hidden}
.acct__head{display:flex;align-items:center;gap:14px;padding:var(--s-3);border-bottom:1px solid var(--line)}
.acct__head img{width:40px;height:40px}
.acct__head b{display:block;font-size:17px}
.acct__head span{color:var(--text-3);font-size:var(--t-small)}
.acct__sec{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line)}
.acct__sec:last-child{border-bottom:0}
.acct__label{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600;margin-bottom:var(--s-1)}
.acct__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px}
.acct__row + .acct__row{border-top:1px dashed var(--line)}
.acct__row .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.acct__row .dot--hub{background:var(--hub);box-shadow:0 0 10px var(--hub)}
.acct__row .dot--next{background:none;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.acct__row b{font-weight:600}
.acct__row span.sub{color:var(--text-3);font-size:var(--t-small);margin-left:8px}
.acct__row--next b{color:var(--text-3);font-weight:500}

/* 8.5 commitments */
.commit-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.commit{display:flex;flex-direction:column;gap:var(--s-2);min-height:220px}
.commit .commit__key{font-size:clamp(28px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.commit .commit__key.grad-text{padding-bottom:2px;color:transparent}
.commit .h4{font-size:17px}
.commit p{color:var(--text-2);font-size:var(--t-small)}
.commit__check{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);font-size:var(--t-small);color:var(--text-3)}
.commit__check b{color:var(--text-2);font-weight:600}

/* 8.6 problem rows (about) */
.gaps{display:grid;gap:var(--gap)}
@media (min-width:768px){.gaps{grid-template-columns:1fr 1fr}}
.gap-card{display:grid;gap:var(--s-3);align-content:start}
.gap-card__q{font-size:var(--t-h3);line-height:1.3;font-weight:600;letter-spacing:-.01em}
.gap-card__a{display:grid;grid-template-columns:48px 1fr;gap:var(--s-2);align-items:start;padding-top:var(--s-3);border-top:1px solid var(--line)}
.gap-card__a b{display:block;font-size:var(--t-small);color:var(--accent-ink);font-weight:600;margin-bottom:2px}
.gap-card__a p{color:var(--text-2)}
.gap-card--hub .gap-card__a b{color:var(--hub)}

/* 8.7 day toggle (products) */
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2);position:relative}
.seg button{position:relative;z-index:1;min-height:44px;padding:0 20px;border-radius:var(--r-pill);font-weight:600;font-size:var(--t-small);color:var(--text-2);transition:color var(--dur-2) var(--ease-out)}
.seg button[aria-pressed="true"]{color:var(--on-accent)}
.seg__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:var(--r-pill);background:var(--accent);transition:transform var(--dur-2) var(--ease-in-out),width var(--dur-2) var(--ease-in-out)}
.day{display:grid;gap:var(--gap);margin-top:var(--s-6)}
@media (min-width:768px){.day{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.day{grid-template-columns:repeat(4,minmax(0,1fr))}}
.moment{display:flex;flex-direction:column;gap:var(--s-2);min-height:240px}
.moment__time{font-variant-numeric:tabular-nums;font-size:var(--t-small);color:var(--text-3);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.moment__text{position:relative;flex:1}
.moment__text span{display:block;font-size:17px;line-height:1.5;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.moment__text .after{position:absolute;inset:0;opacity:0;transform:translateY(8px)}
.moment__tag{align-self:flex-start}
.is-after .moment__text .before{opacity:0;transform:translateY(-8px)}
.is-after .moment__text .after{opacity:1;transform:none}
.moment .badge{transition:opacity var(--dur-2)}
.moment .badge.when-after{opacity:0}
.is-after .moment .badge.when-after{opacity:1}
.is-after .moment .when-before{display:none}
.moment .when-before{color:#FF8F8F;border-color:rgba(255,143,143,.3);background:rgba(255,143,143,.06)}
.day-note{margin-top:var(--s-3);color:var(--text-3);font-size:var(--t-small)}

/* 8.8 product detail (products) */
.detail{display:grid;gap:var(--s-8);align-items:center}
@media (min-width:1024px){.detail{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.detail--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.detail--rev > .detail__copy{order:2}}
.detail__copy{display:grid;gap:var(--s-3)}
.detail__copy .h2{max-width:14ch}
.detail__tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail__product{display:flex;align-items:center;gap:10px;font-weight:600}
.detail__product img{width:24px;height:24px}

/* 8.9 shared four (products) */
.four{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.four .card{display:grid;gap:var(--s-2);align-content:start}
.four p{color:var(--text-2)}

/* 8.10 name + founder (about) */
.name-grid{display:grid;gap:var(--gap)}
@media (min-width:960px){.name-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.quote{display:grid;gap:var(--s-4);align-content:space-between;padding:clamp(32px,4vw,56px);overflow:hidden;background:radial-gradient(70% 90% at 100% 100%,rgba(84,118,255,.3),transparent 60%),var(--surface)}
.quote blockquote{margin:0;font-size:clamp(26px,2.8vw,38px);line-height:1.2;letter-spacing:-.02em;font-weight:600;max-width:20ch}
.quote p{color:var(--text-2);max-width:52ch}
.founder{display:grid;gap:var(--s-2);align-content:start;padding:clamp(32px,4vw,48px)}
.founder__id{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1)}
.founder__mono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:18px;background:linear-gradient(140deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 0 0 4px rgba(110,140,255,.15)}
.founder__id b{display:block;font-size:20px}
.founder__id span{color:var(--text-3);font-size:var(--t-small)}
.founder p{color:var(--text-2)}

/* 8.11 status */
.status-hero{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4)}
.status-hero__icon{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(206,216,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2)}
.status-hero__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.status-hero .h3{margin-bottom:6px}
.svc{display:grid;margin-top:var(--gap);padding:0;overflow:hidden}
.svc li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);align-items:center;padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
.svc li:first-child{border-top:0}
.svc b{display:block;font-weight:600}
.svc span.d{color:var(--text-3);font-size:var(--t-small)}
.svc__bar{grid-column:1/-1;display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:4px}
.svc__bar i{height:20px;border-radius:3px;background:rgba(206,216,255,.07)}
.svc__axis{grid-column:1/-1;display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--text-3)}
.empty{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4)}
.report-steps{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.report-steps .card{display:grid;gap:var(--s-2);align-content:start}
.report-steps p{color:var(--text-2)}

/* ───────── 9. FOOTER ───────── */
.site-footer{position:relative;background:var(--bg-1);padding-top:var(--s-12);padding-bottom:var(--s-5)}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(124,152,255,.45) 30%,rgba(244,217,180,.3) 70%,transparent)}
.footer-grid{display:grid;gap:var(--s-6) var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.footer-grid{grid-template-columns:minmax(0,3.4fr) minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,2.6fr) minmax(0,1.8fr)}}
@media (min-width:900px){.footer-col a[href^="mailto"]{white-space:nowrap}}
.footer-col a[href^="mailto"]{overflow-wrap:normal;word-break:keep-all}
@media (max-width:899px){.footer-col--wide{grid-column:1/-1}}
.footer-brand{grid-column:1/-1;display:grid;gap:var(--s-2);align-content:start}
@media (min-width:900px){.footer-brand{grid-column:auto}}
.footer-brand img{height:26px;width:auto}
.footer-brand b{font-size:18px;font-weight:600;margin-top:var(--s-1)}
.footer-brand span{color:var(--text-3);font-size:var(--t-small)}
.footer-col h2{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600;margin-bottom:var(--s-1)}
.footer-col a,.footer-col .soon{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-2);font-size:15px;transition:color var(--dur-1)}
.footer-col a:hover{color:var(--text)}
.footer-col a svg{width:12px;height:12px}
.footer-col .soon{color:var(--text-3);cursor:default}
.footer-col li{overflow-wrap:anywhere}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-8);padding-top:var(--s-3);border-top:1px solid var(--line);color:var(--text-3);font-size:var(--t-small)}

/* ───────── 10. MOTION PRESETS ─────────
   fade-up   : reveal on scroll        — opacity 0→1, y 16px→0, --dur-3, --ease-out, stagger --stagger
   hover-lift: cards on hover          — y 0→-4px + edge glow, --dur-2, --ease-out
   press     : buttons                 — y -1px on hover, --dur-1
   orbit     : hero satellite          — one lap per --dur-orbit, linear, infinite
   handoff   : DeluHub event insert    — fade-up, --dur-2
   segment   : toggle thumb slide      — --dur-2, --ease-in-out
   Everything collapses to instant under prefers-reduced-motion. Reveal is opt-in via .js-motion so no-JS sees all content. */
.js-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes handoff-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ev.is-new{animation:handoff-in var(--dur-2) var(--ease-out) both}
.hero__d{animation:float 9s var(--ease-in-out) infinite alternate}
@keyframes float{to{transform:translateY(-10px)}}
.live-dot{animation:pulse 2.4s var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .js-motion [data-reveal]{opacity:1;transform:none}
}

@media (max-width:767px){.commit{min-height:0}.cta-band__mark{display:none}.cta-band__orbit{opacity:.45}}

.section--cta{padding-top:clamp(40px,5vw,72px)}
.moment__tags{position:relative;display:inline-grid}
.moment__tags > *{grid-area:1/1;justify-self:end}
.page-hero .jump{margin-top:var(--s-3)}
@media (max-width:767px){.moment{min-height:0}.moment__text{min-height:72px}}