:root {
        --container-pad: 28px; /* unify left/right page padding for perfect centering */
        /* Solid background matching the previous top color */
        --page-bg: #343434;
        --accent: #ffb86b;  /* warm orange */
        --accent-strong: color-mix(in oklab, var(--accent) 88%, white 12%);
        /* Glass surfaces tuned for dark background */
        --glass-bg: rgba(50,50,50,0.60);
        --glass-stroke: rgba(255,255,255,0.14);
        --glass-highlight: rgba(255,255,255,0.18);
        --muted-gray: #c9c9c9;
        --text-strong: var(--accent);
        --brand: var(--accent);
        --link: var(--accent);
        --link-hover: color-mix(in oklab, var(--accent) 92%, white 8%);
        /* Toggle labels match background color */
        --toggle-text: var(--page-bg);
        /* Grain overlay strength */
        --grain-opacity: 0.10;
      }

      html, body {
        height: 100%;
      }
      body {
        margin: 0;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--page-bg);
        font-family: 'Bebas Neue', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      /* Main-site variant: near-black background without affecting portfolio */
      body.near-black { --page-bg: #141414; --ambient: #ffffff; }
      /* Disable ambient background on main site */
      body.near-black .ambient-bg { display: none; }
      body.near-black .ambient-bg canvas { display: none; }

      /* Subtle grainy texture overlay (GPU-cheap, no network) */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: var(--grain-opacity);
        mix-blend-mode: soft-light;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        background-size: 280px 280px; /* tile size for fine grain */
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Ambient background disabled (no red blur) */
      .ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
      .ambient-bg canvas { width: 100%; height: 100%; display: none; }
      .ambient-bg canvas.glow { filter: none; opacity: 0; }
      .ambient-bg canvas.dots { filter: none; opacity: 0; mix-blend-mode: normal; }

      /* Top navigation bar without glow/shadow */
      .app-nav {
        position: sticky;
        top: 0;
        width: 100%;
        background: var(--page-bg);
        /* Downward drop shadow to create overlap */
        box-shadow:
          0 18px 34px -18px rgba(0,0,0,0.55),
          0 8px 18px -10px rgba(0,0,0,0.35);
        /* Thin separator line under nav */
        border-bottom: 1px solid rgba(255,255,255,0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 2; /* above ambient */
      }
      .app-nav .nav-inner {
        max-width: none; /* full-bleed */
        width: 100%;
        margin: 0;
        padding: 32px var(--container-pad); /* tall header; side pad matches content */
        display: flex;
        flex-direction: column; /* stack brand over links */
        align-items: center;
        justify-content: center;
        gap: 0;
      }
      /* Ensure nav and main content share the exact same center line */
      .app-nav .nav-inner,
      .demo-wrap { max-width: 1100px; margin-left: auto; margin-right: auto; }
      .brand {
        font-weight: 700;
        color: var(--brand);
        letter-spacing: 0.2px;
        font-size: clamp(28px, 3.8vw, 40px);
        text-align: center;
        line-height: 1; /* tighten vertical alignment */
        display: inline-flex; align-items: center; justify-content: center;
      }
      .brand-subtitle {
        font-weight: 300; /* thin */
        font-size: clamp(12px, 1.6vw, 14px);
        color: var(--link);
        letter-spacing: 0.2px;
        margin-top: 2px;
        text-align: center;
      }
      /* Primary nav links under brand */
      .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(6px, 1.8vw, 14px);
        margin-top: clamp(20px, 3vw, 28px);
        flex-wrap: wrap;
      }
      .nav-link {
        color: var(--link);
        text-decoration: none;
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
        font-weight: 300; /* semi-thin */
        letter-spacing: 0.3px;
        font-size: clamp(14px, 2vw, 18px);
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid transparent;
        transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
        line-height: 1; display: inline-flex; align-items: center; justify-content: center;
      }
      .nav-link:hover {
        color: var(--link-hover);
        text-decoration: underline;
        background-color: rgba(20,24,32,0.04);
        border-color: rgba(20,24,32,0.06);
      }
      .nav-link:focus-visible {
        outline: 2px solid color-mix(in oklab, var(--accent) 60%, white);
        outline-offset: 2px;
      }

      /* Main-site variant: force white nav text */
      .app-nav.nav-white .brand { color: #ffffff; }
      .app-nav.nav-white .brand-subtitle { color: #ffffff; opacity: 0.9; }
      .app-nav.nav-white .nav-link { color: #ffffff; }
      .app-nav.nav-white .nav-link:hover { color: #ffffff; background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
      .app-nav.nav-white .nav-link:focus-visible { outline: 2px solid rgba(255,255,255,0.9); }

      /* Main content centers vertically below the nav */
      .page-main {
        flex: 1;
        display: flex;
        flex-direction: column; /* stack sections vertically */
        align-items: center;     /* center them horizontally */
        justify-content: flex-start;
        width: 100%;
        padding-top: 12px; /* small breathing room */
        position: relative;
        z-index: 1;
      }

      /* Container just to center and demo */
      .demo-wrap {
        --title-gap: clamp(12px, 2.5vw, 20px);
        padding: 0 var(--container-pad);
        padding-top: clamp(24px, 6vw, 64px); /* space above title under nav */
        padding-bottom: 32px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* The segmented toggle button */
      .section-title {
        font-weight: 900;
        line-height: 0.98; /* a bit more breathing room */
        font-size: clamp(48px, 9vw, 96px);
        color: var(--text-strong);
        letter-spacing: 1px; /* increased tracking */
        margin: 0 0 var(--title-gap);
      }
      /* Optional variant: white hero title (used on main site) */
      .section-title.title-white {
        color: #ffffff;
        text-shadow: none; /* remove hero title glow */
      }
      .section-subtitle {
        font-weight: 400;
        font-size: clamp(18px, 2.4vw, 28px);
        color: var(--muted-gray);
        letter-spacing: 0.3px;
        margin: -6px 0 var(--title-gap);
      }
      /* Intro body copy under toggle */
      .intro-body {
        color: var(--muted-gray);
        font-weight: 300;
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1.45;
        max-width: 920px;
        margin: 10px auto 0;
        padding: 0 16px;
        text-align: center;
      }
      /* Subtitle link styling (default accent) */
      .section-subtitle a { color: var(--link); text-decoration: none; }
      .section-subtitle a:hover { color: var(--link-hover); text-decoration: underline; }
      /* Powered-by variant: smaller, thinner, neutral links */
      .section-subtitle.powered-by {
        font-size: clamp(13px, 1.9vw, 16px);
        font-weight: 200;
        color: var(--muted-gray);
        margin-top: 2px;
        margin-bottom: 0;
      }
      .section-subtitle.powered-by a {
        color: inherit;
        font-weight: 500; /* slightly heavier for brand names */
        text-decoration: none;
      }
      .section-subtitle.powered-by a:hover { color: var(--link); text-decoration: underline; }
      .section-subtitle.powered-by a:focus-visible { color: var(--link); outline-offset: 2px; }

      /* The segmented toggle button */
      .segmented-toggle {
        /* Responsive sizing */
        --h: clamp(32px, 8vw, 52px);
        /* Base width (can be overridden per-instance) */
        --w: clamp(220px, 70vw, 420px);
        --pill-inset: calc(var(--h) * 0.12); /* slightly tighter inset at smaller sizes */
        --edge-adjust: 2px; /* nudge to equalize right/left visual spacing */
        --indicator-x: 0%;
        /* Unified radii so outer/back matches the inner slider curvature */
        --outer-radius: calc(var(--h) / 2);
        position: relative;
        display: inline-grid;
        width: var(--w);
        height: var(--h);
        margin-inline: 24px; /* ensure breathing room from viewport edges */
        border-radius: var(--outer-radius);
        border: none;
        background-color: var(--glass-bg);
        background-image: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4));
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
        background-clip: padding-box;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        box-shadow:
          0 18px 30px rgba(17,24,39,0.12),
          0 0 18px color-mix(in oklab, var(--accent) 20%, transparent), /* orange ambient glow */
          0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), /* subtle accent ring */
          0 0 0 0.5px rgba(255,255,255,0.22) inset;
        padding: 0;
        overflow: hidden;
        margin-top: 12px;
        will-change: transform;
        transform: translateZ(0);
        -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 99.6%, transparent 100%);
                mask-image: radial-gradient(100% 100% at 50% 50%, #000 99.6%, transparent 100%);
      }
      .hero-toggle { margin-top: clamp(18px, 5vw, 42px); }

      /* Inner accent outline around the outer pill */
      .segmented-toggle::before {
        content: "";
        position: absolute;
        inset: 1px; /* sit just inside the glass edge */
        /* Match the effective curvature by subtracting the inset from the radius */
        border-radius: calc(var(--outer-radius) - 1px);
        box-shadow:
          0 0 0 0.5px color-mix(in oklab, var(--accent) 22%, transparent) inset,
          0 0 0 1.5px rgba(255,255,255,0.08) inset; /* soft inner rings reduce aliasing */
        pointer-events: none;
        z-index: 1; /* below indicator (z=2), above background */
      }

      /* Outer soft oval shadow for premium feel */
      .segmented-toggle::after {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: -22%;
        height: 120%;
        /* Keep the glow shape consistent with the outer curvature */
        border-radius: calc(var(--outer-radius) - 2px);
        background: radial-gradient(60% 60% at 50% 20%, rgba(17,24,39,0.12), rgba(17,24,39,0.04) 60%, transparent 70%);
        filter: blur(10px);
        z-index: 0;
        pointer-events: none;
      }

      .segmented-toggle button {
        all: unset;
        position: relative;
        display: grid;
        /* Support multi-slot layout; defaults to 4 here */
        grid-template-columns: repeat(var(--slots, 4), 1fr);
        align-items: stretch; /* allow labels to fill full height for perfect centering */
        justify-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        border-radius: inherit;
      }

      /* Sliding indicator */
      .indicator {
        position: absolute;
        top: var(--pill-inset);
        left: var(--pill-inset);
        /* Width spans one slot: (inner width)/slots */
        width: calc((100% - var(--pill-inset) * 2) / var(--slots, 4));
        height: calc(100% - var(--pill-inset) * 2);
        border-radius: calc((var(--h) - var(--pill-inset)*2) / 2);
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84));
        border: none;
        box-shadow:
          0 12px 18px rgba(17,24,39,0.16),
          0 0 0 0.5px rgba(255,255,255,0.65) inset,
          0 -1px 0 0 rgba(0,0,0,0.03) inset,
          0 0 0 1.2px rgba(255,255,255,0.20) inset;
        /* Move by its own width N times (index 0..slots-1) */
        transform: translateX(calc(var(--index, 0) * 100%));
        transform-origin: center;
        /* Smooth, consistent slide to the selected segment */
        transition: transform 320ms cubic-bezier(.4,0,.2,1), box-shadow 200ms ease;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 99.6%, transparent 100%);
                mask-image: radial-gradient(100% 100% at 50% 50%, #000 99.6%, transparent 100%);
        z-index: 2; /* keep above decorative border glow */
        overflow: hidden; /* clip internal highlight so it never protrudes */
      }

      /* Gloss and inner ring for the pill */
      .indicator::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
        opacity: 0.32; /* reduce washout under label */
        pointer-events: none;
      }
      .indicator::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.7) inset;
        pointer-events: none;
      }

      /* Back-compat for two-state variant; ignored for 4-slot */
      .segmented-toggle.is-right { --indicator-x: calc(100% - var(--edge-adjust)); }

      /* Four-slot indicator positions via index */
      .segmented-toggle { --slots: 4; --index: 0; }
      .segmented-toggle.is-idx-0 { --index: 0; }
      .segmented-toggle.is-idx-1 { --index: 1; }
      .segmented-toggle.is-idx-2 { --index: 2; }
      .segmented-toggle.is-idx-3 { --index: 3; }

      /* Active label: make current category text orange */
      .segmented-toggle.is-idx-0 .label[data-idx="0"],
      .segmented-toggle.is-idx-1 .label[data-idx="1"],
      .segmented-toggle.is-idx-2 .label[data-idx="2"],
      .segmented-toggle.is-idx-3 .label[data-idx="3"] {
        color: var(--accent);
        font-weight: 800;
      }

      .segmented-toggle button:active .indicator {
        /* Keep current position; only add subtle press scale */
        transform: translateX(calc(var(--index, 0) * 100%)) scale(0.98);
      }

      /* No icon inside indicator (removed) */

      /* Labels */
      .label {
        position: relative;
        z-index: 3; /* ensure text sits above the moving pill */
        font-size: clamp(13px, calc(var(--h) * 0.30), 18px);
        letter-spacing: 1px; /* wider tracking for readability */
        font-weight: 600;
        user-select: none;
        transition: color 220ms ease, transform 220ms ease, opacity 220ms ease;
        height: 100%;
        width: 100%; /* make the whole slot hoverable */
        line-height: 1; /* prevent font metrics shifting baseline */
        display: flex; align-items: center; justify-content: center;
        color: var(--toggle-text);
      }
      /* Orange hover for labels */
      .segmented-toggle .label:hover { color: var(--accent); }
      .segmented-toggle .label:focus-visible { color: var(--accent); outline: none; }
      .left { justify-self: center; padding-left: 0; }
      .right { justify-self: center; padding-right: 0; }

      /* Default (left active = Prospect) */
      .segmented-toggle:not(.is-right) .left  { color: var(--toggle-text); transform: translateX(0); opacity: 1; font-weight: 800; text-shadow: none; }
      .segmented-toggle:not(.is-right) .right { color: var(--toggle-text); transform: translateX(0); opacity: .85; }

      /* Right active = Invited */
      .segmented-toggle.is-right .right { color: var(--toggle-text); transform: translateX(0); opacity: 1; font-weight: 800; text-shadow: none; }
      .segmented-toggle.is-right .left  { color: var(--toggle-text); transform: translateX(0); opacity: .85; }

      /* Focus styles for keyboard users */
      .segmented-toggle button:focus-visible {
        outline: 3px solid color-mix(in oklab, var(--accent) 70%, white);
        outline-offset: 6px;
        border-radius: calc(var(--h) / 2 + 6px);
      }

      /* Subtle hover polish for extra pop */
      .segmented-toggle:hover .indicator {
        box-shadow:
          0 14px 24px rgba(17,24,39,0.18),
          0 2px 0 0 rgba(255,255,255,0.85) inset,
          0 -1px 0 0 rgba(0,0,0,0.04) inset,
          0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent) inset,
          0 8px 18px color-mix(in oklab, var(--accent) 16%, transparent);
      }

      /* Slightly emphasize ring and glow on hover */
      .segmented-toggle:hover::before {
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 38%, transparent) inset;
      }
      .segmented-toggle:hover {
        box-shadow:
          0 20px 34px rgba(17,24,39,0.14),
          0 0 18px color-mix(in oklab, var(--accent) 16%, transparent),
          0 0 0 1px rgba(255,255,255,0.22) inset;
      }

      /* Masonry video board */
      .board-section {
        width: 100%;
        max-width: 1200px;
        padding: clamp(12px, 3vw, 24px) clamp(16px, 4vw, 32px) 72px;
        margin-top: clamp(12px, 3vw, 28px); /* space below toggle */
      }
      .video-board {
        --gap: clamp(12px, 2vw, 20px);
        --card-radius: 18px;
        /* Masonry-style columns: flow cards vertically like Pinterest */
        column-count: 1;              /* single column on very small screens */
        column-gap: var(--gap);       /* horizontal space between columns */
      }
      /* Avoid subpixel overflow within cards */
      .video-card, .video-card * { box-sizing: border-box; }
      /* Visible by default; shows static blank cards */
      #videoBoard { display: block; }
      /* Two columns on larger screens */
      @media (min-width: 600px) { .video-board { column-count: 2; } }
      @media (min-width: 900px) { .video-board { column-count: 2; } }
      @media (min-width: 1200px) { .video-board { column-count: 2; } }

      .video-card {
        --ratio: 16 / 9;
        position: relative;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        margin: 0 0 var(--gap);
        border-radius: var(--card-radius);
        overflow: hidden; /* clip corners */
        /* Dark, slightly raised card */
        background: #141414;
        border: 3px solid #2a2a2a; /* semi-thick border */
        box-shadow:
          0 10px 20px rgba(0,0,0,0.35),
          0 2px 0 rgba(255,255,255,0.04) inset,
          0 0 0 1px rgba(255,255,255,0.03) inset;
      }
      /* Content wrapper that preserves a margin/border when media is present */
      .video-card .card-media {
        padding: 16px; /* ensures the border stays visible around media */
        background: #141414;
        aspect-ratio: var(--ratio, 16 / 9);
      }
      .video-card .card-media img,
      .video-card .card-media video,
      .video-card .card-media canvas,
      .video-card .card-media iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: var(--ratio, 16 / 9);
        border-radius: calc(var(--card-radius) - 10px);
        background: #0f0f0f;
      }
      /* Rive cards use a wrapper; give it the same treatment */
      .video-card .rive-wrap {
        position: relative;
        margin: 14px;                /* semi‑thick inner margin like the mock */
        width: auto;                 /* let margin create the inset without subpixel calc */
        aspect-ratio: var(--ratio, 16 / 9);
        overflow: hidden;            /* clip to rounded corners */
        border-radius: calc(var(--card-radius) - 8px);
        background: linear-gradient(180deg, #1b1b1b, #101010);
        border: 1px solid #2a2a2a;   /* subtle inner stroke */
        background-clip: padding-box; /* avoid halo at rounded edges */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 18px 60px rgba(0,0,0,0.35);
      }
      .video-card .rive-wrap::after { /* faint corner glow to match reference */
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: inset 0 18px 60px rgba(0,0,0,0.35);
      }
      .video-card .rive-wrap canvas {
        position: absolute;
        inset: -1px;                  /* bleed 1px to eliminate hairline seams */
        display: block;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        max-width: none;
        max-height: none;
        border-radius: inherit;       /* match wrapper rounding exactly */
        background: transparent;
        transform: translateZ(0);     /* improve edge AA */
        backface-visibility: hidden;
      }
      /* Ensure a visible inner margin even when media is a direct child */
      .video-card > video,
      .video-card > canvas,
      .video-card > iframe {
        display: block;
        width: 100%;
        height: auto;
        border-radius: calc(var(--card-radius) - 10px);
        margin: 16px; /* preserves a semi-thick inner margin */
        background: #0f0f0f;
      }
      /* Optional chip label in corner */
      .video-card .card-chip {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #d6d6d6;
        background: #1c1c1c;
        border: 1px solid #353535;
        border-radius: 999px;
        padding: 6px 10px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
        pointer-events: none;
      }
      .video-card video, .video-card iframe { display: block; width: 100%; height: auto; border-radius: 0; }
      /* Blank card placeholder area */
      .card-blank { position: relative; width: 100%; aspect-ratio: var(--ratio, 16 / 9); background: #1a1a1a; }
      /* Simple appear animation for new cards */
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
      .fade-in { animation: fadeIn 220ms ease-out both; }
      /* removed bottom text bar */

      /* Contact form (main site) */
      .contact-section { width: 100%; display: flex; justify-content: center; padding: clamp(16px, 5vw, 44px) 16px 48px; }
      .contact-form { width: 100%; max-width: 900px; }
      .contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px) clamp(16px, 2.6vw, 26px); }
      @media (min-width: 720px) {
        .contact-grid { grid-template-columns: 1fr 1fr; }
        .contact-grid .field-span { grid-column: 1 / -1; }
      }
      .field { display: flex; flex-direction: column; gap: 4px; }
      .field label { font-size: 12px; color: var(--muted-gray); letter-spacing: 0.3px; }
      .input-underline {
        appearance: none; background: transparent; border: 0; outline: none;
        border-bottom: 2px solid rgba(255,255,255,0.42); color: var(--text-strong);
        padding: 10px 2px 8px; font-size: clamp(14px, 1.8vw, 16px);
        transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
      }
      .input-underline::placeholder { color: color-mix(in oklab, var(--muted-gray) 86%, white); }
      .input-underline:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
      .input-underline.textarea { resize: vertical; min-height: 96px; padding-top: 8px; }
      .actions { margin-top: clamp(10px, 3vw, 18px); }
      .btn-accent { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: var(--accent); color: #fff; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; transition: filter 160ms ease, transform 120ms ease; }
      .btn-accent:hover { filter: brightness(0.96); }
      .btn-accent:active { transform: translateY(1px); }
      .contact-success { max-width: 900px; margin: 12px auto 0; padding: 10px 14px; color: #d1f7c4; background: rgba(20, 120, 20, 0.12); border: 1px solid rgba(20,120,20,0.25); border-radius: 10px; text-align: center; }

      /* Responsive tweaks */
      @media (max-width: 600px) {
        .app-nav .nav-inner { padding: 20px 16px; }
        .brand { font-size: 28px; letter-spacing: 0.4px; }
        .demo-wrap { padding: 24px 16px; padding-top: clamp(16px, 6vw, 36px); }
        .section-title { font-size: clamp(24px, 8vw, 36px); }
        .section-subtitle { font-size: clamp(15px, 4.2vw, 20px); }
        .segmented-toggle {
          --h: clamp(44px, 14vw, 56px);
          --w: min(92vw, 380px);
          margin-inline: 16px;
        }
        .board-section { padding-left: 16px; padding-right: 16px; }
      }

      /* Footer */
      .app-footer { width: 100%; border-top: 1px solid rgba(20,24,32,0.06); background: transparent; }
      .app-footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: center; }
      .social { display: flex; align-items: center; justify-content: center; gap: 16px; }
      .social-link { color: var(--link); text-decoration: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
      .social-link:hover { color: var(--link-hover); background-color: rgba(20,24,32,0.05); }
      .social-link:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 50%, white); outline-offset: 2px; border-radius: 8px; }
      .icon-img { width: 22px; height: 22px; display: block; object-fit: contain; }
      /* Optional helper: if your icons are dark-only PNG/SVG, add class 'auto-invert-dark' to auto invert in dark theme */
      body[data-theme="dark"] .auto-invert-dark { filter: invert(1) hue-rotate(180deg); }

      /* Dark theme overrides: slate greys + orange accent */
      body[data-theme="dark"] {
        /* Deep slate greydient with lighter center area */
        --page-bg: #343434; /* unify with top background color */
        --glass-bg: rgba(20,24,32,0.42);
        --glass-stroke: rgba(255,255,255,0.14);
        --glass-highlight: rgba(255,255,255,0.18);
        --muted-gray: #a6adbb;
        --text-strong: #e5e7eb;
        --accent: #ffb86b; /* warm orange */
        --accent-strong: color-mix(in oklab, var(--accent) 88%, white 12%);
        --glow: color-mix(in oklab, var(--accent) 70%, white 30%);
        --brand: var(--accent-strong);
        --link: var(--accent-strong);
        --link-hover: color-mix(in oklab, var(--accent) 92%, white 8%);
        --grain-opacity: 0.14; /* a bit stronger on darker backdrop */
      }

      body[data-theme="dark"] .app-nav {
        /* Slightly stronger drop shadow on dark for depth */
        box-shadow:
          0 22px 40px -18px rgba(0,0,0,0.65),
          0 10px 24px -12px rgba(0,0,0,0.5);
        border-bottom: 1px solid rgba(255,255,255,0.18); /* thin white separator */
        backdrop-filter: blur(8px);
      }
      body[data-theme="dark"] .nav-link:hover { background-color: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
      body[data-theme="dark"] .app-footer { border-top-color: rgba(255,255,255,0.12); }
      body[data-theme="dark"] .social-link:hover { background-color: rgba(255,255,255,0.08); }

      /* Dark, premium toggle inspired by reference */
      body[data-theme="dark"] .segmented-toggle {
        border-color: rgba(255,255,255,0.10);
        background: linear-gradient(180deg, rgba(24,30,39,0.55), rgba(14,18,25,0.42));
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        background-clip: padding-box;
        box-shadow:
          0 18px 34px rgba(0,0,0,0.55),
          0 0 20px color-mix(in oklab, var(--accent) 22%, transparent), /* orange edge glow */
          0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent), /* accent ring */
          0 1px 0 rgba(255,255,255,0.06) inset,
          0 -1px 0 rgba(0,0,0,0.6) inset,
          0 0 0 1px rgba(255,255,255,0.06) inset; /* faint inner ring */
        position: relative;
      }
      /* Dark: keep a subtle accent outline on the outer pill */
      body[data-theme="dark"] .segmented-toggle::before {
        content: "";
        position: absolute;
        inset: 1.5px;
        border-radius: inherit;
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent) inset; /* lighter ring on dark */
        pointer-events: none;
        z-index: 1;
      }
      @keyframes ringDash { from { stroke-dashoffset: -0.001; } to { stroke-dashoffset: -0.999; } }
      .segmented-toggle .ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; }
      .segmented-toggle .ring svg { width: 100%; height: 100%; display: block; shape-rendering: geometricPrecision; transform: translateZ(0); backface-visibility: hidden; }
      .segmented-toggle .ring .ring-stroke {
        fill: none;
        stroke: color-mix(in oklab, var(--glow) 84%, white 8%);
        stroke-width: 1.0; /* thinner stroke to reduce edge aliasing */
        vector-effect: non-scaling-stroke;
        stroke-linecap: round; stroke-linejoin: round;
        opacity: 0.95;
        filter: drop-shadow(0 0 4px color-mix(in oklab, var(--glow) 70%, transparent))
                drop-shadow(0 0 8px color-mix(in oklab, var(--glow) 35%, transparent));
        /* Very short dash to appear as a dot (sums to 1 for seamless loop) */
        stroke-dasharray: 0.01 0.99;
        stroke-dashoffset: -0.001; /* avoid exact endpoints which can blink */
        animation: ringDash 16s linear infinite both;
      }
      .segmented-toggle:hover .ring .ring-stroke { animation-duration: 12s; }
      /* Soft trail behind the main dot (very low opacity, tiny delays) */
      .segmented-toggle .ring .ring-trail1,
      .segmented-toggle .ring .ring-trail2,
      .segmented-toggle .ring .ring-trail3 { animation-duration: 16s; }
      .segmented-toggle .ring .ring-trail1 { animation-delay: 0.12s; opacity: 0.40; stroke-width: 1.2; stroke-dasharray: 0.012 0.988; filter: drop-shadow(0 0 2px color-mix(in oklab, var(--glow) 55%, transparent)); }
      .segmented-toggle .ring .ring-trail2 { animation-delay: 0.24s; opacity: 0.26; stroke-width: 1.0; stroke-dasharray: 0.014 0.986; filter: drop-shadow(0 0 1.6px color-mix(in oklab, var(--glow) 40%, transparent)); }
      .segmented-toggle .ring .ring-trail3 { animation-delay: 0.36s; opacity: 0.14; stroke-width: 0.9; stroke-dasharray: 0.016 0.984; filter: drop-shadow(0 0 1px color-mix(in oklab, var(--glow) 28%, transparent)); }
      body[data-theme="dark"] .segmented-toggle::after {
        background: radial-gradient(60% 60% at 50% 20%, rgba(0,0,0,0.65), rgba(0,0,0,0.28) 60%, transparent 70%);
        filter: blur(14px);
      }
      body[data-theme="dark"] .indicator {
        /* Clean glass vertical gradient (no radial highlight patch) */
        background-image: linear-gradient(180deg, rgba(44,52,63,0.6), rgba(24,30,39,0.7));
        border-color: rgba(255,255,255,0.14);
        box-shadow:
          0 12px 24px rgba(0,0,0,0.55), /* outer drop */
          0 0 0 1px rgba(255,255,255,0.10) inset, /* outer inner ring */
          0 0 0 2px rgba(255,255,255,0.06) inset, /* second ring */
          0 10px 18px rgba(0,0,0,0.35) inset, /* depth */
          0 -4px 10px rgba(0,0,0,0.45) inset; /* bottom shade */
        transition: transform 440ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
      }
      /* Suppress base pseudo elements in dark theme to avoid bleed */
      body[data-theme="dark"] .indicator::before,
      body[data-theme="dark"] .indicator::after { content: none; display: none; }
      body[data-theme="dark"] .segmented-toggle:hover .indicator {
        box-shadow:
          0 22px 40px rgba(0,0,0,0.6),
          0 0 0 1px rgba(255,255,255,0.08) inset,
          0 12px 20px rgba(0,0,0,0.4) inset,
          0 -4px 12px rgba(0,0,0,0.5) inset;
      }
      body[data-theme="dark"] .segmented-toggle:hover::before {
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent) inset;
      }
      body[data-theme="dark"] .segmented-toggle:hover {
        box-shadow:
          0 22px 40px rgba(0,0,0,0.6),
          0 0 18px color-mix(in oklab, var(--accent) 16%, transparent),
          0 1px 0 rgba(255,255,255,0.06) inset,
          0 -1px 0 rgba(0,0,0,0.6) inset,
          0 0 0 1px rgba(255,255,255,0.06) inset;
      }
      /* Active label emphasis on dark */
      body[data-theme="dark"] .segmented-toggle:not(.is-right) .left  { color: var(--toggle-text); opacity: 1; text-shadow: none; }
      body[data-theme="dark"] .segmented-toggle:not(.is-right) .right { color: var(--toggle-text); opacity: .9; }
      body[data-theme="dark"] .segmented-toggle.is-right .right { color: var(--toggle-text); opacity: 1; text-shadow: none; }
      body[data-theme="dark"] .segmented-toggle.is-right .left  { color: var(--toggle-text); opacity: .9; }

      /* Dark video cards */
      body[data-theme="dark"] .video-card {
        background: linear-gradient(180deg, rgba(28,34,43,0.9), rgba(18,23,30,0.94));
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow:
          0 16px 28px rgba(0,0,0,0.5),
          0 1px 0 rgba(255,255,255,0.06) inset,
          0 -1px 0 rgba(0,0,0,0.55) inset;
      }

      @media (prefers-reduced-motion: reduce) {
        .segmented-toggle,
        .segmented-toggle .indicator,
        .segmented-toggle .label,
        .segmented-toggle::before,
        .segmented-toggle::after {
          transition-duration: 0ms !important;
          transition-delay: 0ms !important;
        }
        .segmented-toggle button:active .indicator {
          transform: translateX(var(--indicator-x)) !important;
        }
        .segmented-toggle .ring .ring-stroke,
        .segmented-toggle .ring .ring-trail1,
        .segmented-toggle .ring .ring-trail2,
        .segmented-toggle .ring .ring-trail3,
        .fade-in {
          animation: none !important;
        }
      }

      /* Subscribe (Substack) section */
      .subscribe-section { width: 100%; display: flex; justify-content: center; padding: clamp(24px, 4vw, 54px) 16px; }
      .subscribe-card {
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
        border-radius: 16px;
        border: 1px solid var(--glass-stroke);
        background: var(--glass-bg);
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        box-shadow: 0 18px 30px rgba(17,24,39,0.12), 0 0 0 1px rgba(255,255,255,0.22) inset;
        padding: clamp(18px, 3.4vw, 28px);
        text-align: center;
      }
      .subscribe-title { margin: 0 0 6px; font-weight: 800; font-size: clamp(22px, 3.8vw, 32px); color: var(--text-strong); }
      .subscribe-desc { margin: 0 0 16px; color: var(--muted-gray); font-weight: 400; font-size: clamp(13px, 2.6vw, 16px); }
      .subscribe-form { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
      .subscribe-input {
        flex: 1 1 320px;
        min-width: 220px;
        max-width: 520px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid var(--glass-stroke);
        background: #fff;
        color: var(--text-strong);
        padding: 10px 14px;
        outline: none;
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
      }
      .subscribe-input::placeholder { color: color-mix(in oklab, var(--muted-gray) 88%, white); }
      .subscribe-input:focus { border-color: color-mix(in oklab, var(--accent) 50%, white); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
      .subscribe-button {
        height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid var(--glass-stroke);
        background: var(--accent);
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.2px;
        cursor: pointer;
        transition: filter 160ms ease, transform 120ms ease;
      }
      .subscribe-button:hover { filter: brightness(0.96); }
      .subscribe-button:active { transform: translateY(1px); }
      body[data-theme="dark"] .subscribe-input { background: rgba(14,18,25,0.72); border-color: rgba(255,255,255,0.14); color: var(--text-strong); }

      /* Remove older white-pill dark styles to avoid conflicts */