:root {
  --ink: #f4fbff;
  --muted: #b8ccd8;
  --deep: #051521;
  --deep-2: #0a2434;
  --navy: #291852;
  --violet: #3b2368;
  --cyan: #00a7d7;
  --cyan-2: #54d7e6;
  --aqua: #93e2dc;
  --sea: #08788e;
  --gold: #c79a2e;
  --glass: rgba(9, 37, 53, .64);
  --glass-strong: rgba(7, 28, 42, .9);
  --line: rgba(255,255,255,.12);
  --shadow: 0 30px 80px rgba(0,0,0,.42);
  --radius: 28px;
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(0,167,215,.18), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(59,35,104,.28), transparent 30rem),
    linear-gradient(180deg, #071b29 0%, #082535 42%, #061822 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 110px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
  z-index: -1;
}

::selection { background: rgba(84,215,230,.3); color: #fff; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -2; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .4; animation: drift 14s ease-in-out infinite alternate; }
.orb-a { width: 360px; height: 360px; left: -150px; top: 20%; background: radial-gradient(circle, rgba(0,167,215,.42), transparent 66%); }
.orb-b { width: 470px; height: 470px; right: -220px; top: 8%; background: radial-gradient(circle, rgba(58,35,103,.54), transparent 68%); animation-duration: 18s; }
.orb-c { width: 330px; height: 330px; left: 42%; bottom: -170px; background: radial-gradient(circle, rgba(147,226,220,.26), transparent 70%); animation-duration: 20s; }
.stars span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 0 12px rgba(84,215,230,.7); animation: twinkle 3.6s ease-in-out infinite; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 76px);
  z-index: 80;
  background: linear-gradient(to bottom, rgba(5,21,33,.9), rgba(5,21,33,.35), transparent);
  backdrop-filter: blur(14px);
  transition: .3s ease;
}
.site-header.scrolled { background: rgba(5,21,33,.84); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.brand img { width: 48px; height: 48px; object-fit: cover; border-radius: 15px; box-shadow: 0 8px 24px rgba(0,167,215,.24); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 15px; letter-spacing: .01em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.desktop-nav { display: flex; gap: 32px; }
.desktop-nav a { text-decoration: none; color: #d7e7ee; font-size: 14px; font-weight: 700; transition: .2s; }
.desktop-nav a:hover { color: var(--cyan-2); }
.menu-button { display: none; width: 44px; height: 44px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 14px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-button span { width: 19px; height: 2px; background: white; border-radius: 999px; transition: .25s; }
.mobile-menu { position: fixed; top: 78px; left: 18px; right: 18px; z-index: 75; padding: 12px; border-radius: 20px; background: rgba(8,29,42,.96); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); display: grid; gap: 4px; transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none; transition: .25s ease; }
.mobile-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.mobile-menu a { padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #e8f4f8; font-weight: 750; }
.mobile-menu a:hover { background: rgba(255,255,255,.06); }

.hero { min-height: 100vh; max-width: 1440px; margin: 0 auto; padding: calc(var(--header-h) + 68px) clamp(24px, 6vw, 92px) 92px; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(46px, 7vw, 110px); align-items: center; position: relative; }
.hero::after { content: ""; position: absolute; height: 1px; left: 7%; right: 7%; bottom: 0; background: linear-gradient(90deg, transparent, rgba(84,215,230,.35), transparent); }
.eyebrow { margin: 0 0 14px; color: var(--cyan-2); font-size: 12px; font-weight: 850; letter-spacing: .18em; }
.live-pill { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(0,167,215,.11); border: 1px solid rgba(84,215,230,.22); color: #dffbff; font-size: 11px; font-weight: 850; letter-spacing: .06em; margin-bottom: 20px; }
.live-pill i, .floating-meta small i { width: 7px; height: 7px; border-radius: 50%; background: #37e38e; box-shadow: 0 0 0 5px rgba(55,227,142,.1), 0 0 18px rgba(55,227,142,.8); animation: pulse 1.7s ease-out infinite; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(44px, 5.6vw, 78px); line-height: .98; letter-spacing: -.045em; }
.hero h1 span { display: block; margin-top: 8px; background: linear-gradient(95deg, #f7fdff 0%, var(--cyan-2) 45%, var(--aqua) 100%); -webkit-background-clip: text; color: transparent; }
.hero-text { max-width: 680px; margin: 28px 0 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.primary-button, .secondary-button { min-height: 58px; border-radius: 18px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; border: 0; cursor: pointer; font-weight: 820; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.primary-button { color: #051722; background: linear-gradient(135deg, var(--aqua), var(--cyan-2)); box-shadow: 0 16px 38px rgba(0,167,215,.28), inset 0 1px rgba(255,255,255,.7); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 20px 45px rgba(0,167,215,.4), inset 0 1px rgba(255,255,255,.7); }
.button-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(5,23,34,.1); font-size: 12px; padding-left: 2px; }
.secondary-button { justify-content: flex-start; color: white; background: rgba(255,255,255,.055); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.secondary-button:hover { border-color: rgba(84,215,230,.5); transform: translateY(-2px); }
.secondary-button svg { width: 26px; height: 26px; fill: var(--cyan-2); flex: none; }
.secondary-button span { display: grid; gap: 1px; }
.secondary-button small { color: #91acb9; font-size: 9px; letter-spacing: .12em; }
.trust-row { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 12px 22px; color: #9fb8c4; font-size: 12px; }
.trust-row b { color: var(--aqua); }

.hero-visual { display: grid; place-items: center; perspective: 1200px; }
.radio-card { position: relative; width: min(100%, 480px); padding: 32px; border-radius: 38px; background: linear-gradient(145deg, rgba(16,54,70,.88), rgba(22,40,64,.76)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 44px 110px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.13); backdrop-filter: blur(24px); overflow: hidden; animation: cardFloat 6s ease-in-out infinite; }
.radio-card::before { content:""; position:absolute; inset:0; background: linear-gradient(125deg, rgba(255,255,255,.09), transparent 26%, transparent 72%, rgba(84,215,230,.08)); pointer-events:none; }
.card-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(0,167,215,.22); filter: blur(40px); top: -90px; right: -80px; }
.station-cover-wrap { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 4px auto 28px; }
.station-cover { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; position: relative; z-index: 2; box-shadow: 0 24px 54px rgba(0,0,0,.38); }
.cover-ring { position: absolute; inset: -10px; border: 1px solid rgba(84,215,230,.24); border-radius: 38px; z-index: 1; animation: ring 3s ease-in-out infinite; }
.visualizer { height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 6px 0 20px; }
.visualizer span { width: 4px; height: 13px; border-radius: 99px; background: linear-gradient(to top, var(--cyan), #fff); opacity: .4; transition: .25s; }
.visualizer.playing span { opacity: 1; animation: eq .85s ease-in-out infinite alternate; }
.visualizer.playing span:nth-child(2n) { animation-duration: .55s; }
.visualizer.playing span:nth-child(3n) { animation-duration: 1.05s; }
.visualizer.playing span:nth-child(5n) { animation-duration: .7s; }
.now-playing { text-align: center; display: grid; gap: 6px; }
.now-playing small { color: var(--cyan-2); font-size: 10px; letter-spacing: .13em; font-weight: 850; }
.now-playing strong { font-size: 22px; }
.now-playing span { color: var(--muted); font-size: 13px; }
.round-play { width: 74px; height: 74px; display: grid; place-items:center; margin: 24px auto 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.42); background: linear-gradient(145deg, rgba(84,215,230,.22), rgba(0,167,215,.28)); box-shadow: inset 0 0 0 6px rgba(255,255,255,.06), 0 14px 32px rgba(0,0,0,.26); color: #fff; cursor:pointer; transition:.25s; }
.round-play:hover { transform: scale(1.05); background: linear-gradient(145deg, rgba(84,215,230,.35), rgba(0,167,215,.42)); }
.round-play-icon { font-size: 22px; margin-left: 3px; }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; width: 28px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; display:grid; place-items:start center; padding-top:7px; opacity:.55; }
.scroll-cue span { width: 4px; height: 8px; border-radius: 99px; background: var(--cyan-2); animation: scrollDot 1.8s ease-in-out infinite; }

.section-shell { max-width: 1280px; margin: 0 auto; padding-left: clamp(24px,6vw,72px); padding-right: clamp(24px,6vw,72px); }
.features { padding-top: 120px; padding-bottom: 120px; }
.section-heading { max-width: 780px; margin-bottom: 46px; }
.section-heading h2, .app-copy h2, .cta h2 { margin: 0; font-size: clamp(34px,4.2vw,58px); line-height: 1.06; letter-spacing: -.035em; }
.section-heading > p:last-child, .app-copy > p { color: var(--muted); line-height: 1.75; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card { min-height: 245px; padding: 30px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border: 1px solid var(--line); position: relative; overflow:hidden; transition: transform .25s,border-color .25s,background .25s; }
.feature-card::after { content:""; position:absolute; width:130px;height:130px;border-radius:50%;right:-60px;bottom:-65px;background:rgba(0,167,215,.13);filter:blur(2px); }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(84,215,230,.32); background: linear-gradient(145deg, rgba(84,215,230,.08), rgba(255,255,255,.03)); }
.feature-icon { width: 50px; height: 50px; display:grid; place-items:center; border-radius:16px; background: rgba(0,167,215,.12); border:1px solid rgba(84,215,230,.2); color:var(--cyan-2); font-size:22px; }
.feature-card h3 { margin: 24px 0 10px; font-size: 20px; }
.feature-card p { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }

.app-section { padding-top: 90px; padding-bottom: 145px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:clamp(50px,8vw,115px); }
.android-badge { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border-radius:999px; background:rgba(147,226,220,.1); border:1px solid rgba(147,226,220,.2); color:#dffcf7; font-size:10px; letter-spacing:.12em; font-weight:900; margin-bottom:20px; }
.android-badge svg { width:18px;height:18px; fill:var(--aqua); }
.app-copy > p { margin-top:22px; }
.app-benefits { display:grid; gap:11px; margin:26px 0; }
.app-benefits span { color:#c6d9e1; font-size:14px; }
.app-benefits i { display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;margin-right:9px;background:rgba(84,215,230,.13);color:var(--aqua);font-style:normal;font-size:11px; }
.download-card { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:15px; text-decoration:none; padding:15px; border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,167,215,.06)); border:1px solid rgba(84,215,230,.22); transition:.25s; max-width:520px; box-shadow:0 20px 45px rgba(0,0,0,.16); }
.download-card:hover { transform:translateY(-3px); border-color:rgba(84,215,230,.55); }
.download-card img { width:64px;height:64px;object-fit:cover;border-radius:17px; }
.download-card span { display:grid; gap:2px; min-width:0; }
.download-card small { font-size:9px; letter-spacing:.12em; color:var(--cyan-2); font-weight:850; }
.download-card strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.download-card em { color:#9eb5c0; font-size:12px; font-style:normal; }
.download-card b { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(84,215,230,.12);color:var(--cyan-2);font-size:20px; }
.apk-note { font-size:11px !important; color:#819aa6 !important; max-width:500px; }
.phone-showcase { position:relative; min-height:650px; display:grid; place-items:center; }
.phone { position:absolute; width:min(43vw,330px); padding:8px; border-radius:42px; background:linear-gradient(145deg,#192934,#061017); box-shadow:0 40px 80px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.16); overflow:hidden; }
.phone img { width:100%; height:auto; display:block; border-radius:35px; }
.phone-notch { position:absolute; width:94px;height:24px;background:#030607;border-radius:0 0 16px 16px;left:50%;transform:translateX(-50%);top:8px;z-index:3; }
.phone-front { transform:translate(70px,12px) rotate(3deg); z-index:3; }
.phone-back { transform:translate(-92px,22px) rotate(-8deg) scale(.92); z-index:2; opacity:.86; filter:saturate(.88); }
.showcase-orbit { position:absolute;border-radius:50%;border:1px solid rgba(84,215,230,.13); }
.orbit-one { width:500px;height:500px;animation:spin 18s linear infinite; }
.orbit-two { width:390px;height:390px;border-style:dashed;animation:spin 25s linear infinite reverse; }
.phone-showcase::before { content:""; position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(0,167,215,.23),transparent 66%);filter:blur(10px); }

.cta { margin-top:15px; margin-bottom:100px; min-height:235px; border-radius:34px; padding-top:46px; padding-bottom:46px; display:flex;align-items:center;justify-content:space-between;gap:30px; background:linear-gradient(125deg,rgba(38,24,82,.7),rgba(8,120,142,.3));border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 80px rgba(0,0,0,.25);position:relative;overflow:hidden; }
.cta::before { content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(84,215,230,.13);right:-60px;top:-120px;filter:blur(2px); }
.cta > * { position:relative;z-index:1; }
.cta h2 { max-width:720px;font-size:clamp(32px,3.8vw,52px); }

.site-footer { max-width:1280px;margin:0 auto;padding:35px clamp(24px,6vw,72px) 50px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:30px;color:#78939f;font-size:12px; }
.footer-brand { display:flex;align-items:center;gap:12px;color:#d9e8ee; }
.footer-brand img { width:44px;height:44px;object-fit:cover;border-radius:13px; }
.footer-brand div { display:grid;gap:3px; }
.footer-brand span { color:#78939f;font-size:10px; }

.floating-player { position:fixed;z-index:100;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%,130%);width:min(calc(100% - 28px),930px);min-height:76px;padding:10px 12px 10px 10px;border-radius:24px;background:rgba(5,24,36,.89);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.52);backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .25s; }
.floating-player.visible { transform:translate(-50%,0); }
.floating-player.is-playing { border-color:rgba(84,215,230,.34); }
.floating-left { display:flex;align-items:center;gap:12px;min-width:0; }
.floating-left img { width:54px;height:54px;object-fit:cover;border-radius:16px;box-shadow:0 9px 22px rgba(0,0,0,.25); }
.floating-meta { display:grid;gap:3px;min-width:0; }
.floating-meta small { display:flex;align-items:center;gap:7px;color:#8eb0bd;font-size:9px;font-weight:850;letter-spacing:.08em;white-space:nowrap; }
.floating-meta small i { width:6px;height:6px;box-shadow:none;animation:none; }
.floating-meta strong { max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px; }
.floating-controls { display:flex;align-items:center;gap:10px; }
.mini-control { width:40px;height:40px;border:0;border-radius:13px;background:rgba(255,255,255,.06);color:#ddecf1;cursor:pointer;font-size:17px; }
.floating-play { width:51px;height:51px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--aqua),var(--cyan));color:#06202c;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,167,215,.3);font-weight:900; }
.floating-play span { margin-left:2px; }
.volume-wrap { display:flex;align-items:center;gap:8px;padding:0 10px;color:#8ea9b5; }
.volume-wrap input { width:115px;accent-color:var(--cyan-2); }

.welcome-modal { position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:22px;opacity:0;pointer-events:none;transition:.35s; }
.welcome-modal.open { opacity:1;pointer-events:auto; }
.modal-backdrop { position:absolute;inset:0;background:rgba(2,10,16,.78);backdrop-filter:blur(16px); }
.modal-card { position:relative;width:min(100%,480px);padding:38px 34px 28px;border-radius:34px;background:linear-gradient(150deg,rgba(12,48,63,.97),rgba(18,27,52,.98));border:1px solid rgba(255,255,255,.16);box-shadow:0 50px 120px rgba(0,0,0,.64);text-align:center;overflow:hidden;transform:translateY(18px) scale(.97);transition:.35s cubic-bezier(.2,.8,.2,1); }
.welcome-modal.open .modal-card { transform:translateY(0) scale(1); }
.modal-card::before { content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(0,167,215,.22);filter:blur(30px);top:-130px;left:-90px; }
.modal-minimize { position:absolute;right:15px;top:15px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:white;font-size:23px;cursor:pointer;z-index:3; }
.modal-brand-ring { width:126px;height:126px;margin:0 auto 20px;position:relative; }
.modal-brand-ring img { width:100%;height:100%;object-fit:cover;border-radius:30px;position:relative;z-index:2;box-shadow:0 18px 42px rgba(0,0,0,.35); }
.modal-brand-ring span { position:absolute;inset:-9px;border-radius:37px;border:1px solid rgba(84,215,230,.34);animation:ring 2.5s ease-in-out infinite; }
.modal-card .live-pill { margin:0 auto 17px; }
.modal-card h2 { margin:0;font-size:clamp(30px,6vw,42px);line-height:1.06;letter-spacing:-.03em; }
.modal-card p { color:var(--muted);line-height:1.65;font-size:14px;margin:18px auto 22px;max-width:380px; }
.modal-play { width:100%; }
.text-button { margin-top:11px;border:0;background:transparent;color:#98b3be;cursor:pointer;padding:10px;font-size:12px; }
.text-button:hover { color:#fff; }
.modal-secure { margin-top:12px;padding-top:16px;border-top:1px solid var(--line);color:#7899a7;font-size:10px; }

.android-prompt { position:fixed;z-index:130;left:50%;top:calc(var(--header-h) + 12px);transform:translate(-50%, calc(-100% - 32px));opacity:0;pointer-events:none;width:min(calc(100% - 26px),720px);display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px;padding:12px 14px;border-radius:20px;background:rgba(6,30,43,.96);border:1px solid rgba(84,215,230,.27);box-shadow:0 22px 55px rgba(0,0,0,.43);backdrop-filter:blur(20px);transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.android-prompt.show { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.android-prompt img { width:52px;height:52px;border-radius:15px;object-fit:cover; }
.android-prompt div { display:grid;gap:2px;min-width:0; }
.android-prompt small { color:var(--cyan-2);font-size:9px;letter-spacing:.12em;font-weight:900; }
.android-prompt strong { font-size:13px; }
.android-prompt span { color:#87a7b4;font-size:11px; }
.android-prompt > a { padding:11px 14px;border-radius:13px;background:linear-gradient(135deg,var(--aqua),var(--cyan-2));color:#05202d;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap; }
.android-close { position:absolute;right:-8px;top:-8px;width:25px;height:25px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:#102b38;color:white;cursor:pointer; }

.toast { position:fixed;z-index:220;left:50%;bottom:112px;transform:translate(-50%,30px);padding:12px 15px;border-radius:14px;background:rgba(8,29,42,.96);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.35);color:#dcebf1;font-size:12px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis; }
.toast.show { opacity:1;transform:translate(-50%,0); }

.reveal { opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1;transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }

@keyframes drift { to { transform:translate3d(70px,-50px,0) scale(1.08); } }
@keyframes twinkle { 0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.8;transform:scale(1.2)} }
@keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(55,227,142,0),0 0 18px rgba(55,227,142,.5); } 100% { box-shadow:0 0 0 0 rgba(55,227,142,0); } }
@keyframes cardFloat { 0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-10px) rotateX(1deg)} }
@keyframes ring { 0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.035);opacity:.22} }
@keyframes eq { from{height:9px}to{height:39px} }
@keyframes scrollDot { 0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(18px);opacity:0} }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 980px) {
  :root { --header-h: 76px; }
  .desktop-nav { display:none; }
  .menu-button { display:flex; }
  .hero { grid-template-columns:1fr; text-align:center; padding-top:calc(var(--header-h) + 60px); gap:64px; }
  .hero-copy { display:flex;flex-direction:column;align-items:center; }
  .hero-text { max-width:760px; }
  .trust-row { justify-content:center; }
  .hero-visual { padding-bottom:40px; }
  .scroll-cue { display:none; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .app-section { grid-template-columns:1fr; }
  .app-copy { max-width:700px; }
  .phone-showcase { min-height:610px; }
  .phone { width:min(50vw,310px); }
  .cta { flex-direction:column;align-items:flex-start; }
}

@media (max-width: 680px) {
  body { padding-bottom:95px; }
  .site-header { padding:0 17px; }
  .brand img { width:43px;height:43px;border-radius:13px; }
  .brand-copy strong { font-size:13px; }
  .brand-copy small { display:none; }
  .hero { padding-left:20px;padding-right:20px;padding-bottom:70px; }
  .hero h1 { font-size:clamp(40px,12vw,58px); }
  .hero-text { font-size:15px;line-height:1.65; }
  .hero-actions { width:100%; }
  .primary-button,.secondary-button { width:100%; }
  .secondary-button { justify-content:center; }
  .trust-row { gap:9px 14px;font-size:10px; }
  .radio-card { padding:22px;border-radius:31px; }
  .station-cover-wrap { width:min(100%,280px); }
  .features { padding-top:85px;padding-bottom:85px; }
  .section-heading h2,.app-copy h2,.cta h2 { font-size:clamp(32px,10vw,44px); }
  .app-section { padding-top:65px;padding-bottom:95px; }
  .download-card { grid-template-columns:56px 1fr auto; }
  .download-card img { width:56px;height:56px; }
  .download-card strong { font-size:12px; }
  .phone-showcase { min-height:510px; }
  .phone { width:min(68vw,275px);border-radius:35px; }
  .phone img { border-radius:29px; }
  .phone-notch { top:8px;width:80px;height:20px; }
  .phone-front { transform:translate(39px,3px) rotate(3deg); }
  .phone-back { transform:translate(-58px,17px) rotate(-8deg) scale(.9); }
  .orbit-one { width:360px;height:360px; }
  .orbit-two { width:290px;height:290px; }
  .cta { margin-left:18px;margin-right:18px;border-radius:28px;padding:35px 24px; }
  .site-footer { flex-direction:column;align-items:flex-start;padding-bottom:38px; }

  .floating-player { min-height:68px;border-radius:21px;padding:8px;gap:8px; }
  .floating-left img { width:48px;height:48px;border-radius:14px; }
  .floating-meta small { font-size:8px; }
  .floating-meta strong { max-width:145px;font-size:12px; }
  .floating-controls { gap:5px; }
  .mini-control { display:none; }
  .floating-play { width:47px;height:47px; }
  .volume-wrap { display:none; }
  .toast { bottom:96px; }

  .modal-card { padding:31px 22px 23px;border-radius:28px; }
  .modal-brand-ring { width:108px;height:108px; }
  .modal-card p { font-size:13px; }
  .android-prompt { grid-template-columns:46px 1fr; padding:11px; top:82px; }
  .android-prompt img { width:46px;height:46px; }
  .android-prompt > a { grid-column:1/-1;text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}