/* Variant A - Bold, dark, cinematic.
   Layout: full-bleed night hero, giant condensed type, red as the only loud colour,
   lighter product tiles so gear reads clearly on the dark ground. */
:root {
  --bg: #0a0b0f;
  --surface: #13151b;
  --surface-2: #1a1d25;
  --fg: #f3f0ec;
  --muted: #8f8c95;
  --line: #2a2e38;
  --accent: #e01f27;
  --accent-fg: #ffffff;
  --tile: #e6e4e1;
  --red-deep: #9e0f15;
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-ui: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  color-scheme: dark;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--bg) }
::selection { background: var(--accent); color: #fff }
.red { color: var(--accent) }

/* Intro curtain */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--accent); pointer-events: none }
.intro__mark { width: 96px; height: 96px; color: #fff; stroke-dasharray: 130; stroke-dashoffset: 0 }
.intro__mark path { stroke-dasharray: 130 }
.no-intro .intro { display: none }

/* Nav */
.nav { position: fixed; z-index: 60; top: env(safe-area-inset-top, 0px); left: 0; right: 0; transition: transform .5s var(--ease), background-color .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent }
.nav.is-solid { background: rgba(10, 11, 15, .72); backdrop-filter: blur(14px) saturate(1.3); border-color: rgba(255,255,255,.06) }
.nav.is-hidden { transform: translateY(-100%) }
.nav__in { max-width: var(--maxw); margin-inline: auto; padding: 16px var(--gutter-r) 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-size: 24px; letter-spacing: .12em }
.logo { --logo-mark: var(--accent); font-size: 21px }
.nav__links { display: flex; gap: 34px }
.nav__links a { position: relative; text-decoration: none; font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #cfcbc6 }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease) }
.nav__links a:hover { color: #fff }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left }
.nav__bag { border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.25); border-radius: 99px; padding: 9px 16px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; color: #fff; transition: border-color .3s, background-color .3s }
.nav__bag:hover { border-color: var(--accent); background: rgba(224, 31, 39, .15) }
@media (max-width: 820px) { .nav__links { display: none } }

/* Buttons */
.btn { font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; font-size: 15px }
.btn--primary { box-shadow: 0 14px 34px -12px rgba(224, 31, 39, .75) }
.btn--primary:hover { background: #f02a32; transform: translateY(-2px) }
.btn--primary .ico { transition: transform .35s var(--ease) }
.btn--primary:hover .ico { transform: translateX(4px) }
.btn--ghost { border-color: rgba(255,255,255,.3); color: #fff }
.btn--lg { padding: 1.15em 1.7em; font-size: 16px }

/* Hero */
.hero { position: relative; min-height: max(640px, 100svh); display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate }
.hero__bg { position: absolute; inset: -8% 0; z-index: -3 }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform-origin: 50% 70% }
.hero__shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(8, 9, 13, .9) 0%, rgba(8, 9, 13, .55) 42%, rgba(8, 9, 13, .05) 75%),
  linear-gradient(0deg, var(--bg) 0%, rgba(10, 11, 15, 0) 32%),
  linear-gradient(180deg, rgba(10, 11, 15, .6) 0%, rgba(10, 11, 15, 0) 22%) }
.hero__embers { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.hero__embers canvas { width: 100%; height: 100% }
.hero__in { align-self: center; padding-top: 120px; padding-bottom: 40px; width: 100% }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #ff6a6f }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(224,31,39,.7); animation: pulse 2s infinite }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(224,31,39,0) } 100% { box-shadow: 0 0 0 0 rgba(224,31,39,0) } }
.hero__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 12.5vw, 188px); line-height: .86; letter-spacing: .005em; margin: 22px 0 28px }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .02em }
.hero__title .line > span { display: inline-block }
.hero__sub { max-width: 44ch; font-size: clamp(17px, 1.5vw, 19px); color: #cbc6c1 }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }
.hero__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 34px; width: 100% }
.hero__meta dl { display: flex; gap: clamp(22px, 5vw, 64px); margin: 0 }
.hero__meta dt { font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted) }
.hero__meta dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-variant-numeric: tabular-nums }
.scrollcue { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-ui); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted) }
.scrollcue i { width: 1px; height: 54px; background: linear-gradient(var(--fg), transparent); position: relative; overflow: hidden }
.scrollcue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: drip 1.8s var(--ease) infinite }
@keyframes drip { to { top: 100% } }
@media (max-width: 600px) { .scrollcue { display: none } .hero__in { padding-top: 110px } }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; background: var(--bg) }
.marquee__track { display: flex; width: max-content; gap: 40px; align-items: center; font-family: var(--font-display); font-size: clamp(42px, 7vw, 96px); text-transform: uppercase; line-height: 1; will-change: transform }
.marquee__track .o { color: transparent; -webkit-text-stroke: 1.5px #5d606b }
.marquee__track b { color: var(--accent); font-weight: 400 }

/* Sections */
.section { padding-block: clamp(64px, 8vw, 110px) }
.section + .section { padding-top: 0 }
.shead { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px) }
.shead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.shead--row > div { display: grid; gap: 14px }
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent) }
.kicker::before { content: ""; width: 34px; height: 2px; background: currentColor }
.h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7vw, 100px); line-height: .92 }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em }
.w > span { display: inline-block }

/* Group tiles: expanding accordion on desktop */
.gtiles { display: flex; gap: 14px; height: clamp(440px, 52vw, 600px) }
.gtile { position: relative; flex: 1; min-width: 0; border-radius: var(--radius); overflow: hidden; text-decoration: none; isolation: isolate; transition: flex-grow .8s var(--ease); background: var(--surface) }
.gtiles:hover .gtile { flex-grow: .8 }
.gtiles .gtile:hover, .gtiles .gtile:focus-visible { flex-grow: 2.2 }
.gtile__media { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; color: var(--muted) }
.gtile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease), filter .8s }
.gtile:hover .gtile__media img { transform: scale(1) }
.gtile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,9,.92) 0%, rgba(5,6,9,.2) 55%, rgba(5,6,9,.1) 100%) }
.gtile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: grid; gap: 6px }
.gtile__count { font-family: var(--font-ui); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #ff6a6f }
.gtile__name { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 54px); line-height: 1; text-transform: uppercase }
.gtile__blurb { color: #c7c2bd; max-width: 30ch; font-size: 15px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease) }
.gtile:hover .gtile__blurb, .gtile:focus-visible .gtile__blurb { opacity: 1; transform: none }
@media (max-width: 900px) {
  .gtiles { display: grid; grid-template-columns: 1fr 1fr; height: auto }
  .gtile { aspect-ratio: 3 / 4 }
  .gtile__blurb { opacity: 1; transform: none; font-size: 14px }
}
@media (max-width: 520px) { .gtile__blurb { display: none } .gtile__body { padding: 16px } }

/* Offers: horizontal rail (pinned on desktop by motion.js) */
.offers { background: linear-gradient(180deg, var(--bg), #120607 50%, var(--bg)); overflow: hidden; padding-block: clamp(56px, 6vw, 80px) }
.offers .h2 { font-size: clamp(44px, 6vw, 84px) }
.offers .shead { margin-bottom: 0 }
.offers__head { margin-bottom: clamp(28px, 3vw, 40px) }
.offers__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap }
.offers__note { max-width: 36ch; color: var(--muted) }
.offers__rail { overflow-x: auto; scrollbar-width: none; padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + 18px)) }
.offers__rail::-webkit-scrollbar { display: none }
.offers__track { display: flex; gap: 18px; width: max-content; padding-right: var(--gutter-r) }
.offers__track .pcard { width: clamp(250px, 21vw, 290px) }
.is-pinned .offers__rail { overflow: visible }

/* Product cards */
.pcard { border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .4s, box-shadow .5s }
.pcard:hover { transform: translateY(-6px); border-color: rgba(224,31,39,.55); box-shadow: 0 30px 60px -30px rgba(224, 31, 39, .45) }
.pcard__media { color: #9a968f }
.pcard__badge { background: var(--accent) }
.pcard__off { background: #0a0b0f; color: #fff }
.pcard__name { font-size: 17px }
.pcard__price b { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: .02em }
.pcard__add { text-transform: uppercase; letter-spacing: .08em; font-size: 14px }
.pcard__wa { text-transform: uppercase; letter-spacing: .08em; font-size: 14px }

/* Shop */
.chip { font-family: var(--font-ui); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600 }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff }

/* Why */
.why { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 11vw, 150px) }
.why__bg { position: absolute; inset: -12% 0; z-index: -2 }
.why__bg img { width: 100%; height: 100%; object-fit: cover }
.why__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(10,11,15,.7) 30%, rgba(10,11,15,.78) 70%, var(--bg) 100%) }
.why__in { display: grid; gap: 22px }
.why__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 8.5vw, 130px); line-height: .9; max-width: 14ch }
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(40px, 6vw, 80px); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden }
.why__grid article { background: rgba(10, 11, 15, .84); padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; transition: background-color .4s }
.why__grid article:hover { background: rgba(158, 15, 21, .55) }
.why__n { font-family: var(--font-display); font-size: 18px; color: var(--accent) }
.why__grid h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; text-transform: uppercase; letter-spacing: .02em }
.why__grid p { color: #c7c2bd; font-size: 15px }
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .why__grid { grid-template-columns: 1fr } }

/* How */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); counter-reset: s; position: relative }
.steps::before { content: ""; position: absolute; top: 38px; left: 6%; right: 6%; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px) }
.steps li { position: relative; display: grid; gap: 12px }
.steps__n { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-family: var(--font-display); font-size: 32px; color: var(--accent); position: relative; z-index: 1; transition: background-color .4s, color .4s }
.steps li:hover .steps__n { background: var(--accent); color: #fff; border-color: var(--accent) }
.steps h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; text-transform: uppercase; margin-top: 8px }
.steps p { color: var(--muted); max-width: 34ch }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 34px } .steps::before { top: 0; bottom: 0; left: 38px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 10px, transparent 10px 18px) } .steps li { grid-template-columns: 76px 1fr; column-gap: 20px } .steps li > :not(.steps__n) { grid-column: 2 } .steps__n { grid-row: span 2 } .steps h3 { margin-top: 14px } }

/* Store */
.store__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center }
.store__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface) }
.store__media img { width: 100%; height: 100%; object-fit: cover }
.store__body { display: grid; gap: 22px; min-width: 0 }
.store__addr { font-style: normal; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: #dcd8d3 }
.store__ctas { display: flex; flex-wrap: wrap; gap: 12px }
.store__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line) }
.store__contact span { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px }
.store__contact b { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: .03em }
.store__phones { display: grid }
.store__phones a { text-decoration: none }
.store__phones a:hover { color: var(--accent) }
@media (max-width: 860px) { .store__in { grid-template-columns: 1fr } .store__media { aspect-ratio: 4 / 3 } }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 40px max(40px, env(safe-area-inset-bottom, 0px)); overflow: hidden }
.foot__big { font-family: var(--font-display); font-size: clamp(90px, 23vw, 340px); line-height: 1; padding-top: .02em; margin-top: -.12em; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px #2f333d; text-align: center; margin-bottom: 30px; user-select: none;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left center / 0% 100%; -webkit-background-clip: text; background-clip: text }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 14px }
.foot__row nav { display: flex; gap: 22px }
.foot__row a { text-decoration: none; font-family: var(--font-ui); letter-spacing: .14em; text-transform: uppercase; font-weight: 600 }
.foot__row a:hover { color: var(--fg) }

/* Overlays in A */
.bag__panel { border-left: 1px solid var(--line) }
.bag__head h2, .qv__title { text-transform: uppercase; font-weight: 400 }
.qv__inner { border: 1px solid var(--line) }
.toast button { text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-ui) }