/*
Theme Name: NanoScale X
Theme URI: https://example.com/nanoscalex-theme
Author: NanoScale X
Author URI: https://example.com
Description: Premium royal dark-luxury multi-page WordPress theme for NanoScale X washing machine descaling powder — full-screen hero, parallax sections, scroll animations, before/after slider, testimonials, and a light/dark section rhythm. Converted from the original static HTML/CSS/JS build with all animations, content and hover effects preserved.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nanoscalex
*/

/* ============================================================
   NANOSCALE X — Royal Dark Luxury Design System
   ============================================================ */


:root{
  --navy: #071B34;
  --navy-2: #0E2748;
  --navy-3: #123061;
  --gold: #D89C22;
  --gold-2: #F0B339;
  --gold-deep: #A9720F;
  --blue: #2AA7FF;
  --white: #FFFFFF;
  --gray: #E8E8E8;
  --muted: #9FB2CC;

  --light-bg: #F7F3EA;
  --light-bg-2: #EFE8D6;
  --light-text: #071B34;
  --light-muted: #57647F;

  --display: 'Fraunces', 'Georgia', serif;
  --body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Space Mono', monospace;

  --container: 1240px;
  --radius: 4px;
  --ease: cubic-bezier(.16,.84,.24,1);

  --gold-grad: linear-gradient(120deg, var(--gold) 0%, var(--gold-2) 50%, var(--gold) 100%);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--navy);
  color: var(--gray);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }

::selection{ background: var(--gold); color: var(--navy); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 500;
  color: var(--white);
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-bottom: 1.4em;
}
.eyebrow::before{
  content:'';
  width: 30px; height: 1px;
  background: var(--gold);
  display:inline-block;
}

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

.section{
  position: relative;
  padding: 140px 0;
}
.section--tight{ padding: 90px 0; }
.section--alt{ background: var(--navy-2); }

.section-head{
  max-width: 720px;
  margin-bottom: 64px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 17px 38px;
  border-radius: 2px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s ease, color .3s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--gold{
  background: var(--gold-grad);
  background-size: 200% auto;
  color: var(--navy);
  box-shadow: 0 10px 30px -8px rgba(216,156,34,.55);
}
.btn--gold:hover{
  background-position: right center;
  box-shadow: 0 14px 40px -6px rgba(240,179,57,.75);
  transform: translateY(-2px);
}

.btn--ghost{
  background: transparent;
  border-color: rgba(232,232,232,.35);
  color: var(--white);
}
.btn--ghost:hover{
  border-color: var(--gold-2);
  color: var(--gold-2);
  transform: translateY(-2px);
}

.btn--sm{ padding: 12px 26px; font-size: .74rem; }
.btn--block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  padding: 26px 0;
  transition: background .45s var(--ease), padding .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 16px 0;
  background: rgba(7,27,52,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(216,156,34,.18);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.6);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.brand{
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--white);
  font-weight: 600;
  letter-spacing: .01em;
  display:flex;
  align-items:baseline;
  gap: 8px;
}
.brand span{ color: var(--gold-2); font-style: italic; }

.nav-desktop{
  display:flex;
  align-items:center;
  gap: 44px;
}
.nav-desktop a{
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
  position: relative;
  padding: 4px 0;
  transition: color .3s ease;
}
.nav-desktop a::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px;
  background: var(--gold-2);
  transition: width .35s var(--ease);
}
.nav-desktop a:hover, .nav-desktop a.active{ color: var(--gold-2); }
.nav-desktop a:hover::after, .nav-desktop a.active::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:18px; }

.nav-toggle{
  display:none;
  width: 42px; height: 42px;
  border: 1px solid rgba(232,232,232,.3);
  background: transparent;
  border-radius: 2px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:11px; right:11px; height:1px; background: var(--gray); transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span{ top:50%; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

.mobile-nav{
  position: fixed; inset:0; z-index:199;
  background: var(--navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 28px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--display); font-size: 2rem; color: var(--white); }

@media (max-width: 900px){
  .nav-desktop, .header-cta .btn--ghost{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--navy-3) 0%, var(--navy) 55%);
  overflow:hidden;
  padding-top: 120px;
}
.hero canvas{ position:absolute; inset:0; z-index:0; opacity:.7; }

.hero .glow{
  position:absolute;
  width: 900px; height: 900px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(216,156,34,.28) 0%, rgba(216,156,34,0) 70%);
  top:-320px; right:-260px;
  z-index:0;
  animation: glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ transform: scale(1); opacity:.8;} 50%{ transform: scale(1.15); opacity:1;} }

.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } }

.hero-copy .eyebrow{ margin-bottom: 1.6em; }
.hero-copy h1{
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  margin-bottom: .3em;
}
.hero-copy h1 em{
  font-style: italic;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy p.lead{
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 2.4em;
}
@media (max-width: 900px){ .hero-copy p.lead{ margin-left:auto; margin-right:auto; } }

.hero-actions{ display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width: 900px){ .hero-actions{ justify-content:center; } }

.hero-visual{
  position: relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual .ring{
  position:absolute;
  width: 92%; aspect-ratio:1/1;
  border-radius: 50%;
  border: 1px solid rgba(216,156,34,.35);
  animation: spin 26s linear infinite;
}
.hero-visual .ring::before{
  content:''; position:absolute; top:-4px; left:50%; width:9px; height:9px; margin-left:-4.5px;
  background: var(--gold-2); border-radius:50%; box-shadow: 0 0 18px 4px rgba(240,179,57,.8);
}
.hero-visual .ring2{ width: 70%; border-style:dashed; animation: spin 40s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg);} }

.product-card{
  position: relative;
  z-index:2;
  width: min(360px, 78%);
  aspect-ratio: 3/4;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--navy-3), var(--navy-2));
  border: 1px solid rgba(216,156,34,.3);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  animation: floatY 6s ease-in-out infinite;
  overflow: hidden;
}
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-18px);} }
.product-card .pack{
  width: 62%;
}

.scroll-cue{
  position:absolute; bottom: 40px; left:50%; transform: translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--muted);
  font-family: var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:46px; background: linear-gradient(var(--gold-2), transparent); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin:top;} 50%{ transform: scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform: scaleY(0); transform-origin:bottom;} }

/* floating bubbles */
.bubble{
  position:absolute; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(42,167,255,.35), rgba(42,167,255,0) 70%);
  animation: bubbleUp linear infinite;
  z-index:1;
}
@keyframes bubbleUp{
  0%{ transform: translateY(20px) scale(.8); opacity:0; }
  10%{ opacity:.8; }
  100%{ transform: translateY(-620px) scale(1.1); opacity:0; }
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.22s; }
.reveal-delay-3{ transition-delay:.34s; }
.reveal-delay-4{ transition-delay:.46s; }

/* ---------- Two column / About ---------- */
.split{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items:center;
}
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:48px; } }
.split.reverse{ grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px){ .split.reverse{ grid-template-columns:1fr; } }
.split.reverse .split-media{ order:2; }
@media (max-width: 900px){ .split.reverse .split-media{ order:0; } }

.split-media{
  position: relative;
  border-radius: 6px;
  aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--navy-3), var(--navy-2));
  border: 1px solid rgba(216,156,34,.25);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.split-media::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(240,179,57,.18), transparent 60%);
}
.split-media img{ width: 60%; position:relative; z-index:1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.gold-frame{
  position:absolute; inset: 18px;
  border: 1px solid rgba(216,156,34,.4);
  border-radius: 4px;
  pointer-events:none;
}

.split-copy p{ color: var(--muted); margin-bottom: 1.4em; }
.stat-row{ display:flex; gap: 48px; margin-top: 40px; flex-wrap:wrap; }
.stat{ }
.stat .num{ font-family: var(--display); font-size: 2.4rem; color: var(--gold-2); }
.stat .label{ font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }

/* ---------- Process chain (why descaling matters) ---------- */
.chain{
  display:flex; flex-direction:column; align-items:center; gap:0;
  max-width: 640px; margin: 0 auto;
}
.chain-step{
  width:100%;
  display:flex; align-items:center; gap: 26px;
  padding: 26px 30px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(232,232,232,.08);
  border-radius: 4px;
}
.chain-step .n{
  font-family: var(--mono); color: var(--gold-2); font-size:.75rem; letter-spacing:.1em;
  width: 34px; height:34px; border:1px solid rgba(216,156,34,.4); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chain-step p{ margin:0; color: var(--gray); font-weight:600; }
.chain-arrow{ color: var(--gold); font-size:1.3rem; padding: 6px 0; opacity:.6; }
.chain-step.danger{ border-color: rgba(240,80,80,.35); }

/* ---------- Cards grid ---------- */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.pcard{
  padding: 40px 32px;
  border-radius: 6px;
  background: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(232,232,232,.09);
  position:relative;
  overflow:hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(216,156,34,.12), transparent);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.pcard:hover{
  transform: translateY(-8px);
  border-color: rgba(216,156,34,.45);
  box-shadow: 0 24px 60px -24px rgba(216,156,34,.35);
}
.pcard:hover::before{ transform: translateX(120%); }
.pcard .icon{
  width: 52px; height:52px; border-radius:50%;
  border: 1px solid rgba(216,156,34,.4);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-2); font-size: 1.3rem; margin-bottom: 24px;
}
.pcard h3{ font-size: 1.15rem; margin-bottom:.4em; }
.pcard p{ color: var(--muted); font-size: .93rem; margin:0; }
.pcard .check{ color: var(--gold-2); margin-right: .5em; }

/* ---------- Product features (orbit) ---------- */
.feature-orbit{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items:center;
}
@media (max-width: 900px){ .feature-orbit{ grid-template-columns:1fr; } }
.feature-list{ display:flex; flex-direction:column; gap:0; }
.feature-item{
  display:flex; align-items:flex-start; gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(232,232,232,.08);
}
.feature-item:last-child{ border-bottom:none; }
.feature-item .idx{ font-family: var(--mono); color: var(--gold); font-size:.8rem; padding-top:.2em; }
.feature-item h4{ margin: 0 0 .25em; font-size: 1.05rem; }
.feature-item p{ margin:0; color: var(--muted); font-size: .9rem; }

.orbit-visual{
  position: relative;
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
}
.orbit-visual .core{
  width: 42%; aspect-ratio:1/1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold) 60%, #7a5313 100%);
  box-shadow: 0 0 80px 10px rgba(216,156,34,.35);
}
.orbit-visual .orbit-ring{
  position:absolute; border-radius:50%; border:1px solid rgba(232,232,232,.15);
}
.orbit-visual .orbit-ring.r1{ width:65%; aspect-ratio:1/1; animation: spin 18s linear infinite; }
.orbit-visual .orbit-ring.r2{ width:88%; aspect-ratio:1/1; animation: spin 30s linear infinite reverse; }
.orbit-visual .dot{
  position:absolute; width:12px; height:12px; border-radius:50%; background: var(--blue);
  box-shadow: 0 0 14px 3px rgba(42,167,255,.7);
  top:-6px; left:50%; margin-left:-6px;
}

/* ---------- Before / After slider ---------- */
.ba-slider{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(216,156,34,.25);
  max-width: 880px; margin: 0 auto;
  cursor: ew-resize;
  user-select:none;
}
.ba-slider .layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.6rem; }
.ba-slider .before{ background: linear-gradient(160deg,#1a1206,#3a2a10); color:#c9a45c; }
.ba-slider .after{ background: linear-gradient(160deg, var(--navy-3), var(--navy-2)); color: var(--gold-2); }
.ba-slider .after-clip{ position:absolute; inset:0; width:50%; overflow:hidden; }
.ba-slider .after-clip .layer{ width: 200%; }
.ba-slider .handle{
  position:absolute; top:0; bottom:0; left:50%; width: 2px; background: var(--gold-2);
  transform: translateX(-1px);
  box-shadow: 0 0 20px rgba(240,179,57,.6);
}
.ba-slider .handle .knob{
  position:absolute; top:50%; left:50%; width: 48px; height:48px; margin:-24px 0 0 -24px;
  border-radius:50%; background: var(--gold-grad); display:flex; align-items:center; justify-content:center;
  color: var(--navy); font-size:1.1rem; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.ba-tag{ position:absolute; top:20px; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; padding:8px 14px; border:1px solid rgba(232,232,232,.25); border-radius:20px; background: rgba(7,27,52,.5); backdrop-filter: blur(6px); }
.ba-tag.left{ left:20px; }
.ba-tag.right{ right:20px; }

/* ---------- Timeline ---------- */
.timeline{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
@media (max-width: 900px){ .timeline{ grid-template-columns:1fr; } }
.timeline::before{
  content:'';
  position:absolute; top: 34px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,156,34,.5), transparent);
}
@media (max-width: 900px){ .timeline::before{ display:none; } }
.tl-step{ text-align:center; position:relative; }
.tl-step .num{
  width: 68px; height: 68px; border-radius:50%; margin: 0 auto 24px;
  background: var(--navy-2); border: 1px solid rgba(216,156,34,.4);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-size: 1.4rem; color: var(--gold-2);
  position:relative; z-index:1;
}
.tl-step h4{ font-size: 1.05rem; margin-bottom:.4em; }
.tl-step p{ color: var(--muted); font-size:.87rem; margin:0; }

/* ---------- Counters ---------- */
.counters{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align:center;
}
@media (max-width: 700px){ .counters{ grid-template-columns: repeat(2,1fr); } }
.counter .num{ font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--white); }
.counter .num span{ color: var(--gold-2); }
.counter .label{ font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-top:.5em; }

/* ---------- Testimonials ---------- */
.testi-slider{ position:relative; max-width: 760px; margin:0 auto; text-align:center; min-height: 220px; }
.testi-slide{ position:absolute; inset:0; opacity:0; transition: opacity .8s var(--ease); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.testi-slide.is-active{ opacity:1; position:relative; }
.stars{ color: var(--gold-2); letter-spacing: .2em; margin-bottom: 24px; font-size: 1.1rem; }
.testi-slide p{ font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--white); max-width: 620px; margin: 0 auto 24px; }
.testi-name{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.testi-dots{ display:flex; gap:10px; justify-content:center; margin-top:36px; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--gold); background:transparent; padding:0; }
.testi-dots button.is-active{ background: var(--gold-2); }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;
  padding: 130px 0;
  text-align:center;
  background: linear-gradient(160deg, var(--navy-2), var(--navy));
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute; left:50%; top:50%; width:1200px; height:1200px; margin:-600px 0 0 -600px;
  background: radial-gradient(circle, rgba(216,156,34,.14), transparent 65%);
}
.cta-banner h2{ font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 780px; margin:0 auto .5em; position:relative; }
.cta-banner .actions{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top: 36px; position:relative; }

/* ---------- Footer ---------- */
.site-footer{
  background: #051426;
  border-top: 1px solid rgba(216,156,34,.15);
  padding: 90px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(232,232,232,.08);
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-col h4{ font-size: .78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-2); font-family: var(--body); font-weight:700; margin-bottom: 22px; }
.footer-col p, .footer-col a{ color: var(--muted); font-size:.92rem; display:block; margin-bottom: 12px; transition: color .3s ease; }
.footer-col a:hover{ color: var(--gold-2); }
.footer-brand p{ max-width: 300px; }
.social-row{ display:flex; gap: 14px; margin-top: 8px; }
.social-row a{ width: 38px; height:38px; border:1px solid rgba(232,232,232,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0; }
.newsletter-form{ display:flex; margin-top: 6px; border: 1px solid rgba(232,232,232,.2); border-radius: 2px; overflow:hidden; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding: 14px 16px; color: var(--white); font-size:.85rem; }
.newsletter-form input::placeholder{ color: var(--muted); }
.newsletter-form button{ background: var(--gold-grad); border:none; padding: 0 20px; color: var(--navy); font-weight:700; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 28px; flex-wrap:wrap; gap: 12px; }
.footer-bottom p{ color: var(--muted); font-size:.8rem; margin:0; }
.footer-bottom .legal{ display:flex; gap: 24px; }
.footer-bottom a{ color: var(--muted); font-size:.8rem; }
.footer-bottom a:hover{ color: var(--gold-2); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position: relative;
  padding: 220px 0 110px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--navy-3) 0%, var(--navy) 60%);
  text-align:center;
  overflow:hidden;
}
.page-hero .glow{
  position:absolute; width:700px; height:700px; border-radius:50%;
  background: radial-gradient(circle, rgba(216,156,34,.22), transparent 70%);
  top:-260px; left:50%; margin-left:-350px;
}
.page-hero h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); position:relative; }
.page-hero p{ color: var(--muted); max-width: 620px; margin: 0 auto; position:relative; }
.breadcrumb{ font-family: var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); position:relative; margin-bottom: 22px; }
.breadcrumb a{ color: var(--gold-2); }

/* ---------- Divider shape ---------- */
.divider{ height: 90px; position:relative; overflow:hidden; }
.divider svg{ position:absolute; bottom:-1px; width:100%; height:100%; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:10px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-family: var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.field input, .field textarea, .field select{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(232,232,232,.18);
  border-radius: 3px;
  padding: 15px 16px;
  color: var(--white);
  font-size: .95rem;
  transition: border-color .3s ease, background .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold-2); background: rgba(255,255,255,.05); }
.field textarea{ resize: vertical; min-height: 130px; }

/* ---------- Glass card / info ---------- */
.glass-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(232,232,232,.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: 36px;
}

/* ---------- Product listing / detail ---------- */
.product-hero{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items:center;
}
@media (max-width: 900px){ .product-hero{ grid-template-columns:1fr; } }
.gallery-thumbs{ display:flex; gap: 14px; margin-top: 20px; }
.gallery-thumbs .thumb{ width: 64px; aspect-ratio:1/1; border-radius:4px; border: 1px solid rgba(232,232,232,.15); background: var(--navy-2); }
.gallery-thumbs .thumb.is-active{ border-color: var(--gold-2); }

.specs-table{ width:100%; border-collapse: collapse; }
.specs-table tr{ border-bottom: 1px solid rgba(232,232,232,.08); }
.specs-table td{ padding: 16px 0; color: var(--muted); font-size:.92rem; }
.specs-table td:first-child{ color: var(--white); font-weight:600; width: 40%; }

.tabs{ display:flex; gap: 6px; border-bottom: 1px solid rgba(232,232,232,.12); margin-bottom: 40px; flex-wrap:wrap; }
.tab-btn{ background:transparent; border:none; padding: 14px 22px; color: var(--muted); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; position:relative; }
.tab-btn.is-active{ color: var(--gold-2); }
.tab-btn.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--gold-2); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.faq-item{ border-bottom: 1px solid rgba(232,232,232,.1); }
.faq-q{ width:100%; text-align:left; background:transparent; border:none; padding: 24px 0; color: var(--white); font-family: var(--display); font-size: 1.05rem; display:flex; justify-content:space-between; align-items:center; gap: 20px; }
.faq-q .plus{ color: var(--gold-2); font-size: 1.3rem; transition: transform .4s var(--ease); flex-shrink:0; }
.faq-item.is-open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.faq-a p{ color: var(--muted); padding-bottom: 24px; margin:0; }

.product-list-card{
  display:grid; grid-template-columns: .55fr .45fr; gap:0; border: 1px solid rgba(216,156,34,.25); border-radius:6px; overflow:hidden; background: linear-gradient(160deg, rgba(255,255,255,.03), transparent);
}
@media (max-width: 800px){ .product-list-card{ grid-template-columns:1fr; } }
.product-list-media{ background: linear-gradient(160deg, var(--navy-3), var(--navy-2)); display:flex; align-items:center; justify-content:center; padding: 50px; }
.product-list-body{ padding: 50px; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 20px 0 28px; }
.tag-pill{ font-family: var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-2); border: 1px solid rgba(216,156,34,.35); border-radius: 20px; padding: 6px 14px; }

/* ---------- Related products ---------- */
.related-card{ border: 1px solid rgba(232,232,232,.1); border-radius:6px; padding: 30px; text-align:center; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.related-card:hover{ transform: translateY(-6px); border-color: rgba(216,156,34,.4); }
.related-card .thumb{ aspect-ratio:1/1; background: var(--navy-2); border-radius:4px; margin-bottom: 20px; display:flex; align-items:center; justify-content:center; }

/* ---------- Utility ---------- */
.text-gold{ color: var(--gold-2); }
.mt-0{ margin-top:0; }
.center{ text-align:center; }
.small{ font-size:.85rem; }
.mono{ font-family: var(--mono); }

/* ============================================================
   LIGHT SECTIONS — alternating light/dark rhythm
   ============================================================ */
.section--light{
  background: var(--light-bg);
  color: var(--light-text);
}
.section--light.section--alt{ background: var(--light-bg-2); }

.section--light h1, .section--light h2, .section--light h3, .section--light h4{ color: var(--light-text); }
.section--light p{ color: var(--light-muted); }
.section--light .eyebrow{ color: var(--gold-deep); }
.section--light .eyebrow::before{ background: var(--gold-deep); }
.section--light .text-gold{ color: var(--gold-deep); }

.section--light .hero-copy p.lead,
.section--light .split-copy p{ color: var(--light-muted); }

.section--light .btn--ghost{ border-color: rgba(7,27,52,.3); color: var(--light-text); }
.section--light .btn--ghost:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }

.section--light .stat .num{ color: var(--gold-deep); }
.section--light .stat .label{ color: var(--light-muted); }

.section--light .split-media{
  background: linear-gradient(150deg, #FFFFFF, var(--light-bg-2));
  border-color: rgba(169,114,15,.35);
}
.section--light .split-media::before{ background: radial-gradient(circle at 30% 20%, rgba(216,156,34,.14), transparent 60%); }
.section--light .gold-frame{ border-color: rgba(169,114,15,.4); }

.section--light .chain-step{ background: #FFFFFF; border-color: rgba(7,27,52,.08); }
.section--light .chain-step p{ color: var(--light-text); }
.section--light .chain-step .n{ border-color: rgba(169,114,15,.45); }
.section--light .chain-arrow{ color: var(--gold-deep); }

.section--light .pcard{
  background: #FFFFFF;
  border-color: rgba(7,27,52,.08);
  box-shadow: 0 14px 34px -22px rgba(7,27,52,.25);
}
.section--light .pcard:hover{
  border-color: rgba(169,114,15,.5);
  box-shadow: 0 24px 54px -20px rgba(169,114,15,.28);
}
.section--light .pcard::before{ background: linear-gradient(120deg, transparent, rgba(169,114,15,.1), transparent); }
.section--light .pcard .icon{ border-color: rgba(169,114,15,.5); color: var(--gold-deep); }
.section--light .pcard h3{ color: var(--light-text); }
.section--light .pcard p{ color: var(--light-muted); }

.section--light .feature-item{ border-color: rgba(7,27,52,.1); }
.section--light .feature-item .idx{ color: var(--gold-deep); }
.section--light .feature-item h4{ color: var(--light-text); }
.section--light .feature-item p{ color: var(--light-muted); }
.section--light .orbit-visual .orbit-ring{ border-color: rgba(7,27,52,.14); }

.section--light .ba-slider{ border-color: rgba(169,114,15,.4); }
.section--light .ba-slider .before{ background: linear-gradient(160deg,#f1e4c8,#e3cf9c); color:#8a5a12; }
.section--light .ba-slider .after{ background: linear-gradient(160deg, #FFFFFF, var(--light-bg-2)); color: var(--gold-deep); }
.section--light .ba-tag{ background: rgba(255,255,255,.7); border-color: rgba(7,27,52,.15); color: var(--light-text); }

.section--light .tl-step .num{ background: #FFFFFF; border-color: rgba(169,114,15,.5); color: var(--gold-deep); }
.section--light .tl-step h4{ color: var(--light-text); }
.section--light .tl-step p{ color: var(--light-muted); }
.section--light .timeline::before{ background: linear-gradient(90deg, transparent, rgba(169,114,15,.4), transparent); }

.section--light .counter .num{ color: var(--light-text); }
.section--light .counter .num span{ color: var(--gold-deep); }
.section--light .counter .label{ color: var(--light-muted); }

.section--light .testi-slide p{ color: var(--light-text); }
.section--light .testi-name{ color: var(--light-muted); }
.section--light .stars{ color: var(--gold-deep); }
.section--light .testi-dots button{ border-color: var(--gold-deep); }
.section--light .testi-dots button.is-active{ background: var(--gold-deep); }

.section--light .faq-item{ border-color: rgba(7,27,52,.1); }
.section--light .faq-q{ color: var(--light-text); }
.section--light .faq-q .plus{ color: var(--gold-deep); }
.section--light .faq-a p{ color: var(--light-muted); }

.section--light .tabs{ border-color: rgba(7,27,52,.12); }
.section--light .tab-btn{ color: var(--light-muted); }
.section--light .tab-btn.is-active{ color: var(--gold-deep); }
.section--light .tab-btn.is-active::after{ background: var(--gold-deep); }

.section--light .specs-table tr{ border-color: rgba(7,27,52,.1); }
.section--light .specs-table td{ color: var(--light-muted); }
.section--light .specs-table td:first-child{ color: var(--light-text); }

.section--light .related-card{ border-color: rgba(7,27,52,.1); }
.section--light .related-card:hover{ border-color: rgba(169,114,15,.5); }
.section--light .related-card .thumb{ background: #FFFFFF; }
.section--light .related-card h4{ color: var(--light-text); }

.section--light .glass-card{ background: #FFFFFF; border-color: rgba(7,27,52,.08); }
.section--light .field label{ color: var(--light-muted); }
.section--light .field input, .section--light .field textarea, .section--light .field select{
  background: #FFFFFF; border-color: rgba(7,27,52,.15); color: var(--light-text);
}
.section--light .field input::placeholder, .section--light .field textarea::placeholder{ color: #93A0B8; }

.section--light .tag-pill{ color: var(--gold-deep); border-color: rgba(169,114,15,.5); }
.section--light .product-list-card{ border-color: rgba(169,114,15,.4); background: linear-gradient(160deg, #FFFFFF, var(--light-bg-2)); }
.section--light .product-list-media{ background: linear-gradient(160deg, #FFFFFF, var(--light-bg-2)); }

.section--light .breadcrumb{ color: var(--light-muted); }
.section--light .breadcrumb a{ color: var(--gold-deep); }

/* loading screen */
.loader{
  position: fixed; inset:0; z-index: 999; background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring{
  width: 64px; height:64px; border-radius:50%;
  border: 2px solid rgba(216,156,34,.2);
  border-top-color: var(--gold-2);
  animation: spin 1s linear infinite;
}