:root{
    --void:#0c0d0a;
    --panel:#15170f;
    --olive:#3c4a26;
    --olive-dim:#2a331b;
    --tag-steel:#c9cbb8;
    --bone:#eceadf;
    --alert:#e33d2c;
    --alert-dim:#7a1d13;
    --line: rgba(201,203,184,0.16);
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--bone);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  a{color:inherit;}

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size:0.72rem;
    color:var(--alert);
  }

  h1,h2,h3{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    line-height:1.05;
  }

  /* ===== NAV ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 6vw;
    background:linear-gradient(to bottom, rgba(12,13,10,0.92), rgba(12,13,10,0));
  }
  .nav-right{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(227,61,44,0.35));}
  .brand span{font-family:'Oswald', sans-serif; font-weight:700; letter-spacing:0.08em; font-size:1rem;}
  .nav-join{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.05em;
    border:1px solid var(--line);
    padding:9px 18px;
    text-decoration:none;
    color:var(--bone);
    background:var(--btn-bg, rgba(42, 42, 42, 0.9));
    transition:border-color .2s, color .2s;
  }
  .nav-join:hover{border-color:var(--alert); color:var(--alert);}
  .nav-donation{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    border:1px solid var(--line);
    background:var(--btn-bg, rgba(42, 42, 42, 0.9));
    color:var(--bone);
    cursor:pointer;
    transition:border-color .2s, color .2s;
    padding:0;
  }
  .nav-donation:hover{border-color:var(--alert); color:var(--alert);}
  .nav-donation svg{width:18px; height:18px;}
  .nav-text-short{display:none;}

  /* ===== DROPDOWN MENU ===== */
  .nav-dropdown{position:relative;}
  .dropdown-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    border:1px solid var(--line);
    background:var(--btn-bg, rgba(42, 42, 42, 0.9));
    color:var(--bone);
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .dropdown-toggle:hover{border-color:var(--alert); color:var(--alert);}
  .dropdown-toggle svg{width:18px; height:18px;}
  .dropdown-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:180px;
    background:rgba(21, 23, 15, 0.92);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:60;
  }
  .nav-dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .dropdown-menu a{
    display:block;
    padding:12px 20px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--bone);
    text-decoration:none;
    transition:background .18s, color .18s;
  }
  .dropdown-menu a:hover{background:var(--olive-dim); color:var(--alert);}

  /* ===== CONTATTI SUBMENU ===== */
  .contatti-item{position:relative;}
  .contatti-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; cursor:pointer;
  }
  .contatti-toggle::after{
    content:"→"; font-size:0.65rem; margin-left:8px; opacity:0.5;
  }
  .contatti-submenu{
    position:absolute; left:100%; top:0;
    min-width:180px;
    background:rgba(21, 23, 15, 0.96);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    padding:8px 0;
    opacity:0; visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:70;
  }
  .contatti-item.open .contatti-submenu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .contatti-submenu a{
    display:block;
    padding:12px 20px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--bone);
    text-decoration:none;
    transition:background .18s, color .18s;
  }
  .contatti-submenu a:hover{background:var(--olive-dim); color:var(--alert);}
  /* ===== SOCIAL SUBMENU ===== */
  .social-item{position:relative;}
  .social-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; cursor:pointer;
  }
  .social-toggle::after{
    content:"→"; font-size:0.65rem; margin-left:8px; opacity:0.5;
  }
  .social-submenu{
    position:absolute; left:100%; top:0;
    min-width:180px;
    background:rgba(21, 23, 15, 0.96);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    padding:8px 0;
    opacity:0; visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:70;
  }
  .social-item.open .social-submenu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .social-submenu a{
    display:block;
    padding:12px 20px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--bone);
    text-decoration:none;
    transition:background .18s, color .18s;
  }
  .social-submenu a:hover{background:var(--olive-dim); color:var(--alert);}

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:120px 6vw 80px;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-2;
    background-image:
      linear-gradient(180deg, rgba(12,13,10,0.72) 0%, rgba(12,13,10,0.85) 55%, var(--void) 100%),
      url('../img/bg1.jpg');
    background-size:cover;
    background-position:center 30%;
  }
  .hero-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 30%;
    filter:saturate(0.7) contrast(1.05) brightness(1);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(12,13,10,0.35) 0%, rgba(12,13,10,0.55) 45%, rgba(12,13,10,0.85) 100%);
    pointer-events:none;
  }
  .hero-bg::after{
    content:"";
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:multiply;
    opacity:0.35;
  }

  .hero-logo{
    width:clamp(200px, 60vw, 300px); height:auto;
    object-fit:contain;
    margin-bottom:26px;
    animation:drop-in 0.9s cubic-bezier(.2,.9,.2,1) both;
  }
  @keyframes drop-in{
    from{opacity:0; transform:translateY(-18px) scale(0.94);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }

  .hero h1{
    font-size:clamp(2.6rem, 8vw, 5.4rem);
    font-weight:700;
    color:var(--bone);
    text-shadow:0 2px 4px rgba(0,0,0,0.9), 0 8px 40px rgba(0,0,0,0.75);
  }
  .hero h1 .hit{color:var(--alert);}

  .eyebrow{
    text-shadow:0 2px 8px rgba(0,0,0,0.8);
  }

  .hero-sub{
    max-width:560px;
    margin:20px auto 0;
    font-size:1.05rem;
    font-weight:600;
    color:var(--bone);
    line-height:1.6;
    text-shadow:0 2px 10px rgba(0,0,0,0.85);
  }

  .cta-row{
    margin-top:38px;
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  }

  .btn-primary{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    background:var(--alert);
    color:var(--void);
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    letter-spacing:0.04em;
    text-decoration:none;
    padding:16px 30px;
    font-size:0.95rem;
    text-transform:uppercase;
    clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 0 0 0 rgba(227,61,44,0.5);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(227,61,44,0.35);}
  .btn-primary svg{flex:none; width:17px; height:17px;}

  .btn-secondary{
    display:inline-flex; align-items:center;
    border:1px solid var(--line);
    color:var(--bone);
    text-decoration:none;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.04em;
    padding:16px 26px;
    text-transform:uppercase;
    transition:border-color .2s;
  }
  .btn-secondary:hover{border-color:var(--tag-steel);}

  /* ===== SECTION SHELL ===== */
  section{padding:110px 6vw;}
  .section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
  .section-head h2{font-size:clamp(1.8rem, 4vw, 2.6rem); margin-top:10px;}
  .section-head p{color:var(--tag-steel); margin-top:14px; line-height:1.6;}

  /* ===== ABOUT / DOG TAG ===== */
  #chi-siamo{
    position:relative;
    background-image:linear-gradient(180deg, rgba(8,10,6,0.82), rgba(8,10,6,0.90)), url('../img/bg2.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    font-weight:900;
  }
  #chi-siamo .eyebrow{font-size:clamp(0.85rem, 2.2vw, 1.1rem);}
  #chi-siamo h3{font-size:clamp(1.4rem, 3.5vw, 1.9rem);}
  #chi-siamo .about-copy p{font-size:clamp(0.9rem, 2.2vw, 1.1rem);}
  #chi-siamo .about-copy strong{color:var(--bone);}
  .features .eyebrow,.final-cta .eyebrow,.tools-header .eyebrow{font-size:clamp(0.85rem, 2.2vw, 1.1rem);}
  .about{
    display:flex; justify-content:center;
    max-width:1080px; margin:0 auto;
    position:relative; z-index:1;
  }
  .about-copy{text-align:center; max-width:640px;}
  .about-copy p{color:var(--tag-steel); line-height:1.75; margin-top:16px; font-size:0.98rem;}
  .about-copy strong{color:var(--bone);}

  @media (max-width: 900px){
    #chi-siamo{ background-attachment:scroll; }
  }

  /* ===== FEATURES ===== */
  .features{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:visible;}
  .feature-grid{
    max-width:1080px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line);
    align-items:stretch;
  }
  .feature-card{
    background:var(--panel);
    padding:34px 26px;
    display:flex; flex-direction:column;
    transition:background .2s;
  }
  .feature-card:hover{background:var(--olive-dim);}
  .feature-icon{
    width:40px; height:40px;
    border:1px solid var(--alert);
    display:flex; align-items:center; justify-content:center;
    color:var(--alert);
    margin-bottom:18px;
    flex-shrink:0;
  }
  .feature-icon svg{width:20px; height:20px;}
  .feature-card h3{font-size:1.05rem; letter-spacing:0.03em;}
  .feature-card p{color:var(--tag-steel); font-size:0.92rem; margin-top:10px; line-height:1.6; flex-grow:1;}

  /* ===== FINAL CTA ===== */
  .final-cta{
    text-align:center;
    background:radial-gradient(ellipse at center, var(--olive-dim) 0%, var(--void) 70%);
    border-top:1px solid var(--line);
  }
  .final-cta h2{font-size:clamp(2rem, 5vw, 3.2rem);}
  .final-cta p{color:var(--tag-steel); max-width:480px; margin:16px auto 0; line-height:1.6;}
  .final-cta .cta-row{margin-top:32px;}

  /* ===== DISCORD STATS ===== */
  .discord-stats{
    margin-top:28px;
    text-align:center;
  }
  .discord-stats-inner{
    display:inline-flex;
    align-items:center;
    gap:18px;
    background:rgba(42,42,42,0.6);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 22px;
    backdrop-filter:blur(6px);
  }
  .discord-stat-header{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-right:6px;
  }
  .discord-stat-icon{
    width:22px; height:22px;
    color:#5865F2;
  }
  .discord-stat-title{
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--bone);
    white-space:nowrap;
  }
  .discord-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .discord-stat-number{
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    font-weight:700;
    color:var(--bone);
    line-height:1;
  }
  .discord-stat-label{
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--tag-steel);
  }
  .discord-stat-divider{
    width:1px;
    height:36px;
    background:var(--line);
  }

  /* Fix overflow / testo tagliato statistiche Discord su mobile */
  @media (max-width: 520px) {
    .discord-stats-inner {
      gap: 10px;
      padding: 12px 14px;
      max-width: 100%;
      flex-wrap: wrap;
      justify-content: center;
    }

    .discord-stat-header {
      gap: 6px;
      margin-right: 0;
    }

    .discord-stat-title {
      font-size: 0.68rem;
      letter-spacing: 0.06em;
    }

    .discord-stat-number {
      font-size: 1.35rem;
    }

    .discord-stat-label {
      font-size: 0.62rem;
    }

    .discord-stat-divider {
      height: 28px;
    }

    .discord-stat-icon {
      width: 18px;
      height: 18px;
    }
  }

  /* ===== TOOLS OVERLAY ===== */
  .tools-overlay{
    position:fixed; inset:0; z-index:100;
    display:none; align-items:center; justify-content:center;
    padding:20px;
    background:rgba(12,13,10,0.85);
    backdrop-filter:blur(8px);
    opacity:0; transition:opacity .25s ease;
  }
  .tools-overlay.active{
    display:flex; opacity:1;
  }
  .tools-modal{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    max-width:800px; width:100%;
    max-height:85vh; overflow-y:auto;
    position:relative;
    padding:40px 34px 34px;
    box-shadow:0 30px 60px rgba(0,0,0,0.4);
  }
  .tools-close{
    position:absolute; top:16px; right:16px;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
    background:transparent; color:var(--bone);
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .tools-close:hover{border-color:var(--alert); color:var(--alert);}
  .tools-close svg{width:16px; height:16px;}
  .tools-header{text-align:center; margin-bottom:34px;}
  .tools-header h2{font-size:clamp(1.8rem, 4vw, 2.6rem); margin-top:10px;}
  .tools-header p{color:var(--tag-steel); margin-top:14px; line-height:1.6;}
  .wip-badge{
    display:block;
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--alert);
    background:rgba(227,61,44,0.1);
    border:1px solid var(--alert);
    border-radius:8px;
    padding:12px 20px;
    margin:0 auto 34px;
    max-width:fit-content;
    animation:pulse-alert 2s ease-in-out infinite;
  }
  .wip-msg{
    text-align:center;
    color:var(--tag-steel);
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    margin-top:18px;
  }
  #donationOverlay .wip-msg{
    max-width:520px;
    margin:18px auto 0;
    text-align:left;
    line-height:1.7;
    color:var(--tag-steel);
  }
  #donationOverlay .donation-badge-link{
    text-decoration:none;
    cursor:pointer;
    color:#7dd3fc;
    background:rgba(7,89,133,0.12);
    border:1px solid #7dd3fc;
    border-radius:8px;
    padding:14px 28px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    display:inline-block;
    transition:color .2s, background .2s;
  }
  #donationOverlay .donation-badge-wrapper{
    text-align:center;
    margin-bottom:28px;
  }
  #donationOverlay .donation-badge-link:hover{
    color:#fff;
    background:rgba(7,89,133,0.35);
  }
  @keyframes pulse-alert{
    0%,100%{opacity:0.7;}
    50%{opacity:1;}
  }
  .dropdown-menu{min-width:160px;}
  .tools-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line);
    align-items:stretch;
  }
  .tool-card{
    background:var(--panel);
    padding:34px 26px;
    display:flex; flex-direction:column;
    transition:background .2s;
  }
  .tool-card:hover{background:var(--olive-dim);}
  .tool-icon{
    width:40px; height:40px;
    border:1px solid var(--alert);
    display:flex; align-items:center; justify-content:center;
    color:var(--alert);
    margin-bottom:18px;
    flex-shrink:0;
  }
  .tool-icon svg{width:20px; height:20px;}
  .tool-card h3{font-size:1.05rem; letter-spacing:0.03em;}
  .tool-card p{color:var(--tag-steel); font-size:0.92rem; margin-top:10px; line-height:1.6; flex-grow:1;}
  .tool-link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--alert); text-decoration:none;
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem; letter-spacing:0.04em;
    margin-top:14px;
    transition:color .18s;
  }
  .tool-link:hover{color:var(--bone);}

  @media (max-width:820px){
    .feature-grid{grid-template-columns:1fr;}
    .tools-grid{grid-template-columns:1fr;}
  }

  footer{
    padding:34px 6vw;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    border-top:1px solid var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    color:var(--tag-steel);
    letter-spacing:0.04em;
  }

  a:focus-visible, button:focus-visible{outline:2px solid var(--alert); outline-offset:3px;}

  #chi-siamo,
  .features {
    height: auto !important;
    min-height: 0 !important;
  }
  section {
    overflow: visible;
  }

  /* ===== MOBILE / TABLET OPTIMIZATIONS ===== */
  @media (max-width: 768px){
    header{padding:14px 5vw;}
    .nav-right{gap:10px;}
    .nav-join{font-size:0.7rem; padding:7px 14px;}

    .hero{padding:80px 6vw 50px;}
    .hero h1{font-size:clamp(2rem, 9vw, 5.4rem);}
    .hero-sub{font-size:0.95rem;}
    .cta-row{gap:12px;}
    .btn-primary{padding:14px 22px; font-size:0.85rem;}
    .btn-secondary{padding:14px 22px; font-size:0.8rem;}

    section{padding:70px 6vw;}
    .section-head{margin:0 auto 40px;}
    .section-head h2{font-size:clamp(1.5rem, 5vw, 2.6rem);}

    .feature-card{padding:24px 18px;}
    .feature-card h3{font-size:0.95rem;}
    .feature-card p{font-size:0.85rem;}

    .tools-modal{padding:30px 22px;}
    footer{font-size:0.7rem; gap:10px;}
  }

@media (max-width: 480px){
    .nav-text-full{display:none;}
    .nav-text-short{display:inline;}

    .hero{padding:60px 5vw 40px;}
    .hero-sub{font-size:0.9rem;}
    .cta-row{gap:10px;}
    .btn-primary{padding:12px 18px; font-size:0.8rem;}
    .btn-secondary{padding:12px 18px; font-size:0.75rem;}

    section{padding:50px 5vw;}
    .feature-card{padding:20px 16px;}
    .tools-modal{padding:24px 18px;}

    #donationOverlay .wip-badge{
      color:#7dd3fc;
      background:rgba(7,89,133,0.12);
      border-color:#7dd3fc;
      animation:none;
    }
    #donationOverlay .wip-msg{
      max-width:520px;
      margin:18px auto 0;
      text-align:left;
      line-height:1.7;
      color:var(--tag-steel);
    }

    .dropdown-menu{min-width:160px;}

    /* Nasconde solo il cuore su mobile */
    .nav-donation {
      display: none !important;
    }
  }

/* ===== FIX DEFINITIVO BANDA NERA ===== */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

/* I sottomenu su mobile si aprono verso il basso */
@media (max-width: 768px) {
  .contatti-submenu,
  .social-submenu {
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    min-width: 160px;
    transform: translateY(-6px);
  }

  .contatti-item.open .contatti-submenu,
  .social-item.open .social-submenu {
    transform: translateY(0);
  }
}