/* styles.css — luxury-premium, high-contrast, zero deps */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-1: 0 12px 35px rgba(0,0,0,.12);
  --shadow-2: 0 18px 60px rgba(0,0,0,.18);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px; /* section padding top/bottom */
  --space-6: 46px;
  --space-7: 72px;
  --container: 1120px;
  --container-pad: 18px;
}

html[data-theme="light"]{
  --bg: #F7F6F1;
  --surface: #FFFFFF;
  --surface-2: #F2F0EA;
  --text: #0B0F0D;
  --muted: #334239;      /* 4.5+:1 vs bg */
  --border: #D8D5CC;     /* 3+:1 vs surface */
  --accent: #0F6B4F;
  --accent-2: #B1862B;   /* gold */
  --accent-contrast: #FFFFFF;
  --link: #0B5B43;
  --focus: #1D4ED8;      /* blue ring, high contrast */
  --hero-overlay: rgba(247,246,241,.86);
  --hero-overlay-2: rgba(11,15,13,.06);
}

html[data-theme="dark"]{
  --bg: #070B09;
  --surface: #0C1310;
  --surface-2: #121D18;
  --text: #F6F7F6;
  --muted: #B8C5BB;
  --border: #2B3A32;
  --accent: #34C28B;
  --accent-2: #D1AD58;
  --accent-contrast: #07110C;
  --link: #55E3AD;
  --focus: #F7D23E;      /* gold ring */
  --hero-overlay: rgba(7,11,9,.78);
  --hero-overlay-2: rgba(52,194,139,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block; margin-inline:auto}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible, button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:10px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Layout */
.container{
  width:min(var(--container), calc(100% - 2*var(--container-pad)));
  margin-inline:auto;
}

.section{
  padding-block: var(--space-5);
  border-top:1px solid var(--border);
}

.section > h2{
  margin:0;
  padding-top: var(--space-3);
  padding-bottom: 10px; /* required */
  letter-spacing:-.02em;
  font-size: clamp(22px, 2.4vw, 34px);
}

h3{
  margin:0;
  padding-top: var(--space-3);
  padding-bottom: 10px;
  font-size: 18px;
  letter-spacing:-.01em;
}

p{margin:0 0 12px}
.lead{font-size: 18px; color: var(--muted)}
.lead--tight{margin-top:6px}
.muted{color:var(--muted)}

.skipLink{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  transform: translateY(-140%);
  z-index: 9999;
}
.skipLink:focus{transform:none}

/* Header + navbar */
.siteHeader{position:relative}
.progress{
  height:4px;
  width:100%;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  position: sticky;
  top:0;
  z-index:80;
}
.progress__bar{
  height:100%;
  width:100%;
  transform-origin:left;
  transform:scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.navWrap{
  position: sticky;
  top:4px;
  z-index:70;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid var(--border);
}
@supports (backdrop-filter: blur(10px)){
  .navWrap{
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: blur(12px);
  }
}

.nav{
  width:min(var(--container), calc(100% - 2*var(--container-pad)));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap:12px;
}

.nav__brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text);
  font-weight:800;
  letter-spacing:-.02em;
}
.mark{
  width:28px; height:28px; border-radius:10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.brand__text{font-size:16px}

.nav__links{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav__links a{
  padding:10px 10px;
  border-radius:12px;
  color:var(--text);
  font-weight:650;
}
.nav__links a:hover{
  text-decoration:none;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.nav__actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.themeToggle{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.themeToggle__icon{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 60%, transparent);
}
.themeToggle--wide{width:100%; justify-content:center}
.themeToggle__label{font-weight:700}

.langPicker{position:relative}
.langPicker__btn{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.langPicker__menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 220px;
  max-width: 280px;
  padding: 8px;
  margin:0;
  list-style:none;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  z-index:200;
}
.langPicker__item{
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
  font-weight:700;
}
.langPicker__item:hover{background: color-mix(in srgb, var(--surface-2) 85%, transparent)}
.langPicker__item:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

.nav__burger{
  display:none;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  min-height:44px;
  cursor:pointer;
}
.nav__burger span{
  display:block;
  width:22px;
  height:2px;
  background: var(--text);
  border-radius: 999px;
  margin:4px 0;
}

/* Mobile menu */
.mobileMenu{position:fixed; inset:0; z-index:300}
.mobileMenu__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
.mobileMenu__panel{
  position:absolute;
  right:0; top:0; bottom:0;
  width:min(92vw, 360px);
  background: var(--bg);
  border-left:1px solid var(--border);
  padding: 16px;
  box-shadow: var(--shadow-2);
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.mobileMenu__close{
  align-self:flex-end;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  min-height:44px;
  cursor:pointer;
}
.mobileMenu__links{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.mobileMenu__links a{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 750;
}
.mobileMenu__links a:hover{text-decoration:none}
.mobileMenu__tools{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.noScroll{overflow:hidden}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding: var(--space-6) 0 var(--space-7);
  border-bottom:1px solid var(--border);
}

.hero__bg{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero__bgImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.03);
}
.hero__bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 12% 12%, var(--hero-overlay-2), transparent 60%),
    linear-gradient(180deg, var(--hero-overlay), color-mix(in srgb, var(--bg) 92%, transparent));
  z-index:1;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 320px at 70% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 55%);
  opacity:.85;
  z-index:2;
}

.hero__grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items:center;
}
.hero__grid > *, .hero__content, .hero__media{min-width:0}
.eyebrow{
  display:inline-flex;
  max-width:100%;
  padding: 8px 12px;
  border:1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:12px;
  margin: 0 0 14px;
}

.hero h1{
  margin:0;
  font-size: clamp(30px, 3.2vw, 48px);
  letter-spacing: -0.03em;
  line-height:1.06;
}

.affNote{
  color: var(--text);
  background: color-mix(in srgb, var(--accent-2) 25%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
  padding: 2px 8px;
  border-radius: 999px;
  white-space: normal;
  display:inline-block;
  max-width:100%;
}

.hero__checks{
  list-style:none;
  padding:0;
  margin: 16px 0 18px;
  display:grid;
  gap:10px;
}
.hero__checks li{
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 650;
  color: var(--text);
}
.hero__checks li::before{
  content:"✓";
  color: var(--accent);
  font-weight:900;
  margin-right:10px;
}

.ctaRow{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.ctaRow--center{justify-content:center}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  min-height: 48px;
  font-weight: 850;
  letter-spacing: -0.01em;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn--primary{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--accent-2)));
  color: var(--accent-contrast);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: 0 14px 35px rgba(0,0,0,.16);
}
.btn--primary:hover{
  filter: brightness(1.03);
}
.btn--ghost{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
}

.trustRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.trustChip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-weight:800;
}
.trustChip span{color: var(--text)}
.trustChip img{width:22px; height:22px; margin:0}

.hero__figure{
  position:relative;
  width:min(460px, 100%);
  margin-inline:auto;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #faf9f6, #efede7);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.65);
}
.hero__figure::after{
  content:"";
  position:absolute;
  left:8%; right:8%; bottom:10px;
  height:24px;
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent 72%);
  filter: blur(8px);
  z-index:0;
}
.hero__packshot{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.16));
}
html[data-theme="light"] .hero__packshot,
html[data-theme="light"] .priceCard__img img{mix-blend-mode:multiply}
html[data-theme="dark"] .hero__figure,
html[data-theme="dark"] .priceCard__img{
  background: linear-gradient(180deg, #fbfaf7, #ece8e1);
}
.hero__float,
.hero__float img,
.hero__float--a,
.hero__float--b{display:none !important}

/* Content grids */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.card{
  grid-column: span 6;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 16px 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.card--callout{
  background: radial-gradient(600px 320px at 20% 20%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
              var(--surface);
}
.card--list{
  grid-column: span 12;
}

.list, .bullets{
  margin: 0;
  padding-left: 18px;
  text-align:left;
}
.bullets{
  columns: 2;
  column-gap: 18px;
}
.bullets li{break-inside:avoid; margin: 0 0 8px}

/* Stats */
.stats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  text-align:center;
}
.stat__k{
  margin:0;
  font-size: 22px;
  font-weight: 920;
  letter-spacing:-.02em;
}
.stat__v{
  margin:0;
  color: var(--muted);
  font-weight: 700;
}

/* Media */
.media{margin-top:14px}
.media__figure{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-2);
}
.media__figure img{
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Pricing */
.pricingGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.priceCard{
  grid-column: span 4;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-2);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.badge{
  display:inline-flex;
  align-self:flex-start;
  margin:0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
  font-weight: 900;
  letter-spacing:.02em;
}
.priceCard__qty{margin: 0 0 10px; color: var(--muted); font-weight:800}
.priceCard__img{
  background: linear-gradient(180deg, #faf9f6, #efede7);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 10px;
  overflow:hidden;
}
.priceCard__img img{
  object-fit:contain;
  width:100%;
  height:auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.14));
}
.price{
  margin: 12px 0 6px;
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.price__num{font-size: 30px; font-weight: 950; letter-spacing:-.02em}
.price__unit{color:var(--muted); font-weight:800}
.priceCard__cta{margin-top:auto; padding-top:12px}
.priceCard__cta .btn{width:100%}

/* FAQ */
.faqList{display:grid; gap: 10px; margin-top: 10px}
.faqItem{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 12px 12px;
}
.faqBtn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  text-align:left;
  border:none;
  background:transparent;
  color: var(--text);
  font-weight: 900;
  font-size: 16px;
  padding: 10px 0;
  cursor:pointer;
}
.faqIcon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  font-weight: 950;
}
.faqPanel{padding: 0 0 6px}
.faqPanel p{color: var(--muted)}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding: 26px 0 34px;
}
.footer__grid{
  display:flex;
  gap: 16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer__brand{margin:0 0 6px; font-weight: 950; letter-spacing:-.02em}
.footer__note, .footer__disclosure{color:var(--muted); margin:0 0 8px; max-width: 62ch}
.footer__links{display:flex; align-items:center}
.footer__link{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
}
.footer__link:hover{text-decoration:none; background: color-mix(in srgb, var(--surface-2) 85%, transparent)}

/* Offline */
.offlineBody{display:flex; align-items:center; justify-content:center; padding: 22px}
.offlineMain{width:min(720px, 100%)}
.offlineCard{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-2);
  text-align:center;
}
.offlineCard h1{margin:0 0 8px; font-size: 30px}

/* Reveal motion (progressive enhancement)
   - Default: content visible (no blank page if JS/storage/observer fails)
   - JS only arms the animation after observers are ready
*/
.reveal{opacity:1; transform:none}
.reveal-ready .reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal-ready .reveal{transition:none; transform:none; opacity:1}
  .hero__bgImg{transform:none}
  html{scroll-behavior:auto}
}

/* Responsive (mobile) */

@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; text-align:center}
  .hero__content{max-width: 100%}
  .hero__checks{max-width: 680px; margin-inline:auto; text-align:left}
  .trustRow{justify-content:center}
  .hero__figure{width:min(420px, 100%)}
  .grid .card{grid-column: span 12}
  .stats{grid-template-columns: repeat(2, 1fr)}
  .pricingGrid{grid-template-columns: 1fr}
  .priceCard{grid-column: span 12}
  .bullets{columns:1}
}

@media (max-width: 860px){
  .nav{justify-content:flex-start; gap:10px}
  .nav__brand{margin-right:auto; min-width:0}
  .brand__text{font-size:15px}
  .nav__links, .langPicker--desktop{display:none}
  .nav__actions{order:2; gap:8px; flex-shrink:0}
  .nav__burger{display:inline-flex; order:3; flex-shrink:0}
  .themeToggle{padding-inline:10px}
  .eyebrow, .lead, .affNote{overflow-wrap:anywhere}
  .ctaRow{justify-content:center}
  .btn{width:min(100%, 360px)}
  .btn--ghost{width:min(100%, 360px)}
  .section{ text-align:center }
  .bullets, .list{ text-align:left }
}