:root {
  --bg: #050505;
  --panel: #0c0c0d;
  --panel-2: #141416;
  --line: rgba(232,204,145,.16);
  --text: #f6f0e5;
  --muted: #aaa297;
  --gold: #d7b56d;
  --gold-2: #f1d78f;
  --champagne: #e6c987;
  --dark-gold: #7d6337;
  --danger: #b25a5a;
  --green: #78c091;
  --shadow: 0 35px 100px rgba(0,0,0,.58);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: #050505;
  color: var(--text);
  overflow-x: hidden;
}

/* ── PARTICLE CANVAS ── */
#particleCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .55;
}

/* ── AGE GATE ── */
.age-gate {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(215,181,109,.12), transparent 40%), linear-gradient(180deg, #060606, #020202);
  padding: 20px;
}
.age-gate-box {
  max-width: 480px; width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(215,181,109,.3); border-radius: 32px;
  padding: 40px 36px; text-align: center;
  box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 60px rgba(215,181,109,.06);
}
.age-gate-logo { width: 90px; height: 90px; object-fit: contain; margin-bottom: 24px; animation: sealPulse 3s ease-in-out infinite; }
.age-gate-box h2 { font-family: var(--font-display); font-size: 32px; margin-bottom: 16px; color: var(--gold); }
.age-gate-box p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 12px; font-weight: 300; }
.age-sub { font-size: 13px !important; }
.age-gate-box .primary-btn { margin: 20px 0 14px; width: 100%; border-radius: 16px; }
.age-deny { display: block; color: var(--muted); font-size: 13px; text-decoration: underline; margin-bottom: 16px; }
.age-disclaimer { font-size: 11px !important; color: #555 !important; }
.age-gate.hidden { display: none; }

/* ── SITE WRAP ── */
.site-wrap {
  min-height: 100vh; position: relative; z-index: 1;
  background:
    radial-gradient(circle at 20% 0%, rgba(215,181,109,.16), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(91,69,37,.22), transparent 28%),
    linear-gradient(180deg, #080808 0%, #020202 100%);
}
.site-wrap::before {
  content: ""; position: fixed; inset: 0;
  background:
    linear-gradient(118deg, transparent 0 16%, rgba(215,181,109,.22) 16.2%, transparent 17%, transparent 58%, rgba(215,181,109,.16) 58.15%, transparent 59%),
    linear-gradient(28deg, transparent 0 72%, rgba(215,181,109,.18) 72.2%, transparent 73%);
  opacity: .28; pointer-events: none; z-index: -1;
}

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }

.gold-crack { position: fixed; pointer-events: none; z-index: -1; opacity: .45; filter: drop-shadow(0 0 18px rgba(215,181,109,.16)); }
.crack-one { right: -80px; top: 120px; width: 420px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: rotate(-28deg); }
.crack-two { left: -120px; bottom: 140px; width: 520px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: rotate(18deg); }

a { color: inherit; text-decoration: none; }
code { color: var(--gold); }

/* ── ANIMATIONS ── */
@keyframes sealPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(215,181,109,.3)); }
  50% { filter: drop-shadow(0 0 28px rgba(215,181,109,.7)) drop-shadow(0 0 50px rgba(215,181,109,.25)); }
}

@keyframes shimmerSweep {
  0% { transform: translateX(-100%) rotate(25deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(200%) rotate(25deg); opacity: 0; }
}

@keyframes vialFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes goldSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero reveal items */
.reveal-item {
  opacity: 0;
  animation: fadeUpIn .7s ease forwards;
}
.reveal-item:nth-child(1) { animation-delay: .1s; }
.reveal-item:nth-child(2) { animation-delay: .25s; }
.reveal-item:nth-child(3) { animation-delay: .4s; }
.reveal-item:nth-child(4) { animation-delay: .55s; }
.reveal-item:nth-child(5) { animation-delay: .7s; }
.reveal-item:nth-child(6) { animation-delay: .85s; }

/* Scroll reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── ANNOUNCEMENT BANNER ── */
.announcement-banner {
  background: linear-gradient(90deg, rgba(215,181,109,.12), rgba(215,181,109,.18), rgba(215,181,109,.12));
  border-bottom: 1px solid rgba(215,181,109,.2);
  padding: 10px 20px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 12px; color: var(--champagne); letter-spacing: .06em; text-align: center;
  position: relative; z-index: 101;
}
.announcement-banner.hidden { display: none; }
.banner-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.banner-close:hover { color: var(--text); }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(18px,4vw,56px);
  background: rgba(5,5,5,.92); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; object-fit: contain; transition: filter .3s; }
.brand img:hover { filter: drop-shadow(0 0 12px rgba(215,181,109,.6)); }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.brand small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; letter-spacing: .06em; font-weight: 300; font-style: italic; }

.desktop-nav { display: flex; gap: 20px; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: .04em; position: relative; }
.desktop-nav a { transition: color .2s; position: relative; padding-bottom: 4px; }
.desktop-nav a:hover { color: var(--gold); }
.desktop-nav a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .3s ease; }
.desktop-nav a.active { color: var(--gold); }
.desktop-nav a.active::after { width: 100%; }

.mobile-menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.mobile-menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: .2s; }

.mobile-nav { display: none; flex-direction: column; background: rgba(8,8,9,.97); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .3s ease; z-index: 99; position: sticky; top: 73px; }
.mobile-nav.open { max-height: 400px; }
.mobile-nav-link { padding: 15px 24px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); transition: color .2s, background .2s; }
.mobile-nav-link:hover { color: var(--gold); background: rgba(215,181,109,.04); }

/* ── BUTTONS ── */
.cart-button, .primary-btn, .secondary-btn, .ghost-btn, .icon-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text);
  cursor: pointer; border-radius: 999px; font-family: var(--font-body); font-weight: 600; transition: .2s ease;
}
.cart-button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.cart-button strong { background: linear-gradient(135deg,var(--gold),var(--gold-2)); color: #090909; min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; }
.cart-button:hover, .secondary-btn:hover, .ghost-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.primary-btn, .secondary-btn, .ghost-btn { display: inline-flex; justify-content: center; align-items: center; padding: 13px 22px; }
.primary-btn { background: linear-gradient(135deg,var(--gold),var(--gold-2)); color: #070707; border: none; font-weight: 700; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(215,181,109,.22); }
.full { width: 100%; border-radius: 16px; }

/* ── HERO ── */
.hero { min-height: 78vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 34px; align-items: center; padding: 78px clamp(18px,5vw,76px); position: relative; z-index: 1; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: 11px; font-weight: 700; margin-bottom: 16px; font-family: var(--font-body); }
h1 { font-family: var(--font-display); font-size: clamp(44px,7.3vw,96px); line-height: .93; letter-spacing: -.02em; margin-bottom: 24px; color: #fff6e7; text-shadow: 0 0 32px rgba(215,181,109,.12); font-weight: 700; }
h1 em { font-style: italic; color: var(--gold); }
h2 { font-family: var(--font-display); font-size: clamp(26px,4vw,50px); letter-spacing: -.02em; font-weight: 600; margin-bottom: 16px; }
h2 em { font-style: italic; color: var(--gold); }
h3 { font-family: var(--font-body); font-weight: 700; margin-bottom: 8px; }
p { line-height: 1.7; }
.hero-text { font-size: 17px; color: var(--muted); max-width: 760px; line-height: 1.75; font-weight: 300; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
.notice-strip { border: 1px solid rgba(215,181,109,.28); background: rgba(215,181,109,.07); color: #efe2c6; padding: 14px 16px; border-radius: 16px; max-width: 790px; font-size: 13px; }

/* Seal card */
.hero-seal-card { position: relative; min-height: 460px; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(215,181,109,.13), transparent 34%), linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)); border: 1px solid var(--line); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; }
.hero-seal-card::before { content: ""; position: absolute; inset: -80px; background: linear-gradient(120deg, transparent 0 45%, rgba(215,181,109,.18) 45.2%, transparent 46%), linear-gradient(35deg, transparent 0 62%, rgba(215,181,109,.12) 62.2%, transparent 63%); }
.seal-img { width: min(76%,360px); position: relative; z-index: 2; animation: sealPulse 4s ease-in-out infinite; }
.seal-glow { position: absolute; width: 220px; height: 220px; border-radius: 999px; background: rgba(215,181,109,.12); filter: blur(55px); z-index: 1; }
.seal-shimmer { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: 36px; pointer-events: none; }
.seal-shimmer::after { content: ""; position: absolute; top: -50%; left: -50%; width: 60%; height: 200%; background: linear-gradient(90deg, transparent, rgba(215,181,109,.15), transparent); animation: shimmerSweep 5s ease-in-out infinite; animation-delay: 2s; }

/* ── LOADING SPINNER ── */
.loading-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px 20px; color: var(--muted); font-size: 14px; }
.loading-state.hidden { display: none; }
.gold-spinner { width: 36px; height: 36px; border: 2px solid rgba(215,181,109,.15); border-top-color: var(--gold); border-radius: 50%; animation: goldSpin .8s linear infinite; }

/* ── SECTIONS ── */
.section { padding: 56px clamp(18px,5vw,76px); position: relative; z-index: 1; }
.trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding-top: 8px; }

.trust-row article, .verification-card, .product-card, .steps article, .contact-card, .faq-item, .pay-step, .diff-card {
  background: linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 24px;
}
.trust-row article { padding: 26px; }
.trust-row span { color: var(--gold); font-weight: 800; font-size: 13px; display: block; margin-bottom: 10px; }
.trust-row p { color: var(--muted); font-size: 14px; font-weight: 300; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }

/* ── ABOUT ── */
.about-section { background: linear-gradient(180deg, rgba(215,181,109,.04), transparent 60%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.about-copy p { color: var(--muted); font-size: 15px; font-weight: 300; line-height: 1.8; margin-bottom: 16px; }
.brand-quote { border-left: 2px solid var(--gold); padding: 14px 20px; margin-top: 24px; font-family: var(--font-display); font-size: 20px; font-style: italic; color: var(--gold-2); line-height: 1.4; }
.different-grid { display: flex; flex-direction: column; gap: 14px; }
.different-grid > .eyebrow { margin-bottom: 4px; }
.diff-card { padding: 22px 24px; transition: .22s ease; }
.diff-card:hover { border-color: rgba(215,181,109,.35); transform: translateX(4px); box-shadow: 0 20px 60px rgba(0,0,0,.5), -4px 0 20px rgba(215,181,109,.08); }
.diff-icon { color: var(--gold); font-size: 10px; display: block; margin-bottom: 10px; }
.diff-card p { color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.6; margin: 0; }

/* ── TOOLBAR ── */
.toolbar { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar input, .toolbar select, .checkout-form input, .checkout-form textarea {
  background: #0b0b0c; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; outline: none; font-family: var(--font-body); font-size: 14px;
}
.toolbar input { min-width: 280px; flex: 1; }
.toolbar input:focus, .toolbar select:focus, .checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--gold); }

/* ── PRODUCT GRID ── */
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.product-card { overflow: hidden; padding: 0; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-6px); border-color: rgba(215,181,109,.5); box-shadow: 0 34px 90px rgba(0,0,0,.65), 0 0 60px rgba(215,181,109,.12), inset 0 1px 0 rgba(215,181,109,.1); }
.product-art { height: 168px; background: radial-gradient(circle at 30% 20%,rgba(241,215,143,.24),transparent 28%), linear-gradient(118deg,transparent 0 62%,rgba(215,181,109,.18) 62.3%,transparent 63%), linear-gradient(135deg,#171719,#060606 72%); display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.vial { width: 58px; height: 104px; border-radius: 15px 15px 21px 21px; border: 1px solid rgba(255,255,255,.3); background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04)); box-shadow: 0 24px 58px rgba(0,0,0,.54); position: relative; animation: vialFloat 3.5s ease-in-out infinite; }
.vial::before { content: ""; position: absolute; top: -16px; left: 10px; right: 10px; height: 18px; border-radius: 6px 6px 2px 2px; background: linear-gradient(135deg,#dfd2b9,#927343); }
.vial::after { content: "OBS"; position: absolute; bottom: 25px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--gold); font-weight: 900; letter-spacing: .12em; }

/* Stagger vial float per card */
.product-card:nth-child(2) .vial { animation-delay: .4s; }
.product-card:nth-child(3) .vial { animation-delay: .8s; }
.product-card:nth-child(4) .vial { animation-delay: 1.2s; }
.product-card:nth-child(5) .vial { animation-delay: .6s; }
.product-card:nth-child(6) .vial { animation-delay: 1s; }
.product-card:nth-child(7) .vial { animation-delay: 1.4s; }
.product-card:nth-child(8) .vial { animation-delay: .2s; }

.product-body { padding: 18px; }
.product-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 8px; }
.product-card h3 { margin-bottom: 3px; font-size: 15px; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.low { color: var(--gold-2); border-color: rgba(241,215,143,.35); }
.badge.out { color: #ffabab; border-color: rgba(178,90,90,.45); }
.low-stock-alert { background: rgba(215,181,109,.08); border: 1px solid rgba(215,181,109,.3); border-radius: 10px; padding: 8px 10px; font-size: 11px; color: var(--gold-2); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; }
.price { font-size: 22px; font-weight: 800; color: var(--text); }

/* Quantity selector on card */
.qty-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qty-selector button { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); cursor: pointer; font-size: 16px; display: grid; place-items: center; transition: .18s; font-family: var(--font-body); }
.qty-selector button:hover { border-color: var(--gold); background: rgba(215,181,109,.08); }
.qty-selector span { min-width: 24px; text-align: center; font-weight: 700; font-size: 15px; }

.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-card button.add-btn, .copy-row button { padding: 11px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; background: var(--text); color: #080808; font-weight: 700; font-family: var(--font-body); font-size: 13px; transition: .18s ease; }
.product-card button.add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(215,181,109,.15); }
.product-card .coa-btn { padding: 11px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; background: #111112; color: var(--text); font-weight: 700; font-family: var(--font-body); font-size: 13px; transition: .18s ease; }
.product-card .coa-btn:hover { border-color: var(--gold); }
.product-card button:disabled { background: #303036; color: #777; cursor: not-allowed; transform: none; }
.notify-row { margin-top: 10px; display: flex; gap: 8px; }
.notify-row input { flex: 1; background: #0d0d0e; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font-family: var(--font-body); font-size: 12px; outline: none; }
.notify-row input:focus { border-color: var(--gold); }
.notify-btn { background: none; border: 1px solid rgba(215,181,109,.35); color: var(--gold); border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: .2s; }
.notify-btn:hover { background: rgba(215,181,109,.08); }
.research-warning { font-size: 11px; color: #d4c3a3; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 12px; font-weight: 300; }

/* ── VERIFICATION ── */
.split { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: center; }
.verification-card { padding: 28px; }
.status-dot { display: block; width: 12px; height: 12px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 8px rgba(120,192,145,.1); margin-bottom: 20px; }

/* ── PAYMENT GUIDE ── */
.payment-guide { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.payment-wallet-card { background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border: 1px solid rgba(215,181,109,.3); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); position: sticky; top: 100px; }
.payment-currency { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.currency-badge { background: linear-gradient(135deg,var(--gold),var(--gold-2)); color: #070707; font-weight: 900; font-size: 13px; padding: 8px 14px; border-radius: 999px; letter-spacing: .06em; }
.payment-currency strong { display: block; margin-bottom: 3px; }
.payment-currency p { color: var(--muted); font-size: 13px; font-weight: 300; margin: 0; }
.wallet-display { margin-bottom: 16px; }
.wallet-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 300; }
.wallet-copy-row { display: flex; gap: 10px; align-items: center; }
.wallet-code { font-size: 11px; color: var(--gold); word-break: break-all; background: rgba(215,181,109,.06); border: 1px solid rgba(215,181,109,.2); border-radius: 10px; padding: 10px 12px; flex: 1; display: block; }
.copy-btn { background: linear-gradient(135deg,var(--gold),var(--gold-2)); color: #070707; border: none; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: .2s; }
.copy-btn:hover { transform: translateY(-1px); }
.network-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.network-tag { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--muted); }
.network-tag.recommended { border-color: rgba(215,181,109,.35); color: var(--gold); }
.wallet-warning { font-size: 12px; color: #c4a96a; background: rgba(215,181,109,.06); border: 1px solid rgba(215,181,109,.18); border-radius: 12px; padding: 12px 14px; line-height: 1.6; font-weight: 300; }
.payment-steps { display: flex; flex-direction: column; gap: 14px; }
.pay-step { display: flex; gap: 18px; align-items: start; padding: 20px 22px; }
.step-num { color: var(--gold); font-weight: 900; font-size: 13px; letter-spacing: .06em; flex-shrink: 0; margin-top: 2px; }
.pay-step h3 { font-size: 15px; margin-bottom: 6px; }
.pay-step p { color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.6; margin: 0; }
.pay-step a { color: var(--gold); }

/* ── STEPS ── */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.steps article { padding: 24px; }
.steps span { color: var(--gold); font-weight: 800; font-size: 13px; display: block; margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 14px; font-weight: 300; }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq-item { overflow: hidden; }
.faq-q { width: 100%; background: none; border: none; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-body); font-size: 15px; font-weight: 600; text-align: left; transition: color .2s; }
.faq-q:hover { color: var(--gold); }
.faq-icon { color: var(--gold); font-size: 22px; font-weight: 300; flex-shrink: 0; transition: transform .25s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 22px 20px; color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.7; }
.faq-item.open .faq-a { max-height: 300px; }

/* ── CONTACT ── */
.contact-section { padding: 56px clamp(18px,5vw,76px); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.contact-card { padding: 28px; }
.contact-icon { font-size: 22px; display: block; margin-bottom: 12px; }
.contact-card p { color: var(--muted); font-size: 14px; font-weight: 300; margin-bottom: 12px; }
.contact-card a { color: var(--gold); font-weight: 600; font-size: 14px; }
.contact-card a:hover { color: var(--gold-2); }

/* ── FOOTER ── */
footer { padding: 40px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.footer-logo { width: 44px; height: 44px; object-fit: contain; opacity: .7; animation: sealPulse 5s ease-in-out infinite; }
.footer-tagline { font-family: var(--font-display); font-size: 16px; color: var(--gold); letter-spacing: .04em; }
footer p { font-size: 13px; }
.footer-disclaimer { font-size: 11px; color: #555; }
.footer-disclaimer-link { font-size: 12px; color: var(--muted); text-decoration: underline; }
.footer-disclaimer-link:hover { color: var(--gold); }

/* ── SCROLL TO TOP ── */
.scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 90; width: 44px; height: 44px; border-radius: 999px; background: rgba(215,181,109,.15); border: 1px solid rgba(215,181,109,.3); color: var(--gold); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: .2s ease; opacity: 0; pointer-events: none; font-family: var(--font-body); }
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: rgba(215,181,109,.25); transform: translateY(-2px); }

/* ── OVERLAY ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: .2s ease; z-index: 18; }
.overlay.active { opacity: 1; pointer-events: auto; }

/* ── CART DRAWER ── */
.cart-drawer { position: fixed; right: 0; top: 0; width: min(500px,100vw); height: 100vh; background: #080809; border-left: 1px solid var(--line); box-shadow: -30px 0 90px rgba(0,0,0,.62); z-index: 110; transform: translateX(105%); transition: .28s ease; display: flex; flex-direction: column; }
.cart-drawer.active { transform: translateX(0); }
.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cart-header h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 0; }
.icon-btn { width: 40px; height: 40px; font-size: 26px; display: grid; place-items: center; }
.cart-items { padding: 14px 24px; overflow: auto; flex: 1; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qty-controls { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.qty-controls button { width: 30px; height: 30px; border-radius: 10px; background: #17171b; color: var(--text); border: 1px solid var(--line); cursor: pointer; font-family: var(--font-body); }
.remove-btn { color: #ffb3b3; background: none; border: none; cursor: pointer; margin-top: 8px; padding: 0; font-size: 12px; font-family: var(--font-body); }
.empty-cart { color: var(--muted); text-align: center; padding: 36px 10px; font-size: 14px; }
.cart-footer { padding: 18px 24px; border-top: 1px solid var(--line); overflow: auto; max-height: 64vh; display: flex; flex-direction: column; gap: 12px; }
.total-breakdown { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.total-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.total-row.grand { color: var(--text); font-size: 17px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.total-row.grand strong { color: var(--gold); font-size: 19px; }
.usa-tag { font-style: normal; font-size: 11px; background: rgba(215,181,109,.12); border: 1px solid rgba(215,181,109,.25); color: var(--gold); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.subtle { background: #111114; }
.payment-box { background: #111114; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.payment-box h3 { font-size: 14px; margin-bottom: 4px; }
.payment-box p { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 300; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.payment-box code { display: block; white-space: normal; color: var(--gold); font-size: 11px; word-break: break-all; }
.network-info { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.network-info span { font-size: 11px; color: var(--gold); background: rgba(215,181,109,.08); border: 1px solid rgba(215,181,109,.2); padding: 4px 10px; border-radius: 999px; }
.checkout-form { display: grid; gap: 10px; }
.form-section-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-form input[readonly] { opacity: .6; cursor: default; }
.checkout-form textarea { min-height: 70px; resize: vertical; }
.usa-shipping-notice { background: rgba(215,181,109,.07); border: 1px solid rgba(215,181,109,.22); color: #e8d9b8; padding: 11px 14px; border-radius: 12px; font-size: 12px; }
.checkbox { display: flex; gap: 10px; align-items: start; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 300; }
.order-output { display: none; padding: 16px; border: 1px solid rgba(215,181,109,.32); background: rgba(215,181,109,.08); border-radius: 16px; color: #f1dfbd; line-height: 1.7; font-size: 13px; }
.order-output.active { display: block; }
.order-id-display { font-size: 20px; font-weight: 900; color: var(--gold); letter-spacing: .06em; font-family: var(--font-body); margin-bottom: 10px; }
.order-next-steps { background: rgba(0,0,0,.3); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 12px; color: #c4b49a; line-height: 1.7; }
.print-btn { margin-top: 10px; background: none; border: 1px solid rgba(215,181,109,.3); color: var(--gold); border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); width: 100%; transition: .2s; }
.print-btn:hover { background: rgba(215,181,109,.08); }

/* ── COA MODAL ── */
.modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.78); opacity: 0; pointer-events: none; transition: .22s ease; z-index: 140; padding: 18px; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.coa-modal { width: min(880px,100%); max-height: 92vh; overflow: auto; background: linear-gradient(180deg,#141414,#070707); border: 1px solid rgba(215,181,109,.35); border-radius: 30px; padding: 28px; box-shadow: 0 42px 130px rgba(0,0,0,.78), 0 0 80px rgba(215,181,109,.08); position: relative; }
.modal-close { position: absolute; right: 18px; top: 18px; }
.coa-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.coa-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; }
.coa-image-frame { padding: 14px; border: 1px solid rgba(215,181,109,.3); border-radius: 22px; background: radial-gradient(circle at center,rgba(215,181,109,.08),transparent 52%),#030303; }
.coa-image-frame img { display: block; width: 100%; max-height: 72vh; object-fit: contain; border-radius: 14px; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2,1fr); } .payment-guide { grid-template-columns: 1fr; } .payment-wallet-card { position: static; } }
@media (max-width: 1050px) { .hero, .split { grid-template-columns: 1fr; } .product-grid { grid-template-columns: repeat(2,1fr); } .trust-row { grid-template-columns: 1fr 1fr; } .desktop-nav { display: none; } .mobile-menu-btn { display: flex; } .mobile-nav { display: flex; } }
@media (max-width: 700px) { .trust-row { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .product-grid, .form-grid { grid-template-columns: 1fr; } .hero { padding-top: 44px; } .section-heading { display: block; } .site-header { padding: 14px; } .brand small { display: none; } }
@media print { .site-header, .cart-drawer, .overlay, .scroll-top, .announcement-banner, footer { display: none !important; } }
