:root {
    --deep:    #05060f;
    --void:    #0a0820;
    --indigo:  #2e1065;
    --violet:  #7c3aed;
    --amethyst:#a855f7;
    --teal:    #0d9488;
    --cobalt:  #1d4ed8;
    --rose:    #be185d;
    --mist:    rgba(124,58,237,0.12);
    --glass:   rgba(255,255,255,0.04);
    --border:  rgba(255,255,255,0.13);
    --text:    #f0edf8;
    --sub:     rgba(220,215,238,0.96);
    --white:   #ffffff;
  }

  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--deep);
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ── CANVAS LAYER (star field rendered via JS) ── */
  #bg-canvas {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
  }

  /* ── AURORA ORBS ── */
  .bg-aurora {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    mix-blend-mode: screen;
    will-change: transform;
  }

  /* Orb 1 — sovereign violet, top-left */
  .bg-orb:nth-child(1) {
    width: 80vw; height: 65vh;
    top: -20vh; left: -22vw;
    background: radial-gradient(ellipse, rgba(88,28,180,0.78) 0%, rgba(46,16,101,0.38) 50%, transparent 78%);
    animation: orbDrift1 24s ease-in-out infinite alternate;
  }

  /* Orb 2 — electric violet, bottom-right */
  .bg-orb:nth-child(2) {
    width: 65vw; height: 60vh;
    bottom: -14vh; right: -16vw;
    background: radial-gradient(ellipse, rgba(124,58,237,0.58) 0%, rgba(88,28,180,0.22) 52%, transparent 78%);
    animation: orbDrift2 30s ease-in-out infinite alternate;
  }

  /* Orb 3 — deep teal nebula, centre-left */
  .bg-orb:nth-child(3) {
    width: 50vw; height: 48vh;
    top: 35vh; left: 5vw;
    background: radial-gradient(ellipse, rgba(13,148,136,0.32) 0%, rgba(6,78,72,0.14) 52%, transparent 78%);
    animation: orbDrift3 38s ease-in-out infinite alternate;
  }

  /* Orb 4 — cobalt blue, top-right */
  .bg-orb:nth-child(4) {
    width: 44vw; height: 44vh;
    top: -10vh; right: 4vw;
    background: radial-gradient(ellipse, rgba(29,78,216,0.42) 0%, rgba(14,35,100,0.16) 58%, transparent 80%);
    animation: orbDrift4 28s ease-in-out infinite alternate;
  }

  /* Orb 5 — rose ember, bottom-left */
  .bg-orb:nth-child(5) {
    width: 38vw; height: 38vh;
    bottom: 4vh; left: -6vw;
    background: radial-gradient(ellipse, rgba(190,24,93,0.26) 0%, rgba(100,10,50,0.1) 55%, transparent 80%);
    animation: orbDrift5 32s ease-in-out infinite alternate;
  }

  /* Orb 6 — luminous amethyst core, mid-right */
  .bg-orb:nth-child(6) {
    width: 32vw; height: 32vh;
    top: 44vh; right: 6vw;
    background: radial-gradient(ellipse, rgba(168,85,247,0.34) 0%, rgba(124,58,237,0.12) 55%, transparent 80%);
    animation: orbDrift6 20s ease-in-out infinite alternate;
    filter: blur(72px);
  }

  @keyframes orbDrift1 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(9vw,7vh) scale(1.1); }
    66%  { transform: translate(5vw,14vh) scale(0.94); }
    100% { transform: translate(12vw,5vh) scale(1.06); }
  }
  @keyframes orbDrift2 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(-7vw,-9vh) scale(1.12); }
    66%  { transform: translate(-12vw,-5vh) scale(0.9); }
    100% { transform: translate(-5vw,-12vh) scale(1.08); }
  }
  @keyframes orbDrift3 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(10vw,-6vh) scale(1.18); }
    100% { transform: translate(-4vw,8vh) scale(0.88); }
  }
  @keyframes orbDrift4 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-6vw,12vh) scale(1.14); }
    100% { transform: translate(4vw,6vh) scale(0.93); }
  }
  @keyframes orbDrift5 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(8vw,-10vh) scale(1.2); }
    100% { transform: translate(3vw,-4vh) scale(0.9); }
  }
  @keyframes orbDrift6 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-6vw,-8vh) scale(1.15); }
    100% { transform: translate(5vw,5vh) scale(0.92); }
  }

  /* ── GRID OVERLAY — subtle constellation dot grid ── */
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background-image:
      radial-gradient(circle, rgba(168,85,247,0.22) 1px, transparent 1px),
      radial-gradient(circle, rgba(13,148,136,0.1) 1px, transparent 1px);
    background-size: 52px 52px, 104px 104px;
    background-position: 0 0, 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 30%, transparent 100%);
    pointer-events: none;
    animation: gridPulse 8s ease-in-out infinite alternate;
  }

  @keyframes gridPulse {
    0%   { opacity: 0.55; }
    100% { opacity: 1; }
  }

  /* ── NEBULA VIGNETTE — cinematic depth at edges ── */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(5,6,15,0.75) 100%);
    pointer-events: none;
  }

  /* ── GRAIN TEXTURE OVERLAY ── */
  .bg-grain {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
  }

  @media (prefers-reduced-motion: reduce) {
    .bg-orb { animation: none; }
    .affiliation::before { animation: none; }
    .scroll-line { animation: none; }
    body::after { animation: none; }
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw;
    height: 72px;
    background: rgba(8,9,26,0.75);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(120deg, #e8e4f0 30%, var(--amethyst));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
  }

  .nav-tabs {
    display: flex; align-items: center; gap: 0;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 4px;
    list-style: none;
  }

  .nav-tabs a {
    display: block;
    padding: 7px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--sub);
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.25s;
    white-space: nowrap;
  }

  .nav-tabs a:hover {
    color: var(--white);
    background: rgba(124,58,237,0.2);
  }

  .nav-login {
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: var(--white) !important;
    padding: 8px 22px !important;
    border-radius: 30px;
    font-weight: 500 !important;
    transition: all 0.25s !important;
    box-shadow: 0 0 20px rgba(124,58,237,0.3);
  }

  .nav-login:hover {
    background: linear-gradient(135deg, var(--violet), var(--amethyst)) !important;
    box-shadow: 0 0 30px rgba(124,58,237,0.5) !important;
    transform: translateY(-1px);
  }

  /* ── HERO ── */
  #hero {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 120px 5vw 100px;
  }

  .affiliation {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amethyst);
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 30px;
    padding: 6px 18px;
    margin-top: 8px;
    margin-bottom: 28px;
    animation: fadeUp 0.8s ease both;
  }

  .affiliation::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--amethyst);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
  }

  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.8rem, 9vw, 8rem);
    font-weight: 400;
    line-height: 0.97;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    animation: fadeUp 0.8s 0.1s ease both;
  }

  .hero-title span {
    background: linear-gradient(135deg, #c4b5fd 0%, var(--white) 40%, var(--amethyst) 80%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-tagline {
    margin-bottom: 52px;
    animation: fadeUp 0.8s 0.2s ease both;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }

  .hero-tagline-main {
    font-family: 'Cormorant Garamond', sans-serif;
    font-size: clamp(1.2rem, 2.6vw, 1.75rem);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
    line-height: 1.35;
  }

  .hero-tagline-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 400;
    font-style: italic;
    color: var(--sub);
    letter-spacing: 0.04em;
  }

  .hero-cta {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    animation: fadeUp 0.8s 0.3s ease both;
  }

  .btn-primary {
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: white;
    border: none; border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem; font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(124,58,237,0.4), 0 0 0 1px rgba(124,58,237,0.3);
    transition: all 0.3s;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, var(--violet), var(--amethyst));
    box-shadow: 0 12px 40px rgba(124,58,237,0.6);
    transform: translateY(-2px);
  }

  .btn-ghost {
    padding: 14px 36px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem; font-weight: 400;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
  }

  .btn-ghost:hover {
    border-color: rgba(168,85,247,0.5);
    color: white;
    background: rgba(124,58,237,0.1);
    transform: translateY(-2px);
  }

  /* ── SCROLL INDICATOR ── */
  .scroll-hint {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--sub); font-size: 0.7rem; letter-spacing: 0.1em;
    animation: fadeUp 1s 0.6s ease both;
  }

  .scroll-line {
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, var(--amethyst), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }

  @keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%       { opacity: 1;   transform: scaleY(1.2); }
  }

  /* ── SECTION BASE ── */
  section {
    position: relative; z-index: 1;
    padding: 100px 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-label {
    font-size: 0.88rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--amethyst);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
    align-self: flex-start;
  }

  .section-label::after {
    content: '';
    flex: 1; max-width: 60px;
    height: 1px;
    background: linear-gradient(to right, var(--amethyst), transparent);
  }

  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 20px;
    align-self: flex-start;
  }

  /* Centered variant for pricing / contact sections */
  #pricing .section-label,
  #contact .section-label {
    align-self: center;
  }
  #pricing .section-title,
  #contact .section-title {
    align-self: center;
    text-align: center;
  }

  .section-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--amethyst), #c4b5fd);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── ABOUT THE AI ── */
  #about {
    width: 100%; max-width: 1100px;
    margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  }

  .about-text p {
    font-size: 1.13rem;
    line-height: 2;
    color: var(--sub);
    margin-bottom: 24px;
    max-width: 62ch;
    text-align: justify;
  }

  .about-text p strong {
    color: var(--text);
    font-weight: 500;
  }

  .pub-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 10px;
    padding: 10px 20px;
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 8px;
    color: var(--amethyst);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: rgba(168,85,247,0.06);
    transition: all 0.25s;
  }

  .pub-link:hover {
    background: rgba(168,85,247,0.15);
    border-color: var(--amethyst);
    transform: translateX(4px);
  }

  .pub-link svg { flex-shrink: 0; }

  .about-visual {
    display: flex; flex-direction: column; gap: 14px;
  }

  .stat-card {
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 26px;
    display: flex; align-items: center; gap: 18px;
    transition: all 0.3s;
    position: relative; overflow: hidden;
  }

  .stat-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(124,58,237,0.05), transparent);
    opacity: 0; transition: opacity 0.3s;
  }

  .stat-card:hover::before { opacity: 1; }
  .stat-card:hover { border-color: rgba(124,58,237,0.3); transform: translateX(6px); }

  .stat-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
  }

  .stat-body { flex: 1; }
  .stat-val { font-size: 1.65rem; font-weight: 600; color: var(--white); line-height: 1; margin-bottom: 4px; }
  .stat-label { font-size: 0.95rem; color: var(--sub); line-height: 1.5; }

  /* ── FEATURES ── */
  #features { width: 100%; max-width: 1100px; }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 50px;
  }

  .feature-card--centered {
    grid-column: 1 / -1;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .feature-card {
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    transition: all 0.35s;
    position: relative; overflow: hidden;
  }

  .feature-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(168,85,247,0.5), transparent);
    opacity: 0; transition: opacity 0.35s;
  }

  .feature-card:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(124,58,237,0.15); }
  .feature-card:hover::after { opacity: 1; }

  .feature-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem; font-weight: 300;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    margin-bottom: 14px;
  }

  .feature-title {
    font-size: 1.18rem; font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
  }

  .feature-desc {
    font-size: 1.03rem; line-height: 1.85; color: var(--sub);
  }

  /* ── PRICING ── */
  #pricing { width: 100%; max-width: 1200px; }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 50px;
  }

  .plan-card {
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 28px;
    transition: all 0.35s;
    position: relative;
    display: flex; flex-direction: column;
  }

  .plan-card.featured {
    border-color: rgba(124,58,237,0.5);
    background: rgba(46,16,101,0.35);
    box-shadow: 0 0 60px rgba(124,58,237,0.2);
  }

  .plan-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 4px 18px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border-radius: 30px;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: white;
    white-space: nowrap;
  }

  .plan-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; font-weight: 400;
    margin-bottom: 4px;
    color: var(--white);
  }

  .plan-price {
    font-size: 2.4rem; font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin: 6px 0;
  }

  .plan-price sup { font-size: 1rem; font-weight: 400; vertical-align: top; margin-top: 6px; }
  .plan-price span { font-size: 0.85rem; font-weight: 400; color: var(--sub); }

  .plan-period { font-size: 0.78rem; color: var(--sub); margin-bottom: 24px; }

  .plan-sep {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin-bottom: 22px;
  }

  .plan-features { list-style: none; flex: 1; margin-bottom: 28px; }

  .plan-features li {
    font-size: 1rem; color: var(--sub);
    padding: 9px 0;
    display: flex; gap: 10px; align-items: flex-start;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .plan-features li::before {
    content: '✦';
    color: var(--amethyst);
    font-size: 0.6rem;
    margin-top: 3px;
    flex-shrink: 0;
  }

  .plan-features li.muted { opacity: 0.35; }
  .plan-features li.muted::before { color: var(--sub); }

  .plan-btn {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem; font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.25s;
    text-align: center;
    text-decoration: none;
    display: block;
  }

  .plan-btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
  }

  .plan-btn-outline:hover {
    border-color: rgba(124,58,237,0.5);
    background: rgba(124,58,237,0.1);
    color: white;
  }

  .plan-btn-fill {
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border: none;
    color: white;
    box-shadow: 0 4px 20px rgba(124,58,237,0.35);
  }

  .plan-btn-fill:hover {
    background: linear-gradient(135deg, var(--violet), var(--amethyst));
    box-shadow: 0 8px 30px rgba(124,58,237,0.55);
    transform: translateY(-1px);
  }

  /* ── PRICING TIERS (clickable rows) ── */
  .plan-tiers-wrap {
    position: relative;
    margin-top: 14px;
  }

  .plan-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Each tier is now a clickable button row */
  .plan-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.22s, background 0.22s, transform 0.18s;
    text-align: left;
    width: 100%;
    gap: 10px;
  }

  .plan-tier:hover {
    border-color: rgba(124,58,237,0.5);
    background: rgba(124,58,237,0.1);
    transform: translateX(3px);
  }

  .plan-tier-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .plan-tier-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amethyst);
  }

  .plan-tier-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
  }

  .plan-tier-original {
    font-size: 0.82rem;
    color: var(--sub);
    text-decoration: line-through;
    opacity: 0.6;
  }

  .plan-tier-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
  }

  .plan-tier-price sup {
    font-size: 0.72rem;
    font-weight: 400;
    vertical-align: top;
    margin-top: 3px;
  }

  .plan-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 2px 9px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.28);
    border-radius: 30px;
    width: fit-content;
  }

  .plan-tier-period {
    font-size: 0.68rem;
    color: var(--sub);
    margin-top: 2px;
  }

  .plan-tier-arrow {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--amethyst);
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.2s;
  }

  .plan-tier:hover .plan-tier-arrow {
    background: rgba(124,58,237,0.35);
    transform: translateX(3px);
  }

  /* ── 🏆 FOUNDER'S OFFER (and future promotional campaigns) ────────────
     Entirely populated by JS from GET /billing/plans (see
     js/founders-offer-landing.js) — these rules only style it, they don't
     decide whether it shows, what it costs, or what campaign copy to use.
     Reuses the same .plan-tier row structure as the regular Monthly/
     Annual rows above. Accent colour is driven by the campaign's own
     `theme` field: js adds ONE .founders-offer-theme-* class to the
     ribbon based on it, each overriding the --fo-* custom properties
     below — a future campaign can pick a different accent purely via the
     DB. Anything without a matching theme block falls back to gold in JS. */
  .founders-offer-ribbon {
    display: none;   /* shown by JS only once the offer is confirmed active */
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px auto 0;
    padding: 6px 20px;
    width: fit-content;
    background: var(--fo-bg, linear-gradient(135deg, rgba(217,119,6,0.18), rgba(245,158,11,0.18)));
    border: 1px solid var(--fo-border, rgba(245,158,11,0.45));
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--fo-text, #fcd34d);
  }

  .founders-offer-theme-blue {
    --fo-bg: linear-gradient(135deg, rgba(29,78,216,0.18), rgba(59,130,246,0.18));
    --fo-border: rgba(59,130,246,0.45);
    --fo-text: #93c5fd;
    --fo-accent: #60a5fa;
    --fo-topbar-bg: linear-gradient(90deg, #1d4ed8, #3b82f6, #1d4ed8);
    --fo-topbar-text: #eff6ff;
  }

  .founders-offer-theme-violet {
    --fo-bg: linear-gradient(135deg, rgba(109,40,217,0.18), rgba(139,92,246,0.18));
    --fo-border: rgba(139,92,246,0.45);
    --fo-text: #c4b5fd;
    --fo-accent: #a78bfa;
    --fo-topbar-bg: linear-gradient(90deg, #6d28d9, #8b5cf6, #6d28d9);
    --fo-topbar-text: #f5f3ff;
  }

  /* ── 🏆 Founder's Offer — sticky top-of-page bar ─────────────────────
     Separate element from .founders-offer-ribbon (which lives inside
     #pricing) — this one sits above <nav>, visible immediately on page
     load with no scrolling. Shown/hidden and themed by the SAME js that
     drives the ribbon (js/founders-offer-landing.js), reusing the same
     .founders-offer-theme-* class + one fetch — not a second campaign
     check. Solid gradient (not the translucent --fo-bg used by the pill
     ribbon) since this sits above the page's own background, not on it;
     --fo-topbar-bg/--fo-topbar-text are separate variables from --fo-bg/
     --fo-text for exactly that reason — reusing the translucent pill
     colours here would look washed out against nav/hero content directly
     behind it. Falls back to the gold gradient below when no theme class
     matches (or for the 'gold' theme itself, which has no override block
     the same way .founders-offer-ribbon's gold default works). */
  .founders-offer-top-bar {
    display: none;   /* shown by JS only once the offer is confirmed active */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 7px 16px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--fo-topbar-bg, linear-gradient(90deg, #b45309, #f59e0b, #b45309));
    color: var(--fo-topbar-text, #1c1408);
    border-bottom: 1px solid var(--fo-border, rgba(245,158,11,0.6));
  }

  .founders-offer-top-bar .fo-top-bar-icon {
    margin-right: 2px;
  }

  .founders-offer-top-bar .fo-top-bar-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-left: 6px;
  }

  @media (max-width: 520px) {
    .founders-offer-top-bar {
      font-size: 0.72rem;
      padding: 6px 10px;
    }
  }

  .founders-offer-subtitle {
    display: none;   /* shown by JS only when the campaign set one */
    width: 100%;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--sub);
    margin-top: 4px;
  }

  .founders-offer-countdown {
    color: var(--sub);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .founders-offer-tiers {
    display: none;   /* toggled to flex by JS when populated */
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .founders-offer-tiers .plan-tier-label { color: var(--fo-accent, #fbbf24); }

  .founders-offer-tiers .plan-tier:hover {
    border-color: var(--fo-border, rgba(245,158,11,0.55));
    background: var(--fo-bg, rgba(245,158,11,0.1));
  }

  .founders-offer-tiers .plan-tier-arrow {
    background: var(--fo-bg, rgba(245,158,11,0.15));
    border-color: var(--fo-border, rgba(245,158,11,0.3));
    color: var(--fo-accent, #fbbf24);
  }

  .founders-offer-tiers .plan-tier:hover .plan-tier-arrow {
    filter: brightness(1.3);
  }

  /* ── CHECKOUT MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 500;
    background: rgba(8,9,26,0.85);
    backdrop-filter: blur(12px);
    align-items: center; justify-content: center;
    padding: 20px;
  }

  .modal-overlay.open {
    display: flex;
    animation: modalFadeIn 0.25s ease both;
  }

  @keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .modal-box {
    background: #0f0c24;
    border: 1px solid rgba(124,58,237,0.4);
    border-radius: 24px;
    width: 100%; max-width: 480px;
    padding: 40px 36px 32px;
    position: relative;
    box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,58,237,0.15);
    animation: modalSlideUp 0.28s ease both;
  }

  @keyframes modalSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .modal-close {
    position: absolute; top: 18px; right: 20px;
    background: none; border: none; cursor: pointer;
    color: var(--sub); font-size: 1.3rem;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
  }

  .modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
  }

  .modal-plan-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    margin-bottom: 16px;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3);
    color: var(--amethyst);
  }

  .modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem; font-weight: 400;
    color: var(--white);
    margin-bottom: 6px;
  }

  .modal-subtitle {
    font-size: 0.88rem; color: var(--sub);
    margin-bottom: 28px;
    line-height: 1.6;
  }

  .modal-price-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 28px;
  }

  .modal-price-amount {
    font-size: 2rem; font-weight: 700; color: var(--white);
  }

  .modal-price-meta {
    display: flex; flex-direction: column; gap: 2px;
  }

  .modal-price-duration {
    font-size: 0.78rem; font-weight: 600;
    color: var(--amethyst);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .modal-price-note {
    font-size: 0.72rem; color: var(--sub);
  }

  .form-group {
    margin-bottom: 16px;
  }

  .form-group label {
    display: block;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sub);
    margin-bottom: 7px;
  }

  .form-group input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--white);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }

  .form-group input::placeholder { color: rgba(232,228,240,0.25); }

  .form-group input:focus {
    border-color: rgba(124,58,237,0.5);
    background: rgba(124,58,237,0.06);
  }

  .form-group input.error {
    border-color: #dc2626;
    background: rgba(220,38,38,0.06);
  }

  .field-error {
    font-size: 0.78rem;
    color: #f87171;
    margin-top: 5px;
  }

  .modal-error {
    background: rgba(220,38,38,0.1);
    border: 1px solid rgba(220,38,38,0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #f87171;
    margin-bottom: 16px;
    display: none;
  }

  .modal-error.show { display: block; }

  .modal-success {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 0.92rem;
    color: #34d399;
    margin-top: 16px;
    display: none;
    text-align: center;
    line-height: 1.5;
  }

  .modal-success.show { display: block; }

  .modal-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border: none;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; font-weight: 600;
    color: white;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.25s;
    box-shadow: 0 4px 20px rgba(124,58,237,0.4);
    margin-top: 8px;
  }

  .modal-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--violet), var(--amethyst));
    box-shadow: 0 8px 30px rgba(124,58,237,0.6);
    transform: translateY(-1px);
  }

  .modal-submit:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
  }

  .modal-legal {
    font-size: 0.7rem; color: var(--sub);
    text-align: center; margin-top: 14px;
    line-height: 1.5;
  }

  .modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }

  a.modal-submit {
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 0;
  }

  .modal-login-link {
    display: block;
    text-align: center;
    padding: 13px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.95rem; font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s;
  }

  .modal-login-link:hover {
    border-color: rgba(124,58,237,0.5);
    background: rgba(124,58,237,0.1);
    color: white;
  }

  /* ── FOUNDERS ── */
  #founders { width: 100%; max-width: 1100px; }

  .founders-grid { margin-top: 50px; }

  .founders-row1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }

  .founders-row2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: calc(66.66% + 10px);
    margin: 0 auto;
  }

  .founder-card {
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.35s;
  }

  .founder-card:hover {
    border-color: rgba(124,58,237,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(124,58,237,0.12);
  }

  .founder-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.8);
    border: 2px solid rgba(168,85,247,0.3);
  }

  .founder-avatar img {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border: 2px solid rgba(168,85,247,0.3);
    margin: 0 auto 18px;
  }

  .founder-name {
    font-size: 1.18rem; font-weight: 600;
    color: var(--white);
    margin-bottom: 5px;
  }

  .founder-role {
    font-size: 0.88rem;
    color: var(--amethyst);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .founder-bio {
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--sub);
    text-align: justify;
  }

  .bio-more { display: none; }

  .founder-bio.expanded .bio-more { display: inline; }

  .founder-bio.expanded .dots { display: none; }

  .bio-toggle {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--amethyst);
    cursor: pointer;
    background: none; border: none; padding: 0;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.03em;
    transition: opacity 0.2s;
  }

  .bio-toggle:hover { opacity: 0.75; }

  /* ── FAQ ── */
  #faq { width: 100%; max-width: 820px; }

  .faq-list {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .faq-item {
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
  }

  .faq-item:hover { border-color: rgba(124,58,237,0.3); }
  .faq-item.open { border-color: rgba(124,58,237,0.4); }

  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--white);
  }

  .faq-question-text { flex: 1; }

  .faq-icon {
    flex-shrink: 0;
    color: var(--amethyst);
    transition: transform 0.3s ease;
  }

  .faq-item.open .faq-icon { transform: rotate(45deg); }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 26px;
  }

  .faq-item.open .faq-answer {
    max-height: 600px;
    padding: 0 26px 24px;
  }

  .faq-answer p {
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--sub);
  }

  .faq-answer p + p { margin-top: 10px; }

  .faq-answer ul {
    margin: 10px 0 0 20px;
    padding: 0;
  }

  .faq-answer li {
    font-size: 0.98rem;
    line-height: 1.9;
    color: var(--sub);
  }

  /* ── CONTACT ── */
  #contact { width: 100%; max-width: 700px; text-align: center; }

  .contact-body {
    font-size: 1.12rem; color: var(--sub); line-height: 1.95; margin-bottom: 38px;
  }

  .contact-links {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  }

  .contact-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px;
    background: rgba(12, 9, 32, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--sub);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s;
  }

  .contact-chip:hover {
    border-color: rgba(168,85,247,0.4);
    color: var(--text);
    background: rgba(124,58,237,0.1);
    transform: translateY(-2px);
  }

  /* ── FOOTER ── */
  footer {
    position: relative; z-index: 1;
    border-top: 1px solid var(--border);
    padding: 36px 5vw;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
  }

  .footer-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
  }

  .footer-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; font-weight: 600;
    background: linear-gradient(120deg, #e8e4f0, var(--amethyst));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .footer-sep { color: var(--border); font-size: 0.8rem; }
  .footer-copy { font-size: 0.75rem; color: var(--sub); }

  .footer-uni {
    font-size: 0.72rem;
    color: rgba(168,85,247,0.7);
    letter-spacing: 0.04em;
  }

  .disclaimer {
    max-width: 680px;
    font-size: 0.7rem;
    color: rgba(232,228,240,0.3);
    line-height: 1.7;
    text-align: center;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    background: rgba(255,255,255,0.015);
  }

  .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
    z-index: 200;
  }

  .nav-hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s;
  }

  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile-menu {
    display: none;
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(8,9,26,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 20px 5vw 28px;
    z-index: 99;
    flex-direction: column;
    gap: 4px;
  }

  .nav-mobile-menu.open { display: flex; }

  .nav-mobile-menu a {
    padding: 13px 16px;
    font-size: 1rem; font-weight: 500;
    color: var(--sub);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s;
    letter-spacing: 0.03em;
  }

  .nav-mobile-menu a:hover {
    color: var(--white);
    background: rgba(124,58,237,0.15);
  }

  .nav-mobile-menu .nav-login {
    margin-top: 8px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: white !important;
    text-align: center;
  }

  @media (max-width: 768px) {
    .nav-hamburger { display: flex; }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .reveal {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
    width: 100%;
  }

  .reveal.visible {
    opacity: 1; transform: translateY(0);
  }

  /* ── LOGO IMAGES ── */
  .nav-logo-img {
    height: 58px; width: auto; display: block;
    transition: filter 0.3s;
  }
  .hero-logo-wrap {
    margin-bottom: 38px;
    animation: fadeUp 0.8s 0s ease both;
  }
  .hero-logo-img {
    height: clamp(120px, 20vw, 200px); width: auto;
    animation: logoFloat 6s ease-in-out infinite;
  }
  @keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
  }
  .footer-logo-img {
    height: 36px; width: auto; opacity: 0.85;
  }

  /* ── TABLET (1024px and below) ── */
  @media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    #about { gap: 50px; }
    #pricing { max-width: 780px; }
  }

  /* ── TABLET (768px and below) ── */
  @media (max-width: 768px) {
    nav { padding: 0 4vw; }
    .nav-tabs { display: none; }
    #about { grid-template-columns: 1fr; gap: 40px; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .founders-row1 { grid-template-columns: repeat(2, 1fr); }
    .founders-row2 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .hero-title { font-size: clamp(3rem, 14vw, 5rem); }
    section { padding: 70px 5vw; }
    .hero-tagline-main { font-size: clamp(1.05rem, 3.5vw, 1.4rem); }
    .hero-tagline-sub { font-size: clamp(0.95rem, 2.5vw, 1.18rem); }
    #pricing { max-width: 600px; }
    .modal-box { padding: 32px 22px 26px; }
  }

  /* ── MOBILE (500px and below) ── */
  @media (max-width: 500px) {
    .nav-logo { font-size: 1.2rem; }
    .btn-primary, .btn-ghost { padding: 12px 24px; font-size: 0.9rem; }
    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .founders-row1 { grid-template-columns: 1fr; }
    .founders-row2 { grid-template-columns: 1fr; max-width: 100%; }
    section { padding: 60px 5vw; }
    .hero-tagline-main { font-size: 1.05rem; }
    .hero-tagline-sub { font-size: 0.95rem; }
    .section-title { font-size: clamp(2rem, 8vw, 2.8rem); }
    #pricing { max-width: 100%; }
    .feature-card--centered { max-width: 100%; }
  }