/* DLLFPP. Stile: Red Noir (Superdesign). Nero profondo con cielo stellato e bagliore rosso, superfici di
   vetro, titoli bianchi sfumati con una parola in rosso. HTML statico, nessun JavaScript. */
:root{
  --bg:#050505;
  --text:#F5F5F5;
  --muted:#A1A1AA;
  --muted-2:#71717A;
  --red:#F2304A;
  --red-deep:#9F1239;
  --glass:rgba(255,255,255,.035);
  --glass-hi:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.18);
  --ring:#F2304A;
  --r:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1180px;
  --gut:16px;
  color-scheme:dark;
}
@media(min-width:768px){:root{--gut:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
h1,h2,h3{margin:0;letter-spacing:-.03em}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.red{color:var(--red);-webkit-text-fill-color:var(--red)}

/* Cielo: stelle fisse, griglia appena visibile, bagliore rosso dietro il titolo */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 72%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 64%,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 38%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 66% 90%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 44% 8%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(60% 45% at 50% 18%,rgba(159,18,57,.32),transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/56px 56px,
    var(--bg)}
.sky::before{content:"";position:absolute;inset:0;opacity:.32;
  background:
    radial-gradient(circle,rgba(242,48,74,.9) 1.6px,transparent 2.1px) 0 0/10px 10px,
    radial-gradient(circle,rgba(242,48,74,.75) .8px,transparent 1.2px) 5px 5px/10px 10px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 12%,#000,rgba(0,0,0,.35) 45%,transparent 80%);
  mask-image:radial-gradient(70% 55% at 50% 12%,#000,rgba(0,0,0,.35) 45%,transparent 80%)}
.sky::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(1px 1px at 22% 44%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 84% 34%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 48% 58%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 78%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 16% 62%,rgba(255,255,255,.35) 50%,transparent 51%);
  background-size:420px 420px;opacity:.9}

/* Barra di navigazione a pillola, di vetro */
.nav-wrap{position:sticky;top:0;z-index:20;padding:16px var(--gut) 0}
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 10px 10px 22px;border:1px solid var(--line);border-radius:999px;
  background:rgba(8,8,8,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:10px;margin:0;font-weight:700;font-size:1.0625rem;letter-spacing:.01em;text-decoration:none}
.gem{display:inline-block;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#FF5A6E,var(--red) 55%,var(--red-deep));transform:rotate(45deg);box-shadow:0 0 18px rgba(242,48,74,.55);flex:none}
.logo{display:block;flex:none}
.gem--lg{width:22px;height:22px;border-radius:5px}
.nav__links{display:none;gap:30px}
.nav__links a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.9375rem;padding:10px 0;transition:color .2s}
.nav__links a:hover{color:var(--text)}
@media(min-width:860px){.nav__links{display:flex}}

/* Bottoni */
.ico{width:1em;height:1em;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:inherit;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s}
.btn--sm{min-height:42px;padding:0 18px;font-size:.875rem;font-weight:600}
.btn--lg{min-height:60px;padding:0 36px;font-size:1.125rem}
.btn--red{color:#fff;background:linear-gradient(180deg,#3A0A14,#1A0509);border-color:rgba(242,48,74,.55);
  box-shadow:0 0 0 1px rgba(242,48,74,.15) inset,0 10px 40px -10px rgba(242,48,74,.6)}
.btn--red:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(242,48,74,.35) inset,0 16px 50px -10px rgba(242,48,74,.8)}
.btn--glass{color:var(--text);background:var(--glass-hi);border-color:var(--line-hi)}
.btn--glass:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn--line{color:var(--text);background:transparent;border-color:var(--line-hi)}
.btn--line:hover{border-color:var(--red)}

/* Light beam button (Superdesign): un fascio di luce gira lungo il bordo, angolo animato con @property */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}
.btn--beam{--beam-c:#FF4D63;--beam-glow:rgba(242,48,74,.45);color:#fff;border:2px solid transparent;
  background:linear-gradient(#0C0C0E,#0C0C0E) padding-box,
    conic-gradient(from var(--beam),rgba(255,255,255,.12) 0deg,rgba(255,255,255,.12) 200deg,var(--beam-c) 290deg,#fff 335deg,var(--beam-c) 350deg,rgba(255,255,255,.12) 360deg) border-box;
  box-shadow:0 0 34px -12px var(--beam-glow);animation:beam 3.2s linear infinite}
.btn--beam:hover{transform:translateY(-2px);box-shadow:0 0 44px -8px var(--beam-glow)}
.btn--beam-w{--beam-c:#D4D4D8;--beam-glow:rgba(255,255,255,.22);animation-delay:-1.6s}
@keyframes beam{to{--beam:360deg}}
/* Etichetta a pillola con il punto rosso */
.badge{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 16px;border:1px solid var(--line-hi);border-radius:999px;background:var(--glass);font-size:.875rem;color:#E4E4E7}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);flex:none;display:inline-block}
.dot--pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 2px var(--red);opacity:.6}}

/* Apertura */
.hero{text-align:center;padding-top:clamp(72px,11vw,140px);padding-bottom:clamp(64px,9vw,112px)}
.hero__title{margin-top:28px;font-weight:700;font-size:clamp(2.6rem,7.4vw,6rem);line-height:1.02;letter-spacing:-.045em;
  background:linear-gradient(180deg,#FFFFFF 30%,#A1A1AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:rise 1.1s var(--ease) both}
.hero__title .red{position:relative;display:inline-block}
.hero__title .red::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--red) 20%,var(--red) 80%,transparent)}
.hero__lead{margin:28px auto 0;max-width:58ch;font-size:clamp(1.0625rem,1.6vw,1.3125rem);color:var(--muted);animation:rise 1.1s .12s var(--ease) both}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:40px 0 0;animation:rise 1.1s .22s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Fascia dei problemi che scorre */
.strip{display:flex;align-items:center;gap:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);padding:22px var(--gut)}
.strip__label{display:none;margin:0;flex:none;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
@media(min-width:900px){.strip__label{display:block;padding-left:max(0px,calc((100vw - var(--max))/2))}}
.strip__view{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip__track{display:flex;width:max-content;animation:slide 45s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip ul{list-style:none;margin:0;padding:0;display:flex}
.strip li{display:flex;align-items:center;gap:12px;padding-right:44px;white-space:nowrap;font-size:1.25rem;font-weight:500;color:#D4D4D8}
.strip li::before{content:"";width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(242,48,74,.9) 0 3px,rgba(242,48,74,.15) 4px 9px,transparent 9.5px)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Sezioni */
.sec{padding-top:clamp(88px,11vw,140px)}
.sec__head{max-width:720px;margin:0 auto 48px;text-align:center}
.sec__head h2{font-weight:700;font-size:clamp(2.2rem,4.8vw,3.75rem);line-height:1.04;
  background:linear-gradient(180deg,#FFFFFF 40%,#A1A1AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec__head p{margin:16px auto 0;max-width:56ch;color:var(--muted);font-size:1.125rem}

/* Superficie di vetro */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(242,48,74,.55),transparent 35%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.card:hover::before{opacity:1}

/* Ti riconosci? */
.pains{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:800px){.pains{grid-template-columns:1fr 1fr}.pain:last-child{grid-column:1/-1}}
.pain{padding:28px 28px 30px;transition:transform .4s var(--ease)}
.pain:hover{transform:translateY(-3px)}
.pain__q{margin:0;font-weight:600;font-size:clamp(1.3rem,2.1vw,1.625rem);line-height:1.22;letter-spacing:-.025em}
.pain__label{display:flex;align-items:center;gap:10px;margin:22px 0 6px;font-size:.875rem;font-weight:600;color:var(--red)}
.pain__a{margin:0;color:var(--muted);max-width:52ch}
.pains__more{margin:36px 0 0;text-align:center;font-size:1.125rem;color:var(--muted)}
.pains__more a{color:var(--text);font-weight:600;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}

/* Cosa posso costruire */
.areas{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.areas{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{padding:28px}
.area h3{margin-top:22px;font-size:1.3rem;font-weight:600}
.area p{margin:10px 0 0;color:var(--muted)}

/* Come lavoro: quattro passi lungo una linea rossa */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:36px;grid-template-columns:1fr;position:relative}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}
  .steps::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:1px;background:linear-gradient(90deg,var(--red),rgba(242,48,74,.1))}}
.step{position:relative}
.step__n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0B0B0B;border:1px solid rgba(242,48,74,.6);
  color:var(--text);font-weight:700;box-shadow:0 0 24px -4px rgba(242,48,74,.6);position:relative}
.step h3{margin-top:22px;font-size:1.25rem;font-weight:600;line-height:1.25}
.step p{margin:10px 0 0;color:var(--muted)}

/* Contatti: pannello di vetro con la frase da completare */
.contact{padding:clamp(28px,5vw,64px);overflow:hidden}
.contact::after{content:"";position:absolute;right:-20%;top:-40%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(242,48,74,.18),transparent);pointer-events:none}
.contact h2{font-weight:700;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02}
.contact__lead{margin:16px 0 0;max-width:56ch;color:var(--muted);font-size:1.125rem}
.letter{position:relative;z-index:1;margin-top:clamp(36px,5vw,56px);font-size:clamp(1.375rem,2.6vw,2.125rem);font-weight:600;letter-spacing:-.025em;line-height:1.6}
.letter__line{margin:0}
.blank{font:inherit;letter-spacing:inherit;color:var(--text);background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.28);
  border-radius:0;padding:0 4px;margin:0 2px;max-width:100%;transition:border-color .25s}
.blank--name{width:9.5em}
.blank--contact{width:12em}
.blank::placeholder,.ruled::placeholder{color:#5F5F66;opacity:1;font-weight:500}
.blank:hover,.ruled:hover{border-color:rgba(255,255,255,.5)}
.blank:focus-visible,.ruled:focus-visible{outline:none;border-color:var(--red);box-shadow:0 6px 18px -10px var(--red)}
.ruled{display:block;width:100%;margin-top:12px;font:inherit;font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.01em;
  color:var(--text);line-height:2.2;padding:0 4px;border:0;border-bottom:2px solid rgba(255,255,255,.28);border-radius:0;resize:vertical;min-height:calc(2.2em * 5);
  background:transparent repeating-linear-gradient(to bottom,transparent 0,transparent calc(2.2em - 1px),rgba(255,255,255,.08) calc(2.2em - 1px),rgba(255,255,255,.08) 2.2em);
  background-attachment:local}
.blank:user-invalid,.ruled:user-invalid{border-bottom-color:var(--red);border-bottom-style:dashed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.letter__send{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.privacy-note{margin:0;flex:1 1 320px;max-width:52ch;font-size:.9375rem;font-weight:400;letter-spacing:0;line-height:1.55;color:var(--muted-2)}
.privacy-note a{color:var(--muted)}
@media(max-width:599px){.blank--name,.blank--contact{width:100%;margin:4px 0 0}.punct{display:none}.letter__line+.letter__line{margin-top:14px}.letter__send .btn{width:100%}}

/* Pagine interne */
.page-title{margin-top:24px;font-weight:700;font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;
  background:linear-gradient(180deg,#FFFFFF 30%,#A1A1AA);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.legal{max-width:860px;padding-top:clamp(56px,8vw,104px);padding-bottom:40px}
.legal__intro{margin:24px 0 40px;font-size:clamp(1.125rem,1.8vw,1.375rem);color:#D4D4D8;line-height:1.5}
.legal__sec{padding:26px 28px;margin-bottom:14px}
.legal__sec h2{font-size:1.375rem;font-weight:600}
.legal__sec p,.legal__sec li{color:var(--muted);line-height:1.7}
.legal__sec p{margin:12px 0 0}
.legal__sec ul{margin:12px 0 0;padding-left:1.2em}
.legal__sec li+li{margin-top:8px}
.legal__sec strong{color:var(--text)}
.legal__sec a{color:var(--text);text-decoration-color:var(--red);text-underline-offset:4px}
.legal>p:last-child{margin-top:40px}
.result{min-height:64svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:64px;padding-bottom:64px}
.result p{margin:22px auto 0;max-width:52ch;color:var(--muted);font-size:1.125rem}
.result .btn{margin-top:36px}

/* Piede */
.foot{margin-top:clamp(96px,12vw,160px);border-top:1px solid var(--line);background:rgba(255,255,255,.015)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:28px;padding-bottom:28px}
.brand--small{font-size:.9375rem}
.foot__links{display:flex;gap:24px;margin:0}
.foot__links a{color:var(--muted);text-decoration:none;font-size:.9375rem;padding:10px 0}
.foot__links a:hover{color:var(--text)}
.sign{margin:0;font-size:.875rem;color:var(--muted-2)}
.sign a{color:var(--text);font-weight:600;text-decoration:none}
.sign a:hover{text-decoration:underline}

/* Comparse allo scorrimento, solo dove il browser le supporta in CSS */
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .strip__track{width:auto}
  .strip ul{flex-wrap:wrap;row-gap:10px}
  .strip ul[aria-hidden]{display:none}
}