*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

/* ── Utilities ───────────────────────────────────────── */
.mono { font-family: var(--font-mono); }

.gradient-text {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  position: relative;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-pad-y); }
.section-sm { padding-block: var(--space-16); }
.section-xs { padding-block: var(--space-10); }

/* Section labels */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-accent);
}

.section-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
  color: var(--color-ink);
}
.section-title .accent { color: var(--color-accent); }

.section-sub {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 580px;
}

/* ── Compliance Banner ─────────────────────────────── */
.compliance-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--color-ink);
  padding: 7px var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.compliance-banner__icon { width:13px; height:13px; color:var(--color-accent); flex-shrink:0; }
.compliance-banner__text {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

body { padding-top: 30px; }
main { padding-top: var(--nav-height); }

/* ── Navigation ────────────────────────────────────── */
.nav {
  position: fixed;
  top: 30px; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding-inline: var(--space-8);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: background var(--transition-slow), box-shadow var(--transition-slow);
}
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.08);
}

/* On hero (dark bg), nav should be transparent/dark */
.nav.nav--dark {
  background: rgba(10,10,10,0.6);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav.nav--dark .nav__link { color: rgba(255,255,255,0.7); }
.nav.nav--dark .nav__link:hover { color: white; background: rgba(255,255,255,0.06); }
.nav.nav--dark .nav__logo-text { color: white; }
.nav.nav--dark .nav__logo-text span { -webkit-text-fill-color: inherit; background:none; color: var(--color-accent); }

.nav__inner {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav__logo {
  display:flex; align-items:center;
  text-decoration:none; flex-shrink:0;
}
.nav__logo-img {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #FF6B2B;
  border-radius: 6px;
  padding: 7px 14px;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--transition-bounce), opacity var(--transition-fast);
}
.nav__logo-img .logo-brand {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.nav__logo-img .logo-sub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.08em;
  margin-left: 6px;
}
.nav__logo:hover .nav__logo-img { transform: scale(1.04); opacity: 0.92; }

.nav__links {
  display:flex; align-items:center; gap:var(--space-1);
  list-style:none; margin-left:auto;
}
.nav__link {
  display:inline-flex; align-items:center;
  padding: var(--space-2) var(--space-3);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  color:var(--color-grey-600);
  text-decoration:none; border-radius:var(--radius-lg);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__link:hover { color:var(--color-ink); background:var(--color-grey-100); }
.nav__link--active { color:var(--color-ink); font-weight:var(--weight-semibold); }

.nav__actions { display:flex; align-items:center; gap:var(--space-2); margin-left:var(--space-4); flex-shrink:0; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2); font-family:var(--font-sans);
  font-weight:var(--weight-semibold); text-decoration:none;
  border:none; cursor:pointer; border-radius:var(--radius-lg);
  transition: all var(--transition-bounce); white-space:nowrap;
}
.btn:active { transform:scale(0.97); }

.btn-primary {
  background: var(--grad-accent);
  color: white;
  box-shadow: 0 4px 16px rgba(255,107,43,0.35);
}
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(255,107,43,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-border-mid);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  border-color: var(--color-grey-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* For dark backgrounds */
.btn-secondary-dark {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.btn-secondary-dark:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-border-accent);
}
.btn-ghost:hover {
  background: var(--color-accent-subtle);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--color-ink);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-dark:hover { background: var(--color-grey-800); transform:translateY(-1px); }

.btn-sm  { padding:var(--space-2) var(--space-4); font-size:var(--text-sm); }
.btn-md  { padding:var(--space-3) var(--space-5); font-size:var(--text-sm); }
.btn-lg  { padding:var(--space-4) var(--space-8); font-size:var(--text-base); }
.btn-xl  { padding:var(--space-5) var(--space-10); font-size:var(--text-lg); }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; font-size:10px;
  font-family:var(--font-mono); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  border-radius:var(--radius-full); border:1px solid; white-space:nowrap;
}
.badge-ruo { background:rgba(255,107,43,0.08); color:var(--color-accent); border-color:rgba(255,107,43,0.2); }
.badge-verified { background:rgba(22,163,74,0.08); color:#16a34a; border-color:rgba(22,163,74,0.2); }
.badge-iso { background:var(--color-grey-100); color:var(--color-grey-600); border-color:var(--color-grey-300); }

.coa-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; font-size:10px;
  font-family:var(--font-mono); font-weight:var(--weight-bold);
  letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(255,107,43,0.08); color:var(--color-accent);
  border:1px solid rgba(255,107,43,0.2); border-radius:var(--radius-sm);
}
.coa-badge::before { content:'✓'; font-size:9px; }

/* ── Purity Bar ─────────────────────────────────────── */
.purity-bar { margin-bottom:var(--space-3); }
.purity-bar__header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.purity-bar__label { font-size:10px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--color-text-muted); }
.purity-bar__value { font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-accent); font-family:var(--font-mono); }
.purity-bar__track { height:3px; background:var(--color-grey-200); border-radius:var(--radius-full); overflow:hidden; }
.purity-bar__fill {
  height:100%;
  background:linear-gradient(90deg, var(--color-accent-dim), var(--color-accent), var(--color-accent-bright));
  border-radius:var(--radius-full);
  animation: purityFill 1.2s cubic-bezier(0.4,0,0.2,1) both 0.3s;
}
@keyframes purityFill { from { width:0 !important; } }

/* ── Scroll Reveal ─────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── Divider ────────────────────────────────────────── */
.divider { height:1px; background:var(--color-border); border:none; margin-block:var(--space-16); }

/* ── Dark Section ───────────────────────────────────── */
.section-dark {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.section-dark .section-title { color:white; }
.section-dark .section-sub { color:var(--color-dark-muted); }
.section-dark .section-label { color:var(--color-accent); }
.section-dark .section-label::before { background:var(--color-accent); }

/* ── Footer ─────────────────────────────────────────── */
.footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  padding-block: var(--space-16);
}
.footer__grid {
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.footer__brand-name { font-size:var(--text-lg); font-weight:var(--weight-bold); color:white; margin-bottom:var(--space-2); }
.footer__brand-name span { color:var(--color-accent); }
.footer__brand-desc { font-size:var(--text-sm); color:var(--color-dark-muted); line-height:var(--leading-relaxed); margin-bottom:var(--space-5); }
.footer__col-title { font-size:10px; font-family:var(--font-mono); font-weight:var(--weight-semibold); color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:var(--tracking-widest); margin-bottom:var(--space-4); }
.footer__links { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.footer__links a { font-size:var(--text-sm); color:var(--color-dark-muted); text-decoration:none; transition:color var(--transition-fast); }
.footer__links a:hover { color:white; }
.footer__ruo-block {
  background: rgba(255,107,43,0.06); border:1px solid rgba(255,107,43,0.15);
  border-radius:var(--radius-xl); padding:var(--space-4) var(--space-5);
  font-size:var(--text-xs); color:rgba(255,255,255,0.4); line-height:var(--leading-relaxed);
  margin-bottom:var(--space-6);
}
.footer__ruo-block strong { color:rgba(255,107,43,0.7); }
.footer__bottom {
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--text-xs); color:rgba(255,255,255,0.25);
  border-top:1px solid rgba(255,255,255,0.06); padding-top:var(--space-6);
  gap:var(--space-4); flex-wrap:wrap;
}

@media (max-width:1024px) { .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
  :root { --section-pad-y:4rem; }
  .nav__links { display:none; }
  .footer__grid { grid-template-columns:1fr; }
}