/* Font self-hosted (niente Google Fonts: meno richieste esterne, nessun dato utente a terzi) */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}

/* ═══════════════════════════════════════════════════════════════════════
   ARKEON - site.css
   Token da constants/theme.ts dell'app. Default = tema scuro; il chiaro è in
   [data-theme="light"]. Nessun colore scritto a mano fuori da questi blocchi.
   Raggio dei controlli: 10px (control) - il pill 999 non si usa.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#08090A; --card:#17191D; --card2:#212429; --line:#2C2F35; --line2:#212429;
  --text:#FAFAFB; --text2:#DCDFE3; --muted:#B5B9BF; --muted2:#86898F;
  --lime:#A3E635; --lime-dk:#84CC16; --lime-soft:#D3F58C; --lime-text:#A3E635; --accent-ink:#0E0F11;
  --nav-bg:rgba(8,9,10,.72); --nav-bg-on:rgba(8,9,10,.94); --menu-bg:rgba(8,9,10,.985);
  --veil:rgba(0,0,0,.82); --inset:rgba(0,0,0,.32); --hair:rgba(255,255,255,.07); --zebra:rgba(255,255,255,.025);
  --glow:rgba(163,230,53,.10); --glow2:rgba(163,230,53,.05);
  --tint:rgba(163,230,53,.07); --tint-2:rgba(163,230,53,.05); --tint-3:rgba(163,230,53,.10);
  --tint-line:rgba(163,230,53,.28); --hover-line:rgba(163,230,53,.35);
  --err-bg:rgba(224,73,72,.12); --err-line:rgba(224,73,72,.4); --err-tx:#ffb4b3;
  --pro-grad:linear-gradient(180deg,#0E0F11,#08090A);
  --bezel:linear-gradient(160deg,#2C2F35,#141618); --scr:#0E0F11;
  --stripe-a:#17191D; --stripe-b:#212429;
  --shadow:none; --shadow-lg:0 40px 90px -25px rgba(0,0,0,.6);
  --grain:.05;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386898F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ctrl:10px; --r:16px; --rs:12px; --r-sm:8px; --r-xl:20px; --r-xxl:28px;
  --maxw:1360px; --pad:clamp(20px,5vw,56px); --nav-pad:clamp(16px,2vw,24px); --nav-h:76px;
  --display:'Anton',Impact,system-ui,sans-serif;
  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="light"]{
  /* sfondo della pagina bianco, non grigio (utente 30/10/26) */
  --ink:#FFFFFF; --card:#FFFFFF; --card2:#E7E9EF; --line:#E3E5EA; --line2:#EAECEF;
  --text:#0E0F11; --text2:#26272B; --muted:#3F4146; --muted2:#5C5F65;
  --nav-bg:rgba(255,255,255,.8); --nav-bg-on:rgba(255,255,255,.94); --menu-bg:rgba(255,255,255,.99);
  --veil:rgba(14,15,17,.45); --inset:#F4F5F6; --hair:rgba(14,15,17,.06); --zebra:rgba(14,15,17,.025);
  --glow:rgba(163,230,53,.22); --glow2:rgba(163,230,53,.12);
  --tint:rgba(163,230,53,.14); --tint-2:rgba(163,230,53,.10); --tint-3:rgba(163,230,53,.18);
  --tint-line:rgba(132,204,22,.45); --hover-line:rgba(132,204,22,.55);
  --lime-text:#A3E635;   /* prova: un solo verde, lime anche su tema chiaro */
  --err-bg:#FEF2F2; --err-line:#FCA5A5; --err-tx:#B91C1C;
  --pro-grad:linear-gradient(180deg,#FFFFFF,#F1F2F5);
  --bezel:linear-gradient(160deg,#D4D8DE,#9AA0A8); --scr:#F4F5F6;
  --stripe-a:#E7E9EF; --stripe-b:#F4F5F6;
  --shadow:0 2px 16px rgba(0,0,32,.05); --shadow-lg:0 30px 70px -20px rgba(0,0,32,.22);
  --grain:.035;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5F65' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .3s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* ── base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{background:var(--ink);overflow-x:clip}
body{background:transparent;overflow-x:clip}
body{color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:color .3s}
html{transition:background-color .3s}
body::before{content:'';position:fixed;inset:-50%;z-index:9999;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}
svg.ic{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em}
svg.wm{display:block;aspect-ratio:4947/676;width:auto;height:20px;fill:currentColor;flex:none}
/* lettering PLUS, PRO, ARKY: stesso disegno dell'app, alti quanto le maiuscole che sostituiscono */
svg.lt{display:block;width:auto;height:1em;fill:currentColor;flex:none}
svg.lt-plus,svg.lt-free{aspect-ratio:3367/676}
svg.lt-pro{aspect-ratio:2632/676}
svg.lt-arky{aspect-ratio:3346/676}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--lime);color:var(--accent-ink)}
.skip{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--lime);color:var(--accent-ink);padding:10px 14px;border-radius:var(--ctrl)}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--lime-text);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap-n{max-width:900px;margin:0 auto;padding-inline:var(--pad)}
.wrap-m{max-width:1100px;margin:0 auto;padding-inline:var(--pad)}

/* ── tipografia ───────────────────────────────────────────────────── */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:.9;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(52px,8.4vw,128px)}
h1 em,h2 em,h3 em,.display em{font-style:normal;color:var(--lime-text)}
h2{font-size:clamp(34px,4.9vw,70px)}
h3{font-size:clamp(24px,2.8vw,38px);line-height:1}
h4{font-size:17px;font-weight:700;line-height:1.3}
p{color:var(--muted)}
.lead{font-size:clamp(17px,1.55vw,21px);max-width:60ch;line-height:1.55;text-wrap:pretty}
.lime{color:var(--lime-text)}
.mono{font-family:var(--mono);font-size:.85em;letter-spacing:.02em}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-text);font-weight:500;
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--lime-text)}
.eyebrow.nl::before{display:none}
.idx{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted2)}
.em{color:var(--text);font-weight:600}
.u{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tint-line)}
.u:hover{text-decoration-color:var(--lime-text)}
section,.sec{padding:clamp(72px,9vw,130px) 0;position:relative;scroll-margin-top:calc(var(--nav-h) + 12px)}
.sec-tight{padding:clamp(48px,6vw,90px) 0}
/* divisori fra le sezioni della home (utente 03/11/26): Il problema │ La piattaforma │ Intelligenza artificiale │
   Sport supportati. Una riga sottile larga quanto il testo, con lo stesso spazio sopra e sotto:
     …section.ruled-bottom
     ─────────────── hr.sec-rule (dentro .wrap)
     section.ruled-top…
   Prima piattaforma, AI e sport erano attaccate con padding-top:0 («fra le due c'era troppo spazio», 30/10/26). */
.sec-rule{display:block;height:0;margin:0;border:0;border-top:1px solid var(--line)}
section.ruled-bottom{padding-bottom:clamp(48px,6vw,80px)}
section.ruled-top{padding-top:clamp(48px,6vw,80px)}
.sec-head{max-width:70ch;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{margin:18px 0 22px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}
.rule{height:1px;background:var(--line);border:0}
.sec-idx{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:clamp(28px,4vw,48px)}
.sec-idx::after{content:'';flex:1;height:1px;background:var(--line)}
.sec-idx b{color:var(--lime-text);font-weight:500}

/* ── bottoni e controlli ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--ctrl);
  font-weight:600;font-size:15px;padding:14px 24px;transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s;white-space:nowrap;position:relative;overflow:hidden}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-lime{background:var(--lime);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08)}
.btn-lime:hover{background:var(--lime-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -12px rgba(163,230,53,.6)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--lime-text);color:var(--lime-text)}
.btn-dark{background:var(--text);color:var(--ink)}
.btn-sm{padding:0 32px;height:40px;font-size:14px}
.nav-signup{min-width:150px}
.btn-lg{padding:17px 30px;font-size:16px}
.btn .ic{font-size:18px;transition:transform .25s var(--ease)}
.btn:hover .ic.i-arrow,.btn:hover .ic:last-child:not(:first-child){transform:translateX(3px)}
.btn-block{width:100%}
.linkbtn{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--lime-text)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--lime-text)}
.arrow-link .ic{transition:transform .25s var(--ease)}
.arrow-link:hover .ic{transform:translateX(4px)}
.chip{border:1px solid var(--line);border-radius:var(--ctrl);padding:7px 13px;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;background:var(--card);white-space:nowrap}
.chip .ic{font-size:13px;color:var(--lime-text)}
.chip.on{border-color:var(--lime-text);color:var(--text);background:var(--tint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-block;background:var(--lime);color:var(--accent-ink);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-sm)}
.tag.ghost{background:var(--card2);color:var(--muted)}
.kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 7px;background:var(--card2)}

/* ── nav ──────────────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--lime);transition:width .1s linear}
.nav{position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;transition:background .3s,transform .45s var(--ease)}
/* la barra resta sempre trasparente: solo un velo di sfocatura, senza colore,
   sfumato in basso cosi non lascia un taglio netto sullo sfondo che ci scorre sotto */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)}
.nav.menu-open{background:var(--menu-bg)}
.nav.menu-open::before{display:none}
.nav.hide{transform:translateY(-100%)}
/* le voci del menu stanno a destra, vicino alla lingua (utente 30/10/26) */
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;height:var(--nav-h);padding-inline:var(--nav-pad)}
.logo{display:inline-flex;align-items:center;line-height:1;color:var(--text)}
.logo .wm{height:20px}
/* lockup ARKEON + SPORT TECHNOLOGY, come la welcome dell'app: lettering bianco sul fondo scuro, nero sul chiaro */
.logo .lockup{display:block;height:44px;width:auto}
.logo .lockup-l,[data-theme="light"] .logo .lockup-d{display:none}
[data-theme="light"] .logo .lockup-l{display:block}
.nav-links{display:flex;gap:4px;justify-self:end;font-size:14px;font-weight:500}
.nav-links a{display:inline-flex;align-items:center;height:40px;color:var(--muted);padding:0 12px;border-radius:var(--r-sm);transition:color .2s,background .2s;position:relative}
.nav-links a:hover{color:var(--text);background:var(--zebra)}
.nav-links a[aria-current]{color:var(--text)}
.nav-links a[aria-current]::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--lime);border-radius:2px}
@media(max-width:1140px){.nav-links{gap:0}.nav-links a{padding:0 8px}.nav-links a[aria-current]::after{left:8px;right:8px}}
/* sotto i 1030 i bottoni non ci starebbero piu: si passa al menu a panino */
@media(max-width:1030px){.nav-in{grid-template-columns:1fr auto}.nav-links{display:none}.nav-act .burger{display:inline-flex}.nav-act .lang-sel{display:none}}
.nav-act{display:flex;align-items:center;gap:10px;justify-self:end}
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--ctrl);padding:0 11px;height:40px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted);transition:.2s}
.lang .ic{font-size:16px}
.lang:hover{border-color:var(--lime-text);color:var(--lime-text)}
.lang-sel{position:relative;display:inline-flex}
.lang-sel .lang{cursor:pointer;background:none;gap:8px}
.lang .i-cv{font-size:13px;opacity:.65;transform:rotate(90deg);transition:transform .22s var(--ease)}
.lang-sel.open .lang{border-color:var(--lime-text);color:var(--lime-text)}
.lang-sel.open .lang .i-cv{transform:rotate(-90deg)}
.lang-menu[hidden]{display:none}   /* batte .foot ul{display:grid}, che altrimenti tiene aperto il menu nel footer */
.lang-sel.up .lang-menu{top:auto;bottom:calc(100% + 8px)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;z-index:120;list-style:none;
  padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--menu-bg);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:langIn .2s var(--ease)}
@keyframes langIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-menu a,.lang-menu span{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px;
  padding:0 12px;border-radius:var(--r-sm);font-size:14px;color:var(--text2);transition:background .18s,color .18s}
.lang-menu b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.lang-menu a:hover{background:var(--zebra);color:var(--text)}
.lang-menu .on{background:var(--tint);color:var(--text)}
.lang-menu .on b{color:var(--lime-text)}
.lang-menu .off{color:var(--muted2);cursor:not-allowed}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--ctrl);align-items:center;justify-content:center;flex:none;font-size:20px}
.burger .i-close{display:none}
.nav.menu-open .burger .i-open{display:none}
.nav.menu-open .burger .i-close{display:block}
.menu{position:fixed;inset:var(--nav-h) 0 auto 0;max-height:calc(100vh - var(--nav-h));overflow:auto;background:var(--menu-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
  padding:16px var(--nav-pad) 28px;display:none;z-index:99}
.nav.menu-open .menu{display:block;animation:menuIn .35s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu nav a{display:block;padding:14px 0;font-size:19px;font-weight:600;border-bottom:1px solid var(--line2)}
.menu nav a[aria-current]{color:var(--lime-text)}
.menu-foot{display:flex;gap:10px;align-items:center;margin-top:20px}
.menu-foot .btn{flex:1}
.menu-foot2{justify-content:space-between}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + 62px);padding-bottom:48px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.hero h1{margin:22px 0 26px}
.hero h1 em{font-style:normal;display:block;color:var(--lime-text)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:flex;gap:clamp(24px,4vw,52px);margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--display);font-size:34px;color:var(--lime-text);line-height:1}
.hero-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-top:8px}
.hero-visual{position:relative;display:flex;justify-content:center}
.float-card{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:12px 14px;box-shadow:var(--shadow-lg);
  font-size:12.5px;display:flex;gap:10px;align-items:center;z-index:4;animation:floaty 7s ease-in-out infinite}
.float-card .ic{font-size:20px;color:var(--lime-text)}
.float-card b{display:block;font-family:var(--mono);font-size:14px;color:var(--text)}
.float-card span{color:var(--muted2)}
.float-card.a{top:12%;left:-6%;animation-delay:-1s}
.float-card.b{bottom:16%;right:-8%;animation-delay:-3.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero delle pagine interne */
.hero-page{padding:clamp(140px,18vw,210px) 0 clamp(48px,6vw,90px);position:relative;overflow:hidden}
.hero-page h1{font-size:clamp(44px,6.6vw,100px);margin:18px 0 26px;max-width:16ch}
.hero-page .lead{font-size:clamp(18px,1.7vw,23px)}
.hero-page-row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:end}
.hero-page-aside{display:flex;flex-direction:column;gap:14px}

/* ── marquee ──────────────────────────────────────────────────────── */
.marquee{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--card);position:relative}
.marquee-t{display:flex;gap:48px;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
.marquee-t span{font-family:var(--display);font-size:20px;letter-spacing:.06em;color:var(--muted2);display:flex;align-items:center;gap:48px;white-space:nowrap}
.marquee-t span::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── telefono ─────────────────────────────────────────────────────── */
.phone{position:relative;width:clamp(240px,26vw,310px);margin:0 auto;aspect-ratio:9/19.5;border-radius:46px;background:var(--bezel);padding:9px;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--hair);transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease)}
.phone::before{content:'';position:absolute;left:-2px;top:18%;width:2px;height:9%;border-radius:2px;background:var(--line);box-shadow:0 34px 0 0 var(--line)}
.phone::after{content:'';position:absolute;right:-2px;top:24%;width:2px;height:13%;border-radius:2px;background:var(--line)}
.phone-scr{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--scr);isolation:isolate}
.phone-scr::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%);}
.phone-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:var(--scr);border-radius:100px;z-index:5;box-shadow:0 0 0 2px var(--scr)}

/* mock dell'app dentro al telefono */
.mk{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ink);color:var(--text);font-size:11px;line-height:1.35;padding:42px 12px 14px;gap:10px;overflow:hidden;font-family:var(--sans)}
.mk-top{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.mk-top b{display:inline-flex;align-items:center}
.mk-top b .wm{height:11px}
.mk-top b .lt{height:11px}
.mk-av{width:24px;height:24px;border-radius:50%;background:var(--card2);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;color:var(--text);flex:none}
.mk-av.lm{background:var(--lime);color:var(--accent-ink)}
.mk-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--rs);padding:10px}
.mk-row{display:flex;align-items:center;gap:8px}
.mk-row .grow{flex:1;min-width:0}
.mk-name{font-weight:700;font-size:11px;display:block}
.mk-sub{color:var(--muted2);font-size:9.5px;display:block}
.mk-txt{font-size:10.5px;color:var(--text2);margin:8px 0 6px}
.mk-met{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.mk-met div{background:var(--inset);border:1px solid var(--line2);border-radius:8px;padding:6px 7px}
.mk-met b{display:block;font-family:var(--mono);font-size:12px;color:var(--lime-text)}
.mk-met span{font-size:8.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em}
.mk-acts{display:flex;gap:12px;margin-top:8px;color:var(--muted2);font-size:9.5px}
.mk-acts .ic{font-size:12px;vertical-align:-2px}
.mk-tabs{display:flex;gap:6px;overflow:hidden}
.mk-tabs span{border:1px solid var(--line2);border-radius:var(--r-sm);padding:5px 9px;font-size:9.5px;color:var(--muted2);white-space:nowrap}
.mk-tabs span.on{background:var(--lime);color:var(--accent-ink);border-color:var(--lime);font-weight:600}
.mk-h{display:flex;justify-content:space-between;align-items:baseline}
.mk-h b{font-size:11.5px}.mk-h span{font-size:9.5px;color:var(--muted2)}
.mk-big{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.mk-big small{font-size:10px;color:var(--lime-text);font-weight:600;margin-left:5px}
.mk-chart{height:70px;margin-top:6px}
.mk-chart svg{width:100%;height:100%;overflow:visible}
.mk-list{display:flex;flex-direction:column;gap:6px}
.mk-li{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;background:var(--card);border:1px solid var(--line2);border-radius:8px;font-size:10px}
.mk-li b{font-family:var(--mono);font-weight:500;color:var(--lime-text)}
.mk-li span{color:var(--muted)}
.mk-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mk-week div{text-align:center;padding:6px 0;border-radius:8px;font-size:9px;color:var(--muted2);background:var(--card)}
.mk-week div b{display:block;font-family:var(--mono);font-size:12px;color:var(--text);font-weight:500}
.mk-week div.on{background:var(--lime);color:var(--accent-ink)}
.mk-week div.on b{color:var(--accent-ink)}
.mk-week div.dot{position:relative}
.mk-week div.dot::after{content:'';position:absolute;bottom:3px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--lime)}
.mk-ex{display:flex;justify-content:space-between;font-size:10px;padding:6px 0;border-bottom:1px solid var(--line2)}
.mk-ex:last-child{border:0}
.mk-ex b{font-weight:600;color:var(--text)}
.mk-ex span{font-family:var(--mono);color:var(--muted);font-size:9.5px}
.mk-bar{height:5px;border-radius:4px;background:var(--card2);overflow:hidden;margin-top:6px}
.mk-bar i{display:block;height:100%;background:var(--lime);width:0;transition:width 1.2s var(--ease) .3s}
.in .mk-bar i,.phone.in .mk-bar i{width:var(--w,60%)}
.mk-macro{display:flex;justify-content:space-between;font-size:9px;color:var(--muted2);margin-top:4px;font-family:var(--mono)}
.mk-btn{background:var(--lime);color:var(--accent-ink);border-radius:var(--ctrl);text-align:center;padding:9px;font-weight:700;font-size:10.5px;margin-top:auto}
.mk-status{font-family:var(--mono);font-size:8.5px;padding:3px 6px;border-radius:6px;background:var(--tint);color:var(--lime-text);border:1px solid var(--tint-line);white-space:nowrap}
.mk-status.w{background:var(--card2);color:var(--muted);border-color:var(--line)}
.mk-stories{display:flex;gap:8px;overflow:hidden}
.mk-stories div{width:36px;height:36px;border-radius:50%;flex:none;border:2px solid var(--lime);padding:2px}
.mk-stories div i{display:block;width:100%;height:100%;border-radius:50%;background:var(--card2)}
.mk-stories div.seen{border-color:var(--line)}
.mk-tabbar{margin-top:auto;display:flex;justify-content:space-around;border-top:1px solid var(--line2);padding-top:8px;color:var(--muted2);font-size:15px}
.mk-tabbar .on{color:var(--lime-text)}
.mk-map{height:96px;border-radius:var(--rs);background:
  radial-gradient(circle at 30% 40%,var(--tint-3),transparent 28%),radial-gradient(circle at 70% 60%,var(--tint),transparent 30%),
  repeating-linear-gradient(0deg,var(--line2) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 18px),var(--card);position:relative;overflow:hidden}
.mk-pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;background:var(--lime);transform:rotate(-45deg);border:2px solid var(--ink)}
.draw path.l{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.in .draw path.l,.phone.in .draw path.l{stroke-dashoffset:0}
.draw .a{opacity:0;transition:opacity 1s .9s}
.in .draw .a,.phone.in .draw .a{opacity:1}

/* ── rail laterale (home): la "storia" della pagina ─────────────── */
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .4s}
.rail.show{opacity:1}
.rail a{display:flex;align-items:center;gap:10px;color:var(--muted2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;height:14px}
.rail a i{width:14px;height:1px;background:var(--line);transition:.3s;flex:none}
.rail a span{opacity:0;transform:translateX(-6px);transition:.3s;white-space:nowrap}
.rail a.on i{width:26px;background:var(--lime)}
.rail a.on span,.rail:hover a span{opacity:1;transform:none}
.rail a.on{color:var(--text)}
@media(max-width:1500px){.rail{display:none}}

/* curva LogBook dietro all'hero */


/* barre: cosa resta al professionista */
.bars{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow)}
.bars h4{font-size:14px;margin-bottom:18px;color:var(--muted)}
.bar-row{display:grid;grid-template-columns:170px 1fr 90px;gap:14px;align-items:center;padding:9px 0;font-size:14px}
.bar-l{color:var(--muted)}
.bar-row.hl .bar-l{color:var(--text);font-weight:600}
.bar-t{height:14px;border-radius:6px;background:var(--card2);overflow:hidden}
.bar-t i{display:block;height:100%;width:0;background:var(--muted2);border-radius:6px;transition:width 1.2s var(--ease) .2s}
.bar-row.hl .bar-t i{background:var(--lime)}
.in .bar-t i{width:var(--w)}
.bar-v{text-align:right;color:var(--text);font-size:13px}

/* watermark numerico nelle sezioni sport */
/* fasce PRO */
.tiers.t4{grid-template-columns:repeat(2,1fr)}
.tier em small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted2);letter-spacing:.04em;margin-top:2px}
.tier em small span{display:inline;font-size:inherit;color:inherit}
.tierc .plan-price{min-height:0}
.tierc .plan-price b{font-size:40px}

/* ── foto (con arte generativa di riserva) ───────────────────────── */
.photo{position:relative;overflow:hidden;border-radius:var(--r-xl);background:radial-gradient(120% 80% at 20% 0%,var(--tint-3),transparent 60%),var(--card);margin:0;isolation:isolate}
.photo.r-16x9{aspect-ratio:16/9}.photo.r-21x9{aspect-ratio:21/9}.photo.r-3x4{aspect-ratio:3/4}
.photo-art{position:absolute;inset:0;opacity:.32;z-index:0}
.photo-art svg{width:100%;height:100%;display:block}
[data-theme="light"] .photo-art{opacity:.55}
.photo-img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:1;filter:saturate(.85) contrast(1.05);will-change:transform}
.photo-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,9,10,.35))}
[data-theme="light"] .photo-veil{background:linear-gradient(180deg,transparent,rgba(14,15,17,.06))}
.photo.has-img .photo-veil,[data-theme="light"] .photo.has-img .photo-veil{background:linear-gradient(180deg,rgba(8,9,10,.15),rgba(8,9,10,.55)),radial-gradient(60% 50% at 80% 20%,rgba(163,230,53,.10),transparent 70%)}
.photo-img{opacity:0;transition:opacity .8s}
.photo.has-img .photo-img{opacity:1}
.photo figcaption{position:absolute;left:20px;bottom:16px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,251,.8)}
.band{padding:0;position:relative;isolation:isolate}
/* banda che segue una sezione con fondo card: parte dallo stesso bianco, niente gradino */
.band-da-card{background:linear-gradient(180deg,var(--card) 0,transparent 38%)}
.band .band-photo{border-radius:0;aspect-ratio:auto;position:absolute;inset:0;z-index:0}
.band-in{position:relative;z-index:2;padding:clamp(90px,13vw,190px) var(--pad);text-align:center}
.band .bigq{margin:0 auto;font-size:clamp(26px,3.4vw,46px);max-width:26ch}
.band.has-img .bigq{color:#FAFAFB;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.band.has-img .idx{color:rgba(250,250,251,.8)}
.band.has-img .arrow-link{color:var(--lime)}
.band.has-img .band-in{padding:clamp(100px,14vw,200px) var(--pad)}
/* banda manifesto senza foto: sfuma sopra e sotto, alone lime al centro dietro la citazione */
.band .band-photo:not(.has-img){
  background:radial-gradient(62% 68% at 50% 50%,var(--tint-3),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
}
.band .band-photo:not(.has-img) .photo-veil{background:none}
.hero-photo{position:relative;isolation:isolate}
.hero-photo .hero-photo-bg{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;z-index:0}
.hero-photo .hero-page{position:relative;z-index:1;background:transparent}
.hero-photo .hero-page .glow{display:none}
/* pagina «Scarica l'app» (utente 04/11/26): un blocco unico a tutta pagina sullo sfondo a onde, TUTTO al centro
   (utente: «centra tutto a dovere»), in larghezza e in altezza: sotto il menu c'è lo stesso spazio sopra e sotto.
   Il sopratitolo ha la lineetta da tutti e due i lati, così sta in asse; il testo va a capo in righe pari
   (text-wrap:balance). Sotto, l'icona dell'app con i bottoni degli store, gli stessi del piè di pagina ma più grandi.
                 ── IPHONE E ANDROID ──
                       SCARICA
                       L'APP.
             Ti registri e ti alleni dall'app.
           Gratis per gli atleti, sempre; PLUS…
              [icona]  [App Store  ]
                       [Google Play] */
.dl-page{min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + clamp(32px,5vw,64px)) 0 clamp(32px,5vw,64px)}
.dl-page .wrap{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.dl-page .eyebrow::after{content:'';width:22px;height:1px;background:var(--lime-text)}
.dl-page h1{max-width:none;margin:18px 0 24px}
.dl-page .lead{max-width:40ch;text-wrap:balance}
.dl-stores{margin-top:clamp(32px,4vw,48px)}
.dl-stores .foot-app{gap:18px}
.dl-stores .foot-app-icon{width:120px;height:120px}
.dl-stores .foot-app-badges{gap:10px}
.dl-stores .foot-app-badges img{height:52px}
@media(max-width:420px){ .dl-stores .foot-app-icon{width:96px;height:96px} .dl-stores .foot-app-badges img{height:44px} }
.hero-photo.has-img .hero-page h1,.hero-photo.has-img .hero-page .lead{color:#FAFAFB;text-shadow:0 2px 24px rgba(0,0,0,.5)}

/* ── Arky in home: la chat com'è nell'app, con la mascotte (utente 28 e 30/10/26) ───────
   Titolo, testo e «Cosa non fa» a sinistra, la chat a destra (sotto i 700 px uno sotto l'altro).
   La chat copia il foglio dell'app (segno + ARKY + lampadina, saluto grigio, quattro righe
   coi nomi e le scritte dell'app). Sopra la chat, appoggiati sul bordo, il fumetto e la
   mascotte: lei spiega la riga scelta (tocco, o da sola ogni 5 s finché non tocchi).
     ┌───────────────────────────┐
     │ Mi dici sport, obiettivo… ├◣ ▄█▄   fumetto e mascotte sul bordo della chat
   ┌─┴───────────────────────────┴──┴─┴─┐
   │ A ARKY                          💡 │
   │ (Ciao, sono Arky…)                 │
   │ ▣ Preparami un piano…            › │  riga scelta: bordo lime
   │ ✕ AI Chef                        › │
   └────────────────────────────────────┘
          Tocca una riga: te la spiega…      */
/* le scritte a sinistra partono in alto, alla riga del fumetto (utente 30/10/26: al centro erano «troppo in basso») */
.ai-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(28px,5vw,80px);align-items:start}
.ai-copy .sec-head{margin-bottom:26px}
.ai-split .arky-demo{max-width:none;width:100%;margin:0}
@media(max-width:1100px){ .ai-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} .arky-say p,.arky-hello{font-size:14.5px} }
@media(max-width:700px){ .ai-split{grid-template-columns:minmax(0,1fr)} }
.arky-demo{--m:48px;max-width:560px;margin-inline:auto}
.arky-perch{position:relative;z-index:1;display:flex;align-items:flex-end;gap:14px;padding:0 30px 0 6px;margin-bottom:-3px}
/* stessa struttura, estetica rifinita (utente 06/11/26: «va bene così però volevo un miglioramento estetico»): righe chiare
   con l'icona in una tessera, il saluto come fumetto di chat. La riga scelta resta bianca, mai nera, coi bordi lime
   («non farlo nero quando lo selezioni, sempre bianco e bordi lime»).
       (▣) Preparami un piano…          ›     ← riga scelta: bordi lime, tessera lime
       (▢) AI Chef                      ›     ← le altre: filo sottile, tessera grigia */
.arky-sheet{position:relative;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:10px 14px 14px;box-shadow:var(--shadow-lg)}
.arky-grab{display:block;width:34px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.arky-head{display:flex;align-items:center;gap:9px;padding:0 6px 14px}
.arky-sign{width:24px;height:24px;flex:none;color:var(--text)}
.arky-head .lt{height:11px;color:var(--text)}
.arky-head .arky-bulb{margin-left:auto;font-size:20px;color:var(--muted2)}
.arky-hello{max-width:88%;margin:0 0 14px;padding:12px 15px;background:var(--inset);border-radius:18px 18px 18px 6px;font-size:14.5px;line-height:1.5;color:var(--text2)}
.arky-rows{display:grid;gap:6px}
.arky-row{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;padding:9px 14px 9px 9px;text-align:left;font:inherit;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .15s var(--ease)}
.arky-row>.ic:first-child{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:11px;background:var(--inset);color:var(--text);transition:background-color .28s var(--ease),color .28s var(--ease)}
.arky-row>.ic:last-child{font-size:15px;color:var(--muted2);transition:transform .25s var(--ease),color .28s var(--ease)}
.arky-row b{display:block;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.012em}
.arky-row small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--muted2);transition:color .28s var(--ease)}
.arky-row:hover{border-color:var(--hover-line)}
.arky-row:hover>.ic:last-child{transform:translateX(2px)}
.arky-row:active{transform:scale(.99)}
.arky-row.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.arky-row.on>.ic:first-child{background:var(--lime);color:var(--accent-ink)}
.arky-row.on>.ic:last-child{color:var(--text)}
.arky-row:focus-visible{outline:2px solid var(--lime-text);outline-offset:2px}
/* la mascotte: seduta sul bordo alto, in alto a destra */
.arky-mascot{flex:none;width:var(--m);height:var(--m)}
.arky-mascot svg{display:block;width:100%;height:100%;transform-origin:50% 100%}
.arky-mascot .eyes{transform-box:fill-box;transform-origin:center;animation:arky-blink 4.8s infinite}
.arky-mascot.hop svg{animation:arky-hop .6s var(--ease)}
@keyframes arky-blink{0%,93%,100%{transform:none}95%{transform:scaleY(.1)}}
@keyframes arky-hop{0%{transform:none}30%{transform:translateY(-18px) scale(.94,1.07)}62%{transform:translateY(0) scale(1.14,.84)}80%{transform:translateY(-4px) scale(.97,1.03)}100%{transform:none}}
/* il fumetto: i quattro testi nella stessa cella, si vede quello della riga scelta */
.arky-say{position:relative;flex:1;min-width:0;display:grid;margin-bottom:calc(var(--m) * .45);padding:13px 16px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.arky-say::before{content:'';position:absolute;right:-6px;bottom:16px;width:10px;height:10px;background:inherit;border-right:1px solid var(--line);border-top:1px solid var(--line);border-top-right-radius:3px;transform:rotate(45deg)}
.arky-say p{grid-area:1/1;margin:0;font-size:15px;line-height:1.5;color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s var(--ease);visibility:hidden}
.arky-say p.on{opacity:1;transform:none;visibility:visible}
.arky-tap{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted2)}
@media(max-width:420px){ .arky-perch{padding-right:18px;gap:10px} .arky-say{padding:12px 14px} .arky-say p{font-size:14.5px} .arky-sheet{padding:8px 10px 10px;border-radius:24px} .arky-row{grid-template-columns:36px minmax(0,1fr) 14px;gap:10px;padding:8px 11px 8px 8px} .arky-row>.ic:first-child{width:18px;height:18px;padding:9px;border-radius:10px} .arky-hello{max-width:92%} }
@media(prefers-reduced-motion:reduce){ .arky-mascot .eyes,.arky-mascot.hop svg{animation:none} .arky-say p{transition:none} }

/* ── hero: tre telefoni veri (immagine con sfondo trasparente) ───── */
.hero-phones{display:block;width:min(640px,100%);height:auto;margin:0 auto}
@media(max-width:980px){.hero-phones{width:min(520px,100%)}}

/* ── fatti (il problema) ─────────────────────────────────────────── */
/* il problema (utente 27/10/26): titolo e testo al centro, sotto i quattro punti due per riga */
/* ── il problema (utente 02/11/26, «le app che si uniscono»): tutto allineato a sinistra
   ┌───────────────────────────┐   ┌────────────────────────┐
   │ IL PROBLEMA               │   │  ▢      ▢       ▢      │  le «troppe app»: loghi finti in toni neutri, sparsi
   │ TROPPE APP. ZERO VISIONE. │   │     ▢      ▢     ▢     │  e storte che ondeggiano;
   │ Un atleta serio…          │   │  ▢     ▢    → [A]      │  scorrendo si uniscono
   └───────────────────────────┘   └────────────────────────┘  nell'icona di ARKEON
   01 Dati…      02 Prof…      03 Social…      04 Storia…      i quattro punti sotto, larghi
                                                                quanto la pagina (2x2 sotto i 1000 px)
   --p (0 sparse, 1 unite) lo scrive site.js mentre si scorre; con «Riduci movimento» restano sparse.
   Sotto i 700 px una colonna sola. (Prima un imbuto, «bruttissimo».) */
.problem-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:'head scatter' 'facts facts';gap:clamp(22px,3vw,40px) clamp(28px,5vw,80px);align-items:center}
.problem-head{grid-area:head}
.app-scatter{grid-area:scatter;align-self:end;top:clamp(10px,1.6vw,24px)}   /* un po' più in basso del titolo (02/11/26) */
.facts{grid-area:facts}
.problem-head{max-width:820px}
.problem-head .statement{margin:18px 0 22px}
/* i quattro punti più snelli (utente 02/11/26): scritte più piccole e meno spazio */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px clamp(16px,2.2vw,30px);margin:0;padding:0;list-style:none}   /* i punti vicini al titolo (utente 02/11/26: «avvicinare in su»), le icone scendono di poco */
.facts li{padding-top:10px;border-top:1px solid var(--line)}
.facts .idx{display:block;margin-bottom:3px;font-size:11px;color:var(--lime-text)}
.facts b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:3px}
.facts p{font-size:13px;line-height:1.45;color:var(--muted)}
.app-scatter{--p:0;position:relative;left:clamp(10px,2.4vw,36px);aspect-ratio:3/2;width:100%;max-width:520px;justify-self:center}   /* un po' più a destra (02/11/26) */
.app-tile{--s:clamp(46px,6vw,80px);position:absolute;
  left:calc(var(--x) * (1 - var(--p)) + 50% * var(--p));top:calc(var(--y) * (1 - var(--p)) + 50% * var(--p));
  width:var(--s);height:var(--s);translate:-50% -50%;rotate:calc(var(--r) * (1 - var(--p)));scale:calc(1 - .5 * var(--p));
  opacity:calc(1 - var(--p) * 1.15);display:grid;place-items:center;border-radius:23%;
  background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 8px 20px -8px rgba(0,0,32,.3),inset 0 1px 0 rgba(255,255,255,.22);color:var(--fg);font-size:calc(var(--s) * .46);
  animation:app-float calc(5s + var(--k) * .6s) ease-in-out calc(var(--k) * -.7s) infinite alternate}
.app-tile:nth-child(3n){--s:clamp(40px,4.8vw,62px);opacity:calc(.7 - var(--p) * .85)}
/* toni neutri del sito (utente 02/11/26: «colori neutri che stanno bene sul nostro sito») */
.t-d1{--c1:#3F4146;--c2:#0E0F11;--fg:#FAFAFB}
.t-d2{--c1:#6B6F76;--c2:#3F4146;--fg:#FAFAFB}
.t-d3{--c1:#9A9EA6;--c2:#5C5F65;--fg:#FFFFFF}
.t-l1{--c1:#FFFFFF;--c2:#E7E9EF;--fg:#26272B}
.t-l2{--c1:#F1F2F5;--c2:#D9DCE3;--fg:#3F4146}
.t-l3{--c1:#E3E5EA;--c2:#C9CDD5;--fg:#0E0F11}
.t-l1,.t-l2,.t-l3{box-shadow:0 8px 20px -10px rgba(0,0,32,.25),inset 0 0 0 1px rgba(14,15,17,.06)}
@keyframes app-float{to{transform:translateY(calc(-10px * (1 - var(--p))))}}
/* l'icona di ARKEON: compare al centro quando le app si sono unite */
.merge-icon{position:absolute;left:50%;top:50%;width:clamp(92px,11vw,132px);height:auto;border-radius:23%;
  translate:-50% -50%;scale:calc(.55 + .45 * var(--p));opacity:clamp(0,calc((var(--p) - .55) * 2.4),1);box-shadow:var(--shadow-lg)}
@media(max-width:1000px){ .facts{grid-template-columns:1fr 1fr} }
@media(max-width:700px){ .problem-split{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'scatter' 'facts'} .app-scatter{max-width:420px;left:0} }
@media(max-width:480px){ .facts{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .app-tile{animation:none} }

/* ── bordo che segue il cursore (Linear-style) ───────────────────── */
.glow-card{--mx:50%;--my:50%}
.glow-card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(163,230,53,.55),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glow-card:hover::after{opacity:1}

/* ── layout a due colonne / feature ───────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.rev>:first-child{order:2}
.split .phone{width:clamp(240px,24vw,300px)}
.split h3{font-size:clamp(30px,4vw,56px);margin:12px 0 18px}
.split h2{font-size:clamp(32px,4.2vw,60px)}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;margin-top:28px}
.feat li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.feat .ic{font-size:17px;color:var(--lime-text);flex:none;margin-top:4px}
.feat li b{color:var(--text);display:block;font-weight:600;margin-bottom:2px}
.feat.one{grid-template-columns:1fr}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:14px;margin-top:20px}
.kv dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-text);padding-top:3px}
.kv dd{color:var(--muted)}

.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px;box-shadow:var(--shadow),inset 0 1px 0 var(--hair);position:relative;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease)}
.card:hover{border-color:var(--hover-line);transform:translateY(-3px)}
.card .ico{font-size:26px;color:var(--lime-text);margin-bottom:18px;display:block}
.card h3,.card h4{font-size:17px;font-family:var(--sans);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3;margin-bottom:9px}
.card p{font-size:14.5px}
.card .num{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:12px;color:var(--muted2)}
.card.tint{background:linear-gradient(180deg,var(--tint),var(--card));border-color:var(--tint-line)}
/* ── sport in home (utente 30/10/26): a sinistra titolo e due righe di spiegazione (ferme nella
   pagina, non seguono lo scorrimento), a destra i sei sport chiusi; toccandone uno si apre il dettaglio.
   ┌ ⚑ Corsa                      ˅ ┐  solo il titolo, a sinistra e centrato in altezza
   └────────────────────────────────┘  (sottotitoli tolti il 03/11/26); aperto: vedi sotto
   Uno aperto alla volta (data-acc-group). Sotto i 700 px il titolo va sopra. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* stesse colonne della sezione Arky: gli sport larghi come la chat (utente 30/10/26) */
.sport-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(28px,5vw,80px);align-items:start}
.sport-copy .sec-head{margin-bottom:18px}
.sport-acc .acc-h{gap:14px;padding:18px 20px;min-height:82.5px}   /* alta come quando c'era il sottotitolo: 18 + 22,1 + 2 + 22,4 + 18 (utente 03/11/26) */
.sport-acc .acc-h .ico{font-size:22px;flex:none}
.sport-acc .sa-t{flex:1;min-width:0}   /* solo il titolo, a sinistra; senza sottotitolo sta al centro dell'altezza (utente 03/11/26) */
.sport-acc .sa-t b{display:block;font-size:17px;font-weight:700;line-height:1.3}
.sport-acc .acc-in{padding:0 20px 22px 56px}   /* il dettaglio parte sotto il titolo, non sotto l'icona: 20 + icona 22 + 14 (03/11/26) */
/* dentro uno sport, una pagina sola (utente 03/11/26, «fisarmonica più leggera»; prima quattro pagine
   da scorrere con pallini e frecce). Una sola misura per il testo, 14/1.55.
   ┌──────────────────────────────────┐
   │ ◎  Corsa                       ⌃ │
   │    Ogni chilometro racconta…     │  solo un racconto breve dello sport
   │    …la strada che hai fatto.     │  (04/11/26; prima frase e quattro punti)
   └──────────────────────────────────┘ */
.sport-acc .sa-p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.sport-other{margin-top:22px;max-width:46ch;font-size:14px;line-height:1.55;color:var(--muted)}
.sport-other b{color:var(--text)}
.sport-other .arrow-link{display:flex;width:fit-content;margin-top:8px}   /* su una riga sua: inline alzava l'ultima riga del testo (03/11/26) */
@media(max-width:1100px){ .sport-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} }
@media(max-width:700px){ .sport-split{grid-template-columns:minmax(0,1fr)} }
@media(max-width:360px){ .sport-acc .acc-in{padding-left:20px} }   /* solo sui telefoni più stretti il testo riprende tutta la larghezza */
.card.big{padding:clamp(28px,4vw,44px)}
.card.big h3{font-family:var(--display);font-size:clamp(26px,3vw,38px);text-transform:uppercase;font-weight:400}

/* statement editoriale */
.statement{font-family:var(--display);font-size:clamp(30px,4.2vw,58px);line-height:1;text-transform:uppercase;max-width:22ch;letter-spacing:.005em}
.statement em{font-style:normal;color:var(--lime-text)}
.bigq{font-size:clamp(22px,2.6vw,34px);line-height:1.35;font-weight:500;color:var(--text);max-width:30ch;text-wrap:pretty}
.bigq::before{content:'“';color:var(--lime-text);font-family:var(--display);font-size:1.6em;line-height:0;vertical-align:-.25em;margin-right:.1em}
.bigq::after{content:'”';color:var(--lime-text);font-family:var(--display);font-size:1.6em;line-height:0;vertical-align:-.25em;margin-left:.06em}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat b{display:block;font-family:var(--display);font-size:clamp(40px,5vw,72px);line-height:1;color:var(--lime-text)}
.stat span{display:block;font-size:14px;color:var(--muted);margin-top:8px;max-width:26ch}
.stat small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);display:block;margin-top:6px}

/* ── le quattro aree nel telefono (utente 27/10/26) ───────────────────
   Un telefono fermo con le schermate vere dell'app (vetrina /_dev/vetrina, persone inventate):
   le frecce < e > accanto al contatore 01 / 04, senza sfondo (utente 27/10/26), cambiano la
   schermata e il testo (site.js, data-hstory);
   dopo l'ultima si torna alla prima. Niente scorrimento legato alla pagina.
   Il bordo alto del telefono sta sulla riga del titolo «Quattro aree» (utente 27/10/26).
   ┌───────────────────────────────────────────────┐
   │ — LA PIATTAFORMA                              │
   │ QUATTRO AREE                        ┌─────┐   │
   │ UN SOLO STORICO                     │09:41│   │
   │ Home, LogBook, Planner…             │ ▯▯▯ │   │
   │ < 01 / 04 >                         │     │   │
   │ HOME  testo, chip, link →           └─────┘   │
   └───────────────────────────────────────────────┘
   Telefono come quelli in cima al sito: cornice scura, isola, ora 09:41, tasti sui lati. */
.hstory{position:relative}
.hstory-pin{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px)}
.hstory-device{display:flex}
.hstory-nav{display:flex;align-items:center;gap:4px;margin:0 0 14px -8px}
.hstory-nav .idx{min-width:7ch;text-align:center}
.hstory-arrow{flex:none;width:32px;height:32px;border:0;background:none;color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:opacity .15s,transform .15s}
.hstory-arrow:hover{opacity:.6}
.hstory-arrow:active{transform:scale(.9)}
.hstory-arrow .ic{font-size:20px}
.hstory-arrow .ic.back{transform:rotate(180deg)}
.hstory-body{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,110px);align-items:start}
.hstory-main .sec-head{margin-bottom:clamp(28px,3.4vw,44px)}
/* la riga dell'occhiello (28px) + il margine sopra il titolo (18px): il telefono parte dal titolo */
.hstory-device{margin-top:46px}
.hstory-texts{display:grid}
.hstory-text{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease);pointer-events:none}
.hstory-text.on{opacity:1;transform:none;pointer-events:auto}
.hstory-text h3{font-size:clamp(34px,4.2vw,58px);margin:0 0 8px}
.hstory-text .sub{color:var(--lime-text);font-weight:600;font-size:15px;margin-bottom:14px}
.hstory-text p{font-size:16px;max-width:52ch}
/* cornice: il telefono centrale dell'immagine in cima al sito (fatta con Higgsfield), ritagliato
   con lo schermo trasparente; sotto, nel foro, scorrono le schermate. Allargato di 32 px ripetendo la
   colonna centrale (solo cornice sopra e sotto, utente 27/10/26: «leggermente più largo»): ritaglio
   615x1227, schermo 559x1169 a 28 px dai bordi, angoli 73 px. --u = la larghezza di prima (583/615):
   isola, ora e tasti restano grandi come prima. Il lato destro del ritaglio era storto (il tasto
   laterale nero e il bordo più spesso, utente 28/10/26): è il sinistro specchiato, e il tasto a
   destra lo disegna ::after come quelli a sinistra. */
.dphone{--w:min(clamp(264px,24.3vw,316px),calc((100vh - var(--nav-h) - 140px) * .501));--u:calc(var(--w) * .948);position:relative;width:var(--w);aspect-ratio:615/1227;filter:drop-shadow(0 28px 34px rgba(0,0,0,.22))}
.dphone::before{content:'';position:absolute;left:.2%;top:17%;width:.85%;height:4.6%;border-radius:2px 0 0 2px;background:#2a2b2f;box-shadow:0 calc(var(--u) * .16) 0 0 #2a2b2f,0 calc(var(--u) * .31) 0 0 #2a2b2f}
.dphone::after{content:'';position:absolute;right:.2%;top:25%;width:.85%;height:8.6%;border-radius:0 2px 2px 0;background:#2a2b2f}
.dphone-frame{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;user-select:none}
.dphone-scr{position:absolute;left:4.553%;top:2.282%;width:90.894%;height:95.273%;border-radius:13.059% / 6.245%;overflow:hidden;background:#fff;display:flex;flex-direction:column;isolation:isolate}
.dphone-status{flex:none;height:calc(var(--u) * .148);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u) * .077) 0 calc(var(--u) * .12);color:#0E0F11}
.dphone-status b{font-family:var(--sans);font-weight:600;font-size:calc(var(--u) * .046);letter-spacing:-.01em}
.dphone-status span{display:inline-flex;align-items:center;gap:calc(var(--u) * .014)}
.dphone-status svg{height:calc(var(--u) * .031);width:auto;fill:currentColor}
.dphone-status svg:last-child{height:calc(var(--u) * .034)}
.dphone-track{flex:1;display:flex;min-height:0;transition:transform .45s var(--ease)}
.dphone-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.dphone-home{flex:none;height:calc(var(--u) * .07);position:relative;background:#fff}
.dphone-home::after{content:'';position:absolute;left:50%;bottom:calc(var(--u) * .02);transform:translateX(-50%);width:35%;height:calc(var(--u) * .011);border-radius:9px;background:#0E0F11}
.dphone-island{position:absolute;z-index:3;top:calc(var(--u) * .0274);left:50%;transform:translateX(-50%);width:calc(var(--u) * .2744);height:calc(var(--u) * .0926);border-radius:99px;background:#000}
@media(prefers-reduced-motion:reduce){ .dphone-track{transition:none} }

/* settimana tipo (timeline orizzontale) */

/* ── tabella ──────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);font-weight:500;background:var(--zebra)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--text);font-weight:600}
.tbl td{color:var(--muted)}
.tbl .ok{color:var(--lime-text);font-size:17px}
.tbl .no{color:var(--muted2);font-size:15px}
.tbl td.c,.tbl th.c{text-align:center}
.tbl .hl{background:var(--tint-2)}
.tbl tbody tr:hover td{background:var(--zebra)}
.tbl .grp td{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-text);background:var(--zebra);font-weight:500;padding-top:18px}

/* ── accordion / faq ──────────────────────────────────────────────── */
.acc{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.acc+.acc{margin-top:10px}
.acc-h{display:flex;align-items:center;gap:16px;padding:20px 24px;width:100%;text-align:left}
.acc-h .ico{font-size:24px;color:var(--lime-text)}
.acc-h b{font-size:17px;font-weight:600;flex:1;line-height:1.3}
.acc-h .arw{font-size:20px;color:var(--muted2);transition:transform .35s var(--ease);flex:none}
.acc.open .acc-h .arw{transform:rotate(180deg)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-in{padding:0 24px 24px;font-size:15px}
.acc-in p+p{margin-top:10px}
/* domande frequenti della pagina Contatti (utente 06/11/26): ricerca e una colonna centrata di righe sottili,
   invece delle schede su due colonne dentro i tab. */
.fq-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(40px,5vw,72px)}
.fq-head h2{margin:0 0 clamp(24px,3vw,36px)}
.fq-search{position:relative;width:min(640px,100%)}
.fq-search>.ic{position:absolute;left:20px;top:50%;translate:0 -50%;font-size:20px;color:var(--muted2);pointer-events:none}
.fq-search input{width:100%;height:60px;padding:0 56px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);font-size:16px;font-weight:500;color:var(--text);transition:border-color .2s}
.fq-search input::placeholder{color:var(--muted2)}
.fq-search input::-webkit-search-cancel-button{display:none}
.fq-search input:focus{outline:0;border-color:var(--text)}
.fq-clear{position:absolute;right:10px;top:50%;translate:0 -50%;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ctrl);font-size:18px;color:var(--muted2);transition:color .15s}
.fq-clear:hover{color:var(--text)}
.fq-count{margin-top:14px;font-size:14px;color:var(--muted2)}
.fq [hidden]{display:none!important}
.fq-body{max-width:820px;margin-inline:auto}
.fq-group{padding:0;scroll-margin-top:calc(var(--nav-h) + 24px)}
.fq-group+.fq-group{margin-top:clamp(48px,6vw,80px)}
.fq-group h3{font-size:clamp(26px,2.6vw,36px);margin-bottom:14px;text-align:center}
.fq .acc{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;scroll-margin-top:calc(var(--nav-h) + 24px)}
.fq .acc+.acc{margin-top:0}
.fq .acc-h{gap:20px;padding:20px 0;transition:opacity .15s}
.fq .acc-h:hover{opacity:.7}
.fq .acc-h b{font-size:17px;line-height:1.35}
.fq .acc-h .arw{font-size:22px;color:var(--text)}
.fq .acc.open .acc-h .arw{transform:rotate(45deg)}
.fq .acc-in{padding:0 42px 24px 0;font-size:15.5px;line-height:1.65}
.fq .acc-in p{max-width:68ch}
.fq .acc-in a{font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.fq-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(40px,6vw,72px) 0;text-align:center}
.fq-empty p{font-size:17px;color:var(--text)}
@media(max-width:860px){ .fq .acc-in{padding-right:0} }
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;align-items:start}
.faq-cols .acc+.acc{margin-top:0}
.faq-cols>div{display:flex;flex-direction:column;gap:10px}

/* ── tabs ─────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;border:1px solid var(--line);border-radius:var(--ctrl);padding:4px;background:var(--card);width:max-content;max-width:100%;overflow:auto;position:relative}
.tabs button{padding:9px 16px;border-radius:calc(var(--ctrl) - 3px);font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;position:relative;z-index:1;transition:color .2s}
.tabs button[aria-selected="true"]{color:var(--accent-ink)}
.tabs .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--lime);border-radius:calc(var(--ctrl) - 3px);transition:left .35s var(--ease),width .35s var(--ease)}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* sport: layout a indice laterale */

/* ── prezzi ───────────────────────────────────────────────────────── */
.billing{display:inline-flex;align-items:center;gap:12px;margin:10px 0 34px;font-size:14px;color:var(--muted)}
.billing .sw{width:48px;height:28px;border-radius:var(--ctrl);border:1px solid var(--line);background:var(--card2);position:relative;transition:.2s}
.billing .sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:7px;background:var(--text);transition:left .25s var(--ease),background .2s}
.billing.on .sw{background:var(--lime);border-color:var(--lime)}
.billing.on .sw i{left:23px;background:var(--accent-ink)}
.billing b{color:var(--text)}
.billing .save{font-family:var(--mono);font-size:11px;color:var(--lime-text);border:1px solid var(--tint-line);border-radius:6px;padding:2px 7px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .4s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-4px);border-color:var(--hover-line)}
.plan.hi{border-color:var(--lime-text);background:linear-gradient(180deg,var(--tint),var(--card))}
.plan .tag{position:absolute;top:-12px;left:30px}
.plan-name{font-family:var(--display);font-size:26px;letter-spacing:.04em}
.plan-name:has(.lt){display:flex;align-items:center;min-height:1.6em}  /* alta come la riga di «Free»: i prezzi restano allineati */
.plan-name .lt{height:19px;color:var(--lime-text)}
.plan-name .lt-free{color:var(--text)}  /* FREE in inchiostro, PLUS e PRO lime */
.plan-price{display:flex;align-items:baseline;gap:6px;min-height:52px}
.plan-price b{font-family:var(--display);font-size:50px;line-height:1;transition:opacity .2s}
.plan-price i{font-style:normal;font-size:14px;color:var(--muted2)}
.plan-price i:first-child{font-size:24px;color:var(--text);font-family:var(--display)}
.plan-sub{font-size:13px;color:var(--muted2);margin-top:-10px;min-height:20px}
.plan ul{display:grid;gap:10px;font-size:14px;color:var(--muted)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .ic{font-size:15px;color:var(--lime-text);flex:none;margin-top:4px}
.plan li.no{color:var(--muted2)}
.plan li.no .ic{color:var(--muted2)}
.plan .btn{width:100%;margin-top:auto}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.tier{border:1px solid var(--line2);border-radius:var(--rs);padding:16px;background:var(--zebra);cursor:pointer;transition:.2s}
.tier.on{border-color:var(--lime-text);background:var(--tint)}
.tier b{display:block;font-family:var(--display);font-size:19px;letter-spacing:.04em;white-space:nowrap}
.tier span{font-size:12.5px;color:var(--muted2);display:block;line-height:1.35}
.tier em{font-style:normal;display:block;font-size:21px;font-weight:700;margin-top:8px;white-space:nowrap}
.tier em span{display:inline;font-size:inherit;color:inherit}

/* ── CTA band ─────────────────────────────────────────────────────── */
.cta-band{border-radius:var(--r-xxl);background:var(--lime);color:var(--accent-ink);padding:clamp(40px,6vw,80px);padding-bottom:calc(clamp(40px,6vw,80px) + 84px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}
.cta-band h2{color:var(--accent-ink);font-size:clamp(36px,4.8vw,70px)}
.cta-band p{color:rgba(14,15,17,.75);font-size:17px;max-width:50ch;margin-top:16px}
.cta-band .acts{display:flex;flex-direction:column;gap:12px;align-items:flex-end;align-self:start}
.cta-band .acts .btn{min-width:260px}
.cta-band .btn-dark{background:#0E0F11;color:#FAFAFB}
.cta-band .btn-dark:hover{background:#26272B}
.cta-band .btn-out{border:1px solid rgba(14,15,17,.35);color:#0E0F11}
.cta-band .btn-out:hover{border-color:#0E0F11}
.band-mark{position:absolute;right:-2%;bottom:-1%;width:min(74%,880px);pointer-events:none;z-index:0}
.band-mark .wm{width:100%;height:auto;fill:none;stroke:rgba(14,15,17,.22);stroke-width:1.5}
.cta-band>*:not(.band-mark){position:relative;z-index:1}

/* ── steps / timeline / quote ─────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{border-top:2px solid var(--line);padding-top:18px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--lime-text);letter-spacing:.1em;display:block;margin-bottom:12px}
.step h4{margin-bottom:8px}
.step p{font-size:14.5px}
.steps.v{grid-template-columns:1fr;gap:0}
.steps.v .step{border-top:0;border-left:2px solid var(--line);padding:0 0 28px 26px}
.steps.v .step::before{position:absolute;left:-7px;top:0;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--lime);content:'';margin:0}
/* roadmap: elenco editoriale, una riga per tappa, niente grafica */
.timeline{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.timeline>div{display:grid;grid-template-columns:200px minmax(0,1fr) auto;column-gap:40px;row-gap:8px;align-items:start;padding:30px 0}
.timeline>div+div{border-top:1px solid var(--line)}
.timeline .when{grid-row:1/span 2;padding-top:5px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);white-space:nowrap}
.timeline>div.now .when{color:var(--lime-text)}
.timeline h4{grid-column:2;font-size:18px;font-weight:600;line-height:1.3;margin:0;color:var(--text)}
.timeline p{grid-column:2;font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0}
.timeline .stato{grid-column:3;grid-row:1;padding-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.timeline .stato::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:9px;vertical-align:1px}
.quote{border-left:2px solid var(--lime);padding:6px 0 6px 26px;font-size:clamp(20px,2.2vw,28px);line-height:1.35;color:var(--text);font-weight:500;max-width:52ch;text-wrap:balance}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted2);margin-top:12px;letter-spacing:.06em}
/* manifesto aperto nella home (utente 27/10/26): si apre e si chiude sotto la fascia */
.mf-toggle .ic{transition:transform .3s var(--ease)}
.mf-toggle[aria-expanded="true"] .ic,.mf-toggle[aria-expanded="true"]:hover .ic{transform:rotate(180deg)}
.mf-toggle:hover .ic{transform:translateY(2px)}
.mf-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);scroll-margin-top:var(--nav-h)}
.mf-panel.open{grid-template-rows:1fr}
.mf-inner{overflow:hidden;min-height:0}
/* il testo si apre dentro la fascia della citazione: stesso sfondo, colonna e testo al centro (utente 27/10/26) */
.mf-body{max-width:62ch;margin:0 auto;padding-top:clamp(30px,4vw,48px);text-align:center}
.mf-body .prose{max-width:none}
.mf-open-row{margin-top:26px}
.mf-close-row{margin-top:clamp(28px,3.4vw,40px)}
.band.has-img .mf-body p{color:rgba(250,250,251,.85)}
.band.has-img .mf-body p.first{color:#FAFAFB}
@media(prefers-reduced-motion:reduce){ .mf-panel{transition:none} }
.prose{max-width:68ch}
.prose p{font-size:clamp(16px,1.35vw,18.5px);line-height:1.7;color:var(--muted);text-wrap:pretty}
.prose p+p{margin-top:1.2em}
.prose p.first{color:var(--text);font-size:clamp(19px,1.8vw,24px);font-weight:500;line-height:1.5}
.prose h2{font-size:clamp(30px,4vw,52px);margin:2.2em 0 .6em}
.prose h3{font-family:var(--sans);text-transform:none;font-weight:700;font-size:20px;margin:2em 0 .6em;letter-spacing:0}
.prose ul{list-style:disc;padding-left:1.3em;color:var(--muted);font-size:16px}
.prose li+li{margin-top:.5em}
.prose strong{color:var(--text)}
/* informativa privacy: sintesi e indice (testo dell'app, src/app-legal.js) */
/* Termini e Privacy: la colonna di testo centrata nella pagina, col titolo sullo stesso bordo; le righe restano a
   sinistra dentro la colonna, così un testo lungo si legge (utente 06/11/26: «allinea al centro i testi, ora sono un
   po' spostati verso sinistra»). Prima il contenitore era largo 900 e il testo 68ch, tutto a sinistra. */
.legal-page .wrap-n{max-width:calc(68ch + 2 * var(--pad))}
/* «centra anche i titoli» (utente 06/11/26): titolo della pagina, data e titoli delle sezioni. I sottotitoli interni
   (h4) restano a sinistra col loro testo: sono 134 nell'informativa, e centrati si staccherebbero dalle righe. */
.legal-page .hero-page .wrap-n{display:flex;flex-direction:column;align-items:center;text-align:center}
.legal-page .eyebrow::after{content:'';width:22px;height:1px;background:var(--lime-text)}
.legal-page .hero-page h1{margin-inline:auto}
.legal-doc h3{scroll-margin-top:96px;text-align:center;text-wrap:balance}
.legal-doc h4{font-family:var(--sans);font-size:17px;font-weight:700;margin:1.6em 0 .4em;color:var(--text)}
.legal-doc p+p,.legal-doc ul+p,.legal-doc p+ul{margin-top:.8em}
.legal-box{border:1px solid var(--line);border-radius:var(--rs);padding:18px 20px;margin:28px 0}
.legal-kick{font-size:11px!important;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--text)!important;margin:0 0 .6em}
.legal-toc ul{list-style:none;padding-left:0}
.legal-toc li+li{margin-top:.35em}
.legal-toc a{color:var(--text);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.drop::first-letter{font-family:var(--display);font-size:4.2em;float:left;line-height:.8;margin:.08em .12em 0 0;color:var(--lime-text)}
/* avvisi senza lime (utente 30/10/26): fondo della card, bordo grigio, icona grigia */
.notice{border:1px solid var(--line);background:var(--card);border-radius:var(--rs);padding:16px 18px;font-size:14px;display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.notice .ic{font-size:20px;color:var(--muted2);flex:none;margin-top:2px}
.notice b{color:var(--text)}
.legal-todo{background:var(--err-bg);border:1px dashed var(--err-line);color:var(--err-tx);padding:2px 6px;border-radius:6px;font-family:var(--mono);font-size:.85em}

/* ── form ─────────────────────────────────────────────────────────── */
.hint{font-size:12.5px;color:var(--muted2);line-height:1.5}
/* pagina Contatti tutta al centro (utente 06/11/26), senza modulo: intestazione in asse, tre schede in fila,
   Instagram sotto, fascia finale in asse. Le domande frequenti non passano di qui.
   ┌ ✉ Email     ┐ ┌ ◉ Ambassador ┐ ┌ ▤ Stampa    ┐
   │ info@…      │ │ Professionisti│ │ Materiali…  │   icona sopra, testo centrato
   └─────────────┘ └──────────────┘ └─────────────┘ */
.contact-page .hero-page .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.contact-page .eyebrow::after{content:'';width:22px;height:1px;background:var(--lime-text)}
.contact-page .hero-page h1{margin-inline:auto}
.contact-page .hero-page .lead{max-width:52ch;text-wrap:balance}
.contact-links{padding-top:0}
.contact-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.contact-list>a,.contact-list>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 22px;text-align:center;border:1px solid var(--line2);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .2s}
.contact-list>a:hover{border-color:var(--hover-line)}
.contact-list .ic{font-size:24px;color:var(--lime-text);margin-bottom:6px}
.contact-list b{font-size:16px}
.contact-list span{font-size:14px;line-height:1.5;color:var(--muted2);text-wrap:balance}
.contact-list .contact-mail{font-weight:600;color:var(--text)}
.contact-social{justify-content:center;margin-top:26px}
.contact-page .cta-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.contact-page .cta-band p{margin-inline:auto;text-wrap:balance}
.contact-page .cta-band .acts{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;align-self:center}
@media(max-width:820px){ .contact-list{grid-template-columns:minmax(0,1fr)} }
@media(max-width:560px){ .contact-page .cta-band .acts .btn{width:100%;min-width:0} }

/* ── footer ───────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:72px 0 36px;background:var(--card)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-grid-3{grid-template-columns:2fr 1fr 1fr}   /* senza la colonna «Piani», finché la pagina Prezzi è spenta */
.foot-brand p{font-size:14.5px;margin:16px 0 20px;max-width:34ch}
.foot-social{display:flex;gap:8px}
.foot-social a{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--ctrl);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;transition:.2s}
.foot-social a:hover{border-color:var(--lime-text);color:var(--lime-text);transform:translateY(-2px)}
/* Instagram largo quanto icona dell'app + bottoni degli store: la colonna e' larga quanto il piu' largo dei due */
.foot-get{display:grid;gap:24px;width:max-content;max-width:100%}
.foot-social a.foot-ig{width:100%;gap:8px;padding:0 14px 0 12px;font-size:14px}
.foot-ig .ic{font-size:18px}
/* icona dell'app accanto ai bottoni degli store: alta quanto i due bottoni uno sopra l'altro */
.foot-app{display:flex;align-items:center;gap:12px}
.foot-app-icon{width:92px;height:92px;border-radius:22.4%;border:1px solid var(--line);flex:none}
.foot-app-badges{display:grid;gap:8px}
.foot-app-badges img{display:block;height:42px;width:auto}
.foot-app-badges a{transition:opacity .2s}
.foot-app-badges a:hover{opacity:.85}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:16px;font-weight:500}
.foot ul{display:grid;gap:10px;font-size:14px}
.foot ul a{color:var(--muted);transition:color .2s}
.foot ul a:hover{color:var(--lime-text)}
.foot-btm{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:52px;padding:24px var(--nav-pad) 0;border-top:1px solid var(--line2);font-size:13px;color:var(--muted2)}
.foot-lang{display:inline-flex;align-items:center;gap:14px}
.foot-lang a:hover,.foot-lang button:hover{color:var(--lime-text)}

/* ── animazioni di ingresso ───────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.05s}[data-stagger].in>*:nth-child(2){transition-delay:.13s}
[data-stagger].in>*:nth-child(3){transition-delay:.21s}[data-stagger].in>*:nth-child(4){transition-delay:.29s}
[data-stagger].in>*:nth-child(5){transition-delay:.37s}[data-stagger].in>*:nth-child(6){transition-delay:.45s}
[data-stagger].in>*:nth-child(7){transition-delay:.53s}[data-stagger].in>*:nth-child(8){transition-delay:.61s}
[data-stagger].in>*:nth-child(n+9){transition-delay:.7s}
.words .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.32em 0 .1em;margin:-.32em 0 -.1em}
.words .w>span{display:inline-block;transform:translateY(120%);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*.07s)}
.words.in .w>span{transform:none}
.line-in{position:relative;overflow:hidden}
.line-in::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(1);transform-origin:right;transition:transform .9s var(--ease) .1s}
.line-in.in::after{transform:scaleX(0)}
.count{font-variant-numeric:tabular-nums}
.hero [data-reveal]{transition-delay:calc(var(--d,0s) + .15s)}

/* ── responsive ───────────────────────────────────────────────────── */
@media(max-width:1180px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .timeline>div{grid-template-columns:150px minmax(0,1fr) auto;column-gap:28px}
}
@media(max-width:980px){
  .hero-grid,.split,.split.rev,.hstory-body,.hero-page-row,.cta-band{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .hstory-main{display:contents}
  .hstory-main .sec-head{order:-2;margin-bottom:0}
  .hstory-body{gap:14px}
  .hstory-device{order:-1;justify-content:center;margin-top:0}
  .dphone{--w:min(264px,calc(100vw - 2 * var(--pad)))}
  .g4{grid-template-columns:repeat(2,1fr)}
  .plans,.g3{grid-template-columns:1fr}
  .bar-row{grid-template-columns:120px 1fr 80px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero .hero-visual{margin-top:40px}
  .stat-row{grid-template-columns:1fr 1fr}
        .faq-cols{grid-template-columns:1fr}
  .band-mark{display:none}
  .cta-band{padding-bottom:clamp(40px,6vw,80px)}
  .cta-band .acts{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .cta-band .acts .btn{min-width:0}
  .hero-page-aside{flex-direction:row;flex-wrap:wrap}
  .feat{grid-template-columns:1fr}
}
@media(max-width:720px){
  .facts{grid-template-columns:1fr}
  .hero-stats{gap:18px 28px}
  .hero-stats b{font-size:28px}
    .hero-stats{flex-wrap:wrap}
}
@media(max-width:560px){
  .g4,.g2,.tiers,.foot-grid,.steps,.timeline,.stat-row{grid-template-columns:1fr}
  .timeline>div{grid-template-columns:1fr;row-gap:6px;padding:24px 0}
  .timeline .when{grid-row:auto;padding-top:0}
  .timeline h4,.timeline p{grid-column:1}
  .timeline .stato{grid-column:1;grid-row:auto;padding-top:2px}
  .tiers.t4{grid-template-columns:1fr 1fr;gap:8px}
  .tiers.t4 .tier{padding:12px}
  .tiers.t4 .tier em{font-size:18px}
    .float-card{display:none}
  .hero{padding-top:110px}
  .card{padding:22px}
  .tabs{width:100%}
  .tabs button{flex:1}
  .nav-signup{display:inline-flex;min-width:0;padding:0 18px}  /* col bottone del menu accanto deve stare nello schermo */
  .kv{grid-template-columns:1fr;gap:4px 0}
  .kv dd{margin-bottom:10px}
}
/* il tasto in alto resta su ogni telefono (utente 06/11/26: «non vedo tasto per scaricare l'app»): si stringono logo e
   tasto. Serve anche al menu: a 375 px, in spagnolo, francese e olandese, la scritta lunga lo spingeva fuori dallo schermo. */
@media(max-width:430px){ .nav-in{gap:8px} .nav-act{gap:6px} .nav-signup{padding:0 12px;font-size:13px;white-space:nowrap} }
@media(max-width:374px){ .logo .wm{height:17px} }
@media(max-width:350px){ .logo .wm{height:13px} .nav-signup{padding:0 10px;font-size:12.5px} }
/* TELEFONO: titoli e scritte al centro, SOLO qui (utente 06/11/26: «per telefono, e solo per telefono, dobbiamo centrare
   le scritte i titoli»; dei testi lunghi: «centra anche quelli»); sopra i 700 px non cambia niente. Restano a sinistra
   solo le righe da toccare con la freccia a destra (domande, sport, Arky), i fumetti della chat di esempio. La spunta del listino resta in colonna: al centro va il blocco intero. */
@media(max-width:700px){
  h1,h2,h3,.statement{text-align:center}
  .eyebrow{justify-content:center;text-align:center}
  .eyebrow::after{content:'';width:22px;height:1px;background:var(--lime-text)}
  .eyebrow.nl::after{display:none}
  /* in cima alla home l'etichetta va su due righe: i trattini resterebbero lontani, ai bordi. E il secondo a capo
     del testo lascerebbe righe cortissime: resta solo quello dopo la prima frase. */
  .hero .eyebrow::before,.hero .eyebrow::after{display:none}
  .hero .lead br:last-of-type{display:none}

  .hero-grid>div:first-child,.problem-head,.sec-head,.hero-page .wrap,.hero-page .wrap-n,.hstory-copy,.sport-copy,.facts li,.plan,.foot-brand,.foot-grid>div,.mf-open-row{text-align:center}
  .sec-head,.lead,.statement,.bigq,.hero-page h1,.hstory-text p,.sport-other,.foot-brand p,.foot-get{margin-inline:auto}
  .hero-cta,.hstory-nav,.plan-price,.plan-name:has(.lt),.foot-btm{justify-content:center}
  .hstory-nav{margin-left:0}
  .sport-other .arrow-link{margin-inline:auto}

  .plan .tag{left:50%;transform:translateX(-50%)}
  .plan ul{width:fit-content;margin-inline:auto;text-align:left}

  .cta-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .cta-band p{margin-inline:auto}
  .cta-band .acts{width:100%;align-items:center;align-self:center}
  .cta-band .acts .btn{width:100%;max-width:320px;min-width:0}

  .foot-brand .logo{justify-content:center}
  /* Prodotto e Azienda affiancati (utente 06/11/26: «questi da telefono mettili su 2 colonne»), il marchio sopra su tutta la riga */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .foot-brand{grid-column:1/-1}
  .foot ul{justify-items:center}
  .foot ul a{overflow-wrap:anywhere}
  /* il selettore della lingua in fondo alla pagina no (utente 06/11/26): su telefono resta quello nel menu ☰ */
  .foot-lang{display:none}
  .foot-btm{text-align:center}
  .legal-doc h4,.legal-kick{text-align:center}

  /* testi lunghi: Termini, Privacy, risposte, racconti degli sport. Il pallino di un elenco centrato resterebbe
     appeso all'inizio della prima riga, quindi su telefono niente pallini: le voci si staccano con lo spazio. */
  .prose,.acc-in{text-align:center}
  .prose p,.acc-in p{margin-inline:auto}
  .sport-acc .acc-in{padding-left:20px}   /* il rientro sotto il titolo spostava il testo centrato a destra */
  .prose ul{list-style:none;padding-left:0}
  .prose li+li{margin-top:.9em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],[data-stagger]>*,.words .w>span{opacity:1!important;transform:none!important}
  body::before{display:none}
}