/* ============================================================
   LifeNik Home V4 — presentation layer
   Loaded only by index-v4.html. No previous version is affected.
   ============================================================ */

:root {
  --v4-navy: #0b1731;
  --v4-navy-raised: #132440;
  --v4-gold: #d8ae35;
  --v4-gold-soft: #e7c866;
  --v4-white: #fffefa;
  --v4-ivory: #f6f2e9;
  --v4-blue: #eaf1f6;
  --v4-mist: #dbe5ee;
  --v4-ink: #1a263d;
  --v4-muted: #657185;
  --v4-border: rgba(19, 36, 64, .12);
  --v4-border-dark: rgba(235, 241, 246, .13);
  --v4-card-radius: 18px;
  --v4-large-radius: 20px;
  --v4-button-radius: 14px;
  --v4-compact-radius: 12px;
  --v4-control-radius: 10px;
  --v4-shadow: 0 18px 48px -38px rgba(11, 23, 49, .38);
  --v4-shadow-hover: 0 24px 56px -38px rgba(11, 23, 49, .48);
  --v4-space: 96px;
  --container: 1180px;
}

body {
  color: var(--v4-ink);
  background: var(--v4-white);
}

/* Consistent type hierarchy without heavy display weights. */
.stats-section-title,
.method-title,
.path-selection-title,
.cases-band .h-section,
.lnk-faq-title,
.decision-title,
.decision-section-title {
  font-family: var(--f-semibold);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.48;
}

.method-card-title,
.compare-title,
.case-title,
.lnk-faq-q-text,
.decision-card-title {
  font-family: var(--f-semibold);
  font-weight: 600;
}

/* Hero V3 remains the benchmark; only its overall height is restrained. */
.hero {
  min-height: clamp(680px, 86svh, 840px);
}

.hero .hero-inner {
  padding-bottom: 64px;
}

.hero .hero-bg-video { animation-duration: 10s; }
.hero .mist-layer { animation: none; }
.hero .h-display,
.hero .hero-sub,
.hero .hero-cta { animation-duration: 600ms; }

.reveal { transition-duration: 600ms; }
.stat-card.in { animation-duration: 600ms; }

/* Section rhythm: distinct adjacent tones and gentle transitions. */
.stats-band,
.method-band,
.compare-band,
.cases-band,
.lnk-faq,
.decision-band {
  padding-block: var(--v4-space);
}

.stats-band,
.method-band,
.compare-band,
.cases-band,
.lnk-faq,
.decision-band {
  border-top: 1px solid rgba(19, 36, 64, .055);
}

.stats-band { background: var(--v4-blue); }
.method-band { background: var(--v4-ivory); }
.compare-band { background: var(--v4-white); }
.cases-band { background: var(--v4-navy); border-top-color: rgba(255, 255, 255, .07); }
.lnk-faq { background: var(--v4-blue); }
.decision-band { background: var(--v4-ivory); }

/* Stats: four quiet personalities inside one system. */
.stats-section-title {
  max-width: 760px;
  margin: 0 auto 48px;
  color: var(--v4-ink) !important;
  font-size: clamp(27px, 2.55vw, 34px);
}

.stats-grid {
  max-width: 1180px;
  gap: 24px;
}

.stat-card {
  position: relative;
  min-height: 172px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-card-radius);
  box-shadow: var(--v4-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.stat-card::after {
  content: '';
  position: absolute;
  inset: auto 24px 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgba(216, 174, 53, .28);
  transform: scaleX(.28);
  transform-origin: right;
  transition: transform 300ms var(--ease), background 300ms var(--ease);
}

.stat-card:nth-child(1) { background: var(--v4-white); }
.stat-card:nth-child(2) { background: linear-gradient(145deg, #e3ecf3, #edf3f7); }
.stat-card:nth-child(3) { background: linear-gradient(145deg, #f2ecdf, var(--v4-ivory)); }
.stat-card:nth-child(4) { background: #fff; border-color: rgba(216, 174, 53, .24); }
.stat-card:nth-child(2)::after { background: rgba(88, 116, 145, .26); }
.stat-card:nth-child(3)::after { background: rgba(173, 145, 83, .26); }

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 174, 53, .34);
  box-shadow: var(--v4-shadow-hover);
}

.stat-card:hover::after { transform: scaleX(1); background: rgba(216, 174, 53, .62); }

.stat-num {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  color: var(--v4-navy);
  font-family: var(--f-bold);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.stat-card:nth-child(4) .stat-num { color: #9a7415; }
.stat-label { color: #5f6c80; font-size: 12.5px; line-height: 1.9; }

/* Methodology: one calm ivory field, with depth coming from tone and spacing. */
.method-inner { max-width: 1180px; }
.method-title {
  max-width: 820px;
  margin-bottom: 48px;
  color: var(--v4-ink);
  font-size: clamp(27px, 2.55vw, 34px);
}
.method-title::before,
.method-title::after { width: 26px !important; background: var(--v4-gold) !important; opacity: .48 !important; }
.method-grid { gap: 24px; }
.methodology-outline-card {
  min-height: 340px;
  padding: 32px !important;
  border: 1px solid var(--v4-border) !important;
  border-radius: var(--v4-card-radius) !important;
  background: rgba(255, 254, 250, .68) !important;
  box-shadow: var(--v4-shadow);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease) !important;
}
.methodology-outline-card:nth-child(2) { background: rgba(234, 241, 246, .8) !important; }
.methodology-outline-card:nth-child(3) { background: rgba(255, 255, 255, .58) !important; }
.methodology-outline-card:hover { transform: translateY(-3px); border-color: rgba(216, 174, 53, .35) !important; box-shadow: var(--v4-shadow-hover); }
.method-num { margin-bottom: 24px; color: #aa821b !important; font-family: var(--f-semibold); font-size: 29px; font-weight: 600; }
.method-card-title { margin-bottom: 16px; color: var(--v4-ink) !important; font-size: 19px; line-height: 1.65; }
.method-card-text { color: #536075 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 2.05; }

/* Path selection: intentionally wider, crisp white, asymmetric emphasis. */
.path-selection-title {
  max-width: 860px;
  margin-bottom: 48px;
  color: var(--v4-ink) !important;
  font-size: clamp(28px, 3vw, 38px);
}
.compare-grid { max-width: 1090px; gap: 24px; grid-template-columns: 1.04fr .96fr; }
.compare-card {
  padding: 32px;
  border-radius: var(--v4-large-radius);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.compare-card:hover { transform: translateY(-3px); }
.compare-card.dark { background: var(--v4-navy-raised); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 22px 52px -38px rgba(11, 23, 49, .75); }
.compare-card.light { background: #fff; border: 1px solid var(--v4-border); box-shadow: var(--v4-shadow); }
.compare-card.light:hover { border-color: rgba(19, 36, 64, .19); box-shadow: var(--v4-shadow-hover); }
.compare-title { font-size: 21px; line-height: 1.65; }
.compare-card.dark .compare-title { color: #f6f8fa; }
.compare-sub { margin-bottom: 24px; font-weight: 400; line-height: 1.8; }
.compare-list li { margin-bottom: 12px; font-size: 13.5px; line-height: 1.9; }

/* Stories: the single dark editorial anchor after Hero. */
.cases-inner { max-width: 1180px; }
.cases-band .sec-head { max-width: 780px; margin-bottom: 0; }
.cases-band .h-section { margin-top: 16px; color: #f7f8fa !important; font-size: clamp(28px, 3vw, 38px); }
.cases-band .t-lead { margin-top: 12px; line-height: 1.9; }
.cases-grid { max-width: 1100px; margin-top: 48px; gap: 24px; }
.case-card {
  padding: 32px;
  border: 1px solid var(--v4-border-dark);
  border-radius: var(--v4-card-radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  box-shadow: 0 20px 48px -42px rgba(0, 0, 0, .82);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.case-card:hover { transform: translateY(-3px); border-color: rgba(216, 174, 53, .32); box-shadow: 0 24px 54px -40px rgba(0, 0, 0, .86); }
.case-title { margin-bottom: 8px; color: var(--v4-gold-soft); font-size: 17px; line-height: 1.7; }
.case-profile { margin-bottom: 24px; }
.case-before,
.case-after { font-size: 12.5px; line-height: 2; }
.case-audio-player { margin-top: 24px; border-radius: var(--v4-button-radius); background: rgba(255, 255, 255, .04); border-color: rgba(216, 174, 53, .22); }
.cases-cta { margin-top: 48px; border-width: 1px; border-radius: var(--v4-button-radius); font-family: var(--f-semibold); font-size: 15px !important; font-weight: 600; }

/* FAQ: open, readable, and quietly interactive. */
.lnk-faq-wrap { max-width: 900px; }
.lnk-faq::before { background: radial-gradient(ellipse 70% 38% at 50% 0%, rgba(216, 174, 53, .09), transparent 72%); }
.lnk-faq-head { margin-bottom: 48px; }
.lnk-faq-title { color: var(--v4-ink); font-size: clamp(28px, 3vw, 40px); }
.lnk-faq-subtitle { color: var(--v4-muted); line-height: 2; }
.lnk-faq-list { gap: 8px; }
.lnk-faq-item {
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-button-radius);
  background: rgba(255, 254, 250, .76);
  box-shadow: 0 14px 34px -32px rgba(11, 23, 49, .35);
  transition: background 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.lnk-faq-item:hover { background: var(--v4-white); border-color: rgba(19, 36, 64, .2); }
.lnk-faq-item[aria-expanded="true"] { background: var(--v4-white); border-color: rgba(216, 174, 53, .38); box-shadow: var(--v4-shadow); }
.lnk-faq-q { min-height: 72px; padding: 24px; }
.lnk-faq-q-text { color: var(--v4-ink); font-size: 15px; line-height: 1.75; }
.lnk-faq-item[aria-expanded="true"] .lnk-faq-q-text { color: #856512; }
.lnk-faq .lnk-faq-chevron {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1.5px solid var(--v4-border);
  border-radius: var(--v4-control-radius);
  color: var(--v4-muted);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: background 300ms, border-color 300ms, color 300ms, transform 400ms var(--ease);
}
.lnk-faq .lnk-faq-chevron svg { display: none; }
.lnk-faq .lnk-faq-chevron::before { content: "+"; }
.lnk-faq .lnk-faq-item[aria-expanded="true"] .lnk-faq-chevron {
  background: var(--v4-gold);
  border-color: var(--v4-gold);
  color: var(--v4-navy);
  transform: rotate(45deg);
}
.lnk-faq-body { transition: grid-template-rows 480ms var(--ease); }
.lnk-faq-body-inner p { color: #59667a; line-height: 2.1; padding: 0 24px 24px; }
.lnk-faq-cta { margin-top: 48px; }

/* Final choice: warm, calm, and lighter than a sales block. */
.decision-inner { max-width: 1100px; }
.decision-title { max-width: 850px; margin: 0 auto 18px; color: var(--v4-ink); font-size: clamp(27px, 2.8vw, 36px); }
.decision-sub { max-width: 760px; margin-bottom: 48px; color: var(--v4-muted); font-size: 15px; line-height: 2.05; }
.decision-section-title { margin-bottom: 32px; color: var(--v4-ink); font-size: clamp(25px, 2.6vw, 33px); }
.decision-grid { max-width: 1030px; margin-inline: auto; gap: 24px; }
.decision-card {
  padding: 32px;
  border-radius: var(--v4-card-radius);
  box-shadow: var(--v4-shadow);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.decision-card:hover { transform: translateY(-3px); box-shadow: var(--v4-shadow-hover); }
.decision-card.ai { border: 1px solid rgba(216, 174, 53, .38) !important; background: #fff; }
.decision-card.vip { border: 1px solid var(--v4-border); background: rgba(255, 254, 250, .72); }
.decision-card-title { font-size: 19px; line-height: 1.7; }
.decision-card-text { color: #5d697d; line-height: 2; }

/* One button language across the entire page. */
.compare-btn,
.cases-cta,
.lnk-faq-cta-btn,
.decision-btn {
  border-radius: var(--v4-button-radius);
  font-family: var(--f-semibold);
  font-weight: 600;
  transition: transform 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.compare-btn:hover,
.cases-cta:hover,
.lnk-faq-cta-btn:hover,
.decision-btn:hover { transform: translateY(-2px); }
.compare-btn.solid-gold,
.lnk-faq-cta-btn,
.decision-btn.gold { background: var(--v4-gold); color: var(--v4-navy); box-shadow: 0 12px 28px -20px rgba(216, 174, 53, .65); }
.compare-btn.solid-gold:hover,
.lnk-faq-cta-btn:hover,
.decision-btn.gold:hover { background: #e2ba47; box-shadow: 0 16px 32px -20px rgba(216, 174, 53, .76); }
.decision-btn.outline { border-width: 1px !important; }

/* Shared V4 action system: one size, type, radius and interaction language. */
.hero .hero-cta .btn,
.compare-btn,
.cases-cta,
.lnk-faq-cta-btn,
.decision-btn {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--v4-button-radius);
  font-family: var(--f-semibold);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  transition:
    transform 280ms var(--ease),
    background 280ms var(--ease),
    border-color 280ms var(--ease),
    color 280ms var(--ease),
    box-shadow 280ms var(--ease);
}

.lnk-cta,
.lnk-mobile-nav-cta .lnk-cta {
  min-height: 40px;
  padding: 8px 20px;
  border-radius: var(--v4-compact-radius);
  font-family: var(--f-semibold);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition:
    transform 280ms var(--ease),
    background 280ms var(--ease),
    color 280ms var(--ease),
    box-shadow 280ms var(--ease);
}

.lnk-burger,
.lnk-mobile-close,
.player-play-btn,
.lnk-footer-social {
  border-radius: var(--v4-compact-radius);
}

.lnk-burger,
.lnk-mobile-close,
.player-play-btn,
.lnk-footer-social {
  width: 40px;
  height: 40px;
}

.player-play-btn {
  flex-basis: 40px;
  transition: transform 280ms var(--ease), background 280ms var(--ease), box-shadow 280ms var(--ease);
}

.hero .hero-cta .btn:hover,
.compare-btn:hover,
.cases-cta:hover,
.lnk-faq-cta-btn:hover,
.decision-btn:hover,
.lnk-cta:hover,
.player-play-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.lnk-cta:hover {
  background: #e2ba47;
  box-shadow: 0 12px 28px -20px rgba(216, 174, 53, .65);
}

.hero .hero-cta .btn:active,
.compare-btn:active,
.cases-cta:active,
.lnk-faq-cta-btn:active,
.decision-btn:active,
.lnk-cta:active,
.player-play-btn:active {
  transform: translateY(0) scale(1);
}

/* Compact footer remains useful without becoming another section. */
.lnk-footer-main { max-width: 1180px; padding: 48px 24px 32px; gap: 48px; }
.lnk-footer-logo { margin-bottom: 12px; }
.lnk-footer-logo img { height: 50px; }
.lnk-footer-tagline { font-size: 12.5px; line-height: 1.85; }
.lnk-footer-col-title { margin-bottom: 16px; font-family: var(--f-semibold); font-size: 15px; font-weight: 600; }
.lnk-footer-links { gap: 8px; }
.lnk-footer-links a,
.lnk-footer-email { font-size: 12.5px; }
.lnk-footer-email { margin-bottom: 16px; }
.lnk-footer-bottom-inner { padding: 12px 24px; }
.lnk-footer-copyright { font-size: 10.5px; }

/* Accessible focus treatment shared by V4 interactive controls. */
.compare-btn:focus-visible,
.cases-cta:focus-visible,
.lnk-faq-q:focus-visible,
.lnk-faq-cta-btn:focus-visible,
.decision-btn:focus-visible,
.hero .hero-cta .btn:focus-visible,
.lnk-cta:focus-visible,
.lnk-burger:focus-visible,
.lnk-mobile-close:focus-visible,
.player-play-btn:focus-visible,
.player-seek:focus-visible,
.lnk-footer-social:focus-visible {
  outline: 2px solid var(--v4-gold);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 158px; }
  .method-grid { gap: 16px; }
  .methodology-outline-card { padding: 24px !important; }
}

@media (max-width: 860px) {
  :root { --v4-space: 96px; }
  .compare-grid { grid-template-columns: 1fr; max-width: 650px; }
  .method-grid,
  .cases-grid,
  .decision-grid { max-width: 650px; margin-inline: auto; }
  .methodology-outline-card { min-height: 0; }
  .lnk-footer-main { padding: 48px 24px 32px; }
}

@media (max-width: 560px) {
  :root { --v4-space: 64px; }
  .hero { min-height: max(680px, 94svh); }
  .hero .hero-inner { padding-bottom: 64px; }
  .stats-band,
  .method-band,
  .compare-band,
  .cases-band,
  .lnk-faq,
  .decision-band { padding-inline: 16px; }
  .stats-section-title,
  .method-title,
  .path-selection-title,
  .cases-band .h-section,
  .lnk-faq-title,
  .decision-title { font-size: clamp(25px, 7.6vw, 31px); }
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-card { min-height: 132px; padding: 24px; }
  .stat-card::after { inset-inline: 24px; }
  .stat-num { margin-bottom: 12px; font-size: 30px; }
  .method-grid,
  .compare-grid,
  .cases-grid,
  .decision-grid { gap: 16px; }
  .methodology-outline-card,
  .compare-card,
  .case-card,
  .decision-card { padding: 24px !important; }
  .method-title::before,
  .method-title::after { width: 16px !important; }
  .case-audio-player { padding: 12px; }
  .lnk-faq-head { margin-bottom: 32px; }
  .lnk-faq-q { min-height: 62px; padding: 16px; gap: 12px; }
  .lnk-faq-q-text { font-size: 14px; }
  .lnk-faq-body-inner p { padding: 0 16px 16px; font-size: 13px; }
  .decision-sub { margin-bottom: 32px; font-size: 14px; }
  .decision-section-title { margin-bottom: 24px; font-size: 23px; }
  .lnk-footer-main { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 32px 24px 24px; }
  .lnk-footer-brand { grid-column: 1 / -1; }
  .lnk-footer-logo img { height: 46px; }
  .lnk-footer-tagline { font-size: 12px; }
  .lnk-footer-bottom-inner { padding: 8px 24px; }

  .lnk-mobile-nav-cta .lnk-cta {
    display: inline-flex;
  }

  .hero .hero-cta .btn,
  .compare-btn,
  .cases-cta,
  .lnk-faq-cta-btn,
  .decision-btn {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: var(--v4-button-radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .methodology-outline-card,
  .compare-card,
  .case-card,
  .lnk-faq-item,
  .decision-card,
  .compare-btn,
  .cases-cta,
  .lnk-faq-cta-btn,
  .decision-btn { transition-duration: .01ms !important; }

  .hero .hero-cta .btn,
  .lnk-cta,
  .lnk-burger,
  .lnk-mobile-close,
  .player-play-btn,
  .lnk-footer-social { transition-duration: .01ms !important; }
}