/* ============================================================
   Insunorm — Bilglow landing styles
   Architecture: Section-scoped semantic + utility helpers
   Token family: --tone-* / --ui-* / --cta-*
   Mood: dark navy + saturated blue + silver
   ============================================================ */

/* --- Tokens --- */
:root {
  --tone-bg:        #0a1429;
  --tone-bg-alt:    #0f1d3a;
  --tone-surface:   #132547;
  --tone-surface-2: #18305a;
  --tone-line:      #25406e;
  --tone-line-soft: #1c2e54;

  --tone-main:      #e6edf7;
  --tone-support:   #a7b6cf;
  --tone-mute:      #6f7e9a;

  --tone-accent:    #3b82f6;
  --tone-accent-2:  #60a5fa;
  --tone-accent-3:  #7dd3fc;
  --tone-deep:      #1e3a8a;
  --tone-silver:    #c8d1e0;

  --cta-bg:         linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --cta-bg-hover:   linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  --cta-text:       #ffffff;

  --ui-radius-s:    8px;
  --ui-radius-m:    14px;
  --ui-radius-l:    22px;
  --ui-shadow-s:    0 2px 8px rgba(7, 14, 33, .35);
  --ui-shadow-m:    0 8px 28px rgba(7, 14, 33, .45);
  --ui-shadow-l:    0 18px 50px rgba(7, 14, 33, .55);

  --gap-xs:  6px;
  --gap-s:   12px;
  --gap-m:   20px;
  --gap-l:   32px;
  --gap-xl:  56px;
  --gap-xxl: 88px;

  --shell-max:  1180px;
  --shell-narrow: 820px;

  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Reset / base --- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tone-bg);
  color: var(--tone-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--tone-main);
  margin: 0 0 var(--gap-s);
  letter-spacing: -.01em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.4rem; font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tone-silver); }

p { margin: 0 0 var(--gap-s); color: var(--tone-support); }

a {
  color: var(--tone-accent-2);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--tone-accent-3); }

ul, ol { padding: 0; margin: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- Shell wrapper --- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 24px;
}
.shell--narrow { max-width: var(--shell-narrow); }
.shell--two {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.shell--nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding-top: 18px;
  padding-bottom: 18px;
}
.shell--hero {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-xxl);
}

/* --- Eyebrow / section heads --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--tone-line);
  border-radius: 999px;
  background: rgba(96, 165, 250, .08);
  color: var(--tone-accent-3);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--gap-m);
}
.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone-accent-2);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .2);
}

.section-head { margin-bottom: var(--gap-xl); }
.section-head--center { text-align: center; }
.section-head h2 { margin-bottom: var(--gap-s); }
.section-head p { color: var(--tone-support); max-width: 680px; }
.section-head--center p { margin-left: auto; margin-right: auto; }

/* --- CTA buttons --- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--ui-radius-m);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.cta--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--ui-shadow-m);
}
.cta--primary:hover {
  background: var(--cta-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-l);
  color: #fff;
}
.cta--ghost {
  background: transparent;
  border: 1px solid var(--tone-line);
  color: var(--tone-main);
}
.cta--ghost:hover {
  background: rgba(96, 165, 250, .08);
  border-color: var(--tone-accent-2);
  color: var(--tone-accent-3);
}
.cta--compact { padding: 10px 18px; font-size: .85rem; }
.cta--full { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-top {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(10, 20, 41, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tone-line-soft);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--tone-main);
}
.brand-mark__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.brand-mark__tag { font-size: .72rem; color: var(--tone-mute); letter-spacing: .06em; text-transform: uppercase; }
.brand-mark:hover .brand-mark__name { color: var(--tone-accent-3); }

.primary-nav {
  display: flex;
  gap: var(--gap-l);
}
.primary-nav a {
  color: var(--tone-support);
  font-size: .92rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}
.primary-nav a:hover { color: var(--tone-main); }
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--tone-accent-2);
  transition: width .25s ease;
}
.primary-nav a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--tone-main);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-zone {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, .25), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(30, 58, 138, .35), transparent 70%),
    linear-gradient(180deg, var(--tone-bg) 0%, var(--tone-bg-alt) 100%);
}
.hero-zone__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 50% 100%, rgba(125, 211, 252, .08), transparent 70%);
  pointer-events: none;
}

.hero-zone__title {
  margin-bottom: var(--gap-m);
}
.hero-zone__title span {
  background: linear-gradient(120deg, var(--tone-accent-3) 0%, var(--tone-accent-2) 60%, var(--tone-silver) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-zone__title em {
  font-style: italic;
  color: var(--tone-accent-3);
  font-weight: 400;
}

.hero-zone__lede {
  font-size: 1.05rem;
  color: var(--tone-support);
  max-width: 560px;
  margin-bottom: var(--gap-l);
}

.hero-zone__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--gap-l);
}
.hero-zone__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tone-main);
  font-size: .95rem;
}

.hero-zone__ctas {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
  margin-bottom: var(--gap-xl);
}

.hero-zone__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
  padding-top: var(--gap-l);
  border-top: 1px solid var(--tone-line-soft);
}
.hero-zone__trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tone-main);
  margin-bottom: 4px;
}
.hero-zone__trust-item span {
  font-size: .82rem;
  color: var(--tone-mute);
  line-height: 1.4;
}

.hero-zone__visual {
  position: relative;
}
.hero-zone__frame {
  position: relative;
  border-radius: var(--ui-radius-l);
  overflow: hidden;
  border: 1px solid var(--tone-line);
  box-shadow: var(--ui-shadow-l);
  background: var(--tone-surface);
}
.hero-zone__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-zone__pill {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(15, 29, 58, .92);
  border: 1px solid var(--tone-line);
  backdrop-filter: blur(8px);
  border-radius: var(--ui-radius-m);
  box-shadow: var(--ui-shadow-s);
}
.hero-zone__pill strong {
  display: block;
  font-size: .9rem;
  color: var(--tone-main);
}
.hero-zone__pill span {
  display: block;
  font-size: .75rem;
  color: var(--tone-mute);
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.strip-trust {
  background: var(--tone-bg-alt);
  border-top: 1px solid var(--tone-line-soft);
  border-bottom: 1px solid var(--tone-line-soft);
  padding: var(--gap-l) 0;
}
.strip-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
}
.strip-trust__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tone-support);
  font-size: .95rem;
  font-weight: 500;
}
.strip-trust__cell p { margin: 0; color: var(--tone-main); }

/* ============================================================
   AWARENESS / FOR WHOM
   ============================================================ */
.awareness {
  padding: var(--gap-xxl) 0;
}
.awareness__txt h2 { margin-bottom: var(--gap-m); }

.awareness__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}
.awareness__list li {
  display: flex;
  gap: var(--gap-m);
  padding: 18px;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
  transition: transform .25s ease, border-color .25s ease;
}
.awareness__list li:hover {
  transform: translateX(4px);
  border-color: var(--tone-accent);
}
.awareness__bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tone-accent), var(--tone-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
}
.awareness__list h4 { margin-bottom: 4px; }
.awareness__list p { margin: 0; font-size: .92rem; }

.awareness__visual {
  position: relative;
  display: grid;
  gap: var(--gap-m);
}
.awareness__visual img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--ui-radius-m);
  border: 1px solid var(--tone-line);
}
.awareness__visual--shift {
  margin-left: 40px;
}

/* ============================================================
   PRODUCT BLOCK
   ============================================================ */
.product-block {
  background:
    radial-gradient(800px 400px at 20% 50%, rgba(59, 130, 246, .12), transparent 70%),
    var(--tone-bg-alt);
  padding: var(--gap-xxl) 0;
  border-top: 1px solid var(--tone-line-soft);
  border-bottom: 1px solid var(--tone-line-soft);
}

.product-block__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: var(--gap-l);
  background: linear-gradient(180deg, rgba(19, 37, 71, .8), rgba(15, 29, 58, .8));
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-l);
  box-shadow: var(--ui-shadow-m);
  overflow: hidden;
}
.product-block__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(96, 165, 250, .35) 0%, transparent 70%);
  filter: blur(20px);
}
.product-block__media img {
  position: relative;
  max-width: 78%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
  z-index: 1;
}
.product-block__tag {
  position: absolute;
  padding: 8px 14px;
  background: rgba(15, 29, 58, .9);
  border: 1px solid var(--tone-line);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--tone-accent-3);
  font-weight: 500;
  z-index: 2;
}
.product-block__tag--top { top: 24px; left: 24px; }
.product-block__tag--bot { bottom: 24px; right: 24px; }

.product-block__txt h2 { margin-bottom: var(--gap-m); }
.product-block__lead { margin-bottom: var(--gap-l); }

.product-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
  margin-bottom: var(--gap-l);
}
.product-block__cell {
  padding: 16px;
  background: rgba(24, 48, 90, .35);
  border: 1px solid var(--tone-line-soft);
  border-radius: var(--ui-radius-s);
}
.product-block__cell h5 { margin-bottom: 6px; color: var(--tone-accent-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.product-block__cell p { margin: 0; font-size: .9rem; color: var(--tone-support); }

.product-block__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-m);
  padding: 20px;
  background: rgba(24, 48, 90, .5);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
}
.product-block__price-old {
  display: inline-block;
  text-decoration: line-through;
  color: var(--tone-mute);
  font-size: 1rem;
  margin-right: 10px;
}
.product-block__price-now {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--tone-accent-3);
}
.product-block__price-note {
  display: block;
  font-size: .78rem;
  color: var(--tone-mute);
  margin-top: 4px;
}

/* ============================================================
   BENEFITS GRID
   ============================================================ */
.benefits {
  padding: var(--gap-xxl) 0;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
}
.benefits__card {
  display: flex;
  flex-direction: column;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.benefits__card:hover {
  transform: translateY(-4px);
  border-color: var(--tone-accent);
  box-shadow: var(--ui-shadow-m);
}
.benefits__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.benefits__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.benefits__card:hover .benefits__media img { transform: scale(1.05); }
.benefits__body { padding: 20px; }
.benefits__body h4 { color: var(--tone-accent-3); margin-bottom: 8px; }
.benefits__body p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* ============================================================
   ROUTINE TIMELINE
   ============================================================ */
.routine {
  background: var(--tone-bg-alt);
  padding: var(--gap-xxl) 0;
  border-top: 1px solid var(--tone-line-soft);
  border-bottom: 1px solid var(--tone-line-soft);
}
.routine__timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
  position: relative;
}
.routine__step {
  position: relative;
  padding: 24px;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
  text-align: left;
}
.routine__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone-accent), var(--tone-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--gap-m);
  box-shadow: 0 6px 20px rgba(59, 130, 246, .35);
}
.routine__step h5 { color: var(--tone-accent-3); margin-bottom: 8px; }
.routine__step p { margin: 0; font-size: .9rem; }

/* ============================================================
   VOICES (testimonials)
   ============================================================ */
.voices { padding: var(--gap-xxl) 0; }
.voices__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-m);
}
.voices__card {
  padding: 24px;
  background: var(--tone-surface);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
  position: relative;
}
.voices__card::before {
  content: '"';
  position: absolute;
  top: 12px; right: 24px;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--tone-accent);
  opacity: .25;
}
.voices__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--gap-m);
}
.voices__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone-accent), var(--tone-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
}
.voices__head strong { display: block; color: var(--tone-main); font-size: .98rem; }
.voices__head span { font-size: .82rem; color: var(--tone-mute); }
.voices__stars {
  margin-left: auto;
  color: #fcd34d;
  font-size: .9rem;
  letter-spacing: 1px;
}
.voices__card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tone-support); }

/* ============================================================
   TRUST BRIDGE
   ============================================================ */
.trust-bridge {
  background:
    radial-gradient(700px 350px at 90% 0%, rgba(59, 130, 246, .15), transparent 70%),
    var(--tone-bg-alt);
  padding: var(--gap-xxl) 0;
  border-top: 1px solid var(--tone-line-soft);
  border-bottom: 1px solid var(--tone-line-soft);
}
.trust-bridge__list {
  margin-top: var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trust-bridge__list li {
  position: relative;
  padding-left: 30px;
  color: var(--tone-support);
  font-size: .95rem;
}
.trust-bridge__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tone-accent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .2);
}
.trust-bridge__list strong { color: var(--tone-main); }

.trust-bridge__card {
  padding: 32px;
  background: linear-gradient(180deg, var(--tone-surface), var(--tone-surface-2));
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-l);
  box-shadow: var(--ui-shadow-m);
}
.trust-bridge__card h4 {
  margin-bottom: var(--gap-m);
  color: var(--tone-accent-3);
}
.trust-bridge__card ul {
  margin-bottom: var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-bridge__card li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--tone-main);
  font-size: .92rem;
}
.trust-bridge__card li span {
  font-size: .78rem;
  color: var(--tone-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: var(--gap-xxl) 0; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--tone-surface);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
  padding: 0;
  overflow: hidden;
  transition: border-color .25s ease;
}
.faq__item[open] { border-color: var(--tone-accent); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tone-main);
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-size: 1.6rem;
  color: var(--tone-accent-3);
  font-weight: 300;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  padding: 0 24px 22px;
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tone-support);
}

/* ============================================================
   ORDER ZONE
   ============================================================ */
.order-zone {
  background:
    radial-gradient(800px 400px at 10% 50%, rgba(59, 130, 246, .18), transparent 70%),
    radial-gradient(600px 400px at 90% 50%, rgba(125, 211, 252, .08), transparent 70%),
    linear-gradient(180deg, var(--tone-bg) 0%, var(--tone-bg-alt) 100%);
  padding: var(--gap-xxl) 0;
}
.order-zone__pitch h2 { margin-bottom: var(--gap-m); }

.order-zone__priceblock {
  margin: var(--gap-l) 0;
  padding: 22px;
  background: rgba(24, 48, 90, .4);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-m);
}
.order-zone__priceblock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tone-line-soft);
  color: var(--tone-support);
}
.order-zone__priceblock-old {
  text-decoration: line-through;
  color: var(--tone-mute);
}
.order-zone__priceblock-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
}
.order-zone__priceblock-final span { color: var(--tone-main); font-weight: 500; }
.order-zone__priceblock-final strong {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--tone-accent-3);
}
.order-zone__priceblock-note {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--tone-mute);
}

.order-zone__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.order-zone__bullets li {
  padding: 8px 14px;
  background: rgba(96, 165, 250, .1);
  border: 1px solid var(--tone-line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--tone-accent-3);
}

.order-zone__form {
  padding: 32px;
  background: linear-gradient(180deg, var(--tone-surface), var(--tone-surface-2));
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-l);
  box-shadow: var(--ui-shadow-l);
}
.order-zone__form h3 {
  margin-bottom: var(--gap-l);
  color: var(--tone-accent-3);
}

.field {
  margin-bottom: var(--gap-m);
}
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--tone-support);
}
.field input[type=text],
.field input[type=tel],
.field input[type=email] {
  width: 100%;
  padding: 13px 16px;
  background: rgba(10, 20, 41, .6);
  border: 1px solid var(--tone-line);
  border-radius: var(--ui-radius-s);
  color: var(--tone-main);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .25s ease, background .25s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--tone-accent);
  background: rgba(10, 20, 41, .85);
}
.field input::placeholder { color: var(--tone-mute); }

.field--check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.field--check input { margin-top: 4px; flex-shrink: 0; }
.field--check label {
  margin: 0;
  font-size: .85rem;
  color: var(--tone-support);
  line-height: 1.4;
}

.order-zone__form-note {
  margin: var(--gap-m) 0 0;
  font-size: .78rem;
  color: var(--tone-mute);
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  background: #060d1f;
  border-top: 1px solid var(--tone-line);
  padding: var(--gap-xl) 0 var(--gap-l);
  color: var(--tone-support);
}
.site-foot__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gap-xl);
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid var(--tone-line-soft);
}
.site-foot__brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--tone-main);
  margin-bottom: 8px;
}
.site-foot__brand p { font-size: .9rem; margin-bottom: 8px; }
.site-foot__small { font-size: .8rem; color: var(--tone-mute); }

.site-foot__col h6 { margin-bottom: var(--gap-s); color: var(--tone-accent-3); }
.site-foot__col p { font-size: .9rem; margin-bottom: 6px; }
.site-foot__col ul { display: flex; flex-direction: column; gap: 8px; }
.site-foot__col a {
  color: var(--tone-support);
  font-size: .9rem;
}
.site-foot__col a:hover { color: var(--tone-accent-3); }

.site-foot__disclaimer {
  margin: var(--gap-l) 0 0;
  font-size: .78rem;
  color: var(--tone-mute);
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  background: linear-gradient(180deg, var(--tone-surface), var(--tone-surface-2));
  border: 1px solid var(--tone-accent);
  border-radius: var(--ui-radius-l);
  padding: 22px 26px;
  box-shadow: var(--ui-shadow-l);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.cookie-banner.is-shown {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-l);
  flex-wrap: wrap;
}
.cookie-banner__copy { flex: 1; min-width: 280px; }
.cookie-banner__copy strong { display: block; color: var(--tone-main); margin-bottom: 4px; font-size: 1rem; }
.cookie-banner__copy p { margin: 0; font-size: .88rem; line-height: 1.5; }
.cookie-banner__actions {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

/* ============================================================
   LEGAL PAGE LAYOUT
   ============================================================ */
.legal-zone {
  padding: var(--gap-xxl) 0;
  background: linear-gradient(180deg, var(--tone-bg) 0%, var(--tone-bg-alt) 100%);
}
.legal-zone .shell { max-width: 880px; }
.legal-zone h1 { margin-bottom: var(--gap-l); }
.legal-zone h2 { margin-top: var(--gap-l); margin-bottom: var(--gap-s); color: var(--tone-accent-3); font-size: 1.4rem; }
.legal-zone h3 { margin-top: var(--gap-m); margin-bottom: var(--gap-xs); font-size: 1.1rem; }
.legal-zone p { margin-bottom: var(--gap-s); color: var(--tone-support); line-height: 1.7; }
.legal-zone ul { margin: var(--gap-s) 0 var(--gap-m) 24px; list-style: disc; }
.legal-zone ul li { color: var(--tone-support); margin-bottom: 8px; line-height: 1.6; }
.legal-zone .legal-meta {
  margin-bottom: var(--gap-l);
  padding: 14px 18px;
  background: var(--tone-surface);
  border-left: 3px solid var(--tone-accent);
  border-radius: var(--ui-radius-s);
  color: var(--tone-mute);
  font-size: .88rem;
}

/* Success page */
.success-zone {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-xxl) 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(59, 130, 246, .25), transparent 70%),
    var(--tone-bg);
}
.success-zone .shell { max-width: 640px; text-align: center; }
.success-zone__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--gap-l);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone-accent), var(--tone-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(59, 130, 246, .4);
}
.success-zone h1 { margin-bottom: var(--gap-m); }
.success-zone p { margin-bottom: var(--gap-l); font-size: 1.05rem; color: var(--tone-support); }
.success-zone__actions {
  display: flex;
  gap: var(--gap-s);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .shell--two,
  .shell--hero {
    grid-template-columns: 1fr;
    gap: var(--gap-l);
  }
  .hero-zone__visual { max-width: 480px; margin: 0 auto; }
  .hero-zone { padding-bottom: var(--gap-l); }
  .shell--hero { padding-bottom: var(--gap-xl); }

  .strip-trust__row { grid-template-columns: repeat(2, 1fr); }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .routine__timeline { grid-template-columns: repeat(2, 1fr); }
  .voices__grid { grid-template-columns: 1fr; }
  .product-block__grid { grid-template-columns: 1fr; }

  .site-foot__top { grid-template-columns: 1fr; gap: var(--gap-l); }

  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    padding: 18px;
    background: var(--tone-surface);
    border: 1px solid var(--tone-line);
    border-radius: var(--ui-radius-m);
    box-shadow: var(--ui-shadow-l);
    z-index: 100;
  }
  .site-top { position: relative; }
  .shell--nav { position: relative; }

  .product-block__media { min-height: 360px; }

  .awareness__visual--shift { margin-left: 0; }
}

@media (max-width: 600px) {
  :root {
    --gap-xl: 36px;
    --gap-xxl: 56px;
  }
  .strip-trust__row { grid-template-columns: 1fr; }
  .benefits__grid { grid-template-columns: 1fr; }
  .routine__timeline { grid-template-columns: 1fr; }
  .hero-zone__trust { grid-template-columns: 1fr; gap: var(--gap-s); }
  .hero-zone__ctas { flex-direction: column; }
  .hero-zone__ctas .cta { width: 100%; }
  .product-block__price { flex-direction: column; align-items: stretch; }
  .product-block__price .cta { width: 100%; }
  .order-zone__form { padding: 22px; }
  .cookie-banner { padding: 18px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .cta { flex: 1; }
}