/* ===== Incentivato • styles.v2.css (CLEAN) ===== */

/* ---------- Tokens ---------- */
:root{
  --blue:#092f7a;
  --ink:#0b2233;
  --dark:#071c2a;
  --page:#0b1220;
  --card:#111a2b;
  --panel:#0e2030;

  --text:#e6edf3;
  --text-2:#d8e2f0;
  --muted:#b7c6dc;

  --primary:#3b82f6;
  --primary-600:#2563eb;

  --red:#ff5758;
  --green:#6cc58f;
  --green-soft:#b2ffad;

  --ring:#2b4d73;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* KPI sizing */
  --kpi-d: 240px;
  --kpi-gap: 3rem;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--page); color:var(--text); font-family:var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; line-height:1.55; font-size:16.5px;
}
a{ color:#9dbaff; text-underline-offset:2px }
a:hover{ color:#c7dbff }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.06) }
.topnav{ max-width:1200px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:12px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.brand img{ height:28px; width:auto }
.wordmark{ font-weight:800; letter-spacing:.18em; color:#fff; white-space:nowrap }
.wordmark .accent{ color:var(--red) }
.grow{ flex:1 }
.topnav ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0 }
.topnav a{ color:#d2deea; text-decoration:none }
.topnav a:hover{ color:#fff }

/* CTA (header) */
.topnav .nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border-radius:999px; font-weight:800; letter-spacing:.2px;
  color:#fff; text-decoration:none;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px -8px rgba(60,133,255,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.topnav .nav-cta:hover{ transform:translateY(-1px) }
.topnav .nav-cta:active{ transform:none }
@media (max-width:640px){
  .topnav .nav-cta span{ display:none }
  .topnav .nav-cta{ padding:0 10px; height:36px }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-block; text-decoration:none; font-weight:700 }
.btn.pill{ border-radius:9999px }
.btn.primary{ background:var(--red); color:#fff; padding:.8rem 1.2rem; border-radius:10px }
.btn.secondary{ border:2px solid var(--red); color:var(--red); padding:.7rem 1.1rem; border-radius:10px }
.btn.secondary:hover{ background:var(--red); color:#fff }

/* Hero CTA variants */
.btn.hero-primary{
  background:#1da1f2; color:#fff; border-radius:999px; padding:14px 26px; font-weight:800;
  box-shadow:0 2px 0 rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn.hero-outline{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85);
  border-radius:999px; padding:12px 24px; font-weight:700;
  backdrop-filter:saturate(120%) blur(2px);
}

/* ---------- Hero ---------- */
.hero-has-bg{ position:relative; min-height:80vh; display:grid; place-items:center; text-align:left;
  padding:8rem 1rem; background:#061b2b url('/jet2.webp') center/cover no-repeat }
.hero-has-bg::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.55)) }
.hero .hero-inner{ position:relative; z-index:1; max-width:1100px; padding:0 1rem }
.hero .hero-title{
  font-size: clamp(40px, 6.4vw, 64px);
  line-height: 1.06;
  font-weight: 800;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero .hero-title .red{ color:#ff5c5c }
.hero .hero-title .blue{ color:#1da1f2 }
.hero .cta-row{ display:flex; gap:18px; margin-top:22px; flex-wrap:wrap }
@media (max-width:1000px){
  .hero .hero-title{ text-align:center }
  .hero .cta-row{ justify-content:center }
}

/* ---------- KPI ---------- */
.kpi-strip{ background:#072136; padding:48px 0 }
.kpi-wrap{ max-width:1200px; margin:0 auto; display:flex; gap:var(--kpi-gap); justify-content:center; flex-wrap:wrap }
.kpi{ width: calc(var(--kpi-d) + 10px); display:flex; flex-direction:column; align-items:center; text-align:center }
.kpi .val, .kpi .circle{
  width: var(--kpi-d); height: var(--kpi-d);
  border: 8px solid var(--ring);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: transparent;
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight:800; letter-spacing:.2px; font-variant-numeric: tabular-nums;
  color: var(--green-soft);
  margin: 0 auto .9rem;
}
.kpi .label{ line-height:1.2; min-height:44px; display:flex; flex-direction:column; align-items:center }
.kpi .label small{ opacity:.85; margin-top:.25rem }
@media (max-width:900px){
  :root{ --kpi-d: 200px; --kpi-gap: 2rem }
}
@media (max-width:640px){
  :root{ --kpi-d: 170px; --kpi-gap: 1.5rem }
}

/* ---------- Sections & Cards ---------- */
.section{ max-width:1200px; margin:32px auto; padding:0 18px }
.section h2{ margin:.2rem 0 1rem 0; font-size:clamp(1.6rem,3vw,2rem); color:#fff }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--card);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:22px; color:var(--text-2);
  height:100%;
}
.card h3,.card h4{ margin:.2rem 0 .6rem 0; color:#fff }
.card p{ margin:.2rem 0 }
.card img{ width:100%; height:auto; border-radius:12px }
.card .cta-row{ justify-content:flex-start }

/* Product blocks */
.product-card{ position:relative; display:flex; flex-direction:column; gap:.7rem; height:100% }
.prod-icon{
  width:64px; height:64px; border-radius:14px; display:grid; place-items:center;
  background:#173b56; color:#cfe6ff; margin:0 auto 8px;
}
.product-card .cta-row{ margin-top:auto; justify-content:flex-start }
.product-card .btn{ width:max-content }

/* Partners */
.partners{ background:var(--page); padding:22px 0 18px }
.partners h2{ margin:0 18px 10px }
.marquee{ overflow:hidden; white-space:nowrap; position:relative; padding:8px 0 }
.track{ display:inline-flex; gap:90px; animation:partners 36s linear infinite }
.track a{ display:flex; align-items:center; filter:grayscale(100%); opacity:.85 }
.track img{ height:46px }
.track a:hover{ filter:none; opacity:1 }
@keyframes partners{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* Team */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }
.member{ background:var(--card); border-radius:14px; padding:18px; text-align:center }
.member img{ width:124px; height:124px; border-radius:50%; object-fit:cover; display:block; margin:8px auto 12px }

/* Blog */
.blog-quick .grid{ align-items:stretch }
.blog-quick .card{ display:flex; flex-direction:column; height:100%; border-radius:18px }
.blog-quick .card img{ height:180px; object-fit:cover; border-radius:12px }
.blog-quick .card .cta-row{ margin-top:auto; justify-content:flex-start }
.blog-quick .card .btn{ width:max-content }

.blog-long .article{
  display:grid; grid-template-columns:minmax(280px,55%) 1fr; gap:22px; align-items:center;
  border-radius:18px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.1); padding:18px;
}
.blog-long .article img{ width:100%; height:auto; border-radius:12px; object-fit:cover }
.blog-long .article h3{ font-size: clamp(22px, 2.4vw, 30px); margin:.4rem 0 .6rem }
.blog-long .article .btn{
  background:#ff5c5c; color:#fff; border:none; border-radius:999px; padding:12px 22px; font-weight:800;
  box-shadow:0 2px 0 rgba(0,0,0,.2);
}
@media (max-width:900px){ .blog-long .article{ grid-template-columns:1fr } }

/* Latest incentives helpers */
.latest-cards .card{ display:flex }
.latest-cards .card-content{ display:flex; flex-direction:column; min-height:100% }
.latest-cards .meta-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem }
.latest-cards .region-line{ margin:.5rem 0 1rem; opacity:.9 }
.latest-cards .cta-row{ margin-top:auto }

/* ---------- Forms / Inputs ---------- */
label{ color:#e1ebf6 }
input:not([type="checkbox"]), select{
  width:100%; margin-top:6px; padding:10px 12px;
  background:#0a1824; color:#f3f7fb; border:1px solid rgba(255,255,255,.22);
  border-radius:10px; outline:0; appearance:none;
}
input::placeholder, select::placeholder{ color:#b8c7d8 }
input:not([type="checkbox"]):focus, select:focus{
  border-color:var(--primary); box-shadow:0 0 0 6px rgba(100,163,255,.35)
}
.check input[type="checkbox"]{
  appearance:auto; width:18px; height:18px; margin-top:3px; accent-color:#3c85ff; background:transparent; border:none;
}

/* ---------- Footer ---------- */
.site-footer{ margin-top:18px; background:var(--ink) }
.site-footer .wrap{ max-width:1150px; margin:0 auto; padding:10px 16px 24px }
.footer-links.primary{
  display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:10px 24px;
}
.footer-links.primary .col{ display:flex; flex-direction:column; gap:8px }
.footer-links.secondary{ display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 8px; opacity:.95 }
.footer-divider{ height:1px; background:rgba(255,255,255,.12); margin:10px 0 12px }
.copyright{ text-align:center; opacity:.9; line-height:1.5 }
@media (max-width:900px){ .footer-links.primary{ grid-template-columns:repeat(2, minmax(200px,1fr)) } }
@media (max-width:560px){ .footer-links.primary{ grid-template-columns:1fr } }

/* Optional legal footer */
.legal-footer{ background:#000; color:#fff; padding:22px 18px; margin-top:36px }
.legal-footer .wrap{ max-width:1200px; margin:0 auto; text-align:center }
.legal-footer p{ margin:10px 0; font-size:14px }
.legal-footer a{ color:#fff; text-decoration:underline }
.legal-footer a:hover{ color:#c9e0ff }

/* ===== Incentivi (cards) — SCOPED & DEDUPED ===== */
.incentivi-page .card{ position:relative; padding:22px; border-radius:14px }
.incentivi-page .card-actions-sep{ height:1px; background:rgba(255,255,255,.10); margin:14px 0 }

/* One row: left group + right group */
.incentivi-page .actions-row{
  display:flex; align-items:center; justify-content:flex-start;
  gap:16px; width:100%; flex-wrap:nowrap; min-width:0;
}
.incentivi-page .actions-left{ display:flex; align-items:center; gap:16px; min-width:0 }
.incentivi-page .actions-right{ display:flex; align-items:center; gap:16px; min-width:0; margin-left:auto }

/* Buttons */
.incentivi-page .cta{
  display:inline-flex; align-items:center; gap:12px;
  height:44px; padding:0 16px; border-radius:12px;
  font-weight:700; font-size:14px; line-height:1;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  white-space:nowrap; flex:0 0 auto;
  transition:transform .05s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
}
.incentivi-page .cta svg{ width:18px; height:18px }

/* Icon boxes */
.incentivi-page .cta-ibox,
.incentivi-page .cta-rbox{
  width:28px; height:28px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 28px; line-height:1;
}

/* Colors */
.incentivi-page .cta-bando{ background:#192735; color:#e6eef7; border-color:rgba(255,255,255,.14) }
.incentivi-page .cta-rbox{ background:rgba(255,255,255,.15); color:#e6eef7 }
.incentivi-page .cta-quote{ background:#1769d1; color:#ffffff; border-color:#1769d1 }
.incentivi-page .cta-ibox{ background:#ffffff; color:#1769d1 }

.incentivi-page .cta-bando:hover,
.incentivi-page .cta-quote:hover{ transform:translateY(-1px) }

/* Stack on very small screens */
@media (max-width: 460px){
  .incentivi-page .actions-row{ flex-direction:column; align-items:stretch; gap:12px }
  .incentivi-page .actions-right{ margin-left:0 }
}
@media (max-width: 360px){
  .incentivi-page .cta{ height:42px; padding:0 14px }
  .incentivi-page .cta-ibox, .incentivi-page .cta-rbox{ width:26px; height:26px; flex-basis:26px }
}

/* ===== Bottom callout banner ===== */
.join-banner{ margin:28px 0 8px }
.join-inner{
  max-width:1180px; margin:0 auto; padding:34px 18px;
  background:linear-gradient(90deg,#2f5ef7,#3849f2,#4b42e3);
  border-radius:18px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  text-align:center; color:#fff
}
.join-inner h2{ margin:0 0 8px; font-size:clamp(20px,3.2vw,28px); font-weight:900 }
.join-inner p{ margin:0 auto 16px; max-width:780px; line-height:1.6; opacity:.95 }
.join-cta{
  display:inline-block; padding:10px 16px; border-radius:10px;
  background:#fff; color:#15315e; text-decoration:none; font-weight:800;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 24px -10px rgba(0,0,0,.35)
}
.join-cta:hover{ transform:translateY(-1px) }
.join-cta:active{ transform:translateY(0) }
@media (max-width:640px){
  .join-inner{ padding:26px 14px; border-radius:16px }
}

/* ===== Fancy count pill ===== */
.count-pill{
  position:relative; display:grid; grid-auto-flow:row; place-items:center;
  min-width:108px; padding:8px 14px 9px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 26px -12px rgba(0,0,0,.45);
  backdrop-filter:saturate(140%) blur(4px);
}
.count-pill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
  background:conic-gradient(from 140deg, #6aa9ff, #7ed3ff 25%, transparent 60%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.25;
}
.count-num{ font-size:20px; line-height:1; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.2px }
.count-label{ margin-top:2px; font-size:13px; font-weight:800; opacity:.92 }
.count-pill:hover{ transform:translateY(-1px); transition:transform .15s ease }
.empty .btn-support{
  display:inline-block; margin-top:10px; border-radius:999px;
  padding:10px 16px; color:#fff !important;
  background:linear-gradient(180deg,#64a3ff,#3c85ff) !important;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 24px -10px rgba(60,133,255,.45)
}
.empty .btn-support:hover{ transform:translateY(-1px) }
.empty .btn-support:focus-visible{ outline:3px solid #64a3ff66; outline-offset:2px }

/* ================= MOBILE VIEW FIXES ================= */
@media (max-width: 720px){
  .topnav{ padding:10px 12px; gap:10px }
  .brand img{ height:22px }
  .wordmark{ font-size:12px; letter-spacing:.14em }
  .topnav ul{ gap:14px; flex-wrap:wrap; row-gap:8px }
  .topnav .nav-cta{ height:34px; padding:0 12px; font-weight:800 }
}
@media (max-width: 420px){
  .topnav ul{ gap:12px }
  .topnav .nav-cta{ order:3; margin-left:auto }
}
@media (max-width: 640px){
  .hero-has-bg{ min-height:64vh; padding:5.5rem 14px }
  .hero .hero-title{ font-size: clamp(28px, 8vw, 36px); margin-bottom:14px; text-align:center }
  .hero .cta-row{ justify-content:center; gap:12px }
  .btn.hero-primary{ padding:12px 20px }
  .btn.hero-outline{ padding:10px 18px }
}
@media (max-width: 900px){
  :root{ --kpi-d: 190px; --kpi-gap: 1.8rem }
}
@media (max-width: 640px){
  :root{ --kpi-d: 150px; --kpi-gap: 1.2rem }
  .kpi-strip{ padding:32px 0 }
  .kpi .val, .kpi .circle{ font-size: clamp(26px, 7vw, 34px); line-height:1 }
  .kpi .label{ min-height:auto; font-size:14px }
}
@media (max-width: 380px){
  :root{ --kpi-d: 128px; --kpi-gap: 1rem }
  .kpi .val, .kpi .circle{ font-size:24px }
}
@media (max-width: 640px){
  .section{ margin:24px auto; padding:0 14px }
  .grid{ grid-template-columns:1fr; gap:14px }
  .card{ padding:16px; border-radius:12px }
  .blog-quick .card img{ height:150px }
  .blog-long .article{ grid-template-columns:1fr; padding:14px }
}
@media (max-width: 640px){
  .track{ gap:46px; animation-duration:42s }
  .track img{ height:36px }
}
@media (max-width: 640px){
  .member{ padding:14px }
  .member img{ width:100px; height:100px }
}
@media (max-width: 640px){
  .site-footer .wrap{ padding: 8px 14px 20px }
  .footer-links.primary{ grid-template-columns:1fr }
  .footer-links.secondary{ gap:10px; margin:10px 0 6px }
  .footer-divider{ margin:8px 0 10px }
}
@media (max-width: 480px){
  .ck-mini{ left:10px; right:10px; max-width:none; padding:10px }
  .ck-actions{ width:100%; justify-content:flex-end; gap:6px }
  .ck-btn{ padding:8px 10px }
}

/* ===== Burger / Drawer (UNIFIED) ===== */
.nav-links{ display:flex; align-items:center; gap:12px; margin-left:auto }
.nav-toggle{ display:none }

/* Mobile drawer — transform-based only */
@media (max-width: 860px){
  .topnav{ position:relative; z-index:1002 }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-left:6px;
    background:transparent; border:1px solid rgba(255,255,255,.18);
    border-radius:10px; cursor:pointer; position:relative; overflow:hidden;
  }
  .nav-toggle .bar{
    position:absolute; left:9px; right:9px; height:2px; background:#fff;
    transition:transform .22s ease, opacity .18s ease, top .22s ease;
  }
  .nav-toggle .bar:nth-child(1){ top:12px }
  .nav-toggle .bar:nth-child(2){ top:19px }
  .nav-toggle .bar:nth-child(3){ top:26px }

  /* Drawer */
  .topnav .nav-links{
    position:fixed; top:0; right:0; bottom:0;
    width:86vw; max-width:360px;
    background:var(--panel, #0b1724);
    transform:translateX(100%);          /* closed */
    transition:transform .25s ease;
    padding:72px 16px 16px;              /* space for header */
    box-shadow:-24px 0 60px rgba(0,0,0,.35);
    z-index:1002; display:block;
  }
  .topnav.open .nav-links{ transform:translateX(0) } /* open */

  .nav-links ul{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:6px 0 0; padding:0 }
  .nav-links a{ color:#d2deea; text-decoration:none; font-size:16px }
  .nav-links a:hover{ color:#fff }
  .nav-links .nav-cta{ width:100%; height:44px; justify-content:center; font-weight:800 }
  .nav-links .nav-cta span{ display:inline !important }

  /* Bars → "X" */
  .topnav.open .nav-toggle .bar:nth-child(1){ top:19px; transform:rotate(45deg) }
  .topnav.open .nav-toggle .bar:nth-child(2){ opacity:0 }
  .topnav.open .nav-toggle .bar:nth-child(3){ top:19px; transform:rotate(-45deg) }

  /* Backdrop */
  #nav-dim{
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1001;
  }
}

/* Desktop */
@media (min-width: 861px){
  .nav-toggle{ display:none }
  .topnav .nav-links{
    position:static; transform:none; padding:0; box-shadow:none; display:block;
  }
  #nav-dim{ display:none !important }
}

/* Desktop: keep the nav row as a single flex line */
@media (min-width: 861px){
  .topnav .nav-links{
    display: flex;           /* was block */
    align-items: center;
    gap: 12px;
    position: static;
    transform: none;
    padding: 0;
    box-shadow: none;
  }
}