/* SS Wallpapers — black, gold, a little neon. */
:root{
  --nero:#050505;
  --carbone:#0d0d10;
  --linea:rgba(255,255,255,.09);
  --testo:#ece8df;
  --tenue:#9a958b;
  --oro:#e9b44c;
  --oro-chiaro:#f6d995;
  --ciano:#4ff0ff;
  --magenta:#ff4fd8;
  --serif:"Cinzel",Georgia,serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nero);color:var(--testo);font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
img,video{display:block}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(100svh,980px);display:grid;place-items:center;
  overflow:hidden;isolation:isolate;padding:96px 20px 80px}
.hero-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;z-index:-2;
  filter:blur(26px) saturate(1.25) brightness(.55);transform:scale(1.05)}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% 38%,rgba(5,5,5,.05) 0,rgba(5,5,5,.55) 55%,var(--nero) 100%),
             linear-gradient(to bottom,rgba(5,5,5,.3),rgba(5,5,5,0) 30%,rgba(5,5,5,0) 70%,var(--nero))}
.hero-in{text-align:center;max-width:760px;animation:sorgi 1.6s cubic-bezier(.2,.8,.2,1) both}
.hero-logo{width:clamp(150px,30vw,250px);height:auto;margin:0 auto 26px;
  filter:drop-shadow(0 0 28px rgba(233,180,76,.45)) drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation:respiro 3.5s ease-in-out infinite}
h1{font:700 clamp(30px,7.2vw,72px)/1.05 var(--serif);letter-spacing:.14em;margin:0 0 .3em;
  background:linear-gradient(180deg,#fff3cf 0%,var(--oro-chiaro) 35%,var(--oro) 70%,#9b6a1d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(233,180,76,.18)}
.kicker{font:600 13px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--oro);margin:0 0 22px}
.hero-sub{font-weight:300;font-size:clamp(15px,2.1vw,19px);color:#d9d3c6;max-width:560px;margin:0 auto 34px}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;text-decoration:none;
  font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#1a1206;
  background:linear-gradient(180deg,var(--oro-chiaro),var(--oro));box-shadow:0 10px 40px rgba(233,180,76,.25);
  transition:transform .25s ease,box-shadow .25s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 50px rgba(233,180,76,.4)}
.cta:focus-visible,.btn:focus-visible,.telefono:focus-visible,.orologio:focus-visible,.forme button:focus-visible,.lingue button:focus-visible{
  outline:2px solid var(--oro);outline-offset:4px}
.lingue{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  display:flex;border:1px solid var(--linea);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lingue button{background:none;border:0;padding:7px 12px;font:600 11px/1 var(--sans);letter-spacing:.14em;color:var(--tenue);cursor:pointer}
.lingue button.on{color:#1a1206;background:var(--oro)}

@keyframes sorgi{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* ---------------------------------------------------------------- sections */
main{max-width:1180px;margin:0 auto;padding:0 20px}
.sala{padding:clamp(56px,9vw,110px) 0 20px}
.sala-head{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:baseline;
  border-top:1px solid var(--linea);padding-top:22px;margin-bottom:clamp(28px,5vw,54px)}
.num{font:500 14px/1 var(--serif);color:var(--oro);letter-spacing:.2em;grid-row:span 2}
h2{font:700 clamp(26px,4.4vw,44px)/1.1 var(--serif);letter-spacing:.08em;margin:0}
.sala-head p{grid-column:2;margin:6px 0 0;color:var(--tenue);font-size:14px;letter-spacing:.04em}
.switch{grid-column:2;display:inline-flex;align-items:center;gap:10px;margin-top:14px;cursor:pointer;
  font-size:13px;color:var(--tenue);width:max-content}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch span{width:38px;height:22px;border-radius:999px;background:#222;border:1px solid var(--linea);position:relative;transition:background .2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#bbb;transition:transform .2s,background .2s}
.switch input:checked+span{background:rgba(233,180,76,.35)}
.switch input:checked+span::after{transform:translateX(16px);background:var(--oro)}
.switch input:focus-visible+span{outline:2px solid var(--oro);outline-offset:3px}
.switch b{font-weight:400}

.griglia{display:grid;gap:clamp(28px,5vw,64px)}
.griglia.due{grid-template-columns:repeat(2,minmax(0,1fr))}
.griglia.quattro{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.griglia.due{grid-template-columns:1fr}.griglia.quattro{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.griglia.quattro{grid-template-columns:1fr}}

.opera{display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.opera.vista{opacity:1;transform:none}
.didascalia{max-width:440px;margin-top:28px}
h3{font:700 clamp(21px,2.6vw,27px)/1.2 var(--serif);letter-spacing:.1em;margin:0 0 10px;text-transform:uppercase}
.didascalia p{color:#bdb7ab;font-weight:300;font-size:15px;margin:0 0 20px}
.scarica{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;text-decoration:none;
  font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);transition:all .2s ease}
.btn::before{content:"";width:11px;height:11px;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M6 1v7M3 5l3 3 3-3M1.5 10.5h9" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M6 1v7M3 5l3 3 3-3M1.5 10.5h9" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}
.btn:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07)}
.btn.oro{color:#1a1206;background:linear-gradient(180deg,var(--oro-chiaro),var(--oro));border-color:transparent}
.btn.oro:hover{box-shadow:0 8px 30px rgba(233,180,76,.35)}
.btn.ciano{color:#00161a;background:linear-gradient(180deg,#b6fbff,var(--ciano));border-color:transparent}
.btn.ciano:hover{box-shadow:0 8px 30px rgba(79,240,255,.35)}
.btn small{font-weight:400;opacity:.7;letter-spacing:.06em}

/* ---------------------------------------------------------------- phone mockup */
.telefono{position:relative;width:min(300px,72vw);aspect-ratio:9/19.5;padding:0;border:0;cursor:zoom-in;
  border-radius:15% / 7%;background:#000;overflow:hidden;container-type:inline-size;
  box-shadow:0 0 0 2px #2a2a2e,0 0 0 9px #0b0b0d,0 0 0 10px #3a3a40,
             0 40px 90px -20px rgba(0,0,0,.9),0 0 120px -30px var(--alone,rgba(233,180,76,.35));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.opera[data-id="neon-hood"] .telefono{--alone:rgba(79,240,255,.35)}
.telefono:hover{transform:translateY(-6px) rotate(-.6deg)}
.telefono video{width:100%;height:100%;object-fit:cover}
.isola{position:absolute;top:3.2%;left:50%;width:31%;height:3.6%;transform:translateX(-50%);
  background:#000;border-radius:999px}
.lock{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  padding-top:25cqw;color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(0,0,0,.35);transition:opacity .4s}
.lock-date{font:600 5.2cqw/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;opacity:.92}
.lock-time{font:600 24cqw/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em;margin-top:1.5cqw}
body.no-lock .lock{opacity:0}

/* ---------------------------------------------------------------- watch mockup */
.forme{display:inline-flex;border:1px solid var(--linea);border-radius:999px;overflow:hidden;margin-bottom:26px}
.forme button{background:none;border:0;padding:8px 16px;font:600 11px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);cursor:pointer}
.forme button.on{background:rgba(255,255,255,.1);color:var(--testo)}
.orologio{position:relative;padding:0;border:0;cursor:zoom-in;background:#000;
  width:min(280px,66vw);transition:transform .5s cubic-bezier(.2,.8,.2,1),border-radius .5s,aspect-ratio .5s}
.orologio:hover{transform:translateY(-5px)}
.orologio video{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.orologio.round{aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 7px #121214,0 0 0 9px #4a4a52,0 0 0 16px #1b1b1f,0 0 0 17px #55555e,
             0 40px 80px -20px rgba(0,0,0,.95),0 0 110px -30px var(--alone,rgba(233,180,76,.4))}
.orologio.apple{aspect-ratio:416/496;width:min(240px,58vw);border-radius:22% / 18.5%;
  box-shadow:0 0 0 8px #0c0c0e,0 0 0 10px #3c3c44,0 0 0 13px #1a1a1e,
             0 40px 80px -20px rgba(0,0,0,.95),0 0 110px -30px var(--alone,rgba(233,180,76,.4))}
.opera[data-id="neon-pulse"] .orologio{--alone:rgba(255,79,216,.35)}
.corona-btn{position:absolute;right:-24px;top:50%;width:9px;height:42px;transform:translateY(-50%);
  border-radius:3px;background:linear-gradient(90deg,#55555e,#2a2a30);box-shadow:inset 0 0 0 1px #6b6b75}
.orologio.apple .corona-btn{right:-19px;top:36%;height:34px}

/* ---------------------------------------------------------------- how to */
.passo{border:1px solid var(--linea);border-radius:18px;padding:20px 20px 8px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.passo h4{font:600 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin:0 0 10px}
.passo p{margin:0 0 12px;color:#bdb7ab;font-size:14px;font-weight:300}

/* ---------------------------------------------------------------- footer */
footer{text-align:center;padding:90px 20px 70px;color:var(--tenue);font-size:14px}
footer img{margin:0 auto 18px;opacity:.9}
footer b{color:var(--testo);font-weight:600;letter-spacing:.08em}
footer p{margin:6px 0}
footer .links a{color:var(--oro);text-decoration:none}
footer .links a:hover{text-decoration:underline}
.fine{font-size:12px;opacity:.7;margin-top:18px!important}

/* ---------------------------------------------------------------- viewer */
.schermo{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:grid;place-items:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.schermo[hidden]{display:none}
.schermo video{max-width:100vw;max-height:100svh;width:auto;height:100svh;object-fit:contain}
.schermo.tondo video{height:min(86vw,86svh);width:min(86vw,86svh);border-radius:50%}
.schermo.mela video{height:min(80svh,120vw);border-radius:20% / 17%}
.chiudi{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);
  font-size:26px;line-height:1;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-in,.hero-logo{animation:none}
  .opera{opacity:1;transform:none;transition:none}
  .telefono,.orologio{transition:none}
}

/* ---------------------------------------------------------------- android app band */
.cta-2{display:block;margin:18px auto 0;width:max-content;max-width:100%;font:600 12px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-chiaro);text-decoration:none;border-bottom:1px solid rgba(233,180,76,.45);padding-bottom:3px}
.cta-2:hover{border-color:var(--oro)}
.app-band{padding:clamp(40px,7vw,80px) 0 0}
.app-card{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,34px);align-items:center;
  padding:clamp(20px,3.4vw,34px);border-radius:26px;border:1px solid rgba(233,180,76,.35);
  background:radial-gradient(ellipse at 0% 0%,rgba(233,180,76,.16),transparent 55%),linear-gradient(180deg,#0f0d09,#070707);
  box-shadow:0 30px 80px -30px rgba(233,180,76,.25)}
.app-icon{width:96px;height:96px;border-radius:24px;box-shadow:0 0 0 1px rgba(233,180,76,.4),0 16px 40px rgba(0,0,0,.6);align-self:start}
.app-tag{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.app-text h2{margin:8px 0 8px;font-size:clamp(24px,3.4vw,34px)}
.app-text p{margin:0;color:#c9c3b7;font-weight:300;font-size:15px;max-width:620px}
.app-steps{margin:14px 0 0;padding-left:20px;color:#bdb7ab;font-size:14px;font-weight:300}
.app-steps li{margin:4px 0}
.app-steps li::marker{color:var(--oro);font-weight:600}
.app-ios{display:none;margin-top:12px!important;color:var(--oro-chiaro)!important;font-weight:400!important}
.app-cta{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.app-cta small{color:var(--tenue);font-size:12px;letter-spacing:.04em}
.btn.grande{padding:17px 26px;font-size:13px}
@media (max-width:820px){
  .app-card{grid-template-columns:auto 1fr}
  .app-cta{grid-column:1 / -1}
  .app-cta .btn{width:100%;justify-content:center}
}
@media (max-width:520px){
  .app-card{grid-template-columns:1fr;text-align:left}
  .app-icon{width:72px;height:72px;border-radius:18px}
}
/* on iPhone the APK is useless: say so instead of offering it */
body.is-ios .app-ios{display:block}
body.is-ios .app-cta,body.is-ios .app-steps,body.is-ios .cta-2{display:none}