@font-face{
    font-family: 'Space Grotesk';
    src: url('fonts/SpaceGrotesk.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
  }
  @font-face{
    font-family: 'Inter';
    src: url('fonts/Inter.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
  }
  @font-face{
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono.woff2') format('woff2');
    font-weight: 400 600;
    font-display: swap;
  }
  :root{
    --bg: #0F151C;
    --bg-elev: #161F29;
    --bg-elev-2: #1C2733;
    --ink: #EDF1F5;
    --ink-dim: #8FA0B0;
    --ink-faint: #8090A0;
    --accent: #E8A33D;
    --accent-soft: rgba(232,163,61,0.12);
    --ok: #5FB8A0;
    --border: #263241;
    --radius: 10px;
    --mono: 'JetBrains Mono', monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--accent); color:#1A1206; }

  a{ color:inherit; }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }

  /* ---------- subtle grid backdrop ---------- */
  .bg-grid{
    position:absolute; top:0; left:0; right:0; height:900px; z-index:-1;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 900px 500px at 50% 0%, black, transparent 70%);
            mask-image: radial-gradient(ellipse 900px 500px at 50% 0%, black, transparent 70%);
    opacity:0.35;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:10;
    background:rgba(15,21,28,0.8);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
  }
  .brand{
    font-family:var(--mono); font-size:14px; color:var(--ink);
    display:flex; align-items:center; gap:10px;
  }
  .brand-mark{ width:22px; height:22px; flex:none; }
  .dot{
    width:8px; height:8px; border-radius:50%; background:var(--ok);
    box-shadow:0 0 0 3px rgba(95,184,160,0.15);
    flex:none;
  }
  .nav-links{ display:flex; gap:28px; font-family:var(--mono); font-size:13px; color:var(--ink-dim); }
  .nav-links a{ text-decoration:none; transition:color .15s; }
  .nav-links a:hover{ color:var(--accent); }
  .nav-cta{
    font-family:var(--mono); font-size:13px; color:var(--bg);
    background:var(--accent); padding:8px 16px; border-radius:6px;
    text-decoration:none; font-weight:600; transition:transform .15s, box-shadow .15s;
  }
  .nav-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 20px -6px var(--accent); }
  @media (max-width:720px){ .nav-links{ display:none; } }

  /* ---------- hero / console ---------- */
  .hero{ padding-top:96px; padding-bottom:72px; }
  .eyebrow{
    font-family:var(--mono); font-size:13px; color:var(--accent);
    display:flex; align-items:center; gap:8px; margin-bottom:22px;
  }
  .eyebrow::before{ content:'$'; color:var(--ink-faint); }

  h1{
    font-family:var(--display); font-weight:700;
    font-size:clamp(34px, 6vw, 60px);
    line-height:1.05; letter-spacing:-0.02em;
    margin:0 0 20px;
  }
  h1 span{ color:var(--accent); }

  .lede{
    font-size:18px; color:var(--ink-dim); max-width:560px; margin:0 0 36px;
  }

  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px; }

  .checklist{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 28px;
    margin:0 0 36px; padding:0; list-style:none;
  }
  .checklist li{
    display:flex; align-items:baseline; gap:10px;
    font-family:var(--mono); font-size:14.5px; color:var(--ink-dim);
  }
  .checklist li::before{
    content:'☐'; color:var(--accent); flex:none; font-size:15px;
  }
  @media (max-width:640px){ .checklist{ grid-template-columns:1fr; } }
  .btn{
    font-family:var(--mono); font-size:14px; text-decoration:none;
    padding:12px 22px; border-radius:7px; font-weight:600;
    transition:transform .15s, box-shadow .15s, background .15s;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary{ background:var(--accent); color:#1A1206; }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px var(--accent); }
  .btn-ghost{ border:1px solid var(--border); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

  /* console panel */
  .console{
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  }
  .console-bar{
    display:flex; align-items:center; gap:8px;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--bg-elev-2);
  }
  .console-bar span{ width:10px; height:10px; border-radius:50%; background:#3A4756; }
  .console-title{
    font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-left:6px;
  }
  .console-body{
    padding:26px 24px 30px; font-family:var(--mono); font-size:14px;
    color:var(--ink-dim);
  }
  .console-body .line{ margin:0 0 10px; }
  .console-body .prompt{ color:var(--accent); }
  .console-body .key{ color:var(--ink-faint); }
  .console-body .val{ color:var(--ink); }
  .cursor{
    display:inline-block; width:8px; height:16px; background:var(--accent);
    vertical-align:-3px; animation:blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  /* ---------- section shell ---------- */
  section{ padding:72px 0; border-top:1px solid var(--border); }
  .section-head{ margin-bottom:44px; max-width:600px; }
  .eyebrow-tag{
    font-family:var(--mono); font-size:12px; color:var(--ink-faint);
    letter-spacing:0.02em; margin-bottom:10px;
  }
  h2{
    font-family:var(--display); font-size:clamp(24px,3.4vw,34px);
    font-weight:600; margin:0 0 12px; letter-spacing:-0.01em;
  }
  .section-sub{ color:var(--ink-dim); font-size:16px; margin:0; }

  /* ---------- servizi ---------- */
  .services{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .service{
    background:var(--bg-elev); padding:30px 28px; transition:background .2s;
  }
  .service:hover{ background:var(--bg-elev-2); }
  .service-file{
    font-family:var(--mono); font-size:12px; color:var(--accent);
    margin-bottom:16px; display:block;
  }
  .service h3{
    font-family:var(--display); font-size:19px; margin:0 0 10px; font-weight:600;
  }
  .service p{ color:var(--ink-dim); font-size:15px; margin:0; }
  @media (max-width:720px){ .services{ grid-template-columns:1fr; } }

  /* ---------- metriche ---------- */
  .metrics{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .metric{ background:var(--bg-elev); padding:28px 22px; text-align:left; }
  .metric-val{
    font-family:var(--display); font-size:clamp(26px,3vw,34px); font-weight:700; color:var(--accent);
    display:block; margin-bottom:6px;
  }
  .metric-label{ font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); }
  @media (max-width:820px){ .metrics{ grid-template-columns:repeat(2,1fr); } }

  /* ---------- come lavoro / T-shaped ---------- */
  .tshape-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  @media (max-width:820px){ .tshape-grid{ grid-template-columns:1fr; gap:36px; } }

  .tshape-diagram{
    display:flex; flex-direction:column; align-items:center; gap:0;
  }
  .t-bar{
    width:100%; height:46px; background:var(--bg-elev-2);
    border:1px solid var(--border); border-radius:7px;
    display:flex; align-items:center; justify-content:space-around;
    font-family:var(--mono); font-size:11.5px; color:var(--ink-dim);
  }
  .t-bar span{ padding:4px 8px; }
  .t-stem{
    width:70px; flex:none; margin-top:-1px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:linear-gradient(180deg, var(--accent-soft), transparent);
    border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    border-radius:0 0 7px 7px;
    padding:18px 0 20px;
  }
  .t-stem strong{ font-family:var(--mono); font-size:11px; color:var(--accent); writing-mode:vertical-rl; letter-spacing:0.05em; }

  .tshape-copy p{ color:var(--ink-dim); font-size:15.5px; margin:0 0 16px; }
  .tshape-copy strong{ color:var(--ink); }

  /* ---------- progetti (deploy log) ---------- */
  .deploylog{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .deploylog-cmd{
    font-family:var(--mono); font-size:13px; color:var(--ink-faint);
    padding:18px 24px; border-bottom:1px solid var(--border);
  }
  .deploylog-cmd .prompt{ color:var(--accent); }
  .deploy-row{
    display:grid; grid-template-columns:90px 200px 1fr; gap:20px;
    padding:22px 24px; border-bottom:1px solid var(--border);
    transition:background .15s;
  }
  .js-extra, .deploy-row.js-extra, .thanks-row.js-extra, .quote-card.js-extra{ display:none; }
  .deploy-row.js-extra.js-extra-open{ display:grid; }
  .thanks-row.js-extra.js-extra-open{ display:flex; }
  .quote-card.js-extra.js-extra-open{ display:flex; }
  .expand-btn{
    display:flex; align-items:center; gap:8px; width:100%;
    background:none; border:none; cursor:pointer;
    padding:18px 24px; font-family:var(--mono); font-size:13px; color:var(--accent);
    transition:background .15s;
  }
  .expand-btn:hover{ background:var(--bg-elev-2); }
  .quotes-expand-btn{ grid-column:1 / -1; background:var(--bg-elev); }
  .quotes-expand-btn:hover{ background:var(--bg-elev-2); }
  .expand-btn .chev{ transition:transform .2s; }
  .expand-btn.is-open .chev{ transform:rotate(180deg); }
  .deploy-row:last-child{ border-bottom:none; }
  .deploy-row:hover{ background:var(--bg-elev-2); }
  .deploy-year{ font-family:var(--mono); font-size:13px; color:var(--accent); }
  .deploy-client{ font-family:var(--display); font-size:16px; font-weight:600; }
  .deploy-result p{ margin:0; color:var(--ink-dim); font-size:14.5px; }
  .deploy-result .result-tag{
    display:inline-block; font-family:var(--mono); font-size:12px; color:var(--ok);
    margin-top:8px;
  }
  @media (max-width:640px){
    .deploy-row{ grid-template-columns:1fr; gap:6px; }
  }

  /* ---------- testimonianze ---------- */
  .quotes{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .quote-card{ background:var(--bg-elev); padding:28px 26px; display:flex; flex-direction:column; }
  .quote-card--wide{ grid-column: 1 / -1; }
  .quote-card--wide .quote-text{ max-width:640px; }
  .quote-mark{ font-family:var(--display); font-size:32px; color:var(--accent); line-height:1; margin-bottom:10px; }
  .quote-text{ color:var(--ink-dim); font-size:14.5px; margin:0 0 18px; flex:1; }
  .quote-author{ font-family:var(--mono); font-size:12.5px; color:var(--ink); }
  .quote-role{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); display:block; margin-top:2px; }
  @media (max-width:820px){ .quotes{ grid-template-columns:1fr; } }

  /* ---------- diagnosi tecnica ---------- */
  .diag-panel{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .diag-body{ padding:26px 24px 28px; font-family:var(--mono); font-size:14px; }
  .diag-row{ display:flex; gap:14px; margin-bottom:14px; align-items:baseline; }
  .diag-row:last-child{ margin-bottom:0; }
  .diag-tag{
    flex:none; width:96px; font-size:12px; color:var(--accent);
    text-transform:lowercase;
  }
  .diag-text{ color:var(--ink-dim); }
  .diag-text strong{ color:var(--ink); font-weight:600; }
  .diag-row.diag-result .diag-text{ color:var(--ok); }

  .diag-tabbar{ padding:0 8px 0 16px; gap:6px; }
  .diag-tabs{ display:flex; gap:2px; margin-left:8px; overflow-x:auto; }
  .diag-tab{
    background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
    padding:11px 14px; border-bottom:2px solid transparent;
    white-space:nowrap; transition:color .15s, border-color .15s;
  }
  .diag-tab:hover{ color:var(--ink-dim); }
  .diag-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent); }

  /* ---------- flow signature ---------- */
  .flow-wrap{ text-align:center; }
  .flow{
    display:flex; align-items:center; justify-content:center; gap:18px;
    flex-wrap:wrap;
  }
  .flow-node{
    font-family:var(--mono); font-weight:600;
    font-size:clamp(20px,4vw,34px);
    color:var(--ink-dim);
    padding:10px 20px; border:1px solid var(--border); border-radius:8px;
    background:var(--bg-elev);
  }
  .flow-name{
    color:var(--bg); background:var(--accent); border-color:var(--accent);
  }
  .flow-arrow{
    font-family:var(--mono); font-size:clamp(18px,3vw,28px); color:var(--ink-faint);
  }
  .flow-caption{
    margin-top:22px; font-family:var(--mono); font-size:13px; color:var(--ink-faint);
  }
  @media (max-width:600px){
    .flow{ flex-direction:column; gap:10px; }
    .flow-arrow{ transform:rotate(90deg); }
  }

  /* ---------- evoluzione (tre ere) ---------- */
  .eras{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .era-card{ background:var(--bg-elev); padding:30px 26px; display:flex; flex-direction:column; }
  .era-version{
    font-family:var(--mono); font-size:12px; color:var(--accent);
    display:inline-block; margin-bottom:14px;
  }
  .era-tool{ font-family:var(--display); font-size:19px; font-weight:600; margin:0 0 4px; }
  .era-period{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin-bottom:16px; }
  .era-desc{ color:var(--ink-dim); font-size:14.5px; margin:0 0 16px; flex:1; }
  .era-quote{
    font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink);
    border-left:2px solid var(--accent); padding-left:12px; margin:0;
  }
  .era-arrow{
    display:none;
  }
  @media (max-width:820px){
    .eras{ grid-template-columns:1fr; }
  }

  /* ---------- grazie.log ---------- */
  .thanks-panel{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; margin-top:20px;
  }
  .thanks-body{ padding:24px 26px 26px; font-family:var(--mono); font-size:13.5px; }
  .thanks-row{
    display:flex; flex-wrap:wrap; gap:8px; padding:9px 0; border-bottom:1px solid var(--border);
  }
  .thanks-row:last-child{ border-bottom:none; }
  .thanks-name{ color:var(--ink); font-weight:600; flex:none; }
  .thanks-role{ color:var(--ink-faint); flex:none; }
  .thanks-quote{ color:var(--ink-dim); font-style:italic; }

  /* ---------- cta strip ---------- */
  .cta-strip{
    padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    background:var(--bg-elev);
  }
  .cta-strip .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  }
  .cta-strip p{
    font-family:var(--mono); font-size:14.5px; color:var(--ink-dim); margin:0;
  }
  .cta-strip p strong{ color:var(--ink); }

  /* ---------- agency badge (B2B outsourcing) ---------- */
  .agency-badge{
    margin-top:20px; padding:26px 28px;
    background:var(--accent-soft); border:1px solid rgba(232,163,61,0.35); border-radius:var(--radius);
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .agency-badge-text{ flex:1; min-width:240px; }
  .agency-badge-text strong{
    display:block; font-family:var(--display); font-size:17px; color:var(--ink);
    margin-bottom:6px;
  }
  .agency-badge-text span{ color:var(--ink-dim); font-size:14.5px; }
  .agency-badge .btn{ flex:none; }

  /* ---------- voce diretta ---------- */
  .voice-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .voice-card{ background:var(--bg-elev); padding:32px 30px; }
  .voice-context{
    font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
    margin-bottom:14px;
  }
  .voice-quote{
    font-family:var(--display); font-style:italic; font-size:18px; line-height:1.5;
    color:var(--ink); border-left:2px solid var(--accent); padding-left:16px; margin:0;
  }
  @media (max-width:900px){ .voice-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .voice-grid{ grid-template-columns:1fr; } }

  /* ---------- esperienza timeline ---------- */
  .timeline{ position:relative; padding-left:26px; }
  .timeline::before{
    content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border);
  }
  .tl-item{ position:relative; padding-bottom:22px; }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{
    content:''; position:absolute; left:-26px; top:4px; width:9px; height:9px;
    border-radius:50%; background:var(--bg); border:2px solid var(--accent);
  }
  .tl-period{ font-family:var(--mono); font-size:12.5px; color:var(--accent); margin-bottom:6px; }
  .tl-role{ font-family:var(--display); font-size:17px; font-weight:600; margin:0 0 6px; }
  .tl-desc{ color:var(--ink-dim); font-size:14.5px; margin:0; max-width:640px; }

  /* ---------- stack ---------- */
  .stack-panel{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 26px 22px;
  }
  .stack-cmd{ font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:18px; }
  .stack-cmd .prompt{ color:var(--accent); }
  .tags{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag{
    font-family:var(--mono); font-size:13px; color:var(--ink-dim);
    border:1px solid var(--border); border-radius:6px; padding:7px 12px;
    transition:border-color .15s, color .15s;
  }
  .tag:hover{ border-color:var(--accent); color:var(--accent); }

  /* ---------- footer / contact ---------- */
  footer{ border-top:1px solid var(--border); padding:72px 0 48px; }
  .contact-panel{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden;
  }
  .contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-copy{ padding:40px 38px; border-right:1px solid var(--border); }
  @media (max-width:760px){ .contact-copy{ border-right:none; border-bottom:1px solid var(--border); } }
  .closer-line{
    font-family:var(--display); font-weight:600; font-size:19px; line-height:1.4;
    color:var(--ink-dim); margin:0 0 20px;
  }
  .closer-line strong{ color:var(--accent); font-weight:600; }
  .contact-copy h2{ margin-bottom:14px; }
  .contact-copy p{ color:var(--ink-dim); font-size:15.5px; max-width:400px; }
  .contact-conf{ padding:40px 38px; font-family:var(--mono); font-size:14px; }
  .conf-comment{ color:var(--ink-faint); margin-bottom:14px; }
  .conf-line{ display:flex; gap:14px; margin-bottom:10px; color:var(--ink-dim); }
  @media (max-width:480px){
    .conf-line{ flex-direction:column; gap:2px; }
    .conf-key{ width:auto; }
    .contact-conf{ padding:32px 24px; }
  }
  .conf-key{ color:var(--ink-faint); width:78px; flex:none; }
  .conf-val{ color:var(--ink); overflow-wrap:break-word; min-width:0; }
  .conf-val a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px; transition:text-decoration-color .15s, color .15s; }
  .conf-val a:hover{ color:var(--accent); text-decoration-color:var(--accent); }
  .status-ok{ color:var(--ok); }

  .foot-note{
    text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-faint);
    margin-top:36px;
  }

  .privacy-block{
    max-width:640px; margin:28px auto 0; font-family:var(--mono); font-size:12px; color:var(--ink-faint);
  }
  .privacy-block summary{
    cursor:pointer; text-align:center; color:var(--ink-faint); list-style:none;
    transition:color .15s;
  }
  .privacy-block summary::-webkit-details-marker{ display:none; }
  .privacy-block summary:hover{ color:var(--accent); }
  .privacy-block summary::after{ content:' ▾'; }
  .privacy-block[open] summary::after{ content:' ▴'; }
  .privacy-block p{
    margin:14px 18px 0; line-height:1.7; color:var(--ink-dim);
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
  }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }