/* Shared by the homepage and the public story pages. Edit this file, not a copy. */
@font-face { font-family: "Oncast Logo"; src: url("/fonts/MPLUSRounded1c-800.ttf") format("truetype"); font-weight: 800; font-display: block; }
  @font-face { font-family: "Nunito"; src: url("/fonts/Nunito-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
  @font-face { font-family: "Nunito"; src: url("/fonts/Nunito-900.ttf") format("truetype"); font-weight: 900; font-display: swap; }
  :root {
    --c: #e8452c; --g: #f28c26; --bg: #09090d; --text: #f2f2f4; --muted: rgba(255,255,255,0.6); --dim: rgba(255,255,255,0.42);
    --glass: rgba(255,255,255,0.055); --line: rgba(255,255,255,0.12); --r: 28px;
    --head: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; }
  html, body { margin: 0; }
  body { background: var(--bg); color: var(--text); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  ::selection { background: var(--c); color: #fff; }
  svg.ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Logo: copied from the player. */
  .logo { display: flex; align-items: baseline; gap: 0; font: 800 30px/1 "Oncast Logo", ui-rounded, sans-serif; letter-spacing: -1px; color: #fff; text-decoration: none; }
  .logo i { width: 21.5px; height: 21.5px; border: 4.3px solid #fff; border-radius: 50%; margin-bottom: -0.3px; margin-right: 0.2px; background: radial-gradient(circle, var(--c) 3.4px, transparent 3.9px); transition: background 0.6s; }

  /* Background: drifting brand glows, grain, cursor light. */
  .bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
  .bg b { position: absolute; border-radius: 50%; filter: blur(10px); will-change: transform; }
  .bg .b1 { width: 900px; height: 900px; left: -260px; top: -380px; background: radial-gradient(closest-side, rgba(232,69,44,0.42), transparent); animation: drift1 26s ease-in-out infinite; }
  .bg .b2 { width: 760px; height: 760px; right: -280px; top: 18%; background: radial-gradient(closest-side, rgba(242,140,38,0.28), transparent); animation: drift2 32s ease-in-out infinite; }
  .bg .b3 { width: 700px; height: 700px; left: 20%; bottom: -420px; background: radial-gradient(closest-side, rgba(180,40,90,0.22), transparent); animation: drift1 38s ease-in-out infinite reverse; }
  @keyframes drift1 { 50% { transform: translate(120px, 80px) scale(1.1); } }
  @keyframes drift2 { 50% { transform: translate(-120px, -70px) scale(0.92); } }
  .grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .cursor { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(242,120,50,0.13), transparent); opacity: 0; transition: opacity 0.5s; }
  .cursor.on { opacity: 1; }

  .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right)); position: relative; }

  /* Nav */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top); transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s; border-bottom: 1px solid transparent; }
  .nav.solid { background: rgba(9,9,13,0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
  .nav .wrap { display: flex; align-items: center; gap: 18px; height: 68px; }
  .nav .links { display: flex; gap: 4px; margin-left: auto; }
  .nav .links a { text-decoration: none; color: var(--muted); font: 700 15px var(--head); padding: 8px 14px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
  .nav .links a:hover { color: #fff; background: rgba(255,255,255,0.07); }
  .menu-btn { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: #fff; padding: 0; cursor: pointer; place-items: center; }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; position: relative; transition: transform 0.3s var(--ease), background 0.2s; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
  .nav.open .menu-btn span { background: transparent; }
  .nav.open .menu-btn span::before { transform: translateY(5px) rotate(45deg); }
  .nav.open .menu-btn span::after { transform: translateY(-5px) rotate(-45deg); }

  /* Buttons */
  .btn { --bx: 0px; --by: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; color: #fff; font: 900 16px var(--head); letter-spacing: 0.2px; padding: 0 22px; height: 46px; border-radius: 999px; overflow: hidden; isolation: isolate;
    background: linear-gradient(120deg, var(--c), var(--g)); box-shadow: 0 8px 30px -8px rgba(232,69,44,0.7), inset 0 1px 0 rgba(255,255,255,0.25); transform: translate(var(--bx), var(--by)); transition: transform 0.25s var(--ease), box-shadow 0.3s; white-space: nowrap; }
  .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease); }
  .btn:hover::after { transform: translateX(120%); }
  .btn:hover { box-shadow: 0 12px 40px -8px rgba(232,69,44,0.9), inset 0 1px 0 rgba(255,255,255,0.25); }
  .btn:active { transform: translate(var(--bx), var(--by)) scale(0.96); }
  .btn svg { width: 18px; height: 18px; fill: #fff; flex: none; }
  .btn.big { height: 60px; padding: 0 30px 0 12px; font-size: 18px; }
  .btn.big .pi { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.22); display: grid; place-items: center; }
  .btn.big .pi svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
  .hero-now { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; min-height: 1.4em; }
  .hero-now b { color: #ff6b4d; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
  .hero-now a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .btn.ghost { background: var(--glass); border: 1px solid var(--line); box-shadow: none; }
  .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

  /* Store badges: same markup as the player. */
  .apps { display: flex; gap: 10px; flex-wrap: wrap; }
  .apps a { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 12px; background: #000; color: #fff; border: 1px solid #a6a6a6; text-decoration: none; transition: transform 0.25s var(--ease), border-color 0.2s; }
  .apps a:not(.soon-badge):hover { transform: translateY(-3px); border-color: #fff; }
  .apps a svg { width: 28px; height: 28px; fill: #fff; flex: none; }
  .apps a span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
  .apps a small { font-size: 11px; font-weight: 500; letter-spacing: 0.2px; }
  .apps .soon-badge { opacity: 0.75; cursor: default; }
  .apps a b { font-size: 21px; font-weight: 600; letter-spacing: -0.4px; }

  /* Type */
  h1, h2, h3 { font-family: var(--head); font-weight: 900; margin: 0; letter-spacing: -0.02em; }
  .grad { background: linear-gradient(90deg, var(--c), var(--g) 35%, #ffc46b 50%, var(--g) 65%, var(--c)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 900 12.5px var(--head); letter-spacing: 2.2px; text-transform: uppercase; color: var(--g); }
  .sec { padding: 120px 0; position: relative; }
  .sec-head { max-width: 760px; margin-bottom: 56px; }
  .sec-head h2 { font-size: clamp(36px, 6vw, 68px); line-height: 1.02; margin-top: 14px; }
  .sec-head p { color: var(--muted); font-size: 19px; margin: 18px 0 0; max-width: 600px; }
  .center { text-align: center; margin-left: auto; margin-right: auto; }
  .center p { margin-left: auto; margin-right: auto; }

  /* Scroll reveal */
  .rv { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
  .rv.in { opacity: 1; transform: none; }

  /* Live dot */
  .live { display: inline-flex; align-items: center; gap: 7px; font: 900 11.5px var(--head); letter-spacing: 1.6px; color: #fff; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); }
  .live b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--c)); }
  .live b::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--dot, var(--c)); animation: ping 1.8s ease-out infinite; }
  @keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
  .live.off b { background: rgba(255,255,255,0.35); } .live.off b::after { display: none; }

  /* Hero */
  .hero { min-height: 100vh; min-height: 100svh; padding: calc(110px + env(safe-area-inset-top)) 0 70px; display: flex; align-items: center; }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
  .hero h1 { font-size: clamp(54px, 8.6vw, 116px); line-height: 0.92; letter-spacing: -0.04em; margin: 22px 0 0; }
  .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(4deg); animation: wordIn 0.9s var(--ease) forwards; animation-delay: calc(0.12s * var(--i) + 0.15s); }
  @keyframes wordIn { to { opacity: 1; transform: none; } }
  .hero .sub { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 540px; margin: 26px 0 34px; }
  .hero .sub b { color: #fff; font-weight: 600; }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hero .apps { margin-top: 22px; }
  .hero .note { margin-top: 18px; color: var(--dim); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
  .hero .note span { display: inline-flex; align-items: center; gap: 6px; }
  .hero .note svg { width: 16px; height: 16px; color: var(--g); }
  .fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp 1s var(--ease) forwards; animation-delay: var(--d, 0.6s); }
  @keyframes fadeUp { to { opacity: 1; transform: none; } }

  /* Hero visual: a circular live visualizer between two hosts. */
  .stage { position: relative; --s: min(500px, 86vw); width: var(--s); height: var(--s); margin: 0 auto 60px; will-change: transform; }
  .orb { position: absolute; inset: 0; border-radius: 50%; }
  .orb .ring { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, var(--c), var(--g), #ffc46b, #b4285a, var(--c)); animation: spin 14s linear infinite; filter: blur(32px); opacity: 0.55; }
  .orb .ring2 { position: absolute; inset: 15%; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg, transparent, rgba(255,255,255,0.7), transparent 30%, transparent 60%, rgba(242,140,38,0.9), transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 9s linear infinite reverse; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .orb .core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 55%), rgba(14,14,20,0.82); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 60px rgba(232,69,44,0.25), 0 30px 80px -20px rgba(0,0,0,0.8); display: grid; place-items: center; }
  .bigO { width: 34%; aspect-ratio: 1; border-radius: 50%; border: calc(var(--s) * 0.028) solid #fff; display: grid; place-items: center; }
  .bigO::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 24px var(--c), 0 0 60px var(--c); animation: beat 1.1s ease-in-out infinite; }
  @keyframes beat { 50% { transform: scale(1.25); } }
  .bars { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
  .bars > span { position: absolute; inset: 0; }
  .bars > span > i { position: absolute; left: calc(50% - 2px); top: 8.5%; width: 4px; height: 11%; border-radius: 4px; background: linear-gradient(to top, var(--g), var(--bc, var(--c))); transform-origin: 50% 100%; transform: scaleY(0.15); animation: eq var(--t, 0.8s) ease-in-out var(--dl, 0s) infinite alternate; opacity: 0.9; }
  @keyframes eq { from { transform: scaleY(0.12); } to { transform: scaleY(var(--a, 0.8)); } }
  .stage[data-who="a"] .bars > span.a > i, .stage[data-who="b"] .bars > span.b > i { --a: 1; opacity: 1; }
  .stage[data-who="a"] .bars > span.b > i, .stage[data-who="b"] .bars > span.a > i { --a: 0.35; opacity: 0.45; }
  .host { position: absolute; bottom: 13%; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3; transition: transform 0.5s var(--ease); }
  .host.a { left: -2%; } .host.b { right: -2%; }
  .host .av { width: calc(var(--s) * 0.18); height: calc(var(--s) * 0.18); border-radius: 50%; display: grid; place-items: center; font: 900 calc(var(--s) * 0.065) var(--head); color: #fff; position: relative; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 10px 30px -6px rgba(0,0,0,0.7); transition: box-shadow 0.4s, border-color 0.4s; }
  .host.a .av { background: linear-gradient(140deg, #ff7a59, #e8452c 60%, #8f1d2c); }
  .host.b .av { background: linear-gradient(140deg, #ffd27a, #f28c26 60%, #9a4a10); }
  .host .av::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
  .host.a .av::before { color: var(--c); } .host.b .av::before { color: var(--g); }
  .host.talk .av::before { animation: ping 1.3s ease-out infinite; }
  .host.talk { transform: translateY(-6px) scale(1.06); }
  .host.talk .av { border-color: #fff; }
  .host label { font: 900 12px var(--head); letter-spacing: 1.5px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.5); border: 1px solid var(--line); }
  .host .eqm { display: flex; gap: 3px; height: 16px; align-items: flex-end; }
  .host .eqm i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; transform: scaleY(0.2); }
  .host.talk .eqm i { animation: eq 0.45s ease-in-out infinite alternate; --a: 1; }
  .host .eqm i:nth-child(2) { animation-delay: -0.15s !important; } .host .eqm i:nth-child(3) { animation-delay: -0.3s !important; } .host .eqm i:nth-child(4) { animation-delay: -0.08s !important; }
  .caption { position: absolute; left: 50%; top: 86%; transform: translateX(-50%); width: min(92%, 380px); z-index: 4; padding: 14px 18px; border-radius: 20px; background: rgba(20,20,28,0.72); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0,0,0,0.8); min-height: 86px; }
  .caption .who { font: 900 11px var(--head); letter-spacing: 1.6px; color: var(--c); display: flex; align-items: center; gap: 8px; }
  .caption .who .chk { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(33,196,94,0.16); color: #4ade80; letter-spacing: 0.8px; opacity: 0; transform: scale(0.6); transition: all 0.4s var(--ease); }
  .caption .who .chk.on { opacity: 1; transform: none; }
  .caption .who .chk svg { width: 11px; height: 11px; }
  .caption p { margin: 4px 0 0; font: 700 16px/1.35 var(--head); color: #fff; }
  .caption p.swap { animation: rise 0.45s var(--ease); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
  .post { position: absolute; z-index: 2; display: flex; gap: 9px; align-items: center; max-width: 230px; padding: 9px 13px 9px 9px; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.88); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6);
    opacity: 0; animation: suck 9s var(--ease) infinite; animation-delay: var(--dl); }
  .post .src { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #000; border: 1px solid rgba(255,255,255,0.2); }
  .post .src svg { width: 13px; height: 13px; fill: #fff; }
  .post .src.bs { background: #1185fe; border-color: transparent; }
  .post .src.nw { background: #fff; } .post .src.nw svg { fill: none; stroke: #000; }
  @keyframes suck {
    0% { opacity: 0; transform: translate(calc(var(--x) * -0.2), calc(var(--y) * -0.2)) scale(0.9); }
    10%, 55% { opacity: 1; transform: none; }
    80%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.15); }
  }
  .post.p1 { left: -4%; top: 9%; --x: calc(var(--s) * 0.4); --y: calc(var(--s) * 0.36); --dl: 0s; }
  .post.p2 { left: 50%; top: 2%; --x: calc(var(--s) * -0.2); --y: calc(var(--s) * 0.42); --dl: -3s; }
  .post.p3 { left: -7%; top: 35%; --x: calc(var(--s) * 0.42); --y: calc(var(--s) * 0.1); --dl: -6s; }
  .paused, .paused * { animation-play-state: paused !important; }

  /* Ticker */
  .tickwrap { overflow: hidden; padding: 24px 0; margin: -24px 0; position: relative; z-index: 1; }
  .ticker { position: relative; padding: 26px 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(232,69,44,0.07), rgba(242,140,38,0.05)); overflow: hidden; transform: rotate(-1.2deg) scale(1.03); }
  .ticker .label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; padding: 0 22px; background: linear-gradient(90deg, var(--bg) 70%, transparent); }
  .ticker::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 120px; background: linear-gradient(-90deg, var(--bg), transparent); z-index: 2; }
  .track { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
  .track.r2 { animation-direction: reverse; animation-duration: 70s; margin-top: 14px; }
  .ticker:hover .track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  .tk { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); font-size: 15px; white-space: nowrap; color: rgba(255,255,255,0.88); }
  .tk .src { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 1px solid rgba(255,255,255,0.2); flex: none; }
  .tk .src svg { width: 12px; height: 12px; fill: #fff; }
  .tk .src.bs { background: #1185fe; border-color: transparent; }
  .tk .src.nw { background: #fff; } .tk .src.nw svg { fill: none; stroke: #000; }
  .tk em { font-style: normal; font: 900 11px var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cc); }

  /* How it works */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
  .steps .wire { position: absolute; left: 16%; right: 16%; top: 64px; height: 2px; background: linear-gradient(90deg, var(--c), var(--g)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) 0.3s; z-index: 0; opacity: 0.6; }
  .steps.in .wire { transform: none; }
  .step { position: relative; z-index: 1; padding: 28px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
  .step .num { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(140deg, var(--c), var(--g)); box-shadow: 0 14px 40px -10px rgba(232,69,44,0.8); color: #fff; position: relative; }
  .step .num svg { width: 32px; height: 32px; }
  .step .num small { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #000; font: 900 13px/26px var(--head); text-align: center; }
  .step h3 { font-size: 26px; line-height: 1.12; margin: 24px 0 10px; }
  .step p { color: var(--muted); margin: 0; font-size: 16.5px; }
  .demo { margin-top: 24px; height: 128px; border-radius: 18px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; padding: 14px; }
  .feed { display: flex; flex-direction: column; gap: 8px; animation: feed 7s var(--ease) infinite; }
  .feed div { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,0.06); font-size: 12.5px; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; }
  .feed div i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--c)); }
  .feed div span { margin-left: auto; color: var(--g); font: 900 11px var(--head); }
  @keyframes feed { 0%, 20% { transform: translateY(0); } 33%, 53% { transform: translateY(-38px); } 66%, 86% { transform: translateY(-76px); } 100% { transform: translateY(0); } }
  .claim { font: 700 14px/1.4 var(--head); color: rgba(255,255,255,0.88); position: relative; }
  .claim mark { background: none; color: inherit; background-image: linear-gradient(rgba(242,140,38,0.35), rgba(242,140,38,0.35)); background-repeat: no-repeat; background-size: 0% 100%; animation: hl 6s var(--ease) infinite; border-radius: 3px; }
  @keyframes hl { 0%, 10% { background-size: 0% 100%; } 35%, 100% { background-size: 100% 100%; } }
  .scan { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(transparent, rgba(242,140,38,0.25), transparent); animation: scan 6s ease-in-out infinite; }
  @keyframes scan { 0% { transform: translateY(-40px); } 40% { transform: translateY(130px); } 100% { transform: translateY(130px); } }
  .stamp { position: absolute; right: 14px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(33,196,94,0.16); border: 1px solid rgba(74,222,128,0.4); color: #4ade80; font: 900 12px var(--head); letter-spacing: 1px; animation: stamp 6s var(--ease) infinite; }
  .stamp svg { width: 14px; height: 14px; }
  .srcs { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
  .srcs i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.12); animation: pop 6s var(--ease) infinite; animation-delay: calc(var(--n) * 0.25s); }
  @keyframes pop { 0%, 30% { transform: scale(0); } 40%, 100% { transform: scale(1); } }
  @keyframes stamp { 0%, 48% { opacity: 0; transform: scale(1.8) rotate(-10deg); } 56%, 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
  .talk { display: flex; flex-direction: column; gap: 8px; }
  .talk .ln { display: flex; gap: 8px; align-items: center; }
  .talk .ln.r { flex-direction: row-reverse; }
  .talk .dt { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, #ff7a59, #e8452c); font: 900 11px/26px var(--head); text-align: center; }
  .talk .ln.r .dt { background: linear-gradient(140deg, #ffd27a, #f28c26); }
  .talk .bub { padding: 7px 12px; border-radius: 14px; background: rgba(255,255,255,0.08); font-size: 12.5px; color: rgba(255,255,255,0.88); opacity: 0; transform: translateY(8px); animation: bub 6s var(--ease) infinite; animation-delay: var(--dl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @keyframes bub { 0% { opacity: 0; transform: translateY(8px); } 8%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

  /* Channels */
  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: 1200px; }
  .ch { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 22px; border-radius: var(--r); text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 30%, #0c0c12), color-mix(in srgb, var(--cg) 14%, #0c0c12) 70%); border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent);
    transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s; }
  .ch.wide { grid-column: span 2; }
  .ch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(400px circle at var(--mx) var(--my), color-mix(in srgb, var(--cc) 45%, transparent), transparent 60%); opacity: 0; transition: opacity 0.4s; }
  .ch::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -80px; border-radius: 50%; background: radial-gradient(closest-side, var(--cg), transparent); opacity: 0.45; z-index: -1; filter: blur(8px); transition: transform 0.6s var(--ease); }
  .ch:hover { box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--cc) 70%, transparent); border-color: color-mix(in srgb, var(--cc) 80%, #fff); }
  .ch:hover::before { opacity: 1; }
  .ch:hover::after { transform: scale(1.4) translate(-20px, 20px); }
  .ch .top { display: flex; justify-content: space-between; align-items: center; }
  .ch .live { --dot: var(--cc); background: rgba(0,0,0,0.3); }
  .ch .arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); transition: transform 0.35s var(--ease), background 0.3s; }
  .ch .arrow svg { width: 18px; height: 18px; }
  .ch:hover .arrow { transform: rotate(-45deg); background: var(--cc); }
  .ch .ceq { display: flex; gap: 4px; align-items: flex-end; height: 40px; margin: auto 0 18px; }
  .ch .ceq i { width: 5px; border-radius: 3px; height: 100%; background: linear-gradient(to top, var(--cc), var(--cg)); transform-origin: bottom; transform: scaleY(0.2); animation: eq var(--t) ease-in-out var(--dl) infinite alternate; --a: 0.9; opacity: 0.85; }
  .ch .kind { font: 900 12px var(--head); letter-spacing: 1.8px; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 55%, #fff); }
  .ch h3 { font-size: 30px; line-height: 1.05; margin: 4px 0 6px; transform: translateZ(30px); }
  .ch .hosts { color: var(--muted); font-size: 15px; font-weight: 600; }
  .ch .hosts b { color: #fff; font-weight: 700; }
  .ch .nfa { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }
  .ch .next { margin-top: 6px; font-size: 12.5px; color: var(--dim); }

  /* Features bento */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
  .tile { position: relative; padding: 30px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color 0.3s, transform 0.4s var(--ease); }
  .tile:hover { border-color: rgba(255,255,255,0.26); transform: translateY(-4px); }
  .tile.s3 { grid-column: span 3; } .tile.s2 { grid-column: span 2; }
  .tile .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border: 1px solid var(--line); color: var(--g); }
  .tile .ic svg { width: 26px; height: 26px; }
  .tile h3 { font-size: 27px; line-height: 1.1; margin: 20px 0 10px; }
  .tile p { margin: 0; color: var(--muted); font-size: 16px; }
  .micbox { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
  .mic { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(140deg, var(--c), var(--g)); display: grid; place-items: center; box-shadow: 0 12px 40px -8px rgba(232,69,44,0.9); }
  .mic svg { width: 30px; height: 30px; color: #fff; }
  .mic::before, .mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); animation: ripple 2.4s ease-out infinite; }
  .mic::after { animation-delay: 1.2s; }
  @keyframes ripple { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }
  .qa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .qa div { padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,0.08); font-size: 14px; color: rgba(255,255,255,0.9); }
  .qa div.you { background: linear-gradient(120deg, rgba(232,69,44,0.35), rgba(242,140,38,0.25)); border-radius: 16px 16px 4px 16px; }
  .qa b { font: 900 10.5px var(--head); letter-spacing: 1.2px; display: block; color: var(--g); }
  .clip { margin-top: 26px; display: flex; gap: 16px; align-items: center; }
  .phone { flex: none; width: 116px; height: 190px; border-radius: 20px; border: 2px solid rgba(255,255,255,0.22); background: linear-gradient(170deg, #2a1410, #12090c 60%); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
  .phone .mini { display: flex; gap: 3px; align-items: center; height: 36px; }
  .phone .mini i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(to top, var(--c), var(--g)); transform: scaleY(0.2); animation: eq var(--t) ease-in-out var(--dl) infinite alternate; --a: 1; }
  .phone .cap { font: 900 11.5px/1.25 var(--head); text-align: center; }
  .phone .cap span { opacity: 0.35; animation: word 3s steps(1) infinite; animation-delay: calc(var(--n) * 0.35s); }
  @keyframes word { 0% { opacity: 0.35; color: #fff; } 10%, 100% { opacity: 1; color: #ffc46b; } }
  .phone .pr { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--g); animation: prog 6s linear infinite; }
  @keyframes prog { from { width: 0; } to { width: 100%; } }
  .phone .wm { position: absolute; top: 9px; left: 10px; font: 800 10px "Oncast Logo", sans-serif; opacity: 0.8; }
  .clip ul, .hands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.85); }
  .clip li, .hands li { display: flex; gap: 10px; align-items: center; }
  .clip li svg, .hands li svg { width: 18px; height: 18px; color: var(--g); flex: none; }
  .checks { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
  .checks div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.25); }
  .checks svg { width: 18px; height: 18px; color: #4ade80; flex: none; }
  .checks svg path { stroke-dasharray: 20; stroke-dashoffset: 20; }
  .tile.in .checks svg path { animation: draw 0.6s var(--ease) forwards; animation-delay: calc(0.3s + var(--n) * 0.35s); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .hands .row { display: flex; gap: 10px; margin-top: 22px; }
  .hands .row span { flex: 1; aspect-ratio: 1; max-width: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: #fff; animation: glowc 6s ease-in-out infinite; animation-delay: calc(var(--n) * 1.5s); }
  .hands .row svg { width: 26px; height: 26px; }
  @keyframes glowc { 0%, 30%, 100% { background: rgba(255,255,255,0.06); color: #fff; transform: none; } 10%, 20% { background: linear-gradient(140deg, var(--c), var(--g)); transform: translateY(-4px); } }
  .free .zero { font: 900 clamp(84px, 11vw, 128px)/0.9 var(--head); letter-spacing: -0.05em; margin: 14px 0 6px; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .tags span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); }

  /* Big statement band */
  .band { padding: 40px 0 0; text-align: center; }
  .band h2 { font-size: clamp(40px, 9vw, 120px); line-height: 0.95; letter-spacing: -0.045em; }
  .band h2 span { display: block; }
  .band h2 .o { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.4); }

  /* FAQ */
  .faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
  .q { border-radius: 22px; background: var(--glass); border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
  .q.open { border-color: rgba(242,140,38,0.45); background: rgba(242,140,38,0.06); }
  .q button { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: 0; color: #fff; cursor: pointer; padding: 22px 24px; font: 900 19px/1.3 var(--head); border-radius: 22px; }
  .q button i { margin-left: auto; flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); transition: transform 0.4s var(--ease), background 0.3s; }
  .q button i::before, .q button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: #fff; border-radius: 2px; }
  .q button i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease); }
  .q.open button i { transform: rotate(180deg); background: var(--c); }
  .q.open button i::after { transform: rotate(0deg); }
  .q .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
  .q.open .a { grid-template-rows: 1fr; }
  .q .a > div { overflow: hidden; }
  .q .a p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 16.5px; }
  .q .a a { color: var(--g); }

  /* Contact */
  .contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
  .contact .sec-head { margin-bottom: 0; }
  .form { position: relative; padding: 30px; border-radius: 32px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
  .form::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(232,69,44,0.7), transparent 40%, transparent 60%, rgba(242,140,38,0.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
  .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(0,0,0,0.35); border: 1px solid var(--line); margin-bottom: 22px; }
  .seg .pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(120deg, var(--c), var(--g)); transition: transform 0.45s var(--ease); box-shadow: 0 6px 20px -6px rgba(232,69,44,0.8); }
  .seg[data-kind="bug"] .pill { transform: translateX(100%); }
  .seg button { position: relative; z-index: 1; background: none; border: 0; color: rgba(255,255,255,0.7); font: 900 15px var(--head); height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color 0.3s; border-radius: 999px; }
  .seg button[aria-pressed="true"] { color: #fff; }
  .seg button svg { width: 17px; height: 17px; }
  .field { display: block; margin-bottom: 16px; }
  .field span { display: flex; justify-content: space-between; font: 900 12.5px var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .field span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--dim); }
  .field input, .field textarea { width: 100%; display: block; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: #fff; border-radius: 16px; padding: 14px 16px; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; resize: vertical; }
  .field textarea { min-height: 150px; }
  .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.32); }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 4px rgba(242,140,38,0.18); background: rgba(0,0,0,0.5); }
  .form .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .form .btn { height: 54px; padding: 0 28px; }
  .form .btn[disabled] { cursor: progress; opacity: 0.85; }
  .form .btn .sp { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
  .form .btn[disabled] .sp { display: block; }
  .form .btn[disabled] .send { display: none; }
  .form .hint { color: var(--dim); font-size: 13.5px; }
  .err { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(240,69,79,0.14); border: 1px solid rgba(240,69,79,0.45); color: #ffb3b8; font-size: 15px; display: none; }
  .err.show { display: block; animation: shake 0.45s; }
  @keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
  .done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: rgba(12,12,18,0.97); opacity: 0; pointer-events: none; transition: opacity 0.4s; border-radius: inherit; z-index: 5; }
  .form.sent .done { opacity: 1; pointer-events: auto; }
  .done svg { width: 96px; height: 96px; }
  .done circle { fill: none; stroke: url(#okg); stroke-width: 4; stroke-dasharray: 290; stroke-dashoffset: 290; }
  .done path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
  .form.sent .done circle { animation: drawc 0.7s var(--ease) 0.1s forwards; }
  .form.sent .done path { animation: drawc 0.45s var(--ease) 0.65s forwards; }
  @keyframes drawc { to { stroke-dashoffset: 0; } }
  .done h3 { font-size: 30px; margin: 18px 0 8px; }
  .done p { color: var(--muted); margin: 0 0 22px; max-width: 320px; }
  .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .confetti i { position: absolute; left: 50%; top: 38%; width: 8px; height: 14px; border-radius: 2px; opacity: 0; }
  .form.sent .confetti i { animation: conf 1.3s var(--ease) forwards; animation-delay: 0.5s; }
  @keyframes conf { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
  .contact .alt { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .contact .alt div { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 15.5px; }
  .contact .alt svg { width: 20px; height: 20px; color: var(--g); flex: none; }

  /* Footer */
  footer { border-top: 1px solid var(--line); padding: 60px 0 env(safe-area-inset-bottom); margin-top: 40px; position: relative; overflow: hidden; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-end; }
  footer .tag { color: var(--muted); margin: 14px 0 0; max-width: 340px; font-size: 15px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  footer nav a { color: var(--muted); text-decoration: none; font: 700 15px var(--head); }
  footer nav a:hover { color: #fff; }
  footer .copy { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--dim); font-size: 13px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); }
  footer .huge { display: block; text-align: center; margin: 40px 0 -0.24em; font: 800 clamp(96px, 25vw, 340px)/0.9 "Oncast Logo", sans-serif; letter-spacing: -0.05em; white-space: nowrap; pointer-events: none; user-select: none; background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Responsive */
  @media (max-width: 1020px) {
    .hero .wrap { grid-template-columns: 1fr; gap: 70px; }
    .hero .copyb { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .hero .sub { margin-left: auto; margin-right: auto; }
    .hero .ctas, .hero .apps, .hero .note { justify-content: center; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .steps .wire { left: 63px; right: auto; top: 60px; bottom: 60px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
    .bento .tile.s3, .bento .tile.s2 { grid-column: span 6; }
    .bento .tile.s2.half { grid-column: span 3; }
    .contact { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 760px) {
    .nav .links { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; flex-direction: column; gap: 2px; padding: 10px; border-radius: 22px; background: rgba(18,18,24,0.96); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease); box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
    .nav.open .links { opacity: 1; transform: none; pointer-events: auto; }
    .nav .links a { padding: 14px 16px; font-size: 17px; color: #fff; }
    .nav .wrap { gap: 10px; }
    .nav .navcta { margin-left: auto; height: 42px; padding: 0 18px; font-size: 15px; }
    .menu-btn { display: grid; }
    .sec { padding: 84px 0; }
    .sec-head { margin-bottom: 40px; }
    .sec-head p { font-size: 17px; }
    .hero { padding-top: calc(96px + env(safe-area-inset-top)); }
    .hero h1 { font-size: clamp(50px, 15vw, 76px); }
    .hero .ctas { flex-direction: column; width: 100%; }
    .hero .ctas .btn { width: 100%; max-width: 360px; }
    .grid { grid-template-columns: 1fr; }
    .ch.wide { grid-column: auto; }
    .ch { min-height: 220px; }
    .bento .tile.s2.half { grid-column: span 6; }
    .tile { padding: 24px; }
    .form { padding: 22px; border-radius: 26px; }
    .form .btn { width: 100%; }
    .post { font-size: 11.5px; max-width: 180px; }
    .caption p { font-size: 14.5px; }
    .tk { font-size: 14px; }
    .ticker .label { display: none; }
    footer .wrap { flex-direction: column; align-items: flex-start; }
    /* Phone hero: keep the hosts and caption clear of each other. */
    .post:not(.p1) { display: none; }
    .host.a { left: 2%; } .host.b { right: 2%; }
    .track.r2 { display: none; }
    .nav .navcta { display: none; }
    .menu-btn { margin-left: auto; }
    footer nav a { display: inline-block; padding: 10px 0; }
  }
  @media (max-width: 430px) {
    .apps { gap: 8px; }
    .apps a { height: 48px; padding: 0 12px 0 10px; gap: 8px; border-radius: 10px; }
    .apps a svg { width: 24px; height: 24px; }
    .apps a b { font-size: 17px; }
    .apps a small { font-size: 9.5px; }
  }
  @media (max-width: 400px) {
    .hero h1 { font-size: 50px; }
    .clip { flex-direction: column; align-items: flex-start; }
    .micbox { gap: 14px; }
    .mic { width: 64px; height: 64px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .rv { opacity: 1; transform: none; }
    .post { display: none; }
    .bars > span > i { transform: scaleY(0.5); }
    .track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
    .track.r2 { display: none; }
    .ticker { transform: none; }
    .cursor { display: none; }
  }