/* ==================================================================
   VEXON — portable single-file rebuild.

   Original stack: Vite 6 + React 19 + Tailwind v4 (@tailwindcss/vite)
   + motion/react (framer-motion 12) + Lenis 1.3 + vanilla three.js
   0.169. The whole page rendered from one src/App.tsx behind a
   canvas preloader, with a fixed <ParticleOrb> background.

   PORTED VERBATIM
     • src/components/ParticleOrb.tsx — the GLSL vertex + fragment
       shaders (Ashima simplex noise, staggered fly-through entrance,
       swirl, turbulence, breathing pulse, deepBlue→midBlue→hotWhite
       vertical ramp), the geometry builder (gaussian radial band,
       innerR 0.95 / bandWidth 0.9), the 160k / 70k point counts, the
       camera (fov 45, z 4.2), the AdditiveBlending ShaderMaterial and
       all uniforms, the 3.2s ENTRANCE_DURATION, the 0.04 pointer-lerp
       parallax and the visibilitychange pause. Not one constant moved.
     • src/components/Preloader.tsx — the 600-point Fibonacci canvas
       sphere: identical projection, sort-by-depth, radius ramp
       (0.2 + p*0.8 of min(w,h)*0.35), post-100% 10%/s growth, the
       0.006 rotation clock and the 60/40 #FFFFFF / #444444 split.
     • Every colour literal, timing, easing and copy string from
       App.tsx / Preloader.tsx / text-effect.tsx / cursor.tsx.

   REBUILT IN VANILLA
     • React tree → plain markup. motion/react variant reveals
       (containerVariants stagger 0.1 / delayChildren 0.2, itemVariants
       0.8s and cardVariants 1.6s on cubic-bezier(.16,1,.3,1), from
       y100 / rotateX15 / scale .9 / blur 10px) → IntersectionObserver
       + CSS transitions with per-child --d delays.
     • <TextEffect preset="blur"> → JS segmenter + per-segment
       blur(12px)→0 with the real 0.05s stagger (note: the source's
       defaultContainerVariants pins staggerChildren to 0.05, so the
       per-type 0.03/0.05/0.1 table is dead code — replicated as 0.05).
       per="word" splits on /(\s+)/ and keeps whitespace as its own
       staggered segment, exactly like the original.
     • motion useSpring rigs (hover-card parallax 80/20, image scale
       60/25, cursor-follow chip 500/50) → a real critically-damped
       spring integrator, same stiffness/damping numbers.
     • Lenis is loaded from CDN at the same major version, with the
       source's exact options (duration 1.2, the 1.001-2^-10t easing,
       wheelMultiplier 1, touchMultiplier 2).
     • lucide-react's ArrowUpRight → inline SVG (same path data).
     • Tailwind v4 utilities were RESOLVED INTO REAL CSS here rather
       than shipping a CDN Tailwind build, so colours/spacing cannot
       drift with a different Tailwind release. Tokens below are lifted
       verbatim from src/index.css @theme.

   DELIBERATE OMISSIONS / NOTES
     • GEMINI STUB: package.json lists @google/genai, express, dotenv
       and tsx (AI Studio scaffolding). Nothing in src/ ever imports
       them. This portable ships none of it and makes ZERO network API
       calls. clsx + tailwind-merge (src/lib/utils.ts `cn`) are also
       build-time-only and are gone.
     • --font-serif ("Playfair Display") is declared in the @theme
       block but never applied anywhere in src/. The token is kept
       below for re-skinning parity; the webfont is not requested.
     • The three card images were remote Google-Drive PNGs
       (lh3.googleusercontent.com/d/…). They are inlined here as
       alpha-preserving WebP data URIs at 1000px so the file is
       genuinely self-contained and cannot rot.
     • App.tsx's marquee sets BOTH a motion `animate={{x:[0,-1000]}}`
       and an inline CSS `animation: marquee 40s linear infinite`.
       A running CSS animation wins over the inline transform, so the
       40s keyframe marquee is what actually shipped — that is what is
       reproduced. The dead motion tween is dropped.
     • The footer's .progressive-blur panel sits at -z-10 inside a
       z-10, bg-black footer, so it is painted behind the footer's own
       background and is invisible in the original. Kept 1:1.
     • cursor:none is gated behind (hover:hover) so touch devices keep
       a usable pointer; the original applied it unconditionally.
================================================================== */

/* ---- design tokens — lifted from src/index.css @theme ---- */
:root{
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display:"Space Grotesk", sans-serif;
  --font-logo:"Orbitron", sans-serif;
  --font-serif:"Playfair Display", serif;      /* declared, never used */

  --bg:#000000;
  --fg:#ffffff;
  --muted:#E6E6E6;                              /* body copy / readouts */
  --nav-ink:#8E9299;                            /* idle nav links       */
  --hairline:rgba(255,255,255,.05);             /* border-white/5       */

  /* scene tint — mirrors the GPU vec3 literals in ParticleOrb */
  --halo-deep:#0d2e8c;                          /* vec3(0.05,0.18,0.55) */
  --halo-mid:#3473f2;                           /* vec3(0.20,0.45,0.95) */
  --halo-hot:#ccebff;                           /* vec3(0.80,0.92,1.00) */

  --ease-expo:cubic-bezier(0.16,1,0.3,1);       /* item/card variants   */
  --ease-out:cubic-bezier(0,0,0.58,1);          /* motion "easeOut"     */
  --ease-inout-strong:cubic-bezier(0.76,0,0.24,1); /* preloader exit    */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -ms-overflow-style:none;scrollbar-width:none;overflow-x:hidden;
}
body::-webkit-scrollbar{display:none}
html.js body.is-loading{overflow:hidden}
::selection{background:#fff;color:#000}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
svg{display:block}
@media (hover:hover) and (pointer:fine){
  body,a,button,[role="button"]{cursor:none}
}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- src/index.css @layer utilities ---- */
.progressive-blur{
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.8) 60%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,.8) 60%,rgba(0,0,0,0) 100%);
}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.hide-scrollbar::-webkit-scrollbar{display:none}

/* ---- shared type helpers (resolved Tailwind) ---- */
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
.logo{font-family:var(--font-logo)}

/* ==================================================================
   PRELOADER — Preloader.tsx
================================================================== */
#preloader{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  align-items:center;justify-content:space-between;background:#000;padding:2.5rem;
  cursor:none;
}
html.js #preloader{display:flex}
/* Uscita: il pannello svanisce in fretta, la sfera si apre verso l'esterno
   mentre l'anello converge. I due movimenti si leggono come uno solo. */
#preloader.leaving{
  opacity:0;filter:blur(28px);
  transition:opacity .52s var(--ease-inout-strong),filter .6s var(--ease-inout-strong);
}
#preloader.leaving .pl-stage{
  transform:scale(2.15);opacity:0;
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .6s ease-out;
}
#preloader.leaving .pl-top,#preloader.leaving .pl-bottom{
  opacity:0;transform:translateY(-8px);
  transition:opacity .3s ease-out,transform .4s ease-out;
}
.pl-stage,.pl-top,.pl-bottom{will-change:transform,opacity}
.pl-top{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:.75rem;line-height:1rem;letter-spacing:.4em;
  color:rgba(255,255,255,.4);
  opacity:0;transform:translateY(-20px);
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);
}
#preloader.ready .pl-top{opacity:1;transform:none}
.pl-top .pct{color:#fff}
.pl-stage{position:relative;display:flex;flex:1 1 0%;width:100%;align-items:center;justify-content:center;overflow:hidden}
.pl-stage canvas{position:relative;z-index:0;height:100%;width:100%}
.pl-bottom{display:flex;width:100%;flex-direction:column;align-items:center;gap:1.5rem}
.pl-tag{
  font-family:var(--font-mono);font-size:.875rem;line-height:1.25rem;letter-spacing:.5em;color:#fff;
  /* motion's defaults: opacity is a 0.3s tween, y is a spring — and the
     tag is re-keyed every 400ms, so both must land inside that window. */
  animation:plTagFade .3s var(--ease-out) both, plTagRise .4s var(--ease-expo) both;
}
@keyframes plTagFade{from{opacity:0}to{opacity:1}}
@keyframes plTagRise{from{transform:translateY(10px)}to{transform:none}}
.pl-note{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.2);
}

/* ==================================================================
   PARTICLE HALO — fixed background (ParticleOrb.tsx)
================================================================== */
#orb-wrap{
  position:fixed;inset:0;z-index:0;transform-origin:center center;will-change:transform;
}
#orb{
  height:100%;width:100%;
  /* the hot light plume above the halo, matching the video's top glow */
  background:radial-gradient(60% 50% at 50% 22%, rgba(120,170,255,0.18), rgba(40,80,180,0.05) 40%, transparent 70%);
}
#orb canvas{display:block}

/* Ripiego per le macchine che non reggono la scena: la stessa scena, ma
   registrata. Un video muto in loop lo decodifica l'hardware, anche vecchio. */
.orb-clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;will-change:opacity;
}
#orb.statico{
  background-image:url('/assets/orb-poster.jpg'),
    radial-gradient(60% 50% at 50% 22%, rgba(120,170,255,0.18), rgba(40,80,180,0.05) 40%, transparent 70%);
  background-size:cover;background-position:center;
}

/* ==================================================================
   PAGE SHELL
================================================================== */
#shell{position:relative;min-height:100vh;background:#000;font-family:var(--font-sans)}
/* Il contenuto e' visibile di default: senza JavaScript il sito resta un sito.
   E' lo script, una volta partito (html.js), a nasconderlo per rivelarlo. */
#content{opacity:1}
html.js #content{opacity:0;transition:opacity 1s var(--ease-out)}
html.js #content.in{opacity:1}
#contenuto{position:relative;z-index:10;display:block}

/* ---- reveal engine (motion variants → CSS) ---- */
/* I reveal sono un'aggiunta dello script: senza JavaScript il contenuto e'
   gia' al suo posto, non nascosto in attesa di un osservatore. */
html.js [data-rv]{
  opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo),filter .7s var(--ease-expo);
  transition-delay:var(--d,0s);
}
/* Il gesto pieno resta ai blocchi che lo reggono: titoli e card. Righe,
   pannelli ed etichette entrano piu' piano e piu' corto — meno uniformita',
   meno livelli compositi, stessa sensazione. */
html.js .hero-h1[data-rv],html.js .page-h1[data-rv],html.js .hero-l > [data-rv]{
  transform:translateY(80px) scale(.94);filter:blur(9px);transition-duration:.9s;
}
html.js [data-rv="card"]{transform:translateY(60px) scale(.96);filter:blur(8px);transition-duration:1.2s}
html.js .panel[data-rv],html.js .matrix > a[data-rv],html.js .trust > div[data-rv],
html.js .step[data-rv],html.js .quote[data-rv],html.js .posts .post[data-rv],
html.js .chapters a[data-rv]{transform:translateY(18px);filter:none;transition-duration:.55s}
html.js .kicker[data-rv],html.js .eyebrow[data-rv],html.js .crumb[data-rv],
html.js .cta-note[data-rv],html.js .stat-l[data-rv]{transform:none;filter:none;transition-duration:.5s}
html.js [data-rv].in{opacity:1;transform:none;filter:blur(0px)}

/* ---- TextEffect preset="blur" ---- */
.te{white-space:pre-wrap}
.te .seg{
  display:inline-block;white-space:pre;opacity:0;filter:blur(12px);
  /* L'opacita' chiude presto, la messa a fuoco arriva dopo: le lettere sono
     gia' solide mentre finiscono di nitidizzarsi. */
  transition:opacity .26s cubic-bezier(.2,.8,.3,1),filter .62s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);
}
.te.in .seg{opacity:1;filter:blur(0px)}

/* ---- diamond star ---- */
.star{transform-style:preserve-3d;animation:starSpin 3s linear infinite;height:.8em;width:.8em;color:#fff;flex:none}
.star svg{height:100%;width:100%;fill:currentColor}
@keyframes starSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}

/* ---- arrow glyph (lucide ArrowUpRight) ---- */
.arrow{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  height:.75rem;width:.75rem;flex:none;transition:transform .15s ease}
.arrow.lg{height:.875rem;width:.875rem;stroke-width:2.5}

/* ==================================================================
   NAV
================================================================== */
.nav{
  position:fixed;top:0;left:0;z-index:50;display:flex;width:100%;
  align-items:flex-start;justify-content:space-between;padding:1.5rem;
}
@media (min-width:768px){.nav{padding:2rem 2.5rem}}
.nav-left{
  display:flex;flex-direction:column;gap:1.5rem;
}
html.js .nav-left{
  opacity:0;transform:translateX(-20px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);
}
@media (min-width:768px){.nav-left{gap:2.5rem}}
.nav-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
}
html.js .nav-right{
  opacity:0;transform:translateY(-10px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);
}
#content.in .nav-left,#content.in .nav-right{opacity:1;transform:none}
.wordmark{
  font-family:var(--font-logo);font-size:1.5rem;line-height:2rem;font-weight:700;
  letter-spacing:-.05em;color:#fff;
}
@media (min-width:768px){.wordmark{font-size:1.875rem;line-height:2.25rem}}
.build-id{
  display:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;opacity:.68;
}
@media (min-width:768px){.build-id{display:block}}
.navlink{
  display:flex;align-items:center;gap:.25rem;font-size:11px;font-weight:500;
  letter-spacing:.1em;color:var(--nav-ink);text-transform:uppercase;
  transition:color .15s ease;
}
.navlink:hover{color:#fff}
.navlink:hover .arrow{transform:translate(.125rem,-.125rem)}

/* ==================================================================
   SECTION 1 — HERO
================================================================== */
.hero{
  display:flex;min-height:100vh;align-items:center;
  padding:8rem 1.5rem 10rem;
}
@media (min-width:768px){.hero{padding:5rem 2.5rem}}
.hero-grid{display:grid;width:100%;grid-template-columns:1fr}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem}
  .hero-l{grid-column:span 8/span 8}
  .hero-r{grid-column:span 4/span 4}
}
.hero-l{display:flex;flex-direction:column;justify-content:center}
.eyebrow{
  margin-bottom:1.5rem;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;color:var(--muted);
}
@media (min-width:768px){.eyebrow{font-size:11px}}
.hero-h1{
  font-family:var(--font-display);font-size:10.5vw;line-height:.9;font-weight:700;
  text-transform:uppercase;letter-spacing:-.025em;color:#fff;
}
@media (min-width:768px){.hero-h1{font-size:7vw}}
@media (min-width:1024px){.hero-h1{font-size:6vw}}
.hero-line{display:flex;align-items:center;gap:1rem}
.hero-line.mid{color:var(--muted)}
@media (min-width:768px){.hero-line.mid{gap:2rem}}
.mask-r{
  display:inline-block;color:#fff;
  filter:drop-shadow(0 0 15px rgba(255,255,255,0.2));
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0.15),white 85%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0.15),white 85%);
}
.mask-l{
  display:inline-block;color:#fff;
  filter:drop-shadow(0 0 15px rgba(255,255,255,0.2));
  -webkit-mask-image:linear-gradient(to right,white 15%,rgba(0,0,0,0.15));
  mask-image:linear-gradient(to right,white 15%,rgba(0,0,0,0.15));
}
.glow-strong{color:#fff;filter:drop-shadow(0 0 20px rgba(255,255,255,0.3))}

.hero-r{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2rem;
  padding-top:3rem;padding-bottom:3rem;transform:translateY(58px);
}
@media (min-width:768px){.hero-r{gap:3rem;padding-bottom:5rem}}
.readout-row{display:flex;align-items:center;justify-content:space-between}
.readout-a{
  font-size:1.875rem;line-height:2.25rem;font-weight:300;color:var(--muted);letter-spacing:-.05em;
}
@media (min-width:768px){.readout-a{font-size:2.25rem;line-height:2.5rem}}
.readout-a b{font-family:var(--font-mono);font-weight:700}
.readout-n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--muted);
}
@media (min-width:768px){.readout-n{font-size:11px}}
.hero-lead{
  max-width:20rem;font-size:.75rem;line-height:1.625;color:var(--muted);
}
@media (min-width:768px){.hero-lead{font-size:.875rem}}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
@media (min-width:768px){.hero-cta{gap:1.5rem}}
.btn-frame{
  position:relative;overflow:hidden;border-radius:.25rem;background:rgba(0,0,0,.72);
  padding:.75rem 1.5rem;font-size:.75rem;font-weight:500;letter-spacing:.025em;
  color:#fff;border:1px solid rgba(255,255,255,.3);
  transition:background .15s ease,border-color .15s ease;
}
@media (min-width:768px){.btn-frame{padding:1rem 2rem;font-size:.875rem}}
.btn-frame:hover{background:rgba(0,0,0,.8)}
.btn-frame .tick{position:absolute;height:1rem;width:1rem;transition:transform .15s ease}
.btn-frame .tick.tr{top:0;right:0;border-top:2px solid rgba(255,255,255,.6);border-right:2px solid rgba(255,255,255,.6)}
.btn-frame .tick.bl{bottom:0;left:0;border-bottom:2px solid rgba(255,255,255,.6);border-left:2px solid rgba(255,255,255,.6)}
.btn-frame:hover .tick{transform:scale(1.1)}
.btn-frame span{position:relative;z-index:10;text-transform:uppercase;letter-spacing:.1em}
.btn-plain{
  font-size:.75rem;font-weight:500;letter-spacing:.025em;color:#fff;transition:opacity .15s ease;
}
@media (min-width:768px){.btn-plain{font-size:.875rem}}
.btn-plain:hover{opacity:.7}

/* ==================================================================
   SECTION 2 — ABOUT + CARDS
================================================================== */
.about{
  display:flex;min-height:100vh;flex-direction:column;justify-content:center;
  background:rgba(0,0,0,.62);
  padding:5rem 1.5rem;border-top:1px solid var(--hairline);
}
@media (min-width:768px){.about{padding-left:2.5rem;padding-right:2.5rem}}
.about-head{margin-bottom:5rem;display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:1024px){
  .about-head{grid-template-columns:repeat(12,minmax(0,1fr))}
  .about-head .col-a{grid-column:span 4/span 4}
  .about-head .col-b{grid-column:span 8/span 8}
}
.kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--muted);
  opacity:.5;text-transform:uppercase;
}
.about-h2{
  font-family:var(--font-display);margin-bottom:2rem;font-size:1.875rem;font-weight:500;
  line-height:1.25;color:#fff;letter-spacing:-.025em;
}
@media (min-width:768px){.about-h2{font-size:3rem;line-height:1.25}}
@media (min-width:1024px){.about-h2{max-width:56rem}}
.about-p{
  max-width:42rem;font-size:.875rem;line-height:1.625;color:var(--muted);opacity:.6;font-weight:300;
}
@media (min-width:768px){.about-p{font-size:1rem}}

.cards{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:.375rem;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
}
.card .tick{position:absolute;z-index:40;height:1.25rem;width:1.25rem}
.card .tick.tr{top:0;right:0;border-top:2px solid rgba(255,255,255,.4);border-right:2px solid rgba(255,255,255,.4)}
.card .tick.bl{bottom:0;left:0;border-bottom:2px solid rgba(255,255,255,.4);border-left:2px solid rgba(255,255,255,.4)}
.card .idx{
  position:absolute;top:1rem;left:1rem;z-index:40;font-family:var(--font-mono);font-size:10px;
  color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;
}
.card-inner{height:100%;width:100%}
.card-hit{position:absolute;inset:0;z-index:30}
.card-media{
  position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:1.5rem 1.25rem 6.25rem;
}
/* Le infografiche vanno lette: piu' opache e meno rimpicciolite delle foto. */
.card-media img{
  height:100%;width:100%;object-fit:contain;opacity:.85;
  transition:opacity .7s ease;will-change:transform;
}
.card:hover .card-media img{opacity:1}
.card-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  background:linear-gradient(to top,rgba(8,8,11,.96) 45%,rgba(8,8,11,.7),transparent);
  padding:2.5rem 1.5rem 1.5rem;display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
}
.card-cap h3{
  font-family:var(--font-display);font-size:1.1875rem;line-height:1.35;font-weight:500;
  color:#fff;letter-spacing:-.025em;
}
.card-cap p{
  margin-top:.5rem;font-size:.875rem;line-height:1.625;color:var(--muted);opacity:.7;font-weight:300;
}
.chip{
  position:absolute;z-index:9998;pointer-events:none;top:0;left:0;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:transform .28s var(--ease-out),opacity .28s var(--ease-out);
  will-change:transform,top,left;
}
.chip.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.chip > span{
  display:flex;align-items:center;gap:.375rem;white-space:nowrap;min-width:max-content;
  padding:.375rem .75rem;border-radius:9999px;background:#fff;color:#000;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.1);
}

/* ==================================================================
   SECTION 3 — MISSION GRID + MARQUEE
================================================================== */
.mission{
  position:relative;z-index:10;border-top:1px solid var(--hairline);background:#000;
  font-family:var(--font-sans);
}
.mrow-a{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--hairline)}
.mrow-b{display:grid;grid-template-columns:1fr}
@media (min-width:768px){
  .mrow-a,.mrow-b{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.mbox-brand{
  display:flex;min-height:200px;flex-direction:column;justify-content:space-between;
  border-bottom:1px solid var(--hairline);padding:2rem;
}
@media (min-width:768px){.mbox-brand{border-bottom:0}}
.mbox-brand .mark{
  font-family:var(--font-logo);font-size:1.25rem;line-height:1.75rem;font-weight:700;
  letter-spacing:-.05em;color:#fff;opacity:.8;
}
/* contrasto: le etichette mono restano discrete ma leggibili */
.mbox-brand .est{
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.3em;
  color:#fff;opacity:.62;
}
.mbox-claim{
  display:flex;flex-direction:column;justify-content:center;padding:2rem;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:768px){.mbox-claim{grid-column:span 3/span 3}}
@media (min-width:1024px){.mbox-claim{padding:3rem}}
.mbox-claim .slash{
  margin-bottom:1rem;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.4em;color:#fff;opacity:.3;
}
.mission-h3{
  font-family:var(--font-display);font-size:12vw;font-weight:700;line-height:.9;
  text-transform:uppercase;letter-spacing:-.025em;color:#fff;
}
@media (min-width:768px){.mission-h3{font-size:8vw}}
@media (min-width:1024px){.mission-h3{font-size:7vw}}
.mission-h3 > span{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem}
.mbox-spacer{display:none}
@media (min-width:768px){.mbox-spacer{display:block}}
.mbox-meta{
  display:flex;flex-direction:column;gap:1.5rem;border-bottom:1px solid var(--hairline);padding:2rem;
}
@media (min-width:768px){.mbox-meta{border-bottom:0}}
.pulse-box{
  display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;
  border-radius:.25rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
}
.pulse-box i{display:block;height:.25rem;width:.25rem;border-radius:9999px;background:#fff;
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.mbox-meta .lbl{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:#fff;opacity:.62;
}
.mbox-copy{display:flex;flex-direction:column;justify-content:center;padding:2rem}
@media (min-width:768px){.mbox-copy{grid-column:span 2/span 2}}
@media (min-width:1024px){.mbox-copy{padding:3rem}}
.mbox-copy p{
  max-width:36rem;font-size:.875rem;font-weight:300;line-height:1.625;color:#fff;opacity:.6;
}
@media (min-width:768px){.mbox-copy p{font-size:1rem}}
.mbox-copy .actions{margin-top:2rem;display:flex;align-items:center;gap:1rem}
.link-btn{
  display:flex;align-items:center;gap:.5rem;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:#fff;transition:opacity .15s ease;
}
.link-btn:hover{opacity:.7}
.link-btn:hover .arrow{transform:translate(.125rem,-.125rem)}

.marquee{width:100%;overflow:hidden;border-top:1px solid var(--hairline);padding:3rem 0}
@media (min-width:768px){.marquee{padding:5rem 0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{
  display:flex;white-space:nowrap;width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-track span{
  margin:0 2rem;cursor:default;font-size:32px;font-weight:700;letter-spacing:-.05em;
  color:rgba(255,255,255,.2);transition:transform .15s ease,color .15s ease;display:inline-block;
}
@media (min-width:768px){.marquee-track span{margin:0 4rem;font-size:48px}}
.marquee-track span:hover{transform:scale(1.1);color:#fff}

/* ==================================================================
   FOOTER
================================================================== */
.foot{
  position:relative;z-index:10;width:100%;padding:5rem 1.5rem 3rem;background:#000;
}
@media (min-width:768px){.foot{padding:5rem 2.5rem 4rem}}
.foot .veil{
  position:absolute;left:0;right:0;top:0;height:10rem;z-index:-10;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.85));
}


/* ==================================================================
   MAST — additions (stats strip, method phases, footer content)
================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin:0 0 3rem;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden;
}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:4rem}}
.stat{background:rgba(0,0,0,.45);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.stat-n{
  font-family:var(--font-display);font-size:2.5rem;line-height:1;color:#fff;letter-spacing:-.03em;
}
@media (min-width:768px){.stat-n{font-size:3rem}}
.stat-n i{font-style:normal;font-size:.5em;color:var(--muted);opacity:.6;margin-left:.15em}
.stat-l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.55;line-height:1.5}

.phases{
  list-style:none;margin:1.25rem 0 0;padding:0 0 0 1.25rem;position:relative;
  display:flex;flex-direction:column;gap:.55rem;
}
/* La sequenza si racconta scorrendo: un filo scende e accende una fase
   alla volta. --avanzamento lo scrive lo script dal progresso di scroll. */
.phases::before,.phases::after{content:"";position:absolute;left:.25rem;top:.4rem;width:1px}
.phases::before{bottom:.4rem;background:rgba(255,255,255,.14)}
.phases::after{
  height:calc((100% - .8rem) * var(--avanzamento,0));
  background:rgba(160,195,255,.85);transition:height .25s linear;
}
.phases li{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.55;
  display:flex;gap:.6rem;align-items:baseline;transition:opacity .45s ease;
}
.phases li.accesa{opacity:1}
.phases li:hover{opacity:.9}
.phases li b{color:#fff;opacity:.85;font-weight:500}

.foot-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding-top:1rem;border-top:1px solid var(--hairline);
}
@media (min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-top:3rem}}
.foot-brand .wordmark{font-family:var(--font-logo);font-size:1.5rem;font-weight:700;letter-spacing:-.05em;color:#fff}
.foot-brand p{
  margin-top:1rem;max-width:26rem;font-size:.8125rem;line-height:1.7;color:var(--muted);opacity:.55;font-weight:300;
}
.foot-col{display:flex;flex-direction:column;gap:.6rem}
.foot-col .kicker{margin-bottom:.4rem}
.foot-col a,.foot-col span{
  font-size:.8125rem;line-height:1.6;color:var(--muted);opacity:.6;text-decoration:none;transition:opacity .3s ease,color .3s ease;
}
.foot-col a:hover{opacity:1;color:#fff}
.foot-bar{
  position:relative;z-index:1;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:#fff;opacity:.35;
}
.btn-plain{text-decoration:none;display:inline-block}
.link-btn{text-decoration:none}

/* ==================================================================
   CUSTOM CURSOR — cursor-follower.tsx
================================================================== */
#cursor{position:fixed;inset:0;z-index:300;pointer-events:none}
#cursor .dot{
  position:absolute;border-radius:9999px;background:#fff;mix-blend-mode:difference;
  width:10px;height:10px;transform:translate(-50%,-50%);will-change:top,left;
}
#cursor .ring{
  position:absolute;border-radius:9999px;border:1px solid rgba(255,255,255,.3);
  width:40px;height:40px;transform:translate(-50%,-50%);
  transition:width .3s ease,height .3s ease;will-change:top,left;
}
#cursor .ring.hot{width:80px;height:80px}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ---- wordmark come link + voce di nav attiva ---- */
a.wordmark{text-decoration:none;display:inline-block}
.navlink.is-active{color:#fff}

/* ---- velo in cima: la nav resta leggibile sopra la zona calda dell'alone ---- */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11rem;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.5) 55%,transparent);
}

/* ---- etichette mono sopra l'alone: un'ombra le stacca senza velare il contenuto ---- */
.build-id,.eyebrow,.crumb,.kicker{text-shadow:0 1px 12px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}

/* ---- barra cookie (cookie-banner.js): si tinge con queste variabili ---- */
:root{
  --paper:#000000;
  --paper-3:#070707;
  --ink:#FFFFFF;
  --ink-2:#E6E6E6;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.28);
  --azure:#9CC4FF;
  --signal:#7FB0FF;
  --on-fill:#000000;
}
.mast-cookie-bar,.mast-cookie-btn,.mast-cookie-launcher{cursor:none}

/* ---- le card della home sono link alle pagine di competenza ---- */
a.card{display:block;text-decoration:none;color:inherit}

/* ---- lo split per carattere non spezza le parole a fine riga ---- */
.te .te-word{display:inline-block;white-space:pre}

/* ==================================================================
   ACCESSIBILITA'
================================================================== */

/* Il cursore finto e' identita', ma sui campi il puntatore di sistema e' un
   segnale che le persone usano senza pensarci: li' torna quello vero. */
input,select,textarea,label.consent,label.consent input{cursor:auto}
.field input,.field textarea{cursor:text}
.field select,.consent,.consent input{cursor:pointer}

/* prefers-reduced-motion: si riduce, non si spegne. Restano colore,
   gerarchia e il gradiente dell'alone; spariscono moto perpetuo,
   scorrimenti automatici e le entrate animate. */
@media (prefers-reduced-motion:reduce){
  #preloader{display:none!important}
  #content{opacity:1!important;transition:none!important}
  #cursor{display:none!important}
  body,a,button,[role="button"],.faq summary,.mast-cookie-bar,.mast-cookie-btn,.mast-cookie-launcher{cursor:auto}
  .star,.marquee-track,.pulse-box i{animation:none!important}
  [data-rv]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .te .seg{opacity:1!important;filter:none!important;transition:none!important}
  .card-media img{transform:none!important}
  *{scroll-behavior:auto!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ==================================================================
   FUOCO DA TASTIERA — su fondo nero il contorno di sistema sparisce.
   Stesso vocabolario del sito: una cornice netta, niente alone.
================================================================== */
a:focus-visible,button:focus-visible,summary:focus-visible,
[role="button"]:focus-visible,.card:focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:2px;
}
.card:focus-visible,.chapters a:focus-visible,.posts .post:focus-visible,
.matrix > a:focus-visible{outline-offset:-2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(160,195,255,.95);outline-offset:2px;
}
.mast-cookie-btn:focus-visible,.mast-cookie-launcher:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}

/* Salto alla pagina: invisibile finche' non riceve il fuoco. */
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:300;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:#fff;padding:.7rem 1rem;border-radius:2px;text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{top:1rem}