/* ============================================================
   Kenny AV Solution — Brand Light Theme
   Deep Navy #0B1530 · Electric Blue #0066FF · Charcoal #1F2328
   Inspired by clean AV-outsourcing sites (light, pro, blue)
   ============================================================ */

:root {
  --ink: #0b1530;        /* headings / deep navy */
  --navy: #0b1530;
  --navy-2: #16244d;     /* lighter navy for gradients */
  --body: #475569;       /* paragraph text */
  --muted: #64748b;
  --line: #e3e8f0;
  --charcoal: #1f2328;
  --bg: #ffffff;
  --bg-alt: #f5f8fd;
  --bg-alt2: #eaf1fc;
  --brand: #0066ff;      /* electric blue */
  --brand-600: #0052d6;
  --brand-300: #6aa6ff;
  --grad: linear-gradient(135deg, #2f80ff 0%, #0066ff 100%);
  --grad-navy: linear-gradient(135deg, #0b1530 0%, #16275a 100%);
  --grad-soft: linear-gradient(135deg, #eaf1ff 0%, #dbe8ff 100%);
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 92px; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--body);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Outfit', 'Inter', sans-serif;
  color: var(--ink);
}

/* ---------- Gradient text ---------- */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.text-gradient-animated {
  background: linear-gradient(90deg, #0066ff, #2f80ff, #16275a, #0066ff);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradShift 7s ease infinite;
}

/* ---------- Mesh / blobs ---------- */
.mesh { position: relative; overflow: hidden; }
.blob { position:absolute; border-radius:9999px; filter:blur(80px); opacity:.5; z-index:0; pointer-events:none; }
.blob-blue { background:#bcd6ff; }
.blob-navy { background:#9fb4e6; }
.blob-sky  { background:#cfe6ff; }

/* dotted + grid backdrops */
.dots { background-image: radial-gradient(rgba(0,102,255,.13) 1.4px, transparent 1.4px); background-size: 26px 26px; }
.grid-faint {
  background-image:
    linear-gradient(rgba(11,21,48,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,21,48,.05) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ---------- Cards ---------- */
.card {
  background:#fff; border:1px solid var(--line); border-radius:1.25rem;
  box-shadow: 0 1px 2px rgba(11,21,48,.04), 0 14px 32px -20px rgba(11,21,48,.18);
}
.card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-8px); border-color:#bcd6ff; box-shadow: 0 26px 50px -22px rgba(0,102,255,.4); }
.card-tint { background: var(--grad-soft); border:1px solid #cfe0ff; }
.card-navy { background: var(--grad-navy); border:1px solid rgba(255,255,255,.08); color:#cdd6ea; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--grad); color:#fff; font-weight:600; border-radius:9999px;
  padding:.9rem 2rem; display:inline-flex; align-items:center; gap:.55rem;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 12px 26px -10px rgba(0,102,255,.6);
}
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 18px 38px -10px rgba(0,102,255,.78); }

.btn-ghost {
  border:1px solid var(--line); color:var(--ink); background:#fff; font-weight:600; border-radius:9999px;
  padding:.9rem 2rem; display:inline-flex; align-items:center; gap:.55rem; transition: all .25s ease;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-3px); }

.btn-navy {
  background: var(--navy); color:#fff; font-weight:600; border-radius:9999px;
  padding:.9rem 2rem; display:inline-flex; align-items:center; gap:.55rem; transition: all .25s ease;
}
.btn-navy:hover { background:#16275a; transform: translateY(-3px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy); color:#cdd6ea; }
.topbar a:hover { color:#fff; }

/* ---------- Navbar ---------- */
#navbar { transition: all .3s ease; }
.nav-scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgba(11,21,48,.28);
}
.nav-link { position:relative; color:var(--body); font-weight:500; transition: color .25s ease; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad); transition:width .3s ease; border-radius:2px; }
.nav-link:hover, .nav-link.active { color:var(--ink); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* ---------- Kicker ---------- */
.kicker { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brand); }
.kicker::before { content:''; width:26px; height:2px; background:var(--grad); }
.pill-kicker {
  background:#e8f1ff; color:var(--brand); border:1px solid #cfe0ff;
  padding:.4rem .9rem; border-radius:9999px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
}

/* ---------- Animations ---------- */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.animate-floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(0,102,255,.35)} 70%{box-shadow:0 0 0 18px rgba(0,102,255,0)} 100%{box-shadow:0 0 0 0 rgba(0,102,255,0)} }
.pulse-ring { animation: pulse-ring 2.6s infinite; }

.marquee { display:flex; gap:4rem; width:max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.stat-num { font-variant-numeric: tabular-nums; }
.arrow-link i { transition: transform .25s ease; }
.arrow-link:hover i { transform: translateX(5px); }

.hairline { height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.hairline-light { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }

[data-aos] { opacity:1; }
.aos-init[data-aos] { opacity:0; }

#mobileMenu { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
#scrollProgress { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--grad); z-index:60; transition:width .1s linear; }
#backToTop { opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease; }
#backToTop.show { opacity:1; pointer-events:auto; }

/* portfolio filter */
.filter-btn { border:1px solid var(--line); color:var(--body); background:#fff; font-weight:500; font-size:.9rem; border-radius:9999px; padding:.55rem 1.3rem; transition: all .25s ease; white-space:nowrap; }
.filter-btn:hover { border-color:var(--brand); color:var(--brand); }
.filter-btn.filter-active { background:var(--grad); border-color:transparent; color:#fff; font-weight:600; }

#lightbox { transition: opacity .3s ease; }
.draw-canvas { background:#f7faff; border:1px solid #e2ecff; }

::selection { background: rgba(0,102,255,.18); color: var(--ink); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#eef2f8; }
::-webkit-scrollbar-thumb { background:#c4cede; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand); }

/* form fields */
.field { width:100%; border-radius:.85rem; background:#fff; border:1px solid var(--line); padding:.8rem 1rem; color:var(--ink); transition: all .2s ease; }
.field::placeholder { color:#94a3b8; }
.field:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,102,255,.13); }

/* services dropdown */
.has-dropdown:hover .dropdown { opacity:1; visibility:visible; transform: translateY(0); }
.dropdown { opacity:0; visibility:hidden; transform: translateY(8px); transition: all .22s ease; }