/* ── HERO ──────────────────────────────────────────────── */
    .demo-hero {
      background: linear-gradient(145deg, #020817 0%, #0f172a 35%, #1a1040 60%, #1e3a8a 90%, #0c1a50 100%);
      min-height: 38vh;
      display: flex;
      align-items: center;
      padding: calc(var(--nav-h) + 4rem) 0 3.5rem;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .demo-hero::before {
      content: '';
      position: absolute;
      top: -200px; right: -200px;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59,130,246,.28) 0%, transparent 70%);
      pointer-events: none;
    }
    .demo-hero::after {
      content: '';
      position: absolute;
      bottom: -100px; left: -100px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .demo-hero .container { position: relative; z-index: 1; }
    .demo-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(59,130,246,.12);
      border: 1px solid rgba(59,130,246,.28);
      color: #93c5fd;
      padding: .4rem 1.1rem;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
    .demo-hero-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #60a5fa;
      animation: dh-blink 2s ease-in-out infinite;
    }
    @keyframes dh-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .demo-hero-title {
      font-size: clamp(2rem, 5vw, 3.25rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 1rem;
    }
    .demo-hero-title em {
      font-style: normal;
      background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .demo-hero-sub {
      font-size: 1.0625rem;
      color: rgba(255,255,255,.6);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.75;
    }

    /* ── BODY SECTION ──────────────────────────────────────── */
    .demo-body {
      background: #f1f5f9;
      padding: 4rem 0 5rem;
    }
    .demo-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: start;
    }
    @media (min-width: 1024px) {
      .demo-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
    }

    /* ── FORM CARD ─────────────────────────────────────────── */
    .demo-form-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 40px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
      padding: 2.5rem;
      border: 1px solid #e8edf5;
    }
    .demo-form-title {
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--text);
      margin-bottom: .4rem;
    }
    .demo-form-sub {
      font-size: .9rem;
      color: var(--text-muted);
      margin-bottom: 2rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1.1rem;
    }
    .form-group:last-child { margin-bottom: 0; }

    .form-label {
      font-size: .8375rem;
      font-weight: 600;
      color: var(--text);
    }
    .form-label .opt {
      font-weight: 400;
      color: var(--text-light);
      margin-left: .25rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: .7rem 1rem;
      border: 1.5px solid #dde3ee;
      border-radius: 10px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .9rem;
      color: var(--text);
      background: #fafbfc;
      transition: border-color .2s, box-shadow .2s, background .2s;
      outline: none;
    }
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--c-500);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }
    .form-input::placeholder,
    .form-textarea::placeholder { color: #a0aec0; }
    .form-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.5rem; }
    .form-textarea { resize: vertical; min-height: 100px; }

    /* Checkboxes */
    .cb-group-label {
      font-size: .8375rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: .65rem;
    }
    .cb-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .45rem;
    }
    @media (max-width: 400px) { .cb-grid { grid-template-columns: 1fr; } }
    .cb-item {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem .75rem;
      border: 1.5px solid #dde3ee;
      border-radius: 8px;
      cursor: pointer;
      transition: border-color .15s, background .15s;
      user-select: none;
    }
    .cb-item:hover { border-color: var(--c-400); background: rgba(59,130,246,.03); }
    .cb-item input[type="checkbox"] {
      width: 15px; height: 15px;
      accent-color: var(--c-600);
      cursor: pointer;
    }
    .cb-item input[type="checkbox"]:checked + .cb-label-text {
      color: var(--c-700);
      font-weight: 600;
    }
    .cb-item:has(input:checked) {
      border-color: var(--c-400);
      background: rgba(59,130,246,.06);
    }
    .cb-label-text {
      font-size: .825rem;
      color: var(--text-muted);
      transition: color .15s;
    }

    /* Submit */
    .form-submit {
      width: 100%;
      padding: .9rem 2rem;
      background: linear-gradient(135deg, var(--c-sky) 0%, var(--c-600) 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(59,130,246,.35);
      transition: transform .2s, box-shadow .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      margin-top: 1.5rem;
    }
    .form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(59,130,246,.45);
    }
    .form-submit svg { flex-shrink: 0; }

    .form-note {
      text-align: center;
      font-size: .78rem;
      color: var(--text-light);
      margin-top: .875rem;
    }

    /* Success state */
    .form-success {
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 2.5rem 1rem;
      gap: 1rem;
    }
    .form-success.visible { display: flex; }
    .success-icon {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #22c55e, #14b8a6);
      display: flex; align-items: center; justify-content: center;
    }
    .success-icon svg { width: 34px; height: 34px; stroke: #fff; }
    .success-title { font-size: 1.5rem; font-weight: 800; color: var(--text); }
    .success-desc { font-size: .95rem; color: var(--text-muted); line-height: 1.7; max-width: 360px; }
    .success-back {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: .9rem;
      font-weight: 600;
      color: var(--c-600);
      margin-top: .5rem;
    }
    .success-back:hover { text-decoration: underline; }

    /* ── BENEFITS SIDEBAR ──────────────────────────────────── */
    .demo-benefits {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .db-card {
      background: #fff;
      border-radius: 20px;
      border: 1px solid #e8edf5;
      padding: 1.75rem;
      box-shadow: 0 2px 12px rgba(0,0,0,.05);
    }

    .db-card-title {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .db-card-title-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    /* Timeline */
    .db-timeline { display: flex; flex-direction: column; gap: 0; }
    .db-timeline-item {
      display: flex;
      gap: 1rem;
      position: relative;
    }
    .db-timeline-item:not(:last-child) { padding-bottom: 1.25rem; }
    .db-tl-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 32px;
    }
    .db-tl-num {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--c-sky), var(--c-600));
      color: #fff;
      font-size: .8rem;
      font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .db-tl-line {
      width: 2px;
      flex: 1;
      background: #e2e8f0;
      margin-top: 4px;
    }
    .db-tl-content { padding-top: .3rem; padding-bottom: .25rem; }
    .db-tl-label {
      font-size: .875rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: .2rem;
    }
    .db-tl-desc {
      font-size: .8rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* Includes list */
    .db-includes { display: flex; flex-direction: column; gap: .65rem; }
    .db-include-item {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: .875rem;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .db-include-icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      background: rgba(34,197,94,.12);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .db-include-icon svg { width: 12px; height: 12px; stroke: #16a34a; stroke-width: 2.5; }

    /* Trust */
    .db-trust-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
    }
    .db-trust-item {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .75rem;
      background: #f8fafc;
      border: 1px solid #e8edf5;
      border-radius: 10px;
    }
    .db-trust-emoji { font-size: 1.25rem; line-height: 1; }
    .db-trust-label {
      font-size: .78rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }

    /* Avatar row */
    .db-team {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      background: linear-gradient(135deg, #0f172a, #1e3a8a);
      border-radius: 16px;
    }
    .db-avatars {
      display: flex;
    }
    .db-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 2.5px solid #1e3a8a;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem;
      font-weight: 800;
      color: #fff;
      margin-left: -10px;
      flex-shrink: 0;
    }
    .db-avatars .db-avatar:first-child { margin-left: 0; }
    .db-team-text { flex: 1; }
    .db-team-label {
      font-size: .8rem;
      font-weight: 700;
      color: #fff;
    }
    .db-team-sub {
      font-size: .72rem;
      color: rgba(255,255,255,.5);
      margin-top: .1rem;
    }

    @keyframes demo-spin { to { transform: rotate(360deg); } }
    .demo-spinning { animation: demo-spin .65s linear infinite; display: inline-block; }


.demo-footer-grid{grid-template-columns:1fr;}@media(min-width:640px){.demo-footer-grid{grid-template-columns:repeat(2,1fr);}}@media(min-width:1024px){.demo-footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;}}@media(min-width:768px){.demo-footer-grid+div{justify-content:space-between!important;text-align:left!important;}}