/* ============================================================
   Shampoo Labels Redesign · Atlas No. 19
   Theme: Shower Cycle Atlas · Wet-Environment Performance Map
   Prefix: --sh-
   Primary: Navy #0033a0 · Accent: Champagne Gold #c9a96a
   ============================================================ */

:root {
  --sh-navy: #0033a0;
  --sh-navy-deep: #001e6b;
  --sh-navy-ink: #0a1f5c;
  --sh-navy-pale: #e6ecf8;
  --sh-gold: #c9a96a;
  --sh-gold-deep: #8b6f3a;
  --sh-gold-pale: #f5ebd6;
  --sh-champagne: #d9c89a;

  --sh-ink: #0e1b3a;
  --sh-ink-2: #2a3656;
  --sh-ink-3: #5b6781;
  --sh-ink-4: #8893ab;
  --sh-line: #e3e7ef;
  --sh-line-soft: #eef1f6;
  --sh-bg: #ffffff;
  --sh-bg-alt: #f7f8fb;
  --sh-bg-deep: #f1f3f8;

  --sh-water: #1e88c4;
  --sh-water-deep: #0d5a8c;
  --sh-water-tint: #e3f0fa;
  --sh-steam: #6ba8d9;
  --sh-oil: #b8860b;
  --sh-oil-pale: #faecc5;
  --sh-heat: #d97a3a;
  --sh-heat-pale: #fbe4d2;
  --sh-chem: #8b5cf6;
  --sh-chem-pale: #ece4fb;

  --sh-pass: #2d8659;
  --sh-pass-pale: #def0e3;
  --sh-warn: #b8860b;
  --sh-warn-pale: #faecc5;
  --sh-fail: #a31515;
  --sh-fail-pale: #fbdcdc;
  --sh-info: #1e58a8;
  --sh-info-pale: #e0eef9;

  --sh-wrap: 1280px;
  --sh-pad: clamp(16px, 4vw, 40px);

  --sh-font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sh-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sh-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sh-ink);
  background: var(--sh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sh-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 {
  font-family: var(--sh-font-display);
  color: var(--sh-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; }
h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; }
h3 { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; }
p { margin: 0 0 1em; }

.sh-container { max-width: var(--sh-wrap); margin: 0 auto; padding: 0 var(--sh-pad); }
.sh-section { padding: clamp(48px, 7vw, 88px) 0; }
.sh-section--alt { background: var(--sh-bg-alt); }
.sh-section--tight { padding: clamp(32px, 4vw, 56px) 0; }
.sh-section__head { text-align: center; max-width: 1080px; margin: 0 auto clamp(32px, 4vw, 56px); }

.sh-eyebrow {
  display: inline-block;
  font-family: var(--sh-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-navy);
  background: var(--sh-navy-pale);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.sh-eyebrow--gold { color: var(--sh-gold-deep); background: var(--sh-gold-pale); }
.sh-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--sh-ink-2); line-height: 1.6; }

.sh-header { position: sticky; top: 0; z-index: 100; background: var(--sh-navy); color: #fff; box-shadow: 0 2px 14px rgba(0, 30, 100, 0.15); }
.sh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--sh-pad); max-width: var(--sh-wrap); margin: 0 auto; }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sh-font-display); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -0.02em; }
.sh-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--sh-gold); color: var(--sh-navy-deep); font-family: var(--sh-font-mono); font-size: 13px; font-weight: 700; }
.sh-nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; }
.sh-nav a { color: rgba(255, 255, 255, 0.86); text-decoration: none; font-weight: 500; transition: color .18s; }
.sh-nav a:hover { color: var(--sh-gold); }
.sh-nav a.is-active { color: #fff; position: relative; }
.sh-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--sh-gold); }
.sh-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sh-font-body); font-size: 14.5px; font-weight: 600; padding: 10px 20px; border-radius: 8px; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; cursor: pointer; border: 0; }
.sh-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sh-btn--primary { background: var(--sh-gold); color: var(--sh-navy-deep); box-shadow: 0 4px 12px rgba(201, 169, 106, 0.3); }
.sh-btn--primary:hover { background: var(--sh-champagne); }
.sh-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); }
.sh-btn--ghost:hover { border-color: var(--sh-gold); color: var(--sh-gold); }
.sh-btn--lg { padding: 14px 28px; font-size: 15.5px; }
.sh-btn--sm { padding: 8px 16px; font-size: 13.5px; }
.sh-header__toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; }

.sh-breadcrumbs { background: var(--sh-bg-alt); border-bottom: 1px solid var(--sh-line); font-size: 13.5px; color: var(--sh-ink-3); }
.sh-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--sh-pad); max-width: var(--sh-wrap); margin: 0 auto; }
.sh-breadcrumbs li { display: inline-flex; align-items: center; }
.sh-breadcrumbs li + li::before { content: '›'; margin-right: 8px; color: var(--sh-ink-4); }
.sh-breadcrumbs a { color: var(--sh-ink-2); }
.sh-breadcrumbs li[aria-current] { color: var(--sh-ink); font-weight: 600; }

.sh-hero { background: linear-gradient(180deg, var(--sh-navy-pale) 0%, #fff 100%); padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 5vw, 64px); }
.sh-hero__inner { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.sh-hero__title { font-family: var(--sh-font-display); font-size: clamp(30px, 4.5vw, 50px); font-weight: 800; line-height: 1.1; margin: 0 0 18px; color: var(--sh-ink); }
.sh-hero__title span.accent { display: inline-block; background: linear-gradient(135deg, var(--sh-navy) 0%, var(--sh-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-hero__lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--sh-ink-2); max-width: 720px; margin-bottom: 26px; }
.sh-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.sh-hero__meta { display: flex; gap: 22px; font-family: var(--sh-font-mono); font-size: 12px; color: var(--sh-ink-3); flex-wrap: wrap; }
.sh-hero__meta strong { color: var(--sh-navy); font-weight: 700; }

.sh-atlas { background: #fff; border: 1px solid var(--sh-line); border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px rgba(14, 27, 58, 0.06); margin-top: 8px; }
.sh-atlas__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--sh-line); }
.sh-atlas__no { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--sh-gold-deep); background: var(--sh-gold-pale); padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.sh-atlas__title { font-family: var(--sh-font-display); font-size: 15px; font-weight: 700; color: var(--sh-ink); flex: 1; min-width: 200px; }
.sh-atlas__meta { font-family: var(--sh-font-mono); font-size: 11px; color: var(--sh-ink-3); }
.sh-atlas__sub { font-family: var(--sh-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--sh-water-deep); text-transform: uppercase; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sh-line-soft); display: flex; justify-content: space-between; align-items: center; }
.sh-atlas__sub-tag { font-family: var(--sh-font-body); font-size: 10.5px; font-weight: 500; color: var(--sh-ink-3); text-transform: none; letter-spacing: 0; }

.sh-cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sh-cycle__phase { background: var(--sh-bg-alt); border: 1px solid var(--sh-line); border-radius: 10px; padding: 12px 10px 10px; position: relative; overflow: hidden; }
.sh-cycle__no { font-family: var(--sh-font-mono); font-size: 9.5px; color: var(--sh-ink-4); letter-spacing: 0.1em; font-weight: 700; }
.sh-cycle__name { font-family: var(--sh-font-display); font-size: 12.5px; font-weight: 700; color: var(--sh-ink); margin: 2px 0 4px; line-height: 1.2; }
.sh-cycle__time { font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-water-deep); margin-bottom: 8px; font-weight: 600; }
.sh-cycle__bars { display: flex; flex-direction: column; gap: 4px; }
.sh-cycle__bar { display: flex; align-items: center; gap: 5px; font-family: var(--sh-font-mono); font-size: 9px; color: var(--sh-ink-3); }
.sh-cycle__bar-label { width: 28px; text-align: right; font-weight: 600; }
.sh-cycle__bar-track { flex: 1; height: 5px; background: var(--sh-line); border-radius: 3px; overflow: hidden; position: relative; }
.sh-cycle__bar-fill { display: block; height: 100%; border-radius: 3px; }
.sh-cycle__phase--splash .sh-cycle__bar-fill.water { width: 75%; background: var(--sh-water); }
.sh-cycle__phase--splash .sh-cycle__bar-fill.heat  { width: 28%; background: var(--sh-heat); }
.sh-cycle__phase--splash .sh-cycle__bar-fill.chem  { width: 18%; background: var(--sh-chem); }
.sh-cycle__phase--lather .sh-cycle__bar-fill.water { width: 60%; background: var(--sh-water); }
.sh-cycle__phase--lather .sh-cycle__bar-fill.heat  { width: 45%; background: var(--sh-heat); }
.sh-cycle__phase--lather .sh-cycle__bar-fill.chem  { width: 85%; background: var(--sh-chem); }
.sh-cycle__phase--rinse  .sh-cycle__bar-fill.water { width: 100%; background: var(--sh-water-deep); }
.sh-cycle__phase--rinse  .sh-cycle__bar-fill.heat  { width: 88%; background: var(--sh-heat); }
.sh-cycle__phase--rinse  .sh-cycle__bar-fill.chem  { width: 32%; background: var(--sh-chem); }
.sh-cycle__phase--steam  .sh-cycle__bar-fill.water { width: 70%; background: var(--sh-steam); }
.sh-cycle__phase--steam  .sh-cycle__bar-fill.heat  { width: 78%; background: var(--sh-heat); }
.sh-cycle__phase--steam  .sh-cycle__bar-fill.chem  { width: 12%; background: var(--sh-chem); }
.sh-cycle__phase--dry    .sh-cycle__bar-fill.water { width: 22%; background: var(--sh-steam); }
.sh-cycle__phase--dry    .sh-cycle__bar-fill.heat  { width: 18%; background: var(--sh-heat); }
.sh-cycle__phase--dry    .sh-cycle__bar-fill.chem  { width: 8%;  background: var(--sh-chem); }

.sh-matrix-wrap { overflow-x: auto; }
.sh-matrix { width: 100%; min-width: 580px; border-collapse: separate; border-spacing: 5px; font-size: 11.5px; }
.sh-matrix th, .sh-matrix td { padding: 8px 6px; text-align: center; border-radius: 6px; }
.sh-matrix thead th { background: var(--sh-navy); color: #fff; font-family: var(--sh-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sh-matrix th.sh-matrix__row-head { background: var(--sh-bg-alt); color: var(--sh-ink); font-family: var(--sh-font-display); font-weight: 600; text-align: left; padding: 8px 12px; font-size: 12px; width: 200px; }
.sh-matrix__rating { font-family: var(--sh-font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; }
.sh-matrix__rating--exc { background: var(--sh-pass-pale); color: var(--sh-pass); }
.sh-matrix__rating--good { background: var(--sh-info-pale); color: var(--sh-info); }
.sh-matrix__rating--mod { background: var(--sh-warn-pale); color: var(--sh-warn); }
.sh-matrix__rating--poor { background: var(--sh-fail-pale); color: var(--sh-fail); }

.sh-bottles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sh-bottle { background: #fff; border: 1px solid var(--sh-line); border-radius: 10px; padding: 12px 8px 10px; text-align: center; position: relative; }
.sh-bottle__shape { width: 100%; height: 60px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.sh-bottle__shape svg { display: block; }
.sh-bottle__vol { font-family: var(--sh-font-display); font-size: 14px; font-weight: 700; color: var(--sh-navy); margin-bottom: 2px; }
.sh-bottle__type { font-size: 10.5px; color: var(--sh-ink-3); margin-bottom: 6px; line-height: 1.2; min-height: 26px; }
.sh-bottle__size { font-family: var(--sh-font-mono); font-size: 9.5px; color: var(--sh-gold-deep); background: var(--sh-gold-pale); padding: 3px 6px; border-radius: 4px; font-weight: 700; display: inline-block; }

.sh-formula { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sh-formula__chip { background: #fff; border: 1px solid var(--sh-line); border-radius: 10px; padding: 10px 8px; text-align: center; }
.sh-formula__name { font-family: var(--sh-font-display); font-size: 11.5px; font-weight: 700; color: var(--sh-ink); margin-bottom: 6px; line-height: 1.2; min-height: 28px; }
.sh-formula__bar { height: 6px; background: var(--sh-line); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.sh-formula__bar::after { content: ''; display: block; height: 100%; border-radius: 3px; }
.sh-formula__chip--std      .sh-formula__bar::after { width: 96%; background: linear-gradient(90deg, var(--sh-pass), #1f6e47); }
.sh-formula__chip--sulfate  .sh-formula__bar::after { width: 92%; background: linear-gradient(90deg, var(--sh-pass), var(--sh-info)); }
.sh-formula__chip--oil      .sh-formula__bar::after { width: 88%; background: linear-gradient(90deg, var(--sh-info), var(--sh-warn)); }
.sh-formula__chip--silicone .sh-formula__bar::after { width: 82%; background: linear-gradient(90deg, var(--sh-warn), var(--sh-oil)); }
.sh-formula__chip--natural  .sh-formula__bar::after { width: 78%; background: linear-gradient(90deg, var(--sh-info), var(--sh-warn)); }
.sh-formula__score { font-family: var(--sh-font-mono); font-size: 9.5px; font-weight: 700; color: var(--sh-ink-3); letter-spacing: 0.05em; }
.sh-formula__chip--std      .sh-formula__score { color: var(--sh-pass); }
.sh-formula__chip--sulfate  .sh-formula__score { color: var(--sh-pass); }
.sh-formula__chip--oil      .sh-formula__score { color: var(--sh-info); }
.sh-formula__chip--silicone .sh-formula__score { color: var(--sh-warn); }
.sh-formula__chip--natural  .sh-formula__score { color: var(--sh-info); }

.sh-bond { background: var(--sh-bg-alt); border: 1px solid var(--sh-line); border-radius: 10px; padding: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.sh-bond__phase { text-align: center; position: relative; }
.sh-bond__phase:not(:last-child)::after { content: ''; position: absolute; top: 18px; right: -8px; width: 14px; height: 1.5px; background: var(--sh-line); }
.sh-bond__dot { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2.5px solid var(--sh-navy); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; color: var(--sh-navy); position: relative; z-index: 2; }
.sh-bond__phase--wet .sh-bond__dot { border-color: var(--sh-water-deep); color: var(--sh-water-deep); }
.sh-bond__label { font-family: var(--sh-font-mono); font-size: 9.5px; font-weight: 700; color: var(--sh-ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.sh-bond__time { font-family: var(--sh-font-display); font-size: 11.5px; font-weight: 700; color: var(--sh-ink); margin-bottom: 6px; }
.sh-bond__strength { height: 5px; background: var(--sh-line); border-radius: 3px; overflow: hidden; margin: 0 auto; width: 80%; }
.sh-bond__strength::after { content: ''; display: block; height: 100%; }
.sh-bond__phase--initial .sh-bond__strength::after { width: 70%; background: var(--sh-water); }
.sh-bond__phase--early   .sh-bond__strength::after { width: 88%; background: var(--sh-navy); }
.sh-bond__phase--mid     .sh-bond__strength::after { width: 92%; background: var(--sh-navy); }
.sh-bond__phase--late    .sh-bond__strength::after { width: 86%; background: var(--sh-navy-deep); }
.sh-bond__phase--wet     .sh-bond__strength::after { width: 78%; background: var(--sh-water-deep); }
.sh-bond__pct { font-family: var(--sh-font-mono); font-size: 9px; color: var(--sh-ink-4); margin-top: 3px; font-weight: 600; }

.sh-cross { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: center; }
.sh-cross__stack { display: flex; flex-direction: column; gap: 0; background: var(--sh-bg-alt); border: 1px solid var(--sh-line); border-radius: 10px; padding: 14px; }
.sh-cross__layer { display: flex; align-items: center; padding: 6px 12px; border-radius: 6px; font-family: var(--sh-font-mono); font-size: 10.5px; font-weight: 600; color: var(--sh-ink-2); position: relative; }
.sh-cross__layer--laminate { background: linear-gradient(90deg, var(--sh-water-tint), #c5dde9); height: 24px; margin-bottom: 1px; }
.sh-cross__layer--ink { background: linear-gradient(90deg, var(--sh-navy-ink), var(--sh-navy-deep)); height: 18px; color: #fff; margin-bottom: 1px; }
.sh-cross__layer--film { background: linear-gradient(90deg, #fff, #e8ecf2); height: 40px; border: 1px solid var(--sh-line); margin-bottom: 1px; color: var(--sh-ink); }
.sh-cross__layer--adhesive { background: linear-gradient(90deg, var(--sh-oil-pale), #f8d99a); height: 18px; margin-bottom: 1px; }
.sh-cross__layer--bottle { background: linear-gradient(90deg, var(--sh-navy-pale), #b8c8e0); height: 30px; }
.sh-cross__layer-tag { margin-left: auto; font-size: 9.5px; color: var(--sh-ink-3); font-weight: 500; }
.sh-cross__info { background: #fff; border: 1px solid var(--sh-line); border-radius: 10px; padding: 14px; }
.sh-cross__info h5 { font-family: var(--sh-font-display); font-size: 12px; font-weight: 700; color: var(--sh-navy); margin: 0 0 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.sh-cross__info p { font-size: 11.5px; margin: 0 0 6px; color: var(--sh-ink-2); line-height: 1.4; }
.sh-cross__info strong { color: var(--sh-ink); font-weight: 600; }

.sh-atlas__footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--sh-line); }
.sh-sig { background: var(--sh-bg-alt); border: 1px solid var(--sh-line); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.sh-sig__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--sh-gold-pale); color: var(--sh-gold-deep); display: flex; align-items: center; justify-content: center; }
.sh-sig--premium .sh-sig__icon { background: linear-gradient(135deg, var(--sh-gold-pale), var(--sh-champagne)); color: var(--sh-gold-deep); }
.sh-sig__body { flex: 1; min-width: 0; }
.sh-sig__title { font-family: var(--sh-font-display); font-size: 12px; font-weight: 700; color: var(--sh-ink); margin-bottom: 2px; }
.sh-sig__detail { font-family: var(--sh-font-mono); font-size: 10.5px; color: var(--sh-ink-3); line-height: 1.4; }

.sh-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(14, 27, 58, 0.04); margin-top: -30px; position: relative; z-index: 2; }
.sh-trust__cell { display: flex; align-items: center; gap: 12px; }
.sh-trust__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--sh-navy-pale); color: var(--sh-navy); display: flex; align-items: center; justify-content: center; }
.sh-trust__text { font-family: var(--sh-font-display); font-weight: 700; font-size: 13.5px; color: var(--sh-ink); line-height: 1.2; }
.sh-trust__sub { font-family: var(--sh-font-mono); font-size: 10.5px; color: var(--sh-ink-3); margin-top: 2px; }

.sh-geo { background: var(--sh-navy-pale); border-left: 4px solid var(--sh-gold); padding: 22px 28px; border-radius: 0 12px 12px 0; font-size: 16px; line-height: 1.75; color: var(--sh-ink-2); font-style: italic; }
.sh-geo strong { color: var(--sh-navy); font-style: normal; font-weight: 600; }

.sh-grid { display: grid; gap: 18px; }
.sh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sh-card { background: #fff; border: 1px solid var(--sh-line); border-radius: 12px; padding: 22px 20px; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; }
.sh-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14, 27, 58, 0.08); border-color: var(--sh-navy); }
.sh-card--premium { border-color: var(--sh-gold); background: linear-gradient(180deg, #fff 0%, var(--sh-gold-pale) 100%); }
.sh-card--premium:hover { border-color: var(--sh-gold-deep); }
.sh-card__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--sh-navy-pale); color: var(--sh-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sh-card--premium .sh-card__icon { background: var(--sh-gold); color: var(--sh-navy-deep); }
.sh-card__title { font-family: var(--sh-font-display); font-size: 15px; font-weight: 700; color: var(--sh-ink); margin-bottom: 6px; }
.sh-card__body { font-size: 13.5px; color: var(--sh-ink-2); line-height: 1.55; margin-bottom: 12px; }
.sh-card__tag { display: inline-block; font-family: var(--sh-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.sh-card__tag--gold { background: var(--sh-gold); color: var(--sh-navy-deep); }
.sh-card__tag--standard { background: var(--sh-bg-deep); color: var(--sh-ink-3); }

.sh-table-wrap { overflow-x: auto; }
.sh-table { width: 100%; min-width: 580px; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; border: 1px solid var(--sh-line); border-radius: 12px; overflow: hidden; }
.sh-table thead { background: var(--sh-navy); color: #fff; }
.sh-table th { padding: 14px 16px; text-align: left; font-family: var(--sh-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sh-table td { padding: 14px 16px; border-top: 1px solid var(--sh-line); vertical-align: top; }
.sh-table tbody tr:nth-child(even) { background: var(--sh-bg-alt); }
.sh-table tbody tr:hover { background: var(--sh-navy-pale); }
.sh-table td.sh-table__accent { font-family: var(--sh-font-display); font-weight: 600; color: var(--sh-navy); }
.sh-pill { display: inline-block; font-family: var(--sh-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.sh-pill--gold { background: var(--sh-gold); color: var(--sh-navy-deep); }

.sh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sh-list-check { list-style: none; padding: 0; margin: 0; }
.sh-list-check li { position: relative; padding: 8px 0 8px 28px; font-size: 14px; color: var(--sh-ink-2); border-bottom: 1px dashed var(--sh-line); line-height: 1.5; }
.sh-list-check li::before { content: ''; position: absolute; left: 0; top: 14px; width: 16px; height: 16px; background: var(--sh-navy); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/>"); background-size: 11px; background-repeat: no-repeat; background-position: center; }

.sh-faq { background: #fff; border: 1px solid var(--sh-line); border-radius: 12px; overflow: hidden; }
.sh-faq__item { border-bottom: 1px solid var(--sh-line); }
.sh-faq__item:last-child { border-bottom: none; }
.sh-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; font-family: var(--sh-font-display); font-weight: 600; font-size: 15.5px; color: var(--sh-ink); background: #fff; border: 0; width: 100%; text-align: left; transition: background .15s; }
.sh-faq__q:hover { background: var(--sh-bg-alt); }
.sh-faq__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--sh-navy); transition: transform .25s; }
.sh-faq__item.is-open .sh-faq__icon { transform: rotate(45deg); }
.sh-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 22px; }
.sh-faq__item.is-open .sh-faq__a { max-height: 320px; padding-bottom: 18px; }
.sh-faq__a p { margin: 0; font-size: 14px; color: var(--sh-ink-2); line-height: 1.65; }

.sh-sample { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: linear-gradient(135deg, var(--sh-navy) 0%, var(--sh-navy-deep) 100%); color: #fff; padding: 28px 32px; border-radius: 16px; position: relative; overflow: hidden; }
.sh-sample::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, var(--sh-gold) 0%, transparent 70%); opacity: 0.3; }
.sh-sample__eyebrow { font-family: var(--sh-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--sh-gold); text-transform: uppercase; margin-bottom: 8px; }
.sh-sample__title { font-family: var(--sh-font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; margin-bottom: 8px; }
.sh-sample__body { font-size: 14.5px; color: rgba(255, 255, 255, 0.85); margin-bottom: 16px; max-width: 540px; }
.sh-sample__price { text-align: center; position: relative; z-index: 1; }
.sh-sample__price strong { display: block; font-family: var(--sh-font-display); font-size: clamp(36px, 5vw, 52px); font-weight: 800; color: var(--sh-gold); line-height: 1; }
.sh-sample__price span { display: block; font-family: var(--sh-font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }

.sh-cta-band { background: var(--sh-navy); color: #fff; padding: clamp(48px, 6vw, 80px) 0; text-align: center; position: relative; overflow: hidden; }
.sh-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(201, 169, 106, 0.18) 0%, transparent 60%); }
.sh-cta-band__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--sh-pad); position: relative; z-index: 1; }
.sh-cta-band h2 { color: #fff; margin-bottom: 14px; }
.sh-cta-band p { font-size: 16px; color: rgba(255, 255, 255, 0.85); margin-bottom: 26px; }
.sh-cta-band .sh-btn--ghost { border-color: rgba(255, 255, 255, 0.4); }

.sh-footer { background: var(--sh-navy-ink); color: rgba(255, 255, 255, 0.78); padding: 56px 0 24px; font-size: 13.5px; }
.sh-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 36px; }
.sh-footer__brand { font-family: var(--sh-font-display); font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
.sh-footer h4 { font-family: var(--sh-font-display); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.sh-footer ul { list-style: none; padding: 0; margin: 0; }
.sh-footer li { margin-bottom: 7px; }
.sh-footer a { color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.sh-footer a:hover { color: var(--sh-gold); text-decoration: underline; }
.sh-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, 0.55); }

.sh-sticky { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 30, 100, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; padding: 12px var(--sh-pad); z-index: 90; transform: translateY(100%); transition: transform .3s ease; border-top: 1px solid rgba(201, 169, 106, 0.3); }
.sh-sticky.is-visible { transform: translateY(0); }
.sh-sticky__inner { max-width: var(--sh-wrap); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-sticky__msg { font-family: var(--sh-font-display); font-size: 14.5px; font-weight: 600; }
.sh-sticky__msg strong { color: var(--sh-gold); }
.sh-sticky__actions { display: flex; gap: 10px; }

.sh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.sh-reveal.is-visible { opacity: 1; transform: translateY(0); }

.sh-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sh-link-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--sh-line); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.sh-link-card:hover { transform: translateY(-2px); border-color: var(--sh-navy); box-shadow: 0 6px 16px rgba(14, 27, 58, 0.06); text-decoration: none; }
.sh-link-card__title { font-family: var(--sh-font-display); font-size: 13.5px; font-weight: 700; color: var(--sh-ink); margin-bottom: 2px; }
.sh-link-card__desc { font-size: 11.5px; color: var(--sh-ink-3); line-height: 1.3; }
.sh-link-card__arrow { color: var(--sh-navy); font-size: 18px; font-weight: 700; flex-shrink: 0; margin-left: 12px; }

@media (max-width: 1100px) {
  .sh-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sh-related { grid-template-columns: repeat(2, 1fr); }
  .sh-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .sh-nav { display: none; }
  .sh-header__toggle { display: inline-flex; }
  .sh-header.is-open .sh-nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--sh-navy); padding: 18px var(--sh-pad); gap: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
  .sh-footer__grid { grid-template-columns: 1fr 1fr; }
  .sh-cross { grid-template-columns: 1fr; }
  .sh-split { grid-template-columns: 1fr; }
  .sh-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sh-atlas__footer { grid-template-columns: 1fr; }
  .sh-cycle { grid-template-columns: repeat(2, 1fr); }
  .sh-bottles { grid-template-columns: repeat(3, 1fr); }
  .sh-formula { grid-template-columns: repeat(2, 1fr); }
  .sh-bond { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sh-bond__phase:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .sh-grid--4, .sh-grid--3, .sh-grid--2 { grid-template-columns: 1fr; }
  .sh-related { grid-template-columns: 1fr; }
  .sh-trust { grid-template-columns: 1fr; }
  .sh-footer__grid { grid-template-columns: 1fr; }
  .sh-cycle { grid-template-columns: 1fr; }
  .sh-bottles { grid-template-columns: repeat(2, 1fr); }
  .sh-formula { grid-template-columns: 1fr; }
  .sh-bond { grid-template-columns: 1fr; }
  .sh-sample { grid-template-columns: 1fr; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .sh-reveal { opacity: 1; transform: none; }
}