:root{
  --bg:#0b0f14;
  --panel: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.08);
  --text:#ffffff;
  --muted: rgba(255,255,255,.78);
  --blue:#1f9cf5;
  --blue2:#27a7ff;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, #16242f 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, #241f3d 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  background-attachment: fixed;
}
a{ color:#9fc9ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11,15,20,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{ display:flex; align-items:center; }
.logo{ width: clamp(170px, 18vw, 240px); height:auto; display:block; }

.nav{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; justify-content:flex-end; }
.nav a{ color: rgba(255,255,255,.86); font-weight:650; font-size:.95rem; }
.nav a:hover{ color:#ffffff; }
main{ max-width: 1120px; margin: 0 auto; padding: 22px 18px 64px; }

.hero{ padding: 54px 0 18px; }
.hero-inner{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items: start;
}
.hero h1{ font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.12; letter-spacing: .01em; margin: 0 0 14px; }
.lead{ color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 16px; }
.hero-card{
  background: rgba(7,14,19,.88);
  border: 1px solid rgba(88,155,214,.35);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.hero-card h3{ margin: 0 0 10px; }
.muted{ color: rgba(255,255,255,.72); font-size:.95rem; }

.badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-size: .85rem;
  margin: 6px 8px 0 0;
}
.hero-badges{ margin-top: 12px; }

.cta-row{ display:flex; gap: 12px; flex-wrap: wrap; align-items:center; }
.cta-row.center{ justify-content: center; padding-top: 8px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 750;
  letter-spacing: .02em;
  text-decoration:none;
  margin: 10px 0;
}
.btn.primary{
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0,149,255,.35);
}
.btn.primary:hover{ background: var(--blue2); }
.btn.secondary{
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: #ffffff;
}
.btn.secondary:hover{ background: rgba(255,255,255,.06); }

.section{ padding: 28px 0; }
.section.alt{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 20px;
  padding: 26px 18px;
}
.section-head{ margin-bottom: 14px; }
.section-head h2{ margin: 0 0 8px; font-size: clamp(1.35rem, 2.0vw, 2.0rem); }
.section-head p{ margin: 0; color: var(--muted); line-height: 1.6; }

.grid{ display:grid; gap: 22px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px;
  overflow: hidden;
}
.card.full{ margin-top: 18px; }
.card h3{ margin: 0 0 8px; font-size: 1.1rem; }
.card p{ margin: 0 0 10px; line-height: 1.6; color: rgba(255,255,255,.86); }
.card ul{ margin: 10px 0 0; padding-left: 18px; }
.card li{ margin: 8px 0; line-height: 1.45; color: rgba(255,255,255,.84); overflow-wrap:anywhere; }

.page-hero{ padding: 38px 0 10px; }
.page-hero h1{ margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-hero .lead{ margin-bottom: 0; }

.checklist{ list-style: none; padding-left: 0; margin: 10px 0 0; }
.checklist li{ margin: 10px 0; padding-left: 22px; position: relative; color: rgba(255,255,255,.88); }
.checklist li::before{ content: "✓"; position:absolute; left:0; top:0; color: rgba(79,177,255,.95); }

/* Footer */
.site-footer{ margin-top: 28px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-inner{ max-width: 1120px; margin:0 auto; padding: 18px 18px; display:flex; gap: 12px; justify-content:space-between; flex-wrap: wrap; color: rgba(255,255,255,.75); }
.footer-right{ display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }
.link-btn{ background:none; border:none; padding:0; color:#9fc9ff; cursor:pointer; text-decoration:underline; font: inherit; }
.link-btn:hover{ color:#ffffff; }

/* Cookie UI */
.cookie-banner{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  max-width: 980px;
  width: calc(100% - 32px);
  display: none;
  z-index: 9998;
}
.cookie-box{
  background: rgba(12,21,28,.95);
  border: 1px solid rgba(88,155,214,.45);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}
.cookie-box p{ margin:0; color: rgba(255,255,255,.86); line-height: 1.45; }
.cookie-actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cookie-links{ display:flex; gap: 14px; margin-top: 10px; align-items:center; flex-wrap: wrap; }

.cookie-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.cookie-modal-box{
  width: min(720px, calc(100% - 32px));
  background: #0c151c;
  border-radius: 16px;
  border: 1px solid rgba(88,155,214,.45);
  padding: 18px 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.65);
}
.cookie-modal-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.icon-btn{ background: transparent; border: 1px solid rgba(255,255,255,.18); color:#fff; border-radius: 10px; padding: 6px 10px; cursor:pointer; }
.cookie-option{ display:flex; gap: 12px; align-items:flex-start; padding: 14px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); margin-top: 12px; }
.cookie-option.locked{ opacity: .95; }
.cookie-option-title{ font-weight: 780; }
.cookie-option-desc{ color: rgba(255,255,255,.78); font-size: .95rem; margin-top: 6px; }
.cookie-option-state{ margin-left:auto; color: rgba(255,255,255,.7); font-size: .9rem; }

.switch{ position: relative; display:inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background: rgba(255,255,255,.18); transition: .2s; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.slider:before{ position:absolute; content:""; height: 20px; width: 20px; left: 3px; top: 2px; background: white; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider{ background: rgba(31,156,245,.45); border-color: rgba(31,156,245,.55); }
.switch input:checked + .slider:before{ transform: translateX(20px); }

.cookie-actions-right{ justify-content: flex-end; }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .grid.cols-2{ grid-template-columns: 1fr; }
  .grid.cols-3{ grid-template-columns: 1fr; }
  .nav{ gap: 10px; }
}

/* Active nav state */
.nav a.active{
  color:#ffffff;
  text-decoration:none;
  border-bottom: 2px solid rgba(31,156,245,.75);
  padding-bottom: 6px;
}
.nav a.nav-cta.active{
  border-bottom: 2px solid rgba(31,156,245,.75);
  padding-bottom: 6px;
}



/* Make CTA link consistent with other nav items (no permanent pill) */
.nav .nav-cta{
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

/* Home hero logo */
.hero-logo{
  width: min(360px, 68vw);
  height: auto;
  display: block;
  margin: 0 auto 18px auto;
  opacity: .98;
}


@media (max-width: 980px){
  .hero-logo{
  width: min(360px, 68vw);
  height: auto;
  display: block;
  margin: 0 auto 18px auto;
  opacity: .98;
}


}

/* Layout spacing improvements */
.section .grid{ margin-top: 18px; }
.section .grid + .grid{ margin-top: 22px; }
.card{ padding: 20px 20px; }

.hero-logo-fallback{ display:none; margin: 0 0 18px 0; }
.hero-content img.hero-logo:not([src]) + .hero-logo-fallback{ display:block; }

/* Header logo (small, proportional) */
.site-header .logo{
  width: 120px;
  max-width: 120px;
  height: auto;
}

/* Header logo: icon-only, very compact */
.site-header .logo{
  width: 64px;
  max-width: 64px;
  height: auto;
}


/* Mobile navigation */
.nav-toggle{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}
.nav-links{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; justify-content:flex-end; }
@media (max-width: 860px){
  .header-inner{ position: relative; }
  .nav-toggle{ display:flex; }
  /* keep logo left, toggle right */
  .nav{ width: 100%; }
  .nav-links{
    display:none;
    width: 100%;
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(11,15,20,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .nav-links a{ width: 100%; padding: 10px 10px; border-radius: 12px; }
  .nav-links a:hover{ background: rgba(255,255,255,.06); text-decoration:none; }
  .nav-open .nav-links{ display:flex; }
  .nav a.active{ border-bottom: none; background: rgba(31,156,245,.16); }
}

.nav-toggle{ margin-left: auto; }


/* Mobile header alignment tweak: keep toggle on the right */
@media (max-width: 860px){
  .header-inner{
    justify-content: space-between;
    gap: 12px;
  }
  .nav-toggle{ margin-left: auto; }
}

/* === Mobile menu final alignment fix === */
@media (max-width: 860px){
  .header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand{
    order: 1;
  }
  .nav-toggle{
    order: 2;
    margin-left: auto;
  }
  .nav{
    order: 3;
  }
}

/* Mobile nav: keep all items identical, including Contatti */
@media (max-width: 860px){
  .nav-links a,
  .nav-links a.nav-cta{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px;
  }
  .nav-links a.active,
  .nav-links a.nav-cta.active{
    background: rgba(31,156,245,.16) !important;
    border-bottom: none !important;
  }
}


/* === FINAL mobile header/menu alignment === */
@media (max-width: 860px){
  /* Header row: logo left, toggle right */
  .header-inner{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  .brand{ flex: 0 0 auto; }
  .nav-toggle{
    margin-left: auto;
    flex: 0 0 auto;
  }
  /* Keep nav container from affecting header row width */
  .nav{ width: auto; }

  /* Dropdown: full width, uniform items */
  .nav-links{
    align-items: stretch !important;
  }
  .nav-links a,
  .nav-links a.nav-cta{
    display:block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}