/* ARKsite — home: il titolo sopra il plastico del Colosseo che ruota */
:root{
  --bg:#ecebe6; --ink:#1b1b1a; --ink-2:#55554f; --ink-3:#8f8f89;
  --glass:rgba(255,255,255,.62); --line:rgba(27,27,26,.10);
  --acc:#1a1a1a; --acc-ink:#fff;
  --veil:236,235,230;
  --sans:"Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111111; --ink:#ededeb; --ink-2:#b3b3ae; --ink-3:#77776f;
    --glass:rgba(26,26,26,.6); --line:rgba(255,255,255,.10);
    --acc:#ededeb; --acc-ink:#121212; --veil:17,17,17;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased}
body{overflow:hidden}
#scene{position:fixed; inset:0; width:100%; height:100%; display:block}
/* un velo morbido dietro il titolo: il modello resta visibile ai bordi */
.veil{position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 46% 38% at 50% 46%, rgba(var(--veil),.78) 0%, rgba(var(--veil),.45) 45%, rgba(var(--veil),0) 100%)}

.top{position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); z-index:2}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:16px; letter-spacing:-.01em}
.brand b{font-weight:700}
.mark{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round}

.hero{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 20px 40px; z-index:1; pointer-events:none}
.hero > *{pointer-events:auto}
h1{margin:0; font-weight:300; font-size:clamp(64px, 15vw, 196px); line-height:.9; letter-spacing:-.055em}
h1 b{font-weight:750}
.lead{margin:22px 0 0; font-size:clamp(17px, 2.1vw, 24px); font-weight:500; letter-spacing:-.015em}
.sub{margin:10px 0 0; max-width:560px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.cta{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; justify-content:center}

.btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; font:500 14px var(--sans);
  text-decoration:none; color:var(--ink); background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); transition:transform .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
.btn.ghost{height:38px; padding:0 16px; font-size:13px}
.btn span{transition:transform .2s ease}
.btn:hover span{transform:translateX(3px)}

.layer{position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:0 max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); z-index:2}
.where{font:400 11.5px var(--mono); color:var(--ink-3); letter-spacing:.01em}
.now{display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; background:var(--glass);
  border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:13px; font-weight:500}
.now::before{content:"Livello"; font:400 11px var(--mono); color:var(--ink-3)}
.now span{transition:opacity .35s ease}
.now span.out{opacity:0}
.dots{display:flex; gap:6px}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.18; transition:opacity .3s, transform .3s}
.dots i.on{opacity:.8; transform:scale(1.25)}

@media (max-width:640px){
  .where{display:none}
  .layer{justify-content:center; flex-direction:column; gap:10px}
  .veil{background:radial-gradient(ellipse 80% 40% at 50% 46%, rgba(var(--veil),.82) 0%, rgba(var(--veil),.5) 50%, rgba(var(--veil),0) 100%)}
}
.top .right{display:flex; gap:8px; align-items:center}
.btn.ghost.dark{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
.gift-line{margin:16px 0 0; font:400 11.5px var(--mono); color:var(--ink-3); letter-spacing:.01em}
@media (max-width:640px){ .top .right .btn.ghost:not(.dark){display:none} }
.where a{color:inherit}
.check a{color:var(--ink)}