/* ═══════════════════════════════════════════════════════════════
   INTEGRATED CYBER NEXUS — Frontend CSS v4.0
   Premium dark cyberpunk | Best responsive | Best animated
═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --c-bg:      #03080f;
  --c-bg2:     #060f1a;
  --c-bg3:     #091626;
  --c-bg4:     #0c1e33;
  --c-bg5:     #0f253e;
  --c-cyan:    #00d4ff;
  --c-green:   #00ff88;
  --c-red:     #ff3366;
  --c-yellow:  #ffd700;
  --c-purple:  #8b5cf6;
  --c-text:    #e2eaf4;
  --c-muted:   #6a8caa;
  --c-faint:   #334f68;
  --c-border:  rgba(0,212,255,.1);
  --c-border2: rgba(0,212,255,.05);
  --font:      'Rajdhani', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --head:      'Orbitron', sans-serif;
  --radius:    12px;
  --navbar-h:  72px;
  --trans:     .3s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; }
input, select, textarea, button { font-family: var(--font); }
::selection { background: rgba(0,212,255,.2); color: var(--c-text); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,212,255,.2) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,.2); border-radius: 3px; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
.section-pad { padding: clamp(60px,8vw,100px) 0; }

/* ── GRADIENT TEXT ──────────────────────────────────────────── */
.grad, .text-gradient, h1 em, h2 em {
  background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}

/* ── SECTION LABEL ──────────────────────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--c-cyan); margin-bottom: .6rem;
}
.section-label::before {
  content: '//'; opacity: .5;
}
.section-header { text-align: center; margin-bottom: clamp(2.5rem,5vw,4rem); }
.section-header h2 {
  font-family: var(--head);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800; color: var(--c-text); line-height: 1.2;
  margin: .35rem 0 .6rem;
}
.section-header p { color: var(--c-muted); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }

/* ── BUTTON SYSTEM ──────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .78rem 1.6rem;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #030810; font-family: var(--head); font-size: .78rem;
  font-weight: 700; letter-spacing: .06em;
  border-radius: 9px; border: none; cursor: pointer;
  transition: var(--trans); white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0; transition: opacity .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,212,255,.38); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .76rem 1.6rem;
  border: 1px solid var(--c-cyan); border-radius: 9px;
  color: var(--c-cyan); background: transparent;
  font-family: var(--head); font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; transition: var(--trans); white-space: nowrap;
}
.btn-outline:hover {
  background: rgba(0,212,255,.09);
  box-shadow: 0 0 24px rgba(0,212,255,.18), inset 0 0 12px rgba(0,212,255,.06);
  transform: translateY(-1px);
}

.btn-glow { box-shadow: 0 0 22px rgba(0,212,255,.3); }
.btn-glow:hover { box-shadow: 0 0 36px rgba(0,212,255,.55) !important; }

/* Nav CTA */
.btn-nav-cta {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .55rem 1.2rem;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #030810; font-family: var(--head); font-size: .72rem;
  font-weight: 700; letter-spacing: .05em;
  border-radius: 8px; transition: var(--trans); white-space: nowrap;
}
.btn-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,255,.35); }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .36rem; margin-bottom: 1rem; }
.form-group label { font-family: var(--mono); font-size: .72rem; color: var(--c-muted); letter-spacing: .04em; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--c-bg3); border: 1px solid var(--c-border);
  border-radius: 8px; color: var(--c-text);
  padding: .7rem 1rem; font-family: var(--font); font-size: 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s; width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
  background: var(--c-bg4);
}
.form-group select option { background: var(--c-bg3); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-alert { padding: .8rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.form-alert.success { background: rgba(0,255,136,.07); border: 1px solid rgba(0,255,136,.22); color: var(--c-green); }
.form-alert.error   { background: rgba(255,51,102,.07);  border: 1px solid rgba(255,51,102,.22); color: var(--c-red); }

/* ── PRELOADER ──────────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-inner { text-align: center; }
.pl-logo { max-height: 60px; max-width: 160px; margin: 0 auto 1.5rem; object-fit: contain; }
.pl-shield-icon { font-size: 3.5rem; margin-bottom: 1.2rem; animation: plFloat 2s ease-in-out infinite; display: block; }
.pl-bar { width: 180px; height: 2px; background: rgba(0,212,255,.1); border-radius: 2px; overflow: hidden; margin: 0 auto .9rem; }
.pl-fill { height: 100%; background: linear-gradient(90deg, var(--c-cyan), var(--c-green)); border-radius: 2px; animation: plFill 1.4s ease-in-out forwards; }
@keyframes plFill  { 0%{width:0} 100%{width:100%} }
@keyframes plFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.pl-status { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.pl-dot { width: 6px; height: 6px; background: var(--c-green); border-radius: 50%; animation: plPulse 1s ease-in-out infinite; flex-shrink: 0; }
.pl-msg { font-family: var(--mono); font-size: .68rem; color: rgba(0,212,255,.5); letter-spacing: .1em; }
@keyframes plPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--navbar-h);
  display: flex; align-items: center;
  transition: background var(--trans), box-shadow var(--trans), height var(--trans);
}
.navbar.scrolled {
  background: rgba(3,8,15,.96);
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-border);
  height: 64px;
}
.nav-inner {
  display: flex; align-items: center; gap: 1.2rem;
  width: 100%; height: 100%;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity .2s; }
.nav-logo:hover { opacity: .85; }
.nav-logo-img { max-height: 46px; width: auto; transition: max-height var(--trans); }
.navbar.scrolled .nav-logo-img { max-height: 40px; }
.nav-logo-shield { display: flex; align-items: center; filter: drop-shadow(0 0 10px rgba(0,212,255,.3)); transition: filter .3s; }
.nav-logo:hover .nav-logo-shield { filter: drop-shadow(0 0 16px rgba(0,212,255,.55)); }

/* Nav links */
.nav-links {
  display: flex; list-style: none; gap: .25rem;
  margin: 0 auto; align-items: center;
}
.nav-links a {
  font-family: var(--font); font-weight: 600; font-size: .95rem;
  color: var(--c-muted); transition: color .2s;
  padding: .4rem .7rem; border-radius: 6px;
  display: flex; align-items: center; gap: .3rem; position: relative;
}
.nav-links a:hover { color: var(--c-text); background: rgba(255,255,255,.04); }
.nav-links a.active { color: var(--c-text); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: 0; left: .7rem; right: .7rem;
  height: 2px; background: linear-gradient(90deg, var(--c-cyan), var(--c-green));
  border-radius: 2px;
}

.dd-chevron { transition: transform .25s; flex-shrink: 0; }
.has-dropdown:hover .dd-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(4,12,22,.98);
  border: 1px solid var(--c-border);
  border-radius: 14px; padding: .5rem;
  min-width: 210px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s, transform .22s, visibility .22s;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  backdrop-filter: blur(20px);
}
.has-dropdown:hover .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; color: var(--c-muted); font-size: .87rem;
  border-radius: 8px; background: none;
}
.nav-dropdown a:hover { background: rgba(0,212,255,.07); color: var(--c-text); }
.nav-dropdown a.active::after { display: none; }
.dd-bullet {
  width: 5px; height: 5px; background: var(--c-cyan);
  border-radius: 50%; flex-shrink: 0; opacity: .5;
}
.dd-footer-link {
  color: var(--c-cyan) !important; font-size: .82rem !important;
  margin-top: .3rem; border-top: 1px solid var(--c-border);
  border-radius: 0 !important;
}

.nav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.nav-phone {
  display: flex; align-items: center; gap: .38rem;
  font-family: var(--mono); font-size: .75rem; color: var(--c-muted); transition: color .2s;
}
.nav-phone:hover { color: var(--c-cyan); }
.nav-phone span { display: none; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; padding: .4rem; border-radius: 6px;
  transition: background .2s;
}
.hamburger:hover { background: rgba(0,212,255,.08); }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: var(--trans); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(3,8,15,.98);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(20px);
  animation: menuSlide .25s ease;
}
.mobile-menu.open { display: block; }
@keyframes menuSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.mobile-menu ul { list-style: none; padding: .5rem 0 1rem; }
.mobile-menu a {
  display: block; padding: .8rem clamp(16px,4vw,24px);
  color: var(--c-muted); font-size: 1rem; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.04); transition: color .15s, background .15s;
}
.mobile-menu a:hover { color: var(--c-text); background: rgba(0,212,255,.04); }
.mobile-menu .mm-cta { color: var(--c-cyan); background: rgba(0,212,255,.05); font-family: var(--head); font-size: .82rem; }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes float1    { 0%,100%{transform:translateY(0)  rotate(0)} 50%{transform:translateY(-10px) rotate(.5deg)} }
@keyframes float2    { 0%,100%{transform:translateY(0)  rotate(0)} 50%{transform:translateY(-14px) rotate(-.5deg)} }
@keyframes float3    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes glow      { 0%,100%{box-shadow:0 0 20px rgba(0,212,255,.3)} 50%{box-shadow:0 0 40px rgba(0,212,255,.6)} }
@keyframes rotateRing{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ringPulse { 0%,100%{opacity:.12;transform:scale(1)} 50%{opacity:.3;transform:scale(1.05)} }
@keyframes scanMove  { 0%{top:-2px;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:100%;opacity:0} }
@keyframes gridDrift { from{background-position:0 0} to{background-position:60px 60px} }
@keyframes ticker    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeL  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes waPop     { from{transform:scale(1);opacity:.6} to{transform:scale(1.6);opacity:0} }
@keyframes scrollBob { 0%{top:5px;opacity:1} 100%{top:20px;opacity:0} }
@keyframes spin      { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="scale"]   { transform: scale(.92); }
[data-reveal="scale"].revealed { transform: scale(1); }
[data-reveal="left"]    { transform: translateX(-30px); }
[data-reveal="left"].revealed  { transform: translateX(0); }
[data-reveal="right"]   { transform: translateX(30px); }
[data-reveal="right"].revealed { transform: translateX(0); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero-section {
  position: relative; min-height: 100vh;
  display: grid; place-items: center;
  padding: calc(var(--navbar-h) + 40px) 0 60px;
  overflow: hidden;
}
#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .7;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,212,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,255,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 30s linear infinite;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--c-bg) 90%);
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.5), transparent);
  animation: scanMove 8s linear infinite;
  pointer-events: none; z-index: 1;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  position: relative; z-index: 2; width: 100%;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.22);
  padding: .38rem 1rem; border-radius: 20px;
  font-family: var(--mono); font-size: .72rem; color: var(--c-cyan);
  margin-bottom: 1.4rem; animation: fadeIn .8s ease .2s both;
}
.badge-dot { width: 7px; height: 7px; background: var(--c-green); border-radius: 50%; animation: pulse 1.8s ease-in-out infinite; }
.hero-title {
  font-family: var(--head);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900; line-height: 1.15;
  color: var(--c-text); margin-bottom: 1.2rem;
  animation: fadeUp .8s ease .3s both;
}
.hero-sub {
  color: var(--c-muted); font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 1.85; max-width: 520px; margin-bottom: 2.2rem;
  animation: fadeUp .8s ease .4s both;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.8rem; animation: fadeUp .8s ease .5s both; }
.hero-stats {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  animation: fadeUp .8s ease .6s both;
}
.hs-item { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.hs-num {
  font-family: var(--head); font-size: 1.45rem; font-weight: 700; color: var(--c-text); line-height: 1;
  display: flex; align-items: baseline;
}
.hs-suf { font-size: 1rem; color: var(--c-cyan); margin-left: 1px; }
.hs-label { font-family: var(--mono); font-size: .62rem; color: var(--c-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.hs-sep { width: 1px; height: 36px; background: var(--c-border); margin: 0 .6rem; }

/* Hero visual */
.hero-visual { display: flex; align-items: center; justify-content: center; animation: scaleIn .9s ease .2s both; }
.shield-wrap { position: relative; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,212,255,.15); animation: ringPulse 4s ease-in-out infinite; }
.ring-1 { width: 220px; height: 220px; animation-delay: 0s; }
.ring-2 { width: 300px; height: 300px; animation-delay: .8s; border-style: dashed; opacity: .6; animation: rotateRing 30s linear infinite; }
.ring-3 { width: 380px; height: 380px; animation-delay: 1.6s; }
.shield-core { position: relative; z-index: 2; animation: float2 5s ease-in-out infinite; filter: drop-shadow(0 0 25px rgba(0,212,255,.35)); }
.float-chip {
  position: absolute; background: rgba(3,8,15,.9);
  border: 1px solid rgba(0,212,255,.22); border-radius: 8px;
  padding: .4rem .85rem; font-family: var(--mono); font-size: .72rem;
  white-space: nowrap; backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.chip-1 { top:  50px; right: 20px; color: var(--c-red);    border-color: rgba(255,51,102,.25);  animation: float1 3.5s ease-in-out infinite; }
.chip-2 { bottom: 60px; right: 10px; color: var(--c-green); border-color: rgba(0,255,136,.25);   animation: float3 4s ease-in-out infinite; }
.chip-3 { bottom: 60px; left: 10px;  color: var(--c-yellow);border-color: rgba(255,215,0,.25);   animation: float2 4.5s ease-in-out infinite; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: .35; z-index: 3; }
.scroll-wheel { width: 22px; height: 36px; border: 1.5px solid var(--c-cyan); border-radius: 12px; position: relative; }
.scroll-wheel::after { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:4px; height:7px; background:var(--c-cyan); border-radius:2px; animation:scrollBob 2s ease-in-out infinite; }

/* ── TICKER ─────────────────────────────────────────────────── */
.ticker-bar {
  background: rgba(2,6,14,.96);
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  padding: .55rem 0; display: flex; align-items: center;
  overflow: hidden; position: relative; z-index: 10;
}
.ticker-tag {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 1.3rem; font-family: var(--mono); font-size: .7rem;
  color: var(--c-cyan); white-space: nowrap;
  border-right: 1px solid var(--c-border); flex-shrink: 0;
}
.tk-live-dot { width: 7px; height: 7px; background: var(--c-red); border-radius: 50%; animation: pulse 1s ease-in-out infinite; }
.ticker-track { flex: 1; overflow: hidden; }
.ticker-scroll { display: flex; width: max-content; animation: ticker 50s linear infinite; }
.ticker-scroll:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: .5rem; padding: 0 2.2rem; font-size: .78rem; color: var(--c-muted); }
.tk-type { font-family: var(--mono); font-size: .67rem; font-weight: 700; padding: .1rem .38rem; border-radius: 3px; }
.tk-crit    { background:rgba(255,51,102,.15); color:var(--c-red); }
.tk-alert   { background:rgba(255,140,0,.15);  color:#ff8c00; }
.tk-warning { background:rgba(255,215,0,.12);  color:var(--c-yellow); }
.tk-info    { background:rgba(0,212,255,.1);   color:var(--c-cyan); }

/* ── SERVICES ───────────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px,1fr)); gap: 1.4rem; }
.svc-card {
  position: relative; background: var(--c-bg2);
  border: 1px solid var(--c-border); border-radius: 16px;
  padding: 2rem; display: flex; flex-direction: column; gap: .8rem;
  text-decoration: none; color: var(--c-text);
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  overflow: hidden;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0,212,255,.07), transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.svc-card:hover { border-color: var(--c-cyan); transform: translateY(-7px); box-shadow: 0 22px 55px rgba(0,0,0,.4); }
.svc-card:hover::before { opacity: 1; }
.svc-icon-box {
  width: 54px; height: 54px;
  background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.18);
  border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; transition: background .3s, border-color .3s;
}
.svc-card:hover .svc-icon-box { background: rgba(0,212,255,.12); border-color: rgba(0,212,255,.35); }
.svc-card h3 { font-family: var(--head); font-size: .97rem; line-height: 1.3; }
.svc-card p  { color: var(--c-muted); font-size: .88rem; line-height: 1.65; flex: 1; }
.svc-price   { font-family: var(--mono); font-size: .78rem; color: var(--c-green); }
.svc-arrow   { color: var(--c-cyan); font-size: 1.1rem; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; margin-top: auto; }
.svc-card:hover .svc-arrow { opacity: 1; transform: translateX(0); }

/* ── WHY SECTION ────────────────────────────────────────────── */
.why-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,5rem); align-items: start; }
.why-feats { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; }
.why-feat { display: flex; gap: .9rem; align-items: flex-start; }
.wf-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.15);
  border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.why-feat strong { display: block; color: var(--c-text); font-size: .95rem; margin-bottom: .2rem; }
.why-feat p { color: var(--c-muted); font-size: .87rem; line-height: 1.65; margin: 0; }

/* Terminal */
.terminal {
  background: #020d18; border: 1px solid rgba(0,212,255,.18);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.term-bar { background: #051525; padding: .7rem 1rem; display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid rgba(0,212,255,.1); }
.term-dots { display: flex; gap: .38rem; }
.term-dots span { width: 11px; height: 11px; border-radius: 50%; }
.term-dots span:nth-child(1) { background: #ff5f57; }
.term-dots span:nth-child(2) { background: #febc2e; }
.term-dots span:nth-child(3) { background: #28c840; }
.term-title { font-family: var(--mono); font-size: .7rem; color: rgba(0,212,255,.4); }
.term-body { padding: 1.2rem; font-family: var(--mono); font-size: .76rem; line-height: 2; overflow: hidden; }
.tl { color: #5a7090; }
.tl .tp { color: var(--c-green); margin-right: .4rem; }
.tl .tc { color: var(--c-text); }
.tl .to { padding-left: 1rem; color: #4a6888; }
.tl .ts { color: var(--c-green); } .tl .tw { color: var(--c-yellow); } .tl .ti { color: var(--c-cyan); }
.term-cursor { color: var(--c-cyan); animation: pulse .8s step-end infinite; }

.hex-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.4rem; }
.hex-card { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 11px; padding: 1.1rem; text-align: center; transition: border-color .2s; }
.hex-card:hover { border-color: var(--c-cyan); }
.hex-val { font-family: var(--head); font-size: 1.3rem; font-weight: 700; color: var(--c-cyan); }
.hex-lbl { font-size: .75rem; color: var(--c-muted); margin-top: .25rem; }

/* ── STATS STRIP ────────────────────────────────────────────── */
.stats-strip {
  padding: 56px 0;
  background: linear-gradient(135deg, rgba(0,212,255,.05), rgba(0,255,136,.03));
  border-top: 1px solid rgba(0,212,255,.09); border-bottom: 1px solid rgba(0,212,255,.09);
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.stat-item { text-align: center; }
.stat-icon { font-size: 2rem; display: block; margin-bottom: .4rem; }
.stat-num {
  font-family: var(--head); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 900;
  color: var(--c-text); display: flex; align-items: baseline; justify-content: center; gap: 1px;
}
.stat-suf { font-size: 1.2rem; color: var(--c-cyan); }
.stat-label { color: var(--c-muted); font-size: .84rem; margin-top: .25rem; }

/* ── CLIENTS MARQUEE ────────────────────────────────────────── */
.clients-strip { padding: 55px 0; overflow: hidden; }
.marquee-fade { position: relative; }
.marquee-fade::before, .marquee-fade::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee-fade::before { left: 0; background: linear-gradient(90deg, var(--c-bg), transparent); }
.marquee-fade::after  { right: 0; background: linear-gradient(-90deg, var(--c-bg), transparent); }
.marquee-track { display: flex; overflow: hidden; }
.marquee-inner { display: flex; gap: 2rem; width: max-content; animation: marqueeL 34s linear infinite; }
.marquee-inner:hover { animation-play-state: paused; }
.client-tile {
  flex-shrink: 0; min-width: 130px; height: 64px;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  padding: .75rem 1.3rem; transition: border-color .25s, background .25s;
}
.client-tile:hover { border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.04); }
.client-tile img { max-height: 36px; max-width: 110px; object-fit: contain; filter: grayscale(80%) brightness(1.4); transition: filter .3s; }
.client-tile:hover img { filter: grayscale(0%) brightness(1); }

/* ── TEAM ───────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1.5rem; }
.team-card {
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: 16px; overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.team-card:hover { border-color: var(--c-cyan); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.tc-photo { position: relative; height: 215px; background: var(--c-bg3); overflow: hidden; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.team-card:hover .tc-photo img { transform: scale(1.06); }
.tc-avatar {
  width: 96px; height: 96px; margin: 55px auto 0;
  background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(0,255,136,.08));
  border: 2px solid rgba(0,212,255,.28); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 2.4rem; font-weight: 700; color: var(--c-cyan);
}
.tc-links {
  position: absolute; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  opacity: 0; transition: opacity .3s;
}
.team-card:hover .tc-links { opacity: 1; }
.tc-links a {
  width: 36px; height: 36px; background: rgba(0,212,255,.18);
  border: 1px solid var(--c-cyan); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan); transition: background .2s;
}
.tc-links a:hover { background: var(--c-cyan); color: var(--c-bg); }
.tc-body { padding: 1.3rem; }
.tc-body h3 { font-family: var(--head); font-size: .92rem; margin: 0 0 .25rem; }
.tc-role { font-family: var(--mono); font-size: .72rem; color: var(--c-cyan); display: block; margin-bottom: .5rem; }
.tc-bio  { color: var(--c-muted); font-size: .83rem; line-height: 1.55; margin: 0; }

/* ── MAGAZINES ──────────────────────────────────────────────── */
.mags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap: 2rem; }
.mag-card {
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.mag-card:hover { border-color: var(--c-cyan); transform: translateY(-7px); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.mag-thumb { position: relative; height: 265px; background: var(--c-bg3); overflow: hidden; }
.mag-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mag-card:hover .mag-thumb img { transform: scale(1.05); }
.mag-placeholder {
  height: 100%; background: linear-gradient(160deg, #02090f, #071626);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1.4rem;
}
.mp-lines { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mp-line { height: 7px; background: rgba(0,212,255,.1); border-radius: 4px; animation: pulse 2.5s ease-in-out infinite; }
.mp-line:nth-child(1){width:90%;}.mp-line:nth-child(2){width:75%;animation-delay:.4s;}.mp-line:nth-child(3){width:85%;animation-delay:.8s;}.mp-line:nth-child(4){width:60%;animation-delay:1.2s;}
.mp-label { font-family: var(--head); font-size: 2rem; font-weight: 900; color: var(--c-cyan); }
.mp-issue { font-family: var(--mono); font-size: .66rem; color: rgba(0,212,255,.4); }
.mag-cat-tag { position: absolute; bottom: .65rem; right: .65rem; background: rgba(0,212,255,.92); color: #030810; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 4px; }
.mag-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.mag-body h3 { font-family: var(--head); font-size: .88rem; line-height: 1.4; color: var(--c-text); margin: 0; }
.mag-body p { color: var(--c-muted); font-size: .82rem; line-height: 1.55; flex: 1; margin: 0; }
.mag-meta { display: flex; gap: .7rem; flex-wrap: wrap; }
.mag-meta span { font-size: .72rem; color: var(--c-faint); }

/* ── NEWS ───────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px,1fr)); gap: 2rem; }
.news-card {
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.news-card:hover { border-color: var(--c-cyan); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.nc-thumb { position: relative; height: 195px; background: var(--c-bg3); overflow: hidden; display: block; }
.nc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .nc-thumb img { transform: scale(1.06); }
.nc-ph { height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 1.5rem; color: var(--c-cyan); opacity: .2; }
.nc-cat { position: absolute; bottom: .65rem; left: .65rem; background: rgba(0,212,255,.92); color: #030810; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 4px; }
.nc-featured { position: absolute; top: .65rem; right: .65rem; background: linear-gradient(135deg,#00d4ff,#00ff88); color: #030810; font-family: var(--head); font-size: .63rem; font-weight: 900; padding: .18rem .5rem; border-radius: 4px; }
.nc-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.nc-meta { display: flex; gap: .9rem; color: var(--c-faint); font-size: .76rem; }
.nc-body h2 { font-family: var(--head); font-size: .9rem; line-height: 1.5; margin: 0; }
.nc-body h2 a { color: var(--c-text); transition: color .2s; }
.nc-body h2 a:hover { color: var(--c-cyan); }
.nc-body p { color: var(--c-muted); font-size: .87rem; line-height: 1.65; flex: 1; margin: 0; }
.nc-more { color: var(--c-cyan); font-size: .8rem; font-weight: 600; margin-top: auto; transition: color .2s; }
.nc-more:hover { color: var(--c-green); }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px,1fr)); gap: 1.5rem; }
.testi-card {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 16px;
  padding: 1.9rem; position: relative; transition: border-color .25s;
}
.testi-card:hover { border-color: rgba(0,212,255,.28); }
.testi-quote { font-family: Georgia,serif; font-size: 5rem; line-height: 1; color: rgba(0,212,255,.09); position: absolute; top: .9rem; right: 1.4rem; }
.testi-stars { color: var(--c-yellow); font-size: .95rem; margin-bottom: .75rem; letter-spacing: .1em; }
.testi-text { color: var(--c-muted); font-style: italic; line-height: 1.85; margin-bottom: 1.5rem; font-size: .93rem; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.ta-ava {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(0,255,136,.08));
  border: 1.5px solid rgba(0,212,255,.28); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; color: var(--c-cyan); font-size: 1rem;
}
.ta-info strong { display: block; color: var(--c-text); font-size: .88rem; }
.ta-info span   { color: var(--c-faint); font-size: .76rem; }

/* ── VIDEOS ─────────────────────────────────────────────────── */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px,1fr)); gap: 1.5rem; }
.vid-card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; transition: border-color .25s; }
.vid-card:hover { border-color: var(--c-cyan); }
.vid-thumb { position: relative; height: 178px; background: var(--c-bg3); cursor: pointer; overflow: hidden; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vid-card:hover .vid-thumb img { transform: scale(1.06); }
.vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: #fff; transition: background .25s; }
.vid-card:hover .vid-play { background: rgba(0,212,255,.2); }
.vid-play svg { width: 42px; height: 42px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.vid-info { padding: .9rem 1.1rem; }
.vid-info h3 { font-family: var(--head); font-size: .87rem; color: var(--c-text); margin: 0 0 .25rem; }
.vid-cat { font-family: var(--mono); font-size: .7rem; color: var(--c-cyan); }

/* ── QUOTE SECTION ──────────────────────────────────────────── */
.quote-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2.5rem,6vw,5rem); align-items: start; }
.quote-promises { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.8rem; }
.qp-item { display: flex; gap: .85rem; align-items: flex-start; }
.qp-icon { width: 42px; height: 42px; flex-shrink: 0; background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.14); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.qp-item strong { display: block; color: var(--c-text); font-size: .88rem; margin-bottom: .1rem; }
.qp-item span   { color: var(--c-muted); font-size: .82rem; }
.quote-card {
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: 18px; padding: clamp(1.5rem,4vw,2.4rem);
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.qf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* ── CTA BANNER ─────────────────────────────────────────────── */
.cta-section { padding: 100px 0; position: relative; overflow: hidden; text-align: center; }
.cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,.07), transparent 65%); }
.cta-section h2 { font-family: var(--head); font-size: clamp(1.6rem,3.5vw,2.6rem); color: var(--c-text); margin-bottom: .9rem; }
.cta-section p { color: var(--c-muted); font-size: 1.05rem; max-width: 580px; margin: 0 auto 2rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── VIDEO MODAL ────────────────────────────────────────────── */
.vmodal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; }
.vmodal.open { display: flex; }
.vmodal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.94); backdrop-filter: blur(10px); cursor: pointer; }
.vmodal-wrap { position: relative; z-index: 2; width: 90%; max-width: 860px; animation: scaleIn .25s ease; }
.vmodal-close { position: absolute; top: -46px; right: 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; width: 38px; height: 38px; color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.vmodal-close:hover { background: rgba(255,255,255,.2); }
.vmodal-video { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.vmodal-video iframe, .vmodal-video video { width: 100%; height: 100%; border: none; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: #020810; border-top: 1px solid rgba(0,212,255,.07); }
.footer-top { padding: clamp(50px,7vw,72px) 0 clamp(30px,4vw,48px); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: clamp(1.5rem,4vw,3rem); }

.footer-logo-link { display: inline-block; margin-bottom: 1.1rem; opacity: .9; transition: opacity .2s; }
.footer-logo-link:hover { opacity: 1; }
.footer-logo { max-height: 50px; width: auto; }
.footer-logo-fallback { display: flex; align-items: center; filter: drop-shadow(0 0 8px rgba(0,212,255,.3)); }
.footer-desc { color: var(--c-muted); font-size: .87rem; line-height: 1.82; margin-bottom: 1.1rem; }
.footer-certs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; }
.cert-chip { padding: .18rem .55rem; border: 1px solid rgba(0,212,255,.17); border-radius: 4px; font-family: var(--mono); font-size: .67rem; color: rgba(0,212,255,.5); }
.footer-socials { display: flex; gap: .55rem; flex-wrap: wrap; }
.social-btn { width: 34px; height: 34px; border: 1px solid var(--c-border); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--c-muted); transition: border-color .2s, color .2s, background .2s; }
.social-btn:hover { border-color: var(--c-cyan); color: var(--c-cyan); background: rgba(0,212,255,.07); }

.footer-col h4 { font-family: var(--head); font-size: .82rem; color: var(--c-text); margin-bottom: 1.1rem; letter-spacing: .05em; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-col ul a { color: var(--c-muted); font-size: .87rem; transition: color .2s, padding-left .2s; display: block; }
.footer-col ul a:hover { color: var(--c-cyan); padding-left: .25rem; }
.footer-more-link { color: var(--c-cyan) !important; font-size: .82rem !important; }

.footer-info-row { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .75rem; }
.fi-icon { width: 28px; height: 28px; flex-shrink: 0; background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.12); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--c-cyan); }
.fi-val { color: var(--c-muted); font-size: .85rem; line-height: 1.5; transition: color .2s; }
a.fi-val:hover { color: var(--c-cyan); }
.footer-wa-btn { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .55rem 1.1rem; background: rgba(37,211,102,.07); border: 1px solid rgba(37,211,102,.22); border-radius: 8px; color: #25d366; font-size: .83rem; font-weight: 600; transition: background .2s, border-color .2s; }
.footer-wa-btn:hover { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.4); }

.footer-bottom { border-top: 1px solid rgba(0,212,255,.05); padding: 1.1rem 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.footer-copy { color: var(--c-faint); font-size: .78rem; }
.footer-legal-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-legal-links a { color: var(--c-faint); font-size: .78rem; transition: color .2s; }
.footer-legal-links a:hover { color: var(--c-cyan); }

/* ── BACK TO TOP ────────────────────────────────────────────── */
.btn-top {
  position: fixed; bottom: 90px; right: 22px; z-index: 999;
  width: 42px; height: 42px; background: var(--c-bg2);
  border: 1px solid var(--c-border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted); transition: var(--trans);
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
.btn-top.vis { opacity: 1; transform: translateY(0); pointer-events: auto; }
.btn-top:hover { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: 0 0 16px rgba(0,212,255,.2); }

/* ── WHATSAPP FAB ───────────────────────────────────────────── */
.wa-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 9998;
  width: 54px; height: 54px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 4px 18px rgba(37,211,102,.4);
  text-decoration: none;
}
.wa-fab:hover { transform: scale(1.1); box-shadow: 0 7px 28px rgba(37,211,102,.6); }
.wa-pulse { position: absolute; inset: -5px; border-radius: 50%; background: rgba(37,211,102,.25); animation: waPop 2.5s ease-out infinite; }
.wa-label { position: absolute; right: calc(100% + 11px); top: 50%; transform: translateY(-50%); background: var(--c-bg); color: #fff; font-size: .76rem; white-space: nowrap; padding: .38rem .8rem; border-radius: 6px; border: 1px solid rgba(37,211,102,.25); opacity: 0; transition: opacity .2s; pointer-events: none; }
.wa-fab:hover .wa-label { opacity: 1; }

/* ── HERO LEAD (about/other pages) ─────────────────────────── */
.page-hero { padding: calc(var(--navbar-h) + 60px) 0 70px; text-align: center; position: relative; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px); background-size: 50px 50px; animation: gridDrift 25s linear infinite; }
.page-hero h1 { font-family: var(--head); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; line-height: 1.2; margin: .4rem 0 .8rem; }
.page-hero p { color: var(--c-muted); max-width: 600px; margin: 0 auto; font-size: 1.05rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .nav-phone span { display: inline; }
}
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content { order: 2; }
  .hero-visual  { order: 1; max-width: 320px; margin: 0 auto; }
  .hero-btns, .hero-stats { justify-content: center; }
  .hero-sub { margin: 0 auto 2rem; }
  .shield-wrap { width: 300px; height: 300px; }
  .ring-3 { display: none; }
}
@media (max-width: 1000px) {
  .nav-links, .nav-phone { display: none; }
  .hamburger { display: flex; }
  .nav-actions { gap: .5rem; }
  .why-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .quote-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .qf-2col { grid-template-columns: 1fr; }
  .hex-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .hs-sep { display: none; }
  .cta-btns { flex-direction: column; align-items: center; }
  .hero-title { font-size: 1.9rem; }
  .btn-nav-cta span { display: none; }
  .btn-nav-cta { padding: .5rem .7rem; }
}
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .shield-wrap { width: 240px; height: 240px; }
  .ring-2 { display: none; }
}