:root {
    --orange: #FF6B2C;
    --orange-deep: #E5521A;
    --ink: #0A0A0A;
    --bone: #F5F1EA;
    --cream: #FAF7F1;
    --muted: #6B6B6B;
    --line: rgba(10,10,10,0.08);
  }

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

  body {
    font-family: 'Bricolage Grotesque', sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
    font-feature-settings: "ss01", "ss02";
    -webkit-font-smoothing: antialiased;
  }

  .display {
    font-family: 'Cooper BT', 'Bricolage Grotesque', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.3;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  }

  /* ===== NAV ===== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: rgba(250, 247, 241, 0.8);
    border-bottom: 1px solid var(--line);
  }

  .logo {
    display: flex;
    align-items: center;
    height: 28px;
    text-decoration: none;
  }

  .logo img {
    height: 24px;
    width: auto;
    display: block;
  }

  .nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
  }

  .nav-links a {
    color: var(--ink);
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .nav-links a:hover { opacity: 0.5; }

  .nav-cta {
    background: var(--ink);
    color: var(--cream) !important;
    padding: 10px 18px;
    border-radius: 100px;
    font-weight: 500;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .nav-cta:hover {
    background: var(--orange);
    opacity: 1 !important;
    transform: translateY(-1px);
  }

  /* The menu stays on one line (Blog made it one item longer). Mid-size
     screens tighten it, and drop Vision only when it still cannot fit. */
  .nav-links a, .nav-cta, .lang-toggle { white-space: nowrap; }
  @media (min-width: 769px) and (max-width: 1100px) {
    nav { padding: 16px 24px; }
    .nav-links { gap: 18px; font-size: 13px; }
  }
  @media (min-width: 769px) and (max-width: 940px) {
    .nav-links a[href="#vision"], .nav-links a[href="/#vision"] { display: none; }
  }

  @media (max-width: 768px) {
    nav { padding: 14px 20px; }
    .nav-links { gap: 14px; font-size: 13px; }
    .nav-links .hide-mobile { display: none; }
  }

  /* ===== HERO ===== */
  .hero {
    min-height: 100vh;
    padding: 110px 32px 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ticker-bar {
    position: absolute;
    top: 76px;
    left: 0; right: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--cream);
    font-weight: 500;
  }

  .ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker 50s linear infinite;
    width: max-content;
  }

  .ticker-item {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-right: 32px;
  }

  .ticker-dot {
    width: 5px; height: 5px;
    background: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
  }

  @keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .hero-main {
    margin-top: 40px;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
    min-height: 600px;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
  }

  @media (max-width: 900px) {
    .hero-main {
      grid-template-columns: 1fr;
      min-height: auto;
      gap: 24px;
    }
    .hero-content { max-width: 100%; }
  }

  .globe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 620px;
    margin-left: auto;
    margin-right: 0;
    pointer-events: auto;
    opacity: 0.95;
    animation: fadeUp 1.6s 0.6s both;
  }

  /* Stylized editorial caption under the globe - not a button */
  .globe-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .globe-caption {
    margin: 18px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(10, 10, 10, 0.55);
    font-weight: 400;
    letter-spacing: 0.005em;
    opacity: 0;
    animation: fadeUp 1s 1.8s both;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .globe-caption em {
    font-family: 'Cooper BT', serif;
    font-style: italic;
    color: var(--orange);
    font-size: 1.05em;
    letter-spacing: -0.01em;
  }

  .globe-caption.hidden {
    opacity: 0;
    transform: translateY(4px);
  }

  .globe-caption-dot {
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
    animation: liveDot 2s ease-in-out infinite;
  }

  @media (max-width: 900px) {
    .globe-caption { font-size: 12px; margin-top: 14px; }
  }

  .globe-wrap canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .globe-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,107,44,0.12) 0%, transparent 55%);
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite;
  }

  @keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }

  /* Hint bubble */
  .globe-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ink);
    color: var(--cream);
    font-size: 12px;
    font-weight: 500;
    border-radius: 100px;
    white-space: nowrap;
    pointer-events: none;
    animation: fadeUp 1s 1.4s both, hintPulse 3s ease-in-out 2s infinite;
    box-shadow: 0 8px 24px rgba(10,10,10,0.15);
    z-index: 3;
  }

  .globe-hint.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
    animation: none;
  }

  .globe-hint-dot {
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    animation: liveDot 1.8s ease-in-out infinite;
  }

  @keyframes hintPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
  }

  /* Floating now-playing card */
  .now-playing-float {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--ink);
    color: var(--cream);
    padding: 14px 18px;
    border-radius: 14px;
    min-width: 220px;
    max-width: 280px;
    pointer-events: none;
    box-shadow: 0 12px 32px rgba(10,10,10,0.25);
    border-left: 3px solid var(--orange);
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    z-index: 4;
  }

  .now-playing-float.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .np-float-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 10px;
  }

  .np-float-dot {
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulseDot 1.2s ease-in-out infinite;
  }

  @keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }

  /* Idle = a real song sitting there waiting, not playback. Freeze the
     equaliser and the dot so the card never animates a sound that is not
     actually coming out of the speakers. */
  .now-playing-float.idle .np-float-viz span { animation: none; height: 30%; }
  .now-playing-float.idle .np-float-dot { animation: none; opacity: 0.5; }

  .np-float-title {
    font-family: 'Cooper BT', serif;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    color: var(--cream);
  }

  .np-float-artist {
    font-size: 11px;
    color: rgba(250, 247, 241, 0.6);
    margin-bottom: 10px;
  }

  .np-float-viz {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 18px;
  }

  .np-float-viz span {
    flex: 1;
    max-width: 3px;
    background: var(--orange);
    border-radius: 1px;
    animation: floatVizBar 0.7s ease-in-out infinite;
    opacity: 0.8;
  }

  .np-float-viz span:nth-child(1) { animation-delay: 0.0s; }
  .np-float-viz span:nth-child(2) { animation-delay: 0.1s; }
  .np-float-viz span:nth-child(3) { animation-delay: 0.25s; }
  .np-float-viz span:nth-child(4) { animation-delay: 0.05s; }
  .np-float-viz span:nth-child(5) { animation-delay: 0.3s; }
  .np-float-viz span:nth-child(6) { animation-delay: 0.15s; }
  .np-float-viz span:nth-child(7) { animation-delay: 0.4s; }
  .np-float-viz span:nth-child(8) { animation-delay: 0.2s; }
  .np-float-viz span:nth-child(9) { animation-delay: 0.35s; }
  .np-float-viz span:nth-child(10) { animation-delay: 0.1s; }

  @keyframes floatVizBar {
    0%, 100% { height: 25%; }
    50% { height: 95%; }
  }

  @media (max-width: 900px) {
    .now-playing-float {
      top: 12px;
      left: 12px;
      padding: 10px 14px;
      min-width: 180px;
    }
    .np-float-title { font-size: 15px; }
    .globe-hint { font-size: 11px; padding: 6px 12px; }
  }

  @media (max-width: 900px) {
    .globe-wrap {
      max-width: 420px;
      margin: 24px auto 0;
      opacity: 0.85;
    }
  }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 107, 44, 0.08);
    border: 1px solid rgba(255, 107, 44, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--orange-deep);
    width: fit-content;
    margin-bottom: 36px;
    animation: fadeUp 0.9s 0.2s both;
    letter-spacing: 0.02em;
  }

  .live-dot {
    width: 7px; height: 7px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 107, 44, 0.7);
    animation: liveDot 1.8s ease-in-out infinite;
  }

  @keyframes liveDot {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(255, 107, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0); }
  }

  h1.hero-title {
    font-family: 'Cooper BT', serif;
    /* Ceiling is set by the longest line ("Local music for") against the
       720px hero column, not by taste: above ~112px it wraps mid-phrase and
       the per-line slide-up reveal breaks, since each .line clips overflow. */
    font-size: clamp(52px, 7.6vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    font-weight: 400;
    max-width: 1600px;
  }

  .hero-title .line {
    display: block;
    overflow: hidden;
    padding: 0.05em 0;
  }

  .hero-title .line > span {
    display: inline-block;
    animation: slideUp 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }

  .hero-title .line:nth-child(1) > span { animation-delay: 0.1s; }
  .hero-title .line:nth-child(2) > span { animation-delay: 0.25s; }
  .hero-title .line:nth-child(3) > span { animation-delay: 0.4s; }

  .title-accent {
    font-style: italic;
    color: var(--orange);
    position: relative;
    display: inline-block;
  }

  .rotating-word {
    display: inline-block;
    color: var(--orange);
    font-style: italic;
    min-width: 0.5em;
    position: relative;
  }

  .rotating-word span {
    display: inline-block;
    animation: rotateWord 18s infinite;
    opacity: 0;
    position: absolute;
    left: 0;
    white-space: nowrap;
  }

  .rotating-word span:nth-child(1) { animation-delay: 0s; }
  .rotating-word span:nth-child(2) { animation-delay: 2s; }
  .rotating-word span:nth-child(3) { animation-delay: 4s; }
  .rotating-word span:nth-child(4) { animation-delay: 6s; }
  .rotating-word span:nth-child(5) { animation-delay: 8s; }
  .rotating-word span:nth-child(6) { animation-delay: 10s; }
  .rotating-word span:nth-child(7) { animation-delay: 12s; }
  .rotating-word span:nth-child(8) { animation-delay: 14s; }
  .rotating-word span:nth-child(9) { animation-delay: 16s; }

  @keyframes rotateWord {
    0%, 10% { opacity: 1; transform: translateY(0); }
    11%, 100% { opacity: 0; transform: translateY(-20px); }
  }

  .rotating-word .spacer { visibility: hidden; position: static; animation: none; opacity: 1; }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

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

  .hero-bottom {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 60px;
    align-items: flex-start;
    animation: fadeUp 1s 0.8s both;
    max-width: 540px;
  }

  .hero-lead {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.5;
    color: var(--ink);
  }

  .hero-lead .muted { color: var(--muted); }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .cta-label-mobile { display: none; }
  .cta-label-desktop { display: inline; }
  .hero-radio-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hero-radio-sub {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 3px;
    padding-left: 14px;
  }
  .hero-proof {
    display: flex;
    align-items: baseline;
    gap: 34px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    max-width: 500px;
  }

  .hero-proof-item { display: flex; flex-direction: column; gap: 3px; }

  .hero-proof-num {
    font-family: 'Cooper BT', serif;
    font-size: 32px;
    line-height: 1;
    color: var(--orange);
  }

  .hero-proof-label { font-size: 12px; color: var(--muted); }

  @media (max-width: 768px) {
    .hero-proof { gap: 22px; margin-top: 24px; padding-top: 20px; }
    .hero-proof-num { font-size: 26px; }
    .hero-proof-label { font-size: 11px; line-height: 1.35; }
  }

  .hero-subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .hero-subs span { padding: 0 14px; }
  .hero-subs span:last-child { text-align: right; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    border: 1px solid transparent;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--ink);
    color: var(--cream);
  }

  .btn-primary:hover {
    background: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 107, 44, 0.3);
  }

  .btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
  }

  .btn-secondary:hover {
    background: var(--orange);
    color: var(--cream);
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 107, 44, 0.3);
  }

  @media (max-width: 768px) {
    .hero-bottom { gap: 24px; margin-top: 40px; max-width: 100%; }
    .btn { padding: 14px 22px; font-size: 14px; }
  }

  /* ===== FLOATING LANGUAGE ORBS ===== */
  .orb-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
  }

  .orb {
    position: absolute;
    font-family: 'Cooper BT', serif;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
    animation: float 20s ease-in-out infinite;
    white-space: nowrap;
  }

  @keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -15px); }
  }

  /* ===== SECTION: IN EVERY LANGUAGE ===== */
  .languages {
    padding: 120px 32px;
    background: var(--ink);
    color: var(--cream);
    overflow: hidden;
    position: relative;
  }

  .section-label {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 24px;
    font-weight: 500;
  }

  .section-title {
    font-family: 'Cooper BT', serif;
    font-size: clamp(40px, 5.5vw, 80px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
  }

  .section-title em {
    font-style: italic;
    color: var(--orange);
  }

  .section-desc {
    font-size: 18px;
    line-height: 1.5;
    max-width: 620px;
    color: rgba(245, 241, 234, 0.7);
    margin-bottom: 80px;
  }

  .language-wall {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 -32px;
  }

  .lang-row {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    font-family: 'Cooper BT', serif;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: -0.02em;
    opacity: 0.25;
    transition: opacity 0.4s;
  }

  .lang-row:hover { opacity: 1; }

  .lang-row-track {
    display: flex;
    gap: 32px;
    animation: scrollX 60s linear infinite;
    width: max-content;
  }

  .lang-row:nth-child(even) .lang-row-track {
    animation-direction: reverse;
    animation-duration: 70s;
  }

  .lang-row:nth-child(3) .lang-row-track {
    animation-duration: 80s;
  }

  @keyframes scrollX {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .lang-item {
    display: inline-flex;
    align-items: center;
    gap: 32px;
  }

  .lang-bullet {
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ===== HOW IT WORKS ===== */
  .how-it-works {
    padding: 120px 32px;
    background: var(--bone);
    position: relative;
  }

  .how-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
    align-items: end;
  }

  .how-header .section-title { color: var(--ink); }
  .how-header .section-desc { color: var(--muted); margin-bottom: 0; }

  .steps {
    display: grid;
    /* Four steps since Distribute/Earn collapsed into Own. A stale 5 here
       renders an empty grey cell at the end of the row. */
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
  }

  @media (max-width: 1100px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
  }

  .step {
    background: var(--bone);
    padding: 36px 24px;
    transition: all 0.4s;
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
  }

  .step:hover {
    background: var(--cream);
  }

  .step-num {
    font-family: 'Cooper BT', serif;
    font-size: 56px;
    line-height: 1;
    color: var(--orange);
    margin-bottom: 20px;
    letter-spacing: -0.03em;
  }

  .step-title {
    font-family: 'Cooper BT', serif;
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .step-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: auto;
  }

  .step-icon {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 28px;
    right: 24px;
    font-size: 18px;
    background: var(--cream);
  }

  @media (max-width: 768px) {
    .how-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .step { padding: 20px 16px; min-height: auto; }
    .step-num { font-size: 32px; }
    .step-title { font-size: 18px; }
    .step-desc { font-size: 13px; }
    .step-icon { width: 32px; height: 32px; margin-bottom: 12px; }
  }

  /* ===== CHANNELS ===== */
  .channels {
    padding: 120px 32px;
    background: var(--cream);
    position: relative;
    border-top: 1px solid var(--line);
  }

  .channels-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 64px;
    align-items: end;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .channels-header .section-title { color: var(--ink); }
  .channels-header .section-desc { color: var(--muted); margin-bottom: 0; }

  .channel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Live cards are anchors so each channel is an entry point, not just a
     status badge. Coming-soon ones stay divs. */
  a.channel-card { text-decoration: none; color: inherit; }

  .channel-card {
    background: var(--bone);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.4s;
    position: relative;
    min-height: 200px;
  }

  .channel-card.live {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }

  .channel-card.live:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(10,10,10,0.15);
  }

  .channel-card.coming {
    opacity: 0.7;
  }

  .channel-card.coming:hover {
    opacity: 1;
    border-color: var(--orange);
  }

  .channel-status {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 100px;
  }

  .channel-card.live .channel-status {
    background: rgba(255, 107, 44, 0.15);
    color: var(--orange);
  }

  .channel-card.coming .channel-status {
    background: var(--line);
    color: var(--muted);
  }

  .channel-icon {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 0;
  }

  /* Brand-colored live icons. Telegram and iMessage draw their own
     gradients, so only the currentColor-based WhatsApp mark needs a rule. */
  .channel-card.live .channel-icon.brand-whatsapp { color: #25D366; }

  /* Coming-soon icons stay full-color but slightly dimmed to signal "not live yet" */
  .channel-card.coming .channel-icon {
    opacity: 0.55;
    filter: saturate(0.85);
    transition: opacity 0.3s, filter 0.3s;
  }

  .channel-card.coming:hover .channel-icon {
    opacity: 0.9;
    filter: saturate(1);
  }

  .channel-name {
    font-family: 'Cooper BT', serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: auto;
  }

  .channel-desc {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.65;
  }




  /* Marquee strip - infinite horizontal scroll of real logos */









  @media (max-width: 900px) {
    .channels-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
    .channel-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .channel-card { padding: 24px; min-height: 180px; }
    .channel-name { font-size: 22px; }
  }

  @media (max-width: 520px) {
    .channel-grid { grid-template-columns: 1fr; }
  }

  /* ===== CULTURAL AUTHENTICITY SECTION ===== */
  .essence {
    padding: 140px 32px;
    background: var(--cream);
    position: relative;
    overflow: hidden;
  }

  .essence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
  }

  .essence-quote {
    font-family: 'Cooper BT', serif;
    font-size: clamp(32px, 3.5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .essence-quote em { color: var(--orange); font-style: italic; }

  .essence-meta {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 32px;
    font-weight: 500;
  }

  .essence-visual {
    aspect-ratio: 1;
    position: relative;
    background: var(--ink);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .essence-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .essence-ring {
    position: absolute;
    border: 1px solid rgba(255, 107, 44, 0.3);
    border-radius: 50%;
    animation: expand 4s ease-out infinite;
  }

  .essence-ring:nth-child(1) { animation-delay: 0s; }
  .essence-ring:nth-child(2) { animation-delay: 1s; }
  .essence-ring:nth-child(3) { animation-delay: 2s; }
  .essence-ring:nth-child(4) { animation-delay: 3s; }

  @keyframes expand {
    0% { width: 10%; height: 10%; opacity: 1; }
    100% { width: 100%; height: 100%; opacity: 0; }
  }

  .essence-core {
    width: 20%;
    aspect-ratio: 1;
    background: var(--orange);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 80px rgba(255, 107, 44, 0.6);
    animation: corePulse 2s ease-in-out infinite;
  }

  @keyframes corePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  .essence-globe-label {
    position: absolute;
    font-family: 'Cooper BT', serif;
    font-size: 11px;
    color: rgba(245, 241, 234, 0.5);
    letter-spacing: 0.05em;
  }

  @media (max-width: 768px) {
    .essence-grid { grid-template-columns: 1fr; gap: 48px; }
    .essence-visual { max-width: 320px; margin: 0 auto; }
  }

  /* ===== GENRE SHOWCASE ===== */
  .genres {
    padding: 120px 32px;
    background: var(--ink);
    color: var(--cream);
  }

  .genres .section-title { color: var(--cream); }
  .genres .section-desc { color: rgba(245, 241, 234, 0.6); }

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

  .genre-card {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .genre-card {
    --region-1: #FF6B2C;
    --region-2: #FFB454;
  }
  .genre-card[data-region="africa"]     { --region-1: #FF6B2C; --region-2: #C92A2A; }
  .genre-card[data-region="latin"]      { --region-1: #FFB454; --region-2: #E8417A; }
  .genre-card[data-region="americas"]   { --region-1: #5B7FBF; --region-2: #2D3A5F; }
  .genre-card[data-region="asia"]       { --region-1: #C77DFF; --region-2: #FF7AB6; }
  .genre-card[data-region="south-asia"] { --region-1: #F4A300; --region-2: #C2185B; }
  .genre-card[data-region="caribbean"]  { --region-1: #2EC4B6; --region-2: #FFD166; }
  .genre-card[data-region="electronic"] { --region-1: #00E5FF; --region-2: #7C4DFF; }
  .genre-card[data-region="mena"]       { --region-1: #2A9D8F; --region-2: #E9C46A; }
  .genre-card[data-region="wild"]       { --region-1: #FF6B2C; --region-2: #C77DFF; }

  .genre-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 0% 100%, var(--region-1) 0%, transparent 55%),
                radial-gradient(120% 100% at 100% 0%, var(--region-2) 0%, transparent 60%);
    opacity: 0.08;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }

  .genre-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .genre-card:hover::before { opacity: 0.28; }

  .genre-card > * { position: relative; z-index: 1; }

  /* EQ bars — bottom right corner, animate only on hover */
  .eq {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .eq i {
    display: block;
    width: 2.5px;
    height: 4px;
    background: var(--region-1);
    border-radius: 2px;
    transform-origin: bottom;
  }
  .genre-card:hover .eq { opacity: 0.9; }
  .genre-card:hover .eq i {
    animation: eq-bounce 0.9s ease-in-out infinite;
  }
  .genre-card:hover .eq i:nth-child(1) { animation-delay: 0s;    height: 14px; }
  .genre-card:hover .eq i:nth-child(2) { animation-delay: 0.15s; height: 8px;  }
  .genre-card:hover .eq i:nth-child(3) { animation-delay: 0.05s; height: 16px; }
  .genre-card:hover .eq i:nth-child(4) { animation-delay: 0.25s; height: 6px;  }
  .genre-card:hover .eq i:nth-child(5) { animation-delay: 0.1s;  height: 12px; }

  @keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1);   }
  }

  @media (prefers-reduced-motion: reduce) {
    .genre-card:hover .eq i { animation: none; }
  }

  .genre-origin {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    font-weight: 500;
  }

  .genre-name {
    font-family: 'Cooper BT', serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  @media (max-width: 768px) {
    .genre-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .genre-card { padding: 20px; }
    .genre-name { font-size: 22px; }
  }

  .genre-footnote {
    font-family: 'Cooper BT', serif;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: rgba(245, 241, 234, 0.75);
    margin-top: 60px;
    max-width: 820px;
    padding-left: 20px;
    border-left: 2px solid var(--orange);
  }

  .genre-footnote em {
    font-style: italic;
    color: var(--orange);
  }

  /* Emphatic underline on "Culture" in the Sound Atlas headline.
     text-decoration-skip-ink keeps it clean around descenders.
     Offset + thickness are scaled to display type. */
  .culture-underline {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
    text-decoration-skip-ink: none;
  }

  @media (max-width: 768px) {
    .genre-footnote { margin-top: 40px; font-size: 17px; padding-left: 16px; }
  }

  /* ===== GLOBE SCALE ===== */
  .scale {
    padding: 120px 32px;
    background: var(--cream);
  }

  .scale-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 60px;
  }

  .stat {
    padding: 48px 24px;
    border-right: 1px solid var(--line);
    position: relative;
  }

  .stat:last-child { border-right: none; }

  .stat-num {
    font-family: 'Cooper BT', serif;
    font-size: clamp(44px, 6vw, 88px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--orange);
    margin-bottom: 12px;
  }

  .stat-label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    max-width: 180px;
  }

  @media (max-width: 768px) {
    .scale-stats { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: 32px 20px; }
    .stat:nth-child(2) { border-right: none; }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  }

  /* ===== VISION / INVESTORS ===== */
  .vision {
    padding: 140px 32px;
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }

  .vision::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(255,107,44,0.15) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    animation: visionGlow 12s ease-in-out infinite;
  }

  @keyframes visionGlow {
    0%, 100% { opacity: 0.6; transform: translate(0,0); }
    50% { opacity: 1; transform: translate(-40px, 40px); }
  }

  .vision-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
  }

  .vision-top {
    margin-bottom: 100px;
    max-width: 1200px;
  }

  .vision-title {
    font-family: 'Cooper BT', serif;
    font-size: clamp(44px, 6.5vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-weight: 400;
    margin: 24px 0 40px;
    color: var(--cream);
  }

  .vision-title em {
    font-style: italic;
    color: var(--orange);
  }

  .vision-sub {
    font-family: 'Cooper BT', serif;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.35;
    color: rgba(245, 241, 234, 0.7);
    font-style: italic;
    max-width: 640px;
  }

  .pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 80px;
  }

  .pillar {
    background: var(--ink);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: background 0.3s;
  }

  .pillar:hover {
    background: var(--ink-2, #141414);
  }

  .pillar-num {
    font-family: 'Cooper BT', serif;
    font-size: 16px;
    color: var(--orange);
    letter-spacing: 0.05em;
    margin-bottom: 24px;
  }

  .pillar-title {
    font-family: 'Cooper BT', serif;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--cream);
  }

  .pillar-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 241, 234, 0.6);
    margin-top: auto;
  }

  @media (max-width: 1100px) {
    .pillars { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 560px) {
    .pillars { grid-template-columns: 1fr; }
    .pillar { min-height: auto; padding: 32px 24px; }
  }

  .why-now {
    background: rgba(255, 107, 44, 0.06);
    border: 1px solid rgba(255, 107, 44, 0.2);
    border-radius: 20px;
    padding: 48px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    align-items: start;
  }

  .why-now-label {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    padding-top: 8px;
  }

  .why-now-text {
    font-family: 'Cooper BT', serif;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--cream);
  }

  @media (max-width: 700px) {
    .why-now { grid-template-columns: 1fr; padding: 32px 24px; gap: 16px; }
  }

  .investor-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }

  .investor-cta-text {
    font-family: 'Cooper BT', serif;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--cream);
  }

  .investor-cta-text a {
    color: var(--orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 107, 44, 0.4);
    transition: border-color 0.2s;
  }

  .investor-cta-text a:hover {
    border-bottom-color: var(--orange);
  }

  .investor-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid var(--line);
    font-size: 12px;
    color: rgba(245, 241, 234, 0.7);
    letter-spacing: 0.02em;
  }

  .badge::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    margin-right: 8px;
  }

  /* ===== RADIO CTA ===== */
  .radio-cta {
    padding: 120px 32px;
    background: linear-gradient(135deg, var(--orange) 0%, #ff8b5a 100%);
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }

  .radio-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .radio-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .radio-title {
    font-family: 'Cooper BT', serif;
    font-size: clamp(44px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
  }

  .radio-desc {
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 36px;
    max-width: 480px;
  }

  .radio-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
  }

  .radio-btn:hover {
    background: var(--cream);
    color: var(--ink);
    transform: translateY(-2px);
  }

  .radio-visual {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .eq-bars {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 60%;
    width: 80%;
    justify-content: center;
  }

  .eq-bar {
    flex: 1;
    background: var(--cream);
    border-radius: 4px;
    animation: eqAnim 1.2s ease-in-out infinite;
    min-height: 10%;
    max-width: 20px;
  }

  .eq-bar:nth-child(1) { animation-delay: 0s; }
  .eq-bar:nth-child(2) { animation-delay: 0.1s; }
  .eq-bar:nth-child(3) { animation-delay: 0.2s; }
  .eq-bar:nth-child(4) { animation-delay: 0.3s; }
  .eq-bar:nth-child(5) { animation-delay: 0.4s; }
  .eq-bar:nth-child(6) { animation-delay: 0.5s; }
  .eq-bar:nth-child(7) { animation-delay: 0.6s; }
  .eq-bar:nth-child(8) { animation-delay: 0.7s; }
  .eq-bar:nth-child(9) { animation-delay: 0.8s; }
  .eq-bar:nth-child(10) { animation-delay: 0.9s; }
  .eq-bar:nth-child(11) { animation-delay: 1.0s; }
  .eq-bar:nth-child(12) { animation-delay: 1.1s; }

  @keyframes eqAnim {
    0%, 100% { height: 20%; }
    50% { height: 95%; }
  }

  @media (max-width: 768px) {
    .radio-inner { grid-template-columns: 1fr; gap: 48px; }
    .radio-visual { max-width: 280px; margin: 0 auto; }
  }

  /* ===== FINAL CTA ===== */
  .final-cta {
    padding: 160px 32px;
    text-align: center;
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }

  .final-title {
    font-family: 'Cooper BT', serif;
    font-size: clamp(56px, 9vw, 140px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    margin-bottom: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  .final-title em { color: var(--orange); font-style: italic; }

  .final-sub {
    font-size: 18px;
    color: rgba(245, 241, 234, 0.6);
    margin-bottom: 48px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
  }

  .final-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    background: var(--orange);
    color: var(--cream);
    border-radius: 100px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
  }

  .final-btn:hover {
    background: var(--cream);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(255, 107, 44, 0.4);
  }

  /* ===== FOOTER ===== */
  footer {
    background: var(--ink);
    color: var(--cream);
    padding: 120px 32px 48px;
    border-top: 1px solid rgba(245, 241, 234, 0.08);
    position: relative;
    overflow: hidden;
  }

  /* Subtle orange wash behind the parting statement */
  footer::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1200px;
    height: 400px;
    background: radial-gradient(ellipse at center top, rgba(255,107,44,0.06) 0%, transparent 65%);
    pointer-events: none;
  }

  .footer-farewell {
    max-width: 960px;
    margin: 0 auto 100px;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .footer-farewell-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 28px;
  }

  .footer-farewell-label::before,
  .footer-farewell-label::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--orange);
    opacity: 0.5;
  }

  .footer-farewell-quote {
    font-family: 'Cooper BT', serif;
    font-size: clamp(30px, 3.8vw, 56px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 24px;
  }

  .footer-farewell-quote em {
    font-style: italic;
    color: var(--orange);
  }

  .footer-farewell-credit {
    font-size: 13px;
    color: rgba(245, 241, 234, 0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto 56px;
    position: relative;
    z-index: 1;
  }

  .footer-brand .logo { color: var(--cream); margin-bottom: 20px; }

  .footer-tagline {
    font-size: 14px;
    color: rgba(245, 241, 234, 0.55);
    line-height: 1.55;
    max-width: 320px;
    margin-bottom: 24px;
  }

  /* Social icons strip */
  .footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .footer-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid rgba(245, 241, 234, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 241, 234, 0.65);
    transition: all 0.2s;
    text-decoration: none;
  }

  .footer-social:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
  }

  .footer-col h4 {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.4);
    margin-bottom: 20px;
    font-weight: 500;
  }

  .footer-col a {
    display: block;
    color: rgba(245, 241, 234, 0.82);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: color 0.2s, transform 0.2s;
  }

  .footer-col a:hover {
    color: var(--orange);
    transform: translateX(2px);
  }

  .footer-soon {
    display: block;
    color: rgba(245, 241, 234, 0.35);
    font-size: 14px;
    margin-bottom: 12px;
    cursor: default;
  }

  .footer-soon em {
    font-family: 'Cooper BT', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--orange);
    letter-spacing: -0.005em;
  }

  .footer-sep {
    color: rgba(245, 241, 234, 0.2);
  }

  .footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 36px;
    border-top: 1px solid rgba(245, 241, 234, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: rgba(245, 241, 234, 0.35);
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1;
    text-align: center;
  }

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

  .footer-heart {
    color: var(--orange);
    font-size: 11px;
  }

  @media (max-width: 768px) {
    footer { padding: 80px 24px 40px; }
    .footer-farewell { margin-bottom: 72px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  }

  /* ===== SELECTION ===== */
  ::selection {
    background: var(--orange);
    color: var(--cream);
  }

  /* ============================================================
     MOBILE POLISH — comprehensive small-screen tuning
     Tiered breakpoints:
       ≤ 680px  — standard mobile (iPhone 14, most Androids)
       ≤ 480px  — small phones (iPhone SE 2/3, budget Androids)
       ≤ 380px  — narrow phones (iPhone SE 1st gen, older budget)
     Each tier only overrides what needs to change at that size.
     ============================================================ */

  @media (max-width: 680px) {
    /* GLOBAL */
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* NAV */
    nav {
      padding: 12px 16px;
    }
    .logo img {
      height: 22px !important;
    }
    .nav-cta {
      padding: 8px 14px;
      font-size: 12px;
      gap: 6px;
    }
    .nav-cta svg {
      width: 12px;
      height: 12px;
    }

    /* HERO */
    .hero {
      padding: 88px 20px 40px;
      min-height: auto;
    }
    .hero-main {
      gap: 24px;
      min-height: auto;
    }
    .hero-tag {
      font-size: 11px;
      padding: 6px 12px;
    }
    h1.hero-title {
      font-size: clamp(40px, 11vw, 56px);
      letter-spacing: -0.03em;
    }
    .hero-lead {
      font-size: 15px;
      line-height: 1.55;
    }
    .hero-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 100%;
    }
    .hero-actions .btn {
      width: 100%;
      min-width: 0;
      justify-content: center;
      text-align: center;
      padding: 12px 6px;
      font-size: 11.5px;
      line-height: 1.2;
      gap: 5px;
      white-space: normal;
      word-break: break-word;
    }
    .hero-actions .btn svg { flex-shrink: 0; width: 12px; height: 12px; }
    .cta-label-desktop { display: none; }
    .cta-label-mobile { display: inline; }
    .globe-wrap {
      max-width: 340px;
      margin: 8px auto 0;
    }
    .globe-caption {
      font-size: 12px;
    }
    .ticker-bar { font-size: 10px; }
    .ticker-item { gap: 20px; padding-right: 20px; }

    /* FLOW SECTION — chat to finished song */
    .flow {
      padding: 64px 20px;
    }
    .flow-header { margin-bottom: 48px; }
    .flow-title {
      font-size: clamp(28px, 8vw, 40px);
    }
    .flow-sub {
      font-size: 15px;
    }
    .flow-stage {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .flow-connector { display: none !important; }
    .phone, .streaming {
      max-width: 300px;
      margin: 0 auto;
    }
    .pipeline {
      max-width: 320px;
      margin: 0 auto;
      min-width: 0;
    }
    .stage-label {
      font-size: 10px;
      margin-top: 18px;
    }
    .flow-footer {
      font-size: 18px;
      margin-top: 48px;
    }
    .flow-mute {
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
    }

    /* PLATFORM HALO */

    /* THE SHIFT */
    .shift {
      padding: 80px 20px;
    }
    .shift-label {
      font-size: 10px;
      margin-bottom: 32px;
    }
    .shift-headline {
      font-size: clamp(28px, 8vw, 40px);
      margin-bottom: 20px;
    }
    .shift-counter {
      font-size: clamp(22px, 7vw, 32px);
      margin-bottom: 40px;
    }
    .shift-body {
      font-size: 16px;
    }
    .shift-body:last-of-type {
      margin-bottom: 48px;
    }
    .shift-compare-cell {
      padding: 28px 22px;
    }
    .shift-compare-quote {
      font-size: 18px;
    }

    /* LANGUAGES */
    .languages {
      padding: 64px 20px;
    }
    .section-label { font-size: 10px; }
    .section-title {
      font-size: clamp(28px, 8vw, 42px);
      line-height: 1.1;
    }
    .section-desc {
      font-size: 15px;
    }

    /* HOW IT WORKS (pipeline cards) */
    .how-it-works {
      padding: 64px 20px;
    }
    .steps-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .step {
      padding: 28px 22px;
      min-height: auto;
    }
    .step-num { font-size: 44px; }
    .step-title { font-size: 22px; }
    .step-desc { font-size: 14px; }

    /* CHANNELS */
    .channels {
      padding: 64px 20px;
    }
    .channels-header {
      display: block;
    }
    .channels-header p {
      margin-top: 16px;
    }
    .channel-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .channel-card {
      padding: 20px 18px;
      min-height: 160px;
    }
    .channel-name {
      font-size: 18px;
    }
    .channel-desc {
      font-size: 12px;
    }
    .channel-status {
      font-size: 10px;
    }
    .channel-icon svg { width: 32px; height: 32px; }


    /* ESSENCE */
    .essence {
      padding: 64px 20px;
    }
    .essence-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .essence-quote {
      font-size: clamp(24px, 7vw, 32px);
    }
    .essence-visual { max-width: 280px; margin: 0 auto; }

    /* CULTURES / GENRES */
    .genres {
      padding: 64px 20px;
    }
    .genre-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .genre-card {
      padding: 20px 16px;
      min-height: 120px;
    }
    .genre-name {
      font-size: 18px;
      line-height: 1.1;
    }
    .genre-origin {
      font-size: 10px;
    }
    .genre-footnote {
      font-size: 16px;
      margin-top: 36px;
      padding-left: 14px;
    }

    /* SCALE */
    .scale {
      padding: 64px 20px;
    }
    .scale-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .stat {
      padding: 24px 16px;
    }
    .stat-num {
      font-size: 40px;
    }
    .stat-label {
      font-size: 12px;
    }

    /* VISION */
    .vision {
      padding: 80px 20px;
    }
    .vision-inner { padding: 0; }
    .vision-top { margin-bottom: 48px; }
    .vision-title {
      font-size: clamp(32px, 9vw, 48px);
      line-height: 1.05;
    }
    .vision-sub {
      font-size: 15px;
    }
    .pillars {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .pillar {
      padding: 28px 22px;
      min-height: auto;
    }
    .pillar-num { font-size: 14px; }
    .pillar-title { font-size: 22px; }
    .pillar-desc { font-size: 14px; }
    .why-now {
      padding: 28px 22px;
      margin-top: 32px;
    }
    .why-now-title { font-size: 22px; }

    /* RADIO CTA */
    .radio-cta {
      padding: 64px 20px;
    }
    .radio-inner {
      padding: 36px 24px;
      border-radius: 20px;
    }
    .radio-title {
      font-size: clamp(28px, 8vw, 40px);
    }
    .radio-sub { font-size: 15px; }
    .radio-btn {
      padding: 14px 24px;
      font-size: 14px;
    }

    /* FINAL CTA */
    .final-cta {
      padding: 80px 20px;
    }
    .final-title {
      font-size: clamp(36px, 10vw, 56px);
      line-height: 1;
    }
    .final-sub {
      font-size: 16px;
    }
    .final-btn {
      padding: 16px 28px;
      font-size: 15px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }

    /* FOOTER */
    footer {
      padding: 64px 20px 32px;
    }
    .footer-farewell {
      margin-bottom: 56px;
    }
    .footer-farewell-label {
      font-size: 10px;
      margin-bottom: 20px;
    }
    .footer-farewell-quote {
      font-size: clamp(24px, 7vw, 36px);
    }
    .footer-farewell-quote br {
      display: none;
    }
    .footer-farewell-credit {
      font-size: 11px;
    }
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-bottom: 40px;
    }
    .footer-brand {
      grid-column: 1 / -1;
    }
    .footer-tagline {
      font-size: 13px;
    }
    .footer-socials {
      gap: 8px;
    }
    .footer-social {
      width: 34px;
      height: 34px;
    }
    .footer-col h4 {
      font-size: 10px;
      margin-bottom: 14px;
    }
    .footer-col a,
    .footer-soon {
      font-size: 13px;
      margin-bottom: 10px;
    }
    .footer-bottom {
      padding-top: 28px;
      font-size: 11px;
      flex-direction: column;
      gap: 8px;
      text-align: center;
    }
    .footer-bottom-left {
      flex-direction: column;
      gap: 6px;
    }
    .footer-bottom-left .footer-sep {
      display: none;
    }

    /* Reduce decorative page glow on mobile for perf */
    body::before, body::after {
      opacity: 0.5;
    }
  }

  /* SMALL PHONES (iPhone SE 2/3, budget Android, ≤ 480px) */
  @media (max-width: 480px) {
    nav { padding: 10px 14px; }
    .logo img { height: 20px !important; }
    .nav-cta {
      padding: 7px 10px;
      font-size: 0;
      gap: 0;
    }
    .nav-cta svg {
      width: 14px;
      height: 14px;
      margin: 0;
    }

    .hero { padding: 76px 16px 32px; }
    .hero-radio-sub {
      font-size: 9px;
      letter-spacing: 0.02em;
      padding-left: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    h1.hero-title {
      font-size: clamp(34px, 10vw, 46px);
    }
    .hero-tag {
      font-size: 10px;
      padding: 5px 10px;
      letter-spacing: 0;
    }
    .hero-lead { font-size: 14px; }
    .globe-wrap { max-width: 280px; }

    .flow, .shift, .languages, .how-it-works, .channels,
    .essence, .genres, .scale, .radio-cta, .final-cta {
      padding-left: 16px;
      padding-right: 16px;
    }
    .vision { padding: 64px 16px; }
    footer { padding: 56px 16px 28px; }

    .section-title {
      font-size: clamp(24px, 8vw, 36px);
    }
    .section-desc { font-size: 14px; }

    .channel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .channel-card { min-height: 110px; padding: 14px 12px; }
    .channel-name { font-size: 15px; line-height: 1.2; }
    .channel-status { font-size: 9px; }

    .genre-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .genre-card { min-height: 90px; padding: 12px 10px; aspect-ratio: auto; }
    .genre-origin { font-size: 9px; letter-spacing: 0.1em; }
    .genre-name { font-size: 13px; line-height: 1.15; }

    .scale-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-num { font-size: 32px; }
    .stat-label { font-size: 11px; }

    .shift-compare { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .step-card { padding: 16px 14px; min-height: auto; }
    .step-num { font-size: 24px; }
    .step-title { font-size: 14px; }
    .step-desc { font-size: 12px; }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    /* Flow demo — keep phones readable at this size */
    .phone, .streaming, .pipeline {
      max-width: 280px;
    }
    .wa-bubble { font-size: 11px; max-width: 82%; }
    .wa-song-title { font-size: 11px; }
    .wa-song-meta { font-size: 9px; }
    .pipeline-step { padding: 12px 14px; }
    .pipeline-label { font-size: 13px; }
    .pipeline-meta { font-size: 9px; }
    .streaming-title { font-size: 15px; }
    .streaming-artist { font-size: 12px; }

  }

  /* NARROW PHONES (iPhone SE 1st gen, older budget, ≤ 380px) */
  @media (max-width: 380px) {
    h1.hero-title { font-size: 32px; }
    .section-title { font-size: 26px; }
    .hero { padding: 68px 14px 28px; }
    nav { padding: 10px 12px; }
    .logo img { height: 18px !important; }

    .flow, .shift, .languages, .how-it-works, .channels,
    .essence, .genres, .scale, .radio-cta, .final-cta,
    .vision, footer {
      padding-left: 14px;
      padding-right: 14px;
    }

    .final-title { font-size: 34px; }
    .stat-num { font-size: 40px; }
    .footer-farewell-quote { font-size: 24px; }
    .shift-headline { font-size: 26px; }
    .shift-counter { font-size: 20px; }

    .phone, .streaming, .pipeline {
      max-width: 260px;
    }
    .flow-footer { font-size: 16px; }
  }

  /* TOUCH TARGETS — 44px minimum for accessibility */
  @media (hover: none) and (pointer: coarse) {
    .footer-col a,
    .footer-soon {
      padding: 6px 0;
    }
    .footer-social {
      min-width: 40px;
      min-height: 40px;
    }
  }

  /* LANDSCAPE MOBILE — short height optimization */
  @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .hero {
      min-height: auto;
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .hero-main {
      grid-template-columns: 1.1fr 1fr;
    }
    .globe-wrap {
      max-width: 260px;
    }
  }

  /* REDUCED MOTION preference */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .ticker-track {
      animation: none !important;
    }
  }

  /* Shared wrapper for section inner content.
     Scales automatically across all breakpoints instead of
     being locked to a hardcoded max-width. */
  .section-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-inner.has-gap {
    margin-bottom: 60px;
  }

  @media (min-width: 1600px) {
    .section-inner { max-width: 1680px; }
    .section-inner.has-gap { margin-bottom: 80px; }
  }

  @media (min-width: 2000px) {
    .section-inner { max-width: 1920px; }
    .section-inner.has-gap { margin-bottom: 100px; }
  }

  @media (min-width: 2400px) {
    .section-inner { max-width: 2200px; }
  }

  /* ============================================================
     HOW IT HAPPENS — chat to finished song demonstration
     Three stages, left to right: WhatsApp → Frobits studio → your track
     ============================================================ */

  .flow {
    background: var(--ink);
    color: var(--cream);
    padding: 120px 32px;
    position: relative;
    overflow: hidden;
  }

  .flow-mute {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(245, 241, 234, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    backdrop-filter: blur(8px);
  }

  .flow-mute:hover {
    background: rgba(255, 107, 44, 0.12);
    border-color: rgba(255, 107, 44, 0.4);
    color: var(--orange);
    transform: scale(1.05);
  }

  .flow-mute.muted {
    color: rgba(245, 241, 234, 0.35);
  }

  @media (max-width: 768px) {
    .flow-mute { top: 16px; right: 16px; }
  }

  .flow::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,107,44,0.18) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    animation: glowPulse 6s ease-in-out infinite;
  }

  .flow::after {
    content: '';
    position: absolute;
    bottom: -20%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(29, 185, 84, 0.08) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    animation: glowPulse 8s ease-in-out infinite 2s;
  }

  .flow-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .flow-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  .flow-header .section-label {
    display: inline-block;
  }

  .flow-title {
    font-family: 'Cooper BT', serif;
    font-size: clamp(40px, 5.5vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
  }

  .flow-title em { font-style: italic; color: var(--orange); }

  .flow-sub {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(245, 241, 234, 0.7);
    max-width: 640px;
    margin: 0 auto;
  }

  .flow-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 32px;
    align-items: center;
    position: relative;
  }

  @media (max-width: 1100px) {
    .flow-stage { grid-template-columns: 1fr; gap: 40px; }
    .flow-connector { display: none !important; }
  }

  /* Connector between columns - animated particle travels along it */
  .flow-connector {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,107,44,0.4), transparent);
    position: relative;
    overflow: visible;
  }

  .flow-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 20px var(--orange);
    animation: particleFlow 3s ease-in-out infinite;
  }

  .flow-connector:nth-of-type(4)::before {
    animation-delay: 1.5s;
  }

  @keyframes particleFlow {
    0% { left: 0; opacity: 0; transform: translateY(-50%) scale(0.5); }
    20% { opacity: 1; transform: translateY(-50%) scale(1); }
    80% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { left: 100%; opacity: 0; transform: translateY(-50%) scale(0.5); }
  }

  /* ===== PHONE FRAME (WhatsApp) ===== */
  /* The phone cycles through the three live channels. Colours come from
     these custom properties so a skin class only restates what differs;
     .phone itself carries the WhatsApp values as the default. */
  .phone {
    --sk-shell: #111b21;
    --sk-screen: #0b141a;
    --sk-header: #202c33;
    --sk-recv: #202c33;
    --sk-sent: #005c4b;
    --sk-text: #e9edef;
    --sk-status: #8696a0;
    --sk-check: #53bdeb;
    --sk-badge: #00a884;
    --sk-radius: 8px;
    --sk-tail: 2px;
    background: var(--sk-shell);
    border-radius: 28px;
    padding: 10px;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.06),
      0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    aspect-ratio: 9/16;
    max-width: 340px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* ---- Per-app chrome ------------------------------------------------
     Recolouring bubbles was not enough to read as three apps. What
     actually distinguishes them, in rough order of how fast the eye
     catches it: the app bar layout, the wallpaper, the bubble tail, the
     composer, and the receipt. Each is switched below off the same skin
     class the timer toggles. Drawn from scratch as CSS and inline SVG —
     no vendor assets — since this is our bot shown in context, not a
     reproduction of anyone's app. */

  .wa-back, .wa-header-actions { color: var(--sk-status); flex-shrink: 0; }

  .wa-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

  /* WhatsApp: back chevron, avatar, name, then video/call/overflow. */
  .phone .wa-back { display: block; }
  .phone .ic-video, .phone .ic-call, .phone .ic-more { display: block; }

  /* Telegram: no in-header call buttons on a bot chat, just overflow. */
  .phone.skin-telegram .ic-video,
  .phone.skin-telegram .ic-call { display: none; }

  /* iMessage: the avatar sits ABOVE a centred name, with only a video
     button on the right. This stacking is the strongest single tell. */
  .phone.skin-imessage .wa-header {
    flex-direction: column;
    gap: 3px;
    padding: 26px 14px 8px;
    position: relative;
    backdrop-filter: blur(12px);
  }
  .phone.skin-imessage .wa-back {
    position: absolute; left: 12px; top: 44px; color: #0b84ff;
  }
  .phone.skin-imessage .wa-avatar {
    width: 34px; height: 34px; font-size: 13px;
  }
  .phone.skin-imessage .wa-header-info { text-align: center; }
  .phone.skin-imessage .wa-header-name { font-size: 11px; justify-content: center; gap: 3px; }
  .phone.skin-imessage .wa-header-status { display: none; }
  .phone.skin-imessage .wa-verified { display: none; }
  .phone.skin-imessage .wa-header-actions {
    position: absolute; right: 12px; top: 44px; margin-left: 0; color: #0b84ff;
  }
  .phone.skin-imessage .ic-call, .phone.skin-imessage .ic-more { display: none; }

  /* Wallpaper. WhatsApp has its doodle field, Telegram a soft wash,
     iMessage nothing at all — flat black is itself the signature. */
  .phone.skin-telegram .wa-chat {
    background-image:
      radial-gradient(circle at 20% 15%, rgba(56,110,160,0.30), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(40,80,120,0.28), transparent 45%);
    background-size: auto;
    background-position: 0 0;
  }
  .phone.skin-imessage .wa-chat { background-image: none; }

  /* Bubble tails. WhatsApp's is a small clipped corner; iMessage draws a
     real curl. Telegram sits between the two. */
  .phone.skin-imessage .wa-bubble.received,
  .phone.skin-imessage .wa-bubble.sent { position: relative; }
  .phone.skin-imessage .wa-bubble.received::after,
  .phone.skin-imessage .wa-bubble.sent::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 12px; height: 15px;
  }
  .phone.skin-imessage .wa-bubble.received::after {
    left: -5px;
    background: var(--sk-recv);
    border-bottom-right-radius: 14px;
    clip-path: path("M12 15 C 6 15, 0 11, 0 0 L 12 0 Z");
  }
  .phone.skin-imessage .wa-bubble.sent::after {
    right: -5px;
    background: var(--sk-sent);
    border-bottom-left-radius: 14px;
    clip-path: path("M0 15 C 6 15, 12 11, 12 0 L 0 0 Z");
  }

  /* Timestamps live inside the bubble on WhatsApp and Telegram. iMessage
     has none — it stamps the conversation, not the message. */
  .phone.skin-imessage .wa-time { display: none; }

  /* ...and reports "Delivered" under the last sent bubble instead. */
  .wa-receipt {
    display: none;
    align-self: flex-end;
    margin: -4px 2px 2px;
    font-size: 8.5px;
    color: var(--sk-status);
    opacity: 0;
    animation: bubbleIn 0.5s ease forwards;
    animation-delay: 0.55s;
  }
  .phone.skin-imessage .wa-receipt { display: block; }

  /* Day divider: a plain chip on WhatsApp/Telegram, uppercase and
     unboxed on iMessage. */
  .wa-daystamp { display: flex; justify-content: center; margin-bottom: 2px; }
  .wa-daystamp span {
    font-size: 8px;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--sk-recv);
    color: var(--sk-status);
  }
  .phone.skin-imessage .wa-daystamp span {
    background: transparent;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  /* Composer. The field label is the giveaway, and each app puts a
     different control on each end. */
  .wa-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 10px;
    background: var(--sk-header);
    color: var(--sk-status);
  }

  .wa-composer-lead, .wa-composer-trail { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

  .wa-composer-field {
    flex: 1;
    min-width: 0;
    padding: 7px 11px;
    border-radius: 100px;
    background: var(--sk-recv);
    font-size: 10.5px;
    color: var(--sk-status);
  }

  .wa-composer-send {
    width: 19px; height: 19px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--sk-sent);
    color: #fff;
    flex-shrink: 0;
  }

  .wa-composer-ph-im { display: none; }

  /* WhatsApp: emoji left; clip + mic right. */
  .phone .ic-plus { display: none; }
  .phone .ic-emoji, .phone .ic-clip, .phone .ic-mic { display: block; }

  /* Telegram: no emoji button on the left of the field, mic on the right. */
  .phone.skin-telegram .ic-emoji { display: none; }
  .phone.skin-telegram .wa-composer-lead { display: none; }

  /* iMessage: a plus on the left, an outlined field, and a blue send
     arrow on the right — no mic, no clip. */
  .phone.skin-imessage .ic-emoji,
  .phone.skin-imessage .ic-clip,
  .phone.skin-imessage .ic-mic { display: none; }
  .phone.skin-imessage .ic-plus { display: block; }
  .phone.skin-imessage .wa-composer-send { display: inline-flex; }
  .phone.skin-imessage .wa-composer-field {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.20);
  }
  .phone.skin-imessage .wa-composer-ph-wa { display: none; }
  .phone.skin-imessage .wa-composer-ph-im { display: inline; }

  /* Telegram and iMessage, in their dark themes so the shell reads as the
     same handset with a different app open. Each restates only what differs
     from the WhatsApp defaults above. */
  .phone.skin-telegram {
    --sk-shell: #17212b;
    --sk-screen: #0e1621;
    --sk-header: #17212b;
    --sk-recv: #182533;
    --sk-sent: #2b5278;
    --sk-status: #6ab3f3;
    --sk-check: #6ab7ff;
    --sk-badge: #2AABEE;
    --sk-radius: 12px;
    --sk-tail: 4px;
  }

  .phone.skin-imessage {
    --sk-shell: #1c1c1e;
    --sk-screen: #000000;
    --sk-header: #1c1c1e;
    --sk-recv: #26262a;
    --sk-sent: #0b84ff;
    --sk-text: #f2f2f7;
    --sk-status: #8e8e93;
    --sk-check: #8e8e93;
    --sk-badge: #0b84ff;
    --sk-radius: 17px;
    --sk-tail: 17px;
  }

  /* iMessage has no double-tick receipt — it says "Delivered" under the
     last bubble. Hiding the ticks is cheaper than faking that, and wrong
     receipts are the detail people notice in a mockup. */
  .phone.skin-imessage .wa-check { display: none; }

  .phone,
  .phone-screen,
  .wa-header,
  .wa-chat,
  .wa-bubble.received,
  .wa-bubble.sent {
    transition: background-color 0.55s ease, border-radius 0.55s ease;
  }

  /* Which app is open, read out under the phone rather than painted inside
     it — fake chrome in a mockup reads as a screenshot of nothing. */
  .phone-channels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .phone-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(250,247,241,0.4);
    opacity: 0.5;
    transition: opacity 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }

  .phone-channel svg { width: 13px; height: 13px; display: block; }

  .phone-channel.active {
    opacity: 1;
    color: var(--cream);
    border-color: rgba(255,107,44,0.35);
    background: rgba(255,107,44,0.10);
  }

  @media (prefers-reduced-motion: reduce) {
    .phone, .phone-screen, .wa-header, .wa-chat,
    .wa-bubble.received, .wa-bubble.sent, .phone-channel { transition: none; }
  }

  .phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 18px;
    background: #000;
    border-radius: 10px;
    z-index: 10;
  }

  .phone-screen {
    background: var(--sk-screen);
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  .wa-header {
    background: var(--sk-header);
    padding: 32px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }

  .wa-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Cooper BT', serif;
    flex-shrink: 0;
  }

  .wa-header-info {
    min-width: 0;
    flex: 1;
  }

  .wa-header-name {
    font-size: 13px;
    font-weight: 600;
    color: #e9edef;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .wa-verified {
    width: 12px; height: 12px;
    background: var(--sk-badge);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    font-weight: bold;
  }

  .wa-header-status {
    font-size: 11px;
    color: var(--sk-status);
  }

  .wa-chat {
    flex: 1;
    background-color: var(--sk-screen);
    background-image:
      radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px;
    background-position: 0 0, 10px 10px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
  }

  .wa-bubble {
    padding: 8px 10px 6px;
    border-radius: var(--sk-radius);
    max-width: 78%;
    font-size: 12px;
    line-height: 1.4;
    position: relative;
    opacity: 0;
    animation: bubbleIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  }

  @keyframes bubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .wa-bubble.sent {
    background: var(--sk-sent);
    color: var(--sk-text);
    align-self: flex-end;
    border-bottom-right-radius: var(--sk-tail);
    animation-delay: 0.3s;
  }

  .wa-bubble.received {
    background: var(--sk-recv);
    color: var(--sk-text);
    align-self: flex-start;
    border-bottom-left-radius: var(--sk-tail);
  }

  .wa-bubble.received.b1 { animation-delay: 0s; }
  .wa-bubble.received.b2 { animation-delay: 1.2s; }
  .wa-bubble.typing { animation-delay: 0.8s; }
  .wa-bubble.song-card { animation-delay: 1.8s; padding: 0; overflow: hidden; max-width: 85%; }

  .wa-time {
    font-size: 9px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    float: right;
    margin-left: 8px;
  }

  .wa-check {
    color: var(--sk-check);
    font-size: 10px;
    line-height: 1;
  }

  .wa-typing-dots {
    display: inline-flex;
    gap: 3px;
    padding: 2px 0;
  }

  .wa-typing-dots span {
    width: 5px; height: 5px;
    background: #8696a0;
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
  }

  .wa-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .wa-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

  @keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
  }

  /* Song card inside chat bubble */
  .wa-song-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
  }

  .wa-song-art {
    width: 44px; height: 44px;
    border-radius: 6px;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,200,100,0.5), transparent 60%),
      linear-gradient(135deg, var(--orange) 0%, #8B3410 100%);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wa-song-art::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
  }

  .wa-song-art svg {
    position: relative;
    z-index: 1;
    color: rgba(10,10,10,0.7);
  }

  .wa-song-info {
    min-width: 0;
    flex: 1;
  }

  .wa-song-title {
    font-size: 12px;
    font-weight: 600;
    color: #e9edef;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-song-meta {
    font-size: 10px;
    color: #8696a0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-song-play {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #00a884;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111b21;
    flex-shrink: 0;
  }

  /* ===== MIDDLE: PIPELINE ===== */
  .pipeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 0;
    position: relative;
    min-width: 260px;
  }

  .pipeline-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    opacity: 0;
    animation: pipelineIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
  }

  .pipeline-step.active {
    border-color: rgba(255, 107, 44, 0.4);
    background: rgba(255, 107, 44, 0.08);
  }

  .pipeline-step:nth-child(1) { animation-delay: 2.2s; }
  .pipeline-step:nth-child(2) { animation-delay: 2.7s; }
  .pipeline-step:nth-child(3) { animation-delay: 3.2s; }
  .pipeline-step:nth-child(4) { animation-delay: 3.7s; }

  @keyframes pipelineIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .pipeline-step::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: top;
    animation: pipelineBar 0.6s ease-out forwards;
  }

  .pipeline-step:nth-child(1)::before { animation-delay: 2.5s; }
  .pipeline-step:nth-child(2)::before { animation-delay: 3.0s; }
  .pipeline-step:nth-child(3)::before { animation-delay: 3.5s; }
  .pipeline-step:nth-child(4)::before { animation-delay: 4.0s; }

  @keyframes pipelineBar {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }

  .pipeline-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 107, 44, 0.15);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .pipeline-text {
    flex: 1;
  }

  .pipeline-label {
    font-family: 'Cooper BT', serif;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--cream);
    margin-bottom: 2px;
  }

  .pipeline-meta {
    font-size: 10px;
    color: rgba(245, 241, 234, 0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .pipeline-check {
    color: #00c466;
    flex-shrink: 0;
    opacity: 0;
    animation: checkAppear 0.4s ease-out forwards;
  }

  .pipeline-step:nth-child(1) .pipeline-check { animation-delay: 2.8s; }
  .pipeline-step:nth-child(2) .pipeline-check { animation-delay: 3.3s; }
  .pipeline-step:nth-child(3) .pipeline-check { animation-delay: 3.8s; }
  .pipeline-step:nth-child(4) .pipeline-check { animation-delay: 4.3s; }

  @keyframes checkAppear {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
  }

  .pipeline-time {
    text-align: center;
    font-family: 'Cooper BT', serif;
    font-size: 13px;
    color: var(--orange);
    font-style: italic;
    margin-top: 6px;
    opacity: 0;
    animation: fadeUp 0.5s ease-out 4.5s forwards;
  }

  /* ===== RIGHT: STREAMING ===== */
  .streaming {
    background: linear-gradient(180deg, #181818 0%, #0a0a0a 100%);
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    animation: fadeUp 0.8s ease-out 4.2s forwards;
  }

  .track-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .track-now-playing {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .streaming-art {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 6px;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255, 200, 100, 0.6), transparent 50%),
      linear-gradient(135deg, var(--orange) 0%, #8B3410 100%);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }

  .streaming-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  }

  .streaming-art-label {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-family: 'Cooper BT', serif;
    font-size: 20px;
    line-height: 1.05;
    color: white;
    letter-spacing: -0.02em;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }

  .streaming-title {
    font-size: 17px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
  }

  .streaming-artist {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 16px;
  }

  .streaming-progress {
    margin-bottom: 6px;
  }

  .streaming-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
  }

  .streaming-fill {
    height: 100%;
    width: 0%;
    background: white;
    border-radius: 3px;
    animation: streamProgress 4s linear 4.8s forwards;
  }

  @keyframes streamProgress {
    from { width: 0%; }
    to { width: 42%; }
  }

  .streaming-time {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
  }

  .streaming-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  .stream-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .stream-btn.play {
    width: 40px; height: 40px;
    background: white;
    color: black;
    border-radius: 50%;
  }








  /* Stage labels under each column */
  .stage-label {
    text-align: center;
    margin-top: 24px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245,241,234,0.5);
    font-weight: 500;
  }

  .stage-label strong {
    color: var(--orange);
    font-weight: 500;
  }

  .flow-footer {
    text-align: center;
    margin-top: 80px;
    font-family: 'Cooper BT', serif;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(245, 241, 234, 0.85);
  }

  .flow-footer em {
    font-style: italic;
    color: var(--orange);
  }

  @media (max-width: 1100px) {
    .phone, .streaming { max-width: 320px; }
    .pipeline { min-width: 0; max-width: 340px; margin: 0 auto; }
    .flow-footer { margin-top: 56px; }
  }

  /* ============================================================
     THE SHIFT — editorial / contemplative section
     Quiet deliberate pause in the page rhythm after the kinetic "How it
     happens" demo. Argues for Frobits as a *medium of expression*, not
     just a tool. First-person music vs. third-person music.
     ============================================================ */

  .shift {
    background: var(--ink);
    color: var(--cream);
    padding: 180px 32px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.04);
  }

  /* Subtle vertical light column behind the content - gives the section
     a quiet spotlight feel without being dramatic */
  .shift::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 700px;
    background: radial-gradient(ellipse at center, rgba(255,107,44,0.05) 0%, transparent 70%);
    pointer-events: none;
  }

  .shift-inner {
    max-width: 940px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: left;
  }

  .shift-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 48px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .shift-label::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--orange);
  }

  .shift-headline {
    font-family: 'Cooper BT', serif;
    font-size: clamp(36px, 5.2vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    max-width: 16ch;
  }

  .shift-counter {
    font-family: 'Cooper BT', serif;
    font-size: clamp(32px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-style: italic;
    color: var(--orange);
    margin-bottom: 72px;
    max-width: 14ch;
  }

  .shift-body {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.65;
    color: rgba(245, 241, 234, 0.78);
    max-width: 620px;
    margin-bottom: 24px;
  }

  .shift-body:last-of-type {
    margin-bottom: 80px;
  }

  .shift-body strong {
    color: var(--cream);
    font-weight: 500;
  }

  .shift-body em {
    color: var(--orange);
    font-style: italic;
  }

  /* The before/now comparison */
  .shift-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 16px;
    max-width: 820px;
  }

  .shift-compare-cell {
    padding: 40px 36px;
    background: var(--ink);
    position: relative;
  }

  .shift-compare-cell.now {
    background: rgba(255, 107, 44, 0.04);
  }

  .shift-compare-label {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.45);
    font-weight: 500;
    margin-bottom: 20px;
  }

  .shift-compare-cell.now .shift-compare-label {
    color: var(--orange);
  }

  .shift-compare-quote {
    font-family: 'Cooper BT', serif;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--cream);
  }

  .shift-compare-cell.now .shift-compare-quote {
    color: var(--cream);
  }

  .shift-compare-quote::before {
    content: '"';
    display: inline-block;
    color: var(--orange);
    margin-right: 4px;
  }

  .shift-compare-quote::after {
    content: '"';
    display: inline-block;
    color: var(--orange);
    margin-left: 2px;
  }

  @media (max-width: 768px) {
    .shift { padding: 120px 24px; }
    .shift-headline { font-size: clamp(32px, 8vw, 52px); }
    .shift-counter { font-size: clamp(26px, 7vw, 40px); margin-bottom: 56px; }
    .shift-body { font-size: 17px; }
    .shift-compare { grid-template-columns: 1fr; }
    .shift-compare-cell { padding: 32px 24px; }
  }

  /* ============================================================
     LARGE SCREEN OPTIMIZATIONS
     The base layout targets 1200-1400px desktop. These media queries
     open up the page for wider displays so it feels expansive, not cramped.
     ============================================================ */

  /* Tier 1: standard large desktop (1600px+) */
  @media (min-width: 1600px) {
    nav { padding: 22px 56px; }
    .hero { padding: 120px 56px 60px; }

    /* Grid expands. Sphere gets a bit more room. */
    .hero-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
    .globe-wrap { max-width: 720px; }

    /* Section padding scales up for proper vertical rhythm */
    .languages,
    .how-it-works,
    .channels,
    .essence,
    .genres,
    .scale,
    .vision,
    .radio-cta,
    .final-cta {
      padding-left: 56px;
      padding-right: 56px;
      padding-top: 160px;
      padding-bottom: 160px;
    }

    /* Max content width opens up */
    .languages > div,
    .how-it-works > div,
    .channels > div,
    .essence-grid,
    .genres > div,
    .scale > div,
    .vision-inner,
    .radio-inner {
      max-width: 1680px;
    }

    .step-num { font-size: 64px; }
    .step-title { font-size: 26px; }
    .step-desc { font-size: 15px; }
  }

  /* Tier 2: ultra-wide / 4K (2000px+) */
  @media (min-width: 2000px) {
    nav { padding: 26px 80px; }
    .hero { padding: 140px 80px 80px; }

    .hero-main { gap: 80px; }
    .globe-wrap { max-width: 820px; }

    .languages,
    .how-it-works,
    .channels,
    .essence,
    .genres,
    .scale,
    .vision,
    .radio-cta,
    .final-cta {
      padding-left: 80px;
      padding-right: 80px;
      padding-top: 200px;
      padding-bottom: 200px;
    }

    .languages > div,
    .how-it-works > div,
    .channels > div,
    .essence-grid,
    .genres > div,
    .scale > div,
    .vision-inner,
    .radio-inner,
    .footer-grid,
    .footer-bottom {
      max-width: 1920px;
    }

    /* Bump hero typography so it commands ultra-wide */
    h1.hero-title { font-size: clamp(52px, 7.6vw, 112px); }
    .section-title { font-size: clamp(40px, 5.8vw, 100px); }
    .vision-title { font-size: clamp(44px, 7vw, 132px); }
    .final-title { font-size: clamp(56px, 9.5vw, 180px); }
    .hero-lead { font-size: 22px; max-width: 620px; }
    .section-desc { font-size: 20px; max-width: 720px; }

    /* Slightly larger cards, more breathing room */
    .step { padding: 52px 36px; min-height: 400px; }
    .step-num { font-size: 72px; }
    .step-title { font-size: 30px; }
    .step-desc { font-size: 16px; }

    .pillar { padding: 52px 40px; min-height: 360px; }
    .pillar-title { font-size: 30px; }
    .pillar-desc { font-size: 15px; }

    .channel-card { padding: 40px; min-height: 240px; }
    .channel-name { font-size: 32px; }

    .genre-card { padding: 32px; }
    .genre-name { font-size: 32px; }

    .stat { padding: 60px 32px; }
    .stat-label { font-size: 15px; max-width: 220px; }

    .footer-tagline { font-size: 16px; max-width: 360px; }
    footer { padding: 80px 80px 56px; }
  }

  /* Tier 3: preserve readability if viewport goes beyond 2400px
     (ultrawide monitors, high-res external displays) */
  @media (min-width: 2400px) {
    body { font-size: 17px; }

    .hero-main { gap: 100px; }
    .globe-wrap { max-width: 920px; }
  }

  /* Genre grid: go from 4 cols -> 6 cols on big screens for better density */
  @media (min-width: 1800px) {
    .genre-grid { grid-template-columns: repeat(3, 1fr); }
    .channel-grid { grid-template-columns: repeat(3, 1fr); }
  }

/* ===== Language switcher ===== */
.lang-switcher{position:relative;display:inline-flex;align-items:center;margin:0 8px}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;opacity:.85;transition:opacity .15s,border-color .15s}
.lang-toggle:hover{opacity:1;border-color:rgba(255,255,255,.35)}
.lang-toggle .lang-current{font-weight:500}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:rgba(15,15,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:none;flex-direction:column;z-index:100;backdrop-filter:blur(16px)}
.lang-switcher:hover .lang-menu,.lang-switcher:focus-within .lang-menu,.lang-menu.open{display:flex}
.lang-option{display:block;padding:8px 12px;color:rgba(255,255,255,.85);font-size:13px;text-decoration:none;border-radius:6px;transition:background .12s,color .12s}
.lang-option:hover{background:rgba(255,255,255,.08);color:#fff}
.lang-option.active{background:rgba(255,255,255,.06);color:#fff;font-weight:600}
@media (max-width:768px){.lang-menu{right:auto;left:0}}

/* ===== RTL support (Arabic) ===== */
[dir="rtl"] body{direction:rtl;text-align:right}
[dir="rtl"] nav .nav-links{flex-direction:row-reverse}
[dir="rtl"] .hero-content{text-align:right}
[dir="rtl"] .hero-actions{flex-direction:row-reverse;justify-content:flex-end}
[dir="rtl"] .hero-tag{flex-direction:row-reverse}
[dir="rtl"] .ticker-track{animation-direction:reverse}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .stage-label{text-align:right}
[dir="rtl"] .pipeline-step{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .flow-header{text-align:center}
/* Arabic font fallback so Cooper BT (no Arabic glyphs) doesn't clip headings */
html[lang="ar"] body,
html[lang="ar"] .nav-links a,
html[lang="ar"] .lang-current,
html[lang="ar"] .lang-option,
html[lang="ar"] .hero-tag,
html[lang="ar"] .ticker-text,
html[lang="ar"] p,
html[lang="ar"] .stage-label,
html[lang="ar"] .pillar-desc,
html[lang="ar"] .footer-tagline,
html[lang="ar"] .footer-col a,
html[lang="ar"] .footer-col h4 { font-family: 'Noto Naskh Arabic', 'Bricolage Grotesque', sans-serif; }
html[lang="ar"] .hero-title,
html[lang="ar"] .section-title,
html[lang="ar"] .vision-title,
html[lang="ar"] .radio-title,
html[lang="ar"] .final-title,
html[lang="ar"] .footer-farewell-quote,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] em { font-family: 'Noto Naskh Arabic', 'Cooper BT', serif !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
/* Hindi font fallback */
html[lang="hi"] body,
html[lang="hi"] p,
html[lang="hi"] .nav-links a,
html[lang="hi"] .lang-current,
html[lang="hi"] .lang-option,
html[lang="hi"] .footer-tagline { font-family: 'Noto Sans Devanagari', 'Bricolage Grotesque', sans-serif; }
html[lang="hi"] .hero-title,
html[lang="hi"] .section-title,
html[lang="hi"] .vision-title,
html[lang="hi"] .radio-title,
html[lang="hi"] .final-title,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="hi"] em { font-family: 'Noto Sans Devanagari', 'Cooper BT', serif !important; line-height: 1.3 !important; }