/* ============================================================================
   ARCHIMEMES — UI v2 · "INSTRUMENT"
   ============================================================================
   Questo file si carica DOPO il <style> inline di index.html: vince per ordine
   di cascata a parita' di specificita'. Non tocca il markup ne' app.js, quindi
   si toglie in blocco cancellando una riga da index.html e si torna esatti
   alla v1.

   DIREZIONE — La v1 era un terminale di trading piatto (riferimento dichiarato:
   Coinbase Pro / Hyperliquid): giusta come disciplina dei dati, ma "piatto" e
   "niente ombre, niente glow" e' anche il motivo per cui non sembrava un
   prodotto costoso. La v2 non aggiunge decorazione: aggiunge MATERIALE.

   L'idea guida e' lo strumento di precisione — un oscilloscopio, un banco di
   misura: cornice metallica lavorata, vetro nero, riferimenti incisi agli
   angoli, numeri in mono. Futuristico senza essere cyberpunk, serio senza
   essere anonimo.

   Le tre mosse su cui si regge tutto:
   1. SUBSTRATO — il fondo non e' piu' un colore ma un materiale: due aloni
      cromatici lentissimi, griglia, vignettatura, grana. I pannelli sembrano
      appoggiati su qualcosa invece che disegnati sul nulla.
   2. BISELLO — ogni superficie prende luce sul bordo alto e proietta ombra.
      E' il dettaglio che il cervello legge come "oggetto" prima ancora del
      contenuto.
   3. RETICOLO — quattro trattini incisi agli angoli dei pannelli principali.
      E' la firma della v2, e viene dal mirino di uno strumento di misura, non
      da una libreria di componenti. Sta SOLO su hero, lista token, grafico e
      modale: se fosse ovunque non sarebbe una firma, sarebbe un motivo.

   Cosa NON e' cambiato di proposito: la densita' dei dati, il verde/rosso come
   semantica buy/sell, i numeri in tabular mono. Quelle scelte erano corrette.
   ========================================================================= */

/* ============================================================================
   1. TOKEN
   ========================================================================= */
:root{
  /* Raggi piu' generosi della v1 (6/10px): a 14px il pannello smette di
     sembrare un rettangolo e inizia a sembrare un componente. */
  --v2-r:12px;
  --v2-r-md:10px;
  --v2-r-sm:9px;

  /* Decelerazione forte. Le transizioni che "atterrano" invece di fermarsi
     sono meta' della sensazione di qualita'. */
  --v2-ease:cubic-bezier(.16,1,.3,1);
  --v2-ease-io:cubic-bezier(.62,.02,.34,1);

  /* Bordi come luce su uno spigolo, in rgba: valgono su ogni chain senza
     ridefinizione. */
  --v2-edge:rgba(255,255,255,.075);
  --v2-edge-hi:rgba(255,255,255,.15);
  --v2-tick:rgba(255,255,255,.20);

  /* Il vetro: chiaro in alto, trasparente sotto. Mai un gradiente colorato —
     quello e' il tell numero uno di una landing generata. */
  --v2-glass:linear-gradient(178deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 34%,rgba(255,255,255,0) 100%);
  --v2-glass-deep:linear-gradient(178deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.014) 26%,rgba(255,255,255,0) 100%);

  --v2-elev-1:inset 0 1px 0 var(--v2-edge),0 1px 2px rgba(0,0,0,.55);
  --v2-elev-2:inset 0 1px 0 var(--v2-edge),0 2px 6px rgba(0,0,0,.5),0 22px 44px -26px rgba(0,0,0,.95);
  --v2-elev-3:inset 0 1px 0 var(--v2-edge-hi),0 4px 10px rgba(0,0,0,.5),0 34px 64px -30px rgba(0,0,0,1);

  /* Alone d'accento: usato SOLO su CTA piena e spina della sidebar. */
  --v2-accent-glow:0 6px 22px -8px rgba(var(--green-rgb),.55);

  /* Campo ambientale. --v2-field-2 e' una seconda tinta FREDDA che non compare
     mai nell'interfaccia: vive solo nello sfondo. Serve a dare vita cromatica
     al nero senza toccare la semantica verde/rosso — un nero con due tinte
     dentro legge come profondita', un nero puro legge come vuoto. */
  --v2-field-1:var(--green-rgb);
  --v2-field-2:20,110,170;
  --v2-field-op:.24;

  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
}
:root[data-chain="arc"]{--v2-field-2:120,80,235;}
:root[data-chain="bsc"]{--v2-field-2:200,90,25;--v2-field-op:.13;}

/* ============================================================================
   2. SUBSTRATO — il fondo come materiale
   ============================================================================
   Tre livelli sovrapposti, tutti pointer-events:none e sotto al contenuto:
     .v2-aurora  (z 0)    aloni che derivano lentissimi — iniettato da v2.js
     body::before(z 0)    griglia fine + vignettatura, statica
     body::after (z 9999) grana su tutto, contro il banding dei gradienti scuri
   Il canvas #starfield-bg preesistente resta e si somma: e' gia' una griglia
   con bagliore, qui diventa uno dei livelli invece che l'unico effetto.
   ========================================================================= */
html,body{background:var(--v2-bg-deep,#020304);}
:root{--v2-bg-deep:#020305;--v2-hero-glass:rgba(11,14,18,.86);}
:root[data-chain="arc"]{--v2-bg-deep:#02040c;--v2-hero-glass:rgba(9,14,29,.86);}
:root[data-chain="bsc"]{--v2-bg-deep:#030302;--v2-hero-glass:rgba(9,9,7,.88);}

.v2-aurora{
  position:fixed;inset:-20vmax;z-index:0;pointer-events:none;
  contain:layout paint style;overflow:hidden;
}
/* Niente filter:blur qui: su un cerchio di 60vmax un blur(90px) animato
   costringeva la GPU a rigenerare l'intera texture sfocata ad ogni frame —
   era il costo piu' alto della v2 su desktop. Stessa morbidezza, gratis,
   con piu' stop nel gradiente invece che con un filtro. */
.v2-aurora i{
  position:absolute;display:block;border-radius:50%;
  opacity:var(--v2-field-op);
  will-change:transform;
}
/* Alone d'accento: alto a sinistra, e' quello che tinge l'hero. */
.v2-aurora i:nth-child(1){
  width:58vmax;height:58vmax;left:-6vmax;top:-18vmax;
  background:radial-gradient(circle,
    rgba(var(--v2-field-1),.95) 0%,rgba(var(--v2-field-1),.5) 30%,
    rgba(var(--v2-field-1),.16) 56%,rgba(var(--v2-field-1),0) 80%);
  animation:v2Drift1 44s ease-in-out infinite alternate;
}
/* Alone freddo: basso a destra, chiude la diagonale e raffredda i mezzitoni. */
.v2-aurora i:nth-child(2){
  width:66vmax;height:66vmax;right:-14vmax;top:16vmax;
  background:radial-gradient(circle,
    rgba(var(--v2-field-2),.95) 0%,rgba(var(--v2-field-2),.45) 32%,
    rgba(var(--v2-field-2),.14) 58%,rgba(var(--v2-field-2),0) 82%);
  animation:v2Drift2 58s ease-in-out infinite alternate;
}
/* Solo traslazione, mai scale: il compositor sposta una texture gia' pronta
   invece di rigenerarla ad ogni frame. */
@keyframes v2Drift1{from{transform:translate3d(0,0,0);}to{transform:translate3d(7vmax,5vmax,0);}}
@keyframes v2Drift2{from{transform:translate3d(0,0,0);}to{transform:translate3d(-8vmax,-4vmax,0);}}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    /* griglia fine, appena percepibile — e' il foglio su cui si disegnano i
       grafici, quindi parla della stessa cosa di cui parla il prodotto */
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px) 0 0/64px 64px,
    /* vignettatura larga: concentra al centro senza che si veda */
    radial-gradient(130% 90% at 50% -8%,rgba(var(--green-rgb),.05),transparent 58%),
    radial-gradient(120% 100% at 50% 108%,rgba(0,0,0,.72),transparent 62%);
  mask-image:radial-gradient(140% 110% at 50% 0%,#000 32%,transparent 88%);
  -webkit-mask-image:radial-gradient(140% 110% at 50% 0%,#000 32%,transparent 88%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  /* mix-blend-mode qui obbligava il browser a ricomporre questo layer con
     tutto cio' che scorre sotto ad ogni frame — la seconda voce del costo
     "poco fluido" su desktop. Su un fondo quasi nero la differenza visiva e'
     minima, il costo continuo invece sparisce del tutto. */
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#starfield-bg{opacity:.55;}

/* ============================================================================
   3. TIPOGRAFIA
   ============================================================================
   Tensione fra tre registri, non uno:
     display  Space Grotesk, tracking NEGATIVO forte alle grandi dimensioni
     body     Inter, invariato — era gia' la scelta giusta
     dati     JetBrains Mono, tracking POSITIVO largo sulle micro-label
   Il contrasto fra un titolo serratissimo e label mono molto spaziate e' cio'
   che fa "respirare" la pagina in verticale. Nella v1 stavano quasi sulla
   stessa scala, quindi tutto sembrava allo stesso livello di importanza.
   ========================================================================= */
.hero h1,.wrap h1,.section-title,.modal h2,.feature-card h4,.how-step h4,
.pf-name,.docs-head h1,.tm-col-title,.st-head-main,.token-head .tk-name{
  font-family:var(--font-display);
  font-feature-settings:"ss01","tnum";
}
.hero h1{
  font-size:clamp(24px,1.9vw,31px);
  line-height:1.16;
  letter-spacing:-.027em;
  font-weight:600;
  margin-bottom:10px;
  max-width:26ch;
  /* Sfumatura verticale sul testo: dal bianco pieno al grigio chiaro. Da' al
     titolo lo stesso comportamento delle superfici (piu' luce in alto) invece
     di lasciarlo piatto. Nessun colore, quindi non sembra un titolo "arcobaleno". */
  background:linear-gradient(178deg,#fff 8%,#b9c2cd 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1 .accent{
  -webkit-text-fill-color:var(--green);
  background:none;
}
.wrap h1{font-size:23px;letter-spacing:-.025em;font-weight:600;}
.section-title{font-size:14px;letter-spacing:-.01em;font-weight:600;}
.modal h2{letter-spacing:-.018em;font-size:18px;}

/* Micro-label: tutto cio' che e' un'etichetta di un dato diventa mono largo.
   E' il segnale che quel testo NON e' contenuto, e' strumentazione. */
.side-label,.hero-stat .l,.token-mcap-l,.tok-head,.tr-lbl,.pf-stat-k,
.docs-head .eyebrow,.stat-label,.token-ca-l,.card h3{
  font-family:var(--font-mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:500;
}
.hero .eyebrow{
  font-family:var(--font-mono);letter-spacing:.2em;font-size:11px;font-weight:500;
}

/* ============================================================================
   4. RETICOLO — la firma
   ============================================================================
   Quattro angoli incisi, disegnati come 8 livelli di background invece che con
   pseudo-elementi: cosi' funziona anche sui pannelli generati da app.js e non
   entra in conflitto con nessun ::before/::after esistente.
   L'ultimo livello e' il vetro, quindi sta sotto a tutti gli altri.
   ========================================================================= */
.v2-reticle{
  background-image:
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    var(--v2-glass);
  background-repeat:no-repeat;
  background-size:
    10px 1px,1px 10px, 10px 1px,1px 10px,
    10px 1px,1px 10px, 10px 1px,1px 10px,
    auto;
  background-position:
    left 11px top 11px,left 11px top 11px,
    right 11px top 11px,right 11px top 11px,
    left 11px bottom 11px,left 11px bottom 11px,
    right 11px bottom 11px,right 11px bottom 11px,
    0 0;
  transition:background-color .25s var(--v2-ease);
}

/* ============================================================================
   5. SUPERFICI
   ========================================================================= */
.hero,.token-card,.panel,.card,.tok-panel,.chart-card,.feature-card,.how-step,
.pf-stat,.pf-panel,.trend-card,.tk-stat,.modal,.dex-embed-card,.saved-card,
.pf-summary-card,.pf-stock-card,.tm-col,.docs-sec,.stock-hero{
  border-color:var(--v2-edge);
}
.hero,.card,.tok-panel,.chart-card,.pf-panel,.modal,.dex-embed-card,
.pf-summary-card,.tm-col,.docs-sec{
  border-radius:var(--v2-r);
}
.token-card,.feature-card,.how-step,.pf-stat,.saved-card,.pf-stock-card,
.trending-row,.stock-hero,.trade-tab-row,.tk-stats{
  border-radius:var(--v2-r-md);
}

.card,.pf-panel,.feature-card,.how-step,.pf-stat,.pf-summary-card,
.pf-stock-card,.saved-card,.tm-col,.docs-sec,.dex-embed-card{
  background-image:var(--v2-glass);
  box-shadow:var(--v2-elev-1);
}
.tok-panel,.chart-card{box-shadow:var(--v2-elev-2);}
.hero{box-shadow:var(--v2-elev-3);}

/* ============================================================================
   6. SIDEBAR — rail con spina illuminata
   ============================================================================
   Il bordo destro non e' piu' una linea grigia ma un gradiente che si accende
   verso l'alto nel colore della chain: e' la prima cosa che si vede ed e' gia'
   un'informazione (su quale rete sei).
   ========================================================================= */
.app{padding-left:236px;}
.sidebar{
  width:236px;
  border-right:0;
  padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px));
  /* --bg-1 e' un colore pieno: dietro un fondo opaco un backdrop-filter non
     sfoca niente che si veda, costava GPU per zero risultato. Rimosso. */
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 26%),var(--bg-1);
}
.sidebar{
  /* La linea di destra e' un gradiente, non un colore: si accende in alto nel
     colore della chain e si spegne scendendo. E' border-image e non un
     ::after perche' la sidebar scorre, e un pseudo-elemento assoluto dentro un
     contenitore che scorre si sposta col contenuto invece di restare fermo. */
  border-right:1px solid transparent;
  border-image:linear-gradient(180deg,
    rgba(var(--green-rgb),.55) 0%,
    var(--v2-edge) 24%,
    var(--v2-edge) 100%) 1;
}
.logo{
  font-family:var(--font-display);
  font-size:17px;letter-spacing:-.032em;font-weight:700;
  padding:6px 8px 18px;
}
.logo-mark{width:25px;height:25px;margin-right:9px;}
.side-label{padding:15px 10px 6px;color:var(--text-mute);}

.side-link{
  border-radius:var(--v2-r-sm);
  padding:8px 10px;
  font-size:13px;
  transition:background .22s var(--v2-ease),color .22s var(--v2-ease),
             transform .22s var(--v2-ease);
}
.side-link:hover{transform:translateX(2px);}
.side-link.active{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.13),rgba(var(--green-rgb),.02));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.18);
}
.side-link.active::before{
  left:-14px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  box-shadow:0 0 14px 1px rgba(var(--green-rgb),.8);
}
.side-chain{border-radius:var(--v2-r-sm);}
.side-stats{border-top:1px solid var(--v2-edge);}
.side-stats tr{border-bottom:1px solid rgba(255,255,255,.045);}

/* CTA della sidebar: l'unico bottone del sito con un alone. Se ce l'hanno
   tutti non e' piu' una gerarchia, e' un effetto. */
.side-cta{
  border-radius:var(--v2-r-sm);
  padding:11px;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.008em;font-size:13px;
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--v2-accent-glow);
  transition:transform .2s var(--v2-ease),box-shadow .2s var(--v2-ease),filter .2s var(--v2-ease);
}
.side-cta:hover{
  transform:translateY(-1.5px);
  filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -8px rgba(var(--green-rgb),.75);
}
.side-cta:active{transform:translateY(0);}
.side-cta.stock{
  background:transparent;color:var(--text);
  border:1px solid var(--v2-edge-hi);
  box-shadow:var(--v2-elev-1);
}
.side-cta.stock:hover{background:rgba(255,255,255,.05);box-shadow:var(--v2-elev-2);}
.side-foot{border-top:1px solid var(--v2-edge);margin-top:12px;padding-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;}

/* ============================================================================
   7. TOPBAR — vetro
   ========================================================================= */
.topbar{
  padding:11px 22px;
  border-bottom:1px solid var(--v2-edge);
  background:linear-gradient(180deg,rgba(10,13,17,.86),rgba(10,13,17,.62));
  /* Sticky sopra una lista che scorre di continuo: blur(20px)+saturate
     ricalcolati ad ogni frame di scroll erano il costo piu' pesante della
     v2. Il fondo e' gia' quasi opaco, un raggio piu' piccolo senza saturate
     si vede appena meno e costa una frazione. */
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.search input{
  border-radius:999px;
  padding:9px 14px 9px 34px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--v2-edge);
  transition:border-color .22s var(--v2-ease),background .22s var(--v2-ease),box-shadow .22s var(--v2-ease);
}
.search input:focus{
  border-color:rgba(var(--green-rgb),.45);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
  outline:none;
}
.btn-connect{
  border-radius:999px;padding:9px 16px;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.5);
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease);
}
.btn-connect:hover{transform:translateY(-1px);}
.btn-connect:active{transform:translateY(0);}
.chain-trigger,.chain-switch{border-radius:999px;border-color:var(--v2-edge);}
.chain-menu{border-radius:var(--v2-r-md);border-color:var(--v2-edge-hi);box-shadow:var(--v2-elev-3);}

/* ============================================================================
   8. HERO — la tesi, disegnata
   ============================================================================
   Sopra i 1080px diventa una griglia: a sinistra il testo, a destra il grafico
   della curva dentro il suo bisello. Nella v1 la curva era in posizione
   assoluta dietro al testo e sotto i 1100px spariva del tutto — quindi su
   quasi tutti i portatili l'elemento che spiega il prodotto non c'era.
   ========================================================================= */
/* L'hero e' l'UNICO pannello traslucido del sito. Gli aloni del substrato lo
   attraversano appena, quindi la sua tinta cambia lentamente da sola: e' la
   differenza fra un riquadro disegnato sopra uno sfondo e un vetro appoggiato
   su qualcosa. Sugli altri pannelli sarebbe un problema — dietro una colonna
   di numeri un fondo che respira si legge come sfarfallio. */
.hero{
  padding:24px 26px;
  margin-bottom:24px;
  background-color:var(--v2-hero-glass);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
  overflow:hidden;
}
/* Filo d'accento sul bordo alto: sfuma ai lati, quindi non e' una barra ma un
   riflesso. */
.hero::before{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--green-rgb),.85),transparent);
  pointer-events:none;z-index:1;
}
/* Alone d'accento dietro il pannello: da' profondita' senza colorare il
   testo, unico elemento che aveva un vero "glow" era il CTA — ora l'hero
   nel suo insieme legge come lo strumento acceso, non solo il bottone. */
.hero::after{
  content:"";position:absolute;left:50%;top:-40%;width:70%;height:140%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(var(--green-rgb),.16),transparent 70%);
  filter:blur(2px);
}
.hero .eyebrow{margin-bottom:12px;color:var(--green);}
.hero p{font-size:13px;line-height:1.6;max-width:58ch;color:var(--text-dim);}
.hero p.hero-sub{
  font-size:13px;line-height:1.6;font-weight:500;color:var(--text-dim);
  max-width:60ch;margin-top:12px;padding:0 0 0 13px;
  border-left:2px solid rgba(var(--green-rgb),.45);
  background:none;border-radius:0;
}
.hero-sub .check{color:var(--green);}
.hero-logo{width:44px;height:44px;}

@media (min-width:1080px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,380px);
    grid-template-areas:
      "copy curve"
      "proof curve"
      "verify curve";
    row-gap:0;column-gap:32px;
    align-items:start;
  }
  .hero-copy{grid-area:copy;}
  .hero-verified{grid-area:verify;}
  .hero-proof{grid-area:proof;}
  .v2-readout{grid-area:curve;align-self:center;justify-self:stretch;}
}
/* ---- AZIONE ----
   Un primario pieno e un secondario in cornice. Due, non tre: la terza voce e'
   sempre quella che nessuno clicca e che toglie peso alle altre due. */
.v2-cta-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;}
/* Su desktop la sidebar (sempre visibile) ha gia' "+ Launch your token", e la
   lista e' a un breve scroll: qui sarebbero un secondo invito ridondante.
   Restano solo dove la sidebar e' un cassetto chiuso. */
@media (min-width:901px){.v2-cta-row{display:none;}}
.v2-cta{
  padding:11px 20px;border-radius:var(--v2-r-sm);border:1px solid transparent;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-.008em;
  background:linear-gradient(180deg,var(--green-hi),var(--green));color:var(--on-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--v2-accent-glow);
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease),
             box-shadow .18s var(--v2-ease),background .18s var(--v2-ease);
}
.v2-cta:hover{
  transform:translateY(-1.5px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 12px 32px -10px rgba(var(--green-rgb),.8);
}
.v2-cta:active{transform:translateY(0);}
.v2-cta.ghost{
  background:rgba(255,255,255,.035);color:var(--text);
  border-color:var(--v2-edge-hi);box-shadow:var(--v2-elev-1);
}
.v2-cta.ghost:hover{background:rgba(255,255,255,.07);box-shadow:var(--v2-elev-2);}
@media (max-width:640px){.v2-cta{flex:1;padding:11px 14px;}}

/* ---- CURVA ----
   Il grafico vettoriale della bonding curve, cornice dello strumento
   costruita da v2.js intorno a .hero-curve al caricamento. */
.v2-readout{
  border-radius:var(--v2-r-md);border:1px solid var(--v2-edge);
  background:rgba(255,255,255,.018);box-shadow:var(--v2-elev-1);
  padding:10px 12px 6px;min-width:0;
}
.v2-readout-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.v2-readout-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-mute);
}
.v2-readout-key{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);opacity:.85;
}
.v2-readout-key i{width:7px;height:7px;border-radius:2px;background:rgba(var(--green-rgb),.4);border:1px solid var(--green);display:block;}
.hero-curve{width:100%;height:auto;display:block;}
@media (max-width:1079px){.v2-readout{display:none;}}

.hero-verified{
  font-size:11.5px;line-height:1.5;color:var(--text-mute);
  margin-top:16px;padding-top:13px;
  border-top:1px solid var(--v2-edge);
  max-width:none;
}
.hero-verified strong{color:var(--text-dim);font-weight:500;}

/* Striscia dati: un readout, non una tabella.
   La v1 la incorniciava con bordo, sfondo e raggio — quattro celle in una
   scatola. Qui la scatola sparisce: resta una sola linea sopra e separatori
   sottilissimi che sfumano alle estremita'. I numeri diventano l'oggetto, non
   il contenitore. */
.hero-proof{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:22px 0 0;padding-top:18px;
  border:0;border-top:1px solid var(--v2-edge);
  border-radius:0;background:transparent;overflow:visible;
  gap:0;
}
#view-stocks .hero-proof{margin:22px 0 0;}
.hp-item{padding:0 18px;position:relative;border-right:0;}
.hp-item:first-child{padding-left:0;}
.hp-item + .hp-item::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,var(--v2-edge) 30%,var(--v2-edge) 70%,transparent);
}
.hp-item dt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:6px;
}
.hp-item dd{
  font-family:var(--font-mono);font-size:19px;
  font-weight:600;letter-spacing:-.015em;color:var(--text);line-height:1.1;
}
.hp-item.accent dd{
  color:var(--green);
  text-shadow:0 0 26px rgba(var(--green-rgb),.4);
}
@media (max-width:720px){
  .hero-proof{grid-template-columns:1fr 1fr;row-gap:18px;}
  .hp-item{padding:0 0 0 18px;border-bottom:0;border-right:0;}
  .hp-item:nth-child(2n+1){padding-left:0;}
  .hp-item:nth-child(2n+1)::before{display:none;}
}

/* ============================================================================
   9. INTESTAZIONI DI SEZIONE
   ============================================================================
   Il titolo ha un trattino d'accento e la linea prosegue fino a fine riga: la
   sezione si legge come una tacca su una scala graduata.
   ========================================================================= */
.section-head{
  margin-bottom:14px;padding-bottom:11px;
  border-bottom:1px solid var(--v2-edge);
  position:relative;
}
.section-title::before{
  width:3px;height:15px;border-radius:2px;
  background:var(--green);
  box-shadow:0 0 12px rgba(var(--green-rgb),.75);
}
/* La tacca d'accento sotto il titolo esiste solo dove un titolo c'e': la
   riga dei filtri usa la stessa classe .section-head ma non e' una sezione,
   e li' la tacca sembrerebbe la sottolineatura di un tab attivo. */
.section-head:has(.section-title)::after{
  content:"";position:absolute;left:0;bottom:-1px;width:58px;height:1px;
  background:var(--green);
  box-shadow:0 0 10px rgba(var(--green-rgb),.6);
}

.feed-tab,.chip,.pf-tab,.tm-tab,.docs-tab,.chart-tf,.chart-type{
  border-radius:999px;
  border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.feed-tab:hover,.chip:hover,.pf-tab:hover{
  border-color:var(--v2-edge-hi);
  background:rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.feed-tab.active,.chip.active,.pf-tab.active,.tm-tab.active,
.chart-tf.active,.chart-type.active{
  background:rgba(var(--green-rgb),.12);
  border-color:rgba(var(--green-rgb),.42);
  color:var(--text);
  box-shadow:0 0 18px -6px rgba(var(--green-rgb),.6);
}
.feed-tab.active::after{box-shadow:0 0 8px var(--green);}

/* ============================================================================
   10. LISTA TOKEN — il cuore della home
   ========================================================================= */
.tok-panel{background-color:var(--panel);}
.tok-head{
  background:rgba(255,255,255,.022);
  border-bottom:1px solid var(--v2-edge);
  padding:11px 16px;
  color:var(--text-mute);
}
.tok-row{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:transparent;
  transition:background .22s var(--v2-ease),box-shadow .22s var(--v2-ease);
  position:relative;
}
/* Barra d'accento che entra da sinistra al passaggio: sostituisce il cambio di
   sfondo come segnale di "questa e' la riga sotto il puntatore". Costa una
   trasformazione, non un repaint. */
.tok-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);
  transform:scaleY(0);transform-origin:center;
  transition:transform .28s var(--v2-ease);
  box-shadow:0 0 12px rgba(var(--green-rgb),.7);
}
.tok-row:hover{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.055),rgba(255,255,255,.018) 40%,transparent);
}
.tok-row:hover::before{transform:scaleY(1);}
.tr-img{
  border-color:var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.55);
  transition:transform .28s var(--v2-ease),box-shadow .28s var(--v2-ease);
}
.tok-row:hover .tr-img{
  transform:scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 16px rgba(0,0,0,.6),
             0 0 0 1px rgba(var(--green-rgb),.3);
}
.tr-n1{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.tr-num{font-size:13.5px;font-weight:500;}
.tr-bar{height:5px;background:rgba(255,255,255,.07);}
.tr-bar-fill{
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 10px rgba(var(--green-rgb),.65);
  transition:width .6s var(--v2-ease);
}
.tok-tag{border-color:var(--v2-edge-hi);}

/* ============================================================================
   11. TRENDING
   ========================================================================= */
.trending-row{background:var(--v2-edge);border-color:var(--v2-edge);overflow:hidden;}
.trend-card{
  background:var(--panel);
  background-image:var(--v2-glass);
  transition:background .24s var(--v2-ease),transform .24s var(--v2-ease);
}
.trend-card:hover{transform:translateY(-2px);background-color:var(--panel-2);}
.trend-rank{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--text-mute);letter-spacing:.06em;
  top:10px;right:12px;
}
.trend-card:hover .trend-rank{color:rgba(var(--green-rgb),.9);}
.trend-img{
  border-color:var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 10px rgba(0,0,0,.5);
}

/* ============================================================================
   12. SCHEDE TOKEN (anteprima creazione, watchlist)
   ========================================================================= */
.token-card{
  background-color:var(--panel);
  background-image:var(--v2-glass);
  box-shadow:var(--v2-elev-1);
  transition:transform .26s var(--v2-ease),box-shadow .26s var(--v2-ease),
             border-color .26s var(--v2-ease);
}
.token-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--green-rgb),.3);
  box-shadow:var(--v2-elev-2),0 0 30px -14px rgba(var(--green-rgb),.6);
}
.token-img{
  border-color:var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.5);
}
.token-badge{border-radius:999px;padding:3px 9px;letter-spacing:.04em;}
.token-badge.live{
  box-shadow:0 0 16px -4px rgba(var(--green-rgb),.75);
}
.token-progress-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);}
.token-progress-fill{
  border-radius:999px;
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 10px rgba(var(--green-rgb),.6);
}

/* ============================================================================
   13. PAGINA TOKEN — grafico, statistiche, pannello scambi
   ========================================================================= */
.token-container{padding:24px 20px 100px;gap:16px;}
.tk-stats{background:var(--v2-edge);overflow:hidden;}
.tk-stat{
  background:var(--panel);
  background-image:var(--v2-glass);
  padding:13px 14px;
  transition:background-color .22s var(--v2-ease);
}
.tk-stat:hover{background-color:var(--panel-2);}
.tk-stat .v{font-size:15px;letter-spacing:-.012em;font-family:var(--font-mono);}
.tk-stat-subbar{height:4px;border-radius:999px;background:rgba(255,255,255,.07);}
.tk-stat-subbar-fill{
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 8px rgba(var(--green-rgb),.6);
}
.chart-card{background-color:var(--panel);}

.trade-tab-row{
  background:rgba(0,0,0,.35);
  border-color:var(--v2-edge);
  padding:5px;
}
.trade-tab{border-radius:var(--v2-r-sm);font-family:var(--font-display);letter-spacing:-.005em;}
.trade-tab.trade-tab-active-buy{
  background:linear-gradient(180deg,rgba(var(--green-rgb),.2),rgba(var(--green-rgb),.08));
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.35),0 2px 10px -3px rgba(var(--green-rgb),.5);
}
.trade-tab.trade-tab-active-sell{
  background:linear-gradient(180deg,rgba(240,71,90,.2),rgba(240,71,90,.08));
  box-shadow:inset 0 0 0 1px rgba(240,71,90,.35),0 2px 10px -3px rgba(240,71,90,.5);
}

.btn-main,.btn-launch,.btn-enter,.pf-btn-primary{
  border-radius:var(--v2-r-sm);
  font-family:var(--font-display);font-weight:600;letter-spacing:-.008em;
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease),
             box-shadow .18s var(--v2-ease);
}
.btn-buy,.btn-launch,.btn-enter,.pf-btn-primary{
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--v2-accent-glow);
}
.btn-buy:hover:not(:disabled),.btn-launch:hover:not(:disabled),
.btn-enter:hover:not(:disabled),.pf-btn-primary:hover{
  transform:translateY(-1.5px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 12px 32px -10px rgba(var(--green-rgb),.8);
}
.btn-buy:active:not(:disabled),.btn-launch:active:not(:disabled){transform:translateY(0);}
.btn-sell{
  background:linear-gradient(180deg,#ff5b6d,var(--red));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 22px -8px rgba(240,71,90,.55);
}
.btn-sell:hover:not(:disabled){transform:translateY(-1.5px);filter:brightness(1.05);}
.btn-secondary,.qa-btn,.pf-btn,.upload-btn,.page-btn,.page-num{
  border-radius:var(--v2-r-sm);border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.btn-secondary:hover:not(:disabled),.qa-btn:hover,.pf-btn:hover{
  border-color:var(--v2-edge-hi);background:rgba(255,255,255,.06);transform:translateY(-1px);
}
.page-btn,.page-num{border-radius:999px;}
.page-num.active{
  background:rgba(var(--green-rgb),.14);
  border-color:rgba(var(--green-rgb),.45);
  color:var(--text);
  box-shadow:0 0 18px -6px rgba(var(--green-rgb),.7);
}

/* ============================================================================
   14. FORM
   ========================================================================= */
/* NIENTE max-width qui. .tm-wrap (1600px) e .docs-wrap (820px) sono
   dichiarate DOPO .wrap nel CSS inline e vincono per ordine di sorgente: e'
   cosi' che Terminal e Docs sono larghi. Ridichiarando .wrap in questo file,
   che si carica dopo TUTTO l'inline, il suo max-width tornava a vincere e le
   due viste finivano schiacciate in una colonna da 660px. */
.wrap{padding:26px 20px 100px;}
.card{background-color:var(--panel);padding:18px;}
.card h3{color:var(--text-mute);margin-bottom:13px;}
.field label{font-size:12.5px;font-weight:500;color:var(--text-dim);margin-bottom:9px;}
.field input,.field textarea{
  border-radius:var(--v2-r-sm);
  background:rgba(0,0,0,.32);
  border:1px solid var(--v2-edge);
  padding:11px 13px;
  transition:border-color .2s var(--v2-ease),box-shadow .2s var(--v2-ease),background .2s var(--v2-ease);
}
.field input:focus,.field textarea:focus{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
}
.feemode-opt,.pair-opt,.stock-opt,.wallet-pick-item{
  border-radius:var(--v2-r-sm);border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.feemode-opt:hover,.pair-opt:hover,.stock-opt:hover,.wallet-pick-item:hover{
  border-color:var(--v2-edge-hi);background:rgba(255,255,255,.04);
}
.feemode-opt.selected,.pair-opt.selected,.stock-opt.selected{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(var(--green-rgb),.07);
  box-shadow:0 0 24px -10px rgba(var(--green-rgb),.6);
}

/* ============================================================================
   15. PROFILO
   ========================================================================= */
.pf-banner{border-radius:var(--v2-r);overflow:hidden;}
.pf-avatar{
  border-radius:var(--v2-r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px -8px rgba(0,0,0,.9);
}
.pf-name{font-size:18px;letter-spacing:-.018em;font-weight:600;}
.pf-stat{
  background-color:var(--panel);
  transition:transform .24s var(--v2-ease),border-color .24s var(--v2-ease),
             box-shadow .24s var(--v2-ease);
}
.pf-stat:hover{
  transform:translateY(-2px);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-2);
}
.pf-stat-v{font-size:19px;letter-spacing:-.016em;}
.pf-tabs{border-bottom:1px solid var(--v2-edge);}
.pf-activity-row{border-color:var(--v2-edge);}

/* ============================================================================
   16. TERMINAL
   ============================================================================
   Le tre colonne sono uno stato della curva, non tre liste qualsiasi: appena
   creato, oltre meta' strada, gia' bondato. La barra sopra ogni colonna lo
   dice — spenta a sinistra, accesa a destra. E' struttura che porta
   informazione, non decorazione.
   ========================================================================= */
.tm-grid{gap:14px;}
.tm-col{background-color:var(--panel);position:relative;}
.tm-col::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:rgba(255,255,255,.1);
}
.tm-col[data-col="soon"]::before{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.15),rgba(var(--green-rgb),.75));
}
.tm-col[data-col="bonded"]::before{
  background:var(--green);
  box-shadow:0 0 14px rgba(var(--green-rgb),.7);
}
.tm-col-head{
  border-bottom:1px solid var(--v2-edge);
  padding:14px;
  background:rgba(255,255,255,.022);
}
.tm-col-title{font-size:13.5px;font-weight:600;letter-spacing:-.008em;}
.tm-col-sub{font-size:11.5px;color:var(--text-mute);margin-top:3px;line-height:1.45;}
.tm-filter-btn{border-radius:8px;border-color:var(--v2-edge);}
.tm-filter-btn:hover{border-color:var(--v2-edge-hi);}
.tm-filters{background:rgba(0,0,0,.28);border-bottom:1px solid var(--v2-edge);}
.tm-filters input,.tm-filters select{
  border-radius:8px;border-color:var(--v2-edge);background:rgba(0,0,0,.35);
}
.tm-filters input:focus,.tm-filters select:focus{
  border-color:rgba(var(--green-rgb),.5);box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
}
.tm-filter-clear{border-radius:8px;border-color:var(--v2-edge);}

.tm-row{
  border-color:rgba(255,255,255,.04);
  padding:11px 14px;position:relative;
  transition:background .22s var(--v2-ease);
}
.tm-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);transform:scaleY(0);
  transition:transform .26s var(--v2-ease);
  box-shadow:0 0 12px rgba(var(--green-rgb),.7);
}
.tm-row:hover{background:linear-gradient(90deg,rgba(var(--green-rgb),.05),transparent 60%);}
.tm-row:hover::before{transform:scaleY(1);}
.tm-img{
  border-radius:999px;border:1px solid var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 2px 8px rgba(0,0,0,.5);
  transition:transform .26s var(--v2-ease);
}
.tm-row:hover .tm-img{transform:scale(1.06);}
.tm-bar{width:72px;height:4px;background:rgba(255,255,255,.07);box-shadow:none;}
.tm-bar span{box-shadow:0 0 8px rgba(var(--green-rgb),.6);}
.tm-list::-webkit-scrollbar{width:8px;}
.tm-h{font-family:var(--font-display);font-size:21px;letter-spacing:-.025em;}
.tm-tabs{gap:6px;}
.tm-tab{flex:1;}

/* ---- DOCS ---- */
.docs-sec{background-color:var(--panel);}
.docs-table{border-color:var(--v2-edge);}

/* ============================================================================
   17. MODALE
   ========================================================================= */
.modal-backdrop{
  background:rgba(1,2,3,.86);
  backdrop-filter:blur(10px) saturate(.8);
  -webkit-backdrop-filter:blur(10px) saturate(.8);
}
.modal{
  padding:26px;
  background-color:var(--panel);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-3),0 0 90px -30px rgba(var(--green-rgb),.5);
  animation:v2ModalIn .5s var(--v2-ease) both;
}
@keyframes v2ModalIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.modal .modal-sub{letter-spacing:.14em;text-transform:uppercase;font-size:11px;}
.modal .accept-row{
  border-radius:var(--v2-r-sm);
  border-color:var(--v2-edge);
  background:rgba(0,0,0,.32);
  transition:border-color .2s var(--v2-ease);
}
.modal .accept-row:hover{border-color:var(--v2-edge-hi);}
.modal .accept-row input{border-radius:6px;border-color:var(--v2-edge-hi);}
.modal .accept-row input:checked{box-shadow:0 0 18px -4px rgba(var(--green-rgb),.85);}

/* ============================================================================
   18. HOW / FEATURE — le tre tessere
   ============================================================================
   Il numero del passo diventa una cifra grande e cava sullo sfondo: e' un
   ordinale vero (il processo E' una sequenza), quindi puo' pesare.
   ========================================================================= */
.how-grid,.feature-row{gap:10px;}
.how-step,.feature-card{
  background-color:var(--panel);
  padding:17px;
  position:relative;overflow:hidden;
  transition:transform .26s var(--v2-ease),border-color .26s var(--v2-ease),
             box-shadow .26s var(--v2-ease);
}
.how-step:hover,.feature-card:hover{
  transform:translateY(-3px);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-2);
}
.how-step .step-num{
  width:26px;height:26px;border-radius:7px;background:none;
  border:1px solid rgba(var(--green-rgb),.45);
  font-family:var(--font-mono);font-size:12px;font-weight:600;line-height:1;
  color:var(--green);margin-bottom:12px;letter-spacing:0;
  transition:border-color .24s var(--v2-ease),box-shadow .24s var(--v2-ease);
}
.how-step:hover .step-num{border-color:rgba(var(--green-rgb),.9);box-shadow:0 0 14px -4px rgba(var(--green-rgb),.8);}
.how-step h4,.feature-card h4{font-size:14px;font-weight:600;letter-spacing:-.012em;margin-bottom:6px;}
.how-step p,.feature-card p{font-size:13px;line-height:1.6;}
.how-step:not(:last-child)::after{color:rgba(var(--green-rgb),.55);}
.feature-ico{
  width:32px;height:32px;border-radius:var(--v2-r-sm);
  background:linear-gradient(180deg,rgba(var(--green-rgb),.18),rgba(var(--green-rgb),.05));
  border-color:rgba(var(--green-rgb),.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px -8px rgba(var(--green-rgb),.7);
}
.feature-ico svg{width:16px;height:16px;}

/* ============================================================================
   19. VUOTI, SCHELETRI, BANNER
   ========================================================================= */
.empty-state{
  border-radius:var(--v2-r);border-color:var(--v2-edge);
  background:rgba(255,255,255,.015);padding:58px 22px;
}
.skel-line{border-radius:999px;background:rgba(255,255,255,.055);}
.banner,.bonded-banner,.chain-notice,.wallet-notice{border-radius:var(--v2-r-sm);}

/* ============================================================================
   20. FOOTER
   ========================================================================= */
.site-foot,.site-footer{border-top:1px solid var(--v2-edge);padding-top:20px;}
.foot-name,.site-foot .fl{font-family:var(--font-display);letter-spacing:-.03em;}

/* ============================================================================
   21. RIVELAZIONE ALLO SCORRIMENTO
   ============================================================================
   Una regia sola all'ingresso, non effetti sparsi. Le classi le mette v2.js.
   ========================================================================= */
.v2-rise{opacity:0;transform:translateY(18px);}
.v2-in{
  opacity:1;transform:none;
  transition:opacity .75s var(--v2-ease),transform .75s var(--v2-ease);
}
/* Sequenza d'ingresso dell'hero: occhiello, titolo, testo, dati. */
.v2-boot .hero-copy > *,.v2-boot .hero-verified,.v2-boot .hp-item{
  animation:v2BootIn .85s var(--v2-ease) both;
}
.v2-boot .v2-readout{animation:v2BootIn 1s var(--v2-ease) .12s both;}
.v2-boot .hero-copy > *:nth-child(1){animation-delay:.05s;}
.v2-boot .hero-copy > *:nth-child(2){animation-delay:.11s;}
.v2-boot .hero-copy > *:nth-child(3){animation-delay:.17s;}
.v2-boot .hero-copy > *:nth-child(4){animation-delay:.23s;}
.v2-boot .hero-copy > *:nth-child(5){animation-delay:.29s;}
.v2-boot .hero-verified{animation-delay:.26s;}
.v2-boot .hp-item:nth-child(1){animation-delay:.3s;}
.v2-boot .hp-item:nth-child(2){animation-delay:.36s;}
.v2-boot .hp-item:nth-child(3){animation-delay:.42s;}
.v2-boot .hp-item:nth-child(4){animation-delay:.48s;}
@keyframes v2BootIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* La curva si disegna da sola una volta. Non e' un ornamento: e' la tesi del
   prodotto che si costruisce sotto gli occhi. Prima il reticolo e gli assi,
   poi il tratto — l'ordine in cui uno strumento vero disegna una traccia.
   La lunghezza di ogni tratto la misura v2.js sul path, quindi la velocita' e'
   uniforme invece che proporzionale alla lunghezza. */
.v2-draw{
  stroke-dasharray:var(--v2-len);
  stroke-dashoffset:var(--v2-len);
  animation:v2Draw var(--v2-dur,1.3s) var(--v2-ease-io) var(--v2-delay,.3s) both;
}
@keyframes v2Draw{to{stroke-dashoffset:0;}}
/* La campitura della zona rimborsabile entra dopo il tratto che la delimita. */
.v2-fade-in{animation:v2BootIn .9s var(--v2-ease) var(--v2-delay,.9s) both;}

/* ============================================================================
   22. FUOCO DA TASTIERA
   ========================================================================= */
/* Le cifre cave (rank del trending, numero del passo) sono testo con contorno
   e riempimento trasparente. Dove il contorno non e' supportato resterebbe
   testo invisibile: qui tornano piene e attenuate. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================================
   23. SCROLLBAR
   ========================================================================= */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);border-radius:999px;
  border:3px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--green-rgb),.5);background-clip:padding-box;}

/* ============================================================================
   24. MOBILE
   ========================================================================= */
@media (max-width:900px){
  .app{padding-left:0;}
  .sidebar{width:282px;}
  .sidebar{border-image:none;border-right:1px solid var(--v2-edge);}
  .topbar{padding:11px 16px;}
  /* Sotto i 900px la casella si stringe (menu, ricerca, switch chain e
     wallet sulla stessa riga): "Search tokens..." non ci sta e si vedeva
     tagliato in "Sea". Meglio l'input vuoto con solo la lente. */
  .search input::placeholder{color:transparent;}
  .page{padding:18px 16px 8px;}
  .hero{padding:18px 16px;border-radius:var(--v2-r-md);}
  .hero h1{font-size:23px;letter-spacing:-.024em;max-width:none;}
  .hero p{font-size:13px;}
  .hero-logo{width:36px;height:36px;}
  .hp-item dd{font-size:17px;}
  .token-container{padding:18px 14px 100px;}
  .modal{padding:20px;}
  .v2-reticle{background-position:
    left 8px top 8px,left 8px top 8px,
    right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,
    right 8px bottom 8px,right 8px bottom 8px,
    0 0;}
}
@media (min-width:1441px){
  .page{max-width:1440px;padding:26px 28px 8px;}
}

/* ============================================================================
   25. MOVIMENTO RIDOTTO
   ============================================================================
   Chi lo chiede ottiene la stessa interfaccia, ferma. Nessun elemento sparisce
   e nessuno resta invisibile per un'animazione che non parte.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .v2-aurora i{animation:none;}
  .v2-boot .hero-copy > *,.v2-boot .hero-verified,.v2-boot .hp-item,
  .v2-boot .v2-readout{animation:none;opacity:1;transform:none;}
  .hero-curve path{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}
  .v2-cta:hover{transform:none;}
  .v2-rise{opacity:1;transform:none;}
  .modal{animation:none;}
  .side-link:hover,.token-card:hover,.trend-card:hover,.how-step:hover,
  .feature-card:hover,.pf-stat:hover,.side-cta:hover,.btn-connect:hover,
  .btn-buy:hover:not(:disabled),.btn-launch:hover:not(:disabled){transform:none;}
}