/* =========================================================================
   RAIVEX — Stylesheet
   -------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (search for these tags to jump around):
     1. TOKENS      -- colours, fonts, spacing. Change the look here.
     2. RESET       -- browser defaults, ignore this.
     3. LAYOUT      -- header, nav, footer, grid helpers.
     4. COMPONENTS  -- buttons, cards, badges, gauges, marquee.
     5. PAGE: HOME   6. PAGE: SHOP   7. PAGE: ABOUT   8. PAGE: CONTACT
     9. ANIMATIONS  10. RESPONSIVE
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS  —  your brand's colour + type system lives here.
   Change a value once, it updates everywhere on the site.
------------------------------------------------------------------------- */
:root{
  /* ---- colour ---- */
  --black:        #050506;   /* main page background (matte black) */
  --black-soft:   #0b0c0e;   /* alternate section background */
  --charcoal:     #17181b;
  --charcoal-2:   #1f2023;
  --line:         #2a2b2e;   /* hairline borders on dark bg */
  --white:        #f4f4f1;
  --muted:        #9a9a9d;
  --muted-2:      #616164;
  --red:          #e10600;  /* racing red — accent only, use sparingly */
  --red-dim:      #8c0700;
  --red-glow:     rgba(225,6,0,.55);
  --chrome-a:     #d9d9dc;
  --chrome-b:     #6c6d72;

  /* ---- type ---- */
  --f-display: 'Orbitron', sans-serif;   /* logo + hero headline only */
  --f-mono:    'Rajdhani', sans-serif;   /* eyebrows, labels, numbers, nav */
  --f-body:    'Inter', sans-serif;      /* paragraphs */

  /* ---- scale ---- */
  --container: 1240px;
  --radius: 2px; /* sharp, industrial corners — not rounded/soft */
}

/* -------------------------------------------------------------------------
   2. RESET
------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* subtle film-grain texture applied over dark sections for a premium,
   non-flat finish. Uses an inline SVG noise filter — no image asset needed. */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   3. LAYOUT — header / nav / footer
------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:.8;
}
.site-header.is-scrolled{
  background:rgba(5,5,6,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:14px 0;
  border-color:var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; }

.logo{ display:flex; align-items:center; }
.logo img{ height:26px; width:auto; display:block; }
.footer-brand .logo img{ height:30px; }
.preloader-logo{ width:200px; height:auto; filter:drop-shadow(0 0 18px var(--red-glow)); }
.hero-logo{
  width:min(320px,60vw); height:auto; margin:0 auto 30px;
  filter:drop-shadow(0 0 30px var(--red-glow));
  position:relative; z-index:1;
}

.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-family:var(--f-mono);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding:4px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--red); transition:width .3s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{
  font-family:var(--f-mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:13px; padding:10px 20px; border:1px solid var(--red); color:var(--white);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{ background:var(--red); box-shadow:0 0 24px var(--red-glow); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:28px; }
.nav-toggle span{ height:2px; background:var(--white); width:100%; transition:transform .3s ease, opacity .3s ease; }

.site-footer{
  background:var(--black-soft);
  border-top:1px solid var(--line);
  padding:70px 0 26px;
}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:46px; border-bottom:1px solid var(--line);
}
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ color:var(--muted); max-width:320px; font-size:14px; }
.footer-col h4{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:13px; color:var(--muted-2); margin-bottom:18px;
}
.footer-col a{ display:block; color:var(--muted); font-size:14px; padding:6px 0; transition:color .2s ease, padding-left .2s ease; }
.footer-col a:hover{ color:var(--white); padding-left:4px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; font-size:12px; color:var(--muted-2); letter-spacing:.04em;
}
.footer-social{ display:flex; gap:18px; }
.footer-social a{ color:var(--muted); font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.footer-social a:hover{ color:var(--red); }

/* -------------------------------------------------------------------------
   4. COMPONENTS
------------------------------------------------------------------------- */

/* eyebrow label used above section titles, e.g. "DROP 01" */
.eyebrow{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.3em;
  font-size:13px; color:var(--red); display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--red); display:inline-block; }

.section-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,5vw,58px);
  line-height:1.05; letter-spacing:.01em;
  text-transform:uppercase;
}
.section-lead{
  color:var(--muted); max-width:560px; font-size:17px; margin-top:18px;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:14px; padding:16px 34px;
  border-radius:var(--radius);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--red); color:var(--white); border:1px solid var(--red); }
.btn-primary:hover{ box-shadow:0 0 34px var(--red-glow); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--white); transform:translateY(-2px); }
.btn-arrow{ transition:transform .3s ease; }
.btn:hover .btn-arrow{ transform:translateX(4px); }
.btn[disabled], .btn.is-disabled{ opacity:.45; pointer-events:none; }

/* glass card */
.glass-card{
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--radius);
  padding:36px;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.glass-card:hover{
  transform:translateY(-6px);
  border-color:rgba(225,6,0,.4);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7), 0 0 40px -10px var(--red-glow);
}

/* racing divider — three angled speed lines, used between sections */
.racing-lines{ display:flex; gap:6px; align-items:center; }
.racing-lines span{ display:block; height:2px; background:var(--red); transform:skewX(-30deg); }
.racing-lines span:nth-child(1){ width:44px; }
.racing-lines span:nth-child(2){ width:22px; opacity:.6; }
.racing-lines span:nth-child(3){ width:10px; opacity:.3; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* metallic text sheen, used sparingly on key numerals/words */
.metallic{
  background:linear-gradient(115deg, var(--chrome-b) 10%, var(--chrome-a) 35%, #fff 45%, var(--chrome-a) 55%, var(--chrome-b) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }

/* badge */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red-dim); padding:8px 16px;
  background:rgba(225,6,0,.06);
}
.badge .dot{ width:6px; height:6px; background:var(--red); border-radius:50%; box-shadow:0 0 10px var(--red); animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* marquee ticker */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:18px 0; background:var(--black-soft);
}
.marquee-track{ display:inline-flex; animation:marquee 26s linear infinite; }
.marquee-track span{
  font-family:var(--f-mono); font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  font-size:14px; color:var(--muted-2); padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee-track span i{ color:var(--red); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* preloader */
.preloader{
  position:fixed; inset:0; z-index:999; background:var(--black);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader .logo{ font-size:30px; letter-spacing:.16em; }
.preloader-bar{ width:220px; height:2px; background:var(--line); position:relative; overflow:hidden; }
.preloader-bar::after{
  content:""; position:absolute; inset:0; width:40%; background:var(--red);
  box-shadow:0 0 16px var(--red-glow);
  animation:load-sweep 1.1s ease-in-out infinite;
}
@keyframes load-sweep{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }

/* -------------------------------------------------------------------------
   5. PAGE: HOME
------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:140px 24px 80px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(225,6,0,.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(225,6,0,.08), transparent 70%),
    linear-gradient(180deg, #08090a 0%, #050506 60%, #050506 100%);
  overflow:hidden;
}
.hero-speedlines{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.hero-speedlines span{
  position:absolute; height:1px; width:140%; left:-20%;
  background:linear-gradient(90deg, transparent, rgba(225,6,0,.5), transparent);
  transform:rotate(-8deg);
}
.hero h1{
  position:relative; z-index:1;
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(40px,8.4vw,120px); line-height:.98; letter-spacing:.01em;
  max-width:1100px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:block; transform:translateY(110%); animation:rise 1s cubic-bezier(.16,.84,.44,1) forwards; }
.hero h1 .line:nth-child(2) span{ animation-delay:.12s; color:var(--red); }
@keyframes rise{ to{ transform:translateY(0); } }

.hero-sub{
  position:relative; z-index:1; margin-top:26px; color:var(--muted);
  font-size:clamp(15px,1.6vw,18px); max-width:520px;
}
.hero-actions{ position:relative; z-index:1; display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; justify-content:center; }

.hero-scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; color:var(--muted-2);
  text-transform:uppercase; z-index:1;
}
.hero-scroll::after{
  content:""; width:1px; height:38px; background:linear-gradient(var(--red), transparent);
  animation:scrolldown 1.8s ease-in-out infinite;
}
@keyframes scrolldown{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top; } 50%{ opacity:1; } 100%{ opacity:0; transform:scaleY(1); transform-origin:top; } }

/* pillars */
.pillars{ padding:130px 0; background:var(--black); }
.pillars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px; }
.pillar-num{ font-family:var(--f-mono); color:var(--red); font-size:13px; letter-spacing:.2em; margin-bottom:20px; }
.pillar h3{ font-family:var(--f-display); font-size:20px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px; }
.pillar p{ color:var(--muted); font-size:14.5px; }

/* drop / airdrop crate section */
.drop{
  position:relative; padding:150px 0; background:var(--black-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.drop::before{
  content:""; position:absolute; top:-30%; left:50%; translate:-50% 0;
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, rgba(225,6,0,.14), transparent 60%);
  pointer-events:none;
}
.drop-head{ text-align:center; max-width:640px; margin:0 auto 64px; position:relative; z-index:1; }
.drop-head .eyebrow{ justify-content:center; }
.drop-head .eyebrow::before{ display:none; }

.crate{
  position:relative; z-index:1; max-width:980px; margin:0 auto;
  background:linear-gradient(155deg, #121214, #0a0a0b 60%);
  border:1px solid rgba(225,6,0,.35);
  clip-path:polygon(0 24px, 24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px));
  padding:64px 56px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 40px 100px -40px rgba(0,0,0,.8), 0 0 90px -30px var(--red-glow);
}
.crate::before, .crate::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--chrome-a), var(--chrome-b));
  box-shadow:0 0 8px rgba(0,0,0,.6);
}
.crate::before{ top:14px; left:14px; }
.crate::after{ bottom:14px; right:14px; }
.crate-bolt-tr{ position:absolute; top:14px; right:14px; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--chrome-a), var(--chrome-b)); }
.crate-bolt-bl{ position:absolute; bottom:14px; left:14px; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--chrome-a), var(--chrome-b)); }

.crate-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:38px; }
.crate-series{ font-family:var(--f-mono); letter-spacing:.3em; font-size:13px; color:var(--muted); text-transform:uppercase; }
.crate-title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(30px,4.4vw,52px); line-height:1; margin-top:10px; }
.crate-text{ color:var(--muted); max-width:440px; margin-top:20px; font-size:15px; }

/* countdown gauges */
.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:50px; }
.gauge{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.gauge svg{ overflow:visible; }
.gauge-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:4; }
.gauge-fill{ fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--red-glow)); transition:stroke-dashoffset 1s linear; }
.gauge-value{ font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2.6vw,30px); fill:var(--white); }
.gauge-label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-2);
}

.crate-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:50px; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   6. PAGE: SHOP
------------------------------------------------------------------------- */
.shop-hero{
  padding:170px 0 90px; text-align:center; background:var(--black);
  border-bottom:1px solid var(--line);
}
.shop-hero .eyebrow{ justify-content:center; }
.shop-hero .eyebrow::before{ display:none; }

.soon-panel{
  max-width:760px; margin:60px auto 0; text-align:center;
  padding:80px 40px; position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.03), transparent);
}
.soon-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(225,6,0,.5), transparent);
  height:1px; top:0; animation:scan 3.2s linear infinite;
}
@keyframes scan{ 0%{ top:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.soon-ring{
  width:120px; height:120px; margin:0 auto 34px; position:relative;
}
.soon-ring svg{ width:100%; height:100%; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.soon-ring .ring-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:2; }
.soon-ring .ring-fill{ fill:none; stroke:var(--red); stroke-width:2; stroke-dasharray:40 220; filter:drop-shadow(0 0 8px var(--red-glow)); }

/* product grid — dormant until real inventory is added. See shop.html comments. */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; }
.product-card{ position:relative; }
.product-media{
  aspect-ratio:4/5; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid var(--line);
}
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-info{ padding-top:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.product-name{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.06em; font-size:15px; }
.product-cat{ color:var(--muted-2); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }
.product-price{ font-family:var(--f-mono); color:var(--red); font-weight:700; }
.product-sizes{ display:flex; gap:8px; margin-top:14px; }
.product-sizes span{ border:1px solid var(--line); font-size:12px; padding:6px 10px; font-family:var(--f-mono); color:var(--muted); }
.product-add{ margin-top:16px; width:100%; }
.category-filters{ display:flex; gap:14px; justify-content:center; margin-top:50px; flex-wrap:wrap; }
.category-filters button{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  padding:10px 20px; border:1px solid var(--line); color:var(--muted); transition:all .25s ease;
}
.category-filters button.active, .category-filters button:hover{ border-color:var(--red); color:var(--white); }

/* -------------------------------------------------------------------------
   7. PAGE: ABOUT
------------------------------------------------------------------------- */
.about-hero{ padding:170px 0 60px; background:var(--black); }
.about-statement{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,4.2vw,46px); line-height:1.2; max-width:920px;
}
.about-statement .accent{ color:var(--red); }

.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:100px 0; }
.about-visual{
  aspect-ratio:4/5; background:
    repeating-linear-gradient(115deg, #101012 0 2px, #0a0a0b 2px 26px);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.about-visual::after{
  content:"RAIVEX"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:900; font-size:14vw; color:rgba(255,255,255,.04);
  letter-spacing:.05em;
}
.about-values{ display:grid; gap:34px; margin-top:60px; }
.about-value{ display:flex; gap:22px; align-items:flex-start; padding-bottom:34px; border-bottom:1px solid var(--line); }
.about-value:last-child{ border-bottom:none; }
.about-value .idx{ font-family:var(--f-mono); color:var(--red); font-size:14px; letter-spacing:.1em; padding-top:4px; }
.about-value h4{ font-family:var(--f-display); text-transform:uppercase; font-size:17px; margin-bottom:8px; letter-spacing:.03em; }
.about-value p{ color:var(--muted); font-size:14.5px; max-width:460px; }

.about-strip{
  padding:110px 0; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--black-soft);
}
.about-strip .section-lead{ margin:20px auto 0; text-align:center; }

/* -------------------------------------------------------------------------
   8. PAGE: CONTACT
------------------------------------------------------------------------- */
.contact-hero{ padding:170px 0 60px; background:var(--black); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; padding-bottom:130px; }
.contact-info-block{ display:flex; flex-direction:column; gap:34px; }
.contact-item h4{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--muted-2); margin-bottom:10px; }
.contact-item p, .contact-item a{ font-family:var(--f-display); font-size:19px; text-transform:uppercase; }
.contact-item a:hover{ color:var(--red); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:rgba(244,244,241,.78); margin-bottom:10px;
}
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(244,244,241,.3);
  color:var(--white); padding:12px 2px; font-size:15px; transition:border-color .25s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--red); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:12px; color:var(--muted-2); margin-top:18px; }

/* -------------------------------------------------------------------------
   9. shared page hero micro-pattern (shop/about/contact use a slimmer hero)
------------------------------------------------------------------------- */
.subpage-hero-title{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(38px,7vw,86px); line-height:1;
}

/* -------------------------------------------------------------------------
   10. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width:1024px){
  .pillars-grid{ grid-template-columns:1fr 1fr; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
}
@media (max-width:760px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.is-open{
    display:flex; position:fixed; inset:0; top:64px; background:var(--black);
    flex-direction:column; padding:40px 24px; gap:0; z-index:150;
  }
  .nav-links.is-open a{ padding:18px 0; border-bottom:1px solid var(--line); width:100%; font-size:16px; }
  .pillars-grid{ grid-template-columns:1fr; }
  .countdown{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .crate{ padding:44px 26px; }
  .product-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .hero{ padding-top:120px; }
}

</style>

/* =========================================================================
   11. E-COMMERCE — shop, product, cart, checkout, badges, modals
   Added when converting RAIVEX into a full store. Reuses the same design
   tokens/components above so it matches the approved homepage exactly.
   ========================================================================= */

/* ---- cart icon in nav (used on shop/product/cart/checkout pages) ---- */
.nav-cart{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.nav-cart svg{ width:20px; height:20px; stroke:var(--white); fill:none; stroke-width:1.6; }
.nav-cart:hover svg, .nav-cart.active svg{ stroke:var(--red); }
.cart-count{
  position:absolute; top:-9px; right:-12px; min-width:17px; height:17px; padding:0 4px;
  background:var(--red); color:var(--white); border-radius:50%;
  font-family:var(--f-mono); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 8px var(--red-glow);
}
.cart-count[data-empty="true"]{ display:none; }

/* ---- breadcrumb ---- */
.breadcrumb{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); display:flex; gap:10px; align-items:center; margin-bottom:20px;
}
.breadcrumb a{ color:var(--muted); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--red); }

/* ---- product badges ---- */
.product-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 12px;
}
.product-badge.badge-limited{ background:var(--red); color:var(--white); box-shadow:0 0 20px var(--red-glow); }
.product-badge.badge-new{ background:var(--white); color:var(--black); }
.product-badge.badge-soldout{ background:var(--charcoal-2); color:var(--muted); border:1px solid var(--line); }

/* ---- placeholder product art (used until real photos are added) ---- */
.product-placeholder{
  width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(115deg, #101012 0 2px, #0a0a0b 2px 26px);
}
.product-placeholder span{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:13%; color:rgba(255,255,255,.08); letter-spacing:.05em;
  text-align:center; padding:0 10%; line-height:1.2;
}

/* ---- shop toolbar ---- */
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:50px; flex-wrap:wrap; }
.shop-count{ font-family:var(--f-mono); font-size:13px; letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase; }

/* ---- product card polish ---- */
.product-card{ display:flex; flex-direction:column; }
.product-media{ position:relative; }
.product-media-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:10px;
  padding:0 0 16px; opacity:0; transition:opacity .3s ease;
  background:linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%);
}
.product-card:hover .product-media-overlay{ opacity:1; }
.product-quickview-btn{
  font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 18px; background:var(--white); color:var(--black); transition:background .25s ease, color .25s ease;
}
.product-quickview-btn:hover{ background:var(--red); color:var(--white); }
.product-name-link{ display:block; }
.product-name-link:hover .product-name{ color:var(--red); }
.product-price-row{ display:flex; align-items:center; gap:10px; }
.product-price.is-strike{ color:var(--muted-2); text-decoration:line-through; font-weight:500; font-size:13px; }
.product-actions{ display:flex; gap:10px; margin-top:16px; }
.product-actions .btn{ padding:12px 16px; font-size:12px; flex:1; justify-content:center; }
.product-card.is-soldout .product-media img,
.product-card.is-soldout .product-slide-img,
.product-card.is-soldout .product-placeholder{ filter:grayscale(1) brightness(.55); }
.product-card.is-soldout .product-actions .btn{ pointer-events:none; opacity:.4; }

/* ---- product image slider (shop grid cards) ---- */
.product-media-link{ display:block; width:100%; height:100%; }
.product-media-slider{ position:relative; width:100%; height:100%; }
.product-slide-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none; transition:opacity .4s ease, transform .6s ease;
}
.product-slide-img.is-active{ opacity:1; pointer-events:auto; }
.product-card:hover .product-slide-img.is-active{ transform:scale(1.06); }
.media-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,6,.55); border:1px solid rgba(255,255,255,.28); color:var(--white);
  font-size:19px; line-height:1; opacity:0; transition:opacity .25s ease, background .2s ease, border-color .2s ease;
}
.media-nav-prev{ left:10px; }
.media-nav-next{ right:10px; }
.product-card:hover .media-nav{ opacity:1; }
.media-nav:hover{ background:var(--red); border-color:var(--red); }
.media-dots{ position:absolute; z-index:3; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.media-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4);
  transition:background .2s ease, transform .2s ease; cursor:pointer;
}
.media-dot.is-active{ background:var(--red); transform:scale(1.3); }
@media (max-width:760px){
  .media-nav{ opacity:1; background:rgba(5,5,6,.45); }
}

/* ---- size pills (shared: shop cards, product page, quick view) ---- */
.size-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.size-pill{
  border:1px solid var(--line); font-size:12px; padding:9px 14px; font-family:var(--f-mono);
  color:var(--muted); background:transparent; transition:all .2s ease; letter-spacing:.05em;
}
.size-pill:hover{ border-color:var(--white); color:var(--white); }
.size-pill.is-selected{ border-color:var(--red); background:var(--red); color:var(--white); }
.size-pill.is-unavailable{ opacity:.3; pointer-events:none; text-decoration:line-through; }
.size-required-msg{ font-size:12px; color:var(--red); margin-top:10px; display:none; font-family:var(--f-mono); letter-spacing:.05em; }
.size-required-msg.is-visible{ display:block; }

/* ---- modal overlay (Quick View + Size Guide) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(5,5,6,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-box{
  background:var(--black-soft); border:1px solid var(--line); max-width:920px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative; padding:44px;
  transform:translateY(24px); transition:transform .35s cubic-bezier(.16,.84,.44,1);
}
.modal-overlay.is-open .modal-box{ transform:translateY(0); }
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:18px;
  transition:border-color .2s ease, color .2s ease;
}
.modal-close:hover{ border-color:var(--red); color:var(--red); }
.modal-box.modal-narrow{ max-width:640px; }

/* quick view layout */
.quickview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.quickview-media{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; background:var(--charcoal); }
.quickview-media img{ width:100%; height:100%; object-fit:cover; }

/* size guide table */
.size-table{ width:100%; border-collapse:collapse; margin-top:24px; }
.size-table th, .size-table td{
  border:1px solid var(--line); padding:12px 16px; text-align:center;
  font-family:var(--f-mono); font-size:14px; letter-spacing:.04em;
}
.size-table th{ color:var(--red); text-transform:uppercase; font-size:12px; letter-spacing:.14em; background:rgba(225,6,0,.05); }
.size-guide-trigger{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:underline; text-underline-offset:4px; transition:color .2s ease;
}
.size-guide-trigger:hover{ color:var(--red); }

/* ---- product detail page ---- */
.product-detail{ padding:150px 0 120px; }
.product-detail-grid{ display:grid; grid-template-columns:0.9fr 1fr; gap:70px; }
.gallery-main{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; background:var(--charcoal); margin-bottom:16px; }
.gallery-main img, .gallery-main .product-placeholder{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:12px; }
.gallery-thumb{ width:76px; height:96px; border:1px solid var(--line); overflow:hidden; opacity:.55; transition:opacity .2s ease, border-color .2s ease; background:var(--charcoal); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb.is-active{ opacity:1; border-color:var(--red); }

.pd-collection{ font-family:var(--f-mono); letter-spacing:.24em; font-size:12px; color:var(--red); text-transform:uppercase; margin-bottom:14px; }
.pd-name{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3.4vw,44px); line-height:1.05; }
.pd-price-row{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.pd-price{ font-family:var(--f-mono); font-weight:700; font-size:26px; color:var(--red); }
.pd-price-strike{ font-family:var(--f-mono); font-size:16px; color:var(--muted-2); text-decoration:line-through; }
.pd-desc{ color:var(--muted); margin-top:26px; font-size:15px; line-height:1.75; max-width:520px; }
.pd-block{ margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.pd-block-label{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--muted-2); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }

.qty-selector{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty-selector button{ width:44px; height:48px; font-size:18px; color:var(--white); transition:background .2s ease; }
.qty-selector button:hover{ background:var(--charcoal-2); }
.qty-selector input{
  width:52px; height:48px; text-align:center; background:transparent; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line);
  color:var(--white); font-family:var(--f-mono); font-size:15px;
}
.pd-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.pd-actions .btn{ flex:1; justify-content:center; min-width:180px; }
.pd-stock-note{ margin-top:16px; font-size:12px; color:var(--muted-2); font-family:var(--f-mono); letter-spacing:.05em; }
.pd-stock-note.is-low{ color:var(--red); }
.pd-fabric-list{ color:var(--muted); font-size:14px; line-height:1.9; }

/* ---- cart drawer (slide-out mini cart) ---- */
.cart-drawer-overlay{
  position:fixed; inset:0; background:rgba(5,5,6,.7); z-index:600;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cart-drawer-overlay.is-open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(440px,92vw); background:var(--black-soft);
  border-left:1px solid var(--line); z-index:601; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.cart-drawer-overlay.is-open .cart-drawer{ transform:translateX(0); }
.cart-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:26px 26px 20px; border-bottom:1px solid var(--line); }
.cart-drawer-head h3{ font-family:var(--f-display); text-transform:uppercase; font-size:17px; letter-spacing:.05em; }
.cart-drawer-items{ flex:1; overflow-y:auto; padding:20px 26px; }
.cart-drawer-foot{ padding:22px 26px 28px; border-top:1px solid var(--line); }

/* ---- cart line item (drawer + full page) ---- */
.cart-item{ display:grid; grid-template-columns:76px 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:none; }
.cart-item-media{ width:76px; height:92px; border:1px solid var(--line); overflow:hidden; background:var(--charcoal); }
.cart-item-media img, .cart-item-media .product-placeholder{ width:100%; height:100%; object-fit:cover; }
.cart-item-name{ font-family:var(--f-mono); text-transform:uppercase; font-size:13.5px; letter-spacing:.03em; }
.cart-item-meta{ font-size:12px; color:var(--muted-2); margin-top:6px; font-family:var(--f-mono); letter-spacing:.05em; }
.cart-item-price{ font-family:var(--f-mono); color:var(--red); font-weight:700; margin-top:8px; font-size:13px; }
.cart-item-qty{ display:flex; align-items:center; gap:0; margin-top:10px; }
.cart-item-qty button{ width:26px; height:26px; border:1px solid var(--line); font-size:13px; }
.cart-item-qty span{ width:32px; text-align:center; font-family:var(--f-mono); font-size:13px; }
.cart-item-remove{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); text-align:right; }
.cart-item-remove button{ color:var(--muted-2); transition:color .2s ease; }
.cart-item-remove button:hover{ color:var(--red); }

.cart-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.cart-empty p{ margin-bottom:24px; }

.cart-summary-row{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:13.5px; color:var(--muted); padding:8px 0; letter-spacing:.03em; }
.cart-summary-row.is-total{ color:var(--white); font-size:17px; font-weight:700; border-top:1px solid var(--line); margin-top:10px; padding-top:16px; }
.cart-summary-row .amt{ color:var(--white); }
.cart-summary-row.is-total .amt{ color:var(--red); }
.cart-summary-row.is-discount .amt{ color:var(--red); }

/* ---- promo code ---- */
.promo-row{ display:flex; gap:10px; margin:20px 0; }
.promo-row input{
  flex:1; background:transparent; border:1px solid var(--line); color:var(--white); padding:12px 14px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.promo-row input:focus{ outline:none; border-color:var(--red); }
.promo-row button{
  font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px;
  padding:0 20px; border:1px solid var(--white); color:var(--white); transition:all .2s ease; white-space:nowrap;
}
.promo-row button:hover{ background:var(--white); color:var(--black); }
.promo-msg{ font-size:12px; font-family:var(--f-mono); letter-spacing:.04em; margin-top:-6px; margin-bottom:16px; display:none; }
.promo-msg.is-visible{ display:block; }
.promo-msg.is-success{ color:#39d97a; }
.promo-msg.is-error{ color:var(--red); }

/* ---- full cart page ---- */
.cart-page{ padding:150px 0 120px; }
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:start; }
.cart-list{ border-top:1px solid var(--line); }
.cart-summary-card{
  border:1px solid var(--line); padding:34px; position:sticky; top:120px;
  background:linear-gradient(160deg, rgba(255,255,255,.03), transparent);
}
.cart-summary-card h3{ font-family:var(--f-display); text-transform:uppercase; font-size:16px; letter-spacing:.06em; margin-bottom:22px; }

/* ---- checkout page ---- */
.checkout-page{ padding:150px 0 120px; }
.checkout-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:start; }
.checkout-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.checkout-form .field-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.checkout-section-title{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--muted-2); margin:34px 0 20px; }
.checkout-section-title:first-child{ margin-top:0; }
.checkout-summary-card{ border:1px solid var(--line); padding:34px; position:sticky; top:120px; }
.checkout-mini-item{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.checkout-mini-item:last-of-type{ border-bottom:none; }
.checkout-mini-item .nm{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.02em; }
.checkout-mini-item .meta{ color:var(--muted-2); font-size:11.5px; margin-top:4px; }
.checkout-mini-item .amt{ font-family:var(--f-mono); color:var(--red); white-space:nowrap; }
.checkout-note{ font-size:12px; color:var(--muted-2); margin-top:18px; line-height:1.7; }
.checkout-error-banner{
  display:none; border:1px solid var(--red-dim); background:rgba(225,6,0,.08); color:var(--white);
  padding:16px 18px; font-size:13px; margin-bottom:24px; font-family:var(--f-mono); letter-spacing:.02em;
}
.checkout-error-banner.is-visible{ display:block; }
.checkout-submit-note{ font-size:11px; color:var(--muted-2); margin-top:14px; text-align:center; }

/* ---- order confirmation ---- */
.confirm-page{ padding:190px 0 140px; text-align:center; }
.confirm-ring{ width:110px; height:110px; margin:0 auto 34px; border:1px solid var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px -6px var(--red-glow); }
.confirm-ring svg{ width:44px; height:44px; stroke:var(--red); fill:none; stroke-width:2; }
.confirm-order-id{ font-family:var(--f-display); font-weight:800; font-size:clamp(24px,3vw,32px); color:var(--red); margin:18px 0 10px; letter-spacing:.04em; }
.confirm-msg{ color:var(--muted); max-width:520px; margin:0 auto; }

/* ---- toast ---- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:800;
  background:var(--white); color:var(--black); font-family:var(--f-mono); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; padding:16px 26px; opacity:0; visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ---- empty state (shared) ---- */
.empty-state{ text-align:center; padding:100px 20px; }
.empty-state p{ color:var(--muted); margin:18px 0 30px; }

/* -------------------------------------------------------------------------
   12. RESPONSIVE — e-commerce
------------------------------------------------------------------------- */
@media (max-width:1024px){
  .product-detail-grid, .cart-layout, .checkout-layout, .quickview-grid{ grid-template-columns:1fr; gap:40px; }
  .cart-summary-card, .checkout-summary-card{ position:static; }
}
@media (max-width:760px){
  .checkout-form .field-row, .checkout-form .field-row.cols-3{ grid-template-columns:1fr; }
  .modal-box{ padding:26px; }
  .pd-actions .btn{ min-width:auto; }
  .cart-item{ grid-template-columns:60px 1fr; }
  .cart-item-remove{ grid-column:2; text-align:left; margin-top:6px; }
}

/* -------------------------------------------------------------------------
   13. PAGE: TRACK ORDER
------------------------------------------------------------------------- */
.track-result{
  margin-top:56px;
  border:1px solid var(--line);
  padding:34px;
  background:var(--black-soft);
}
.track-result-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:34px;
}
.track-status-badge{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:700; color:var(--white);
  border:1px solid var(--red); background:rgba(225,6,0,.12);
  padding:8px 16px; white-space:nowrap;
}
.track-status-badge.is-cancelled{
  color:var(--muted); border-color:var(--line); background:transparent;
}

.track-stepper{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:6px; margin:20px 0 40px; position:relative;
}
.track-stepper::before{
  content:""; position:absolute; top:6px; left:6%; right:6%; height:1px;
  background:var(--line); z-index:0;
}
.track-step{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:12px; flex:1; text-align:center;
}
.track-step-dot{
  width:13px; height:13px; border-radius:50%; background:var(--charcoal-2);
  border:1px solid var(--line); display:block;
}
.track-step-label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.track-step.is-done .track-step-dot{
  background:var(--red); border-color:var(--red);
}
.track-step.is-done .track-step-label{ color:var(--muted); }
.track-step.is-current .track-step-dot{
  background:var(--red); border-color:var(--red);
  box-shadow:0 0 0 4px rgba(225,6,0,.2), 0 0 14px var(--red-glow);
}
.track-step.is-current .track-step-label{ color:var(--white); font-weight:600; }

.track-details{ display:flex; flex-direction:column; }
.track-detail-row{
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--f-mono); font-size:13.5px; color:var(--muted);
  padding:12px 0; border-bottom:1px solid var(--line); letter-spacing:.02em;
}
.track-detail-row span:last-child{ color:var(--white); text-align:right; }
.track-detail-row.is-total{ padding-top:16px; }
.track-detail-row.is-total span:last-child{ color:var(--red); font-weight:700; font-size:15px; }

@media (max-width:600px){
  .track-stepper{ flex-wrap:wrap; row-gap:24px; }
  .track-stepper::before{ display:none; }
  .track-step{ flex:0 0 46%; }
  .track-result{ padding:26px 20px; }
}

/* -------------------------------------------------------------------------
   14. PAGE: LEGAL / POLICY PAGES
------------------------------------------------------------------------- */
.policy-page{ padding:150px 0 100px; }
.policy-updated{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:11.5px; color:var(--muted-2); margin:-8px 0 44px;
}
.policy-intro{ color:var(--muted); font-size:15.5px; line-height:1.8; max-width:640px; margin-bottom:56px; }

.policy-toc{
  border:1px solid var(--line); padding:24px 26px; margin-bottom:56px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 24px;
}
.policy-toc a{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; color:var(--muted);
  padding:6px 0; display:block; transition:color .2s ease, padding-left .2s ease;
}
.policy-toc a:hover{ color:var(--white); padding-left:4px; }

.policy-content{ max-width:720px; }
.policy-section{ padding-top:44px; margin-top:44px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.policy-section:first-child{ padding-top:0; margin-top:0; border-top:none; }
.policy-section h2{
  font-family:var(--f-display); font-weight:900; letter-spacing:.01em;
  font-size:clamp(18px,2.4vw,24px); color:var(--white); margin-bottom:18px;
  display:flex; align-items:baseline; gap:12px;
}
.policy-section h2 .policy-num{ color:var(--red); font-family:var(--f-mono); font-size:15px; }
.policy-content p{ color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:16px; }
.policy-content ul{ margin:0 0 16px; padding:0; list-style:none; }
.policy-content li{
  position:relative; padding-left:20px; color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:8px;
}
.policy-content li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--red);
}
.policy-content strong{ color:var(--white); font-weight:600; }

.policy-contact-box{
  margin-top:56px; padding:30px 32px; border:1px solid var(--line); background:var(--black-soft);
}
.policy-contact-box h3{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--muted-2); margin-bottom:12px;
}
.policy-contact-box a{ color:var(--red); text-decoration:none; }
.policy-contact-box a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .policy-page{ padding:130px 0 70px; }
  .policy-toc{ grid-template-columns:1fr; }
}