/* ============================================================================
   TRANDLE — design system v3
   ----------------------------------------------------------------------------
   Due temi completi (notte / giorno), non uno l'inverso dell'altro: sul fondo
   chiaro i colori sono ricalcolati per restare leggibili.

   Scelte tipografiche, dalla ricerca su come sono fatte le piattaforme vere
   (TradingView usa Euclid Circular B, Stripe ha Söhne, Robinhood un font su
   misura — nessuna di loro gira su un font di sistema generico):
     · Outfit            → titoli. Geometrico, è l'analogo libero più vicino
                           all'Euclid Circular di TradingView.
     · Plus Jakarta Sans → testo e interfaccia. Tiene ai corpi piccoli, dove
                           Outfit si assottiglia troppo.
     · JetBrains Mono    → numeri. CIFRE TABULARI: in un prodotto finanziario
                           le colonne di importi devono incolonnarsi, punto.

   Contrasto: il testo secondario non scende sotto ~7:1, il terziario sotto
   ~4.5:1. La versione precedente sbiadiva in grigio ed è da lì che veniva
   l'aria smorta.
   ========================================================================== */

:root{
  /* ---- superfici (notte) ---- */
  --ink:#0B0D12; --ink2:#0F1218;
  --panel:#12151C; --panel2:#171B24;
  --card:#12151C; --card2:#181C26;
  --line:#232834; --line2:#2E3542;

  /* ---- testo: tre livelli, tutti leggibili ---- */
  --text:#F3F5F9;
  --dim:#AEB6C6;
  --faint:#828B9E;

  /* ---- colore di marca ---- */
  --iris:#5B7CFA;
  --iris2:#4763E8;
  --iris-soft:rgba(91,124,250,.14);
  --cyan:#12C8A8;

  /* ---- semantici di mercato ---- */
  --gain:#19D67F; --loss:#FF5F5F; --gold:#F5B942;

  /* ---- tipografia ---- */
  --disp:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;
  --body:"Plus Jakarta Sans","Outfit",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  /* ---- forma e profondità ---- */
  --r:18px; --r-sm:12px;
  --shadow-card:0 18px 44px rgba(0,0,0,.42);
  --shadow-pop:0 26px 70px rgba(0,0,0,.55);
  --ring:rgba(91,124,250,.34);
  --grid-line:rgba(91,124,250,.055);
  --glass:rgba(11,13,18,.74);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- tema giorno
   Ricalcolato, non invertito: le ombre si alleggeriscono, verde e rosso si
   scuriscono per restare leggibili su bianco, il vetro diventa chiaro. */
:root[data-theme="light"]{
  --ink:#FAFBFD; --ink2:#F3F5F9;
  --panel:#FFFFFF; --panel2:#F6F8FC;
  --card:#FFFFFF; --card2:#F7F9FD;
  --line:#E2E6EF; --line2:#D2D8E6;

  --text:#0D1119;
  --dim:#4B5468;
  --faint:#6C7488;

  --iris:#3A5FE8; --iris2:#2E4ED4;
  --iris-soft:rgba(58,95,232,.10);
  --cyan:#0E9E86;

  --gain:#0BA45E; --loss:#DC3838; --gold:#B8860B;

  --shadow-card:0 12px 32px rgba(16,24,48,.09);
  --shadow-pop:0 22px 56px rgba(16,24,48,.14);
  --ring:rgba(58,95,232,.28);
  --grid-line:rgba(58,95,232,.06);
  --glass:rgba(255,255,255,.82);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;font-weight:450;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .25s ease,color .25s ease;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em;line-height:1.1;font-weight:700}
h1,h2{text-wrap:balance}
/* ogni cifra si incolonna: obbligatorio quando si mostrano soldi */
.mono,table,.price,.p,.num,.band b,.am-item .price{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:8px}
::selection{background:var(--iris);color:#fff}

/* ambiente: UNA sola sorgente luminosa, morbida. Prima erano tre gradienti
   sovrapposti, ed è quel fondale che fa sembrare tutto una demo. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 700px at 50% -260px,var(--iris-soft),transparent 70%);
}
nav.site,main,section,.phero,footer.site{position:relative;z-index:1}

/* ---------------------------------------------------------------------- nav */
nav.site{
  position:sticky;top:0;z-index:60;
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:28px;height:70px}
.logo{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.045em;white-space:nowrap}
.logo b{color:var(--iris)}
.nav-links{display:flex;gap:2px;font-size:14.5px;font-weight:550;color:var(--dim)}
.nav-links a{padding:8px 13px;border-radius:10px;transition:color .15s,background-color .15s}
.nav-links a:hover{color:var(--text);background:var(--iris-soft)}
.nav-links a.on{color:var(--iris);background:var(--iris-soft);font-weight:650}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(max-width:940px){.nav-links{display:none}}

/* interruttore giorno / notte */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;cursor:pointer;flex-shrink:0;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  transition:color .15s,border-color .15s,background-color .15s;
}
.theme-btn:hover{color:var(--iris);border-color:var(--iris);background:var(--iris-soft)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}

/* ------------------------------------------------------------------ bottoni */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:12px;
  font-family:var(--body);font-weight:650;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .14s ease,box-shadow .18s ease,background-color .18s,border-color .18s,color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--iris);color:#fff;box-shadow:0 6px 20px var(--ring)}
.btn-brand:hover{background:var(--iris2);box-shadow:0 10px 28px var(--ring)}
.btn-ghost{border-color:var(--line2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--iris);color:var(--iris);background:var(--iris-soft)}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:14px}

/* ------------------------------------------------------------------- ticker */
.ticker{border-bottom:1px solid var(--line);background:var(--ink2);overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.ticker-track{display:inline-block;padding:9px 0;animation:tick 44s linear infinite}
.ticker span{margin:0 26px}
.ticker b{font-weight:500}
.ticker b.up{color:var(--gain)}
.ticker b.dn{color:var(--loss)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------- hero */
.phero{position:relative;padding:96px 0 44px;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(720px 440px at 50% 0,#000 25%,transparent 78%);
  mask-image:radial-gradient(720px 440px at 50% 0,#000 25%,transparent 78%);
}
.phero .wrap{position:relative}
.crumb{font-size:13px;color:var(--faint);margin-bottom:20px;font-weight:500}
.crumb a{color:var(--iris);font-weight:600}
.phero h1{font-size:clamp(36px,5.4vw,66px);font-weight:800;line-height:1.02;max-width:900px;letter-spacing:-.045em}
/* niente testo in gradiente: colore pieno, si legge e non sa di template */
.phero h1 em{font-style:normal;color:var(--iris)}
.phero p.sub{margin-top:22px;font-size:18.5px;color:var(--dim);max-width:620px;line-height:1.62}
.phero .cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.phero .fine{margin-top:16px;font-size:13px;color:var(--faint)}

/* ------------------------------------------------------------------ sezioni */
section{padding:88px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--iris)}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--iris);border-radius:2px}
h2{font-size:clamp(28px,3.7vw,44px);font-weight:800;margin:16px 0 14px;letter-spacing:-.04em}
.lead{color:var(--dim);max-width:660px;font-size:17px;line-height:1.62}
.center{text-align:center}
.center .lead{margin:0 auto}
.center .eyebrow::before{display:none}

/* ------------------------------------------------------------------- schede */
.fcard,.step,.plan,.p-vis,.am-item{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.fcard{padding:26px}
.fcard:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow-card)}
.fcard h3{font-size:17.5px;margin:14px 0 7px;font-weight:700}
.fcard p{color:var(--dim);font-size:14.5px;line-height:1.6}
.fcard .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--iris-soft);color:var(--iris);font-size:19px;border:1px solid var(--line)}
.fcard .go{color:var(--iris);font-size:13.5px;font-weight:650;margin-top:14px;display:inline-block}
.fcard .go:hover{text-decoration:underline;text-underline-offset:3px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:42px}
.bento .fcard{grid-column:span 2}
.bento .b-wide{grid-column:span 4}
.bento .b-tall{grid-row:span 2}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento .fcard,.bento .b-wide{grid-column:span 2}}
.bento .num{font-family:var(--disp);font-weight:800;font-size:42px;color:var(--iris);letter-spacing:-.04em}

/* passi */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:42px;counter-reset:step}
.step{padding:26px;counter-increment:step}
.step::after{content:counter(step,decimal-leading-zero);position:absolute;top:20px;right:22px;
  font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.step h3{font-size:16.5px;margin:2px 0 8px}
.step p{color:var(--dim);font-size:14.5px;line-height:1.6}

/* pilastri */
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:46px 0}
.pillar.flip .p-vis{order:-1}
@media(max-width:880px){.pillar{grid-template-columns:1fr;gap:36px}.pillar.flip .p-vis{order:0}}
.pillar h3{font-size:27px;font-weight:800;margin:12px 0;letter-spacing:-.035em}
.pillar>div>p{color:var(--dim)}
.pillar ul{list-style:none;margin-top:20px}
.pillar li{padding:7px 0 7px 30px;position:relative;color:var(--dim);font-size:15px}
.pillar li::before{content:"✓";position:absolute;left:0;top:8px;width:19px;height:19px;border-radius:6px;
  background:rgba(25,214,127,.14);color:var(--gain);font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center}
.p-vis{padding:20px;box-shadow:var(--shadow-card)}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:42px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:42px}

/* striscia del confronto costi */
.anchor-math{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-top:42px}
.am-item{flex:1;min-width:172px;padding:22px}
.am-item .what{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:1.1px;font-weight:700}
.am-item .who{font-size:14px;color:var(--dim);margin-top:5px}
.am-item .price{font-family:var(--disp);font-size:28px;font-weight:800;margin-top:12px;letter-spacing:-.035em}
.am-op{display:flex;align-items:center;font-family:var(--disp);font-size:22px;color:var(--faint)}
.am-item.sum{border-color:rgba(255,95,95,.4)}
.am-item.sum .price{color:var(--loss);text-decoration:line-through;text-decoration-thickness:2px}
.am-item.us{border-color:var(--gain);box-shadow:0 0 0 1px rgba(25,214,127,.18)}
.am-item.us .price{color:var(--gain)}

/* fascia numeri */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:46px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.band>div{padding:26px 24px;border-right:1px solid var(--line)}
.band>div:last-child{border-right:0}
.band b{display:block;font-family:var(--disp);font-size:31px;font-weight:800;color:var(--text);letter-spacing:-.04em}
.band span{font-size:13px;color:var(--faint)}
@media(max-width:700px){.band>div{border-right:0;border-bottom:1px solid var(--line)}}

/* ------------------------------------------------------------------ tabelle */
table.spec,table.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:34px;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.spec th,.spec td,.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec tr:last-child td,.spec tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.spec th{color:var(--faint);font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;width:220px}
.spec td{color:var(--dim)}
.spec td b{color:var(--text);font-weight:650}
.cmp thead th{color:var(--faint);font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;background:var(--panel2)}
.cmp thead th:nth-child(2){color:var(--iris)}
.cmp tbody tr:hover{background:var(--panel2)}
.cmp td.y{color:var(--gain);font-weight:650}
.cmp td.n{color:var(--loss)}
.cmp td.d{color:var(--dim)}
.tbl-scroll{overflow-x:auto}

/* ------------------------------------------------------------------ pricing */
.toggle{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:28px;gap:2px}
.toggle button{border:none;background:transparent;color:var(--dim);font-family:var(--body);font-weight:600;
  font-size:14px;padding:9px 20px;border-radius:999px;cursor:pointer;transition:.15s}
.toggle button:hover{color:var(--text)}
.toggle button.on{background:var(--iris);color:#fff;box-shadow:0 4px 14px var(--ring)}
.toggle .save{color:var(--gain);font-size:12px;margin-left:5px;font-weight:700}
.toggle button.on .save{color:#DFFBEE}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:40px;text-align:left}
.plan{padding:32px;display:flex;flex-direction:column}
.plan.hot{border-color:var(--iris);box-shadow:0 0 0 1px var(--iris),var(--shadow-card)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--iris);color:#fff;
  font-size:11.5px;font-weight:700;padding:5px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px var(--ring)}
.plan h3{font-size:13px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:1.4px}
.plan .p{font-family:var(--disp);font-size:50px;font-weight:800;margin:14px 0 2px;letter-spacing:-.05em}
.plan .p small{font-size:15px;color:var(--dim);font-weight:600;letter-spacing:-.01em}
.plan .bill{font-size:13px;color:var(--faint);min-height:18px}
.plan ul{list-style:none;margin:24px 0 28px;font-size:14.5px;color:var(--dim);flex:1}
.plan li{padding:6px 0 6px 28px;position:relative;line-height:1.55}
.plan li::before{content:"✓";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:6px;
  background:rgba(25,214,127,.14);color:var(--gain);font-weight:700;font-size:10px;
  display:flex;align-items:center;justify-content:center}
.plan li.no{color:var(--faint)}
.plan li.no::before{content:"–";background:var(--panel2);color:var(--faint)}

/* ---------------------------------------------------------------------- faq */
.faq{max-width:780px;margin:40px auto 0}
.faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--card);overflow:hidden;transition:border-color .18s}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--disp);font-size:16px;letter-spacing:-.02em;
  list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--iris);font-size:20px;line-height:1;font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq details[open]{border-color:var(--iris)}
.faq p{padding:0 22px 18px;color:var(--dim);font-size:15px;line-height:1.62}
.faq p a{color:var(--iris);font-weight:600}

/* --------------------------------------------------------------- cta finale */
.final{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:24px;
  padding:66px 40px;text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 50% -90px,var(--iris-soft),transparent 72%)}
.final::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--iris),transparent)}
.final h2,.final p,.final a{position:relative}
.final p{color:var(--dim);margin:14px auto 30px;max-width:500px}

/* ------------------------------------------------------------------- footer */
footer.site{border-top:1px solid var(--line);padding:52px 0 40px;color:var(--faint);font-size:13.5px;background:var(--ink2)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot a:hover{color:var(--text)}
.foot .cols{display:flex;gap:52px;flex-wrap:wrap}
.foot h4{font-family:var(--disp);color:var(--text);font-size:13px;margin-bottom:11px;font-weight:700;letter-spacing:-.01em}
.foot ul{list-style:none}
.foot li{padding:3px 0}
.legal{margin-top:34px;font-size:12.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:20px;line-height:1.7}

/* ----------------------------------------------------- prose (pagine legali) */
.prose{max-width:780px;margin:0 auto;padding:24px 0 40px}
.prose h1{font-size:clamp(30px,4vw,42px);margin-bottom:8px}
.prose .updated{color:var(--faint);font-size:13px;margin-bottom:36px}
.prose h2{font-size:21px;margin:36px 0 10px}
.prose h3{font-size:16.5px;margin:24px 0 8px}
.prose p,.prose li{color:var(--dim);font-size:15.5px;line-height:1.72}
.prose ul{margin:10px 0 10px 22px}
.prose a{color:var(--iris);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--dim)}
.prose th{color:var(--text);background:var(--panel2);font-weight:650}

/* ------------------------------------------------------------ banner cookie */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:560px;margin:0 auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:18px 20px;
  box-shadow:var(--shadow-pop);display:none}
.cookiebar.show{display:block}
.cookiebar p{font-size:13.5px;color:var(--dim);margin-bottom:12px}
.cookiebar p a{color:var(--iris);font-weight:600}
.cookiebar .row{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar .btn{padding:9px 16px;font-size:13.5px;border-radius:10px}

/* ------------------------------------------------------ comparsa allo scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* -------------------------------------------------------------------- varie */
.kick{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--cyan);font-weight:600;
  border:1px solid var(--line2);background:var(--panel2);border-radius:999px;padding:6px 15px;margin-bottom:22px}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gain);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.note{font-size:13px;color:var(--faint);line-height:1.65}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);font-size:12px;font-weight:600}
.badge.g{color:var(--gain);border-color:rgba(25,214,127,.4)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ================= mockup del prodotto: scuri anche di giorno =================
   Dentro i riquadri che simulano l'app ci sono grafici con colori pensati per
   fondo scuro. Su bianco diventerebbero illeggibili, e ridisegnarli per due
   temi sarebbe lavoro sprecato: restano scuri in entrambi, come fanno i siti
   SaaS seri quando mostrano uno screenshot del prodotto.

   Non è un colore forzato: si ridefiniscono i TOKEN dentro il contenitore, così
   tutto ciò che sta dentro (bordi, testo, righe) resta coerente da solo. */
:root[data-theme="light"] .p-vis,
:root[data-theme="light"] .frame,
:root[data-theme="light"] .mockup{
  --ink:#0B0D12; --ink2:#0F1218;
  --panel:#12151C; --panel2:#171B24;
  --card:#12151C; --card2:#181C26;
  --line:#232834; --line2:#2E3542;
  --text:#F3F5F9; --dim:#AEB6C6; --faint:#828B9E;
  background:var(--card);
  border-color:var(--line2);
  color:var(--text);
}