/* ==========================================================================
   Sunlight Mirage — neon wow (seamless canvas)
   File: usersc/templates/<active_theme>/mirage.css
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --mirage-bg:#0a0a1f;
  --mirage-canvas-1:#060a14;  /* one-canvas stops (from legacy) */
  --mirage-canvas-2:#0a1020;
  --mirage-canvas-3:#4a1246;

  --mirage-text:#eaeaea;
  --mirage-muted:#b6b8d6;

  --mirage-cyan:#00e7ff;
  --mirage-magenta:#ff00c8;
  --mirage-violet:#9b5fff;

  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.5rem;

  --shadow-1:0 6px 22px rgba(0,0,0,.35);
  --glow-1:0 0 24px rgba(0,231,255,.35);
  --glow-2:0 0 36px rgba(255,0,200,.30), 0 0 72px rgba(255,0,200,.15);

  --nav-h:64px;
}

/* ---------- Base (single fixed canvas) ---------------------------------- */
html,body{height:100%}
html, body{
  background: linear-gradient(180deg,
    var(--mirage-canvas-1) 0%,
    var(--mirage-canvas-2) 55%,
    var(--mirage-canvas-3) 100%) fixed;
  color:var(--mirage-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
#page-wrapper{ background:transparent }

/* Links & media */
a{color:var(--mirage-cyan); text-decoration:none}
a:hover{filter:brightness(1.1)}
img{max-width:100%; height:auto}

/* Typography */
h1,h2,h3,h4,.display-1,.display-2{
  font-weight:900; letter-spacing:.2px;
  text-shadow:0 0 14px rgba(0,231,255,.25), 0 0 22px rgba(255,0,200,.15);
}
.lead{color:var(--mirage-muted)}

/* ---------- Layout helpers ---------------------------------------------- */
.section{position:relative; padding:clamp(3rem,6vw,5rem) 0; background:transparent}
.container-narrow{max-width:920px}

/* Remove any band/overlay tints so the canvas shows through */
.section::before, .section::after,
.band-dark::before, .band-dark::after,
.hero-neon::before, .hero-neon::after,
.hero-divider::before, .hero-divider::after{ pointer-events:none }
.band-dark, .section-dark, .section-light,
.hero-divider, .bleed-x, .panel, .panel-dark, .band{
  background:transparent !important; box-shadow:none; border:0;
}

/* ---------- Navbar (apply .navbar-neon on your nav) --------------------- */
.navbar-neon{
  background: rgba(10,10,31,.45)!important;
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:var(--nav-h);
}
.navbar-neon .nav-link{ color:#cfd8ff!important; position:relative; padding:.5rem .75rem }
.navbar-neon .nav-link:hover{ color:#fff!important; text-shadow:0 0 12px rgba(0,231,255,.6) }
.navbar-neon .navbar-brand{ color:#fff; font-weight:800 }
.navbar-neon .btn-neon{ padding:.55rem 1rem; font-weight:800 }
@media (max-width: 991.98px){ .navbar-neon .btn-neon{ padding:.5rem .9rem } }

/* (UL-driven) menu style toggle */
.neon-nav{
  position:sticky; top:0; z-index:1030;
  background: rgba(10,10,31,.45);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:.25rem .75rem;
}
.neon-nav a{ color:#cfd8ff }
.neon-nav a:hover{ color:#fff; text-shadow:0 0 12px rgba(0,231,255,.6) }
.neon-nav .us_brand img{ filter: drop-shadow(0 0 12px rgba(0,231,255,.35)) }
.neon-nav .us_sub-menu{
  background: rgba(15,16,48,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.75rem; box-shadow:var(--shadow-1);
}
.neon-nav .us_sub-menu a:hover{ background: rgba(255,255,255,.04) }
@media (min-width: 992px){ .neon-nav > li > a{ padding:.6rem .9rem } }

/* ---------- Hero (no background block; only glow) ----------------------- */
.hero-neon{
  position:relative; overflow:hidden; color:#fff;
  padding-top: calc(var(--nav-h) + 24px);
  isolation:isolate;   /* keep glow behind content */
}
.hero-neon::after{
  content:""; position:absolute; inset:-40%;
  background: conic-gradient(from 0deg,
    rgba(0,231,255,.15), rgba(255,0,200,.12), rgba(155,95,255,.12), rgba(0,231,255,.15));
  animation: spin 24s linear infinite; filter: blur(60px); opacity:.32; z-index:0;
}
.hero-neon > *{ position:relative; z-index:1 }
@keyframes spin{ to{ transform: rotate(1turn) } }
.hero-neon h1, .hero-neon .display-4{
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 0 18px rgba(0,231,255,.20);
}

/* ======================================================================
   BUTTONS — Mirage neon (global + carousel)
   ====================================================================== */

/* Base reset (keeps Bootstrap utilities) */
.btn{
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .25px;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform, filter, box-shadow;
}
.btn-lg{ padding:.8rem 1.2rem; font-size:1.05rem; }
.btn-sm{ padding:.45rem .8rem;  font-size:.92rem; }
.btn .i-left{  margin-right:.45rem; }
.btn .i-right{ margin-left:.45rem; }

/* Primary gradient */
.btn-neon{
  --b1: var(--mirage-cyan);
  --b2: var(--mirage-magenta);
  color:#fff; border:0;
  background: linear-gradient(90deg, var(--b1), var(--b2));
  box-shadow: 0 6px 18px rgba(0,0,0,.35),
              0 0 22px rgba(0,231,255,.28),
              0 0 34px rgba(255,0,200,.18);
}
.btn-neon:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.38),
              0 0 26px rgba(0,231,255,.32),
              0 0 42px rgba(255,0,200,.22);
}
.btn-neon:active{ transform: translateY(0); filter: brightness(1.02); }
.btn-neon:disabled, .btn-neon[disabled]{ opacity:.65; filter:none; box-shadow:none; }

/* quick variants */
.btn-neon--cyan    { --b1:var(--mirage-cyan);    --b2:#43ffd8; }
.btn-neon--magenta { --b1:var(--mirage-magenta); --b2:#ff6ef0; }
.btn-neon--violet  { --b1:#8c64ff;               --b2:var(--mirage-cyan); }

/* Outline glass */
.btn-outline-neon{
  background: rgba(255,255,255,.02);
  color:#e8edff;
  border:2px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
.btn-outline-neon:hover{
  color:#fff;
  border-color: var(--mirage-cyan);
  box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 22px rgba(0,231,255,.25);
  background: rgba(10,10,31,.22);
}

/* Ghost (for low-emphasis actions) */
.btn-ghost{
  background: transparent; color:#dfe7ff; border:1px solid transparent;
}
.btn-ghost:hover{
  color:#fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
}

/* Focus ring for keyboard users */
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(0,231,255,.28), 0 4px 14px rgba(0,0,0,.25);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
  .btn:hover{ transform:none }
}

/* --- Context tweaks ---------------------------------------------------- */

/* Navbar CTA (“Get a Quote”) */
.navbar-neon .btn-cta{
  padding:.55rem 1rem; font-weight:800;
  border:1px solid rgba(255,255,255,.22);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.navbar-neon .btn-cta:hover{
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
}

/* === NAV LAYOUT FIX PACK (one line, no wrap, crisp CTA) =============== */
.us_menu.horizontal.dark{
  display:flex;                 /* force a single flex row */
  align-items:center;
  flex-wrap:nowrap;
  gap:.25rem;
  white-space:nowrap;           /* belt-and-suspenders */
}
.us_menu.horizontal.dark > li,
.us_menu.horizontal.dark .us_brand{ flex:0 0 auto; }
.us_menu.horizontal.dark li{ overflow:visible; } /* don't clip glows */

/* brand + spacing */
.neon-nav .us_brand{ margin-right:.5rem; }
.neon-nav .us_brand img{ height:26px; }
@media (min-width:1400px){ .neon-nav .us_brand img{ height:28px; } }

/* make item links a touch tighter so everything fits beside the logo */
.neon-nav > li > a{ padding:.55rem .8rem; }

/* give the CTA true “button” behavior and push it to the right */
.neon-nav .nav-cta{ margin-left:auto; }          /* <— key for one-line */
.neon-nav li > a.btn{
  display:inline-flex !important;
  align-items:center;
  gap:.4rem;
  height:auto !important;
  line-height:1.1 !important;
  padding:.55rem 1rem !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.neon-nav li > a.btn i{ margin-right:.25rem }

/* save horizontal space between 992–1200px by hiding text labels */
@media (max-width:1200px) and (min-width:992px){
  .neon-nav .labelText{ display:none; }
}

/* Carousel caption buttons: extra contrast over photos */
#myCarousel .carousel-caption .btn{
  border:1px solid rgba(255,255,255,.30);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
#myCarousel .carousel-caption .btn-outline-neon{
  background: rgba(10,10,31,.44); color:#fff; border-color: rgba(255,255,255,.60);
}
#myCarousel .carousel-caption .btn-outline-neon:hover{
  background: rgba(10,10,31,.58); border-color: var(--mirage-cyan);
}

/* “Chip” style for filters (Our Work) */
.filter-chip{
  border-radius:999px;
  background: rgba(255,255,255,.03);
  color:#dfe7ff; border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1rem; font-weight:700;
}
.filter-chip:hover{
  color:#fff; border-color: var(--mirage-cyan); box-shadow: 0 0 18px rgba(0,231,255,.22);
}
.filter-chip.active{
  color:#fff; background: rgba(0,231,255,.16); border-color: var(--mirage-cyan);
}
/* ---------- Cards / Surfaces -------------------------------------------- */
.card-neon{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-neon:hover{ transform: translateY(-2px); border-color: rgba(0,231,255,.55); box-shadow: var(--glow-1), inset 0 0 24px rgba(0,231,255,.08) }
.card-neon .h5, .card-neon h5{ color:#fff }
.card-neon p{ color:#cfd3ff }

/* Neon icon accent for USP tiles */
.icon-neon{
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  color:var(--mirage-cyan);
  text-shadow:0 0 18px rgba(0,231,255,.55);
}

/* 16:9 helper */
.thumb-16x9{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }

/* ---------- Carousel polish --------------------------------------------- */

/* Indicators */

/* ---------- Headings polish in sections --------------------------------- */
.section h2, .section .h2, .section h3, .section .h3{
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35), 0 0 12px rgba(0,231,255,.12);
}

/* ---------- Forms (consolidated) ---------------------------------------- */
.form-label{ color:#eaf0ff }
.form-control, .form-select{
  background:#0f1030; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:.75rem;
}
.form-control::placeholder, .form-select::placeholder{ color:#9aa3c0 }
.form-control:focus, .form-select:focus{
  border-color: rgba(0,231,255,.55);
  box-shadow: 0 0 0 .25rem rgba(0,231,255,.15);
}
.card-neon form .btn{ min-width:11rem }

/* Alerts (glassy) */
.alert{
  background: rgba(15,16,48,.85);
  border:1px solid rgba(255,255,255,.08);
  color:#eaf0ff; border-radius:.75rem; backdrop-filter: blur(8px);
}
.alert-success{ border-color: rgba(0,231,255,.35); box-shadow: 0 0 18px rgba(0,231,255,.22) }
.alert-danger{  border-color: rgba(255,0,200,.35); box-shadow: 0 0 18px rgba(255,0,200,.22) }

/* ---------- Testimonials ------------------------------------------------- */
.testimonial-quote{ color:#eaf6ff; font-size:1.05rem; line-height:1.6 }
.quote-glow{ color:var(--mirage-cyan); text-shadow:0 0 18px rgba(0,231,255,.55) }
.avatar-40{ width:40px; height:40px; object-fit:cover; border-radius:50% }
@media (max-width:575.98px){ .testimonial-quote{ font-size:1rem } }

/* ---------- Footer ------------------------------------------------------- */
.footer-neon{
  border-top:1px solid rgba(255,255,255,.10);
  background:transparent; /* continue the same canvas */
}
.footer-neon h5, .footer-neon .h5, .footer-neon .brand-title{ color:#eaf0ff }
.footer-neon p, .footer-neon .small{ color:#cfd3ff }
.footer-neon a{ color:#dfe7ff; text-decoration:none }
.footer-neon a:hover{ color:#fff; text-shadow:0 0 10px rgba(0,231,255,.35) }
.footer-neon .divider, .footer-neon hr{ border-color: rgba(255,255,255,.12) }

/* ---------- Motion safety ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* Pricing */
.pricing-grid .col, .pricing-grid .plan-card { min-height:100% }
.plan-price{
  font-size:clamp(1.75rem,3.2vw,2.25rem); font-weight:900; color:#fff; margin:.5rem 0 1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 12px rgba(0,231,255,.12);
}
.plan-features li{ margin:.35rem 0; color:#cfd3ff }
.plan-card.popular{ box-shadow: var(--glow-1), 0 0 0 1px rgba(0,231,255,.35) inset }
.plan-card.popular::after{
  content:"Most Popular"; position:absolute; top:14px; right:14px;
  font-size:.75rem; letter-spacing:.3px; font-weight:800; color:#03121a;
  background:linear-gradient(90deg,var(--mirage-cyan),var(--mirage-magenta));
  padding:.25rem .5rem; border-radius:999px;
}

/* Logos: subtle grayscale that lifts on hover */
.logo-gray{ filter: grayscale(1) opacity(.85); transition: filter .2s ease, transform .2s ease }
.logo-gray:hover{ filter:none; transform: translateY(-2px) }

/* Our Work filters — make the active chip glow */
.portfolio-filters .btn.active{
  border-color: var(--mirage-cyan);
  color:#fff;
  box-shadow: var(--glow-1);
}

/* Compact hero spacing for inner pages */
.hero-compact{
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero-compact::after{ opacity:.24; } /* slightly softer glow here */

/* Our Work hero spacing fixes */
.hero-neon.hero-compact,
.hero-neon.section {
  padding-bottom: 1.5rem !important; /* tighten bottom */
}

.portfolio-filters {
  margin-top: 0 !important;          /* kill extra gap */
  padding-top: .5rem;                /* just a touch of air */
}

/* --- Our Work: melt hero into canvas + tighten gap -------------------- */

/* Soften and fade out the hero glow toward the bottom */
.hero-neon.hero-compact::after{
  opacity:.20;                                     /* a bit lighter */
  /* fade the blur so there’s no hard band */

}

/* Remove any perceived “ledge” by reducing bottom padding slightly */
.hero-neon.hero-compact{
  padding-bottom: 1.1rem !important;
}

/* Pull the filter chips up so they visually belong to the hero */
.portfolio-filters{
  margin-top: -.25rem !important;   /* tiny negative nudge */
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.06); /* optional subtle tie-in */
}

/* === Make hero + navbar buttons pop =================================== */

/* Hero primary (Start a Project) — stronger edge + glow */
.hero-neon .btn-neon{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 22px rgba(0,231,255,.55),
    0 0 38px rgba(255,0,200,.30);
  filter: saturate(115%);
}
.hero-neon .btn-neon:hover{
  filter: saturate(125%) brightness(1.06);
}

/* Hero secondary (See Pricing) — frosted pill so it doesn't disappear */
.hero-neon .btn-outline-neon{
  background: rgba(10,10,31,.28);
  border-color: rgba(255,255,255,.45);
  color: #eef6ff;
}
.hero-neon .btn-outline-neon:hover{
  background: rgba(10,10,31,.36);
  border-color: var(--mirage-cyan);
  box-shadow: 0 0 20px rgba(0,231,255,.25);
}

/* Navbar CTA (Get a Quote) — crisper edge and brighter glow */
.navbar-neon .btn-neon{
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 0 18px rgba(0,231,255,.55),
    0 0 34px rgba(255,0,200,.28);
  filter: saturate(118%);
}
.navbar-neon .btn-neon:hover{
  transform: translateY(-1px);
  filter: saturate(128%) brightness(1.05);
}

/* Filter chips: make inactive chips a touch more visible */
.portfolio-filters .btn{
  background: rgba(10,10,31,.22);
  border-color: rgba(255,255,255,.28);
  color:#e7ecff;
}
.portfolio-filters .btn.active{
  background: rgba(10,10,31,.32);
  border-color: var(--mirage-cyan);
  color:#fff;
  box-shadow: var(--glow-1);
}

/* === Button contrast pack — hero + top nav ============================ */
/* Works for buttons inside the hero and inside the UL-based neon nav */
.hero-neon .btn, .neon-nav .btn{
  text-shadow: 0 1px 2px rgba(0,0,0,.55);  /* brighter label against glow */
}

/* Solid neon pill (Start a Project, Get a Quote) */
.hero-neon .btn-neon, .neon-nav .btn-neon{
  position: relative;                       /* allow pseudo glow ring */
  border: 1px solid rgba(255,255,255,.25);  /* crisp outer edge */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); /* dark halo around pill */
}

/* Inner rim = separates pill from bright backgrounds */
.hero-neon .btn-neon::after, .neon-nav .btn-neon::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(3,12,20,.38);
  pointer-events:none;
}

/* Soft specular gloss so cyan/magenta reads better on dark teal */
.hero-neon .btn-neon::before, .neon-nav .btn-neon::before{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  background: radial-gradient(160% 120% at 50% -30%,
               rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: screen; opacity:.35; pointer-events:none;
}

/* Outline pill (See Pricing) — frosted so it doesn't vanish */
.hero-neon .btn-outline-neon{
  background: rgba(10,10,31,.44);
  border-color: rgba(255,255,255,.58);
  color:#fff;
}
.hero-neon .btn-outline-neon:hover{
  background: rgba(10,10,31,.58);
  border-color: var(--mirage-cyan);
}

/* === Navbar CTA should be a true pill ================================= */
.neon-nav li > a.btn{
  /* make it act like a button, not a full-height menu link */
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  height: auto !important;
  line-height: 1.1 !important;
  padding: .55rem 1rem !important;

  /* force the pill shape even if nav sets a radius */
  border-radius: 999px !important;

  /* keep edges crisp and not clipped by li overflow */
  border: 1px solid rgba(255,255,255,.22);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.neon-nav li > a.btn i{ margin-right:.25rem }

/* some themes set overflow on li; ensure the glow isn't clipped */
.us_menu.horizontal.dark li{ overflow: visible; }

/* Services quick-nav chips */
.services-nav .btn{
  background: rgba(10,10,31,.28);
  border-color: rgba(255,255,255,.35);
  color:#e7ecff;
  border-radius: 999px;
  padding: .45rem .9rem;
}
.services-nav .btn:hover{
  border-color: var(--mirage-cyan);
  box-shadow: var(--glow-1);
}

/* Service icon sizing */
.service-icon{ font-size:1.6rem; line-height:1; }

/* Process steps */
.process-steps .step-num{
  width:28px; height:28px; border-radius:999px;
  display:inline-grid; place-items:center;
  font-weight:800; font-size:.9rem; margin-right:.15rem;
  color:#03121a;
  background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  box-shadow: 0 0 14px rgba(0,231,255,.35);
}

/* Optional: a subtle connector line on wide screens */
@media (min-width: 992px){
  .process-steps .row{
    --line: rgba(255,255,255,.06);
  }
  .process-steps .row::before{
    content:""; position:absolute; left:12px; right:12px; top:calc(50% - 1px);
    height:2px; background: linear-gradient(90deg, transparent, var(--line), transparent);
    pointer-events:none;
  }
}

/* Process steps */
.process-steps .step-num{
  width:28px; height:28px; border-radius:999px;
  display:inline-grid; place-items:center;
  font-weight:800; font-size:.9rem; margin-right:.15rem;
  color:#03121a;
  background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  box-shadow: 0 0 14px rgba(0,231,255,.35);
}
/* Optional connector line on wide screens */
@media (min-width: 992px){
  .process-steps .row::before{
    content:""; position:absolute; left:12px; right:12px; top:calc(50% - 1px);
    height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    pointer-events:none;
  }
}

/* Anchor scroll comfort for #design/#hosting/#care jumps */
#design, #hosting, #care { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Testimonials: neon border, star color, crisper avatars */
.testimonial-card{
  /* gradient border without heavy glow */
  border:1px solid transparent;
  background-image:
    linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)),
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.rating i{
  color:#ffd166;               /* warm gold stars */
  text-shadow:0 0 10px rgba(255,209,102,.35);
  margin-right:2px;
}
.avatar-40{
  box-shadow: 0 0 0 2px rgba(255,255,255,.12),
              0 0 16px rgba(0,231,255,.25);
}

/* Subtle quote mark pulse (respects reduced motion) */
@keyframes quotePulse{
  0%{ text-shadow:0 0 12px rgba(0,231,255,.35) }
  100%{ text-shadow:0 0 22px rgba(0,231,255,.55) }
}
.quote-glow{ animation: quotePulse 3s ease-in-out infinite alternate }
@media (prefers-reduced-motion: reduce){
  .quote-glow{ animation:none }
}

/* === Home carousel — neon upgrade ===================================== */

/* Image layer polish + gentle bottom fade so it melts into the canvas */

/* Indicators → neon pills */

/* Prev/Next controls → round, crisp, high-contrast */

/* Buttons inside caption: make them read on bright slides */

/* Reduce mobile caption padding */
@media (max-width: 575.98px){

}

/* Reveal: add data-reveal="fade|up|zoom" to any element */
[data-reveal]{ opacity:0; transform: translateY(0); transition: opacity .6s ease, transform .6s ease }
[data-reveal="up"]   { transform: translateY(14px) }
[data-reveal="zoom"] { transform: scale(.98) }
.reveal-show{ opacity:1; transform: none }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* ======================================================================
   CAROUSEL — stable (no seams, no clipping, organized)
   ====================================================================== */
#myCarousel { --carousel-min-h: clamp(380px,55vh,700px); background: transparent; }

/* Let the hero wrapper not clip overlays or controls */
.hero-neon:has(#myCarousel){ overflow: visible; }
@supports not (selector(:has(*))){ .hero-neon{ overflow: visible; } }

/* Keep inner clean; no background paints, no rounding that draws boxes */
#myCarousel .container,
#myCarousel .container-fluid{ max-width:none; padding-left:0; padding-right:0; }
#myCarousel .carousel-inner{ border-radius: 0; overflow: visible; background: transparent; }

/* Slide layer (NO masks, NO extra radius) */
#myCarousel .carousel-item{
  position: relative;
  min-height: var(--carousel-min-h);
  background-position: center; background-size: cover;
  border-radius: 0 !important;
}
#myCarousel .carousel-item img{ display:block; width:100%; height:auto; }

/* Readability overlay: stays opaque top→bottom (no fade-to-transparent) */
#myCarousel .carousel-item::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(10,10,31,.26) 0%,
    rgba(10,10,31,.40) 100%);
}

/* Caption glass */
#myCarousel .carousel-caption{
  position:absolute; z-index:2;
  background: rgba(10,10,31,.34);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  border-radius:.85rem; padding:.9rem 1.1rem;
  max-width:min(720px,88%);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* Indicators (neon pills) */
#myCarousel .carousel-indicators{ margin-bottom:.6rem }
#myCarousel .carousel-indicators [data-bs-target]{
  width:18px; height:6px; border-radius:999px; border:0;
  background:rgba(255,255,255,.45);
}
#myCarousel .carousel-indicators .active{
  background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  box-shadow: var(--glow-1);
}

/* Controls */
#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next{
  z-index:3; width:auto; height:44px; aspect-ratio:1/1;
  top:50%; transform:translateY(-50%);
  background: rgba(10,10,31,.45);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:.25rem;
  box-shadow: 0 0 16px rgba(0,231,255,.25);
}
#myCarousel .carousel-control-prev{ left:.75rem }
#myCarousel .carousel-control-next{ right:.75rem }
#myCarousel .carousel-control-prev-icon,
#myCarousel .carousel-control-next-icon{
  width:1.25rem; height:1.25rem;
  filter: drop-shadow(0 0 6px rgba(0,231,255,.55));
}

/* Buttons inside caption: readable on bright slides */
#myCarousel .btn-neon{ border:1px solid rgba(255,255,255,.22); filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)) }
#myCarousel .btn-outline-neon{
  background: rgba(10,10,31,.44);
  border-color: rgba(255,255,255,.58);
  color:#fff;
}
#myCarousel .btn-outline-neon:hover{
  background: rgba(10,10,31,.58);
  border-color: var(--mirage-cyan);
}

/* Mobile padding */
@media (max-width:575.98px){
  #myCarousel .carousel-caption{ padding:.75rem .9rem }
}

/* Optional: full-bleed variant.
   Add class="carousel-fullbleed" to #myCarousel if you want edge-to-edge. */
#myCarousel.carousel-fullbleed{
  position: relative;
  left:50%; right:50%;
  width:100vw;
  margin-left:-50vw; margin-right:-50vw;
}
#myCarousel.carousel-fullbleed .container{ max-width:none; padding:0 }

/* === NO HORIZONTAL SCROLL ============================================ */

/* Prefer modern clipping (doesn't create a new scroll context) */
html { overflow-x: clip; }

/* Fallback for older browsers */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Default: clip hero content so the big glow (::after with inset:-40%) 
   cannot extend the page width and trigger a scrollbar */
.hero-neon { overflow: hidden; }

/* Only allow overflow when the carousel is intentionally full-bleed */
.hero-neon:has(#myCarousel.carousel-fullbleed) { overflow: visible; }

/* If :has() isn't supported, you likely disabled full-bleed anyway;
   this keeps things clipped by default. */
@supports not (selector(:has(*))) {
  .hero-neon { overflow: hidden; }
}

/* Safety: if any legacy full-bleed container remains, keep it from
   adding a stray 1–2px width due to subpixel rounding. */
.carousel-fullbleed { overflow-x: clip; }

/* === NAV (UL-based) — blend links with neon theme ===================== */
/* Scope to our UL with class .nav-blend so we don’t affect other menus */
.nav-blend{
  display:flex; align-items:center; flex-wrap:nowrap; gap:.25rem; white-space:nowrap;
}
.nav-blend > li,
.nav-blend .us_brand{ flex:0 0 auto; }
.nav-blend > li{ overflow:visible; }            /* don’t clip glows */

/* Brand sizing */
.neon-nav .us_brand img{ height:26px; display:block; }
@media (min-width:1400px){ .neon-nav .us_brand img{ height:28px; } }

/* Make item links look like text chips (no gray blocks) */
.nav-blend > li > a{
  background: transparent !important;
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;                         /* slightly tighter so everything fits */
  line-height:1.1;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-blend > li > a:hover{
  color:#fff !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  text-shadow:0 0 12px rgba(0,231,255,.55);
}

/* Active page = subtle neon underline (no big rectangle) */
.nav-blend > li.active > a{
  color:#fff !important;
  position:relative;
}
.nav-blend > li.active > a::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  box-shadow: 0 0 10px rgba(0,231,255,.35);
}

/* Save space between 992–1200px — hide labels, keep icons */
@media (max-width:1200px) and (min-width:992px){
  .nav-blend .labelText{ display:none; }
}

/* CTA (“Get a Quote”) stays a true neon pill */
.neon-nav .nav-cta{ margin-left:auto; }        /* push CTA to the right */
.neon-nav li > a.btn{
  display:inline-flex !important; align-items:center; gap:.4rem;
  padding:.55rem 1rem !important; height:auto !important; line-height:1.1 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.neon-nav li > a.btn i{ margin-right:.25rem }

/* === Buttons (global polish to match the hero/carousel) =============== */
.btn{
  border-radius:999px; font-weight:800; letter-spacing:.25px;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-neon{
  --b1: var(--mirage-cyan); --b2: var(--mirage-magenta);
  color:#fff; border:0;
  background: linear-gradient(90deg, var(--b1), var(--b2));
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 22px rgba(0,231,255,.28), 0 0 34px rgba(255,0,200,.18);
}
.btn-neon:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.btn-outline-neon{
  background: rgba(255,255,255,.02);
  color:#e8edff; border:2px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
.btn-outline-neon:hover{
  color:#fff; border-color: var(--mirage-cyan);
  box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 22px rgba(0,231,255,.25);
  background: rgba(10,10,31,.22);
}

/* Buttons inside carousel captions need stronger contrast */
#myCarousel .carousel-caption .btn{
  border:1px solid rgba(255,255,255,.30);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
#myCarousel .carousel-caption .btn-outline-neon{
  background: rgba(10,10,31,.44);
  border-color: rgba(255,255,255,.58);
  color:#fff;
}
#myCarousel .carousel-caption .btn-outline-neon:hover{
  background: rgba(10,10,31,.58);
  border-color: var(--mirage-cyan);
}

/* === NAV (UL-based) — no underline; gradient text hover; neon chip active === */

/* Base link look (keeps your current spacing) */
.nav-blend > li > a{
  background: transparent !important;
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;
  line-height:1.1;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

/* Hover: use the old underline gradient as the TEXT color */
.nav-blend > li > a:hover{
  color:transparent !important;                       /* allow gradient text */
  background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow:none;                                   /* keep it crisp */
  border-color: rgba(255,255,255,.12);
}

/* Fallback if gradient text isn’t supported (older browsers) */
@supports not (-webkit-background-clip:text){
  .nav-blend > li > a:hover{
    color: var(--mirage-cyan) !important;
  }
}

/* Active page: subtle neon “chip” (no underline) */
.nav-blend > li.active > a{
  color:#fff !important;
  border:1px solid transparent;
  background-color: rgba(255,255,255,.06);
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),     /* inner fill */
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)); /* 1px border */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(0,231,255,.22);
}

/* Optional: nicer keyboard focus */
.nav-blend > li > a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 .18rem rgba(0,231,255,.28);
  border-radius:12px;
}

/* IMPORTANT: remove the old underline rule if it’s still present */
.nav-blend > li.active > a::after{ content:none !important; }

/* ======================================================================
   NAV BLEND v2 — one-line layout, gradient text hover, neon active chip
   Works with UL-based UserSpice menus.
   ====================================================================== */

/* Keep the bar glassy; use your existing .neon-nav wrapper */
.neon-nav{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(10,10,31,.45);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .25rem .75rem;
}

/* ----- Layout: one row, no wrap -------------------------------------- */
.nav-blend{
  display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap;
  gap:.25rem;
}
.nav-blend > li,
.nav-blend .us_brand{ flex:0 0 auto; }
.nav-blend > li{ overflow:visible; } /* don't clip glows */

/* Brand sizing */
.neon-nav .us_brand img{ height:26px; display:block; }
@media (min-width:1400px){ .neon-nav .us_brand img{ height:28px; } }

/* ----- Links: base look ----------------------------------------------- */
.nav-blend > li > a{
  background: transparent !important;          /* kill theme badges */
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;                        /* a hair tighter */
  line-height:1.1;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

/* Hover: gradient text; no underline */
.nav-blend > li > a:hover{
  color:transparent !important;                /* allow gradient fill */
  background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow:none;
  border-color: rgba(255,255,255,.12);
}
/* Fallback for older browsers */
@supports not (-webkit-background-clip:text){
  .nav-blend > li > a:hover{ color: var(--mirage-cyan) !important; }
}

/* Active: subtle neon "chip" (no underline) */
.nav-blend > li.active > a{
  color:#fff !important;
  border:1px solid transparent;
  background-color: rgba(255,255,255,.06);
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(0,231,255,.22);
}
/* ensure any old underline rule is gone */
.nav-blend > li.active > a::after{ content:none !important; }

/* Keyboard focus */
.nav-blend > li > a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 .18rem rgba(0,231,255,.28);
  border-radius:12px;
}

/* Save space between 992–1200px—keep icons, hide labels */
@media (max-width:1200px) and (min-width:992px){
  .nav-blend .labelText{ display:none; }
}

/* ----- CTA on the right (Get a Quote) -------------------------------- */
.neon-nav .nav-cta{ margin-left:auto; } /* pushes CTA to the far right */

.neon-nav li > a.btn{
  display:inline-flex !important; align-items:center; gap:.4rem;
  padding:.55rem 1rem !important; height:auto !important; line-height:1.1 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.neon-nav li > a.btn i{ margin-right:.25rem }

/* Your existing neon buttons remain (btn, btn-neon, btn-outline-neon, etc.) */

/* === NAV (UL-based) — gradient text hover; neon chip active ============ */
/* Base link look (keeps your current spacing) */
.nav-blend > li > a{
  background: transparent !important;
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;
  line-height:1.1;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

/* Hover: use gradient as the TEXT color (no dark background) */
.nav-blend > li > a:hover{
  color: transparent !important;                                   /* allow gradient */
  background: none !important;                                     /* kill old gray hover */
  background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  border-color: rgba(255,255,255,.12);
  text-shadow: none;
}
/* Fallback for older browsers without background-clip:text */
@supports not (-webkit-background-clip:text){
  .nav-blend > li > a:hover{ color: var(--mirage-cyan) !important; }
}

/* Active page: subtle neon “chip” (no underline) */
.nav-blend > li.active > a{
  color:#fff !important;
  border:1px solid transparent;
  background-color: rgba(255,255,255,.06);
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),     /* inner fill */
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)); /* 1px border */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(0,231,255,.22);
}
/* Make sure any old underline is removed */
.nav-blend > li.active > a::after{ content:none !important; }

/* Nicer keyboard focus */
.nav-blend > li > a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 .18rem rgba(0,231,255,.28);
  border-radius:12px;
}

/* === NAV BLEND v3 — gradient hover text, no underline; neon chip active === */
/* Scope to your UL-based nav (.nav-blend) so nothing else is affected      */

/* Kill any legacy dark hover backgrounds coming from the base theme */
.us_menu.horizontal.dark > li > a:hover,
.us_menu.horizontal.dark > li.active > a:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Base link look (keep your spacing) */
.nav-blend > li > a{
  background: transparent !important;
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;
  line-height:1.1;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

/* Hover: use underline colors as TEXT color (no underline) */
.nav-blend > li > a:hover{
  /* ensure nothing draws behind the text */
  background: none !important;
  background-color: transparent !important;

  /* gradient-filled text */
  color: transparent !important;
  background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: none;
  border-color: rgba(255,255,255,.12);
}

/* Active: subtle neon “chip” */
.nav-blend > li.active > a{
  color:#fff !important;
  border:1px solid transparent;
  background-color: rgba(255,255,255,.06);
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(0,231,255,.22);
}
/* absolutely remove any underline pseudo rule */
.nav-blend > li.active > a::after{ content:none !important; }

/* nicer keyboard focus */
.nav-blend > li > a:focus-visible{
  outline:none;
  box-shadow: 0 0 0 .18rem rgba(0,231,255,.28);
  border-radius:12px;
}
/* === NAV BLEND — final, authoritative rules (paste at END of mirage.css) === */

/* Kill any dark hover backgrounds coming from the base theme */
.neon-nav .us_menu.horizontal.dark li:hover > a,
.neon-nav .us_menu.horizontal.dark li > a:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Base link look (keeps your spacing) */
.neon-nav .nav-blend > li > a{
  background: transparent !important;
  color:#cfd8ff !important;
  border:1px solid transparent;
  border-radius:12px;
  padding:.55rem .8rem;
  line-height:1.1;
  transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s;
}

/* Hover: gradient text, no underline, no dark pill */
.neon-nav .nav-blend > li > a:hover{
  color: transparent !important;
  background: none !important;
  background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
  border-color: rgba(255,255,255,.12);
  text-shadow: none;
}

/* Active page: subtle neon “chip” (keeps your current vibe) */
.neon-nav .nav-blend > li.active > a{
  color:#fff !important;
  border:1px solid transparent;
  background-color: rgba(255,255,255,.06);
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(0,231,255,.22);
}

/* No legacy underline; nice keyboard focus */
.neon-nav .nav-blend > li.active > a::after{ content:none !important; }
.neon-nav .nav-blend > li > a:focus-visible{
  outline:none; border-radius:12px; box-shadow:0 0 0 .18rem rgba(0,231,255,.28);
}