/* ==========================================================================
   MIMIC — design system
   Shared by every page. No framework, no build step.

   1  Fonts            5  Buttons & chips      9  Mock-ups (phone, card, video)
   2  Tokens           6  Navigation          10  Forms & modal
   3  Base             7  Footer              11  Shared sections
   4  Type & layout    8  Motion utilities    12  Reduced motion / print
   ========================================================================== */

/* 1 ── Fonts (self-hosted, OFL) ─────────────────────────────────────────── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2 ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* stage */
  --bg:#000;
  --ink:#04060b;
  --ink-2:#080b13;
  --ink-3:#0d111b;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.22);

  /* text */
  --text:#f4f6fb;
  --text-2:rgba(228,234,250,.74);
  --text-3:rgba(222,229,248,.56);
  --text-4:rgba(222,229,248,.44);

  /* brand — sampled from the MIMIC mark */
  --indigo:#2e37fc;
  --blue:#2670fe;
  --sky:#279efe;
  --cyan:#39cdfd;
  --deep:#1241e1;
  /* lighter tints that stay legible as text on black */
  --indigo-t:#8b93ff;
  --sky-t:#63b8ff;
  --cyan-t:#6fdcff;

  /* the two voices: the star (human) and the twin (AI) */
  --human:var(--indigo-t);
  --twin:var(--cyan-t);

  /* page accent — overridden per product page */
  --accent:var(--sky);
  --accent-t:var(--sky-t);
  --accent-rgb:39,158,254;

  --grad-brand:linear-gradient(100deg,#7d84ff 0%,#3f9bff 46%,#5fe0ff 100%);
  --grad-deep:linear-gradient(100deg,#2e37fc 0%,#2670fe 45%,#39cdfd 100%);

  /* type */
  --font-sans:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-serif:'Instrument Serif','Iowan Old Style','Times New Roman',serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-hero:clamp(3.25rem,10.4vw,10.5rem);
  --fs-display:clamp(2.6rem,7vw,6.75rem);
  --fs-h2:clamp(2.1rem,4.9vw,4.5rem);
  --fs-h3:clamp(1.35rem,2.1vw,1.9rem);
  --fs-lead:clamp(1.125rem,1.55vw,1.5rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-micro:.75rem;

  /* space & shape */
  --gutter:clamp(1.25rem,4vw,3rem);
  --max:1240px;
  --max-wide:1480px;
  --section:clamp(5.5rem,11.5vw,10.5rem);
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:40px;

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --nav-h:64px;
  color-scheme:dark;
}

/* 3 ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
/* nothing inside the page may widen it: glows and slide-ins are cut at the edge.
   'clip' (not 'hidden') so the sticky scroll scenes keep working. */
main{display:block;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(57,205,253,.3);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.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;left:16px;top:-80px;z-index:1000;padding:12px 18px;border-radius:999px;background:#fff;color:#000;font-weight:700;transition:top .2s}
.skip-link:focus{top:16px}

/* film grain over the whole stage: keeps the blacks from banding on big screens.
   Static and normally blended on purpose, so it costs nothing while scrolling. */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 4 ── Type & layout ────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:calc(var(--max-wide) + var(--gutter)*2)}
.section{position:relative;padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.6)}
.center{text-align:center}
.center .lead,.center .h2,.center .display{margin-inline:auto}

.hero-title{font-size:var(--fs-hero);line-height:.92;letter-spacing:-.052em;font-weight:600}
.display{font-size:var(--fs-display);line-height:.98;letter-spacing:-.046em;font-weight:600;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.16;letter-spacing:-.028em;font-weight:600;text-wrap:balance}
.h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.015em;font-weight:650}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.012em;color:var(--text-2);font-weight:450;max-width:44ch;text-wrap:pretty}
.lead--wide{max-width:56ch}
.body-2{color:var(--text-2)}
.small{font-size:var(--fs-small);color:var(--text-3);line-height:1.55}

/* the serif italic is the human voice: quotes, spoken words, the emotional word in a headline */
.voice,.hero-title em,.display em,.h2 em,.h3 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.hero-title em,.display em,.h2 em{font-size:1.06em;padding-right:.04em}

.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.grad--flow{background-size:220% 100%;animation:gradFlow 8s ease-in-out infinite alternate}
@keyframes gradFlow{from{background-position:0% 50%}to{background-position:100% 50%}}
.dim{color:var(--text-4)}

.eyebrow{display:inline-flex;align-items:baseline;gap:.75em;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.eyebrow b{color:var(--accent-t);font-weight:500}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

.section-head{display:grid;gap:1.4rem;margin-bottom:clamp(3rem,6vw,5.5rem)}
.section-head.center{justify-items:center}

/* 5 ── Buttons & chips ──────────────────────────────────────────────────── */
.btn{
  --btn-bg:#fff;--btn-fg:#05070c;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 1.55em;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:1rem;font-weight:650;letter-spacing:-.012em;line-height:1;white-space:nowrap;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s,color .3s,border-color .3s;
  -webkit-tap-highlight-color:transparent;isolation:isolate;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(120,170,255,.55)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
/* the one arrow on the site is drawn in CSS: a chevron at rest that grows a tail on hover */
.arr{position:relative;display:inline-block;flex:none;width:.74em;height:.74em;margin-left:.05em}
.arr::before{content:'';position:absolute;top:50%;right:.08em;width:.6em;height:1.5px;margin-top:-.75px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.arr::after{content:'';position:absolute;top:50%;right:.08em;width:.36em;height:.36em;margin-top:-.18em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-.2em) rotate(45deg);transition:transform .45s var(--ease-out)}
a:hover .arr::before,button:hover .arr::before,.portal:hover .arr::before{transform:scaleX(1)}
a:hover .arr::after,button:hover .arr::after,.portal:hover .arr::after{transform:translateX(0) rotate(45deg)}
.btn--ghost{--btn-bg:rgba(255,255,255,.05);--btn-fg:var(--text);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.1);border-color:var(--line-3);box-shadow:0 14px 40px -18px rgba(120,170,255,.4)}
.btn--sm{min-height:42px;font-size:.9375rem;padding:0 1.25em}
.btn--lg{min-height:60px;font-size:1.0625rem;padding:0 1.9em}
.btn--block{width:100%}

/* light that travels round the edge — reserved for the one primary action in view */
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn--beam{--btn-bg:#05070c;--btn-fg:#fff;border:1px solid transparent;
  background:linear-gradient(var(--btn-bg),var(--btn-bg)) padding-box,conic-gradient(from var(--beam),rgba(255,255,255,.14) 0deg,rgba(255,255,255,.14) 200deg,var(--cyan) 270deg,#fff 300deg,var(--indigo-t) 330deg,rgba(255,255,255,.14) 360deg) border-box;
  animation:beam 4.5s linear infinite}
.btn--beam:hover{--btn-bg:#0b1020}
@keyframes beam{to{--beam:360deg}}

.link{display:inline-flex;align-items:center;gap:.45em;font-weight:650;color:var(--accent-t);transition:color .3s}
.link:hover{color:#fff}

.chip{display:inline-flex;align-items:center;gap:.5em;min-height:30px;padding:0 .85em;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}

.chip--live{color:#ff8a8a;border-color:rgba(255,90,90,.28);background:rgba(255,70,70,.08)}
.chip--live::before,.dot-live{content:'';width:6px;height:6px;border-radius:50%;background:#ff5252;box-shadow:0 0 0 0 rgba(255,82,82,.6);animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,82,82,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,82,82,0)}}
.chip--accent{color:var(--accent-t);border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08)}
.chip--dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--ok{color:#7ee2a8;border-color:rgba(80,220,140,.26);background:rgba(60,200,120,.07)}

/* 6 ── Navigation ───────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);display:flex;align-items:center;transition:transform .6s var(--ease-out),background-color .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(2,4,8,.66);-webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-105%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;max-width:calc(var(--max-wide) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:.7rem;flex:none;view-transition-name:brand}
.brand__mark{width:34px;height:29px;flex:none;filter:drop-shadow(0 0 14px rgba(39,158,254,.45))}
.brand__word{width:74px;height:19px;flex:none;color:#fff}
.brand__by{display:inline-flex;align-items:center;gap:.5rem;padding-left:.85rem;margin-left:.15rem;border-left:1px solid var(--line-2);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);transition:color .3s}
.brand__by img{height:11px;width:auto;opacity:.82;transition:opacity .3s}
.brand:hover .brand__by img{opacity:1}
.nav__links{display:flex;align-items:center;gap:.25rem;position:absolute;left:50%;transform:translateX(-50%)}
.nav__link{padding:.55rem .95rem;border-radius:999px;font-size:.9375rem;font-weight:550;color:var(--text-2);transition:color .25s,background-color .25s}
.nav__link:hover,.nav__link.is-active{color:#fff;background:rgba(255,255,255,.07)}
.nav__right{display:flex;align-items:center;gap:.75rem}

/* product switch: the two experiences are always one tap apart */
.switch{position:relative;display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.switch a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;padding:.5rem .95rem;border-radius:999px;font-size:.875rem;font-weight:600;color:var(--text-2);transition:color .3s,background-color .3s}
.switch a::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;transition:opacity .3s,box-shadow .3s}
.switch a:hover{color:#fff}
.switch a[data-p='interactive']:hover::before,.switch a[data-p='interactive'].is-on::before{color:var(--indigo-t);opacity:1;box-shadow:0 0 10px var(--indigo-t)}
.switch a[data-p='curated']:hover::before,.switch a[data-p='curated'].is-on::before{color:var(--cyan-t);opacity:1;box-shadow:0 0 10px var(--cyan-t)}
.switch a.is-on{color:#fff;background:rgba(255,255,255,.1)}

.nav__burger{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.nav__burger span{position:relative;width:16px;height:1.5px;background:#fff;border-radius:2px;transition:background-color .2s}
.nav__burger span::before,.nav__burger span::after{content:'';position:absolute;left:0;width:16px;height:1.5px;background:#fff;border-radius:2px;transition:transform .45s var(--ease-out)}
.nav__burger span::before{transform:translateY(-5px)}
.nav__burger span::after{transform:translateY(5px)}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:center;gap:2.2rem;padding:calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;background:rgba(1,2,5,.9);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease-soft),visibility 0s .45s}
.menu.is-open{opacity:1;visibility:visible;transition-delay:0s}
.menu__links{display:grid;gap:.35rem}
.menu__links a{font-size:clamp(2rem,9vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.15;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0)*55ms + 80ms)}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu__links a small{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-top:.2rem}
.menu__foot{display:grid;gap:1rem}

@media (max-width:1080px){
  .nav__links{display:none}
}
@media (max-width:820px){
  .nav__right .switch,.nav__right .btn{display:none}
  .nav__burger{display:inline-flex}
  .brand__by{display:none}
}

/* 7 ── Footer ───────────────────────────────────────────────────────────── */
.footer{position:relative;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink) 0%,#000 100%)}
.footer__glow{position:absolute;left:50%;top:0;width:min(1100px,120vw);height:420px;transform:translate(-50%,-55%);background:radial-gradient(closest-side,rgba(39,158,254,.2),rgba(46,55,252,.08) 55%,transparent);pointer-events:none}
.footer__top{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.7fr));gap:3rem 2.5rem;padding-block:clamp(4rem,8vw,6.5rem) clamp(3rem,6vw,4.5rem)}
.lockup{display:inline-flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.lockup__mimic{display:inline-flex;align-items:center;gap:.8rem}
.lockup__mimic .m{width:46px;height:40px;filter:drop-shadow(0 0 18px rgba(39,158,254,.5))}
.lockup__mimic .w{width:104px;height:27px;color:#fff}
.lockup__by{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.lockup__velentis{display:inline-flex;align-items:center;gap:.6rem;opacity:.9;transition:opacity .3s}
.lockup__velentis:hover{opacity:1}
.lockup__velentis .vm{height:26px;width:auto}
.lockup__velentis .vw{height:15px;width:auto}
.footer__blurb{margin-top:1.6rem;max-width:34ch;color:var(--text-3);font-size:var(--fs-small);line-height:1.6}
.footer h4{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);margin-bottom:1.1rem}
.footer li+li{margin-top:.6rem}
.footer li a{color:var(--text-2);font-size:var(--fs-small);transition:color .25s}
.footer li a:hover{color:#fff}
.footer__word{position:relative;display:block;width:100%;height:auto;color:#fff;opacity:.045;margin-top:-1rem;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%)}
.footer__bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:1.4rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--text-3)}
.footer__bar a{color:var(--text-2);transition:color .25s}
.footer__bar a:hover{color:#fff}
.footer__bar nav{display:flex;gap:1.5rem}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}.footer__top>:first-child{grid-column:1/-1}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}

/* 8 ── Motion utilities ─────────────────────────────────────────────────── */
/* [data-reveal] fades up when it enters the viewport; --i staggers siblings */
/* hidden only when JS is present to bring it back (html.js is set in <head>) */
.js [data-reveal]{opacity:0;transform:translate3d(0,28px,0);filter:blur(10px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms + var(--d,0ms));will-change:opacity,transform}
.js [data-reveal='fade']{transform:none}
.js [data-reveal='scale']{transform:scale(.94)}
.js [data-reveal='left']{transform:translate3d(-36px,0,0)}
.js [data-reveal='right']{transform:translate3d(36px,0,0)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none;will-change:auto}
/* on narrow screens a sideways entrance would push past the edge, so it rises instead */
@media (max-width:1000px){.js [data-reveal='left']:not(.is-in),.js [data-reveal='right']:not(.is-in){transform:translate3d(0,28px,0)}}

/* the visitor's name, wherever it appears */
[data-fan]{display:inline-block;transition:opacity .26s,filter .26s,transform .26s}
[data-fan].is-swap{opacity:0;filter:blur(6px);transform:translateY(.14em)}

/* [data-split] is cut into words by JS; each word rises on its own */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translate3d(0,108%,0) rotate(4deg);transform-origin:0 100%;opacity:0;transition:transform 1.15s var(--ease-out),opacity .7s var(--ease-out);transition-delay:calc(var(--wi,0)*65ms + var(--d,0ms))}
.is-in .w>span,.w.is-in>span{transform:none;opacity:1}

/* pointer-follow light on a surface */
.spot{position:relative;isolation:isolate}
.spot::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.16),transparent 62%)}
.spot::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after{opacity:1}

/* surfaces */
.card{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* large panels are opaque: blurring what is behind them would cost a lot and show nothing */
.glass{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(17,22,34,.94),rgba(8,11,18,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.9)}

@keyframes floaty{50%{translate:0 -10px}}

/* "You" once the visitor has typed a name, "Fan" while the page shows sample names */
.if-fan{display:none}
.has-fan .if-fan{display:inline}
.has-fan .if-nofan{display:none}

/* voice bars — a tiny waveform made of spans */
.bars{display:inline-flex;align-items:center;gap:.19em;height:1.75em}
.bars i{display:block;width:.19em;min-width:2px;border-radius:3px;background:currentColor;height:20%;animation:bar 1.1s ease-in-out infinite;animation-delay:calc(var(--n)*-137ms)}
.bars.is-quiet i{animation-play-state:paused;height:14%!important;opacity:.5}
@keyframes bar{0%,100%{height:16%}30%{height:calc(30% + var(--h)*.7%)}55%{height:calc(12% + var(--h)*.3%)}80%{height:calc(24% + var(--h)*.55%)}}

/* 9 ── Mock-ups ─────────────────────────────────────────────────────────── */
/* phone: a quiet titanium frame so the screen carries the story */
.phone{--pw:300px;position:relative;width:var(--pw);aspect-ratio:300/620;border-radius:calc(var(--pw)*.16);padding:calc(var(--pw)*.03);
  background:linear-gradient(145deg,#3b4254 0%,#12151d 28%,#0a0c12 60%,#2a3040 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 0 0 1px rgba(0,0,0,.6),0 50px 100px -30px rgba(0,0,0,.95),0 30px 80px -30px rgba(var(--accent-rgb),.35)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.13);overflow:hidden;background:#03050a;isolation:isolate}
.phone__island{position:absolute;top:calc(var(--pw)*.035);left:50%;z-index:5;width:30%;height:calc(var(--pw)*.082);border-radius:999px;background:#000;transform:translateX(-50%)}
.phone__status{position:absolute;inset:0 0 auto 0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pw)*.052) calc(var(--pw)*.09) 0;font-size:calc(var(--pw)*.042);font-weight:700;letter-spacing:-.01em;color:#fff}
.phone__status svg{height:calc(var(--pw)*.036);width:auto}
.phone__home{position:absolute;bottom:calc(var(--pw)*.022);left:50%;z-index:5;width:36%;height:4px;border-radius:4px;background:rgba(255,255,255,.55);transform:translateX(-50%)}

/* live call screen */
.call{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--pw)*.2) calc(var(--pw)*.07) calc(var(--pw)*.09);text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.28),transparent 60%),radial-gradient(90% 60% at 50% 100%,rgba(57,205,253,.14),transparent 60%),#03050a}
.call__meta{display:flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:calc(var(--pw)*.034);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.call__name{margin-top:calc(var(--pw)*.035);font-size:calc(var(--pw)*.088);font-weight:650;letter-spacing:-.035em;line-height:1.05}
.call__role{margin-top:.3em;font-size:calc(var(--pw)*.042);color:rgba(255,255,255,.6)}
.call__orb{position:relative;width:54%;aspect-ratio:1;margin-top:calc(var(--pw)*.075);flex:none}
.call__orb canvas{position:absolute;inset:-28%;width:156%;height:156%;max-width:none}
.call__cap{margin-top:auto;width:100%;min-height:calc(var(--pw)*.33);display:flex;flex-direction:column;justify-content:flex-end;gap:.5em;text-align:left}
.cap{font-size:calc(var(--pw)*.046);line-height:1.34;letter-spacing:-.012em;transition:opacity .5s,transform .5s var(--ease-out)}
.cap--fan{color:rgba(255,255,255,.52)}
.cap--twin{font-family:var(--font-serif);font-style:italic;font-size:calc(var(--pw)*.064);line-height:1.18;letter-spacing:-.01em;color:#fff}
.cap b{font-weight:inherit;color:var(--twin)}
.cap .who{display:block;font-family:var(--font-mono);font-style:normal;font-size:calc(var(--pw)*.03);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:.25em}
.cap .caret{display:inline-block;width:.08em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--twin);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.call__ctrl{display:flex;justify-content:center;gap:calc(var(--pw)*.06);margin-top:calc(var(--pw)*.055);width:100%}
.call__ctrl span{display:grid;place-items:center;width:calc(var(--pw)*.15);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.call__ctrl span svg{width:42%;height:42%}
.call__ctrl .end{background:#ff3b47}

/* ── people ──────────────────────────────────────────────────────────────
   .player is a person (inc/players.php): your own footage, a photo cut-out, or a drawn stand-in.
   Only the drawing is shown out of focus (so it reads as footage); the amount is set where it is used,
   relative to the frame. Photos and footage are always sharp.
   .scene is where they are standing. */
.player{display:block;width:100%;height:100%}
.player--face{filter:blur(1.7px)}
.player--media{object-fit:cover;object-position:50% 22%;filter:none!important}
.player--photo{filter:none!important}
.pl__mouth{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(calc(1 + var(--talk,0)*1.35)) scaleX(calc(1 - var(--talk,0)*.1));transition:transform .09s linear}
.scene{position:absolute;inset:0;background:#05070d}
.scene--stadium{background:
  radial-gradient(18% 11% at 10% 7%,rgba(255,255,255,.6),transparent 70%),radial-gradient(18% 11% at 90% 5%,rgba(255,255,255,.52),transparent 70%),
  radial-gradient(44% 26% at 10% 7%,rgba(120,170,255,.36),transparent 72%),radial-gradient(44% 26% at 90% 5%,rgba(120,170,255,.32),transparent 72%),
  radial-gradient(7% 4.4% at 30% 21%,rgba(255,255,255,.2),transparent 70%),radial-gradient(6% 4% at 68% 17%,rgba(170,225,255,.2),transparent 70%),radial-gradient(8% 5% at 82% 30%,rgba(255,255,255,.12),transparent 70%),
  radial-gradient(120% 55% at 50% 112%,rgba(20,110,80,.5),transparent 60%),
  linear-gradient(180deg,#0b1434 0%,#070b1c 55%,#04060d 100%)}
.scene--training{background:
  radial-gradient(30% 20% at 84% 8%,rgba(255,244,214,.5),transparent 70%),radial-gradient(60% 40% at 84% 8%,rgba(255,220,160,.16),transparent 72%),
  radial-gradient(130% 50% at 50% 108%,rgba(40,170,110,.6),transparent 62%),
  linear-gradient(180deg,#12303f 0%,#0e2a2c 52%,#081a14 100%)}
.scene--studio{background:
  radial-gradient(40% 36% at 50% 36%,rgba(139,147,255,.5),transparent 70%),radial-gradient(70% 60% at 50% 36%,rgba(99,115,255,.2),transparent 72%),
  linear-gradient(180deg,#151331 0%,#0a0918 60%,#06050d 100%)}
.scene--room{background:
  radial-gradient(22% 15% at 84% 26%,rgba(255,196,130,.5),transparent 70%),radial-gradient(46% 32% at 84% 26%,rgba(255,170,100,.16),transparent 72%),
  radial-gradient(14% 9% at 12% 18%,rgba(139,147,255,.42),transparent 70%),radial-gradient(9% 6% at 30% 34%,rgba(255,255,255,.1),transparent 70%),
  linear-gradient(180deg,#191522 0%,#0f0c16 60%,#08060b 100%)}
/* a villa terrace at dusk */
.scene--villa{background:
  radial-gradient(40% 26% at 22% 30%,rgba(255,150,90,.5),transparent 70%),radial-gradient(70% 44% at 22% 30%,rgba(255,110,90,.2),transparent 72%),
  radial-gradient(7% 4.5% at 62% 16%,rgba(255,220,170,.5),transparent 70%),radial-gradient(6% 4% at 74% 22%,rgba(255,220,170,.42),transparent 70%),radial-gradient(6% 4% at 86% 15%,rgba(255,220,170,.4),transparent 70%),radial-gradient(5% 3.4% at 94% 26%,rgba(255,220,170,.3),transparent 70%),
  linear-gradient(180deg,#2a1830 0%,#1a1026 55%,#0b0812 100%)}
.scene--home{background:radial-gradient(60% 40% at 30% 20%,rgba(255,210,160,.3),transparent 70%),linear-gradient(180deg,#2a2630,#131118)}

/* video call: the avatar, face to face. Sized from --pw like the rest of the phone. */
.vcall{position:absolute;inset:0;overflow:hidden;container-type:size;background:#04060d;color:#fff;text-align:left}
.vcall__who{position:absolute;inset:-4%;width:108%;height:108%;filter:blur(1.5cqw);transform-origin:50% 78%;animation:sway 10s ease-in-out infinite;will-change:transform}
@keyframes sway{0%,100%{transform:none}32%{transform:scale(1.012) translate3d(.7%,-.4%,0) rotate(.5deg)}68%{transform:scale(1.006) translate3d(-.6%,.3%,0) rotate(-.45deg)}}
.vcall__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,10,.66) 0,rgba(2,4,10,0) 25%,rgba(2,4,10,0) 44%,rgba(2,4,10,.86) 74%,#03050a 100%)}
.vcall__top{position:absolute;left:calc(var(--pw)*.07);right:38%;top:calc(var(--pw)*.175);display:grid;gap:.3em;justify-items:start;font-size:calc(var(--pw)*.04)}
.vcall__live{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.8em;letter-spacing:.1em;color:rgba(255,255,255,.86)}
.vcall__live i{width:.6em;height:.6em;border-radius:50%;background:#ff5252;animation:live 1.8s ease-out infinite}
/* who is speaking: the meter moves while the twin talks */
.vcall__meter{height:1.1em;font-size:.9em;color:var(--twin);transition:opacity .3s}
.vcall__meter.is-quiet{opacity:.45}
.vcall__name{font-size:1.85em;font-weight:650;letter-spacing:-.03em;line-height:1.05}
.vcall__tag{font-size:.86em;color:rgba(255,255,255,.7)}
.vcall__pip{position:absolute;right:calc(var(--pw)*.055);top:calc(var(--pw)*.165);width:27%;aspect-ratio:3/4;border-radius:calc(var(--pw)*.052);overflow:hidden;container-type:inline-size;border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 30px -8px rgba(0,0,0,.85)}
.vcall__pip .player{position:absolute;inset:-5%;width:110%;height:110%;filter:blur(3.2cqw)}
.vcall__pip b{position:absolute;left:0;right:0;bottom:0;padding:1.4em .3em .4em;font-size:calc(var(--pw)*.031);font-weight:650;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.vcall__caps{position:absolute;left:calc(var(--pw)*.07);right:calc(var(--pw)*.07);bottom:calc(var(--pw)*.305);display:flex;flex-direction:column;justify-content:flex-end;gap:.45em;min-height:calc(var(--pw)*.3)}
.vcall__ctrl{position:absolute;left:0;right:0;bottom:calc(var(--pw)*.085);display:flex;justify-content:center;gap:calc(var(--pw)*.042)}
.vcall__ctrl span{display:grid;place-items:center;width:calc(var(--pw)*.15);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vcall__ctrl span svg{width:48%;height:48%}
.vcall__ctrl .end{background:#ff3b47}

/* video frame: the same avatar in a landscape window (console, video messages) */
.vframe{position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:16/10;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.12);background:#04060d;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.95)}
.vframe .player{position:absolute;inset:-3%;width:106%;height:106%;filter:blur(clamp(2.4px,1.05cqw,6.5px))}
.vframe__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,10,.5) 0,transparent 26%,transparent 50%,rgba(2,4,10,.88) 100%)}

/* greeting card — everything inside is sized in em, so the card scales with --gw */
.gcard{--gw:340px;position:relative;width:var(--gw);max-width:100%;font-size:calc(var(--gw)/21.25);aspect-ratio:340/430;border-radius:1.375em;padding:1.75em 1.625em 1.5em;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,#101728 0%,#070a13 55%,#0a1020 100%);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.95),0 24px 70px -34px rgba(57,205,253,.45)}
.gcard::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 50% at 85% 0%,rgba(57,205,253,.22),transparent 60%),radial-gradient(70% 45% at 0% 100%,rgba(46,55,252,.28),transparent 60%);pointer-events:none}
.gcard>*{position:relative}
.gcard__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.625em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.gcard__hi{margin-top:.62em;font-family:var(--font-serif);font-style:italic;font-size:2.7em;line-height:1.02;letter-spacing:-.02em}
.gcard__hi b{font-weight:400;color:var(--twin)}
.gcard__msg{margin-top:.95em;font-size:.9375em;line-height:1.55;color:rgba(255,255,255,.72)}
.gcard__sig{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1)}
.gcard__sig .n{font-family:var(--font-serif);font-style:italic;font-size:1.5em;line-height:1}
.gcard__sig .r{font-family:var(--font-mono);font-size:.5625em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:.6em}
.gcard__sig .bars{color:var(--twin);height:1.5em}

/* video message — scales with --vw */
.vmsg{--vw:380px;position:relative;width:var(--vw);max-width:100%;container-type:inline-size;font-size:calc(var(--vw)/23.75);aspect-ratio:16/10;border-radius:1.25em;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(70% 90% at 50% 100%,rgba(var(--accent-rgb),.4),transparent 70%),linear-gradient(180deg,#0b1222,#05070d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.95)}

.vmsg .player{position:absolute;inset:-3%;width:106%;height:106%;filter:blur(clamp(2.4px,1.05cqw,6.5px))}
.vmsg__play{position:absolute;left:50%;top:46%;width:3.6em;height:3.6em;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);transition:transform .5s var(--ease-out),background-color .3s}
.vmsg__play::after{content:'';margin-left:.2em;border-style:solid;border-width:.46em 0 .46em .74em;border-color:transparent transparent transparent #fff}
.vmsg:hover .vmsg__play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.22)}
.vmsg__tag{position:absolute;left:.875em;top:.875em;display:flex;gap:.375em}
.vmsg .chip{font-size:.6em;min-height:2.6em;padding:0 .9em}
.vmsg__bar{position:absolute;inset:auto 0 0 0;padding:1.75em 1em .875em;display:flex;align-items:flex-end;justify-content:space-between;gap:1em;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.vmsg__title{font-size:.9375em;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.vmsg__title b{font-weight:inherit;color:var(--twin)}
.vmsg__title small{display:block;font-family:var(--font-mono);font-size:.6em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.5em}
.vmsg__time{font-family:var(--font-mono);font-size:.6875em;color:rgba(255,255,255,.7)}
.vmsg__prog{position:absolute;inset:auto 0 0 0;height:3px;background:rgba(255,255,255,.12)}
.vmsg__prog i{display:block;height:100%;width:38%;background:var(--grad-deep);border-radius:0 3px 3px 0}

/* notification toast — scales with its font-size */
.toast{display:flex;align-items:center;gap:.75em;width:max-content;max-width:100%;padding:.7em 1em .7em .7em;border-radius:1.125em;border:1px solid rgba(255,255,255,.14);background:rgba(18,22,34,.78);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:0 20px 50px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.toast__ico{width:2.375em;height:2.375em;border-radius:.69em;display:grid;place-items:center;background:var(--grad-deep);flex:none}
.toast__ico svg{width:1.25em;height:1.06em;color:#fff}
.toast__t{font-size:.8125em;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.toast__s{font-size:.75em;color:rgba(255,255,255,.6);line-height:1.3}
.toast__s b{font-weight:inherit;color:var(--twin)}

/* avatar: an abstract portrait — never a real person's likeness */
.avatar{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 35% 25%,#6aa9ff,#2e37fc 55%,#0b1140);color:#fff;font-weight:700;letter-spacing:-.02em}
.avatar--cyan{background:radial-gradient(circle at 35% 25%,#9cf0ff,#279efe 55%,#0a2a5a)}
.avatar--violet{background:radial-gradient(circle at 35% 25%,#c3b5ff,#6a4dff 55%,#1a0f52)}
.avatar--warm{background:radial-gradient(circle at 35% 25%,#ffd3a8,#ff7a59 55%,#4a1420)}

/* 10 ── Forms & modal ───────────────────────────────────────────────────── */
.field{display:grid;gap:.5rem}
.field label{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.input,.field input,.field select,.field textarea{width:100%;min-height:52px;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);color:#fff;font-size:1rem;font-weight:500;transition:border-color .25s,background-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23aab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.field select option{background:#0b0f18;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--text-4)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(var(--accent-rgb),.8);background:rgba(var(--accent-rgb),.06);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16)}
.form{display:grid;gap:1.1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:.8125rem;color:var(--text-3);text-align:center}
.form__note a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.form__error{display:none;padding:.75rem 1rem;border-radius:12px;border:1px solid rgba(255,90,90,.3);background:rgba(255,70,70,.08);color:#ffb3b3;font-size:.875rem}
.form__error.is-on{display:block}
.form__done{display:none;text-align:center;padding:2.5rem 0 1.5rem}
.form__done .mark{display:block;width:76px;height:66px;margin:0 auto 1.5rem;filter:drop-shadow(0 0 22px rgba(39,158,254,.6))}
.is-sent>.form{display:none}
.is-sent>.form__done{display:block}
.btn.is-busy{pointer-events:none;opacity:.6}

.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity .4s var(--ease-soft),visibility 0s .4s}
.modal.is-open{visibility:visible;opacity:1;transition-delay:0s}
.modal__veil{position:absolute;inset:0;background:rgba(0,1,4,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.modal__panel{position:relative;width:min(560px,100%);max-height:min(92vh,860px);overflow:auto;overscroll-behavior:contain;border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,#0d121d,#06080e);box-shadow:0 60px 140px -30px #000,0 0 0 1px rgba(255,255,255,.04),0 40px 120px -40px rgba(var(--accent-rgb),.4);transform:translateY(24px) scale(.97);transition:transform .6s var(--ease-out)}
.modal.is-open .modal__panel{transform:none}
.modal__panel--wide{width:min(760px,100%)}
.modal__head{position:relative;padding:2rem 2rem 1.4rem;border-bottom:1px solid var(--line);background:radial-gradient(90% 140% at 0% 0%,rgba(var(--accent-rgb),.16),transparent 60%)}
.modal__head .h3{margin-top:.9rem}
.modal__head p{margin-top:.4rem;color:var(--text-3);font-size:var(--fs-small)}
.modal__body{padding:1.6rem 2rem 2rem}
.modal__x{position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text-2);transition:background-color .25s,color .25s,transform .4s var(--ease-out)}
.modal__x:hover{background:rgba(255,255,255,.1);color:#fff;transform:rotate(90deg)}
.modal__x::before,.modal__x::after,.namefield__x::before,.namefield__x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;border-radius:2px;background:currentColor}
.modal__x::before,.namefield__x::before{transform:rotate(45deg)}
.modal__x::after,.namefield__x::after{transform:rotate(-45deg)}
@media (max-width:560px){.modal__head{padding:1.6rem 1.25rem 1.2rem}.modal__body{padding:1.25rem}}

/* 11 ── Shared sections ─────────────────────────────────────────────────── */
/* keynote figures */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figure{position:relative;padding:clamp(2rem,4vw,3.5rem) clamp(1rem,2.4vw,2.25rem);display:grid;gap:.9rem;align-content:start}
.figure+.figure{border-left:1px solid var(--line)}
.figure__n{font-size:clamp(2.75rem,6.2vw,5.75rem);font-weight:600;letter-spacing:-.055em;line-height:.9;white-space:nowrap}
.figure__n small{font-size:.42em;font-weight:600;letter-spacing:-.03em;color:var(--text-3);margin-left:.08em}
.figure__l{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-t)}
.figure__d{color:var(--text-3);font-size:var(--fs-small);line-height:1.5;max-width:26ch}
@media (max-width:900px){.figures{grid-template-columns:1fr 1fr}.figure:nth-child(3){border-left:0}.figure:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:460px){.figure{padding-inline:.9rem}}

/* a quiet line of facts, in place of a row of badges */
.tags{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tags--center{justify-content:center}
.tags span+span{position:relative}
.tags span+span::before{content:'';position:absolute;left:-.76rem;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--text-4)}


/* contact block (two columns: pitch + form) */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}

.contact__form{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-lg)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* checklist */
.rlist{display:grid}
.contact__list{margin-top:2rem}
.rlist li{padding:.74rem 0;border-top:1px solid var(--line);color:var(--text-2);font-size:var(--fs-small);line-height:1.5}
.rlist li:last-child{border-bottom:1px solid var(--line)}
.rlist--2{grid-template-columns:1fr 1fr;column-gap:1.5rem}
.rlist--2 li:nth-last-child(2){border-bottom:1px solid var(--line)}
@media (max-width:480px){.rlist--2{grid-template-columns:1fr}.rlist--2 li:nth-last-child(2){border-bottom:0}}

/* name field: type a first name, every mock-up on the page becomes yours */
.namefield{position:relative;display:flex;align-items:center;gap:.6rem;width:min(540px,100%);min-height:68px;margin-top:.8rem;padding:.5rem .55rem .5rem 1.6rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:border-color .3s,box-shadow .4s,background-color .3s}
.namefield:focus-within{border-color:rgba(57,205,253,.75);background:rgba(57,205,253,.05);box-shadow:0 0 0 5px rgba(57,205,253,.13),0 24px 70px -24px rgba(57,205,253,.6)}

.namefield input{flex:1;min-width:0;height:48px;padding:0;border:0;outline:0;background:none;font-size:1.25rem;font-weight:650;letter-spacing:-.02em;color:#fff}
.namefield input::placeholder{color:var(--text-4);font-weight:500}
.namefield__x{position:relative;display:none;flex:none;width:36px;height:36px;border-radius:50%;color:var(--text-3);transition:color .2s,background-color .2s}
.namefield__x:hover{color:#fff;background:rgba(255,255,255,.08)}
.has-fan .namefield__x{display:block}
.namefield__state{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:0 1.1rem;border-radius:999px;background:rgba(255,255,255,.06);font-size:.875rem;font-weight:600;color:var(--text-2);white-space:nowrap;transition:background-color .4s,color .4s}
.namefield__state b{color:var(--cyan-t);font-weight:750}
.namefield__you{display:none}
.has-fan .namefield__demo{display:none}
.has-fan .namefield__you{display:inline}
.has-fan .namefield__state{background:rgba(57,205,253,.16);color:#fff}
.namefield__note{color:var(--text-3)}
@media (max-width:520px){.namefield{flex-wrap:wrap;border-radius:26px;padding:.6rem .7rem .7rem 1.1rem}.namefield__state{width:100%;justify-content:center;margin-left:-.4rem}}

/* steps: a short process told along a line */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem)}
.steps::before,.steps::after{content:'';position:absolute;left:0;right:0;top:158px;height:1px}
.steps::before{background:var(--line-2)}
.steps::after{background:var(--grad-deep);transform:scaleX(0);transform-origin:left;transition:transform 2.6s var(--ease-in-out) .35s;box-shadow:0 0 14px rgba(39,158,254,.8)}
.steps.is-in::after{transform:scaleX(1)}
.step{position:relative;display:grid;gap:.7rem;align-content:start}
.js .step{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i)*420ms + 250ms)}
.js .steps.is-in .step{opacity:1;transform:none}
.step::before{content:'';position:absolute;left:0;top:154px;z-index:1;width:9px;height:9px;border-radius:50%;background:#000;box-shadow:0 0 0 2px var(--sky),0 0 14px 2px rgba(39,158,254,.8)}
.step__viz{position:relative;height:132px;margin-bottom:2.6rem;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;overflow:hidden;color:var(--sky-t)}
.step__day{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-t)}
.step .h3{display:flex;align-items:baseline;gap:.65rem}
.step__n{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;color:var(--text-4)}
.step p{color:var(--text-3);font-size:var(--fs-small);line-height:1.55;max-width:30ch}
.rec{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:#fff}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff5252;animation:live 1.8s ease-out infinite}
.step__viz--rec .bars{height:40px;font-size:1rem}
.step__viz--train svg{width:78%;height:auto}
.step__viz--train circle{animation:node 2.4s ease-in-out infinite}
.step__viz--train circle:nth-child(2n){animation-delay:-.8s}
.step__viz--train circle:nth-child(3n){animation-delay:-1.6s}
@keyframes node{50%{opacity:.35}}
.step__viz--shape{padding:1rem;gap:.45rem}
.tog{display:inline-flex;align-items:center;gap:.45em;height:28px;padding:0 .7rem;border-radius:999px;border:1px solid var(--line-2);font-size:.75rem;font-weight:600;color:var(--text-3)}
.tog::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.tog.is-on{color:#fff;border-color:rgba(39,158,254,.55);background:rgba(39,158,254,.16)}
.tog.is-on::before{background:var(--cyan);opacity:1;box-shadow:0 0 8px var(--cyan)}
.tog:not(.is-on){text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.step__viz--live .pulse{position:absolute;width:60px;height:60px;border-radius:50%;border:1px solid rgba(255,82,82,.5);animation:ring 2.6s ease-out infinite}
.step__viz--live .pulse::before,.step__viz--live .pulse::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,82,82,.5);animation:ring 2.6s ease-out infinite}
.step__viz--live .pulse::before{animation-delay:-.85s}
.step__viz--live .pulse::after{animation-delay:-1.7s}
@keyframes ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@media (max-width:940px){
  .steps{grid-template-columns:1fr 1fr;row-gap:3rem}
  .steps::before,.steps::after,.step::before{display:none}
  .step__viz{margin-bottom:1rem}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:940px){.steps--3{grid-template-columns:1fr}}

/* smooth cross-page transitions where the browser supports them */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s var(--ease-soft) both}
::view-transition-new(root){animation:vtIn .6s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:scale(1.015);filter:blur(8px)}}

/* 12 ── Reduced motion / print ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .w>span{transform:none;opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media print{.nav,.menu,.grain,.modal{display:none!important}body{background:#fff;color:#000}}