/* EARSHOT — hero + content sections.
   Sections stack like cards: each one has a rounded top and slides over
   the one before it (the Fraxbit reference), in the UI Templates style. */

:root {
  --ink-dark: #07090D;
  --stone: #F3F1EC;
  --panel-r: 56px;
}

.wrap { width: min(1200px, calc(100vw - 2 * clamp(16px, 4vw, 56px))); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(30,107,255,.16); }
.eyebrow-dark { color: rgba(255,255,255,.6); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3BDB86; box-shadow: 0 0 0 0 rgba(59,219,134,.6); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(59,219,134,0); } 100% { box-shadow: 0 0 0 0 rgba(59,219,134,0); } }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head-center { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.sec-title {
  margin: 14px 0 0; font-weight: 700; letter-spacing: -.05em; line-height: .98;
  font-size: clamp(40px, 6vw, 88px);
}
.sec-title b, .why-title b, .hero-title b { color: var(--blue); }
.sec-aside { margin: 0; max-width: 320px; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.5; }
.panel-dark .sec-aside, .panel-blue .sec-aside { color: rgba(255,255,255,.62); }

.btn-ghost-dark { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); }

/* ---------- Panels ---------- */
.panel {
  position: relative; border-radius: var(--panel-r) var(--panel-r) 0 0; margin-top: calc(-1 * var(--panel-r));
  padding: clamp(96px, 12vw, 160px) 0 calc(clamp(96px, 12vw, 160px) + var(--panel-r));
  overflow: hidden;
}
.panel-dark { background: var(--ink-dark); color: #fff; z-index: 3; }
.panel-light { background: var(--bg); color: var(--ink); }
.panel-stone { background: var(--stone); color: var(--ink); }
.panel-blue { background: linear-gradient(160deg, #3D7DFF 0%, #1E5BF0 45%, #0F3BC2 100%); color: #fff; }
.panel-black { background: #000; color: #fff; }
#features { z-index: 3; } #bento { z-index: 4; } #why { z-index: 6; }
#perks { z-index: 7; } #quiz { z-index: 8; } #reviews { z-index: 9; } .site-footer { z-index: 10; }

/* stacking: a panel dims while the next slides over it */
.panel::after {
  content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #000; opacity: var(--dim, 0); border-radius: inherit; will-change: opacity;
}
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
.line-mask { display: block; overflow: hidden; padding: 0 .04em .08em; margin-bottom: -.08em; }
.line-mask .ln { display: inline-block; will-change: transform; }
.foot-word span {
  display: inline-block;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 1. Hero ---------- */
.hero-intro {
  position: relative; z-index: 1; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 110%, #0E1C3D 0%, #07090D 55%);
  color: #fff; display: grid; place-items: center;
}
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow {
  position: absolute; left: 50%; bottom: -30vh; width: 90vw; height: 60vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30,107,255,.35), transparent 70%); filter: blur(30px); pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding: 0 16px; margin-top: -14vh; }
.hero-inner::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(7,9,13,.35), rgba(7,9,13,0)); pointer-events: none;
}
.hero-inner .eyebrow { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(10px); letter-spacing: .08em; text-transform: none; font-size: 13px; font-weight: 600; }
.hero-title {
  margin: 0; font-weight: 600; letter-spacing: -.055em; line-height: .95;
  font-size: clamp(54px, 10.5vw, 168px);
}
.hero-title .mask { padding: 0 .02em .1em; }
.hero-sub { margin: 20px auto 0; color: rgba(255,255,255,.62); font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; line-height: 1.5; }
.hero-ctas { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero-ctas .btn { height: 56px; padding: 0 26px; }
.hero-stats {
  position: absolute; z-index: 2; left: clamp(16px, 4vw, 56px); bottom: clamp(24px, 5vh, 48px);
  display: flex; gap: clamp(20px, 3vw, 44px);
}
.hero-stats div { display: grid; gap: 2px; }
.hero-stats b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600; }
.hero-scroll {
  position: absolute; z-index: 2; right: clamp(16px, 4vw, 56px); bottom: clamp(24px, 5vh, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.5);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.hero-scroll i { width: 1px; height: 54px; background: linear-gradient(rgba(255,255,255,.6), transparent); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; left: -1px; width: 3px; height: 14px; border-radius: 2px; background: var(--blue); animation: drip 1.8s infinite var(--ease); }
@keyframes drip { from { top: -14px; } to { top: 54px; } }

/* ---------- 3. Feature line ---------- */
.lit-line {
  margin: 0; font-weight: 600; letter-spacing: -.04em; line-height: 1.08;
  font-size: clamp(34px, 5.4vw, 80px);
}
.lit-line .w { opacity: .14; transition: none; }
.lit-line .dot { color: var(--blue); }

/* ---------- 4. Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.b-card {
  position: relative; overflow: hidden; border-radius: 36px; padding: 28px; background: #fff;
  box-shadow: var(--shadow-soft); min-height: 260px; display: flex; flex-direction: column;
}
.b-battery { grid-column: span 3; }
.b-anc { grid-column: span 3; }
.b-spatial { grid-column: span 2; min-height: 320px; justify-content: flex-end; background: linear-gradient(180deg, #5A8DFF, #1C45C4); color: #fff; }
.b-heart { grid-column: span 2; }
.b-find { grid-column: span 2; }
.b-translate { grid-column: span 6; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.b-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.b-value { font-size: clamp(48px, 5vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin-top: 14px; }
.b-value small { font-size: .38em; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.b-note { margin: 10px 0 0; color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.45; max-width: 300px; }
.b-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 1; }
.donut-lg { width: 180px; height: 180px; }
.donut-arc { stroke-dasharray: 326.73; stroke-dashoffset: 326.73; }
.b-dark { background: linear-gradient(180deg, #24323F, #0D1218); color: #fff; }
.b-dark .b-label, .b-dark .b-note { color: rgba(255,255,255,.6); }
.b-dark .wave { position: absolute; left: 0; right: 0; bottom: 22px; height: 100px; width: 100%; }
.b-spatial .b-label { color: #fff; font-size: 18px; font-weight: 700; }
.b-spatial .b-note { color: rgba(255,255,255,.72); }
.b-orb { position: absolute; left: 50%; top: 44%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ecg { width: 100%; height: 70px; margin: 18px 0 4px; }
.ecg path { fill: none; stroke: #FF4D6D; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: ecg 2.4s linear infinite; }
@keyframes ecg { to { stroke-dashoffset: -520; } }
.bpm { color: #FF4D6D; }
.b-find { justify-content: space-between; }
.radar { position: relative; width: 130px; height: 130px; align-self: center; margin: 4px 0 18px; }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(30,107,255,.5); animation: radar 3s infinite ease-out; opacity: 0; }
.radar i:nth-child(2) { animation-delay: 1s; } .radar i:nth-child(3) { animation-delay: 2s; }
.radar span { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(30,107,255,.2); }
@keyframes radar { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.find-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--bg); font-size: 14px; font-weight: 600; }
.find-pill img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: #fff; }
.bubbles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bubble { margin: 0; padding: 14px 20px; border-radius: 24px; font-size: 17px; font-weight: 600; }
.bubble.in { background: var(--bg); border-bottom-left-radius: 8px; }
.bubble.out { background: linear-gradient(180deg, #3B82FF, var(--blue-2)); color: #fff; border-bottom-right-radius: 8px; min-width: 60px; min-height: 1.4em; }
.bubble.out::after { content: '|'; margin-left: 2px; opacity: .7; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.trend { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(35,193,107,.16); color: #3BDB86; margin-left: 12px; vertical-align: middle; letter-spacing: 0; }

/* image slots: real photo if present, styled fallback otherwise */
.img-slot { position: relative; width: 100%; height: 100%; }
.img-slot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 30%, var(--c1, #5A8DFF), var(--c2, #1C45C4));
}
.slot-fallback img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); transition: transform .8s var(--ease); }
.slot-fallback .slot-name {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px;
  background: rgba(0,0,0,.28); color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600; backdrop-filter: blur(6px);
}
.img-slot.has-img .slot-fallback { display: none; }

/* ---------- 6. Editorial ---------- */
.panel-stone { min-height: 100vh; display: grid; place-items: center; padding-bottom: calc(120px + var(--panel-r)); }
.why-center { position: relative; z-index: 2; text-align: center; max-width: 440px; padding: 0 16px; }
.why-title { margin: 14px 0 34px; font-size: clamp(40px, 5vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.why-list li { display: grid; gap: 4px; }
.why-list li::before { content: ''; justify-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-bottom: 4px; }
.why-list b { font-size: 17px; letter-spacing: -.01em; }
.why-list span { color: var(--muted); font-size: 15px; font-weight: 500; }
.why-side { position: absolute; z-index: 1; bottom: var(--panel-r); width: clamp(220px, 30vw, 460px); height: min(80vh, 760px); }
.why-left { left: 0; }
.why-right { right: 0; }
.why-tag { position: absolute; top: 12%; z-index: 2; font-size: 14px; font-weight: 600; color: var(--muted); }
.why-left .why-tag { left: clamp(16px, 4vw, 56px); }
.why-right .why-tag { right: clamp(16px, 4vw, 56px); }
.why-side .img-slot > img { object-fit: contain; object-position: bottom; }
.why-left .img-slot > img { object-position: left bottom; }
.why-right .img-slot > img { object-position: right bottom; }
.slot-statue { background: none; }
.slot-statue::before {
  content: ''; position: absolute; bottom: 0; width: 70%; height: 82%;
  border-radius: 48% 48% 18% 18% / 36% 36% 12% 12%;
  background: linear-gradient(180deg, #E9E6DF, #D9D5CC);
  box-shadow: inset 0 -30px 60px rgba(0,0,0,.06);
}
.why-left .slot-statue::before { left: -6%; }
.why-right .slot-statue::before { right: -6%; }
.slot-statue span { position: absolute; bottom: 24px; font-size: 11px; font-weight: 600; color: rgba(0,0,0,.35); }

/* ---------- 7. Perks ---------- */
.panel-blue { min-height: 100vh; display: flex; align-items: center; padding-left: clamp(16px, 6vw, 96px); }
.perks-copy { position: relative; z-index: 2; max-width: 520px; }
.perks-copy .sec-aside { margin: 22px 0 30px; max-width: 380px; font-size: 18px; }
.perks-copy .btn { height: 58px; padding: 0 28px; }
.perks-grid {
  position: absolute; right: -8vw; top: -10%; width: 64vw; height: 130%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  transform: perspective(1400px) rotateX(18deg) rotateY(-22deg) rotateZ(10deg);
  transform-origin: center;
}
.perks-col { display: flex; flex-direction: column; gap: 18px; will-change: transform; }
.perk-tile {
  position: relative; aspect-ratio: 4 / 3.2; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, var(--t1), var(--t2));
  box-shadow: 0 30px 60px rgba(0,10,60,.35), inset 0 1px 0 rgba(255,255,255,.25);
  display: grid; place-items: center;
}
.perk-tile img { width: 70%; height: 80%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
.perk-tile.perk-text { background: rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); align-content: center; gap: 4px; text-align: center; padding: 16px; }
.perk-tile.perk-text b { font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.03em; }
.perk-tile.perk-text span { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; }

.panel-blue .sec-title b { color: #A9C6FF; }
.panel-blue .eyebrow i { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }

/* ---------- 8. Quiz ---------- */
.quiz-card {
  position: relative; max-width: 860px; margin: 0 auto; border-radius: 48px; padding: clamp(28px, 4vw, 52px);
  background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; min-height: 460px;
}
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quiz-step { font-size: 14px; font-weight: 600; color: var(--muted); }
.quiz-bar { flex: 1; max-width: 240px; height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2FD0E6, var(--blue)); transition: width .6s var(--ease); }
.quiz-q { margin: 30px 0 26px; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.045em; font-weight: 700; line-height: 1.05; }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.quiz-opt {
  display: grid; justify-items: start; gap: 14px; padding: 20px; border-radius: 28px; text-align: left;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .3s, background .3s;
}
.quiz-opt:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 16px 30px rgba(30,107,255,.12); }
.quiz-opt .q-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(180deg, #F3F6FF, #E5ECFF); color: var(--blue); }
.quiz-opt .q-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-opt b { font-size: 17px; letter-spacing: -.01em; }
.quiz-opt span { font-size: 14px; color: var(--muted); font-weight: 500; margin-top: -8px; }
.quiz-result { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; margin-top: 18px; }
.quiz-result .q-hero { aspect-ratio: 1; border-radius: 36px; background: linear-gradient(180deg, var(--c1), var(--c2)); display: grid; place-items: center; position: relative; overflow: hidden; }
.quiz-result .q-hero img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.3)); }
.quiz-result h3 { margin: 10px 0 10px; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.045em; line-height: 1; }
.quiz-result p { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.5; font-weight: 500; }
.quiz-result .q-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.q-restart { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--blue); }

/* ---------- 9. Reviews ---------- */
.marquee { display: flex; gap: 16px; width: max-content; padding: 8px 0; animation: marquee 60s linear infinite; }
.marquee-rev { animation-direction: reverse; animation-duration: 70s; margin-top: 16px; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.review {
  width: 380px; flex: none; border-radius: 32px; padding: 26px; display: grid; gap: 16px; align-content: start;
  background: linear-gradient(180deg, #161C25, #0E1218); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.stars { color: #FFC542; letter-spacing: 3px; font-size: 15px; }
.review p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.88); font-weight: 500; }
.review footer { display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(160deg, var(--a1), var(--a2)); }
.review footer b { display: block; font-size: 15px; }
.review footer span { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 600; }

/* ---------- 10. Footer ---------- */
.site-footer { padding-bottom: 32px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-news h3 { margin: 0 0 18px; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.04em; font-weight: 600; max-width: 380px; }
.news-form { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); max-width: 460px; }
.news-form input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; padding: 0 16px; outline: none; }
.news-form input::placeholder { color: rgba(255,255,255,.4); }
.news-form .btn { height: 48px; }
.foot-cols { display: flex; gap: clamp(32px, 6vw, 96px); }
.foot-cols h4 { margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.foot-cols button { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.8); transition: color .3s; }
.foot-cols button:hover { color: #fff; }
.foot-word {
  margin: clamp(48px, 8vw, 110px) 0 0; font-weight: 800; letter-spacing: -.07em; line-height: .78;
  font-size: clamp(90px, 23.5vw, 360px); text-align: center;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.foot-legal { margin: 26px 0 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }

.reveal { will-change: transform, opacity; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-battery, .b-anc, .b-translate { grid-column: span 2; }
  .b-spatial, .b-heart, .b-find { grid-column: span 1; }
  .b-spatial { grid-column: span 2; }
  .quiz-result { grid-template-columns: 1fr; }
  .why-side { opacity: .55; width: 46vw; }
  .perks-grid { width: 90vw; right: -40vw; opacity: .6; }
}
@media (max-width: 720px) {
  :root { --panel-r: 36px; }
  .shop { border-radius: 36px 36px 0 0; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-head-center { align-items: center; }
  .hero-inner { margin-top: -6vh; }
  .hero-stats { gap: 18px; }
  .hero-scroll { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: auto !important; }
  .b-row { flex-direction: column; align-items: flex-start; }
  .b-translate { flex-direction: column; align-items: flex-start; }
  .bubbles { justify-content: flex-start; }
  .why-side { height: 46vh; width: 52vw; opacity: .35; }
  .panel-blue { padding-right: 16px; }
  .perks-grid { right: -60vw; opacity: .45; }
  .review { width: 300px; }
  .foot-cols { gap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; flex-wrap: wrap; width: auto; }
  .ecg path, .radar i, .hero-scroll i::after, .live-dot { animation: none; }
}