:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --text: #18222d;
  --muted: #667484;
  --line: #dfe6ec;
  --accent: #ff7900;
  --accent2: #d95f00;
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 86% 4%, rgba(76, 169, 213, .18), transparent 30rem),
    linear-gradient(180deg, #fbfdff 0%, #f4f7f9 58%, #ffffff 100%);
}

.site-header {
  background: rgba(255, 255, 255, .9);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(23, 45, 66, .05);
}

.brand { color: #17212b; }
.main-nav { color: #465564; }
.main-nav a:hover { color: #111a22; }
.nav-cta { color: #17212b !important; }
.menu-button { color: #17212b; border-color: var(--line); }
.hero { min-height: auto; padding-block: 76px; }
.home-page .hero {
  position: relative;
  margin-top: 24px;
  padding: 76px 60px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(250,253,255,.98) 0%, rgba(250,253,255,.93) 38%, rgba(250,253,255,.55) 63%, rgba(250,253,255,.12) 100%),
    url('assets/hero-mountain-lake-v2.png') center/cover no-repeat;
  box-shadow: 0 30px 80px rgba(31,61,83,.13);
}
.home-page .hero .image-frame { background: rgba(238,244,247,.9); box-shadow: 0 28px 80px rgba(28,67,94,.2); }
.hero-lead, .proof-list { color: #475768; }
.button-primary { color: #17212b; box-shadow: 0 10px 24px rgba(255, 121, 0, .2); }
.button-secondary { color: #22303e; background: #ffffff; border-color: #d7e0e7; }
.image-frame { border-color: #d9e2e9; background: #eaf0f4; box-shadow: 0 28px 80px rgba(28, 67, 94, .14); }
.floating-card { color: #18222d; background: rgba(255, 255, 255, .96); border-color: rgba(255, 121, 0, .42); box-shadow: 0 18px 42px rgba(34, 65, 88, .16); }

.quick-choice { background: #ffffff; border-color: var(--line); }
.choice-row > a { border-color: var(--line); }
.choice-row > a:hover { background: #f2f7fa; }
.choice-row > p, .floating-card span { color: var(--muted); }

.section-heading > p:not(.eyebrow),
.product-desc, .product-bottom > span,
.benefit-copy > p:not(.eyebrow),
.benefit-grid p, .steps p, .delivery-list span,
.case-grid p, .order-steps p, details p,
.site-footer, .form-note { color: var(--muted); }

.product-card,
.benefit-grid article,
.case-grid article,
.order-steps > div {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 14px 38px rgba(31, 61, 83, .06);
}

.product-card.featured {
  background: linear-gradient(165deg, #fff8f1, #ffffff 48%);
  box-shadow: inset 0 3px 0 var(--accent), 0 18px 46px rgba(255, 121, 0, .1);
}

.product-card ul { color: #344453; }
.offer-price { margin: -4px 0 12px; color: var(--accent2); font-size: 24px; font-weight: 800; }
.product-bottom, .delivery-list, .delivery-list > div,
.faq, .faq-list, details, .order-flow { border-color: var(--line); }

.benefits {
  background: linear-gradient(135deg, #edf6f9, #f7fafc);
  border-color: var(--line);
}

.steps { border-color: var(--line); background: #ffffff; box-shadow: 0 16px 42px rgba(31, 61, 83, .06); }
.steps li { border-color: var(--line); }
.delivery { border-color: var(--line); }
.delivery-image { border-color: #d6e1e8; box-shadow: 0 22px 60px rgba(31, 61, 83, .1); }
.compat-note { color: #425363; background: #eef5f8; }

.order-card {
  color: #18222d;
  background: linear-gradient(125deg, #eaf6fb, #fff5e9);
  border-color: rgba(255, 121, 0, .4);
  box-shadow: 0 24px 70px rgba(31, 61, 83, .1);
}
.order-copy > p:not(.eyebrow) { color: #516172; }
.direct-contact { color: #18222d; }
.lead-form label { color: #263544; }
.lead-form input, .lead-form select, .lead-form textarea {
  color: #18222d;
  background: #ffffff;
  border-color: #ccd8e1;
}
.lead-form option { background: #ffffff; }
summary { color: #263544; }

.visual-story { padding-top: 64px; }
.story-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.story-card { position: relative; min-height: 430px; margin: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: #dfe7ec; box-shadow: 0 20px 55px rgba(31,61,83,.11); }
.story-card img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.story-card figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 4px; padding: 17px 19px; border-radius: 14px; color: #fff; background: rgba(13,25,35,.78); backdrop-filter: blur(10px); }
.story-card figcaption strong { font-size: 17px; }
.story-card figcaption span { color: rgba(255,255,255,.78); font-size: 13px; }

.field-banner { position: relative; width: min(1500px, calc(100% - 48px)); height: min(52vw, 620px); min-height: 380px; margin: 28px auto 0; overflow: hidden; border-radius: 26px; }
.field-banner img { width: 100%; height: 100%; object-fit: cover; }
.field-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(8,18,27,.72)); }
.field-banner > div { position: absolute; z-index: 1; left: 38px; bottom: 34px; display: grid; gap: 5px; color: #fff; }
.field-banner span { color: #ffb36d; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.field-banner strong { font-size: clamp(24px,3vw,42px); }

@media (max-width: 980px) {
  .main-nav { background: #ffffff; border-color: var(--line); box-shadow: 0 18px 50px rgba(25, 55, 77, .14); }
  .home-page .hero { padding: 58px 38px; }
  .story-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { background: linear-gradient(180deg, #fbfdff, #f4f8fa 54%, #ffffff); }
  .site-header { padding-block: 12px; }
  .hero { padding-block: 46px 62px; }
  .home-page .hero { width: calc(100% - 20px); margin-top: 10px; padding: 42px 22px 28px; border-radius: 22px; background: linear-gradient(180deg,rgba(250,253,255,.98) 0%,rgba(250,253,255,.9) 58%,rgba(250,253,255,.28) 100%),url('assets/hero-mountain-lake-v2.png') 63% center/cover no-repeat; }
  h1 { font-size: 39px; line-height: 1.04; }
  .hero-lead { font-size: 17px; }
  .product-card, .benefit-grid article, .case-grid article, .order-steps > div { box-shadow: 0 10px 28px rgba(31, 61, 83, .07); }
  .story-card,.story-card img { min-height: 360px; }
  .field-banner { width: calc(100% - 20px); min-height: 430px; border-radius: 20px; }
  .field-banner > div { left: 22px; right: 22px; bottom: 22px; }
}