/* ACTNS v4.4b build 20251103161607 */
/* Dark Tech Theme for ACTNS v3 */
:root{
  --bg: #0b1322;
  --navy: #0a0f1f;
  --brandA: #0a84ff;
  --brandB: #00c2ff;
  --text: #eaf2ff;
  --muted: #a9b4c9;
  --card: #101a30;
  --card2: #0f1a2c;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
a{color:#8fd3ff}
header{background:linear-gradient(120deg,var(--navy),#091427 60%, var(--navy));padding:26px 12px;text-align:center;position:relative;overflow:hidden}
header:before{
  content:"";position:absolute;inset:0;background:url('../assets/grid.svg') center/800px 450px repeat;opacity:.12;
  animation:gridmove 30s linear infinite;
}
@keyframes gridmove{0%{background-position:0 0}100%{background-position:1600px 900px}}
header img{width:150px;position:relative;z-index:1}
header h1{margin:10px 0 0; font-weight:800; letter-spacing:.5px; position:relative; z-index:1}
nav{background:#0c1730;display:flex;justify-content:center;gap:10px;padding:8px 0;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
nav a{color:var(--text);text-decoration:none;padding:10px 16px;border-radius:8px;transition:background .25s}
nav a:hover{background:rgba(255,255,255,.06)}
.container{width:92%;max-width:1200px;margin:26px auto}
/* Hero */
.hero{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,194,255,.12),transparent), url('../assets/gradient-bg.png') center/cover no-repeat;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-inner{display:flex;gap:28px;align-items:center;padding:36px}
.hero h2{margin:0 0 8px; font-size:2rem; color:#d7e7ff}
.hero p.lead{color:var(--muted);margin:0 0 14px}
.buttons a{display:inline-block;margin-right:12px;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--brandA),var(--brandB));color:#00142a;box-shadow:0 6px 22px rgba(0,194,255,.25)}
.btn-ghost{border:1px solid rgba(255,255,255,.2);color:var(--text)}
/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:-2px;border:1px solid rgba(0,194,255,.12);border-radius:14px;pointer-events:none}
.card h3{margin:10px 0 6px}
.card .mini{height:120px;border-radius:10px;background:radial-gradient(500px 200px at 90% -10%, rgba(0,194,255,.15), transparent)}
/* FAQ */
.faq{margin-top:30px}
.accordion{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.accordion-item{border-top:1px solid rgba(255,255,255,.06)}
.accordion-item:first-child{border-top:none}
.accordion-header{background:#0f1a2c;padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.accordion-header h4{margin:0;font-size:1rem}
.accordion-content{max-height:0;overflow:hidden;background:#0b172b;padding:0 16px;color:#cfe3ff;transition:max-height .4s ease,padding .4s ease, box-shadow .4s ease}
.accordion-item.active .accordion-content{max-height:240px;padding:14px 16px;box-shadow:inset 0 0 0 1px rgba(0,194,255,.12)}
.accordion-item.active .accordion-header{box-shadow:0 0 0 1px rgba(0,194,255,.18) inset}
/* CTA */
.cta{margin-top:28px;background:linear-gradient(90deg,var(--brandA),var(--brandB));color:#021026;padding:20px;border-radius:12px;text-align:center;font-weight:700}
/* Forms */
form{background:#0f1a2c;border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:12px}
input,textarea{width:100%;background:#0a1528;border:1px solid #152440;color:#e6f0ff;border-radius:8px;padding:12px;margin-bottom:12px}
button{background:linear-gradient(90deg,var(--brandA),var(--brandB));color:#00142a;border:none;padding:12px;border-radius:9px;font-weight:800}
/* Footer */
footer{background:#070d18;color:#9fb2d0;text-align:center;padding:18px;margin-top:30px;border-top:1px solid rgba(255,255,255,.06)}
footer a{color:#cfe3ff;text-decoration:underline}
/* Cookie banner */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;background:#0f1a2c;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:12px;justify-content:space-between;z-index:9999}
.cookie-buttons button{padding:8px 12px;border-radius:8px;border:none;font-weight:800}
.accept-btn{background:linear-gradient(90deg,var(--brandA),var(--brandB));color:#00142a}
.decline-btn{background:#0a1528;color:#eaf2ff;border:1px solid rgba(255,255,255,.18)}
/* Scroll to top */
#toTop{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,var(--brandA),var(--brandB));color:#00142a;border:none;border-radius:50%;width:44px;height:44px;display:none;align-items:center;justify-content:center;font-weight:900;box-shadow:0 10px 30px rgba(0,194,255,.35);z-index:9999}
#toTop.show{display:flex}
/* Responsive */
@media (max-width: 880px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero h2{font-size:1.6rem}
}


/* --- v4 Hero enhancements --- */
header img{
  width: 170px;
  filter: drop-shadow(0 0 14px rgba(0,194,255,.35));
}
.hero .hero-inner .left h2{
  text-shadow: 0 0 10px rgba(0,194,255,.15);
}
.hero .brand-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(0,194,255,.08);
  border:1px solid rgba(0,194,255,.18);
  padding:10px 14px;
  border-radius:12px;
  box-shadow: inset 0 0 20px rgba(0,194,255,.06);
  margin-bottom:12px;
}
.hero .brand-badge img{
  width:46px;height:46px;filter: drop-shadow(0 0 10px rgba(0,194,255,.35));
}

/* --- v4.1: brand divider & centered badge --- */
.hero .brand-badge{justify-content:center}
.brand-divider{
  height:2px; width:160px;
  margin:8px 0 10px 0;
  background: linear-gradient(90deg, rgba(10,132,255,.0), rgba(10,132,255,.5), rgba(0,194,255,.0));
  border-radius:2px;
}

/* --- v4.1: higher-contrast illustrated minis --- */
.card .mini{
  background: #0c1528 radial-gradient(400px 200px at 85% -10%, rgba(0,194,255,.18), transparent);
  height: 160px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow: inset 0 0 30px rgba(0,194,255,.05);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.mini.pat{ background-image: url('../assets/mini-pat.svg'); }
.mini.network{ background-image: url('../assets/mini-network.svg'); }
.mini.safety{ background-image: url('../assets/mini-safety.svg'); }

/* --- v4.2: Midnight + Gradient Blend and photo thumbnails --- */
:root{
  --midnight1: #0b1220;
  --midnight2: #111b2e;
  --midnight3: #182238;
}
html, body {
  background: linear-gradient(180deg, var(--midnight1), var(--midnight2) 50%, var(--midnight3));
}
.hero{
  background: linear-gradient(140deg, rgba(10,132,255,.14), rgba(0,194,255,.08)), url('../assets/gradient-bg.png') center/cover no-repeat;
}
.card{
  background: linear-gradient(180deg, rgba(18,28,48,.9), rgba(10,16,28,.9));
}
/* Photo thumbnails for service cards */
.card .mini{
  background: #0c1528;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 30px rgba(0,0,0,.25);
  position: relative;
}
.card .mini::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(9,20,40,.45));
  border-radius: 10px;
}
.mini.pat{ background-image: url('../assets/photo-pat.png'); }
.mini.network{ background-image: url('../assets/photo-network.png'); }
.mini.safety{ background-image: url('../assets/photo-safety.png'); }


/* --- v4.3 Brightness & Glow Tweaks --- */
:root{
  --lift: 1;
}
.hero h2{ color:#e8f3ff; text-shadow:0 0 14px rgba(0,194,255,.18); }
.hero{ box-shadow:0 40px 80px rgba(0,0,0,.35); }
.card{ box-shadow:0 18px 40px rgba(0,0,0,.25); }
.card h3{ color:#e6f0ff; }
.card p{ color:#cdd8ec; }
header{ background: linear-gradient(120deg, #0f1b32, #0b162b 60%, #0f1b32); }
html, body { background: linear-gradient(180deg, #0e1627, #121e35 48%, #192641); }
.btn-primary{ box-shadow:0 10px 30px rgba(0,194,255,.35); }

/* --- v4.4 High‑Tech Vibrant tuning --- */
:root{
  --vibA:#10a7ff;
  --vibB:#34d5ff;
}
html,body{
  background: radial-gradient(1400px 800px at 50% -10%, rgba(52,213,255,0.12), transparent 40%),
              linear-gradient(180deg, #111b31, #16223b 50%, #1b2a48);
}
header{background:linear-gradient(120deg,#12203a,#111b31 60%,#12203a)}
.hero{background:linear-gradient(140deg, rgba(52,213,255,.18), rgba(16,167,255,.10)), url('../assets/gradient-bg.png') center/cover no-repeat}
.hero h2{color:#f1f7ff;text-shadow:0 0 18px rgba(52,213,255,.25)}
.btn-primary{background:linear-gradient(90deg,var(--vibA),var(--vibB));box-shadow:0 12px 32px rgba(52,213,255,.45)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(52,213,255,.55)}
.card{background:linear-gradient(180deg, rgba(26,40,72,.92), rgba(14,24,46,.92));border:1px solid rgba(255,255,255,.08)}
.card .mini::after{background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(9,20,40,.30))}
.card h3{color:#eff6ff}
.card p{color:#d7e5fb}
.brand-divider{background: linear-gradient(90deg, rgba(16,167,255,.0), rgba(52,213,255,.65), rgba(16,167,255,.0));height:3px}