/* =========================
   FreshDot "Nitro" Theme v1
   - animations, gradients, reveals
   - desktop intact; opt-in via .nitro or auto-enabled
   ========================= */
:root{
  --nitro-green:#16a34a;
  --nitro-dark:#0b2012;
  --nitro-yellow:#ffb000;
  --nitro-teal:#0ea5a0;
  --nitro-blue:#2563eb;
  --nitro-bg1: #f5fff8;
}

/* Animated gradient bar as page progress */
.nitro .progress-bar{
  position:fixed; left:0; top:0; height:4px; width:0;
  z-index:2000; background:
    linear-gradient(90deg, var(--nitro-green), var(--nitro-yellow), var(--nitro-blue));
  box-shadow:0 0 16px rgba(22,163,74,.5);
  transition: width .15s linear;
}

/* Subtle animated background blobs */
.nitro .bg-blobs{position:fixed; inset:-20% -10% auto -10%; z-index:-1; pointer-events:none; filter: blur(48px) saturate(140%); opacity:.35;}
.nitro .bg-blobs:before, .nitro .bg-blobs:after{
  content:""; position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  animation: blob 18s infinite alternate ease-in-out;
}
.nitro .bg-blobs:before{ left:5%; top:0; background: radial-gradient(circle at 30% 30%, #bbf7d0, #86efac); }
.nitro .bg-blobs:after{ right:5%; top:10%; background: radial-gradient(circle at 70% 70%, #fde68a, #f59e0b); animation-duration:22s;}
@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(8%, -6%) scale(1.15); }
}

/* Headings glam */
.nitro .h1, .nitro h1, .nitro h2{
  background: linear-gradient(90deg, var(--nitro-dark), var(--nitro-green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nitro .h1{ text-shadow: 0 2px 0 rgba(0,0,0,0.03); }

/* CTA glow */
.nitro .cta{
  position:relative; transform: translateZ(0);
  box-shadow: 0 8px 24px rgba(34,197,94,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nitro .cta:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(34,197,94,.35); }
.nitro .cta.secondary:hover{ transform: translateY(-2px) scale(1.02); }

/* Cards / KPI pop */
.nitro .kpis .kpi{
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-radius: 18px !important;
}
.nitro .kpis .kpi:hover{ transform: translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08); }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: all .6s cubic-bezier(.21,.6,.35,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* Floating "Nitro" switch */
.nitro-switch{
  position: fixed; right: 12px; bottom: 16px; z-index: 1600;
  background: linear-gradient(135deg, var(--nitro-green), var(--nitro-yellow));
  color: var(--nitro-dark); font-weight:900; border:none; border-radius: 999px;
  padding: .65rem 1rem; box-shadow: 0 12px 28px rgba(0,0,0,.15);
}
.nitro-switch:active{ transform: translateY(1px); }

/* Sticky mobile quick contact */
@media (max-width: 768px){
  .nitro .quickbar{
    position: fixed; left: 0; right:0; bottom: 10px; z-index:1500; display:flex; justify-content:center;
  }
  .nitro .quickbar a{
    backdrop-filter: blur(6px);
    background: linear-gradient(90deg, var(--nitro-green), var(--nitro-yellow));
    color: var(--nitro-dark); font-weight:900; text-decoration:none;
    padding:.75rem 1.1rem; border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.18);
  }
}

/* Hero soft gradient bg */
.nitro .hero{
  background: radial-gradient(1200px 600px at 0% -10%, #e6fff0 0%, transparent 60%),
              radial-gradient(1200px 600px at 100% -10%, #fff7e6 0%, transparent 60%);
  border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;
}


/* =========================
   Nitro V2 Additions
   ========================= */

/* Nav indicator (desktop & mobile) */
.nitro .nav{ position: relative; }
.nitro .nav .links{ position: relative; }
.nitro .nav .indicator{
  position:absolute; bottom:-2px; height:3px; width:0; background: linear-gradient(90deg, var(--nitro-green), var(--nitro-yellow));
  border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition: transform .25s ease, width .25s ease, left .25s ease;
}

/* Wave separators for sections */
.nitro section{ position:relative; }
.nitro section.wave-top::before,
.nitro section.wave-bottom::after{
  content:""; position:absolute; left:0; right:0; height:44px; background-repeat:no-repeat; background-size:cover;
}
.nitro section.wave-top::before{ top:-42px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="60" viewBox="0 0 1440 60"><path fill="%23ffffff" d="M0 60h1440V12c-120 24-360 48-720 48S120 36 0 12V60z"/></svg>'); }
.nitro section.wave-bottom::after{ bottom:-42px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="60" viewBox="0 0 1440 60"><path fill="%23ffffff" d="M0 0h1440v48c-120-24-360-48-720-48S120 24 0 48V0z"/></svg>'); }

/* Parallax wrapper */
.nitro .parallax{ will-change: transform; transition: transform .1s linear; }

/* Magnetic buttons */
.nitro .cta.magnetic{ position:relative; overflow:hidden; }
.nitro .cta.magnetic::after{
  content:""; position:absolute; inset:0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 40%);
  opacity:0; transition: opacity .2s ease;
}
.nitro .cta.magnetic:hover::after{ opacity:1; }

/* Scroll-to-top button */
.to-top{
  position: fixed; right: 14px; bottom: 76px; z-index: 1500; opacity:0; pointer-events:none;
  border: none; border-radius: 999px; padding: .6rem .8rem; font-weight: 900;
  background: linear-gradient(135deg, var(--nitro-blue), var(--nitro-teal)); color: white;
  box-shadow: 0 12px 28px rgba(0,0,0,.18); transform: translateY(16px); transition: all .2s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }

/* Subtle glowing borders on cards */
.nitro .kpis .kpi{ border: 1px solid rgba(34,197,94,.18); }
.nitro .kpis .kpi:hover{ box-shadow: 0 16px 36px rgba(16,185,129,.18); }

/* Form success confetti placeholder spacing */
.confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:2000; }


/* =========================
   Nitro V4 — Dark mode, safer loader, multilayer parallax, reduced motion
   ========================= */

/* Respect user reduced-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dark theme variables */
:root[data-theme="dark"]{
  --nitro-bg1:#07140d;
  --nitro-dark:#e7fff1;
}
:root[data-theme="dark"] body{
  background: #040a07;
  color: #e7fff1;
}
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .nav{ background: rgba(4,10,7,0.8) !important; }
:root[data-theme="dark"] .cta{ box-shadow: 0 8px 24px rgba(34,197,94,.35); }
:root[data-theme="dark"] .kpis .kpi{ border-color: rgba(34,197,94,.28); }
:root[data-theme="dark"] .hero{
  background: radial-gradient(1200px 600px at 0% -10%, rgba(6, 36, 22, 0.8) 0%, transparent 60%),
              radial-gradient(1200px 600px at 100% -10%, rgba(34, 18, 2, 0.7) 0%, transparent 60%);
}

/* Dark mode toggle */
.dark-switch{
  position: fixed; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom) + 56px);
  z-index: 1600; border: none; border-radius: 999px; padding: .55rem .9rem; font-weight: 900;
  background: linear-gradient(135deg, #0b2012, #2563eb); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Move Nitro switch to bottom-left to avoid contact btn */
.nitro-switch{
  right: auto; left: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Safer loader (non-blocking visual) */
#nitro-loader{
  position: fixed; inset: 0; z-index: 3000; background: #ffffff;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: opacity .35s ease, visibility .35s ease;
}
:root[data-theme="dark"] #nitro-loader{ background:#040a07; }
#nitro-loader .logo{ font-weight: 900; letter-spacing:.5px; margin-bottom: 14px; color: var(--nitro-dark); }
#nitro-loader .dots{ display:flex; gap:8px; }
#nitro-loader .dot{ width:10px; height:10px; border-radius:50%; background: #16a34a; animation: dotb 1s infinite ease-in-out; }
#nitro-loader .dot:nth-child(2){ animation-delay:.12s; background:#ffb000;}
#nitro-loader .dot:nth-child(3){ animation-delay:.24s; background:#2563eb;}
@keyframes dotb{ 0%,80%,100%{ transform:scale(0.6); opacity:.6;} 40%{ transform:scale(1); opacity:1;} }

/* Multi-layer parallax visuals (decor only) */
.hero .parallax-wrap{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.parallax-layer{ position: absolute; will-change: transform; filter: blur(10px); opacity:.22; }
.parallax-layer.l1{ top:10%; left:-10%; width:45vmin; height:45vmin; border-radius:50%; background: radial-gradient(circle, #bbf7d0, transparent 60%); }
.parallax-layer.l2{ bottom:0; right:-12%; width:50vmin; height:50vmin; border-radius:50%; background: radial-gradient(circle, #fde68a, transparent 60%); filter: blur(14px); }
.parallax-layer.l3{ top:-8%; right:20%; width:30vmin; height:30vmin; border-radius:50%; background: radial-gradient(circle, #93c5fd, transparent 60%); filter: blur(16px); }

/* Button positions safe on mobile */
@media (max-width: 768px){
  .dark-switch{ right: 12px; bottom: calc(16px + env(safe-area-inset-bottom) + 56px); }
  .nitro-switch{ left: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}


/* ===== Nitro V4.1 — Fix dark mode menu visibility + wave seams ===== */

/* Menu/link colors in dark */
:root[data-theme="dark"] .nav .links a{
  color: #e7fff1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
:root[data-theme="dark"] .nav .links a.cta{
  color:#0b2012 !important; /* ensure legible on gradient */
}

/* Header subtle border in dark for separation */
:root[data-theme="dark"] .header{ border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

/* Indicator brighter in dark */
:root[data-theme="dark"] .nav .indicator{
  background: linear-gradient(90deg, #a7f3d0, #fde68a);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Recolor wave separators to match dark background (avoid white seam) */
:root[data-theme="dark"] section.wave-top::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="60" viewBox="0 0 1440 60"><path fill="%23040a07" d="M0 60h1440V12c-120 24-360 48-720 48S120 36 0 12V60z"/></svg>');
}
:root[data-theme="dark"] section.wave-bottom::after{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="60" viewBox="0 0 1440 60"><path fill="%23040a07" d="M0 0h1440v48c-120-24-360-48-720-48S120 24 0 48V0z"/></svg>');
}

/* Card text contrast in dark */
:root[data-theme="dark"] .card, 
:root[data-theme="dark"] .kpi{
  color: #eafbef;
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

/* Buttons hover in dark */
:root[data-theme="dark"] .cta:hover{ box-shadow: 0 12px 30px rgba(34,197,94,.45); }


/* Ensure base nav link color explicitly set (prevents unintended overrides) */
.nitro .nav .links a { color: #0b2012; }


/* ===== Nitro V4.2 — Floating Contact button (middle-right) + tweaks ===== */
.contact-fab{
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1600;
  text-decoration: none;
  font-weight: 900;
  border-radius: 999px;
  padding: .85rem 1.1rem;
  background: linear-gradient(90deg, var(--nitro-green), var(--nitro-yellow));
  color: var(--nitro-dark);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  display: inline-flex; align-items:center; gap:.5rem;
}
.contact-fab .icon{ font-size: 1.1rem; line-height: 1; }
.contact-fab:hover{ box-shadow: 0 18px 36px rgba(0,0,0,.25); transform: translateY(-50%) scale(1.02); }

/* Keep clear of Nitro/Dark switches on small screens */
@media (max-width: 768px){
  .contact-fab{
    top: auto; bottom: calc(84px + env(safe-area-inset-bottom));
    transform: none;
  }
}

/* ===== Nitro V4.3 — Always-visible switches (top corners), ultra-high z-index ===== */
.nitro-switch, .dark-switch{
  position: fixed;
  z-index: 5000 !important;
  border: none;
  border-radius: 999px;
  padding: .5rem .8rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: .96;
}
.nitro-switch{ left: 12px; top: calc(12px + env(safe-area-inset-top)); background: linear-gradient(135deg, #16a34a, #ffb000); color:#0b2012; }
.dark-switch{ right: 12px; top: calc(12px + env(safe-area-inset-top)); background: linear-gradient(135deg, #0b2012, #2563eb); color:#fff; }

@media (max-width:768px){
  .nitro-switch{ left: 10px; top: calc(10px + env(safe-area-inset-top)); }
  .dark-switch{ right: 10px; top: calc(10px + env(safe-area-inset-top)); }
}


/* ===== Nitro V4.4 — stronger dark mode + explicit link colors ===== */
:root[data-theme="dark"] body{ background:#0a0f0c !important; color:#e6fff1 !important; }
:root[data-theme="dark"] a{ color:#93c5fd; }
:root[data-theme="dark"] .hero, 
:root[data-theme="dark"] .section{ background-color: rgba(255,255,255,0.03); }
:root[data-theme="dark"] .card, 
:root[data-theme="dark"] .kpi{ background: rgba(255,255,255,0.06); color:#eafbef; border-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .badge{ background: rgba(255,255,255,0.08); color:#eafbef; }
/* Nav links visible */
:root[data-theme="dark"] .nav .links a{ color:#e6fff1 !important; }
:root[data-theme="dark"] .nav .links a.cta{ color:#0b2012 !important; }

/* ===== Nitro V4.5 — compact floating icon switches ===== */
.nitro-switch, .dark-switch{
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 5000 !important;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  font-size: 18px;
  line-height: 1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  opacity:.95;
}
.nitro-switch{ left: 12px; background: linear-gradient(135deg,#16a34a,#ffb000); color:#0b2012; }
.dark-switch{ right: 12px; background: linear-gradient(135deg,#0b2012,#2563eb); color:#fff; }

.nitro-switch:hover, .dark-switch:hover{ transform: scale(1.05); opacity:1; }

/* Tooltips */
.nitro-switch::after, .dark-switch::after{
  content: attr(data-tip);
  position: absolute;
  bottom: -32px;
  background: rgba(0,0,0,.75);
  color:#fff;
  font-size: 12px;
  padding:2px 6px;
  border-radius:4px;
  opacity:0; pointer-events:none;
  transform: translateY(4px);
  transition: all .2s ease;
  white-space:nowrap;
}
.nitro-switch:hover::after, .dark-switch:hover::after{ opacity:1; transform:translateY(0); }

@media (max-width:768px){
  .nitro-switch, .dark-switch{ width:40px; height:40px; font-size:16px; }
  .nitro-switch::after, .dark-switch::after{ display:none; }
}