/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --teal:     #00bfae;
  --teal-dim: #007d74;
  --teal-lit: #00e5d3;
  --bg:       #0e0e0e;
  --bg2:      #141414;
  --bg3:      #1a1a1a;
  --surface:  #1e1e1e;
  --border:   rgba(255,255,255,0.07);
  --text:     #fff;
  --text-dim: #888;
  --radius:   20px;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  /* Used inside @keyframes so animations inherit theme color automatically */
  --glow-r: 0; --glow-g: 191; --glow-b: 174;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* =====================================================
   SCROLL PROGRESS BAR
   ===================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--teal-lit));
  z-index: 9999;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(0,191,174,0.7);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* =====================================================
   CURSOR GLOW  (desktop only)
   ===================================================== */
.cursor-glow {
  position: fixed;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,191,174,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* =====================================================
   SCROLL-REVEAL ANIMATIONS
   ===================================================== */
:root { --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); }

.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--reveal-ease) var(--delay, 0s),
              transform 0.9s var(--reveal-ease) var(--delay, 0s);
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }

.reveal-card {
  opacity: 0;
  transform: translateY(44px) scale(0.96);
  transition: opacity 0.95s var(--reveal-ease) var(--card-delay, 0s),
              transform 0.95s var(--reveal-ease) var(--card-delay, 0s);
}
.reveal-card.revealed { opacity: 1; transform: translateY(0) scale(1); }

.reveal-slide-right,
.reveal-slide-left {
  opacity: 0;
  transform: translateY(52px) scale(0.95);
  transition: opacity 1.3s var(--reveal-ease) var(--card-delay, 0s),
              transform 1.3s var(--reveal-ease) var(--card-delay, 0s);
}
.reveal-slide-right.revealed,
.reveal-slide-left.revealed { opacity: 1; transform: translateY(0) scale(1); }

/* =====================================================
   NAVBAR
   ===================================================== */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: rgba(14,14,14,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.3s var(--ease);
}
nav.scrolled {
  background: rgba(14,14,14,0.97);
  box-shadow: 0 6px 32px rgba(0,0,0,0.7);
  padding: 9px 32px;
}
nav .logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
nav .logo img { height:42px; width:auto; display:block; transition: filter 0.3s ease; }
nav .logo img:hover { filter: drop-shadow(0 0 10px rgba(0,191,174,0.6)); }

nav ul { list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center; }
nav ul li a {
  text-decoration:none; color:#ccc; font-weight:600; font-size:0.9em;
  padding:6px 11px; border-radius:8px; position:relative;
  transition: color 0.25s ease, background 0.25s ease;
  letter-spacing:0.3px; white-space:nowrap;
}
nav ul li a::after {
  content:''; position:absolute; bottom:0; left:11px;
  width:0; height:2px; background:var(--teal); border-radius:2px;
  transition: width 0.3s var(--ease);
}
nav ul li a:hover { color:#fff; background:rgba(0,191,174,0.08); }
nav ul li a:hover::after { width:calc(100% - 22px); }

nav ul li a.nav-services-link { color:#ccc; }
nav ul li a.nav-services-link:hover { color:#fff; background:rgba(0,191,174,0.08); }
nav ul li a.nav-services-link::after { background:var(--teal); }

nav ul li a.nav-signup-btn {
  background: linear-gradient(135deg, var(--teal), var(--teal-dim));
  color:#fff !important; padding:8px 18px; border-radius:10px;
  font-weight:700; font-size:0.88em; letter-spacing:0.4px;
  box-shadow:0 4px 14px rgba(0,191,174,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
nav ul li a.nav-signup-btn::after { display:none; }
nav ul li a.nav-signup-btn:hover {
  background: linear-gradient(135deg, var(--teal-lit), #009688);
  transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,191,174,0.45);
}

/* User pill */
.nav-user-pill {
  display:flex; align-items:center; gap:8px;
  background:rgba(0,191,174,0.08); border:1px solid rgba(0,191,174,0.25);
  border-radius:40px; padding:5px 12px 5px 5px; cursor:pointer;
  position:relative; transition:background 0.2s, border-color 0.2s; user-select:none;
}
.nav-user-pill:hover { background:rgba(0,191,174,0.14); border-color:rgba(0,191,174,0.45); }
.nav-user-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--teal); flex-shrink:0; }
.nav-user-name { font-size:0.88em; font-weight:700; max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-user-chevron { font-size:0.7em; color:var(--teal); transition:transform 0.25s ease; }

.nav-user-dropdown {
  display:none; position:absolute; top:calc(100% + 12px); right:0;
  background:var(--surface); border:1px solid #2a2a2a; border-radius:14px;
  padding:6px; min-width:188px; box-shadow:0 16px 40px rgba(0,0,0,0.6);
  z-index:2000; animation:dropdownIn 0.2s ease;
}
.nav-user-dropdown.open { display:block; }

@keyframes dropdownIn {
  from { opacity:0; transform:translateY(-8px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.nav-dropdown-item {
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border-radius:9px; font-size:0.88em; font-weight:600; color:#ccc;
  text-decoration:none; background:transparent; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; transition:background 0.15s,color 0.15s; text-align:left;
}
.nav-dropdown-item i { font-size:0.95em; width:16px; text-align:center; color:#555; transition:color 0.15s; }
.nav-dropdown-item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.nav-dropdown-item:hover i { color:var(--teal); }
.nav-dropdown-divider { height:1px; background:#2a2a2a; margin:4px 6px; }
.nav-dropdown-signout { color:#fca5a5; }
.nav-dropdown-signout i { color:rgba(252,165,165,0.5); }
.nav-dropdown-signout:hover { background:rgba(239,68,68,0.07); color:#fca5a5; }
.nav-dropdown-signout:hover i { color:#fca5a5; }

/* ── NAVBAR RIGHT CONTROLS (theme + hamburger) ── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Theme button in navbar */
.nav-theme-wrap {
  position: relative;
}

.nav-theme-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--teal);
  font-size: 0.95em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.nav-theme-icon:hover {
  background: rgba(0,191,174,0.1);
  border-color: rgba(0,191,174,0.4);
  transform: scale(1.08);
}
.nav-theme-icon.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.nav-theme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  z-index: 9999;
  animation: dropdownIn 0.2s ease;
}
.nav-theme-dropdown.open { display: block; }

.nav-theme-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border-radius: 9px; border: none; background: transparent;
  color: #ccc; font-size: 0.84em; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-theme-option:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-theme-option.selected { color: var(--teal); }

.theme-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}
.theme-swatch-dark  { background: radial-gradient(circle at 30% 30%, #00e5d3, #00bfae, #007d74); border-color: rgba(0,191,174,0.4); }
.theme-swatch-fire  { background: radial-gradient(circle at 30% 30%, #ff6666, #ff1a1a, #cc0000); }
.theme-swatch-white { background: radial-gradient(circle at 30% 30%, #e8f5fb, #5bb8d4, #3a94b0); border-color: rgba(91,184,212,0.3); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border-radius:8px; transition:background 0.2s; flex-shrink:0; }
.hamburger:hover { background:rgba(255,255,255,0.06); }
.hamburger div { width:22px; height:2px; background:#ccc; border-radius:2px; transition:all 0.3s ease; }
.hamburger.open div:nth-child(1) { transform:rotate(45deg) translate(5px,4.5px); background:var(--teal); }
.hamburger.open div:nth-child(2) { opacity:0; transform:translateX(-6px); }
.hamburger.open div:nth-child(3) { transform:rotate(-45deg) translate(5px,-4.5px); background:var(--teal); }

/* ── Responsive navbar ── */
@media(max-width:1100px){
  nav { padding:12px 24px; }
  nav ul { gap:4px; }
  nav ul li a { font-size:0.87em; padding:6px 9px; }
  .nav-user-name { max-width:80px; }
}
@media(max-width:900px){
  nav { padding:0 20px; height:62px; }
  nav.scrolled { padding:0 20px; }
  nav ul {
    position:fixed; top:62px; left:-100%; flex-direction:column; align-items:stretch;
    width:100%; max-height:calc(100vh - 62px); overflow-y:auto;
    background:rgba(10,10,10,0.98); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    gap:2px; padding:12px 16px 28px;
    transition:left 0.35s cubic-bezier(0.4,0,0.2,1);
    z-index:999; border-bottom:1px solid var(--border);
  }
  nav ul.active { left:0; }
  nav ul li { width:100%; }
  nav ul li a { display:flex; align-items:center; padding:13px 14px; border-radius:11px; font-size:0.97em; color:#ddd; }
  nav ul li a::after { display:none; }
  nav ul li a:hover { background:rgba(255,255,255,0.05); color:#fff; }
  nav ul li a.nav-services-link { color:#ddd; }
  nav ul li a.nav-signup-btn { justify-content:center; margin-top:6px; padding:13px 18px; border-radius:12px; font-size:0.95em; box-shadow:none; }
  nav ul li a.nav-signup-btn:hover { transform:none; box-shadow:none; }
  .nav-user-pill { border-radius:12px; padding:10px 14px; width:100%; gap:10px; margin-top:6px; }
  .nav-user-avatar { width:36px; height:36px; }
  .nav-user-name { max-width:none; flex:1; font-size:0.95em; }
  .nav-user-dropdown { position:static; display:none; box-shadow:none; border:none; background:transparent; padding:4px 0 0 10px; animation:none; border-radius:0; min-width:unset; }
  .nav-user-dropdown.open { display:block; }
  .nav-dropdown-item { padding:10px 12px; border-radius:10px; font-size:0.92em; color:#bbb; }
  .nav-dropdown-divider { margin:3px 4px; }
  .hamburger { display:flex; }
  /* Theme dropdown on mobile — opens downward from navbar */
  .nav-theme-dropdown { top: calc(100% + 8px); right: 0; min-width: 150px; }
}
@media(max-width:480px){
  nav { padding:0 16px; height:58px; }
  nav .logo img { height:36px; }
  nav ul { top:58px; max-height:calc(100vh - 58px); padding:10px 12px 24px; }
  nav ul li a { padding:12px 12px; font-size:0.94em; }
  .nav-theme-icon { width:32px; height:32px; font-size:0.88em; }
}
@media(max-width:360px){ nav { padding:0 12px; } nav .logo img { height:32px; } }


/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: 62px;
  padding-bottom: 72px;
}
.hero-bg-img { display: none; }
.hero { background: #000; }

.hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 40%, rgba(0,0,0,0.7) 100%),
    linear-gradient(135deg, rgba(0,191,174,0.12) 0%, transparent 55%);
}

.hero-glow-orb { position:absolute; border-radius:50%; z-index:2; pointer-events:none; filter:blur(90px); }
.hero-glow-1 {
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(0,191,174,0.4) 0%, transparent 70%);
  top:-160px; left:-160px; opacity:0.5;
  animation: orbDrift1 14s ease-in-out infinite alternate;
}
.hero-glow-2 {
  width:450px; height:450px;
  background:radial-gradient(circle, rgba(0,100,220,0.3) 0%, transparent 70%);
  bottom:-100px; right:-80px; opacity:0.5;
  animation: orbDrift2 18s ease-in-out infinite alternate;
}
.hero-glow-3 {
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(0,191,174,0.25) 0%, transparent 70%);
  top:50%; right:15%; opacity:0.35;
  animation: orbDrift3 10s ease-in-out infinite alternate;
}

@keyframes orbDrift1 { from{transform:translate(0,0) scale(1);} to{transform:translate(80px,50px) scale(1.15);} }
@keyframes orbDrift2 { from{transform:translate(0,0) scale(1);} to{transform:translate(-50px,-40px) scale(1.1);} }
@keyframes orbDrift3 { from{transform:translate(0,0);} to{transform:translate(-30px,30px);} }

.hero-particles { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-particle {
  position:absolute; border-radius:50%;
  background:var(--teal); box-shadow:0 0 8px rgba(0,191,174,0.9);
  animation: particleRise linear infinite;
}
@keyframes particleRise {
  0%   { transform:translateY(20px) scale(1); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:0.5; }
  100% { transform:translateY(-110vh) scale(0.3); opacity:0; }
}

.hero-content {
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 20px; max-width:920px; width:100%; gap:0;
}

.hero-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:clamp(0.62em,1.4vw,0.76em); font-weight:700; letter-spacing:2.8px;
  text-transform:uppercase; color:var(--teal); margin-bottom:20px;
  animation: fadeUp 0.8s var(--ease) both;
}
.hero-eyebrow-dot {
  display:inline-block; width:5px; height:5px;
  background:var(--teal); border-radius:50%;
  box-shadow:0 0 8px var(--teal); flex-shrink:0;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100%{ box-shadow:0 0 6px var(--teal); }
  50%    { box-shadow:0 0 16px var(--teal-lit); }
}

.hero-title { display:flex; flex-direction:column; align-items:center; line-height:0.92; margin-bottom:20px; }
.hero-title-line1 {
  display:block;
  font-size:clamp(3.8em,13.5vw,10em); font-weight:900; color:#fff;
  letter-spacing:-2px;
  text-shadow:0 0 50px rgba(0,191,174,0.45), 0 6px 30px rgba(0,0,0,0.9);
  animation: fadeUp 0.9s var(--ease) 0.1s both;
}
.hero-title-line2 {
  display:block;
  font-size:clamp(3.8em,13.5vw,10em); font-weight:900;
  background: linear-gradient(135deg, #00bfae 0%, #00ffe8 45%, #00bfae 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-2px;
  filter:drop-shadow(0 0 28px rgba(0,191,174,0.6));
  background-size:200% 200%;
  animation: fadeUp 0.9s var(--ease) 0.2s both, shimmerText 4s linear 1.2s infinite;
}
@keyframes shimmerText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-tagline {
  font-size:clamp(1em,2.8vw,1.5em); font-weight:5;
  color:rgba(255,255,255,0.72); letter-spacing:2px;
  margin-bottom:38px;
  animation: fadeUp 0.9s var(--ease) 0.32s both;
}

.hero-cta-group {
  display:flex; gap:16px; align-items:center; margin-bottom:32px;
  flex-wrap:wrap; justify-content:center;
  animation: fadeUp 0.9s var(--ease) 0.2s both;
}

.hero-cta-primary {
  position: relative;
  display: inline-flex; align-items: center;
  background: rgba(0, 191, 174, 0.18);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 191, 174, 0.55);
  color: #fff;
  font-size: clamp(0.95em, 2vw, 1.12em);
  font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  padding: 18px 44px; border-radius: 14px; text-decoration: none; overflow: hidden;
  box-shadow: 0 0 0 0 rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.4), 0 8px 32px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.3), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: btnPulse 2.6s ease-in-out infinite;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease);
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.4), 0 8px 32px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%       { box-shadow: 0 0 0 10px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0), 0 12px 44px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.5), inset 0 1px 0 rgba(255,255,255,0.18); }
}
.hero-cta-primary .btn-inner { position:relative; z-index:2; display:flex; align-items:center; gap:10px; }
.hero-cta-primary .btn-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,191,174,0.08) 50%, transparent 100%);
  pointer-events: none;
}
.hero-cta-primary:hover {
  transform: translateY(-4px) scale(1.04);
  background: rgba(0, 191, 174, 0.3);
  border-color: rgba(0, 191, 174, 0.85);
  box-shadow: 0 0 0 0 transparent, 0 16px 52px rgba(0,191,174,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: none;
}
.hero-cta-primary:active { transform: translateY(-1px) scale(1.01); }

.hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.85);
  font-size: clamp(0.88em, 1.8vw, 1em);
  font-weight: 600; letter-spacing: 0.5px;
  padding: 17px 32px; border-radius: 14px; text-decoration: none;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.2);
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.hero-cta-secondary:hover {
  color: #fff; background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 28px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
.hero-cta-secondary i { transition: transform 0.25s var(--ease); }
.hero-cta-secondary:hover i { transform: translateX(4px); }

.hero-stats {
  display:flex; align-items:center; gap:28px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:20px 36px;
  animation: fadeUp 0.9s var(--ease) 0.56s both;
}
.hero-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-stat-num { font-size:clamp(1.2em,2.8vw,1.65em); font-weight:900; color:var(--teal); letter-spacing:-0.5px; line-height:1; }
.hero-stat-suffix { display:inline; }
.hero-stat-label { font-size:clamp(0.62em,1.2vw,0.73em); color:rgba(255,255,255,0.5); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.hero-stat-divider { width:1px; height:40px; background:rgba(255,255,255,0.12); flex-shrink:0; }

.hero-scroll-indicator {
  position: absolute; bottom: 28px; left: 0; right: 0;
  margin: 0 auto; width: fit-content; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: fadeUp 1s var(--ease) 1.1s both; cursor: pointer;
}
.hero-scroll-mouse { display: none; }
.hero-scroll-dot   { display: none; }
.hero-scroll-label {
  font-size: 0.6em; color: rgba(255,255,255,0.35);
  letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px;
}
.hero-scroll-indicator::after {
  content: ''; display: block; width: 22px; height: 22px;
  border-right: 2.5px solid rgba(0,191,174,0.8);
  border-bottom: 2.5px solid rgba(0,191,174,0.8);
  transform: rotate(45deg);
  animation: chevronDrop 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0,191,174,0.6));
}
@keyframes chevronDrop {
  0%   { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}

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

@media(max-width:900px){
  .hero { padding-top:62px; padding-bottom:68px; }
  .hero-eyebrow { margin-bottom:12px; font-size:0.68em; }
  .hero-title { margin-bottom:12px; }
  .hero-tagline { margin-bottom:22px; }
  .hero-cta-group { margin-bottom:28px; gap:10px; }
  .hero-stats { padding:14px 22px; gap:18px; }
}
@media(max-width:600px){
  .hero { padding-top:58px; padding-bottom:64px; }
  .hero-eyebrow { margin-bottom:10px; font-size:0.6em; letter-spacing:2px; }
  .hero-title { margin-bottom:10px; }
  .hero-title-line1,.hero-title-line2 { letter-spacing:-1px; }
  .hero-tagline { margin-bottom:18px; font-size:0.95em; letter-spacing:1.5px; }
  .hero-cta-group { margin-bottom:22px; gap:10px; flex-direction:column; align-items:center; width:100%; }
  .hero-cta-primary { padding:15px 36px; font-size:0.95em; width:100%; justify-content:center; }
  .hero-cta-secondary { padding:13px 28px; font-size:0.9em; width:100%; justify-content:center; }
  .hero-stats { padding:13px 18px; gap:14px; }
  .hero-stat-num { font-size:1.15em; }
  .hero-stat-label { font-size:0.6em; }
  .hero-stat-divider { height:32px; }
  .hero-glow-1 { width:300px; height:300px; }
  .hero-glow-2 { width:240px; height:240px; }
  .hero-glow-3 { display:none; }
  .hero-scroll-indicator { bottom:16px; }
}
@media(max-width:400px){
  .hero-eyebrow { font-size:0.56em; gap:7px; }
  .hero-cta-secondary { display:inline-flex; }
  .hero-stats { gap:10px; padding:10px 14px; }
  .hero-stat-num { font-size:1.05em; }
}
@media(max-width:360px){
  .hero { padding-top:58px; padding-bottom:60px; }
  .hero-tagline { font-size:0.88em; margin-bottom:14px; }
  .hero-cta-group { margin-bottom:16px; }
  .hero-cta-primary { padding:12px 22px; }
  .hero-stats { gap:8px; padding:10px 12px; }
}


/* =====================================================
   SEO HIDDEN
   ===================================================== */
.seo-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }


/* =====================================================
   HERO DEPTH LAYER
   ===================================================== */
.hero-depth { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.depth-text { position:absolute; inset:0; user-select:none; }

.depth-line1 {
  position:absolute; top:26%; left:9%;
  font-family:'Thunderstrike','Inter',sans-serif;
  font-size:clamp(4.5em,20vw,16em); font-weight:700;
  color:rgba(255,255,255,0.97); letter-spacing:3px; text-transform:uppercase; line-height:1;
  text-shadow: 1px 1px 2px rgba(160,160,160,0.8), 2px 3px 4px rgba(120,120,120,0.65),
    3px 5px 6px rgba(80,80,80,0.5), 5px 8px 12px rgba(0,0,0,0.65), 0 0 60px rgba(0,191,174,0.2);
  -webkit-text-stroke:1px rgba(255,255,255,0.08);
}

.depth-line2 {
  position:absolute; top:38%; right:10%;
  font-family:'Thunderstrike','Inter',sans-serif;
  font-size:clamp(4.5em,20vw,16em); font-weight:700;
  color:#00e8d5; -webkit-text-fill-color:#00e8d5;
  letter-spacing:3px; text-transform:uppercase; line-height:1;
  text-shadow: 1px 1px 2px rgba(0,140,128,0.85), 2px 3px 4px rgba(0,105,96,0.7),
    3px 5px 6px rgba(0,70,64,0.55), 5px 8px 12px rgba(0,0,0,0.65), 0 0 55px rgba(0,191,174,0.45);
}

.depth-ticker {
  position:absolute; left:0; right:0; top:58%; transform:translateY(-50%);
  z-index:3; overflow:hidden; pointer-events:none; white-space:nowrap;
}
.depth-ticker-track {
  display:inline-block; white-space:nowrap;
  font-family:'Thunderstrike','Inter',sans-serif;
  font-size:0.88rem; font-weight:700; letter-spacing:4px; text-transform:uppercase;
  color:rgba(255,255,255,0.18); text-shadow:none;
  animation:depthTickerScroll 22s linear infinite; will-change:transform;
}
.depth-ticker-copy { display:inline-block; }
@keyframes depthTickerScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-16.6667%); }
}

.hero-depth::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(to top, #0e0e0e 10%, rgba(14,14,14,0.75) 40%, transparent 100%);
  z-index:5; pointer-events:none;
}

.depth-char {
  position:absolute; bottom:2%; left:54%; transform:translateX(-50%);
  height:96%; width:auto; max-width:62%; object-fit:contain; z-index:4; will-change:transform;
  transition: opacity 0.18s ease;
  filter: drop-shadow(-12px 0 50px rgba(255,160,0,0.32)) drop-shadow(12px 0 50px rgba(0,191,174,0.24)) drop-shadow(0 -10px 50px rgba(0,0,0,0.55));
}

.hero-content {
  position:absolute !important; bottom:72px; left:6%; transform:none; z-index:6;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:0 24px; max-width:420px; width:100%; gap:0;
}

@media(max-width:900px){
  .depth-line1 { font-size:clamp(3.8em,18vw,9em); top:22%; left:7%; }
  .depth-line2 { font-size:clamp(3.8em,18vw,9em); top:36%; right:8%; }
  .depth-char  { height:88%; max-width:66%; bottom:1%; left:54%; }
  .hero-content { bottom:70px; left:50%; transform:translateX(-50%); align-items:center; text-align:center; max-width:90%; }
}
@media(max-width:600px){
  .depth-line1 { font-size:clamp(3em,17vw,5.5em); top:20%; left:6%; letter-spacing:2px; }
  .depth-line2 { font-size:clamp(3em,17vw,5.5em); top:34%; right:7%; letter-spacing:2px; }
  .depth-char  { height:82%; max-width:82%; bottom:1%; left:54%; }
  .hero-content { bottom:60px; left:50%; transform:translateX(-50%); align-items:center; text-align:center; max-width:92%; }
}
@media(max-width:400px){
  .depth-line1 { font-size:clamp(2.6em,16vw,4.5em); top:18%; left:5%; }
  .depth-line2 { font-size:clamp(2.6em,16vw,4.5em); top:32%; right:6%; }
  .depth-char  { height:78%; max-width:90%; bottom:0%; left:54%; }
}


/* =====================================================
   SERVICES SECTION
   ===================================================== */
.services { padding:90px 20px 100px; text-align:center; background:var(--bg); position:relative; }
.services::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,191,174,0.3), transparent);
}

.section-label {
  display:inline-block; font-size:0.72em; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px; padding:5px 14px; border-radius:20px;
  background:rgba(0,191,174,0.1); border:1px solid rgba(0,191,174,0.2);
}

.services-title {
  font-size:clamp(1.8em,4vw,2.6em); font-weight:900; color:#fff;
  margin-bottom:12px; text-transform:uppercase; letter-spacing:1.5px; position:relative;
}
.services-title::after {
  content:''; display:block; width:50px; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-lit));
  margin:14px auto 0; border-radius:2px; box-shadow:0 0 12px rgba(0,191,174,0.5);
}

.services-sub { font-size:1em; color:var(--text-dim); margin-top:16px; margin-bottom:54px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.7; }
.services-grid { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }

.service-card {
  background:var(--surface); border:1px solid #252525; border-radius:var(--radius);
  overflow:hidden; flex:1 1 260px; max-width:320px;
  text-decoration:none; color:inherit; display:block;
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  box-shadow:0 4px 24px rgba(0,0,0,0.45); position:relative; transform-style:preserve-3d; will-change:transform;
}
.service-card:hover { box-shadow:0 24px 60px rgba(0,191,174,0.22), 0 8px 24px rgba(0,0,0,0.5); border-color:rgba(0,191,174,0.4); }

.card-shine { position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:var(--radius); transition:background 0.2s ease; }
.card-banner { position:relative; width:100%; height:195px; overflow:hidden; }
.card-banner img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.55s var(--ease); }
.service-card:hover .card-banner img { transform:scale(1.08); }

.card-banner-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, var(--surface) 100%); z-index:1; }

.hot-badge {
  position:absolute; top:14px; left:14px; background:var(--teal); color:#fff;
  font-size:0.72em; font-weight:700; padding:5px 12px; border-radius:20px;
  letter-spacing:0.5px; display:flex; align-items:center; gap:5px; z-index:3;
  text-transform:uppercase; box-shadow:0 4px 14px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.45);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow:0 4px 14px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.4); }
  50%      { box-shadow:0 4px 24px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.7); }
}

.card-body { padding:0 22px 26px; text-align:left; position:relative; z-index:2; }
.card-icon-box {
  width:58px; height:58px; background:var(--bg); border:1px solid #2a2a2a; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  margin-top:-29px; margin-bottom:18px; position:relative; z-index:3;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.service-card:hover .card-icon-box { border-color:rgba(0,191,174,0.35); box-shadow:0 4px 20px rgba(0,191,174,0.2); }
.card-icon { font-size:1.55em; color:var(--teal); transition:transform 0.3s var(--ease); }
.service-card:hover .card-icon { transform:scale(1.2) rotate(-5deg); }

.card-body h3 { font-size:1.5em; font-weight:900; line-height:1.12; margin-bottom:12px; text-transform:uppercase; }
.title-white { color:#fff; }
.title-accent { color:var(--teal); }
.card-body p { font-size:0.88em; color:var(--text-dim); line-height:1.65; margin-bottom:22px; }

.card-btn {
  display:block; width:100%; background:linear-gradient(135deg, var(--teal), var(--teal-dim));
  color:#fff; text-align:center; font-size:0.88em; font-weight:700; padding:14px;
  border-radius:11px; letter-spacing:1px; text-transform:uppercase;
  transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
  box-shadow:0 4px 16px rgba(0,191,174,0.3); position:relative; overflow:hidden;
}
.card-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%); opacity:0; transition:opacity 0.2s; }
.service-card:hover .card-btn { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,191,174,0.45); }
.service-card:hover .card-btn::after { opacity:1; }

@media(max-width:600px){
  .services { padding:60px 16px 72px; }
  .services-sub { margin-bottom:40px; }
  .services-grid { gap:18px; }
  .card-banner { height:160px; }
  .service-card { flex:1 1 100%; max-width:100%; }
}




/* =====================================================
   FEATURES SECTION — "Beyond Top-Up"
   ===================================================== */

.features-section {
  position: relative;
  padding: 80px 0 90px;
  overflow: hidden;
  background: var(--bg);
}

/* Subtle top border glow */
.features-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.3), transparent);
}

/* Background glow orbs */
.features-glow-1,
.features-glow-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.features-section::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  background: radial-gradient(circle, rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.12) 0%, transparent 70%);
  top: -120px; right: -180px;
}

.features-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section Header ── */
.features-header {
  text-align: center;
  margin-bottom: 50px;
}

.features-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.features-label-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal), 0 0 20px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.4);
  animation: featureDotPulse 2s ease-in-out infinite;
}
@keyframes featureDotPulse {
  0%,100% { box-shadow: 0 0 6px var(--teal); }
  50%     { box-shadow: 0 0 18px var(--teal-lit); }
}

.features-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.features-title::after {
  content: '';
  display: block;
  width: 50px; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-lit));
  margin: 14px auto 0;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.5);
}

.features-sub {
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  color: var(--text-dim);
  max-width: 440px;
  margin: 16px auto 0;
  line-height: 1.6;
}

/* ── 2×2 Grid — always 2 columns, 4 on large desktop ── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

/* ── Feature Card ── */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg3, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.08);
}

/* Card shine */
.feature-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}
.feature-card:hover .feature-card-shine {
  opacity: 1;
  background: radial-gradient(circle at 50% 30%, rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.06) 0%, transparent 60%);
}

/* Banner */
.feature-card-banner {
  position: relative;
  height: 110px;
  overflow: hidden;
}
.feature-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-card:hover .feature-card-banner img {
  transform: scale(1.08);
}
.feature-card-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg3, #1a1a1a) 0%, rgba(26,26,26,0.3) 50%, transparent 100%);
}

/* Badge */
.feature-badge {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.15);
  border: 1px solid rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}
.feature-badge-live {
  color: #ff6b6b;
  background: rgba(255,107,107,0.12);
  border-color: rgba(255,107,107,0.3);
}
.feature-badge-new {
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.3);
}

/* Card body */
.feature-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px;
}

.feature-icon-box {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.08);
  border: 1px solid rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.18);
  margin-bottom: 10px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover .feature-icon-box {
  background: rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.15);
  box-shadow: 0 0 16px rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.25);
}
.feature-icon {
  font-size: 0.85em;
  color: var(--teal);
}

.feature-card-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature-card-body p {
  font-size: clamp(0.65rem, 1.8vw, 0.75rem);
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}

.feature-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.feature-card:hover .feature-card-cta {
  opacity: 1;
}
.feature-card-cta i {
  transition: transform 0.3s var(--ease);
}
.feature-card:hover .feature-card-cta i {
  transform: translateX(4px);
}

/* ── Mobile: horizontal feature cards (1 per row) ── */
@media (max-width: 767px) {
  .features-section {
    padding: 50px 0 60px;
  }
  .features-header {
    margin-bottom: 32px;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-card {
    flex-direction: row;
    min-height: 120px;
    border-radius: 14px;
    will-change: auto;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  .feature-card:hover,
  .feature-card:active {
    transform: translateY(-2px) translateZ(0);
  }
  .feature-card-shine {
    display: none;
  }
  .feature-card-banner img {
    transition: none;
  }
  .feature-card:hover .feature-card-banner img {
    transform: none;
  }
  .feature-card-banner {
    width: 130px;
    min-width: 130px;
    height: auto;
    border-radius: 14px 0 0 14px;
  }
  .feature-card-banner img {
    height: 100%;
    object-fit: cover;
  }
  .feature-card-banner-overlay {
    background: linear-gradient(to left, var(--bg3, #1a1a1a) 0%, rgba(26,26,26,0.3) 50%, transparent 100%);
  }
  .feature-badge {
    top: 8px;
    left: 8px;
    right: auto;
    font-size: 0.6rem;
    padding: 3px 8px;
  }
  .feature-card-body {
    padding: 14px;
    flex: 1;
    justify-content: center;
  }
  .feature-icon-box {
    width: 30px; height: 30px;
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .feature-icon {
    font-size: 0.75em;
  }
  .feature-card-body h3 {
    font-size: 0.88rem;
    margin-bottom: 6px;
    white-space: nowrap;
    letter-spacing: 0.2px;
  }
  .feature-card-body p {
    font-size: 0.72rem;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }
  .feature-card-cta {
    font-size: 0.7rem;
  }
  /* Simplify reveal animation on mobile for performance */
  .reveal-card {
    transform: translateY(20px);
    transition: opacity 0.5s ease-out var(--card-delay, 0s),
                transform 0.5s ease-out var(--card-delay, 0s);
  }
  .reveal-card.revealed {
    transform: translateY(0);
  }
}

/* ── Desktop breakpoints ── */
@media (min-width: 1280px) {
  .features-inner { max-width: 1240px; }
}
@media (min-width: 1600px) {
  .features-inner { max-width: 1380px; }
}
@media (min-width: 1920px) {
  .features-inner { max-width: 1560px; }
}


/* =====================================================
   FEATURES — THEME OVERRIDES
   ===================================================== */

/* ── Fire Theme ── */
[data-theme="fire"] .feature-badge {
  color: var(--teal);
  background: rgba(255,26,26,0.12);
  border-color: rgba(255,26,26,0.3);
}
[data-theme="fire"] .feature-card:hover {
  border-color: rgba(255,26,26,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,26,26,0.08);
}
[data-theme="fire"] .feature-card:hover .feature-card-shine {
  background: radial-gradient(circle at 50% 30%, rgba(255,26,26,0.06) 0%, transparent 60%);
}
[data-theme="fire"] .features-title::after {
  box-shadow: 0 0 12px rgba(255,26,26,0.55);
}

/* ── Snow Theme ── */
[data-theme="white"] .features-section {
  background: var(--bg);
}
[data-theme="white"] .features-title { color: #152535; }
[data-theme="white"] .feature-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(91,184,212,0.15);
}
[data-theme="white"] .feature-card:hover {
  border-color: rgba(91,184,212,0.4);
  box-shadow: 0 14px 44px rgba(91,184,212,0.18), 0 4px 16px rgba(50,120,170,0.08);
}
[data-theme="white"] .feature-card-banner-overlay {
  background: linear-gradient(to top, rgba(244,249,252,0.98) 0%, rgba(244,249,252,0.3) 50%, transparent 100%);
}
[data-theme="white"] .feature-icon-box {
  background: rgba(232,245,252,0.9);
  border-color: rgba(91,184,212,0.25);
}
[data-theme="white"] .feature-card:hover .feature-icon-box {
  background: rgba(91,184,212,0.18);
  box-shadow: 0 0 16px rgba(91,184,212,0.2);
}
[data-theme="white"] .feature-card:hover .feature-card-shine {
  background: radial-gradient(circle at 50% 30%, rgba(91,184,212,0.06) 0%, transparent 60%);
}
[data-theme="white"] .features-title::after {
  box-shadow: 0 0 12px rgba(91,184,212,0.45);
}

/* =====================================================
   WHY US STRIP
   ===================================================== */
.why-us { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:48px 24px; }
.why-us-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; }
.why-item { display:flex; align-items:center; gap:16px; padding:16px 36px; flex:1 1 220px; }
.why-icon {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:rgba(0,191,174,0.1); border:1px solid rgba(0,191,174,0.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-size:1.3em;
  transition:background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.why-item:hover .why-icon { background:rgba(0,191,174,0.18); border-color:rgba(0,191,174,0.4); transform:scale(1.1) rotate(-5deg); }
.why-text { display:flex; flex-direction:column; gap:4px; }
.why-text strong { font-size:0.95em; font-weight:700; color:#fff; }
.why-text span { font-size:0.8em; color:var(--text-dim); line-height:1.5; }
.why-divider { width:1px; height:52px; background:var(--border); flex-shrink:0; }

@media(max-width:800px){
  .why-us-inner { flex-direction:column; gap:4px; }
  .why-divider { width:60%; height:1px; }
  .why-item { padding:14px 20px; }
}


/* =====================================================
   FOOTER
   ===================================================== */
footer { background:var(--surface); color:#ccc; padding:56px 24px 40px; margin-top:0; border-top:1px solid var(--border); position:relative; }
footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,191,174,0.3), transparent); }
.footer-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px; padding-bottom:40px; border-bottom:1px solid #2a2a2a; }
footer h3 { color:var(--teal); margin-bottom:14px; font-size:1em; letter-spacing:0.5px; }
footer ul { list-style:none; padding:0; }
footer ul li { margin-bottom:8px; }
footer ul li a, footer p a { color:#aaa; text-decoration:none; font-size:0.9em; transition:color 0.2s; }
footer ul li a:hover, footer p a:hover { color:var(--teal); }
footer p { font-size:0.9em; line-height:1.8; color:#aaa; }
footer p i { margin-right:8px; color:var(--teal); }

.footer-bottom { padding-top:28px; text-align:center; font-size:0.82em; line-height:1.6; }
.footer-bottom p { color:#555; margin:0; }
.social-icons { margin:16px 0; display:flex; justify-content:center; gap:4px; }
.social-icon-link {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  color:#666; font-size:0.95em; text-decoration:none;
  transition:color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.social-icon-link:hover { color:var(--teal); background:rgba(0,191,174,0.1); border-color:rgba(0,191,174,0.35); transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,191,174,0.25); }

@media(max-width:480px){ footer { padding:40px 16px 32px; } .footer-grid { gap:24px; } }


/* =====================================================
   MOBILE PERFORMANCE
   ===================================================== */
@media(max-width:900px){
  .hero-glow-1, .hero-glow-2, .hero-glow-3 { display:none; }
  nav { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(14,14,14,0.97); }
  nav ul { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hero-cta-primary { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,191,174,0.25); }
  .hero-cta-secondary { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,0.1); }
  .hero-stats { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,0.06); }
  .hero-glow-orb { filter:none; }
  .depth-char { filter:none; }
  .hero-cta-primary { animation:none; }
  .depth-ticker-track, .depth-char { will-change:auto; }
}


/* =====================================================
   PC / DESKTOP LAYOUT IMPROVEMENTS
   (min-width only — mobile rules at ≤900px are untouched)
   ===================================================== */

/* ── Base PC (901px+) ──
   • MANU / TOPUP text scaled DOWN significantly
   • Character grounded at bottom edge, reduced height
   • CTA buttons given clean position bottom-left
   • Services grid capped so it doesn't stretch edge-to-edge
*/
@media(min-width:901px){
  .depth-line1 {
    font-size: clamp(4em, 13vw, 12em);
    top: 16%; left: 7%;
  }
  .depth-line2 {
    font-size: clamp(4em, 13vw, 12em);
    top: 30%; right: 7%;
  }
  .depth-char {
    height: 90%;
    max-width: 58%;
    bottom: 0;
    left: 56%;
  }
  .hero-content {
    bottom: 10%;
    left: 5%;
    max-width: 460px;
  }
  .services-grid { max-width:1200px; margin-left:auto; margin-right:auto; }
}

/* ── Standard desktop (1280px – 1599px) ── */
@media(min-width:1280px){
  .depth-line1 { font-size:clamp(5em, 13vw, 13em); top:15%; left:6%; }
  .depth-line2 { font-size:clamp(5em, 13vw, 13em); top:30%; right:6%; }
  .depth-char  { height:92%; max-width:56%; bottom:0; left:57%; }
  .hero-content { bottom:10%; left:5%; max-width:500px; }
  .services { padding:100px 40px 112px; }
  .services-grid { max-width:1240px; }
  .why-us-inner { max-width:1240px; }
  .footer-grid  { max-width:1240px; }
}

/* ── Large desktop (1600px – 1919px) ── */
@media(min-width:1600px){
  .depth-line1 { font-size:clamp(6em, 13vw, 14em); top:14%; left:6%; }
  .depth-line2 { font-size:clamp(6em, 13vw, 14em); top:30%; right:5%; }
  .depth-char  { height:93%; max-width:54%; bottom:0; left:58%; }
  .hero-content { bottom:10%; left:5%; max-width:540px; }
  .services { padding:110px 60px 122px; }
  .services-grid { max-width:1380px; }
  .service-card  { max-width:340px; }
  .why-us-inner { max-width:1380px; }
  .footer-grid  { max-width:1380px; }
}

/* ── Ultra-wide (1920px+) ── */
@media(min-width:1920px){
  .depth-line1 { font-size:clamp(7em, 12vw, 16em); top:13%; left:5%; }
  .depth-line2 { font-size:clamp(7em, 12vw, 16em); top:30%; right:4%; }
  .depth-char  { height:94%; max-width:52%; bottom:0; left:59%; }
  .hero-content { bottom:10%; left:5%; max-width:600px; }
  .services { padding:120px 80px 132px; }
  .services-grid { max-width:1560px; }
  .service-card  { max-width:360px; }
  .why-us-inner { max-width:1560px; }
  .footer-grid  { max-width:1560px; }
}


/* =====================================================
   THEME VARIABLES
   ===================================================== */

/* ── FIRE THEME ── */
[data-theme="fire"] {
  --teal:     #cc0000;
  --teal-dim: #8b0000;
  --teal-lit: #ff1a1a;
  --glow-r: 255; --glow-g: 26; --glow-b: 26;
}

/* Override every hardcoded teal/blue/green value in fire theme */
[data-theme="fire"] .scroll-progress {
  background: linear-gradient(90deg, #cc0000, #ff1a1a, #ff6666);
  box-shadow: 0 0 12px rgba(255,26,26,0.7);
}
[data-theme="fire"] .cursor-glow {
  background: radial-gradient(circle, rgba(255,26,26,0.07) 0%, transparent 65%);
}
[data-theme="fire"] .hero-bg-overlay {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 40%, rgba(0,0,0,0.7) 100%),
    linear-gradient(135deg, rgba(255,26,26,0.16) 0%, transparent 55%);
}
[data-theme="fire"] .hero-glow-1 {
  background: radial-gradient(circle, rgba(255,26,26,0.55) 0%, transparent 70%);
}
[data-theme="fire"] .hero-glow-2 {
  background: radial-gradient(circle, rgba(204,0,0,0.45) 0%, transparent 70%);
}
[data-theme="fire"] .hero-glow-3 {
  background: radial-gradient(circle, rgba(255,102,102,0.32) 0%, transparent 70%);
}
[data-theme="fire"] .hero-particle {
  box-shadow: 0 0 8px rgba(255,26,26,0.9);
}
[data-theme="fire"] .depth-line1 {
  text-shadow:
    1px 1px 2px rgba(160,160,160,0.8),
    2px 3px 4px rgba(120,120,120,0.65),
    3px 5px 6px rgba(80,80,80,0.5),
    5px 8px 12px rgba(0,0,0,0.65),
    0 0 60px rgba(255,26,26,0.35);
}
[data-theme="fire"] .depth-line2 {
  color: #ff6666;
  -webkit-text-fill-color: #ff6666;
  text-shadow:
    1px 1px 2px rgba(204,0,0,0.9),
    2px 3px 4px rgba(100,0,0,0.75),
    3px 5px 6px rgba(70,0,0,0.6),
    5px 8px 12px rgba(0,0,0,0.65),
    0 0 55px rgba(255,102,102,0.65);
}
[data-theme="fire"] .depth-char {
  /* will-change: transform + filter override = compositor tear on scroll. Use auto. */
  will-change: auto;
  filter: drop-shadow(0 0 40px rgba(255,26,26,0.6));
  left: 50%;
}
[data-theme="fire"] .hero-cta-primary {
  background: rgba(255,26,26,0.18);
  border-color: rgba(255,26,26,0.55);
  /* box-shadow handled by variable-based btnPulse animation — no override needed */
}
[data-theme="fire"] .hero-cta-primary:hover {
  background: rgba(255,26,26,0.32);
  border-color: rgba(255,26,26,0.85);
  box-shadow: 0 0 0 0 transparent, 0 16px 52px rgba(255,26,26,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
[data-theme="fire"] .hero-scroll-indicator::after {
  border-right-color: rgba(255,26,26,0.8);
  border-bottom-color: rgba(255,26,26,0.8);
  filter: drop-shadow(0 0 6px rgba(255,26,26,0.65));
}
[data-theme="fire"] .services::before {
  background: linear-gradient(90deg, transparent, rgba(255,26,26,0.35), transparent);
}
[data-theme="fire"] .services-title::after {
  box-shadow: 0 0 12px rgba(255,26,26,0.55);
}
[data-theme="fire"] .service-card:hover {
  box-shadow: 0 24px 60px rgba(255,26,26,0.25), 0 8px 24px rgba(0,0,0,0.5);
  border-color: rgba(255,26,26,0.45);
}
[data-theme="fire"] .service-card:hover .card-icon-box {
  border-color: rgba(255,26,26,0.35);
  box-shadow: 0 4px 20px rgba(255,26,26,0.22);
}
[data-theme="fire"] .card-btn {
  box-shadow: 0 4px 16px rgba(255,26,26,0.32);
}
[data-theme="fire"] .service-card:hover .card-btn {
  box-shadow: 0 8px 24px rgba(255,26,26,0.5);
}
[data-theme="fire"] .social-icon-link:hover {
  color: var(--teal);
  background: rgba(255,26,26,0.1);
  border-color: rgba(255,26,26,0.35);
  box-shadow: 0 6px 18px rgba(255,26,26,0.28);
}
[data-theme="fire"] footer::before {
  background: linear-gradient(90deg, transparent, rgba(255,26,26,0.35), transparent);
}


/* ── SNOW THEME ── */

/* Variables */
[data-theme="white"] {
  --teal:     #5bb8d4;
  --teal-dim: #3a94b0;
  --teal-lit: #93d8f0;
  --glow-r: 91; --glow-g: 184; --glow-b: 212;
  --bg:       #e8f2f8;
  --bg2:      #ddeaf4;
  --bg3:      #cfe0ed;
  --surface:  #f4f9fc;
  --border:   rgba(100,160,200,0.18);
  --text:     #152535;
  --text-dim: #4e7a96;
}
html[data-theme="white"],
html[data-theme="white"] body { background-color: #123c6e !important; }

/* ── Snow particles — white falling dots ── */
[data-theme="white"] .hero-particle {
  background: #fff !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 12px rgba(180,220,255,0.5) !important;
  border-radius: 50% !important;
  display: block !important;
}
@keyframes snowFall {
  0%   { transform: translateY(-20px) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(20px) scale(0.4); opacity: 0; }
}
[data-theme="white"] .hero-particle {
  animation-name: snowFall !important;
  animation-timing-function: linear !important;
}

/* ── Cursor glow ── */
[data-theme="white"] .cursor-glow {
  background: radial-gradient(circle, rgba(91,184,212,0.09) 0%, transparent 65%);
  display: block;
}

/* ── Performance ── */
[data-theme="white"] .hero-glow-orb  { filter: none; opacity: 0.35; }
[data-theme="white"] .depth-char     { filter: drop-shadow(-10px 0 44px rgba(91,184,212,0.4)) drop-shadow(10px 0 44px rgba(147,216,240,0.25)); will-change: auto; left: 50%; }
[data-theme="white"] .hero-scroll-indicator::after { filter: none; }

/* ── Scroll progress bar ── */
[data-theme="white"] .scroll-progress {
  background: linear-gradient(90deg, #3a94b0, #5bb8d4, #93d8f0);
  box-shadow: 0 0 10px rgba(91,184,212,0.65);
}

/* ── Navbar ── */
[data-theme="white"] nav             { background: rgba(28,78,130,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 16px rgba(10,40,80,0.25); }
[data-theme="white"] nav.scrolled    { background: rgba(18,60,110,0.96); box-shadow: 0 6px 32px rgba(10,40,80,0.35); }
[data-theme="white"] nav ul li a     { color: rgba(200,230,255,0.88); }
[data-theme="white"] nav ul li a:hover { color: #fff; background: rgba(91,184,212,0.18); }
[data-theme="white"] nav ul li a.nav-services-link { color: rgba(200,230,255,0.88); }
[data-theme="white"] .hamburger div  { background: rgba(200,230,255,0.9); }
[data-theme="white"] .nav-theme-icon { border-color: rgba(91,184,212,0.35); background: rgba(91,184,212,0.14); color: #93d8f0; }
[data-theme="white"] .nav-theme-dropdown { background: rgba(18,60,110,0.97); border-color: rgba(91,184,212,0.3); box-shadow: 0 14px 40px rgba(10,40,80,0.45); }
[data-theme="white"] .nav-theme-option { color: rgba(200,230,255,0.88); }
[data-theme="white"] .nav-theme-option:hover { background: rgba(91,184,212,0.18); color: #fff; }
[data-theme="white"] .nav-dropdown-item { color: rgba(200,230,255,0.88); }
[data-theme="white"] .nav-dropdown-item:hover { background: rgba(91,184,212,0.18); color: #fff; }
[data-theme="white"] .nav-user-dropdown { background: rgba(18,60,110,0.97); border-color: rgba(91,184,212,0.3); }
[data-theme="white"] .nav-dropdown-divider { background: rgba(91,184,212,0.2); }

/* ── Hero ── */
[data-theme="white"] .hero {
  background: linear-gradient(170deg, #c8e6f4 0%, #daeef8 40%, #e8f5fb 70%, #f0faff 100%);
}
[data-theme="white"] .hero-bg-overlay {
  background:
    linear-gradient(to bottom, rgba(200,230,244,0.08) 0%, transparent 40%, rgba(200,230,244,0.75) 100%),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 55%);
}
[data-theme="white"] .hero-depth::after {
  background: linear-gradient(to top, #e0f0f8 8%, rgba(220,240,250,0.8) 38%, transparent 100%);
}
[data-theme="white"] .hero-glow-1 {
  background: radial-gradient(circle, rgba(91,184,212,0.3) 0%, rgba(147,216,240,0.12) 50%, transparent 70%);
  opacity: 0.55;
}
[data-theme="white"] .hero-glow-2 {
  background: radial-gradient(circle, rgba(180,220,255,0.35) 0%, rgba(120,190,240,0.1) 50%, transparent 70%);
  opacity: 0.45;
}
[data-theme="white"] .hero-glow-3 {
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(200,235,255,0.15) 50%, transparent 70%);
  opacity: 0.5;
}

/* Depth text — frosty */
[data-theme="white"] .depth-line1 {
  color: rgba(40,110,170,0.97);
  -webkit-text-stroke: 1px rgba(180,220,245,0.35);
  text-shadow:
    1px 1px 2px rgba(255,255,255,0.85),
    2px 3px 5px rgba(140,200,235,0.65),
    4px 6px 14px rgba(60,140,200,0.4),
    0 0 55px rgba(50,130,190,0.3);
}
[data-theme="white"] .depth-line2 {
  color: #2288b0;
  -webkit-text-fill-color: #2288b0;
  text-shadow:
    1px 1px 2px rgba(255,255,255,0.9),
    2px 3px 5px rgba(91,184,212,0.55),
    4px 6px 14px rgba(40,130,180,0.4),
    0 0 50px rgba(34,136,176,0.45);
}
[data-theme="white"] .depth-ticker-track { color: rgba(91,184,212,0.22); }

/* Hero content */
[data-theme="white"] .hero-title-line1 {
  color: #152535;
  text-shadow: 0 2px 16px rgba(91,184,212,0.22), 0 0 40px rgba(255,255,255,0.6);
}
[data-theme="white"] .hero-title-line2 {
  background: linear-gradient(135deg, #3a94b0 0%, #5bb8d4 40%, #93d8f0 65%, #5bb8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}
[data-theme="white"] .hero-tagline      { color: rgba(21,37,53,0.62); }
[data-theme="white"] .hero-cta-primary  {
  background: rgba(91,184,212,0.15);
  border-color: rgba(91,184,212,0.5);
  color: #152535;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(91,184,212,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="white"] .hero-cta-primary:hover {
  background: rgba(91,184,212,0.28);
  border-color: rgba(91,184,212,0.8);
  box-shadow: 0 10px 36px rgba(91,184,212,0.32), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="white"] .hero-cta-secondary {
  color: #1e4a64;
  background: rgba(255,255,255,0.4);
  border-color: rgba(91,184,212,0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 12px rgba(91,184,212,0.1);
}
[data-theme="white"] .hero-cta-secondary:hover {
  color: #152535;
  background: rgba(255,255,255,0.6);
  border-color: rgba(91,184,212,0.55);
}
[data-theme="white"] .hero-scroll-label { color: rgba(21,37,53,0.35); }
[data-theme="white"] .hero-scroll-indicator::after {
  border-right-color: rgba(91,184,212,0.7);
  border-bottom-color: rgba(91,184,212,0.7);
}
[data-theme="white"] .hero-stats {
  background: rgba(255,255,255,0.45);
  border-color: rgba(91,184,212,0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(91,184,212,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}
[data-theme="white"] .hero-stat-label   { color: rgba(21,37,53,0.45); }
[data-theme="white"] .hero-stat-divider { background: rgba(91,184,212,0.2); }

/* ── Services ── */
[data-theme="white"] .services-title   { color: #152535; }
[data-theme="white"] .title-white      { color: #152535; }
[data-theme="white"] .services::before {
  background: linear-gradient(90deg, transparent, rgba(91,184,212,0.35), transparent);
}
[data-theme="white"] .services-title::after {
  box-shadow: 0 0 12px rgba(91,184,212,0.45);
}
[data-theme="white"] .service-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(91,184,212,0.22);
  box-shadow: 0 2px 14px rgba(91,184,212,0.1), 0 1px 3px rgba(50,120,170,0.06);
}
[data-theme="white"] .service-card:hover {
  box-shadow: 0 14px 44px rgba(91,184,212,0.22), 0 4px 16px rgba(50,120,170,0.1);
  border-color: rgba(91,184,212,0.5);
}
[data-theme="white"] .service-card:hover .card-icon-box {
  border-color: rgba(91,184,212,0.4);
  box-shadow: 0 4px 18px rgba(91,184,212,0.18);
}
[data-theme="white"] .card-icon-box {
  background: rgba(232,245,252,0.9);
  border-color: rgba(91,184,212,0.25);
}
[data-theme="white"] .card-banner-overlay { background: linear-gradient(to bottom, transparent 40%, rgba(244,249,252,0.98) 100%); }
[data-theme="white"] .service-card:hover .card-btn { box-shadow: 0 8px 24px rgba(91,184,212,0.38); }
[data-theme="white"] .card-btn {
  background: linear-gradient(135deg, #5bb8d4, #3a94b0);
  box-shadow: 0 4px 16px rgba(91,184,212,0.3);
}

/* ── Section label ── */
[data-theme="white"] .section-label {
  background: rgba(91,184,212,0.12);
  border-color: rgba(91,184,212,0.28);
}

/* ── Why Us ── */
[data-theme="white"] .why-us { background: var(--bg2); border-color: rgba(91,184,212,0.18); }
[data-theme="white"] .why-text strong  { color: #152535; }
[data-theme="white"] .why-icon {
  background: rgba(91,184,212,0.12);
  border-color: rgba(91,184,212,0.25);
}
[data-theme="white"] .why-item:hover .why-icon {
  background: rgba(91,184,212,0.22);
  border-color: rgba(91,184,212,0.45);
}

/* ── Footer ── */
[data-theme="white"] footer {
  background: #ddeaf4;
  color: #2a5570;
  border-top-color: rgba(91,184,212,0.2);
}
[data-theme="white"] footer::before {
  background: linear-gradient(90deg, transparent, rgba(91,184,212,0.35), transparent);
}
[data-theme="white"] footer h3 { color: #3a94b0; }
[data-theme="white"] footer ul li a, [data-theme="white"] footer p a { color: #4e7a96; }
[data-theme="white"] footer ul li a:hover, [data-theme="white"] footer p a:hover { color: #5bb8d4; }
[data-theme="white"] footer p          { color: #4e7a96; }
[data-theme="white"] .footer-bottom p  { color: #7aaccb; }
[data-theme="white"] .footer-grid      { border-bottom-color: #b8d8ea; }
[data-theme="white"] .social-icon-link {
  background: rgba(255,255,255,0.3);
  border-color: rgba(91,184,212,0.2);
  color: #5b8faa;
}
[data-theme="white"] .social-icon-link:hover {
  color: #5bb8d4;
  background: rgba(91,184,212,0.12);
  border-color: rgba(91,184,212,0.42);
  box-shadow: 0 6px 18px rgba(91,184,212,0.22);
}

/* ── Hot badge ── */
[data-theme="white"] .hot-badge {
  background: #5bb8d4;
  box-shadow: 0 4px 14px rgba(91,184,212,0.45);
}

@media(max-width:900px){
  [data-theme="white"] nav     { background: rgba(18,60,110,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-theme="white"] nav ul  { background: rgba(14,50,96,0.99); }
}