/* ═══════════════════════════════════════════════════════════════
   LEMAR SUNTECH — SHARED DESIGN SYSTEM
   iOS 27 Liquid Glass · Solar Amber · v3
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0. RESET
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --amber:         #e8710a;
  --amber-deep:    #c4500a;
  --amber-gold:    #f5b400;
  --amber-light:   #ffd166;
  --ember:         #c4410a;

  /* Glass — light mode */
  --glass-bg:         rgba(255, 255, 255, 0.58);
  --glass-bg-hover:   rgba(255, 255, 255, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.56);
  --glass-border-act: rgba(232, 113, 10,  0.38);
  --glass-shine:      linear-gradient(105deg,
                        transparent 20%,
                        rgba(255,255,255,0.80) 50%,
                        transparent 80%);
  --glass-shadow:     0 4px 6px  rgba(0,0,0,0.04),
                      0 12px 28px rgba(0,0,0,0.08),
                      0 1px 0    rgba(255,255,255,0.92) inset;
  --glass-shadow-lg:  0 2px 4px  rgba(0,0,0,0.06),
                      0 24px 56px rgba(0,0,0,0.14),
                      0 0 0 1px  rgba(232,113,10,0.22),
                      0 1px 0    rgba(255,255,255,0.82) inset;

  /* Surfaces */
  --bg-page:    #f3ebe0;
  --bg-page-2:  #ede3d6;
  --bg-sect:    rgba(243, 235, 224, 0.88);
  --bg-nav:     rgba(16, 4, 0, 0.82);
  --bg-topbar:  linear-gradient(90deg, #110300, #260c00);

  /* Typography */
  --text-1:     #0e0300;
  --text-2:     #442600;
  --text-3:     #7a4820;
  --text-muted: #9a5e32;
  --text-invert:#fff8f0;

  /* Borders */
  --border:     rgba(160, 90, 20, 0.13);
  --border-2:   rgba(200, 120, 40, 0.18);

  /* Radii */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full:100px;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;

  /* Type scale */
  --text-xs:   0.625rem;  /* 10px */
  --text-sm:   0.700rem;  /* 11.2px */
  --text-base: 0.800rem;  /* 12.8px */
  --text-md:   0.875rem;  /* 14px */
  --text-lg:   1.000rem;  /* 16px */
  --text-xl:   1.125rem;  /* 18px */
  --text-2xl:  1.375rem;  /* 22px */
  --text-3xl:  1.750rem;  /* 28px */

  /* Motion */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.22, 1.00, 0.36, 1);
  --ease-out:     cubic-bezier(0.00, 0.00, 0.20, 1);
  --dur-fast:  180ms;
  --dur-base:  280ms;
  --dur-slow:  420ms;

  /* Font */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Dark mode overrides ──────────────────────────────────── */
[data-theme="dark"] {
  --glass-bg:         rgba(18, 5, 0, 0.72);
  --glass-bg-hover:   rgba(36, 12, 0, 0.80);
  --glass-border:     rgba(255, 175, 75, 0.10);
  --glass-border-act: rgba(232, 113, 10, 0.42);
  --glass-shadow:     0 4px 6px  rgba(0,0,0,0.20),
                      0 12px 28px rgba(0,0,0,0.44),
                      0 1px 0    rgba(255,200,100,0.06) inset;
  --glass-shadow-lg:  0 2px 4px  rgba(0,0,0,0.24),
                      0 24px 56px rgba(0,0,0,0.56),
                      0 0 0 1px  rgba(232,113,10,0.26),
                      0 1px 0    rgba(255,200,100,0.05) inset;

  --bg-page:    #090200;
  --bg-page-2:  #0d0300;
  --bg-sect:    rgba(12, 3, 0, 0.92);
  --bg-nav:     rgba(10, 2, 0, 0.88);

  --text-1:     #fff6ee;
  --text-2:     #e6be90;
  --text-3:     #c08050;
  --text-muted: #a06840;

  --border:     rgba(232, 113, 10, 0.13);
  --border-2:   rgba(232, 113, 10, 0.20);
}

/* ─────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--bg-page);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-slow) var(--ease-out),
              color     var(--dur-slow) var(--ease-out);
}

img { display: block; max-width: 100%; }
button { font-family: var(--font); }
a { text-decoration: none; }

/* Subtle page texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%,  rgba(245,140,0,.05), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(200,60,0,.04),  transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────
   3. TOPBAR
   ───────────────────────────────────────────────────────────── */
.topbar {
  position: relative; z-index: 1;
  background: var(--bg-topbar);
  border-bottom: 1px solid rgba(229, 113, 10, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-5);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 215, 170, 0.65);
  flex-wrap: wrap;
}

.topbar span {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.topbar i {
  color: var(--amber-gold);
  font-size: .65rem;
}

/* ─────────────────────────────────────────────────────────────
   4. NAVIGATION
   ───────────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 500;
  height: 62px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-5);
  background: var(--bg-nav);
  
  
  border-bottom: 1px solid rgba(232, 113, 10, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 200, 100, 0.04) inset,
    0 4px 24px rgba(0, 0, 0, 0.18);
}

/* Logo */
.nav-logo {
  height: 40px;
  width: auto;
  max-width: 120px;
  max-height: 44px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 6px;
  filter: drop-shadow(0 2px 10px rgba(232, 113, 10, 0.30));
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.nav-logo:hover {
  transform: scale(1.04);
}
/* .logo alias — used on brand pages */
.logo {
  height: 40px;
  width: auto;
  max-width: 120px;
  max-height: 44px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 6px;
  filter: drop-shadow(0 2px 10px rgba(232,85,0,0.30));
  transition: filter .28s ease, transform .28s ease;
  flex-shrink: 0;
}
.logo:hover { transform:scale(1.04); filter:drop-shadow(0 4px 20px rgba(232,85,0,0.58)); }

.nav-logo:hover {
  filter: drop-shadow(0 4px 22px rgba(232, 113, 10, 0.60));
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  display: block;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 215, 170, 0.72);
  transition:
    color      var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.nav-links a:hover {
  color: var(--amber-light);
  background: rgba(245, 180, 0, 0.08);
}
.nav-links a.active {
  color: var(--amber-gold);
  background: rgba(245, 180, 0, 0.10);
}

/* Nav right actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.lang-btn {
  padding: 5px 11px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid rgba(232, 113, 10, 0.26);
  background: rgba(232, 113, 10, 0.06);
  color: var(--amber);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover {
  background: rgba(232, 113, 10, 0.16);
  border-color: rgba(232, 113, 10, 0.40);
}

.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232, 113, 10, 0.20);
  background: rgba(232, 113, 10, 0.06);
  color: var(--amber-gold);
  cursor: pointer;
  font-size: .74rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-spring);
}
.theme-btn:hover {
  background: rgba(232, 113, 10, 0.18);
  transform: rotate(20deg) scale(1.08);
}

/* WhatsApp CTA */
.wa-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #e8710a 0%, #f5b400 100%);
  font-size: var(--text-sm);
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(232, 113, 10, 0.38),
    0 1px 0   rgba(255, 255, 255, 0.24) inset;
  transition:
    transform    var(--dur-base) var(--ease-spring),
    box-shadow   var(--dur-base) var(--ease-out),
    filter       var(--dur-fast) var(--ease-out);
}
.wa-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 55%);
  pointer-events: none;
}
.wa-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(232, 113, 10, 0.52),
    0 1px 0   rgba(255, 255, 255, 0.24) inset;
  filter: brightness(1.06);
}
.wa-cta:active {
  transform: scale(0.97);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(232, 113, 10, 0.22);
  background: rgba(232, 113, 10, 0.06);
  color: var(--amber);
  cursor: pointer;
  font-size: .90rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover { background: rgba(232, 113, 10, 0.16); }

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 600;
    flex-direction: column;
    gap: 3px;
    padding: var(--sp-3);
    background: rgba(10, 2, 0, 0.97);
    
    
    border-bottom: 1px solid rgba(232, 113, 10, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 14px; font-size: var(--text-base); }
  .lang-btn { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   5. GLASS CARD SYSTEM
   ───────────────────────────────────────────────────────────── */
.glass-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  
  
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  transition:
    transform     var(--dur-slow) var(--ease-spring),
    box-shadow    var(--dur-slow) var(--ease-out),
    border-color  var(--dur-base) var(--ease-out),
    background    var(--dur-base) var(--ease-out);
  will-change: transform;
}

/* Specular highlight line */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--glass-shine);
  z-index: 2;
  pointer-events: none;
  opacity: .90;
}

/* Subtle inner ambient glow */
.glass-card::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 60%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(245,140,0,.06), transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
  opacity: 0;
}
.glass-card:hover::after { opacity: 1; }

.glass-card:hover {
  transform: translateY(-11px) scale(1.014);
  border-color: var(--glass-border-act);
  box-shadow: var(--glass-shadow-lg);
  background: var(--glass-bg-hover);
}
.glass-card:active {
  transform: translateY(-4px) scale(1.006);
}

[data-theme="dark"] .glass-card { background: rgba(22, 6, 0, 0.76); }
[data-theme="dark"] .glass-card:hover { background: rgba(40, 14, 0, 0.84); }

/* ─────────────────────────────────────────────────────────────
   6. PRODUCT CARD
   ───────────────────────────────────────────────────────────── */
.p-card {
  display: flex;
  flex-direction: column;
  cursor: default;
}

/* Image container */
.p-img {
  width: 100%;
  height: 196px;
  overflow: hidden;
  position: relative;
  background: #160400;
  flex-shrink: 0;
}

.p-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-smooth);
}
.p-card:hover .p-img img {
  transform: scale(1.09);
}

/* Gradient scrim at bottom of image */
.p-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(10,2,0,.42), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Badges */
.badge {
  position: absolute;
  z-index: 4;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-full);
  
  
  border: 1px solid transparent;
}
.badge-cat {
  top: 10px; left: 10px;
  background: rgba(0, 0, 0, 0.54);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffd166;
}
.badge-brand {
  top: 10px; right: 10px;
  background: rgba(232, 113, 10, 0.86);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 113, 10, 0.30);
}

/* Card body */
.p-body {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  position: relative;
  z-index: 3;
}

.p-body h3 {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.26;
  letter-spacing: -.018em;
  margin-bottom: var(--sp-2);
}

/* Spec pills */
.specs {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.spec {
  background: rgba(232, 113, 10, 0.08);
  border: 1px solid rgba(232, 113, 10, 0.18);
  color: var(--amber);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  letter-spacing: .04em;
  transition: background var(--dur-fast) var(--ease-out);
}
.p-card:hover .spec {
  background: rgba(232, 113, 10, 0.13);
}
[data-theme="dark"] .spec {
  background: rgba(232, 113, 10, 0.12);
  color: var(--amber-light);
}
[data-theme="dark"] .p-card:hover .spec {
  background: rgba(232, 113, 10, 0.18);
}

/* Description */
.p-body p {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.60;
  flex: 1;
  margin-bottom: var(--sp-4);
}

/* Quote button */
.quote-btn {
  width: 100%;
  padding: 11px var(--sp-4);
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  background: linear-gradient(135deg, #e8710a 0%, #f5b400 100%);
  font-size: var(--text-sm);
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(232, 113, 10, 0.30),
    0 1px 0   rgba(255, 255, 255, 0.26) inset;
  transition:
    transform   var(--dur-base) var(--ease-spring),
    box-shadow  var(--dur-base) var(--ease-out),
    filter      var(--dur-fast) var(--ease-out);
}
.quote-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 52%);
  pointer-events: none;
}
.quote-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(232, 113, 10, 0.48),
    0 1px 0   rgba(255, 255, 255, 0.26) inset;
  filter: brightness(1.07);
}
.quote-btn:active {
  transform: scale(0.975);
  box-shadow: 0 4px 12px rgba(232, 113, 10, 0.28);
}

/* ─────────────────────────────────────────────────────────────
   7. PRODUCT GRID
   ───────────────────────────────────────────────────────────── */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

@media (min-width: 1024px) {
  .p-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .p-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .p-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   8. FOOTER
   ───────────────────────────────────────────────────────────── */
footer {
  position: relative;
  background: linear-gradient(155deg, #0f0200 0%, #070100 100%);
  border-top: 1px solid rgba(232, 113, 10, 0.10);
  padding: var(--sp-12) var(--sp-5) var(--sp-6);
  overflow: hidden;
}

/* Footer ambient glow */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(232, 113, 10, 0.30) 40%,
    rgba(245, 180, 0, 0.18) 60%,
    transparent);
  pointer-events: none;
}

footer::after {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 240px;
  background: radial-gradient(ellipse, rgba(232,113,10,.06), transparent 70%);
  pointer-events: none;
}

.footer-inner {
  position: relative; z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.f-col h4 {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--amber-gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.f-col p,
.f-col a {
  font-size: var(--text-sm);
  color: rgba(255, 200, 150, 0.45);
  line-height: 2.1;
  display: block;
  transition: color var(--dur-fast) var(--ease-out);
}
.f-col i {
  margin-right: 6px;
  color: rgba(245, 180, 0, 0.35);
}
.f-col a:hover { color: var(--amber-gold); }

/* Social icons */
.socials {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.socials i {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: rgba(232, 113, 10, 0.08);
  border: 1px solid rgba(232, 113, 10, 0.18);
  color: var(--amber);
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background  var(--dur-fast) var(--ease-out),
    transform   var(--dur-base) var(--ease-spring),
    box-shadow  var(--dur-fast) var(--ease-out);
}
.socials i:hover {
  background: rgba(232, 113, 10, 0.22);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(232, 113, 10, 0.24);
}

footer hr {
  position: relative; z-index: 1;
  border: none;
  border-top: 1px solid rgba(232, 113, 10, 0.08);
  max-width: 1240px;
  margin: 0 auto var(--sp-5);
}

.copyright {
  position: relative; z-index: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 200, 150, 0.22);
  letter-spacing: .03em;
}

/* ─────────────────────────────────────────────────────────────
   9. UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */

/* Section divider label */
.sec-label {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -.015em;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sec-label em {
  color: var(--amber);
  font-style: normal;
  font-weight: 700;
}
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-2), transparent);
}

/* ─────────────────────────────────────────────────────────────
   10. ANIMATIONS
   ───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp var(--dur-slow) var(--ease-smooth) both;
}

/* Staggered grid children */
.fade-up .glass-card:nth-child(1) { animation-delay:  40ms; }
.fade-up .glass-card:nth-child(2) { animation-delay:  90ms; }
.fade-up .glass-card:nth-child(3) { animation-delay: 140ms; }
.fade-up .glass-card:nth-child(4) { animation-delay: 180ms; }
.fade-up .glass-card:nth-child(5) { animation-delay: 220ms; }
.fade-up .glass-card:nth-child(6) { animation-delay: 260ms; }
.fade-up .glass-card:nth-child(7) { animation-delay: 300ms; }
.fade-up .glass-card:nth-child(8) { animation-delay: 340ms; }

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Pulse glow — use on highlighted elements */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0   0 rgba(232,113,10,0.00); }
  50%       { box-shadow: 0 0 18px 4px rgba(232,113,10,0.20); }
}
.glow-pulse {
  animation: pulseGlow 2.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   11. SCROLLBAR (webkit)
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(232, 113, 10, 0.22);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 113, 10, 0.40);
}

/* ─────────────────────────────────────────────────────────────
   12. FOCUS STYLES (accessibility)
   ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ─────────────────────────────────────────────────────────────
   13. SELECTION
   ───────────────────────────────────────────────────────────── */
::selection {
  background: rgba(232, 113, 10, 0.28);
  color: var(--text-1);
}

@media(max-width:640px){
  .nav-logo, .logo { height:30px !important; max-width:94px !important; object-fit:contain !important; }
  nav { height:56px !important; }
  .brl-wrap { top:56px !important; }
}

/* ── MOBILE DRAWER ── */
.mobile-drawer {
  display: none;
  position: fixed; top: 56px; left: 0; right: 0; z-index: 880;
  background: rgba(8,2,0,0.97);
  
  
  border-bottom: 1px solid rgba(220,100,0,0.20);
  box-shadow: 0 12px 40px rgba(0,0,0,0.48);
  transform: translateY(-8px); opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
  pointer-events: none; padding: 14px 16px 18px;
}
.mobile-drawer.open { display:block; transform:translateY(0); opacity:1; pointer-events:all; }
.drawer-links { list-style:none; display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.drawer-links li a {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:12px;
  font-size:.86rem; font-weight:600;
  color:rgba(255,205,155,.78); text-decoration:none;
  transition:background .18s, color .18s;
}
.drawer-links li a:hover, .drawer-links li a.active { color:#f5a800; background:rgba(245,168,0,.10); }
.drawer-links li a i { width:20px; text-align:center; color:rgba(232,85,0,.70); font-size:.88rem; }
.drawer-divider { height:1px; margin:12px 0; background:linear-gradient(90deg,transparent,rgba(220,100,0,.22),transparent); }
.drawer-langs {
  display:flex; gap:7px; align-items:center; padding:10px 14px;
  background:rgba(255,255,255,.04); border-radius:12px; border:1px solid rgba(255,255,255,.07);
}
.drawer-langs span { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,200,140,.38); flex-shrink:0; margin-right:4px; }
.drawer-lang-btn {
  padding:5px 13px; border-radius:8px; font-size:.72rem; font-weight:800;
  border:1px solid rgba(232,113,10,.28); background:rgba(232,113,10,.07);
  color:#f5a800; cursor:pointer; font-family:var(--font); transition:all .18s;
}
.drawer-lang-btn:hover { background:rgba(232,85,0,.22); border-color:rgba(232,85,0,.55); color:#fff; }
@media(max-width:640px){
  .nav-links { display:none !important; }
  .menu-toggle { display:flex !important; }
}
@media(min-width:641px){
  .mobile-drawer { display:none !important; }
  .nav-links { display:flex !important; }
  .menu-toggle { display:none !important; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE TOP TAB RAIL — fixed under nav, always visible
   ═══════════════════════════════════════════════════════ */
.top-tab-rail {
  display: none; /* desktop: hidden */
  position: sticky;
  top: 56px;          /* sits right below the 56px mobile nav */
  z-index: 700;
  background: rgba(10,2,0,0.94);
  
  
  border-bottom: 1px solid rgba(220,100,0,0.22);
  box-shadow: 0 3px 18px rgba(0,0,0,0.32);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.top-tab-rail::-webkit-scrollbar { display: none; }

.ttr-inner {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  padding: 0 6px;
}

.ttr-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 16px;
  min-width: 68px;
  text-decoration: none;
  border: none;
  background: none;
  font-family: var(--font);
  color: rgba(255,195,120,0.48);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
  transition: color .18s ease, background .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.ttr-tab i {
  font-size: 1.05rem;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.ttr-tab:hover {
  color: rgba(255,215,150,0.80);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.ttr-tab:hover i { transform: translateY(-2px); }

/* Active indicator — amber top line */
.ttr-tab.active {
  color: #f5a800;
}
.ttr-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #e85500, #f5a800);
  box-shadow: 0 0 10px rgba(245,168,0,0.60);
}

/* Separator between tabs */
.ttr-sep {
  width: 1px; height: 22px; flex-shrink: 0;
  background: rgba(220,100,0,0.16);
  align-self: center;
  margin: 0 2px;
}

/* Show ONLY on mobile */
@media (max-width: 640px) {
  .top-tab-rail { display: block; }
  /* push page content down by the tab rail height (~52px) + nav (56px) */
  body { padding-top: 0; } /* top is handled by sticky positioning */
}
@media (min-width: 641px) {
  .top-tab-rail { display: none !important; }
}