/* ============================================================
   PREMIUM GLASS OVERRIDE — RED THEME, FROSTED LUXE, CLEAN ICONS
   Loaded after main.css to override the brand palette & polish.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* RED palette (replaces orange) */
  --red: #ff2238;
  --red2: #ff506a;
  --red-deep: #c8102e;
  --red-glow: rgba(255, 34, 56, 0.18);
  --red-glow2: rgba(255, 34, 56, 0.38);
  --red-soft: rgba(255, 34, 56, 0.08);

  /* Alias the legacy orange tokens so existing rules pick up red instantly */
  --orange: var(--red);
  --orange2: var(--red2);
  --orange-glow: var(--red-glow);
  --orange-glow2: var(--red-glow2);

  /* Deeper, richer surface tones */
  --deep: #06070b;
  --navy: #0a0c14;
  --card: #0d1019;
  --card2: #11141e;

  /* Premium glass */
  --glass: rgba(255, 255, 255, 0.045);
  --glass2: rgba(255, 255, 255, 0.085);
  --glass3: rgba(255, 255, 255, 0.12);
  --glass-stroke: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, rgba(255,34,56,0.18));
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.14);

  --shadow-glass: 0 30px 80px -20px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-red: 0 30px 80px -25px rgba(255,34,56,0.45), 0 0 60px rgba(255,34,56,0.15);
}

/* ── Typography upgrade ───────────────────────────────────── */
body { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -0.005em; }
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .card-title,
.led-wall-text, .stat-number {
  font-family: 'Outfit', 'Manrope', sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.label, .nav-links a, .product-tab, .form-label,
.spec-value, .industry-name, .footer-col h4,
.tech-name, .author-name, .stats-bar-label, .marquee-item {
  font-family: 'Manrope', sans-serif !important;
}
code, .mono { font-family: 'JetBrains Mono', monospace; }

.label { color: var(--red); }
.orange-text, .hero-badge { color: var(--red) !important; }

/* Red gradient text everywhere */
.gradient-text {
  background: linear-gradient(120deg, #ffffff 0%, #ffb1bb 35%, var(--red) 65%, var(--red-deep) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Body backdrop: cinematic gradient mesh ───────────────── */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,34,56,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(120,0,30,0.10), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(255,34,56,0.08), transparent 60%),
    linear-gradient(180deg, #06070b 0%, #08090f 100%) !important;
}

/* ── Glass utility (premium frosted card) ─────────────────── */
.glass-card, .why-card, .spec-item, .testimonial-card,
.industry-card, .product-visual, .form-input, .form-select,
.form-textarea, .social-link, .comparison-col.them,
.hero-badge, .stats-bar-item {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: var(--shadow-glass);
}
.glass-card::before, .why-card::before, .testimonial-card::before,
.product-visual::before, .stats-bar-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 40%, rgba(255,34,56,0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}
.why-card:hover, .industry-card:hover, .glass-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,34,56,0.05)) !important;
  box-shadow: var(--shadow-red);
}

/* ── Navigation glass refinement ──────────────────────────── */
nav.scrolled {
  background: rgba(8, 9, 15, 0.55) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.logo-mark {
  background: linear-gradient(135deg, var(--red), var(--red-deep)) !important;
  box-shadow: 0 0 24px var(--red-glow2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.logo-text span { color: var(--red); }

/* ── Buttons: premium red w/ inner highlight ──────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%) !important;
  box-shadow: 0 10px 30px -8px var(--red-glow2), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--red2) 0%, var(--red) 100%) !important;
  box-shadow: 0 16px 50px -10px var(--red-glow2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-outline {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16) !important;
}
.btn-outline:hover { color: var(--red) !important; border-color: var(--red) !important; background: var(--red-soft) !important; }

/* ── Hero: cinematic premium animation ────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,34,56,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(200,16,46,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #06070b 0%, #0a0c14 100%) !important;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,34,56,0.12), transparent 25%,
      rgba(255,80,106,0.08) 50%, transparent 75%,
      rgba(255,34,56,0.12));
  filter: blur(80px);
  opacity: 0.7;
  animation: heroOrbit 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
@keyframes heroOrbit {
  0%   { transform: rotate(0deg)   scale(1.1); }
  50%  { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1.1); }
}
.hero .container { position: relative; z-index: 2; }

.hero-badge {
  background: linear-gradient(135deg, rgba(255,34,56,0.18), rgba(255,34,56,0.05)) !important;
  border: 1px solid rgba(255,34,56,0.35) !important;
  color: #ffd1d6 !important;
  backdrop-filter: blur(14px);
}
.hero-badge-dot { background: var(--red) !important; box-shadow: 0 0 12px var(--red); }

.hero-title { letter-spacing: -0.035em; font-weight: 900; }
.hero-title::selection { background: var(--red); }

/* Floating LED wall — glass frame + glow + slow float */
.led-wall-container { perspective: 1200px; }
.led-wall {
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,34,56,0.18),
    0 60px 120px -30px rgba(255,34,56,0.35),
    0 30px 80px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  animation: ledFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
}
.led-wall::before {
  content:'';
  position:absolute; inset:-2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 35%, rgba(255,34,56,0.5));
  border-radius: 10px;
  z-index:-1;
  filter: blur(14px);
  opacity:.55;
}
.led-wall-overlay {
  background: linear-gradient(135deg, rgba(255,34,56,0.6) 0%, rgba(120,0,30,0.4) 50%, rgba(255,80,106,0.6) 100%) !important;
}
.led-wall-text { text-shadow: 0 0 30px rgba(255,80,106,0.9), 0 0 60px rgba(255,34,56,0.6) !important; }
@keyframes ledFloat {
  0%,100% { transform: translateY(0) rotateX(2deg) rotateY(-3deg); }
  50%     { transform: translateY(-14px) rotateX(-1deg) rotateY(2deg); }
}

/* Hero stat numbers — red accent */
.stat-number { background: linear-gradient(180deg, #fff 0%, #ffc2c9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Sections / dividers ──────────────────────────────────── */
.divider { background: linear-gradient(90deg, var(--red), transparent) !important; width: 64px; height: 3px; border-radius: 4px; }

/* ── Product tabs / badges ────────────────────────────────── */
.product-tab.active, .product-tab:hover {
  background: linear-gradient(135deg, var(--red), var(--red-deep)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px -6px var(--red-glow2);
}
.product-badge {
  background: linear-gradient(135deg, var(--red), var(--red-deep)) !important;
  box-shadow: 0 6px 18px -6px var(--red-glow2), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ── Industry grid: glass tiles ───────────────────────────── */
.industry-grid { background: transparent !important; border: 0 !important; gap: 1rem !important; }
.industry-card { border-radius: 14px !important; padding: 1.75rem 1rem !important; }
.industry-icon { color: var(--red); }
.industry-icon svg { width: 32px; height: 32px; display: inline-block; filter: drop-shadow(0 4px 10px var(--red-glow2)); }

/* ── Clean SVG icon styles ────────────────────────────────── */
.icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-solid { fill: currentColor; stroke: none; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }
.icon-red { color: var(--red); }
.why-icon { color: var(--red); margin-bottom: 1rem; }
.why-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 6px 14px var(--red-glow2)); }
.feature-icon svg { width: 18px; height: 18px; }
.check svg { color: #00d68f; }
.cross svg { color: #ff4757; }

/* ── Comparison ───────────────────────────────────────────── */
.comparison-col.us {
  background: linear-gradient(135deg, rgba(255,34,56,0.14), rgba(255,34,56,0.03)) !important;
  border: 1px solid rgba(255,34,56,0.28) !important;
  box-shadow: 0 30px 80px -30px rgba(255,34,56,0.35);
}
.comparison-logo { background: linear-gradient(135deg, var(--red), var(--red-deep)) !important; color: #fff; box-shadow: 0 6px 18px var(--red-glow2); }
.comparison-logo svg { width: 22px; height: 22px; }

/* ── Marquee dot red ──────────────────────────────────────── */
.marquee-item .dot { background: var(--red) !important; box-shadow: 0 0 10px var(--red); }

/* ── CTA section ──────────────────────────────────────────── */
.cta-section {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,34,56,0.16), transparent 60%),
    linear-gradient(180deg, transparent, rgba(255,34,56,0.06)) !important;
}
.cta-glow { background: radial-gradient(ellipse, rgba(255,34,56,0.22), transparent 70%) !important; }

/* ── WhatsApp keep green but glass aura ──────────────────── */
.whatsapp-fab { box-shadow: 0 8px 30px rgba(37,211,102,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }

/* ── Footer accents ──────────────────────────────────────── */
.footer-links a:hover, .footer-contact a:hover, .breadcrumb a:hover { color: var(--red) !important; }
.social-link:hover { background: linear-gradient(135deg, var(--red), var(--red-deep)) !important; border-color: transparent !important; }
.social-link svg { width: 16px; height: 16px; }

/* ── Reveal: smoother entrance ───────────────────────────── */
.reveal { transform: translateY(40px); filter: blur(6px); }
.reveal.visible { filter: blur(0); }

/* ── Smooth section bridges ──────────────────────────────── */
section { position: relative; }
section + section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,34,56,0.25), transparent);
}

/* ── Mobile nav red links ───────────────────────────────── */
.mobile-nav a:hover { color: var(--red) !important; }

/* ── Stars / testimonials accent ─────────────────────────── */
.testimonial-quote { color: var(--red) !important; }
.author-avatar { background: linear-gradient(135deg, var(--red), var(--red-deep)) !important; }