/* ============================================================
   Delphi Designer — landing (static rebuild)
   Fedele all'originale, con: font auto-ospitati (solo latin),
   titoli responsive (clamp), semantica, contrasto AA,
   prefers-reduced-motion.
   ============================================================ */

/* ---------- Font (subset latin, auto-ospitati) ---------- */
@font-face{font-family:'Archivo';font-style:italic;font-weight:900;font-display:swap;
  src:url(fonts/archivo-900-italic.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/chakra-400.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/chakra-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/chakra-700.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/saira-800.woff2) format('woff2')}

/* ---------- Design tokens ---------- */
:root{
  --acc:#a8e80c;              /* accento (unico punto da cambiare per il tema) */
  --bg:#0c0b07;              /* fondo pagina */
  --bg-2:#100f0b;            /* pannelli */
  --ink:#f4f1e6;             /* testo principale */
  --ink-2:#c9c6b4;           /* testo su pannello */
  --muted:#a3a191;           /* paragrafi secondari (AA) */
  --muted-2:#8f8d7d;         /* nav / corpo card (AA) */
  --dim:#7f7e6d;             /* micro-label / footer (AA, era #6c6b5c/#5c5b4c) */
  --line:#1e1d15;            /* bordi tenui */
  --line-2:#2c2b20;          /* bordi pannelli */
  --line-3:#35342a;          /* bordo bottone ghost */
  --glitch-c:#16d6c6;        /* aberrazione ciano */
  --glitch-m:#e0348b;        /* aberrazione magenta */
  --f-display:'Archivo',sans-serif;
  --f-body:'Chakra Petch',sans-serif;
  --f-cond:'Saira Condensed',sans-serif;
  --dots:radial-gradient(rgba(168,232,12,0.06) 1px,transparent 1.4px);
  --scan:repeating-linear-gradient(0deg,rgba(0,0,0,0.30) 0 1px,transparent 1px 5px);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--ink)}
img,svg{display:block}
h1,h2,p{margin:0}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--bg);
  padding:10px 16px;font-family:var(--f-cond);font-weight:800;text-transform:uppercase;z-index:100}
.skip:focus{left:12px;top:12px}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------- Logo triangoli (simbolo riusato) ---------- */
.defs{position:absolute;width:0;height:0}
.tri{fill:none;stroke-linejoin:round;stroke-linecap:round}

/* logo glitch a 3 strati */
.glitch{position:relative;display:inline-block;width:var(--w);height:var(--h);
  isolation:isolate;flex:none}
.glitch svg{position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-width:var(--sw,9)}
.glitch .c{stroke:var(--glitch-c);opacity:.82;transform:translate(-2px,-1px)}
.glitch .m{stroke:var(--glitch-m);opacity:.82;transform:translate(2px,1px)}
.glitch .a{stroke:var(--acc);position:relative}
.glitch--big .c,.glitch--big .m{transform:none}
.glitch--big .c{animation:ddGlitchC 1.6s steps(2,end) infinite}
.glitch--big .m{animation:ddGlitchM 1.6s steps(2,end) infinite}

/* triangolo singolo (check / step / footer) */
.tri-one{flex:none}
.tri-one svg{fill:none;stroke-linejoin:round;stroke-linecap:round;
  stroke:var(--acc);stroke-width:var(--sw,12);width:100%;height:100%}
.tri-one.muted svg{stroke:var(--dim)}

@keyframes ddGlitchC{0%,100%{transform:translate(-4px,-2px)}20%{transform:translate(-7px,1px)}40%{transform:translate(-2px,-3px)}60%{transform:translate(-5px,2px)}}
@keyframes ddGlitchM{0%,100%{transform:translate(4px,2px)}20%{transform:translate(7px,-1px)}40%{transform:translate(2px,3px)}60%{transform:translate(5px,-2px)}}

/* ---------- Bottoni ---------- */
.btn{display:inline-block;font-family:var(--f-cond);font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;font-size:16px;padding:15px 30px;
  border-radius:5px;border:1px solid transparent;line-height:1;cursor:pointer}
.btn--primary{background:var(--acc);color:var(--bg)}
.btn--primary:hover{filter:brightness(1.08);color:var(--bg)}
.btn--ghost{border-color:var(--line-3);color:var(--ink)}
.btn--ghost:hover{border-color:var(--acc);color:var(--ink)}

.eyebrow{font-weight:700;letter-spacing:.4em;font-size:11px;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(12,11,7,0.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav__inner{max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand__name{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:20px;letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
.brand__name .accent{color:var(--acc)}
.nav__right{display:flex;align-items:center;gap:28px}
.nav__links{display:flex;align-items:center;gap:28px;font-weight:600;
  letter-spacing:.18em;font-size:11px;text-transform:uppercase}
.nav__links a{color:var(--muted-2)}
.nav__links a:hover{color:var(--ink)}
.nav__cta{background:var(--acc);color:var(--bg);padding:9px 16px;border-radius:4px;
  font-weight:600;letter-spacing:.14em;font-size:11px;text-transform:uppercase;white-space:nowrap}
.nav__cta:hover{color:var(--bg);filter:brightness(1.08)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(168,232,12,0.07) 0%, transparent 70%),
    var(--scan),
    radial-gradient(rgba(168,232,12,0.11) 1px,transparent 1.4px);
  background-size:auto,auto,14px 14px}
.hero__inner{position:relative;max-width:1200px;margin:0 auto;padding:110px 32px 96px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__eyebrow{font-weight:700;letter-spacing:.5em;font-size:12px;color:var(--acc);
  padding-left:.5em;margin-bottom:22px;text-wrap:balance}
.hero__title{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(2.6rem,9vw,5.125rem);letter-spacing:-.035em;line-height:.86;
  text-wrap:balance;max-width:15ch;margin-bottom:22px}
.hero__title .accent{color:var(--acc)}
.hero__sub{font-size:clamp(15px,2.4vw,17px);line-height:1.6;color:var(--muted);
  max-width:58ch;text-wrap:pretty;margin-bottom:36px}
.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   STATS
   ============================================================ */
.stats{border-bottom:1px solid var(--line);background:var(--bg-2)}
.stats__inner{max-width:1200px;margin:0 auto;padding:26px 32px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.stat{display:flex;align-items:baseline;gap:12px}
.stat__value{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(1.7rem,4vw,2.125rem);letter-spacing:-.03em;color:var(--acc);line-height:1}
.stat__label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);line-height:1.35;white-space:pre-line}

/* ============================================================
   SECTIONS generiche
   ============================================================ */
.section{max-width:1200px;margin:0 auto;padding:96px 32px 0}
.section__title{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(2rem,5.5vw,2.875rem);letter-spacing:-.03em;line-height:.9;
  color:var(--ink);margin-bottom:36px}

/* pannello con trama a punti */
.panel{position:relative;border:1px solid var(--line-2);border-radius:12px;
  overflow:hidden;background:var(--bg-2)}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--dots);background-size:12px 12px}
.panel>*{position:relative}

/* ---------- Servizi ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.card{position:relative;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);padding:28px 26px 30px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--dots);background-size:12px 12px}
.card>*{position:relative}
.card__num{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:15px;color:var(--acc);margin-bottom:16px}
.card__title{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:23px;color:var(--ink);margin-bottom:10px}
.card__desc{font-size:13.5px;line-height:1.6;color:var(--muted-2);
  text-wrap:pretty;margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);padding:4px 9px;border-radius:3px}

/* ---------- Prezzo ---------- */
.price__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:36px;padding:44px 40px 46px;align-items:center}
.price__value{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(3rem,11vw,4.75rem);letter-spacing:-.04em;line-height:.85;color:var(--acc)}
.price__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.price__tag{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:19px;color:var(--ink)}
.price__desc{font-size:15px;line-height:1.6;color:var(--muted);max-width:44ch;text-wrap:pretty}
.included__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
.included{display:flex;flex-direction:column;gap:11px}
.inc{display:flex;align-items:center;gap:12px}
.inc span{font-size:14.5px;color:var(--ink-2)}

/* ---------- Metodo ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{padding:28px 24px 30px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.step__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step__num{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.step__title{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:20px;color:var(--ink);margin-bottom:9px}
.step__desc{font-size:13px;line-height:1.6;color:var(--muted-2);text-wrap:pretty}

/* ============================================================
   CTA
   ============================================================ */
.cta{max-width:1200px;margin:96px auto 0;padding:0 32px}
.cta__panel{position:relative;border:1px solid var(--line-2);border-radius:12px;
  overflow:hidden;background:var(--bg)}
.cta__panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--scan),radial-gradient(rgba(168,232,12,0.12) 1px,transparent 1.4px);
  background-size:auto,14px 14px}
.cta__inner{position:relative;padding:64px 40px 68px;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.cta__title{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(2.2rem,6.5vw,3.375rem);letter-spacing:-.035em;line-height:.88;
  color:var(--ink);max-width:17ch;text-wrap:balance;margin-bottom:16px}
.cta__title .accent{color:var(--acc)}
.cta__sub{font-size:16px;line-height:1.6;color:var(--muted);max-width:54ch;
  text-wrap:pretty;margin-bottom:30px}
.cta__note{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:26px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{max-width:1200px;margin:0 auto;padding:56px 32px 44px}
.footer__inner{border-top:1px solid var(--line);padding-top:26px;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:12px}
.footer__brand span{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:15px;letter-spacing:-.03em;color:var(--dim)}
.footer__links{display:flex;gap:22px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);flex-wrap:wrap}
.footer__links a{color:var(--dim)}
.footer__links a:hover{color:var(--acc)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:760px){
  .nav__links{display:none}          /* su mobile resta logo + CTA */
}
@media(max-width:640px){
  .wrap,.nav__inner,.stats__inner,.section,.cta,.footer{padding-left:20px;padding-right:20px}
  .hero__inner{padding:64px 20px 56px}
  .hero__eyebrow{letter-spacing:.28em}   /* evita overflow su telefoni stretti */
  .section{padding-top:64px}
  .price__grid{padding:32px 24px 34px;gap:24px}
  .cta__inner{padding:48px 24px 52px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:460px){
  /* nav stretta: resta il logo + CTA, il wordmark testuale sparisce */
  .nav__inner{padding:14px 20px}
  .brand__name{display:none}
  .brand{gap:0}
}

/* ============================================================
   MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glitch--big .c,.glitch--big .m{animation:none}
  .glitch--big .c{transform:translate(-3px,-2px)}
  .glitch--big .m{transform:translate(3px,2px)}
}