:root{
      --il-primary: #2563eb !important;   /* blue */
      --il-secondary: #14b8a6 !important; /* teal */
      --il-accent: #f59e0b !important;    /* amber (se ti serve per dettagli) */
      --il-ink: #0b1220 !important;
      --il-soft: #f6f8fb !important;
      --il-border: rgba(2,6,23,.10) !important;
    }

    /* Hide global theme chrome only on founder landing route. */
    body.il-founder-landing-page #main > header {
      display: none !important;
    }

    body.il-founder-landing-page .il-founder-landing {
      font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
      font-size: 1rem !important;
      line-height: var(--bs-body-line-height, 1.5) !important;
      font-weight: var(--bs-body-font-weight, 400) !important;
      color: #0f172a !important;
      --bs-primary: #0d6efd !important;
    }
    body.il-founder-landing-page main {
      padding-bottom: 0 !important;
    }
    body.il-founder-landing-page .il-founder-landing .btn {
      font-family: inherit !important;
      font-weight: 600 !important;
    }

    body.il-founder-landing-page .il-founder-landing .btn-primary {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
      color: #fff !important;
    }

    body.il-founder-landing-page .il-founder-landing .btn-outline-primary {
      color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
    }

    body.il-founder-landing-page .il-founder-landing .btn-outline-primary:hover {
      color: #fff !important;
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
    }

    body { background: #fff !important; color: #0f172a !important; }
    a { text-decoration: none !important; }
    .bg-soft { background: var(--il-soft) !important; }
    .muted { color: #64748b !important; }
    .tiny { font-size: .92rem !important; }
    .rounded-2xl { border-radius: 18px !important; }

    /* HERO */
    .hero{
      position: relative !important;
      overflow: hidden !important;
      border-bottom: 1px solid var(--il-border) !important;
      background: /* base pulita come prima */
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
      }

    /* TRICOLORE SOFT - “wash” largo */
    .hero::before{
      content: "" !important;
      position: absolute !important;
      inset: -220px -220px -220px -220px !important;
      background: radial-gradient(900px 520px at 18% 30%, rgba(34,197,94,.34), transparent 60%),
        radial-gradient(700px 460px at 50% 25%, rgba(255,255,255,.88), transparent 56%),
        radial-gradient(900px 520px at 82% 30%, rgba(239,68,68,.32), transparent 60%) !important;
      filter: blur(14px) !important;
      opacity: .9 !important;
      pointer-events: none !important;
    }

    .hero::after{
      content: "" !important;
      position: absolute !important;
      inset: -180px -180px auto auto !important;
      width: 720px !important;
      height: 520px !important;
      transform: rotate(12deg) !important;
      background: linear-gradient(90deg,
          rgba(255,255,255,.55) 0%,
          rgba(239,68,68,.30) 100%
        ) !important;
      border-radius: 999px !important;
      filter: blur(22px) !important;
      opacity: .8 !important;
      pointer-events: none !important;
    }

    @media (max-width: 575.98px){
      .hero::after{
        inset: -140px -160px auto auto !important;
        width: 520px !important;
        height: 380px !important;
        transform: rotate(10deg) !important;
        background: linear-gradient(90deg,
            rgba(255,255,255,.35) 0%,
            rgba(239,68,68,.18) 100%
          ) !important;
        filter: blur(30px) !important;
        opacity: .55 !important;
      }
      .hero::before{
        inset: -140px auto auto -160px !important;
        width: 520px !important;
        height: 380px !important;
        transform: rotate(-10deg) !important;
        background: linear-gradient(90deg,
            rgba(34,197,94,.22) 0%,
            rgba(255,255,255,.35) 100%
          ) !important;
        filter: blur(30px) !important;
        opacity: .55 !important;
      }
    }

    .navbar{
      background: rgba(255,255,255,.92) !important;
      backdrop-filter: blur(10px) !important;
    }
    .hero .container{
      position: relative !important;
      z-index: 1 !important;
    }

    .badge-founder{
      background: rgba(37,99,235,.12) !important;
      color: var(--il-primary) !important;
      border: 1px solid rgba(37,99,235,.22) !important;
      font-weight: 700 !important;
    }

    .card-soft{
      border: 1px solid var(--il-border) !important;
      box-shadow: 0 12px 36px rgba(2,6,23,.06) !important;
      border-radius: 18px !important;
      background: rgba(255,255,255,.92) !important;
      backdrop-filter: blur(6px) !important;
    }

    .btn-cta{
      border-radius: 14px !important;
      padding: .9rem 1.1rem !important;
      font-weight: 800 !important;
    }
    fieldset.js-webform-term-checkboxes  {
      legend {
        padding-left: 0px !important;
        margin-bottom: 10px !important;
      }
      .fieldset-wrapper {
      border: none !important;
      padding: 0 !important;
    }
    }
    
    .btn-gradient{
      border: 0 !important;
      color: #fff !important;
      background: linear-gradient(90deg, var(--il-primary), var(--il-secondary)) !important;
      box-shadow: 0 12px 26px rgba(37,99,235,.18) !important;
    }
    .btn-gradient:hover{ filter: brightness(.98) !important; transform: translateY(-1px) !important; }

    .phase-badge{
      font-size: .75rem !important;
      padding: .35rem .6rem !important;
      border-radius: 999px !important;
      border: 1px solid var(--il-border) !important;
      background: rgba(2,6,23,.03) !important;
      white-space: nowrap !important;
    }

    .icon-bubble{
      width: 42px !important; height: 42px !important;
      display: flex !important; align-items: center !important; justify-content: center !important;
      border-radius: 14px !important;
      background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(20,184,166,.10)) !important;
      border: 1px solid rgba(37,99,235,.18) !important;
      color: var(--il-primary) !important;
      flex: 0 0 auto !important;
    }

    /* Mini mock */
    .mock{
      border-radius: 18px !important;
      border: 1px solid var(--il-border) !important;
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,248,251,.85)) !important;
      box-shadow: 0 18px 44px rgba(2,6,23,.09) !important;
      overflow: hidden !important;
    }
    .mock-topbar{
      padding: .55rem .8rem !important;
      background: rgba(2,6,23,.04) !important;
      border-bottom: 1px solid var(--il-border) !important;
      display: flex !important; gap: .35rem !important; align-items: center !important;
    }
    .dot{ width: 10px !important;height: 10px !important;border-radius: 999px !important;background: rgba(2,6,23,.15) !important; }
    .dot.blue{ background: rgba(37,99,235,.55) !important; }
    .dot.teal{ background: rgba(20,184,166,.55) !important; }
    .dot.amber{ background: rgba(245,158,11,.55) !important; }

    /* Trust pills */
    .trust-pill{
      display: inline-flex !important;
      align-items: center !important;
      gap: .5rem !important;
      border: 1px solid var(--il-border) !important;
      background: rgba(255,255,255,.85) !important;
      padding: .5rem .75rem !important;
      border-radius: 999px !important;
    }

    /* Roadmap tabs */
    .roadmap-nav .nav-link{
      border: 1px solid var(--il-border) !important;
      border-radius: 16px !important;
      padding: 14px !important;
      color: #0f172a !important;
      background: rgba(255,255,255,.9) !important;
      transition: all .15s ease !important;
      text-align: left !important;
      height: 100% !important;
    }
    .roadmap-nav .nav-link:hover{
      transform: translateY(-1px) !important;
      box-shadow: 0 14px 30px rgba(2,6,23,.07) !important;
    }
    .roadmap-nav .nav-link.active{
      border-color: rgba(37,99,235,.35) !important;
      box-shadow: 0 16px 36px rgba(37,99,235,.14) !important;
    }

    .progress-thin{ height: 10px !important; border-radius: 999px !important; background: rgba(2,6,23,.06) !important; }
    .progress-thin .bar{
      height: 100% !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg, var(--il-primary), var(--il-secondary)) !important;
      width: 33% !important;
      transition: width .25s ease !important;
    }

    /* Form */
    .form-control, .form-select{
      border-radius: 12px !important;
      border-color: var(--il-border) !important;
      padding: .8rem .9rem !important;
    }

    /* Sticky CTA mobile */
    .sticky-cta{
      position: sticky !important;
      bottom: 0 !important;
      z-index: 1020 !important;
      border-top: 1px solid var(--il-border) !important;
      background: rgba(255,255,255,.92) !important;
      backdrop-filter: blur(10px) !important;
    }

    /* Mobile tightening */
    @media (max-width: 575.98px){
      .hero { padding-top: 2.1rem !important; padding-bottom: 2.1rem !important; }
      .display-5 { font-size: 2.05rem !important; }
      .lead { font-size: 1.05rem !important; }
      .btn-cta { padding: .85rem 1rem !important; }
    }

    .webform-submission-guide-onboarding-form {
      /* 1) Metti in riga e fai wrappare (di solito Drupal mette i checkbox dentro .form-checkboxes) */
      .form-checkboxes {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .5rem !important;
      }

      /* 2) Ogni item: niente layout “da form” classico */
      .form-checkboxes .js-form-type-checkbox {
        margin: 0 !important;          /* Drupal spesso mette margini */
        padding: 0 !important;
      }

      /* 3) Nascondi il checkbox ma lascialo accessibile */
      .form-checkboxes .js-form-type-checkbox input[type="checkbox"] {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      /* 4) Il label diventa la chip */
      .form-checkboxes .js-form-type-checkbox label.option {
        display: inline-flex !important;
        align-items: center !important;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        border-radius: 9999px !important;
        padding: .35rem 1rem !important;
        cursor: pointer !important;
        user-select: none !important;
        background: var(--bs-body-bg, #fff) !important;
        color: var(--bs-body-color, #212529) !important;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
        &:hover {
          background: rgba(14,111,253,0.23) !important;
        }
      }

      /* 5) Stato checked */
      .form-checkboxes .js-form-type-checkbox input[type="checkbox"]:checked + label.option {
        background: var(--bs-primary, #0d6efd) !important;
        border-color: var(--bs-primary, #0d6efd) !important;
        color: #fff !important;
      }

      /* 6) Focus da tastiera */
      .form-checkboxes .js-form-type-checkbox input[type="checkbox"]:focus-visible + label.option {
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) !important;
      }

      /* 7) Disabled */
      .form-checkboxes .js-form-type-checkbox input[type="checkbox"]:disabled + label.option {
        opacity: .6 !important;
        cursor: not-allowed !important;
      }
      .form-item {
        margin-bottom: 16px !important;
      }

      .form-type-textfield label,
      .form-type-email label{
        font-weight: 600 !important;
      }
      legend {
        font-size: initial !important;
        font-weight: 600 !important;
      }

      .form-item-privacy {
        display: flex !important;
        margin-top: 32px !important;
        margin-bottom: 32px !important;
        input {
        margin-right: 10px !important;
        }
      }
      .form-required::after {
          display: inline-block !important;
          width: 6px !important;
          height: 6px !important;
          margin: 0 0.3em !important;
          content: "" !important;
          vertical-align: super !important;
          background-image: url(/themes/contrib/bootstrap5/images/icons/required.svg) !important;
          background-repeat: no-repeat !important;
          background-size: 6px 6px !important;
      }
    }
    .py-6 {
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
    }

.path-welcome-1 {
  padding-bottom: 0;
  main > .container {
    width: 100% !important;
    padding: 0;
    max-width: 100%;
    .pt-4 {
      padding-top: 0 !important;
    }
    .region-content {
      padding: 0 !important;
    }
  }
}