/* premium.css — the shared layer of helloauralis.com (2026-09-24, the premium pass on v3).
   Loaded AFTER each page's own <style>, so it wins on equal specificity. It does three jobs:
   1. the design tokens, and a remap of the old v3 tokens so every existing page follows them;
   2. the chrome every page shares: type, header, mobile menu, buttons, footer, assistant launcher;
   3. the removal of the old "vault" layer: no gold, no italic serif accent words, no violet haze.
   Decisions: brainstorms/2026-09-24-website-v3-premium-pass.md */

@font-face{font-family:'General Sans';src:url(fonts/general-sans-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(fonts/general-sans-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url(fonts/switzer-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url(fonts/switzer-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ground and surfaces: neutral black, the faintest cool cast; no violet haze */
  --bg:#050507; --bg-1:#08080B; --bg-2:#0B0B0F; --surf:#0F0F13; --surf-2:#141419;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18);
  /* text */
  --tx:#F5F5F7; --tx-2:#B6B6BF; --tx-3:#8A8A95; --tx-4:#80808C;
  /* the one accent: Auralis violet, used on a few percent of any screen */
  --v:#8B7CFF; --v-2:#A99FFF; --v-3:#CFC9FF; --v-deep:#5B4BE0;
  --disp:'General Sans','Switzer',system-ui,-apple-system,sans-serif;
  --body:'Switzer',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --gut:clamp(20px,4vw,48px);
  --r-sm:10px; --r-md:16px; --r-lg:22px;

  /* the old v3 tokens, remapped: every page that still reads them follows the new system */
  --deep:#030305; --ink:#050507; --carbon:#0F0F13; --graphite:#1B1B21; --slate:#2B2B33;
  --ash:#80808C; --steel:#8A8A95; --fog:#A8A8B2; --silver:#CBCBD3; --bone:#E6E6EB; --white:#F5F5F7;
  --lav:#B3A9FF; --violet:#8B7CFF; --gold:#E6E6EB; --gold-hi:#FFFFFF;
  --sans:var(--body); --serif:var(--disp);
}

html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx-2);font-family:var(--body);font-feature-settings:"ss01","cv11";overflow-x:hidden;overflow-x:clip}
::selection{background:rgba(139,124,255,.35);color:#fff}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* type: one display family for headings, one text family for reading. The italic serif
   accent word is retired everywhere; a heading is one colour, set tight. */
.serif,h1,h2,h3,h4{font-family:var(--disp);font-weight:500;letter-spacing:-.028em;color:var(--tx)}
h1 em,h2 em,h3 em,h4 em,.serif em,.tsq em,blockquote em{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit;background:none;-webkit-text-fill-color:currentColor}
em{font-family:inherit;font-style:normal}
.gild{background:none;color:var(--tx);-webkit-text-fill-color:currentColor}
.lbl{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--tx-3)}
.sub{color:var(--tx-2)}

/* ---------- buttons ---------- */
/* White, lit from above, with a travelling glint: the audit buttons, everywhere. */
.btn-w{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.012em;line-height:1;color:#0A0A10;white-space:nowrap;
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F2F8 46%,#DDDBEA 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(30,24,70,.16),0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.5),
    0 10px 28px -12px rgba(255,255,255,.45),0 0 44px -10px rgba(169,159,255,.55);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .45s var(--ease-out)}
.btn-w:hover{color:#05050A;transform:translateY(-1px);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF9FE 50%,#E6E4F2 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(30,24,70,.14),0 0 0 1px rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.45),
    0 16px 40px -12px rgba(255,255,255,.6),0 0 64px -8px rgba(169,159,255,.8)}
.btn-w:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn-w:focus-visible{outline:2px solid var(--v-2);outline-offset:3px}
.btn-w .arr{display:inline-block;transition:transform .45s var(--ease-out)}
.btn-w:hover .arr{transform:translateX(3px)}
.btn-w.btn-a,#mnav .mcta.btn-a{color:#0A0A10;background:linear-gradient(180deg,#FFFFFF 0%,#F3F2F8 46%,#DDDBEA 100%)}
.btn-w.btn-a:hover{color:#05050A;background:linear-gradient(180deg,#FFFFFF 0%,#FAF9FE 50%,#E6E4F2 100%)}
/* the glint: a white band with a violet fringe, every few seconds; on hover, at once */
.btn-a::before,.btn-w.btn-glint::before{content:"";position:absolute;z-index:-1;top:-40%;bottom:-40%;left:0;width:46%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(169,159,255,0) 18%,rgba(169,159,255,.42) 36%,#FFFFFF 50%,rgba(169,159,255,.42) 64%,rgba(169,159,255,0) 82%,rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-20deg);will-change:transform;animation:auGlint 5.2s cubic-bezier(.5,0,.2,1) infinite}
header .btn-a::before{animation-delay:-2.6s}
.btn-a:hover::before{animation:auGlintNow .9s cubic-bezier(.3,0,.2,1) 1}
@keyframes auGlint{0%,70%{transform:translateX(-170%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}
@keyframes auGlintNow{0%{transform:translateX(-170%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--tx);font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.01em;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.btn-o:hover{border-color:var(--line-3);background:rgba(255,255,255,.05);color:#fff}
@media(prefers-reduced-motion:reduce){.btn-a::before,.btn-w.btn-glint::before{animation:none;display:none}}

/* ---------- header ---------- */
header#hdr{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  height:72px;padding:0 var(--gut);transition:height .45s var(--ease),background .45s var(--ease)}
header#hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:rgba(5,5,7,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
header#hdr.past::before{opacity:1}
header#hdr.past{height:64px;padding-top:0;padding-bottom:0}
.hlogo img{height:26px;width:auto}
header nav{gap:12px}
.navcap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:2px;padding:4px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.03);-webkit-backdrop-filter:none;backdrop-filter:none}
header nav a.nlink{font-family:var(--disp);font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--tx-3);padding:8px 16px}
header nav a.nlink:hover{color:var(--tx);background:rgba(255,255,255,.05)}
header nav a.nlink.active{color:var(--tx);background:rgba(255,255,255,.08);box-shadow:none}
header .btn-w{min-height:40px;padding:0 18px;font-size:14px}
/* the site's language (2026-09-25): EN | RO, in the header of every page, visible at every width */
.lsw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);flex:none}
.lsw a,.lsw button{display:inline-grid;place-items:center;min-width:36px;height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--disp);font-size:12.5px;font-weight:500;letter-spacing:.04em;line-height:1;color:var(--tx-3);text-decoration:none;
  transition:color .3s var(--ease),background-color .3s var(--ease)}
.lsw a:hover,.lsw button:hover{color:var(--tx)}
.lsw .on{color:var(--tx);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lsw a:focus-visible,.lsw button:focus-visible{outline:2px solid var(--v-2);outline-offset:2px}
@media(pointer:coarse){.lsw a,.lsw button{min-width:40px;height:36px}}
.mburger{border-color:var(--line-2);background:rgba(255,255,255,.02)}
#mnav{background:rgba(5,5,7,.985)}
#mnav .mlink{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-size:40px;border-bottom-color:var(--line)}
#mnav .mnum{font-family:var(--disp);color:var(--tx-4);font-weight:500;letter-spacing:.08em}
#mnav .mcta{font-family:var(--disp);min-height:54px}
@media(max-width:860px){.navcap{display:none}}
/* the centred nav pill cannot give way to the EN | RO switch, so below the width where logo, pill, switch and the
   audit button all fit it folds into the menu (measured 2026-09-25: EN collides under ~1010px, RO, whose labels
   and button run longer, under ~1100px) */
@media(max-width:1039px){header#hdr .navcap{display:none}header#hdr .mburger{display:flex}}
@media(max-width:1139px){html[lang=ro] header#hdr .navcap{display:none}html[lang=ro] header#hdr .mburger{display:flex}}
/* the hero eyebrow stays one line down to 320px (it wrapped there in both languages, the dot left behind) */
@media(max-width:359px){.hero .badge{font-size:11.5px;gap:8px;padding:6px 12px 6px 9px}}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line)}
.fbrand p,.fbot{color:var(--tx-4)}
.fcol .fh{font-family:var(--disp);font-weight:500;letter-spacing:.12em;color:var(--tx-4)}
.fcol a{color:var(--tx-3)}
.fcol a:hover{color:var(--tx)}
.fbot{border-top-color:var(--line)}

/* ---------- surfaces the old pages share ---------- */
.chip{border-color:var(--line-2);color:var(--tx-3);font-family:var(--disp);font-weight:500;letter-spacing:.08em}
.chip.hl{color:var(--v-2);border-color:rgba(139,124,255,.3)}

/* ---------- pointer glow: quieter, neutral ---------- */
#curGlow{background:radial-gradient(circle,rgba(169,159,255,.055) 0%,rgba(169,159,255,.02) 40%,transparent 62%)!important}
#curTag{font-family:var(--disp)!important;letter-spacing:.1em!important;color:#0A0A10!important;background:#fff!important}

/* ---------- the assistant launcher: neutral glass, a white orb ---------- */
#auChat{background:rgba(14,14,18,.8)!important;border-color:var(--line-2)!important;box-shadow:0 12px 40px rgba(0,0,0,.55)!important;
  font-family:var(--disp)!important;letter-spacing:.1em!important;color:var(--tx)!important}
#auChat:hover{border-color:var(--line-3)!important;box-shadow:0 12px 44px rgba(0,0,0,.6),0 0 30px rgba(169,159,255,.18)!important}
#auChat .orb,#auTease .torb{background:radial-gradient(circle at 34% 30%,#FFFFFF 0%,#DAD5FF 38%,#8B7CFF 72%,#4A3BC9 100%)!important}
#auTease{background:rgba(14,14,18,.92)!important;border-color:var(--line-2)!important}
#auTease .twho,#auTease .tcta{font-family:var(--disp)!important;letter-spacing:.1em!important;color:var(--v-2)!important}
#auTease .tmsg{font-family:var(--body)!important;color:var(--tx)!important}
#auTease .tmsg em{font-family:inherit!important;font-style:normal!important;color:#fff!important}
elevenlabs-convai{--el-base:#0F0F13;--el-base-hover:#141419;--el-base-active:#1B1B21;--el-base-border:rgba(255,255,255,.11);
  --el-base-primary:#F5F5F7;--el-base-subtle:#A8A8B2;--el-accent:#8B7CFF;--el-accent-hover:#A99FFF;--el-accent-active:#7466F0;
  --el-accent-border:rgba(169,159,255,.5);--el-accent-primary:#FFFFFF;--el-accent-subtle:rgba(139,124,255,.14);--font-sans:'Switzer',-apple-system,sans-serif}

/* ---------- the consent banner (styled by analytics.js) follows the type ---------- */
#au-consent,#auConsent,.au-consent{font-family:var(--body)!important}

/* no synthetic italics: General Sans and Switzer ship no italic here, and the slanted serif
   accent of the old site is retired. Everything stands upright. */
body *{font-style:normal!important}

/* the legal pages' compact nav: on a 360 px phone its three items ran 13 px past the edge (live since before 2026-09-24) */
@media(max-width:420px){.legal-nav{padding:18px 16px!important}.legal-nav .right{gap:8px!important}.legal-nav .legal-brand img{height:22px!important;width:auto}.legal-nav .lang-toggle button{padding:5px 10px!important}}
.legal-nav .legal-brand img{height:26px!important;width:auto!important}

/* on touch screens a tap leaves :hover stuck; no lift there */
@media (hover:none){.btn-w:hover,.btn-w.btn-a:hover{transform:none}}

/* ======================================================================
   ROUND 2 (2026-09-24 evening): the shared motion layer, driven by assets/site.js.
   ====================================================================== */

/* page to page: the next page fades in over the last one (cross-document view transitions; ignored where unsupported) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:auVtOut .32s var(--ease) both}
::view-transition-new(root){animation:auVtIn .5s var(--ease-out) both}
@keyframes auVtOut{to{opacity:0}}
@keyframes auVtIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* the nav pill: one light slides under the link you point at */
.navcap.has-ind{position:absolute}
.navcap .nind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;opacity:0;transition:transform .5s var(--ease-out),width .5s var(--ease-out),opacity .3s var(--ease)}
.navcap.has-ind a.nlink{position:relative;z-index:1}
.navcap.has-ind a.nlink:hover,.navcap.has-ind a.nlink.active{background:transparent}
.navcap.has-ind a.nlink:hover{color:var(--tx)}

/* headings that blur in word by word */
[data-split].split .sw{display:inline-block;opacity:0;transform:translateY(.38em);filter:blur(10px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
[data-split].split.in .sw{opacity:1;transform:none;filter:none}
[data-split].split.now .sw{transition:none}
/* lines that read themselves: each word starts dim and lights in turn */
[data-read].reading .rw{opacity:.16;transition:opacity .25s linear}

/* ---------- the audit box (every page that asks for a website) ---------- */
.abox{position:relative;width:100%;max-width:640px;margin-top:36px;text-align:left;border-radius:var(--r-lg);padding:16px;
  background:linear-gradient(180deg,rgba(22,22,28,.93),rgba(12,12,16,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--line-2),0 30px 80px -30px rgba(0,0,0,.9),0 0 120px -40px rgba(139,124,255,.35)}
.abox-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px}
.abox-k{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}
.abox-k i{width:6px;height:6px;border-radius:50%;background:#58E3A2;box-shadow:0 0 10px rgba(88,227,162,.8)}
.arow{display:flex;gap:8px}
.afield{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:54px;padding:0 16px;border-radius:14px;
  background:rgba(0,0,0,.45);border:1px solid var(--line-2);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.afield:hover{border-color:var(--line-3)}
.afield:focus-within{border-color:rgba(169,159,255,.7);background:rgba(0,0,0,.6);box-shadow:0 0 0 4px rgba(139,124,255,.16)}
.afield .pre{color:var(--tx-4);font-size:15.5px;user-select:none}
.afield input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-family:var(--body);font-size:16px;color:var(--tx)}
.afield input::placeholder{color:var(--tx-4)}
.afield.err{border-color:#E5766F;box-shadow:0 0 0 4px rgba(229,118,111,.14)}
.abox .btn-w{min-height:54px;height:54px;padding:0 24px;border-radius:14px;flex:none}
.aerr{display:none;margin:10px 2px 0;font-size:13.5px;color:#F0A29C}
.aerr.on{display:block}
.under{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 2px 0;font-size:13.5px;color:var(--tx-3)}
.under button{color:var(--tx-2);font-weight:500;background:none;border:0;cursor:pointer;font:inherit;border-bottom:1px solid var(--line-3);padding-bottom:1px;white-space:nowrap;transition:color .3s,border-color .3s}
.under button:hover{color:#fff;border-color:#fff}
@media(max-width:600px){
  .abox{margin-top:30px;padding:12px}
  .abox-top{flex-direction:column;align-items:center;gap:10px}
  .arow{flex-direction:column}
  .abox .btn-w{width:100%}
  .under{flex-direction:column;gap:8px;text-align:center}
}

/* the lit edge (Aceternity's Glowing Effect, ported): a short arc of light rides the border towards the pointer.
   Performance pass 2026-09-25: the arc is a conic-gradient square (<i>, added by site.js, sized to the box's
   diagonal) that ROTATES. A rotation is a compositor transform, so nothing repaints and the halo's blur is never
   re-rendered; the old version rewrote --start on every frame, which recalculated style and repainted both
   gradients 60 times a second, idle included. Touch screens: the audit boxes turn by a CSS rotation alone. */
.gl{position:relative}
.gl>.glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;z-index:2;opacity:0;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gl>.glow>i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from -40deg at 50% 50%,rgba(139,124,255,0) 0deg,rgba(139,124,255,.9) 22deg,#FFFFFF 40deg,
    rgba(169,159,255,.9) 58deg,rgba(139,124,255,0) 80deg,rgba(139,124,255,0) 360deg)}
.gl>.glow.halo{padding:0;inset:-1px;filter:blur(18px);-webkit-mask:none;mask:none;z-index:-1}
.gl>.glow.halo>i{background:conic-gradient(from -40deg at 50% 50%,rgba(139,124,255,0) 0deg,rgba(139,124,255,.55) 40deg,rgba(139,124,255,0) 80deg,rgba(139,124,255,0) 360deg)}
.gl.spin>.glow{opacity:.75}
.gl.spin>.glow.halo{opacity:.41}
.gl.spin>.glow>i{animation:glSpin 9s linear infinite;animation-play-state:paused}
.gl.spin.inview>.glow>i{animation-play-state:running}
@keyframes glSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- films: the still shows until the loop is really playing, then the loop fades in over it ---------- */
.film{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{opacity:0;transition:opacity 1.4s var(--ease)}
.film.playing video{opacity:1}
/* autoplay refused (Low Power Mode): the still drifts, and the film, when a tap starts it, carries the same drift */
.film.drift:not(.bbg) img,.film.drift:not(.bbg) video{animation:filmDrift 24s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes filmDrift{from{transform:scale(1.015) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-1.6%,-1.2%,0)}}

/* ---------- performance pass 2026-09-25: loops that repainted every frame now move by opacity/transform only ---------- */
/* and nothing that sits on a playing film blurs what is behind it: a backdrop blur there is one blur pass per video frame
   (the audit boxes over the hero and the close, the founder card's chip); a denser fill reads the same */
/* the assistant's orb and the FAQ orb pulsed by box-shadow (a repaint per frame, on every page, forever) */
#auChat .orb,.fask .orb{position:relative;animation:none !important}
#auChat .orb::after,.fask .orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 20px rgba(139,124,255,.72);opacity:0;animation:orbPulse 3.6s ease-in-out infinite}
.fask .orb::after{box-shadow:0 0 30px rgba(139,124,255,.8)}
@keyframes orbPulse{50%{opacity:1}}
.fask:not(.live) .orb::after{animation-play-state:paused}
/* the founder card's drift runs only while the card is on screen */
.bcard:not(.live) .bbg img,.bcard:not(.live) .bbg video{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#auChat .orb::after,.fask .orb::after,.film.drift img,.film.drift video{animation:none}}

/* ---------- the close every page ends on: moving glass silk, one line, the audit box ---------- */
.xclose{position:relative;overflow:hidden;isolation:isolate;text-align:center;border-top:1px solid var(--line);
  padding:clamp(120px,14vw,190px) var(--gut) clamp(120px,13vw,170px);background:#000}
.xclose .film{z-index:-2}
.xclose .film img,.xclose .film video{object-position:center 58%;transform:scale(1.04)}
.xveil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.35) 46%,rgba(0,0,0,.22) 64%,rgba(0,0,0,.7) 88%,var(--bg) 100%),
             radial-gradient(40% 30% at 50% 30%,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.xin{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.xin h2{font-size:clamp(38px,5.4vw,76px);line-height:1;letter-spacing:-.045em;text-wrap:balance;color:var(--tx)}
.xin .lead{margin:22px auto 0;text-align:center;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--tx-2);max-width:52ch}
.xin .abox{margin-top:40px}
.calt{margin-top:22px;font-size:14px;color:var(--tx-2);text-shadow:0 1px 14px #000,0 0 30px rgba(0,0,0,.9)}
.calt a{color:var(--tx);border-bottom:1px solid var(--line-3);padding-bottom:1px;transition:border-color .3s}
.calt a:hover{border-color:#fff}
@media(max-width:600px){.xclose{padding:110px 20px 100px}}

/* the page heroes' films sit where the still was */
.phbg.film{z-index:0}

/* ---------- the founder card (home builder block + About): Matei cut out of the studio photo, in front of the moving silk ---------- */
.bport{perspective:1200px;min-width:0}
.bcard{position:relative;border-radius:26px;aspect-ratio:4/5;overflow:hidden;isolation:isolate;background:#060609;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--line-2),0 60px 120px -50px rgba(0,0,0,.95),0 0 160px -60px rgba(139,124,255,.55);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease-out)}
.bcard .bbg{position:absolute;inset:-6%;z-index:-3;transform:translate(calc((50% - var(--mx,50%)) * .06),calc((50% - var(--my,50%)) * .06));transition:transform .9s var(--ease-out)}
.bcard .bbg img,.bcard .bbg video{object-position:50% 100%;animation:bdrift 22s ease-in-out infinite alternate}
@keyframes bdrift{from{transform:scale(1.04)}to{transform:scale(1.14) translateX(-3%)}}
.bcard::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(52% 40% at 50% 34%,rgba(169,159,255,.42),rgba(139,124,255,.12) 55%,rgba(0,0,0,0) 75%),linear-gradient(180deg,rgba(5,5,7,.35),rgba(5,5,7,.1) 40%,rgba(5,5,7,0) 60%)}
.bme{position:absolute;left:50%;bottom:-2%;width:104%;max-width:none;height:auto;z-index:-1;
  transform:translate(calc(-50% + (var(--mx,50%) - 50%) * .05),calc((var(--my,50%) - 50%) * .03));transition:transform .9s var(--ease-out);
  filter:drop-shadow(0 0 28px rgba(139,124,255,.35)) contrast(1.03)}
.bcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,9,0),rgba(6,6,9,.78) 62%,#060609)}
.bcap{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.bcap b{display:block;font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.02em;color:#fff}
.bcap span{display:block;margin-top:2px;font-size:12.5px;color:var(--tx-3)}
.bcard .bin{position:absolute;top:16px;right:16px;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(6,6,9,.72);font-size:11.5px;color:var(--tx-2)}
.bcard .bin i{width:6px;height:6px;border-radius:50%;background:#58E3A2;box-shadow:0 0 8px rgba(88,227,162,.8)}
@media(prefers-reduced-motion:reduce){.bcard .bbg img,.bcard .bbg video{animation:none}.bcard{transform:none}}

/* the page heroes (clients, about): a lighter veil, so the moving silk reads; the case pages keep theirs */
.pghero:not(.case) .phscrim{background:linear-gradient(180deg,rgba(5,5,7,.84) 0%,rgba(5,5,7,.42) 38%,rgba(5,5,7,.5) 72%,rgba(5,5,7,.97) 100%),radial-gradient(46% 42% at 50% 50%,rgba(5,5,7,.6),rgba(5,5,7,0) 75%)}
.pghero .phbg.film{animation:none}
/* phones: the founder card sits on the centre axis, caption included (Matei's phone-axis rule, 2026-09-17) */
@media(max-width:900px){.bport{text-align:center}.bcap{justify-content:center}}