:root {
  color-scheme: dark;
  --bg: #050713;
  --bg-soft: #0a0d1c;
  --panel: rgba(13, 17, 34, 0.72);
  --panel-strong: rgba(14, 18, 38, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f8f9ff;
  --muted: #9da7c5;
  --muted-2: #707a9a;
  --cyan: #30d8ff;
  --blue: #4485ff;
  --violet: #7c4dff;
  --magenta: #d85cff;
  --green: #58e6a9;
  --danger: #ff6685;
  --gradient: linear-gradient(135deg, #d85cff 0%, #7c4dff 32%, #3f7dff 64%, #30d8ff 100%);
  --gradient-soft: linear-gradient(135deg, rgba(216, 92, 255, 0.18), rgba(48, 216, 255, 0.12));
  --shadow-glow: 0 0 42px rgba(80, 111, 255, 0.22), 0 0 80px rgba(216, 92, 255, 0.12);
  --radius-sm: 18px;
  --radius: 28px;
  --radius-lg: 40px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(99, 63, 255, 0.12), transparent 30%),
    radial-gradient(circle at 88% 15%, rgba(48, 216, 255, 0.09), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(216, 92, 255, 0.08), transparent 32%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(124, 77, 255, .38); color: white; }

#ambientCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
  opacity: .9;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
}

.container { width: min(var(--container), calc(100% - 36px)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }
.section-tight { padding: 72px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #d9ddf0;
  backdrop-filter: blur(18px);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 14px rgba(85, 168, 255, .9);
}
.section-title {
  max-width: 840px;
  margin: 20px 0 0;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(38px, 5.3vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
}
.section-copy {
  max-width: 680px;
  margin: 22px 0 0;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  color: var(--muted);
}
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 24px));
  height: 68px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px 0 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: rgba(7, 9, 22, .72);
  box-shadow: 0 14px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(22px) saturate(150%);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.topbar.scrolled { border-color: rgba(117, 147, 255, .21); background: rgba(7, 9, 22, .88); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 160px; }
.brand img { width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(83, 135, 255, .35)); }
.brand strong { font-family: Manrope, sans-serif; font-size: 16px; letter-spacing: .06em; }
.brand small { color: var(--muted-2); display: block; font-size: 9px; letter-spacing: .18em; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 13px;
  border-radius: 12px;
  color: #b5bdd7;
  font-size: 13px;
  font-weight: 600;
  transition: color .2s ease, background .2s ease;
}
.nav a:hover { color: white; background: rgba(255,255,255,.055); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: white;
  cursor: pointer;
}
.mobile-menu {
  position: fixed;
  top: 90px;
  left: 12px;
  right: 12px;
  z-index: 58;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(7, 9, 22, .95);
  backdrop-filter: blur(24px);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a, .mobile-menu button { display: block; width: 100%; padding: 13px; text-align: left; border-radius: 12px; }
.mobile-menu a:hover { background: rgba(255,255,255,.05); }

.btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  color: white;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.23), transparent 72%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gradient); box-shadow: 0 12px 34px rgba(83, 86, 255, .28); }
.btn-primary:hover { box-shadow: 0 18px 48px rgba(83, 86, 255, .38); }
.btn-secondary { border: 1px solid var(--line-strong); background: rgba(255,255,255,.045); backdrop-filter: blur(16px); }
.btn-secondary:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.25); }
.btn-ghost { background: transparent; color: #c6cde3; }
.btn-sm { min-height: 40px; padding-inline: 14px; font-size: 13px; border-radius: 12px; }
.btn-full { width: 100%; }
.btn-danger { background: rgba(255, 102, 133, .12); border: 1px solid rgba(255,102,133,.25); color: #ff9db1; }

.hero {
  min-height: 100svh;
  padding: 142px 0 70px;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 8% 0 auto 50%;
  transform: translateX(-50%);
  width: min(1080px, 90vw);
  height: 560px;
  background: radial-gradient(circle, rgba(98, 78, 255, .18), transparent 65%);
  filter: blur(10px);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.07fr .93fr;
  align-items: center;
  gap: 40px;
}
.hero h1 {
  margin: 20px 0 0;
  max-width: 760px;
  font-family: Manrope, sans-serif;
  font-size: clamp(49px, 7vw, 88px);
  line-height: .92;
  letter-spacing: -.064em;
}
.hero-copy { margin: 25px 0 0; max-width: 650px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.avatar-stack { display: flex; }
.avatar-stack span {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216,92,255,.75), rgba(48,216,255,.7));
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.avatar-stack span:first-child { margin-left: 0; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #aeb8d5;
  background: rgba(255,255,255,.03);
  font-size: 12px;
}
.logo-stage {
  min-height: 600px;
  display: grid;
  place-items: center;
  perspective: 1200px;
  position: relative;
}
.logo-stage::after {
  content: "";
  position: absolute;
  bottom: 12%;
  width: 56%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(59, 108, 255, .30), transparent 68%);
  filter: blur(15px);
  transform: rotateX(72deg);
}
.orbit {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(101, 139, 255, .16);
  transform: rotateX(65deg) rotateZ(8deg);
  box-shadow: inset 0 0 60px rgba(74, 92, 255, .08), 0 0 80px rgba(83, 95, 255, .06);
}
.orbit::before, .orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #79e7ff;
  box-shadow: 0 0 20px #79e7ff;
  animation: orbitDot 7s linear infinite;
}
.orbit::after { background: #d47aff; box-shadow: 0 0 20px #d47aff; animation-delay: -3.5s; }
.logo-shell {
  width: min(510px, 87vw);
  aspect-ratio: 1.02;
  transform-style: preserve-3d;
  position: relative;
  animation: logoFloat 6s ease-in-out infinite;
  will-change: transform;
}
.logo-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.logo-depth-3 { transform: translateZ(-36px) translate(16px, 20px); opacity: .10; filter: blur(3px) saturate(1.25); }
.logo-depth-2 { transform: translateZ(-22px) translate(10px, 13px); opacity: .16; filter: blur(2px) hue-rotate(10deg); }
.logo-depth-1 { transform: translateZ(-10px) translate(5px, 6px); opacity: .25; filter: blur(1px); }
.logo-main { transform: translateZ(28px); filter: drop-shadow(0 0 24px rgba(64, 138, 255, .35)) drop-shadow(0 0 42px rgba(187, 73, 255, .18)); }
.logo-glass {
  position: absolute;
  inset: 8%;
  border-radius: 42%;
  transform: translateZ(45px);
  background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(66,210,255,.06));
  mask: radial-gradient(circle at center, black 32%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.float-card {
  position: absolute;
  min-width: 170px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: rgba(11, 14, 31, .72);
  backdrop-filter: blur(18px);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  animation: cardFloat 5.4s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 13px; }
.float-card small { color: var(--muted); font-size: 11px; }
.float-card.one { left: -4%; top: 24%; }
.float-card.two { right: -2%; top: 52%; animation-delay: -2.3s; }
.float-card .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(88,230,169,.8); display: inline-block; margin-right: 8px; }

.tech-marquee { overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.018); }
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee-item { display: flex; align-items: center; gap: 10px; padding: 20px 30px; color: #aab4d2; font-size: 13px; font-weight: 700; white-space: nowrap; }
.marquee-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 12px rgba(79,161,255,.8); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.stat-card {
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.046), rgba(255,255,255,.018));
  position: relative;
  overflow: hidden;
}
.stat-card::before { content: ""; position: absolute; inset: auto -20% -60% 20%; height: 120px; background: radial-gradient(circle, rgba(85,102,255,.23), transparent 67%); }
.stat-card strong { display: block; font-size: clamp(30px,4vw,48px); font-family: Manrope,sans-serif; letter-spacing: -.04em; }
.stat-card span { color: var(--muted); font-size: 13px; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 48px; }
.bento-card {
  grid-column: span 4;
  min-height: 270px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.bento-card:hover { transform: translateY(-6px); border-color: rgba(104,140,255,.3); background: linear-gradient(160deg, rgba(255,255,255,.072), rgba(255,255,255,.022)); }
.bento-card.wide { grid-column: span 8; }
.bento-card.large { grid-column: span 7; min-height: 340px; }
.bento-card.side { grid-column: span 5; min-height: 340px; }
.feature-icon {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12); background: var(--gradient-soft); box-shadow: inset 0 1px rgba(255,255,255,.08);
  font-size: 21px;
}
.bento-card h3 { margin: 22px 0 8px; font-family: Manrope,sans-serif; font-size: 22px; letter-spacing: -.025em; }
.bento-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; max-width: 510px; }
.bento-tag { position: absolute; right: 18px; top: 18px; padding: 7px 9px; border-radius: 999px; border: 1px solid var(--line); color: #aeb8d6; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mini-wave { position: absolute; right: 18px; bottom: 18px; left: 18px; height: 72px; display: flex; align-items: center; gap: 4px; opacity: .7; }
.mini-wave i { flex: 1; border-radius: 8px; background: var(--gradient); animation: wave 1.8s ease-in-out infinite; transform-origin: center; }
.mini-wave i:nth-child(2n) { animation-delay: -.3s; }
.mini-wave i:nth-child(3n) { animation-delay: -.7s; }
.scene-stack { position: absolute; right: 20px; bottom: 14px; width: 46%; height: 60%; }
.scene-card { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(135deg, rgba(114,74,255,.22), rgba(26,191,255,.11)); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.scene-card:nth-child(1) { transform: translate(-44px, 20px) rotate(-7deg); opacity: .4; }
.scene-card:nth-child(2) { transform: translate(-23px, 10px) rotate(-3deg); opacity: .65; }
.scene-card:nth-child(3) { display:grid;place-items:center; overflow:hidden; }
.scene-card:nth-child(3)::before { content:""; width:90px;height:90px;border-radius:30px;background:var(--gradient);filter:blur(2px);animation:scenePulse 4s ease-in-out infinite; }

.pipeline-wrap { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.023); overflow: hidden; }
.pipeline { display: grid; grid-template-columns: repeat(7, 1fr); }
.step { min-height: 180px; padding: 22px 18px; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: 0; }
.step::after { content:""; position:absolute; top:50%; right:-5px; width:9px;height:9px;border-radius:50%; background:#4c8eff; box-shadow:0 0 16px rgba(68,133,255,.8); z-index:2; }
.step:last-child::after { display:none; }
.step-num { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.step-icon { margin-top: 25px; font-size: 24px; }
.step strong { display:block; margin-top:14px; font-size:13px; }
.step small { display:block; margin-top:7px; color:var(--muted); font-size:11px; line-height:1.5; }

.app-preview { margin-top: 50px; border: 1px solid rgba(255,255,255,.11); border-radius: 28px; background: #0a0d1c; box-shadow: 0 45px 120px rgba(0,0,0,.45), var(--shadow-glow); overflow: hidden; transform: perspective(1400px) rotateX(4deg); transform-origin: center top; }
.app-top { height: 52px; display:flex;align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.022); }
.app-top i { width:9px;height:9px;border-radius:50%;background:#ff6685; }
.app-top i:nth-child(2){background:#ffd16a}.app-top i:nth-child(3){background:#58e6a9}
.app-top span { margin-left:auto;margin-right:auto;color:#7f88a5;font-size:11px; }
.app-body { min-height: 560px; display:grid; grid-template-columns:220px 1fr; }
.app-side { padding:18px 12px;border-right:1px solid var(--line);background:rgba(255,255,255,.012); }
.app-logo { display:flex;align-items:center;gap:9px;padding:10px 11px 20px; }
.app-logo img{width:30px;height:30px}.app-logo strong{font-size:12px;letter-spacing:.08em}
.app-nav-item { display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:#8f99b8;font-size:12px;margin-bottom:4px; }
.app-nav-item.active { color:white;background:linear-gradient(90deg,rgba(124,77,255,.22),rgba(48,216,255,.08));border:1px solid rgba(112,114,255,.17); }
.app-main { padding:28px; background: radial-gradient(circle at 78% 13%, rgba(67,91,255,.11), transparent 26%); }
.app-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.app-head h3{margin:0;font-size:20px}.app-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.app-grid { display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:22px; }
.app-panel { padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);min-height:170px; }
.app-panel h4{margin:0;font-size:12px}.fake-input{margin-top:15px;height:52px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.17);display:flex;align-items:center;padding:0 14px;color:#717c9d;font-size:11px}
.progress-list{display:grid;gap:10px;margin-top:16px}.progress-row{display:grid;grid-template-columns:90px 1fr 34px;gap:10px;align-items:center;font-size:10px;color:#9ba5c4}.progress-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.progress-bar i{display:block;height:100%;border-radius:99px;background:var(--gradient);animation:progressLoop 3s ease-in-out infinite}.preview-frame{height:220px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,#171a35,#11182b 55%,#12243a);display:grid;place-items:center;position:relative;overflow:hidden}.preview-frame::before{content:"";width:130px;height:130px;border-radius:36px;background:var(--gradient);filter:blur(1px);animation:previewTurn 8s ease-in-out infinite}.preview-frame::after{content:"AI VIDEO";position:absolute;bottom:15px;left:15px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:rgba(5,7,19,.6);font-size:9px;letter-spacing:.12em}

.results-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px; }
.result-card { border:1px solid var(--line);border-radius:22px;padding:22px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));position:relative;overflow:hidden; }
.result-card::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(73,103,255,.19),transparent 70%);right:-60px;bottom:-60px}.result-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:800}.result-value{font-family:Manrope,sans-serif;font-size:38px;font-weight:800;margin-top:16px;letter-spacing:-.05em}.result-card p{color:var(--muted);font-size:12px;line-height:1.6;margin:8px 0 0}

.pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:48px;align-items:stretch; }
.price-card { padding:25px;border:1px solid var(--line);border-radius:25px;background:linear-gradient(165deg,rgba(255,255,255,.052),rgba(255,255,255,.016));position:relative;display:flex;flex-direction:column; }
.price-card.featured { border-color:rgba(103,104,255,.42);box-shadow:0 30px 80px rgba(62,50,255,.16);transform:translateY(-10px);background:linear-gradient(165deg,rgba(93,72,255,.12),rgba(255,255,255,.023)); }
.price-badge{position:absolute;top:14px;right:14px;padding:7px 10px;border-radius:999px;background:var(--gradient);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.price-card h3{font-size:18px;margin:0}.price{font-family:Manrope,sans-serif;font-size:52px;font-weight:800;letter-spacing:-.06em;margin-top:22px}.price small{font-family:Inter,sans-serif;font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}.price-note{color:var(--muted);font-size:12px;margin-top:6px}.price-list{list-style:none;padding:0;margin:25px 0;display:grid;gap:11px;flex:1}.price-list li{display:flex;align-items:flex-start;gap:10px;color:#c7cee3;font-size:13px;line-height:1.45}.price-list li::before{content:"✓";color:var(--green);font-weight:800}

.faq { margin-top:42px;display:grid;gap:10px; }
.faq-item { border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025);overflow:hidden; }
.faq-btn { width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 20px;background:transparent;border:0;color:white;text-align:left;cursor:pointer;font-weight:700; }
.faq-btn span:last-child{font-size:20px;color:var(--muted);transition:transform .25s ease}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-answer p{margin:0;padding:0 20px 20px;color:var(--muted);font-size:14px;line-height:1.7}.faq-item.open .faq-answer{max-height:180px}.faq-item.open .faq-btn span:last-child{transform:rotate(45deg)}

.cta-box { padding:50px;border:1px solid rgba(255,255,255,.11);border-radius:32px;background:linear-gradient(135deg,rgba(124,77,255,.15),rgba(48,216,255,.06));position:relative;overflow:hidden; }
.cta-box::before{content:"";position:absolute;inset:-50% 45% -80% -10%;background:radial-gradient(circle,rgba(216,92,255,.22),transparent 62%);filter:blur(10px)}.cta-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-box h2{font-family:Manrope,sans-serif;font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-.055em;margin:0;max-width:730px}.cta-box p{margin:16px 0 0;color:var(--muted);max-width:650px;line-height:1.65}

.footer { padding:34px 0 46px;border-top:1px solid var(--line); }.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer p{color:var(--muted-2);font-size:12px}.footer-links{display:flex;gap:16px;color:var(--muted);font-size:12px}

.reveal { opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1); }.reveal.visible{opacity:1;transform:none}.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}

/* Auth */
.auth-page { min-height:100svh;display:grid;grid-template-columns:1fr 1fr; }
.auth-visual { position:relative;overflow:hidden;display:grid;place-items:center;padding:80px;background:radial-gradient(circle at 48% 40%,rgba(99,72,255,.22),transparent 45%),#060817; }
.auth-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,7,19,.85));pointer-events:none}.auth-logo-scene{width:min(520px,80%);position:relative;z-index:1;animation:logoFloat 6s ease-in-out infinite;filter:drop-shadow(0 0 40px rgba(86,114,255,.28))}.auth-quote{position:absolute;left:58px;bottom:55px;z-index:2;max-width:520px}.auth-quote h2{font-family:Manrope,sans-serif;font-size:40px;line-height:1.05;letter-spacing:-.04em;margin:0}.auth-quote p{color:var(--muted);line-height:1.6}.auth-panel{display:grid;place-items:center;padding:84px 32px;background:rgba(6,8,20,.72)}.auth-card{width:min(440px,100%)}.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:38px}.auth-brand img{width:38px;height:38px}.auth-brand strong{font-family:Manrope,sans-serif;letter-spacing:.06em}.auth-card h1{font-family:Manrope,sans-serif;font-size:38px;letter-spacing:-.045em;margin:0}.auth-card>p{color:var(--muted);line-height:1.6;margin:11px 0 28px}.form{display:grid;gap:15px}.field label{display:block;font-size:12px;font-weight:700;color:#cbd1e5;margin-bottom:8px}.field input{width:100%;height:52px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.028);color:white;padding:0 15px;outline:none;transition:border-color .2s,box-shadow .2s}.field input:focus{border-color:rgba(86,123,255,.58);box-shadow:0 0 0 4px rgba(74,96,255,.09)}.form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted)}.checkbox input{accent-color:#7c4dff}.text-link{color:#8ccfff;cursor:pointer}.auth-switch{text-align:center;margin-top:22px;color:var(--muted);font-size:13px}.auth-back{position:fixed;left:22px;top:22px;z-index:10}.message-box{padding:15px;border:1px solid rgba(85,201,255,.22);border-radius:14px;background:rgba(48,216,255,.06);color:#c8f3ff;font-size:13px;line-height:1.55;margin-bottom:18px}.error-box{border-color:rgba(255,102,133,.25);background:rgba(255,102,133,.06);color:#ffc0ce}

/* Dashboard */
.dashboard { min-height:100svh;display:grid;grid-template-columns:250px 1fr; }
.dash-sidebar{position:sticky;top:0;height:100svh;padding:18px 14px;border-right:1px solid var(--line);background:rgba(6,8,20,.86);backdrop-filter:blur(22px);z-index:20}.dash-brand{display:flex;align-items:center;gap:10px;padding:10px 10px 24px}.dash-brand img{width:36px;height:36px}.dash-brand strong{font-family:Manrope,sans-serif;font-size:13px;letter-spacing:.08em}.dash-nav{display:grid;gap:5px}.dash-link{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;color:#929cbb;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent}.dash-link:hover{background:rgba(255,255,255,.035);color:white}.dash-link.active{color:white;background:linear-gradient(90deg,rgba(124,77,255,.18),rgba(48,216,255,.06));border-color:rgba(107,112,255,.16)}.dash-footer{position:absolute;left:14px;right:14px;bottom:17px}.user-mini{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}.user-avatar{width:36px;height:36px;border-radius:12px;background:var(--gradient);display:grid;place-items:center;font-weight:800}.user-mini strong{display:block;font-size:12px}.user-mini small{display:block;color:var(--muted);font-size:10px;margin-top:3px;white-space:nowrap;max-width:145px;overflow:hidden;text-overflow:ellipsis}.dash-main{min-width:0}.dash-top{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(5,7,19,.5);backdrop-filter:blur(18px);position:sticky;top:0;z-index:12}.dash-title strong{display:block;font-size:15px}.dash-title small{color:var(--muted);font-size:11px}.dash-actions{display:flex;gap:9px}.dash-content{padding:28px}.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.dash-card{grid-column:span 4;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.018));padding:20px}.dash-card.wide{grid-column:span 8}.dash-card.full{grid-column:1/-1}.dash-card.half{grid-column:span 6}.dash-label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);font-weight:800}.dash-value{font-family:Manrope,sans-serif;font-size:29px;font-weight:800;margin-top:12px;letter-spacing:-.04em}.dash-sub{color:var(--muted);font-size:11px;margin-top:6px}.subscription-hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;background:linear-gradient(135deg,rgba(109,72,255,.16),rgba(48,216,255,.05));position:relative;overflow:hidden}.subscription-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(75,146,255,.18),transparent 68%);right:-60px;top:-80px}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;border:1px solid rgba(88,230,169,.24);background:rgba(88,230,169,.07);color:#93f0c4;font-size:11px;font-weight:700}.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 11px rgba(88,230,169,.8)}.days-ring{width:105px;height:105px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#5f7cff 0 72%,rgba(255,255,255,.06) 72%);position:relative;z-index:1}.days-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#0b0f21}.days-ring span{position:relative;text-align:center;font-size:10px;color:var(--muted)}.days-ring strong{display:block;color:white;font-size:24px}.table-wrap{overflow:auto;margin-top:14px}.data-table{width:100%;border-collapse:collapse;min-width:650px}.data-table th,.data-table td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);font-size:12px}.data-table th{color:var(--muted-2);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.data-table td{color:#cbd1e5}.device-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.device-row:last-child{border-bottom:0}.device-info{display:flex;align-items:center;gap:12px}.device-icon{width:42px;height:42px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.03)}.device-info strong{display:block;font-size:12px}.device-info small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.dash-mobile-toggle{display:none}

.toast-root{position:fixed;right:18px;bottom:18px;z-index:100;display:grid;gap:9px}.toast{min-width:260px;max-width:390px;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:rgba(10,13,29,.94);box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(20px);font-size:12px;line-height:1.5;animation:toastIn .25s ease}.toast.success{border-color:rgba(88,230,169,.24)}.toast.error{border-color:rgba(255,102,133,.28)}

@keyframes logoFloat { 0%,100%{transform:translateY(0) rotateX(1deg) rotateY(-2deg)}50%{transform:translateY(-16px) rotateX(-2deg) rotateY(3deg)} }
@keyframes cardFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes orbitDot { from{left:10%;top:48%}25%{left:48%;top:0}50%{left:90%;top:48%}75%{left:48%;top:95%}to{left:10%;top:48%} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes wave { 0%,100%{height:12%}50%{height:88%} }
@keyframes scenePulse { 0%,100%{transform:rotate(0) scale(.92);border-radius:34px}50%{transform:rotate(45deg) scale(1.07);border-radius:50%} }
@keyframes progressLoop { 0%{width:22%}50%{width:92%}100%{width:45%} }
@keyframes previewTurn { 0%,100%{transform:rotate(-8deg) scale(.92);border-radius:35px}50%{transform:rotate(36deg) scale(1.04);border-radius:50%} }
@keyframes toastIn { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }

@media (max-width: 980px) {
  .nav { display:none; }
  .nav-actions .btn-ghost { display:none; }
  .mobile-toggle { display:grid;place-items:center; }
  .hero-grid { grid-template-columns:1fr; }
  .hero { padding-top:130px; }
  .hero-copy { max-width:760px; }
  .logo-stage { min-height:520px; }
  .float-card.one{left:6%}.float-card.two{right:6%}
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .bento-card,.bento-card.wide,.bento-card.large,.bento-card.side{grid-column:span 6}.pipeline{grid-template-columns:repeat(4,1fr)}.step:nth-child(4){border-right:0}.step:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .results-grid,.pricing-grid{grid-template-columns:1fr 1fr}.price-card:last-child{grid-column:1/-1}.app-body{grid-template-columns:180px 1fr}.app-grid{grid-template-columns:1fr}.cta-content{align-items:flex-start;flex-direction:column}
  .auth-page{grid-template-columns:1fr}.auth-visual{display:none}
  .dashboard{grid-template-columns:88px 1fr}.dash-sidebar{padding-inline:10px}.dash-brand strong,.dash-link span,.user-mini>div:not(.user-avatar){display:none}.dash-brand{justify-content:center}.dash-link{justify-content:center;font-size:18px}.dash-footer{left:10px;right:10px}.user-mini{justify-content:center;padding:10px}.dash-card{grid-column:span 6}.dash-card.wide{grid-column:span 12}
}

@media (max-width: 680px) {
  .container { width:min(100% - 24px,var(--container)); }
  .section { padding:82px 0; }
  .topbar{height:62px;border-radius:18px;top:9px}.brand{min-width:auto}.brand small{display:none}.brand strong{font-size:14px}.brand img{width:32px;height:32px}.nav-actions .btn-primary{display:none}
  .hero{padding:112px 0 54px;min-height:auto}.hero::after{content:"";position:absolute;top:92px;right:-86px;width:300px;height:300px;background:url('./src/assets/toka-icon-transparent.webp') center/contain no-repeat;opacity:.10;filter:blur(.2px) drop-shadow(0 0 28px rgba(83,117,255,.35));pointer-events:none;z-index:-1}.hero h1{font-size:clamp(46px,15vw,68px)}.hero-copy{font-size:16px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-proof{align-items:flex-start;flex-direction:column;gap:10px}.hero-chips{margin-top:22px}.chip{font-size:10px}.logo-stage{min-height:420px;margin-top:10px}.logo-shell{width:min(400px,94vw)}.orbit{width:88%}.float-card{min-width:145px;padding:11px 12px}.float-card.one{left:0;top:22%}.float-card.two{right:0;top:60%}.float-card strong{font-size:11px}.float-card small{font-size:9px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:18px}.stat-card span{font-size:11px}
  .bento{gap:10px}.bento-card,.bento-card.wide,.bento-card.large,.bento-card.side{grid-column:1/-1;min-height:240px}.scene-stack{width:55%;opacity:.75}.pipeline{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)!important}.step:nth-child(2n){border-right:0}.step:last-child{grid-column:1/-1;border-bottom:0!important}.step::after{display:none}
  .app-preview{transform:none;border-radius:20px}.app-body{grid-template-columns:1fr;min-height:auto}.app-side{display:none}.app-main{padding:18px}.app-head{align-items:flex-start;flex-direction:column}.app-grid{grid-template-columns:1fr}.preview-frame{height:180px}
  .results-grid,.pricing-grid{grid-template-columns:1fr}.price-card,.price-card.featured{transform:none}.price-card:last-child{grid-column:auto}
  .cta-box{padding:30px 22px}.footer-row{align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap}
  .auth-panel{padding:90px 18px 40px}.auth-card h1{font-size:34px}.auth-back{left:12px;top:12px}
  .dashboard{display:block}.dash-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:70px;border-right:0;border-top:1px solid var(--line);padding:8px 10px;z-index:30}.dash-brand,.dash-footer{display:none}.dash-nav{grid-template-columns:repeat(5,1fr);gap:3px}.dash-link{padding:9px 5px;font-size:18px}.dash-link:nth-child(n+6){display:none}.dash-main{padding-bottom:78px}.dash-top{height:68px;padding:0 14px}.dash-actions .btn-secondary{display:none}.dash-content{padding:14px}.dash-grid{gap:10px}.dash-card,.dash-card.half,.dash-card.wide{grid-column:1/-1}.subscription-hero{align-items:flex-start}.days-ring{width:88px;height:88px}.dash-mobile-toggle{display:inline-grid}
}

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

/* ========================================================================== 
   TOKA STUDIO — PREMIUM OFFLINE BUILD V2
   Visual polish + performance-safe 3D. These overrides intentionally keep the
   site framework-free so index.html opens directly from Windows Explorer.
   ========================================================================== */
:root {
  --container: 1260px;
  --bg: #03050d;
  --panel: rgba(10, 14, 31, .68);
  --panel-strong: rgba(8, 11, 26, .9);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .19);
  --shadow-glow: 0 24px 100px rgba(36, 67, 255, .16), 0 0 82px rgba(188, 69, 255, .10);
}

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(ellipse at 15% -8%, rgba(104, 54, 255, .17), transparent 36%),
    radial-gradient(ellipse at 96% 5%, rgba(0, 193, 255, .11), transparent 32%),
    radial-gradient(ellipse at 50% 110%, rgba(190, 50, 255, .09), transparent 38%),
    #03050d;
}

.section-title, .hero h1, .price, .result-value, .cta-box h2, .auth-quote h2, .dash-value {
  font-family: "Segoe UI Variable Display", "Segoe UI", Manrope, sans-serif;
}

/* Premium boot: also makes failures visible instead of showing an empty page. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(86, 70, 255, .18), transparent 34%),
    radial-gradient(circle at 58% 40%, rgba(15, 196, 255, .10), transparent 26%),
    #03050d;
  transition: opacity .55s ease, visibility .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.boot-screen.loaded { opacity: 0; visibility: hidden; transform: scale(1.025); }
.boot-logo-wrap { width: 154px; height: 154px; display: grid; place-items: center; position: relative; }
.boot-logo-wrap img { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 0 28px rgba(63, 124, 255, .42)) drop-shadow(0 0 42px rgba(201, 75, 255, .18)); animation: bootLogo 2.4s ease-in-out infinite; }
.boot-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(126,147,255,.19); box-shadow: inset 0 0 36px rgba(90,101,255,.08), 0 0 34px rgba(67,89,255,.08); animation: bootRing 4.5s linear infinite; }
.boot-ring::before { content:""; position:absolute; left:50%; top:-4px; width:8px; height:8px; border-radius:50%; background:#57e7ff; box-shadow:0 0 18px #57e7ff; }
.boot-screen strong { margin-top: 18px; font-size: 18px; letter-spacing: .21em; }
.boot-screen small { margin-top: 8px; color: #7f89ac; font-size: 9px; letter-spacing: .28em; text-align:center; max-width:420px; }
.boot-line { width: 210px; height: 2px; margin-top: 25px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.055); }
.boot-line i { display:block; height:100%; width:42%; border-radius:inherit; background:linear-gradient(90deg,#c25bff,#645cff,#24d7ff); box-shadow:0 0 16px rgba(66,174,255,.7); animation:bootLine 1.45s ease-in-out infinite; }
.boot-error .boot-line i { background:#ff6685; animation:none; width:100%; }
.fatal-screen { position:fixed; inset:0; display:grid; place-items:center; background:#03050d; color:white; z-index:2000; padding:30px; text-align:center; }
@keyframes bootLogo { 0%,100%{transform:translateY(0) scale(.98)} 50%{transform:translateY(-7px) scale(1.02)} }
@keyframes bootRing { to{transform:rotate(360deg)} }
@keyframes bootLine { 0%{transform:translateX(-115%)} 55%,100%{transform:translateX(245%)} }

.aurora-field { position:fixed; inset:0; z-index:-4; overflow:hidden; pointer-events:none; contain:strict; }
.aurora-field i { position:absolute; border-radius:50%; filter:blur(80px); opacity:.13; transform:translateZ(0); animation:auroraMove 18s ease-in-out infinite alternate; }
.aurora-field i:nth-child(1){width:44vw;height:44vw;left:-15vw;top:8vh;background:#7043ff}
.aurora-field i:nth-child(2){width:36vw;height:36vw;right:-12vw;top:12vh;background:#00c9ff;animation-delay:-6s}
.aurora-field i:nth-child(3){width:38vw;height:38vw;left:34vw;bottom:-22vw;background:#cb45ff;animation-delay:-11s}
@keyframes auroraMove { from{transform:translate3d(-1.5%,0,0) scale(.94)} to{transform:translate3d(2.5%,2%,0) scale(1.08)} }

/* High-end navigation treatment. */
.topbar {
  top: 16px;
  width: min(1260px, calc(100% - 28px));
  height: 72px;
  padding: 0 14px 0 20px;
  border-color: rgba(255,255,255,.105);
  background: linear-gradient(180deg, rgba(10,13,29,.82), rgba(5,8,20,.70));
  box-shadow: 0 20px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025);
}
.topbar::before {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(105deg,rgba(222,100,255,.24),rgba(255,255,255,.03) 38%,rgba(44,215,255,.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.62;
}
.brand img { width: 39px; height: 39px; filter: drop-shadow(0 0 15px rgba(84, 143, 255, .42)); }
.brand strong { font-weight: 800; letter-spacing: .08em; }
.nav a { padding: 11px 15px; }
.nav a:hover { background: linear-gradient(135deg,rgba(151,82,255,.09),rgba(47,205,255,.055)); }

.btn { isolation:isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary { background:linear-gradient(105deg,#b64fff 0%,#6759ff 43%,#27cfff 100%); box-shadow:0 14px 42px rgba(92,76,255,.30),inset 0 1px 0 rgba(255,255,255,.24); }
.btn-primary::before { content:""; position:absolute; inset:1px; z-index:-1; border-radius:13px; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%); }
.btn-primary:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 22px 54px rgba(81,92,255,.39),0 0 28px rgba(31,210,255,.12); }
.btn-secondary { background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.025)); }

/* Hero: higher visual density without adding expensive video/WebGL. */
.hero { min-height: min(1040px, 100svh); padding-top: 154px; }
.hero-grid { grid-template-columns: 1.04fr .96fr; gap: 24px; }
.hero::before { width:min(1260px,96vw); height:700px; background:radial-gradient(ellipse,rgba(85,70,255,.18),transparent 66%); }
.hero::after { content:""; position:absolute; width:740px; height:740px; right:-320px; top:8%; border-radius:50%; border:1px solid rgba(71,127,255,.055); box-shadow:inset 0 0 110px rgba(60,81,255,.035); pointer-events:none; z-index:-1; }
.hero h1 { font-size:clamp(58px,6.6vw,96px); line-height:.90; font-weight:760; text-wrap:balance; text-shadow:0 12px 55px rgba(0,0,0,.22); }
.hero-copy { max-width:690px; font-size:19px; line-height:1.72; }
.eyebrow { background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.gradient-text { background:linear-gradient(100deg,#d95eff 0%,#8a63ff 31%,#477dff 62%,#2edbff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 10px 28px rgba(91,82,255,.12)); }
.hero-chips .chip { backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }

.logo-stage { min-height: 650px; perspective: 1500px; contain:layout style; }
.logo-stage::before {
  content:"";
  position:absolute;
  width:88%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(72,93,255,.16) 0 22%,rgba(107,55,255,.08) 38%,transparent 68%);
  filter:blur(5px);
  transform:translateZ(-80px);
}
.logo-stage::after { width:67%; height:12%; bottom:9%; background:radial-gradient(ellipse,rgba(54,117,255,.42),rgba(121,63,255,.14) 36%,transparent 70%); filter:blur(20px); }
.orbit { width: 82%; border-color:rgba(105,148,255,.19); box-shadow:inset 0 0 80px rgba(73,94,255,.07),0 0 100px rgba(78,81,255,.07); }
.orbit::before,.orbit::after { width:9px;height:9px; }
.logo-shell { width:min(570px,90vw); aspect-ratio:1; transition:transform .58s cubic-bezier(.2,.8,.2,1); animation:logoFloatPremium 6.4s ease-in-out infinite; contain:layout style; }
.logo-shell.is-tilting { animation:none; }
.logo-shell::before {
  content:"";
  position:absolute;
  inset:14%;
  border-radius:45%;
  background:conic-gradient(from 190deg,rgba(200,71,255,.12),rgba(52,218,255,.12),rgba(75,72,255,.12),rgba(200,71,255,.12));
  filter:blur(34px);
  transform:translateZ(-45px) scale(1.05);
  animation:logoAura 9s linear infinite;
}
.logo-shell::after {
  content:"";
  position:absolute;
  inset:8%;
  border-radius:46%;
  border:1px solid rgba(255,255,255,.035);
  transform:translateZ(-25px) rotate(12deg);
  box-shadow:inset 0 0 50px rgba(77,105,255,.055);
}
.logo-main { transform:translateZ(42px); filter:drop-shadow(0 0 18px rgba(40,203,255,.24)) drop-shadow(0 0 34px rgba(82,93,255,.40)) drop-shadow(0 0 62px rgba(197,65,255,.19)); }
.logo-depth-1 { transform:translateZ(9px) translate(5px,7px); opacity:.22; filter:blur(.8px) hue-rotate(8deg); }
.logo-depth-2 { transform:translateZ(-15px) translate(11px,15px); opacity:.13; filter:blur(2px) hue-rotate(17deg); }
.logo-depth-3 { transform:translateZ(-38px) translate(18px,25px); opacity:.075; filter:blur(4px) saturate(1.4); }
.logo-glass { inset:11%; transform:translateZ(57px); opacity:.75; }
.float-card { border-color:rgba(255,255,255,.105); background:linear-gradient(150deg,rgba(17,22,46,.80),rgba(7,10,25,.72)); box-shadow:0 26px 74px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045); }
.float-card.one { left:-2%; }
.float-card.two { right:-1%; }
@keyframes logoFloatPremium { 0%,100%{transform:translate3d(0,0,0) rotateX(1deg) rotateY(-2deg)} 50%{transform:translate3d(0,-18px,0) rotateX(-2deg) rotateY(3deg)} }
@keyframes logoAura { to{transform:translateZ(-45px) scale(1.05) rotate(360deg)} }

/* Surfaces and sections. */
.tech-marquee { background:linear-gradient(90deg,rgba(255,255,255,.012),rgba(91,69,255,.025),rgba(255,255,255,.012)); }
.stat-card,.bento-card,.result-card,.price-card,.faq-item,.dash-card,.app-panel {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 55px rgba(0,0,0,.09);
}
.stat-card,.bento-card,.result-card,.price-card { transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease; }
.stat-card:hover,.bento-card:hover,.result-card:hover,.price-card:hover { transform:translateY(-5px); border-color:rgba(124,142,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 26px 80px rgba(0,0,0,.20),0 0 46px rgba(69,83,255,.055); }
.bento-card { background:radial-gradient(circle at 96% 0,rgba(75,102,255,.07),transparent 37%),linear-gradient(155deg,rgba(255,255,255,.052),rgba(255,255,255,.014)); }
.app-preview { border-color:rgba(255,255,255,.12); box-shadow:0 45px 130px rgba(0,0,0,.40),0 0 80px rgba(58,69,255,.09),inset 0 1px 0 rgba(255,255,255,.045); }
.price-card.featured { box-shadow:0 34px 100px rgba(68,47,255,.18),inset 0 1px 0 rgba(255,255,255,.055); }
.cta-box { box-shadow:0 40px 110px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05); }

/* Smooth, unobtrusive scrollbars. */
* { scrollbar-width:thin; scrollbar-color:rgba(108,101,255,.48) rgba(255,255,255,.025); }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:rgba(255,255,255,.018); }
*::-webkit-scrollbar-thumb { border:3px solid #050713; border-radius:99px; background:linear-gradient(#a24fff,#3e9dff); }

@media (max-width: 980px) {
  .hero { min-height:auto; }
  .hero-grid { gap: 10px; }
  .logo-stage { min-height: 560px; }
}
@media (max-width: 680px) {
  .aurora-field i { filter:blur(54px); opacity:.10; }
  .boot-logo-wrap { width:132px;height:132px }.boot-logo-wrap img{width:112px;height:112px}
  .hero { padding-top:112px; }
  .hero h1 { font-size:clamp(48px,15vw,70px); }
  .hero-copy { font-size:16px; }
  .logo-stage { min-height:430px; }
  .logo-shell { width:min(420px,96vw); }
  .float-card.one{left:1%}.float-card.two{right:1%}
  .stat-card:hover,.bento-card:hover,.result-card:hover,.price-card:hover{transform:none}
}
@media (prefers-reduced-motion: reduce) {
  .aurora-field { display:none; }
  .boot-screen { transition:none; }
}

/* Final composition corrections. */
.hero h1 { font-size:clamp(56px,5.2vw,86px); }
.price-card.featured:hover { transform:translateY(-15px); }
@media (max-width: 680px) {
  .hero::after { display:none !important; }
  .hero-grid > :first-child { position:relative; z-index:2; }
  .logo-stage { position:relative; z-index:1; }
  .price-card.featured:hover { transform:none; }
}

/* ===== Google / социальный вход ===== */
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;background:#fff;color:#20242e;border:1px solid rgba(255,255,255,.85);font-weight:700;height:52px;border-radius:14px;transition:background .2s,transform .15s,box-shadow .2s}
.btn-google:hover{background:#f1f3f8;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.btn-google:active{transform:translateY(0)}
.btn-google svg{width:19px;height:19px;flex:none}
.auth-divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muted);font-size:12px;letter-spacing:.02em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ===== Скруглённый стиль в духе iOS / macOS ===== */
.btn { border-radius: 16px; }
.btn-sm { border-radius: 14px; }
.btn-primary::before { border-radius: 15px; }
.btn-google { border-radius: 16px; }
.topbar { border-radius: 26px; }
.bento-card, .price-card, .result-card, .stat-card, .subscription-hero,
.app-preview, .pipeline-wrap, .message-box, .error-box, .auth-card .field input,
.dash-card { border-radius: 26px; }
.field input, .fake-input, .app-panel, .preview-frame { border-radius: 16px; }
.dash-link, .app-nav-item, .mobile-menu a, .mobile-menu button { border-radius: 15px; }
.feature-icon, .device-icon, .user-avatar, .bento-icon { border-radius: 18px; }
.float-card { border-radius: 22px; }
.days-ring, .chip, .status-pill, .price-badge, .bento-tag { border-radius: 999px; }
.mobile-menu { border-radius: 24px; }
.toast { border-radius: 18px; }
.data-table { border-radius: 18px; overflow: hidden; }
input, textarea, select, button { border-radius: 14px; }
.dash-content .field input { border-radius: 16px; }

/* ---------- Модальное окно ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,16,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-card {
  width: min(460px, 100%);
  background: linear-gradient(180deg, rgba(28,32,54,.98), rgba(16,19,34,.98));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  padding: 24px;
  transform: translateY(14px) scale(.97);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.show .modal-card { transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal-head h3 { margin: 0; font-size: 19px; font-weight: 800; color: #fff; }
.modal-head p { margin: 4px 0 0; font-size: 13px; color: #9aa3c7; }
.modal-x { border: none; background: rgba(255,255,255,.06); color: #c7cef0; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: background .15s; }
.modal-x:hover { background: rgba(255,255,255,.14); }
.modal-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7d87b3; margin-bottom: 10px; }
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dur-chip { padding: 11px 6px; border-radius: 14px; cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #d5dbf5; font-size: 13px; font-weight: 600; transition: all .15s; }
.dur-chip:hover { border-color: rgba(140,160,255,.5); background: rgba(120,140,255,.12); }
.dur-chip.active { border-color: transparent; background: linear-gradient(135deg,#7c4dff,#4aa8ff); color: #fff; box-shadow: 0 8px 22px rgba(90,110,255,.4); }
.modal-input { width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,12,24,.6); color: #fff; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
.modal-input:focus { border-color: #6f7dff; box-shadow: 0 0 0 3px rgba(111,125,255,.25); }
.modal-hint { margin-top: 9px; font-size: 12px; color: #8891b8; }
.modal-hint b { color: #c3cbef; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
@media (max-width: 420px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Индикатор синхронизации ---------- */
.sync-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #16b364; background: rgba(22,179,100,.12); border: 1px solid rgba(22,179,100,.32); transition: background .3s; }
.sync-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #16b364; box-shadow: 0 0 0 0 rgba(22,179,100,.6); animation: syncPulse 2.2s infinite; }
.sync-pill.flash { background: rgba(22,179,100,.28); color: #26d576; }
@keyframes syncPulse { 0% { box-shadow: 0 0 0 0 rgba(22,179,100,.55); } 70% { box-shadow: 0 0 0 7px rgba(22,179,100,0); } 100% { box-shadow: 0 0 0 0 rgba(22,179,100,0); } }

/* ---------- Примеры работ ---------- */
.showcase-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: stretch; margin-top: 42px; }
.showcase-side { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.showcase-card { display: flex; flex-direction: column; cursor: pointer; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.09); transition: transform .45s cubic-bezier(.18,.86,.26,1), box-shadow .45s, border-color .45s; }
.showcase-card:hover { transform: translateY(-6px); border-color: rgba(124,77,255,.55); box-shadow: 0 26px 64px rgba(8,10,26,.6); }
.showcase-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0e1d; flex: 1; }
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.18,.86,.26,1); }
.showcase-card:hover .showcase-thumb img { transform: scale(1.06); }
.showcase-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,8,20,.55), rgba(6,8,20,0) 52%); pointer-events: none; }
.play-badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(11,14,30,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background .3s, transform .3s; }
.play-badge i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #7c4dff, #4aa8ff); font-size: 12px; font-style: normal; color: #fff; padding-left: 2px; }
.showcase-card:hover .play-badge { background: rgba(124,77,255,.42); transform: scale(1.04); }
.showcase-meta { padding: 15px 18px 20px; }
.showcase-idx { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #7c8bd6; }
.showcase-meta h3 { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #eef1ff; font-weight: 600; }
.showcase-card.featured .showcase-meta h3 { font-size: 18px; }
@media (max-width: 860px) { .showcase-grid { grid-template-columns: 1fr; } .showcase-side { grid-template-rows: none; } }

/* ---------- Видео-модалка ---------- */
.video-modal { width: min(940px, 100%); padding: 14px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap { padding: 14px 8px 4px; font-size: 14px; color: #c3cbef; text-align: center; }
.video-overlay .modal-x { top: 20px; right: 20px; z-index: 4; }

/* ---------- Аналитика каналов (мокапы) ---------- */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
@media (max-width: 860px) { .analytics-grid { grid-template-columns: 1fr; } }
.yt-figure { margin: 0; }
.yt-card { background: #0f1117; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 22px 22px 20px; box-shadow: 0 20px 50px rgba(6,8,20,.4); }
.yt-card-title { text-align: center; font-size: 15px; font-weight: 700; color: #f3f5ff; margin-bottom: 18px; line-height: 1.4; }
.yt-card-title b { color: #fff; }
.yt-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.yt-tab { padding: 13px 12px; border-right: 1px solid rgba(255,255,255,.06); }
.yt-tab:last-child { border-right: 0; }
.yt-tab.active { background: rgba(255,255,255,.05); }
.yt-tab span { display: block; font-size: 10px; color: #8891b0; margin-bottom: 6px; }
.yt-tab strong { font-size: 21px; font-weight: 700; color: #fff; }
.yt-chart { position: relative; height: 200px; margin-top: 22px; padding-left: 48px; padding-bottom: 22px; }
.yt-yaxis { position: absolute; left: 0; top: 0; bottom: 22px; width: 42px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 10px; color: #6f7794; }
.yt-plot { position: relative; height: 100%; }
.yt-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.yt-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.yt-line { fill: none; stroke: #29b6d8; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.yt-area { fill: rgba(41,182,216,.14); stroke: none; }
.yt-xaxis { position: absolute; left: 48px; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 10px; color: #6f7794; }
.yt-more { margin-top: 18px; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dfe4ff; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .3s; }
.yt-more:hover { background: rgba(255,255,255,.12); }
.yt-cap { margin-top: 15px; text-align: center; font-size: 13px; color: #9aa3c7; line-height: 1.5; }

/* Расширенные карточки аналитики (#5-#8) */
.yt-figure.wide { grid-column: 1 / -1; }

/* Реальные скриншоты статистики */
.shot-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.shot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.shot-img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 60px rgba(6,8,20,.5); background: #0b0d13; transition: transform .35s ease, box-shadow .35s ease; }
.shot-btn:hover .shot-img { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(6,8,20,.6); }
.shot-btn:focus-visible { outline: 2px solid #6a8bff; outline-offset: 4px; border-radius: 18px; }
.shot-figure .yt-cap { margin-top: 14px; }
/* Лайтбокс для скриншотов */
.img-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,6,16,.82); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.img-overlay.show { opacity: 1; pointer-events: auto; }
.img-overlay img { max-width: min(1100px, 96vw); max-height: 92vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(.97); transition: transform .3s ease; }
.img-overlay.show img { transform: scale(1); }
.img-overlay .img-x { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(20,24,38,.7); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 680px) { .shot-img { border-radius: 14px; } .img-overlay { padding: 12px; } }
.yt-tab .yt-sub { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; font-style: normal; }
.yt-tab .yt-sub.up { color: #26d576; }
.yt-tab .yt-sub.down { color: #ff6b8a; }
.rt-card { display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; align-items: center; margin-top: 6px; }
.rt-left { min-width: 0; }
.rt-big { font-family: Manrope, sans-serif; font-size: clamp(30px, 5vw, 44px); font-weight: 800; color: #fff; letter-spacing: -.03em; }
.rt-label { font-size: 12px; color: #8891b0; margin-bottom: 4px; }
.rt-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 20px; }
.rt-bars span { flex: 1; min-width: 3px; background: linear-gradient(to top, #29b6d8, #6a8bff); border-radius: 3px 3px 0 0; opacity: .85; }
.rt-axis { display: flex; justify-content: space-between; font-size: 10px; color: #6f7794; margin-top: 8px; }
.rt-top { display: flex; flex-direction: column; gap: 13px; }
.rt-top-item { display: flex; align-items: center; gap: 12px; }
.rt-thumb { width: 46px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #2a3550, #7c4dff); flex: none; }
.rt-top-item b { display: block; font-size: 15px; color: #fff; }
.rt-top-item small { display: block; font-size: 11px; color: #8891b0; margin-top: 2px; }
@media (max-width: 620px) { .rt-card { grid-template-columns: 1fr; gap: 20px; } }

/* ============ Адаптив + производительность (телефон / ноутбук / ПК) ============ */
/* Плавная и оптимизированная отрисовка тяжёлых секций */
.section { content-visibility: auto; contain-intrinsic-size: 1px 900px; }
img { max-width: 100%; height: auto; }
.yt-plot svg, .rt-bars { will-change: auto; }

/* Планшеты и небольшие ноутбуки */
@media (max-width: 1024px) {
  .analytics-grid { gap: 18px; }
  .yt-tab strong { font-size: 19px; }
}

/* Телефоны: удобные отступы, крупные тап-зоны, без лагов */
@media (max-width: 680px) {
  .yt-card { padding: 16px 14px 16px; border-radius: 16px; }
  .yt-card-title { font-size: 13px; margin-bottom: 14px; }
  .yt-tab { padding: 10px 8px; }
  .yt-tab strong { font-size: 16px; }
  .yt-tab span { font-size: 9px; }
  .yt-tab .yt-sub { font-size: 10px; }
  .yt-chart { height: 168px; padding-left: 40px; }
  .yt-yaxis { width: 36px; font-size: 9px; }
  .yt-xaxis { left: 40px; font-size: 9px; }
  .rt-big { font-size: 30px; }
  .rt-bars { height: 92px; }
  .yt-cap { font-size: 12px; }
  .btn, .btn-sm { min-height: 44px; }
  .dash-link { min-height: 44px; }
  /* Снижаем стоимость размытия на слабых мобильных GPU */
  .yt-card, .dash-card, .toast { backdrop-filter: none; }
}

/* Очень узкие экраны */
@media (max-width: 400px) {
  .yt-xaxis span:nth-child(even), .yt-yaxis span:nth-child(even) { opacity: .55; }
  .rt-top-item small { display: none; }
}

/* ============================================================
   V16.10 — стабильные нажатия и мобильная GPU-оптимизация
   ============================================================ */
html {
  min-height: 100%;
  background: #03050d;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
button, a, input, select, textarea, [role="button"], [data-route], [data-video], [data-payment], [data-support] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, [role="button"], [data-route], [data-video], [data-payment], [data-support] {
  cursor: pointer;
}
button { font: inherit; }
.btn, .mobile-toggle, .faq-btn, .dash-link, .showcase-card, .shot-btn {
  position: relative;
  isolation: isolate;
}
/* Декоративные слои никогда не перехватывают первый клик/тап. */
.btn::before, .btn::after,
.topbar::before,
.hero::before, .hero::after,
.logo-stage::before, .logo-stage::after,
.logo-shell::before, .logo-shell::after,
.stat-card::before,
.result-card::after,
.cta-box::before,
.subscription-hero::after,
.preview-frame::before, .preview-frame::after,
.scene-card::before,
.step::after,
.sync-pill::before {
  pointer-events: none !important;
}

@media (hover: none), (pointer: coarse) {
  .btn:hover, .showcase-card:hover, .price-card:hover, .bento-card:hover,
  .faq-btn:hover, .dash-link:hover, .mobile-toggle:hover {
    transform: none;
  }
  .btn:hover::after { transform: translateX(-120%); }
  .btn:active, .mobile-toggle:active, .faq-btn:active,
  .dash-link:active, .showcase-card:active {
    transform: scale(.985);
  }
}

@media (max-width: 820px) {
  body {
    background:
      radial-gradient(ellipse at 20% -5%, rgba(104,54,255,.12), transparent 34%),
      radial-gradient(ellipse at 100% 8%, rgba(0,193,255,.08), transparent 30%),
      #03050d;
  }
  #ambientCanvas {
    opacity: .68;
    image-rendering: auto;
  }
  .aurora-field i {
    filter: blur(48px);
    opacity: .09;
    animation-duration: 28s;
  }
  .noise { opacity: .018; }
  .topbar, .mobile-menu, .float-card, .auth-panel, .dash-sidebar, .dash-top,
  .play-badge, .img-overlay, .video-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .logo-shell {
    transform-style: flat;
    filter: drop-shadow(0 0 24px rgba(66,110,255,.26));
  }
  .logo-layer {
    backface-visibility: visible;
  }
  .logo-depth-1, .logo-depth-2, .logo-depth-3 {
    opacity: .08;
    filter: none;
  }
  .logo-glass { filter: none; opacity: .35; }
  .float-card { box-shadow: 0 12px 34px rgba(0,0,0,.28); }
  .section {
    contain-intrinsic-size: auto 760px;
  }
  .marquee-track { animation-duration: 42s; }
  .mini-wave i, .progress-bar i, .scene-card, .preview-frame::before,
  .sync-pill::before {
    animation-duration: calc(var(--mobile-animation-base, 1s) * 5) !important;
  }
  img[loading="lazy"] { content-visibility: auto; }
}

/* На слабых устройствах сохраняем эффекты, но уменьшаем стоимость композитинга. */
.is-low-power .aurora-field i { will-change: auto; }
.is-low-power .section,
.is-low-power .bento-card,
.is-low-power .price-card,
.is-low-power .result-card,
.is-low-power .yt-card,
.is-low-power .dash-card {
  will-change: auto !important;
}
.is-low-power .auth-logo-scene,
.is-low-power .logo-shell,
.is-low-power .logo-main {
  filter: drop-shadow(0 0 22px rgba(72,105,255,.24));
}

/* iOS/Safari: фикс скачка высоты и невидимого слоя после закрытия меню/интро. */
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
  .mobile-menu { -webkit-transform: translateZ(0); }
}

/* Финальный приоритет адаптива: поздние desktop-overrides не должны ломать телефон. */
@media (max-width: 820px) {
  html, body { overflow-x: clip; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  .hero-content, .logo-stage, .app-main, .app-panel, .cta-content {
    min-width: 0;
    max-width: 100%;
  }
  .hero-content { width: 100%; }
  .logo-stage {
    width: 100%;
    min-height: 390px !important;
    margin-inline: auto;
    overflow: visible;
  }
  .logo-shell { width: min(350px, 88vw) !important; }
  .orbit { width: min(340px, 86vw); height: min(340px, 86vw); }
  .float-card { max-width: min(168px, 44vw); min-width: 0; }
  .float-card.one { left: 0 !important; }
  .float-card.two { right: 0 !important; }
  .hero-actions, .hero-actions .btn { max-width: 100%; }
  .tech-marquee { overflow: hidden; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(44px, 14vw, 60px); }
  .logo-stage { min-height: 350px !important; }
  .logo-shell { width: min(310px, 84vw) !important; }
  .float-card { padding: 9px 10px; max-width: 46vw; }
}

/* content-visibility давал некорректный hit-test/scrollIntoView в Chromium и Safari:
   секция могла отрисоваться только после первого нажатия. DOM здесь небольшой,
   поэтому оставляем секции постоянно интерактивными. */
.section {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

html, body { overflow-x: clip; }

/* V16.11: remove decorative overlays that obstruct card text */
.mini-wave, .scene-stack { display: none !important; }
.bento-card.wide, .bento-card.large { padding-bottom: 24px; }