:root {

      --color-bg: #050814;

      --color-bg-alt: #0b1020;

      --color-primary: #0a84ff;

      --color-primary-soft: rgba(10, 132, 255, 0.12);

      --color-accent: #00d4a6;

      --color-text: #f9fafb;

      --color-text-muted: #9ca3af;

      --color-border: #1f2933;

      --color-danger: #f97373;

      --max-width: 1120px;

      --radius-lg: 18px;

      --radius-md: 12px;

      --radius-pill: 999px;

      --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.45);

      --shadow-chip: 0 10px 25px rgba(15, 23, 42, 0.7);

    }



    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    body {

      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

       background: radial-gradient(circle at top, #111827 0, #020617 55%, #000 100%); /* tutto scuro  */

      /* background: linear-gradient(to top right, #050814 0%, #0a84ff 40%, #00d4a6 100%); */

      /* background: radial-gradient(circle at bottom left, #050814 0%, #0a84ff 50%, #00d4a6 100%); */ 

      color: var(--color-text);

      line-height: 1.6;

      -webkit-font-smoothing: antialiased;

    }



    a {

      color: inherit;

      text-decoration: none;

    }



    img {

      max-width: 100%;

      display: block;

    }



    .page {

      min-height: 100vh;

      display: flex;

      flex-direction: column;

    }



    header {

      /* border-bottom: 1px solid rgba(148, 163, 184, 0.12);

      backdrop-filter: blur(18px);

      background: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.6));

      position: sticky;

      top: 0;

      z-index: 20; */

    }



    .nav {

      max-width: var(--max-width);

      margin: 0 auto;

      padding: 14px 20px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 16px;

    }



    .nav-left {

      display: flex;

      align-items: center;

      gap: 10px;

    }



    .logo-img {

        width: 36px;

        height: 36px;

        object-fit: contain;

        border-radius: 8px;

        box-shadow: 0 0 0 2px rgba(255,255,255,0.08);

    }



    .logo-mark {

      width: 32px;

      height: 32px;

      border-radius: 12px;

      background: radial-gradient(circle at 30% 20%, #38bdf8, #0f172a 55%, #020617 100%);

      display: flex;

      align-items: center;

      justify-content: center;

      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.9);

      position: relative;

      overflow: hidden;

    }



    .logo-mark::after {

      content: "";

      position: absolute;

      inset: 0;

      background: radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.18), transparent 55%);

      mix-blend-mode: screen;

    }



    .logo-mark span {

      font-weight: 700;

      font-size: 18px;

      letter-spacing: 0.03em;

      color: #e5f2ff;

    }



    .logo-text {

      font-weight: 600;

      letter-spacing: 0.06em;

      font-size: 15px;

      text-transform: uppercase;

      color: #e5e7eb;

    }



    .nav-right {

      display: flex;

      align-items: center;

      gap: 10px;

    }



    .nav-pill {

      padding: 6px 12px;

      border-radius: var(--radius-pill);

      border: 1px solid rgba(148, 163, 184, 0.35);

      font-size: 12px;

      color: var(--color-text-muted);

      display: flex;

      align-items: center;

      gap: 6px;

      background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.25), rgba(15, 23, 42, 0.9));

    }



    .nav-pill-dot {

      width: 7px;

      height: 7px;

      border-radius: 999px;

      background: #22c55e;

      box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18);

    }



    .btn-primary {

      border-radius: var(--radius-pill);

      padding: 9px 18px;

      font-size: 13px;

      font-weight: 600;

      border: none;

      cursor: pointer;

      background: linear-gradient(135deg, #0ea5e9, #0a84ff);

      color: #f9fafb;

      display: inline-flex;

      align-items: center;

      gap: 8px;

      box-shadow: 0 18px 40px rgba(37, 99, 235, 0.55);

      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;

      white-space: nowrap;

    }



    .btn-primary:hover {

      transform: translateY(-1px);

      box-shadow: 0 22px 55px rgba(37, 99, 235, 0.7);

      background: linear-gradient(135deg, #38bdf8, #1d4ed8);

    }



    .btn-secondary {

      border-radius: var(--radius-pill);

      padding: 9px 16px;

      font-size: 13px;

      font-weight: 500;

      border: 1px solid rgba(148, 163, 184, 0.5);

      cursor: pointer;

      background: rgba(15, 23, 42, 0.9);

      color: var(--color-text-muted);

      display: inline-flex;

      align-items: center;

      gap: 8px;

      transition: background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out;

      white-space: nowrap;

    }



    .btn-secondary:hover {

      background: rgba(15, 23, 42, 1);

      border-color: rgba(148, 163, 184, 0.9);

      color: #e5e7eb;

    }



    .btn-mobile-tech {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      background: var(--color-primary); /* Il tuo blu */

      color: white !important;

      padding: 14px 28px;

      border-radius: var(--radius-md);

      font-weight: 600;

      text-decoration: none;

      transition: all 0.3s ease;

      box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);

      width: 100%; /* Su mobile occupa tutta la riga */

      max-width: 350px; /* Non diventa troppo gigante su desktop */

    }



    .btn-mobile-tech:hover {

      transform: translateY(-2px);

      box-shadow: 0 6px 20px rgba(10, 132, 255, 0.4);

      filter: brightness(1.1);

      transform: translateX(5px);

      transition: transform 0.3s ease;

    }



    .btn-contact-custom {

    display: inline-flex;

    align-items: center;

    gap: 10px; /* Spazio tra testo e icona */

    background-color: #1a2333; 

    color: #e5e7eb;

    border: 1px solid #374151;

    padding: 12px 28px;

    border-radius: 8px;

    font-weight: 500;

    transition: all 0.3s ease;

    cursor: pointer;

}



    .btn-contact-custom i {

        transition: transform 0.3s ease;

    }



    .btn-contact-custom:hover {

        background-color: #252f3f;

        border-color: var(--color-primary);

        color: white;

    }



    /* Animazione dell'aeroplanino al passaggio del mouse */

    .btn-contact-custom:hover i {

        transform: translateX(4px) translateY(-4px) scale(1.1);

        color: var(--color-primary);

    }



    .btn-outline-soft {

      background: transparent;

      /* color: var(--color-primary); */

      border: 1.5px solid var(--color-primary);

      opacity: 0.8; /* Lo rende meno "sparante" */

    }

    .btn-outline-soft:hover {

        opacity: 1;

        background: var(--color-primary-soft);

    }







    main {

      flex: 1;

    }



    .section {

      max-width: var(--max-width);

      margin: 0 auto;

      padding: 40px 20px;

    }



    /* Classe da aggiungere alla <section> */

    .section-divider-glow {

      position: relative;

      }



    .section-divider-glow::before {

      content: "";

      position: absolute;

      top: 0;

      left: 50%;

      transform: translateX(-50%); /* Centra perfettamente la linea */

      width: 80%; /* La linea non tocca i bordi, rimane elegante */

      height: 1px;

      

      /* Gradiente: trasparente -> blu brand (opaco) -> trasparente */

      background: linear-gradient(

          to right, 

          transparent, 

          var(--color-primary), 

          transparent

      );

      

      /* Opacità ridotta per non essere troppo "pesante" */

      opacity: 0.4;

      

      /* Opzionale: un leggerissimo alone luminoso sotto la linea */

      box-shadow: 0 0 15px var(--color-primary);

    }







    /* HERO */

    

  /*  .hero::before {

      content: "";

      position: absolute;

      inset: 0;

      background: radial-gradient(

      circle at center,

      rgba(0, 212, 166, 0.35) 0%,

      rgba(10, 132, 255, 0.15) 40%,

      rgba(5, 8, 20, 0) 75%

      );

  pointer-events: none;

} */



    .hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),

    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 40px 40px;

  opacity: 0.25;

  pointer-events: none;

}



    .hero {

      padding-top: 40px;

      padding-bottom: 40px;

      display: grid;

      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

      gap: 40px;

      align-items: center;

      background: linear-gradient(135deg, #050814 0%, #0a84ff 45%, #00d4a6 100% );position: relative; color: #ffffff;

    }



    .hero-kicker {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      padding: 4px 10px;

      border-radius: var(--radius-pill);

      border: 1px solid rgba(148, 163, 184, 0.4);

      background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), rgba(15, 23, 42, 0.95));

      color: #e5e7eb;

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      margin-bottom: 14px;

    }



    .hero-kicker span {

      font-weight: 600;

    }



    .hero-title {

      font-size: clamp(32px, 4vw, 40px);

      line-height: 1.1;

      font-weight: 700;

      letter-spacing: -0.03em;

      margin-bottom: 14px;

    }



    .hero-title span {

      background: linear-gradient(135deg, #38bdf8, #0ea5e9, #22c55e);

      -webkit-background-clip: text;

      color: transparent;

    }



    .hero-subtitle {

      font-size: 15px;

      color: var(--color-text-muted);

      max-width: 520px;

      margin-bottom: 18px;

    }



    .hero-badges {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      margin-bottom: 20px;

    }



    .hero-badge {

      font-size: 11px;

      padding: 6px 10px;

      border-radius: var(--radius-pill);

      border: 1px solid rgba(148, 163, 184, 0.4);

      color: var(--color-text-muted);

      display: inline-flex;

      align-items: center;

      gap: 6px;

      background: rgba(15, 23, 42, 0.9);

    }



    .hero-badge-dot {

      width: 7px;

      height: 7px;

      border-radius: 999px;

      background: var(--color-accent);

    }



    .hero-ctas {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      align-items: center;

      margin-bottom: 16px;

    }



    .hero-meta {

      font-size: 11px;

      color: var(--color-text-muted);

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

      align-items: center;

    }



    .hero-meta span {

      display: inline-flex;

      align-items: center;

      gap: 6px;

    }



    .hero-meta-dot {

      width: 4px;

      height: 4px;

      border-radius: 999px;

      background: rgba(148, 163, 184, 0.7);

    }



    .hero-right {

      position: relative;

      display: flex;

      justify-content: center;

    }



    .phone-frame {

      width: 260px;

      max-width: 100%;

      aspect-ratio: 9 / 19;

      border-radius: 32px;

      padding: 10px;

      background: radial-gradient(circle at top, #1f2937, #020617 70%);

      box-shadow: var(--shadow-soft);

      position: relative;

      overflow: hidden;

    }



    .phone-inner {

      width: 100%;

      height: 100%;

      border-radius: 24px;

      background: radial-gradient(circle at top, #020617, #020617 55%, #020617 100%);

      border: 1px solid rgba(148, 163, 184, 0.35);

      padding: 14px 10px;

      display: flex;

      flex-direction: column;

      gap: 10px;

      position: relative;

    }



    .phone-notch {

      width: 40%;

      height: 8px;

      border-radius: 999px;

      background: rgba(15, 23, 42, 0.9);

      margin: 0 auto 6px;

    }



    .phone-status {

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-size: 9px;

      color: var(--color-text-muted);

      margin-bottom: 4px;

    }



    .phone-card {

      border-radius: 16px;

      padding: 10px;

      background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.95));

      border: 1px solid rgba(148, 163, 184, 0.4);

      display: flex;

      flex-direction: column;

      gap: 6px;

    }



    .phone-card-header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-size: 11px;

    }



    .phone-card-title {

      font-weight: 600;

      font-size: 11px;

    }



    .phone-chip {

      font-size: 9px;

      padding: 3px 7px;

      border-radius: var(--radius-pill);

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(148, 163, 184, 0.5);

      color: var(--color-text-muted);

    }



    .phone-number {

      font-size: 13px;

      font-weight: 600;

      letter-spacing: 0.06em;

    }



    .phone-label {

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      color: var(--color-text-muted);

    }



    .phone-actions {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-top: 4px;

    }



    .phone-btn {

      font-size: 10px;

      padding: 5px 9px;

      border-radius: var(--radius-pill);

      border: none;

      cursor: default;

      display: inline-flex;

      align-items: center;

      gap: 4px;

    }



    .phone-btn-danger {

      background: radial-gradient(circle at top left, #ef4444, #b91c1c);

      color: #fee2e2;

    }



    .phone-btn-safe {

      background: rgba(15, 23, 42, 0.9);

      color: #e5e7eb;

      border: 1px solid rgba(148, 163, 184, 0.6);

    }



    .phone-tagline {

      font-size: 9px;

      color: var(--color-text-muted);

      margin-top: 4px;

    }



    .phone-list {

      margin-top: 6px;

      border-radius: 14px;

      padding: 8px;

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(31, 41, 55, 0.9);

      display: flex;

      flex-direction: column;

      gap: 6px;

    }



    .phone-list-item {

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-size: 9px;

      color: var(--color-text-muted);

    }



    .phone-list-item span:first-child {

      color: #e5e7eb;

    }



    .phone-fab {

      position: absolute;

      bottom: 14px;

      right: 16px;

      width: 34px;

      height: 34px;

      border-radius: 999px;

      background: linear-gradient(135deg, #22c55e, #16a34a);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 16px;

      box-shadow: 0 14px 30px rgba(22, 163, 74, 0.7);

    }



    .phone-glow {

      position: absolute;

      inset: 20% -20%;

      background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.35), transparent 60%);

      opacity: 0.7;

      pointer-events: none;

    }



    .hero-floating {

      position: absolute;

      left: -40px;

      bottom: 10px;

      padding: 8px 12px;

      border-radius: 14px;

      background: rgba(15, 23, 42, 0.95);

      border: 1px solid rgba(148, 163, 184, 0.4);

      font-size: 10px;

      color: var(--color-text-muted);

      display: flex;

      flex-direction: column;

      gap: 4px;

      box-shadow: var(--shadow-chip);

    }



    .hero-floating strong {

      color: #e5e7eb;

      font-weight: 600;

    }



    /* GENERIC SECTION STYLES */



    .section-header {

      /* max-width: 640px; */

        max-width: var(--max-width);

        margin-left: auto;

        /* Centra il blocco se è più stretto del contenitore */

        margin-right: auto;

        /* Centra il blocco */

      margin-bottom: 24px;

}



    .section-kicker {

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 0.16em;

      /* color: var(--color-text-muted); */

        color: var(--color-accent);

      margin-bottom: 6px;

    }



    .section-title {

      font-size: 22px;

      font-weight: 600;

      letter-spacing: -0.02em;

      margin-bottom: 8px;

    }



    .section-subtitle {

      font-size: 14px;

      color: var(--color-text-muted);

    }



    .section-alt {

      background: radial-gradient(circle at top, #020617, #020617 60%, #000 100%);

      border-top: 1px solid rgba(15, 23, 42, 0.9);

      border-bottom: 1px solid rgba(15, 23, 42, 0.9);

    }



    .section-divider-fade {

    height: 1px;

    background: linear-gradient(

        to right, 

        transparent, 

        rgba(255, 255, 255, 0.1) 50%, 

        transparent

        );

        border: none;

        margin: 0 auto;

        width: 80%; /* Non tocca i bordi, molto più elegante */

    }



    .section-divider-glow {

    height: 1px;

    background: linear-gradient(

        to right, 

        transparent, 

        var(--color-primary), 

        transparent

        );

        opacity: 0.3; /* Molto tenue */

        border: none;

    }









    /* PROBLEM SECTION */



    .problem-grid {

      display: grid;

      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

      gap: 32px;

      align-items: center;

    }



    .problem-list {

      display: flex;

      flex-direction: column;

      gap: 10px;

      margin-top: 10px;

    }



    .problem-item {

      display: flex;

      gap: 8px;

      font-size: 13px;

      color: var(--color-text-muted);

    }



    .problem-icon {

      width: 18px;

      height: 18px;

      border-radius: 999px;

      background: rgba(248, 113, 113, 0.12);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 11px;

      color: #fecaca;

      flex-shrink: 0;

    }



    .problem-card {

      border-radius: var(--radius-lg);

      padding: 16px;

      background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), rgba(15, 23, 42, 0.95));

      border: 1px solid rgba(248, 113, 113, 0.5);

      font-size: 13px;

      color: #fee2e2;

      box-shadow: var(--shadow-soft);

    }



    /* SOLUTION SECTION */



    .solution-grid {

      display: grid;

      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

      gap: 28px;

      align-items: flex-start;

    }



    .pill-list {

      display: flex;

      flex-direction: column;

      gap: 8px;

      margin-top: 10px;

    }



    .pill-item {

      font-size: 13px;

      padding: 8px 10px;

      border-radius: var(--radius-pill);

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(148, 163, 184, 0.4);

      color: var(--color-text-muted);

      display: inline-flex;

      align-items: center;

      gap: 8px;

      width: fit-content;

    }



    .pill-dot {

      width: 7px;

      height: 7px;

      border-radius: 999px;

      background: var(--color-primary);

    }



    .solution-card {

      border-radius: var(--radius-lg);

      padding: 16px;

      background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.95));

      border: 1px solid rgba(56, 189, 248, 0.5);

      font-size: 13px;

      color: #e0f2fe;

      box-shadow: var(--shadow-soft);

      display: flex;

      flex-direction: column;

      gap: 8px;

    }



    .solution-card-title {

      font-weight: 600;

      font-size: 13px;

    }



    .solution-card-list {

      font-size: 12px;

      color: #bae6fd;

      padding-left: 16px;

    }



    /* PRIVACY SECTION */



    .privacy-grid {

      display: grid;

      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

      gap: 28px;

      align-items: flex-start;

    }



    .privacy-list {

      display: flex;

      flex-direction: column;

      gap: 8px;

      margin-top: 10px;

    }



    .privacy-item {

      display: flex;

      align-items: center;

      gap: 8px;

      font-size: 13px;

      color: var(--color-text-muted);

    }



    .privacy-icon-bad {

      width: 18px;

      height: 18px;

      border-radius: 999px;

      background: rgba(248, 113, 113, 0.12);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 11px;

      color: #fecaca;

      flex-shrink: 0;

    }



    .privacy-icon-good {

      width: 18px;

      height: 18px;

      border-radius: 999px;

      background: rgba(34, 197, 94, 0.12);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 11px;

      color: #bbf7d0;

      flex-shrink: 0;

    }



    .privacy-card {

      border-radius: var(--radius-lg);

      padding: 16px;

      background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.95));

      border: 1px solid rgba(34, 197, 94, 0.5);

      font-size: 13px;

      color: #dcfce7;

      box-shadow: var(--shadow-soft);

    }



    /* TARGET SECTION */



    .target-grid {

      display: grid;

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 16px;

      margin-top: 16px;

    }



    .target-card {

      border-radius: var(--radius-md);

      padding: 14px;

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(31, 41, 55, 0.9);

      font-size: 13px;

      color: var(--color-text-muted);

      display: flex;

      flex-direction: column;

      gap: 6px;

    }



    .target-title {

      font-size: 13px;

      font-weight: 600;

      color: #e5e7eb;

    }



    /* FEATURES SECTION */



    .features-grid {

      display: grid;

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 16px;

      margin-top: 16px;

    }



    .feature-card {

      border-radius: var(--radius-md);

      padding: 14px;

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(31, 41, 55, 0.9);

      font-size: 13px;

      color: var(--color-text-muted);

      display: flex;

      flex-direction: column;

      gap: 6px;

    }



    .feature-title {

      font-size: 13px;

      font-weight: 600;

      color: #e5e7eb;

    }



    .feature-tag {

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      color: var(--color-text-muted);

    }



    /* COMPARISON SECTION */



    .comparison-table {

      width: 100%;

      border-collapse: collapse;

      margin-top: 16px;

      font-size: 13px;

    }



    .comparison-table th,

    .comparison-table td {

      padding: 10px 10px;

      text-align: left;

      border-bottom: 1px solid rgba(31, 41, 55, 0.9);

    }



    .comparison-table th {

      font-weight: 500;

      color: var(--color-text-muted);

      font-size: 12px;

    }



    .comparison-table td:first-child {

      color: #e5e7eb;

      font-weight: 500;

    }



    .comparison-badge-yes {

      font-size: 11px;

      padding: 3px 8px;

      border-radius: var(--radius-pill);

      background: rgba(34, 197, 94, 0.12);

      color: #bbf7d0;

      border: 1px solid rgba(34, 197, 94, 0.5);

      display: inline-flex;

      align-items: center;

      gap: 4px;

    }



    .comparison-badge-no {

      font-size: 11px;

      padding: 3px 8px;

      border-radius: var(--radius-pill);

      background: rgba(248, 113, 113, 0.12);

      color: #fecaca;

      border: 1px solid rgba(248, 113, 113, 0.5);

      display: inline-flex;

      align-items: center;

      gap: 4px;

    }



    /* STEPS SECTION */



    .steps-grid {

      display: grid;

      grid-template-columns: repeat(5, minmax(0, 1fr));

      gap: 12px;

      margin-top: 16px;

    }



    .step-card {

      border-radius: var(--radius-md);

      padding: 12px;

      background: rgba(15, 23, 42, 0.9);

      border: 1px solid rgba(31, 41, 55, 0.9);

      font-size: 12px;

      color: var(--color-text-muted);

      display: flex;

      flex-direction: column;

      gap: 4px;

    }



    .step-number {

      width: 20px;

      height: 20px;

      border-radius: 999px;

      background: rgba(56, 189, 248, 0.12);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 11px;

      color: #7dd3fc;

      margin-bottom: 4px;

    }



    .step-title {

      font-size: 12px;

      font-weight: 600;

      color: #e5e7eb;

    }



    /* DOWNLOAD SECTION */



    .download-section {

      text-align: center;

      padding-top: 40px;

      padding-bottom: 40px;

    }



    .download-ctas {

      display: flex;

      justify-content: center;

      flex-wrap: wrap;

      gap: 12px;

      margin-top: 16px;

      margin-bottom: 10px;

    }



    .download-note {

      font-size: 12px;

      color: var(--color-text-muted);

    }



    .badge-store {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      padding: 8px 14px;

      border-radius: var(--radius-pill);

      border: 1px solid rgba(148, 163, 184, 0.5);

      background: rgba(15, 23, 42, 0.95);

      font-size: 12px;

      color: #e5e7eb;

    }



    .badge-store-icon {

      width: 18px;

      height: 18px;

      border-radius: 6px;

      background: conic-gradient(from 180deg, #22c55e, #0ea5e9, #f97316, #22c55e);

    }



    footer {

      border-top: 1px solid rgba(15, 23, 42, 0.9);

      background: #020617;

      padding: 18px 20px;

      margin-top: 20px;

    }



    .footer-inner {

      max-width: var(--max-width);

      margin: 0 auto;

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      gap: 10px;

      font-size: 11px;

      color: var(--color-text-muted);

    }



    .footer-links {

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

    }



    .footer-links a {

      color: var(--color-text-muted);

    }



                footer ul.nav {

                  margin-right: 0 !important;

                  padding-right: 0 !important;

                }

        

                footer .nav-item:last-child .nav-link {

                  padding-right: 0 !important;

                }

    /* RESPONSIVE */



    @media (max-width: 900px) {

      .hero {

        grid-template-columns: minmax(0, 1fr);

      }



      .hero-right {

        order: -1;

      }



      .hero-floating {

        display: none;

      }



      .problem-grid,

      .solution-grid,

      .privacy-grid {

        grid-template-columns: minmax(0, 1fr);

      }



      .target-grid,

      .features-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

      }



      .steps-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

      }

    }



    @media (max-width: 640px) {

      .nav {

        padding-inline: 14px;

      }



      .hero {

        padding-top: 28px;

      }



      .section {

        padding-inline: 16px;

      }



      .target-grid,

      .features-grid {

        grid-template-columns: minmax(0, 1fr);

      }



      .steps-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

      }



      .nav-pill {

        display: none;

      }

    }



                  /* AGGIUNTO */

.custom-underline {

    text-decoration: underline;

    text-decoration-color: var(--color-primary); /* Usa il tuo blu */

    text-underline-offset: 5px; /* Sposta la linea in basso */

    text-decoration-thickness: 2px; /* Rende la linea più visibile */

}

 

/* Stile FAQ personalizzato */



.faq-icon-wrapper svg {

    filter: drop-shadow(0 0 8px var(--color-primary));

    transition: transform 0.3s ease;

}



.faq-icon-wrapper:hover svg {

    transform: scale(1.1) rotate(-5deg);

}



/* .accordion-button {

    font-weight: 600;

    padding: 1.5rem 1rem;

}



.accordion-button:not(.collapsed) {

    background-color: transparent;

    color: var(--color-primary); /* Colore blu quando aperta 

    box-shadow: none;

}



.accordion-button::after {

    filter: invert(1); /* Rende la freccia bianca 

}



.accordion-item {

    background-color: transparent !important;

}



.accordion-body {

    padding-top: 0;

    line-height: 1.6;

} 

*/