:root {
  color-scheme: dark;
  --bg: #060807;
  --panel: #0d1411;
  --text: #f5f7f4;
  --muted: #aab4ad;
  --line: rgba(255,255,255,.12);
  --green: #9fe33a;
  --cyan: #12b8df;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 15% 8%, rgba(159,227,58,.16), transparent 28rem), radial-gradient(circle at 90% 0%, rgba(18,184,223,.12), transparent 26rem), var(--bg);
  color: var(--text);
}
body.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(6,8,7,.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.logo-brand img { width: 184px; height: 52px; object-fit: contain; object-position: left center; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--cyan)); color: #061008; font-weight: 900; }
.brand strong, .brand small { display: block; line-height: 1; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 4px; color: var(--green); text-transform: uppercase; letter-spacing: 3px; font-size: 11px; }
nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; }
nav a:hover { color: var(--text); }
.cart-button, .button, .filter, .icon-button { border: 0; cursor: pointer; }
.cart-button { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); }
.cart-button strong { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #071008; font-size: 12px; }

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(360px,1fr);
  align-items: center;
  gap: clamp(28px,4vw,64px);
  padding: clamp(28px,5vw,72px) clamp(18px,5vw,72px) 56px;
  overflow: hidden;
}
.hero-media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; transform: rotate(-2deg); }
.hero-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow); }
.hero-media img:first-child { grid-row: span 2; align-self: center; }
.hero-media img:nth-child(2) { margin-top: 34px; }
.hero-media img:nth-child(3) { margin-bottom: 34px; }
.hero-copy { max-width: 720px; }
.eyebrow { margin: 0 0 12px; color: var(--green); text-transform: uppercase; letter-spacing: 2.4px; font-size: 12px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(42px, 7vw, 88px); line-height: .92; font-weight: 900; max-width: 11ch; }
.hero-lead { color: #d6ddd7; font-size: clamp(17px,1.8vw,22px); line-height: 1.6; max-width: 690px; }
.hero-actions, .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 8px; font-weight: 850; border: 1px solid transparent; }
.button.primary { background: linear-gradient(135deg, var(--green), #d9ff63); color: #061006; box-shadow: 0 14px 34px rgba(159,227,58,.24); }
.button.ghost { background: rgba(255,255,255,.08); border-color: var(--line); color: var(--text); }
.hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 28px 0 0; }
.hero-stats div, .trust-band div, .product-card, .pack-card, .proof-card, .proof-list div, details { background: rgba(255,255,255,.065); border: 1px solid var(--line); }
.hero-stats div { padding: 16px; }
.hero-stats dt { font-size: 24px; font-weight: 900; }
.hero-stats dd { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.trust-band { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding: 0 clamp(18px,5vw,72px) 36px; }
.trust-band div { padding: 20px; }
.trust-band strong, .trust-band span { display: block; }
.trust-band span { margin-top: 6px; color: var(--muted); }
.section, .packs { padding: 72px clamp(18px,5vw,72px); }
.intro, .section-heading, .packs, .proof { display: grid; grid-template-columns: minmax(0,.8fr) minmax(320px,1fr); gap: clamp(24px,4vw,64px); align-items: start; }
h2 { margin-bottom: 0; font-size: clamp(32px,4vw,58px); line-height: 1; }
.intro > p, .section-heading > p, .pack-copy p, .proof-card p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.filter-bar { margin: 28px 0 26px; }
.filter { min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid var(--line); }
.filter.active { background: var(--text); color: #060807; }
.products-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 18px; }
.product-tag { color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: 1.7px; font-weight: 800; }
.product-body h3 { margin-bottom: 0; font-size: 22px; line-height: 1.08; }
.product-body p { margin-bottom: 0; color: var(--muted); line-height: 1.55; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.price { font-size: 24px; font-weight: 950; }
.add-button { min-width: 118px; }

.packs { background: linear-gradient(90deg, rgba(159,227,58,.12), transparent 42%), #0a0d0b; border-block: 1px solid var(--line); }
.pack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.pack-card { display: flex; flex-direction: column; overflow: hidden; }
.pack-card.featured { border-color: rgba(159,227,58,.6); box-shadow: inset 0 0 0 1px rgba(159,227,58,.28); }
.pack-media { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #050706; }
.pack-media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.pack-media img:first-child { grid-row: span 2; }
.pack-card span { display: block; margin: 22px 22px 0; color: var(--green); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1.8px; }
.pack-card h3 { margin: 12px 22px; font-size: 25px; line-height: 1.12; }
.pack-card p { margin: 0 22px 20px; color: var(--muted); line-height: 1.55; }
.pack-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: auto 22px 22px; padding-top: 16px; border-top: 1px solid var(--line); overflow: visible; }
.pack-foot strong { flex: 1 1 116px; font-size: clamp(24px,2.4vw,30px); line-height: 1; }
.pack-foot .button { flex: 0 0 124px; width: auto; min-width: 0; min-height: 44px; padding-inline: 14px; line-height: 1; white-space: nowrap; }

.proof-list { display: grid; gap: 12px; }
.proof-card, .proof-list div { padding: 24px; }
.proof-list div { display: flex; align-items: center; gap: 16px; }
.proof-list strong { display: grid; place-items: center; flex: 0 0 40px; height: 40px; background: var(--green); color: #071008; }
.proof-list span { color: var(--muted); }
.faq-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
details { padding: 20px; }
summary { cursor: pointer; font-weight: 850; }
details p { margin: 14px 0 0; color: var(--muted); line-height: 1.65; }

.cart-drawer { position: fixed; inset: 0; z-index: 40; display: none; justify-content: flex-end; background: rgba(0,0,0,.62); }
.cart-drawer.open { display: flex; }
.cart-panel { width: min(440px,100%); height: 100%; padding: 24px; background: #09100d; border-left: 1px solid var(--line); box-shadow: var(--shadow); overflow-y: auto; }
.cart-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 34px; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--line); font-size: 22px; }
.cart-items { display: grid; gap: 12px; padding: 18px 0; }
.cart-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; }
.cart-item img { width: 58px; height: 58px; object-fit: cover; }
.cart-item strong, .cart-item span { display: block; }
.cart-item span { color: var(--muted); margin-top: 4px; font-size: 13px; }
.remove { background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.cart-empty { display: none; padding: 26px 0; color: var(--muted); }
.cart-empty.visible { display: block; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.cart-total strong { font-size: 26px; }
.checkout { width: 100%; }
.checkout.disabled { opacity: .48; pointer-events: none; box-shadow: none; }
.legal-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.legal-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); }
.legal-check a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(159,227,58,.65); }
.cart-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookie-banner { position: fixed; left: clamp(12px,3vw,28px); right: clamp(12px,3vw,28px); bottom: 18px; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 18px; max-width: 980px; margin: 0 auto; padding: 16px; background: rgba(9,16,13,.96); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cookie-banner.visible { display: flex; }
.cookie-banner p { margin: 0; color: var(--muted); line-height: 1.45; }

footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 28px clamp(18px,5vw,72px); color: var(--muted); border-top: 1px solid var(--line); }
footer strong { display: block; color: var(--text); }
footer span { display: block; margin-top: 6px; }
footer nav { flex-wrap: wrap; justify-content: flex-end; }

.legal-page { max-width: 980px; margin: 0 auto; padding: 42px clamp(18px,5vw,64px) 76px; }
.legal-hero { margin-bottom: 24px; }
.legal-hero h1 { max-width: none; margin-bottom: 14px; font-size: clamp(34px,5vw,58px); line-height: 1.02; }
.legal-hero p:not(.eyebrow), .legal-section p, .legal-section li { color: var(--muted); font-size: 16px; line-height: 1.78; }
.last-update { color: var(--green); font-weight: 800; }
.legal-toc { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 0 26px; }
.legal-toc a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font-size: 14px; font-weight: 700; }
.legal-section { margin-top: 16px; padding: clamp(22px,3vw,30px); background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.legal-section h2 { margin-bottom: 20px; font-size: clamp(26px,3vw,36px); line-height: 1.08; }
.legal-section h3 { margin: 22px 0 8px; font-size: 18px; line-height: 1.25; }
.legal-section ul { margin: 0; padding-left: 20px; }
.warning-box { border-color: rgba(243,200,61,.55); background: rgba(243,200,61,.08); }
.withdrawal-box { padding: 18px; background: rgba(0,0,0,.24); border: 1px dashed var(--line); }

@media (max-width: 1120px) {
  .products-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { order: -1; }
  h1 { max-width: 13ch; }
}
@media (max-width: 820px) {
  .site-header { position: static; flex-wrap: wrap; }
  nav { order: 3; width: 100%; justify-content: space-between; }
  .hero { padding-top: 28px; }
  .hero-stats, .trust-band, .intro, .section-heading, .packs, .proof, .pack-grid, .faq-grid, .legal-toc { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .hero-media { gap: 8px; }
  .products-grid { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .product-foot .button { width: auto; }
  .pack-foot { align-items: stretch; }
  .pack-foot .button { width: 100%; flex-basis: auto; }
  footer { display: block; }
  footer span { display: block; margin-top: 8px; }
  footer nav { justify-content: flex-start; margin-top: 18px; }
  .cookie-banner { align-items: stretch; flex-direction: column; }
}