/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ═══ FARADAY INDUSTRIES DESIGN SYSTEM ═══ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600&family=Rajdhani:wght@300;400;500;600;700&display=swap");

:root {
  /* Colors */
  --fi-glow-primary: #0088cc;
  --fi-glow-secondary: #0070a8;
  --fi-glow-dim: #5ab0d4;
  --fi-surface: #eef1f5;
  --fi-surface-elevated: #f8f9fb;
  --fi-surface-line: rgba(0,80,140,0.18);
  --fi-surface-line-strong: rgba(0,80,140,0.3);
  --fi-text-primary: #0a1520;
  --fi-text-muted: #3a5565;
  --fi-text-dim: #5a7a90;
  --fi-accent-green: #22c55e;
  --fi-font-display: "Outfit", sans-serif;
  --fi-font-mono: "Rajdhani", sans-serif;

  /* Spacing scale (1rem = 10px in Bricks 62.5% pattern) */
  --fi-space-xs: 0.4rem;
  --fi-space-sm: 0.8rem;
  --fi-space-md: 1.6rem;
  --fi-space-lg: 2.4rem;
  --fi-space-xl: 4rem;
  --fi-space-2xl: 6.4rem;

  /* Typography scale */
  --fi-text-xs: 1.12rem;
  --fi-text-sm: 1.28rem;
  --fi-text-base: 1.6rem;
  --fi-text-lg: 1.84rem;
  --fi-text-xl: 2.08rem;
  --fi-text-2xl: 2.88rem;
  --fi-text-3xl: 3.84rem;
  --fi-text-4xl: 5.12rem;

  /* Shadows */
  --fi-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --fi-shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --fi-shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

/* ═══ BUTTONS ═══ */
.fi-btn {
  display: inline-block;
  padding: 1.4rem 3.6rem;
  font-family: var(--fi-font-mono);
  font-size: var(--fi-text-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fi-surface-line);
  background: transparent;
  color: var(--fi-text-primary);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.fi-btn:hover {
  border-color: var(--fi-glow-dim);
  color: var(--fi-glow-primary);
  box-shadow: 0 0 20px rgba(0,136,204,0.15);
  transform: translateY(-2px);
}
.fi-btn-filled {
  background: var(--fi-glow-primary);
  border-color: var(--fi-glow-primary);
  color: #fff;
}
.fi-btn-filled:hover {
  background: var(--fi-glow-secondary);
  border-color: var(--fi-glow-secondary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,136,204,0.3);
}

/* ═══ HERO BACKGROUND EFFECTS ═══ */
.fi-grid-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.fi-grid-bg::before {
  content: ""; position: absolute; inset: -50%; width: 200%; height: 200%;
  background-image: linear-gradient(var(--fi-surface-line) 1px, transparent 1px), linear-gradient(90deg, var(--fi-surface-line) 1px, transparent 1px);
  background-size: 80px 80px; animation: fiGridDrift 60s linear infinite;
}
.fi-grid-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, var(--fi-surface) 70%);
}
@keyframes fiGridDrift { 0% { transform: translate(0,0); } 100% { transform: translate(80px,80px); } }

.fi-ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fi-ambient-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0; animation: fiOrbPulse 8s ease-in-out infinite; }
.fi-ambient-orb:nth-child(1) { width: 600px; height: 600px; top: -15%; left: -10%; background: var(--fi-glow-dim); animation-delay: 0s; animation-duration: 12s; }
.fi-ambient-orb:nth-child(2) { width: 400px; height: 400px; bottom: -10%; right: -5%; background: var(--fi-glow-secondary); animation-delay: 4s; animation-duration: 10s; }
.fi-ambient-orb:nth-child(3) { width: 200px; height: 200px; top: 40%; left: 60%; background: var(--fi-glow-primary); animation-delay: 2s; animation-duration: 14s; }
@keyframes fiOrbPulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.3; } }

.fi-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fi-particle { position: absolute; width: 2px; height: 2px; background: var(--fi-glow-primary); border-radius: 50%; opacity: 0; animation: fiParticleFloat linear infinite; }
@keyframes fiParticleFloat { 0% { opacity: 0; transform: translateY(0) translateX(0); } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-100vh) translateX(20px); } }

.fi-scanline {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent 0%, var(--fi-glow-primary) 20%, var(--fi-glow-primary) 80%, transparent 100%);
  opacity: 0.4; animation: fiScan 8s ease-in-out infinite;
  box-shadow: 0 0 20px var(--fi-glow-primary), 0 0 50px var(--fi-glow-dim);
}
@keyframes fiScan { 0%, 100% { top: -2px; opacity: 0; } 5% { opacity: 0.4; } 95% { opacity: 0.4; } 50% { top: 100%; } }

.fi-corner { position: absolute; width: 40px; height: 40px; z-index: 5; }
.fi-corner::before, .fi-corner::after { content: ""; position: absolute; background: var(--fi-glow-secondary); opacity: 0.5; }
.fi-corner-tl { top: 24px; left: 24px; } .fi-corner-tl::before { top:0;left:0;width:20px;height:1px; } .fi-corner-tl::after { top:0;left:0;width:1px;height:20px; }
.fi-corner-tr { top: 24px; right: 24px; } .fi-corner-tr::before { top:0;right:0;width:20px;height:1px; } .fi-corner-tr::after { top:0;right:0;width:1px;height:20px; }
.fi-corner-bl { bottom: 24px; left: 24px; } .fi-corner-bl::before { bottom:0;left:0;width:20px;height:1px; } .fi-corner-bl::after { bottom:0;left:0;width:1px;height:20px; }
.fi-corner-br { bottom: 24px; right: 24px; } .fi-corner-br::before { bottom:0;right:0;width:20px;height:1px; } .fi-corner-br::after { bottom:0;right:0;width:1px;height:20px; }

/* ═══ SCROLL INDICATOR ═══ */
.fi-scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fi-scroll-indicator span { font-family: var(--fi-font-mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fi-text-dim); }
.fi-scroll-line { width: 1px; height: 32px; position: relative; overflow: hidden; background: var(--fi-surface-line); }
.fi-scroll-line::after { content: ""; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: var(--fi-glow-primary); box-shadow: 0 0 6px var(--fi-glow-primary); animation: fiScrollPulse 2s ease-in-out infinite; }
@keyframes fiScrollPulse { 0% { top: -100%; } 100% { top: 100%; } }

/* ═══ SERVICE ICON ═══ */
.fi-service-icon { width: 44px; height: 44px; margin-bottom: 1.5rem; color: var(--fi-glow-primary); opacity: 0.8; }
.fi-service-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ TECH ICON ═══ */
.fi-tech-icon { width: 48px; height: 48px; color: var(--fi-glow-primary); opacity: 0.7; transition: opacity 0.3s; }
.fi-tech-icon:hover { opacity: 1; }
.fi-tech-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ MISSION BLOCK ACCENT ═══ */
.fi-mission-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--fi-glow-primary), transparent); box-shadow: 0 0 12px var(--fi-glow-primary); }

/* ═══ HEADER SPACING FIX ═══ */
#brxe-hd0002 {
  width: 100% !important;
}

/* ═══ ACTIVE NAV STATE ═══ */
.fi-nav-active a {
  color: var(--fi-glow-primary) !important;
}
.fi-nav-active {
  position: relative;
}
.fi-nav-active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fi-glow-primary);
  border-radius: 1px;
}

/* ═══ HAMBURGER BUTTON ═══ */
.fi-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.fi-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fi-text-primary);
  border-radius: 1px;
  transition: all 0.3s ease;
}
.fi-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.fi-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.fi-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ═══ MOBILE MENU ═══ */
.fi-mobile-overlay,
.fi-mobile-menu {
  display: none;
}
.fi-mobile-menu a {
  display: block;
  padding: 14px 0;
  font-family: var(--fi-font-mono);
  font-size: var(--fi-text-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fi-text-primary);
  border-bottom: 1px solid var(--fi-surface-line);
  transition: color 0.3s ease;
}
.fi-mobile-menu a:hover,
.fi-mobile-menu a.fi-nav-active {
  color: var(--fi-glow-primary);
}
.fi-mobile-menu .fi-mob-cta {
  margin-top: 16px;
  color: var(--fi-glow-primary);
  border-bottom: none;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 991px) {
  #brxe-hd0006,
  #brxe-hd000d {
    display: none !important;
  }
  .fi-hamburger {
    display: flex;
  }
  .fi-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 21, 32, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .fi-mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  .fi-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: var(--fi-surface-elevated);
    z-index: 1000;
    padding: 80px 32px 32px;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
  }
  .fi-mobile-menu.open {
    right: 0;
  }
}

@media (max-width: 600px) {
  .fi-corner { display: none; }
  .fi-ambient-orb { filter: blur(40px); }
  .fi-scanline { box-shadow: none; }
  .fi-btn { padding: 1.2rem 2.4rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-particle { display: none; }
  .fi-scanline { animation: none; opacity: 0; }
  .fi-ambient-orb { animation: none; }
  .fi-grid-bg::before { animation: none; }
}