:root {
  --bg: #eef1f3;
  --panel: #ffffff;
  --panel2: #e4eaed;
  --text: #111820;
  --muted: #626d76;
  --petrol: #102a31;
  --petrol-soft: #183b43;
  --line: rgba(16, 42, 49, .14);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(236, 25, 112, .07), transparent 25rem),
    linear-gradient(180deg, #f8fafb 0, var(--bg) 42%, #f6f8f9 100%);
  color: var(--text);
}

.grain { opacity: .018; }

.site-header {
  position: sticky;
  top: 0;
  max-width: none;
  padding-inline: max(24px, calc((100% - 1220px) / 2));
  background: rgba(248, 250, 251, .9);
  border-color: rgba(16, 42, 49, .1);
  box-shadow: 0 10px 35px rgba(22, 44, 52, .06);
  backdrop-filter: blur(18px);
}

.brand b,
nav a { color: var(--petrol); }
.brand small { color: #6d7880; }
nav a:hover { color: var(--pink); }
.nav-cta { background: var(--petrol); color: #fff; }
.nav-cta:hover { box-shadow: 0 12px 30px rgba(16, 42, 49, .2); }

.hero { min-height: calc(100vh - 82px); }
.hero-glow {
  left: 0;
  top: -8rem;
  background: radial-gradient(circle, rgba(236, 25, 112, .12), transparent 66%);
}
.hero h1 em {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16, 42, 49, .68);
}
.hero-lead { color: #53616a; }
.proof-line span:nth-child(2) { color: var(--petrol); }
.btn-ghost {
  color: var(--petrol);
  background: rgba(255, 255, 255, .72);
  border-color: rgba(16, 42, 49, .18);
  box-shadow: 0 8px 24px rgba(16, 42, 49, .06);
}
.btn-ghost:hover { background: #fff; border-color: rgba(16, 42, 49, .28); }
.play { border-color: rgba(16, 42, 49, .22); }
.micro-trust { color: #66727a; }
.image-shell { box-shadow: 0 34px 80px rgba(16, 42, 49, .22); }
.scroll-cue { color: #647077; }

.offer-inner {
  background:
    radial-gradient(circle at 78% 30%, rgba(236, 25, 112, .17), transparent 18rem),
    linear-gradient(120deg, #0f2930, #183b43);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(16, 42, 49, .18);
  color: #fff;
}
.offer-details { border-color: rgba(255, 255, 255, .16); }
.offer-details p { color: #d8e0e3; }
.offer-details b { color: #fff; }
.offer-inner > a { background: #fff; color: var(--petrol); }

.dual-head h2 em,
.functions-heading h2 em {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16, 42, 49, .6);
}
.power-stage {
  border-color: rgba(16, 42, 49, .14);
  box-shadow: 0 24px 60px rgba(16, 42, 49, .14);
}
.power-stage .stage-copy,
.power-stage .stage-copy h3,
.power-stage .stage-num { color: #fff; }
.power-stage .stage-copy h3 {
  text-shadow: 0 3px 24px rgba(0, 0, 0, .72);
}
.power-stage .stage-copy p {
  color: #eef2f3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
}
.power-statement,
.engine-proof {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(16, 42, 49, .13);
  box-shadow: 0 12px 34px rgba(16, 42, 49, .06);
}
.power-statement span,
.engine-proof strong { color: var(--petrol); }
.engine-proof { color: #647079; }

.functions-live {
  padding-inline: 32px;
  border-radius: 42px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 28px 90px rgba(16, 42, 49, .08);
}
.function-theater {
  background: #fff;
  border-color: rgba(16, 42, 49, .14);
  box-shadow: 0 30px 80px rgba(16, 42, 49, .16);
}
.function-list { background: linear-gradient(180deg, #fff, #f1f4f5); }
.function-tab { color: var(--petrol); border-color: rgba(16, 42, 49, .12); }
.function-tab > span { color: #8c979d; }
.function-tab small { color: #69757c; }
.function-tab > i { background: rgba(16, 42, 49, .1); }
.function-tab.active b { color: var(--petrol); }

.kit-frame {
  border-color: rgba(16, 42, 49, .12);
  box-shadow: 0 28px 70px rgba(16, 42, 49, .13);
}
.kit-specs { border-color: rgba(16, 42, 49, .13); }
.kit-specs > div { border-color: rgba(16, 42, 49, .13); }
.video-card { box-shadow: 0 22px 50px rgba(16, 42, 49, .16); }

.warranty-card {
  color: var(--text);
  background:
    radial-gradient(circle at 88% 30%, rgba(236, 25, 112, .12), transparent 22rem),
    linear-gradient(125deg, #fff, #e8eef0);
  border-color: rgba(16, 42, 49, .14);
  box-shadow: 0 25px 70px rgba(16, 42, 49, .11);
}
.warranty-number { border-color: rgba(16, 42, 49, .15); }
.warranty-number span { color: var(--petrol); }
.warranty-copy p { color: #657179; }
.seal { border-color: rgba(16, 42, 49, .22); }
.seal:after { border-color: rgba(16, 42, 49, .22); }
.seal small { color: #6a757c; }

.final-cta { color: #fff; }
.final-content .btn-ghost {
  color: #fff;
  background: rgba(7, 8, 11, .4);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
.final-content .btn-ghost:hover { background: rgba(7, 8, 11, .65); }
.final-content > p { color: #c7cdd0; }

footer { border-color: rgba(16, 42, 49, .14); }
.footer-brand p,
.footer-contact span { color: #67737a; }
.footer-links a { color: #40535c; }
.footer-links a:hover { color: var(--pink); }

@media (max-width: 900px) {
  .site-header {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    padding: 10px 24px 0;
  }

  .site-header nav {
    order: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 5vw, 38px);
    overflow-x: auto;
    padding: 11px 3px 12px;
    border-top: 1px solid rgba(16, 42, 49, .1);
    scrollbar-width: none;
    white-space: nowrap;
  }

  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
  }
}

@media (max-width: 600px) {
  .site-header { padding: 8px 16px 0; }
  .site-header nav {
    justify-content: flex-start;
    gap: 22px;
    margin-inline: -16px;
    width: calc(100% + 32px);
    padding-inline: 16px;
  }
  .site-header nav a { font-size: 12px; }
  .hero { padding-top: 34px; }
  .functions-live {
    padding-inline: 17px;
    border-radius: 28px;
  }
  .function-list { background: #f3f6f7; }
  .function-tab:hover,
  .function-tab.active {
    background: #fff;
    border-color: rgba(236, 25, 112, .35) !important;
  }
}