:root {
  /* Accent / brand colors (unchanged in both themes) */
  --primary:      #6366F1;
  --primary-dark: #4F46E5;
  --primary-bg:   rgba(99,102,241,0.1);
  --primary-bd:   rgba(99,102,241,0.22);
  --accent:       #06B6D4;
  --accent-bg:    rgba(6,182,212,0.08);
  --accent-bd:    rgba(6,182,212,0.2);

  /* === DARK THEME (default) === */
  --bg:           #080812;
  --bg-a:         #080812;
  --bg-b:         #10101E;
  --surface:      #10101E;
  --surface-2:    #17172A;
  --text:         #F1F5F9;
  --text-1:       #F8FAFC;
  --text-2:       rgba(241,245,249,0.6);
  --text-3:       rgba(241,245,249,0.7);
  --text-4:       rgba(241,245,249,0.62);
  --text-muted:   rgba(241,245,249,0.5);
  --border:       rgba(255,255,255,0.07);
  --border-2:     rgba(255,255,255,0.05);
  --border-3:     rgba(255,255,255,0.12);
  --input-bg:     rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.1);
  --nav-bg:       rgba(8,8,18,0.9);
  --nav-mobile:   rgba(8,8,18,0.98);
  --number-ghost: rgba(255,255,255,0.03);
  --overlay-xs:   rgba(255,255,255,0.02);
  --overlay-sm:   rgba(255,255,255,0.04);
  --dot-sep:      rgba(255,255,255,0.15);

  /* Section gradient backgrounds */
  --grad-hero:         linear-gradient(160deg, #0C0C22 0%, #09091A 50%, #080812 100%);
  --grad-social:       linear-gradient(135deg, #0E0E20 0%, #0B0B1C 100%);
  --grad-howitworks:   linear-gradient(180deg, #0E0E1E 0%, #0B0B1A 100%);
  --grad-usecases:     linear-gradient(135deg, #0A0A1C 0%, #080812 60%);
  --grad-about:        linear-gradient(160deg, #0A0A1E 0%, #080812 70%);
  --grad-compat:       linear-gradient(135deg, #0B0B1D 0%, #080812 70%);
  --grad-book:         linear-gradient(160deg, #0C0C1E 0%, #09091A 100%);
  --grad-faq:          linear-gradient(180deg, #111122 0%, #0E0E1E 100%);
  --grad-card:         linear-gradient(160deg, #0E0E22 0%, #0B0B1A 100%);
  --grad-testimonials: linear-gradient(180deg, #12122A 0%, #0F0F24 100%);
  --bg-pim:            linear-gradient(160deg, #141208 0%, #0E0C06 100%);
}

/* === LIGHT THEME === */
html.light {
  --bg:           #F8FAFC;
  --bg-a:         #F8FAFC;
  --bg-b:         #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F1F5F9;
  --text:         #0F172A;
  --text-1:       #0F172A;
  --text-2:       rgba(15,23,42,0.6);
  --text-3:       rgba(15,23,42,0.75);
  --text-4:       rgba(15,23,42,0.68);
  --text-muted:   rgba(15,23,42,0.5);
  --border:       rgba(15,23,42,0.1);
  --border-2:     rgba(15,23,42,0.07);
  --border-3:     rgba(15,23,42,0.18);
  --input-bg:     rgba(15,23,42,0.04);
  --input-border: rgba(15,23,42,0.15);
  --nav-bg:       rgba(248,250,252,0.92);
  --nav-mobile:   rgba(248,250,252,0.98);
  --number-ghost: rgba(15,23,42,0.04);
  --overlay-xs:   rgba(15,23,42,0.02);
  --overlay-sm:   rgba(15,23,42,0.04);
  --dot-sep:      rgba(15,23,42,0.2);

  --grad-hero:         linear-gradient(160deg, #EEF2FF 0%, #F5F3FF 50%, #F8FAFC 100%);
  --grad-social:       linear-gradient(135deg, #F0F4FF 0%, #EDE9FE 100%);
  --grad-howitworks:   linear-gradient(180deg, #EEF2FF 0%, #F1F5F9 100%);
  --grad-usecases:     linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 60%);
  --grad-about:        linear-gradient(160deg, #EEF2FF 0%, #F8FAFC 70%);
  --grad-compat:       linear-gradient(135deg, #F0F9FF 0%, #F8FAFC 70%);
  --grad-book:         linear-gradient(160deg, #EEF2FF 0%, #F5F3FF 100%);
  --grad-faq:          linear-gradient(180deg, #EDE9FE 0%, #EEF2FF 100%);
  --grad-card:         linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%);
  --grad-testimonials: linear-gradient(180deg, #EDE9FE 0%, #E0E7FF 100%);
  --bg-pim:            linear-gradient(160deg, #FFFBEB 0%, #FEF3C7 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

.carousel-card-select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.carousel-card:focus-within {
  opacity: 1 !important;
}
.carousel-card-select:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -4px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.2s ease;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius: 3px; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 35s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Dashed flow */
@keyframes dash-flow {
  to { stroke-dashoffset: -16; }
}

/* FAQ accordion */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s ease; }

/* ── Global mobile fixes ─────────────────────────────────── */
@media (max-width: 640px) {
  /* Reduce section vertical padding on mobile */
  section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  /* Prevent any element from overflowing horizontally */
  img, svg:not([class]) {
    max-width: 100%;
  }

  /* SSR nav: show a demo CTA instead of full link list */
  .ssr-cta-btn {
    display: inline-block !important;
  }
}

@media (max-width: 480px) {
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

    .island-static [style*="opacity:0"]{opacity:1!important;transform:none!important}
    .island-static .calc-tabs{display:none!important}
    .island-static .calc-input-panel,.island-static .calc-result-panel{display:block!important}
    .island-static input,.island-static button{pointer-events:none}
    #about-island,#calculator-island{min-width:0}
    #about-island section,#calculator{scroll-margin-top:90px}
    #about-island section>div:last-child>div{min-width:0}
    @media(max-width:600px){
      #about-island section>div:last-child>div{grid-template-columns:minmax(0,1fr)!important}
    }