/* =========================================================
   EdgeMax Static Site Skin (Bootstrap 5)
   DROP-IN REPLACEMENT (fixed :root + no duplicate sticky rules)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --brand-green: #00DC82; /* primary */
  --brand-blue: #00B4FF;

  /* glow tuning */
  --brand-glow-green: rgba(0,220,130,.35);
  --brand-glow-blue: rgba(0,180,255,.30);

  --bg-900:#0D1117;
  --text-100:#E5E7EB;

  --primary:#00DC82;
  --secondary:#00B4FF;
  --accent-gold:#C8A24A;

  --surface-900: rgba(13,17,23,0.72);
  --surface-border: rgba(255,255,255,0.06);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.45);

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;

  --logo-size-mobile: 34px;
  --logo-size-desktop: 40px;
  --header-vpad: 10px;

  --glow-blue: rgba(0,180,255,.45);
  --glow-emerald: rgba(0,220,130,.42);
  --glow-gold: rgba(200,162,74,.40);

  /* EdgeAssist PNG FX */
  --ea-hue: 0deg;
  --ea-glow: rgba(0,180,255,.35);

  /* Header logo filters (optional) */
  --brand-filter-top: invert(1) saturate(0) brightness(2); /* white */
  --brand-filter-sticky: invert(44%) sepia(82%) saturate(992%) hue-rotate(95deg) brightness(1.12) contrast(1.05); /* green-ish */
}

/* ---------- Base ---------- */
html,body{
  background: var(--bg-900);
  color: var(--text-100);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Space Grotesk", ui-sans-serif, system-ui;
  letter-spacing: -0.01em;
  color: var(--text-100);
}

a{
  color: var(--secondary);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, text-shadow .25s ease;
}
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ---------- Layout helpers ---------- */
.container-narrow{ max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5); }
.section{ padding: var(--space-9) 0; position: relative; }
.section-sm{ padding: var(--space-6) 0; position: relative; }
.section-tight{ padding: var(--space-7) 0; position: relative; }

/* ---------- Background ---------- */
body{ position: relative; }

body::before{
  content:"";
  position: fixed;
  inset: -12%;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(52% 40% at 30% 10%, rgba(0,220,130,0.22) 0%, transparent 60%),
    radial-gradient(44% 36% at 80% 25%, rgba(0,180,255,0.18) 0%, transparent 65%),
    radial-gradient(40% 34% at 10% 90%, rgba(255,255,255,0.06) 0%, transparent 70%);
  filter: blur(32px);
}

body::after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(40% 35% at 20% 20%, rgba(0,180,255,0.14), transparent 65%),
    radial-gradient(35% 30% at 80% 30%, rgba(0,220,130,0.12), transparent 70%),
    radial-gradient(45% 40% at 50% 80%, rgba(200,162,74,0.08), transparent 70%);
  filter: blur(60px);
  animation: edgemaxAmbient 28s ease-in-out infinite alternate;
}

@keyframes edgemaxAmbient{
  0%{ transform: translate3d(-2%, -2%, 0) scale(1); opacity: .75; }
  50%{ transform: translate3d(2%, 1%, 0) scale(1.04); opacity: .9; }
  100%{ transform: translate3d(0%, 2%, 0) scale(1.08); opacity: .7; }
}

/* Ensure content sits above fixed background layers */
#main, footer{
  position: relative;
  z-index: 2;
}

/* ---------- Glass surfaces ---------- */
.glass,
.card.glass,
.card-glass{
  background: var(--surface-900);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-glass{
  padding: var(--space-6);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card-glass:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 32px var(--glow-emerald);
}

/* Screenshot polish */
img[src*="screens"]{
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 40px rgba(0,180,255,.18);
}

/* ---------- Bootstrap-ish overrides ---------- */
.btn,
.form-control,
.form-select,
.card,
.navbar,
.dropdown-menu{
  border-radius: var(--radius-md);
}
.text-muted{ color: #aab2bd !important; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-emerald{
  background: var(--primary) !important;
  border-color: transparent !important;
  color: #062E1C !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.btn-primary:hover,
.btn-emerald:hover{
  filter: brightness(.95);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 28px var(--glow-emerald);
}

.btn-outline-glass,
.btn-outline-primary{
  color: var(--text-100) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 20px !important;
  background: transparent !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease !important;
}
.btn-outline-glass:hover,
.btn-outline-primary:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(0,180,255,.35) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 28px var(--glow-blue);
}

/* Optional sheen effect */
.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -30%;
  width:60px;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transition: transform .6s ease;
}
.shine:hover::after{ transform: translateX(220%) skewX(-20deg); }

/* ---------- Header / Navbar ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(13,17,23,0.55);
  border-bottom: 1px solid var(--surface-border);
  overflow: visible;
  --logo-size: var(--logo-size-mobile);
}
@media (min-width: 992px){
  .site-header{ --logo-size: var(--logo-size-desktop); }
}
.site-header.is-sticky{
  box-shadow: var(--shadow-sm);
}

.site-header .navbar{
  padding-top: var(--header-vpad);
  padding-bottom: var(--header-vpad);
  min-height: calc(var(--logo-size) + (var(--header-vpad) * 2));
  align-items: center;
}

/* brand wrapper link */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  line-height:1;
}

/* logo image */
.brand-logo{
  height: var(--logo-size);
  width: auto;
  display:block;
  filter: var(--brand-filter-top);
  transition: filter .25s ease, transform .25s ease;
}

/* text next to logo */
.brand-text{
  display:inline-flex;
  align-items:baseline;
  gap: 2px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--text-100);
  opacity: .96;
  transition: color .25s ease, text-shadow .25s ease, opacity .25s ease;
}

/* AI = blue accent */
.brand-accent{
  color: var(--brand-blue);
  text-shadow:
    0 0 6px var(--brand-glow-blue),
    0 0 14px rgba(0,180,255,.15);
}

/* hover polish */
.brand:hover .brand-text{
  opacity: 1;
  text-shadow: 0 0 10px rgba(0,180,255,.22);
}

/* STICKY STATE: logo + text go GREEN (single source of truth) */
.site-header.is-sticky .brand-logo{
  filter:
    var(--brand-filter-sticky)
    drop-shadow(0 0 14px var(--brand-glow-green));
}
.site-header.is-sticky .brand-text{
  color: var(--brand-green);
  text-shadow:
    0 0 10px rgba(0,220,130,.25),
    0 0 24px rgba(0,220,130,.12);
}
.site-header.is-sticky .brand-accent{
  color: var(--brand-green);
  text-shadow:
    0 0 12px rgba(0,220,130,.35),
    0 0 28px rgba(0,220,130,.18);
}

/* ---------- Navbar dropdown (premium glass) ---------- */
.site-header .dropdown-menu{
  background: rgba(13,17,23,0.92);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 10px;
  min-width: 280px;
}

.site-header .dropdown-item{
  color: var(--text-100);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.15;
  transition: background .18s ease, transform .18s ease;
}

.site-header .dropdown-item small{
  display:inline-block;
  margin-top: 4px;
  opacity: .85;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus{
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
  color: var(--text-100);
  text-decoration: none;
}

.site-header .dropdown-divider{
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 8px 4px;
}

/* Make dropdown toggle arrow a bit cleaner on dark */
.site-header .dropdown-toggle::after{
  transform: translateY(1px);
  opacity: .8;
}


@media (min-width: 992px){
  .brand-text{ font-size: 19px; }
}

/* nav links */
.navbar .nav-link{
  color: var(--text-100) !important;
  opacity: .9;
  position: relative;
  transition: color .2s ease, opacity .2s ease, text-shadow .25s ease, transform .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  opacity: 1;
  text-shadow: 0 0 8px var(--glow-blue), 0 0 16px var(--glow-emerald);
  text-decoration: none;
}

/* underline */
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:.5rem; right:.5rem;
  bottom:-.4rem;
  height:2px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after{ transform: scaleX(1); }
.navbar .nav-link.active::after{ transform: scaleX(1); }
.navbar .nav-link.active{ opacity:1; }

/* ---------- Hero ---------- */
.hero{
  padding: var(--space-10) 0 var(--space-8);
  text-align: center;
  position: relative;
}
.hero h1{ font-size: clamp(32px, 5vw, 56px); }
.hero .subhead{ color: #cfd3d9; max-width: 780px; margin: 16px auto 0; }
.hero::before{
  content:"";
  position:absolute;
  inset:-10% -10% auto -10%;
  height:60%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,220,130,.18), rgba(0,180,255,.12) 40%, transparent 70%);
  filter: blur(40px);
  z-index:-1;
}

/* ---------- EdgeAssist (PNG) ---------- */
.ea-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin: 0 6px;
  vertical-align: middle;
}

.ea-word{
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, rgba(0,180,255,.95), rgba(0,220,130,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(0,180,255,.20);
}

.ea-logo-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  opacity: .95;
}
.ea-logo-slot--inline{ width: 44px; height: 44px; }
.ea-logo-slot--tile{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,180,255,.10);
  border: 1px solid var(--surface-border);
}
.ea-logo-slot--kicker{ width: 26px; height: 26px; }

.ea-logo-slot .ea-img{
  width:100%;
  height:100%;
  display:block;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 10px var(--ea-glow))
    hue-rotate(var(--ea-hue));
  transition: filter .25s ease, transform .25s ease;
}
.ea-logo-slot:hover .ea-img{
  transform: translateY(-1px) scale(1.03);
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 16px rgba(0,180,255,.38))
    drop-shadow(0 0 26px rgba(0,220,130,.18))
    hue-rotate(var(--ea-hue));
}

.ea-icon-tile{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
textarea{
  background: rgba(255,255,255,0.02) !important;
  border:1px solid var(--surface-border) !important;
  color:var(--text-100) !important;
  border-radius: var(--radius-md) !important;
}
.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color: rgba(0,180,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,180,255,.22), 0 0 16px var(--glow-blue) !important;
}

/* ---------- Footer ---------- */
.footer{
  padding: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--surface-border);
  color: #b7bdc6;
}

/* ---------- Reveal animations ---------- */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal.delay-1{ transition-delay: .10s; }
.reveal.delay-2{ transition-delay: .20s; }
.reveal.delay-3{ transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .reveal{ transition:none !important; transform:none !important; opacity:1 !important; }
  body::after{ animation: none !important; }
}

/* Utility glows */
.glow-text-hover:hover{ text-shadow: 0 0 8px var(--glow-blue), 0 0 16px var(--glow-emerald); }
.glow-card-hover:hover{ box-shadow: var(--shadow-lg), 0 0 32px var(--glow-blue), 0 0 16px var(--glow-emerald) inset; }

/* GHL embed wrapper (keeps iframe/forms clean in glass card) */
.ghl-embed{
  width: 100%;
}

.ghl-embed iframe{
  width: 100% !important;
  min-height: 720px; /* adjust if your form is taller */
  border: 0 !important;
  border-radius: 12px;
}