/* --- Telsnet fallback utilities (when Tailwind JS CDN is slow/blocked) --- */
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f1f5f9;color:#0f172a}
.container{max-width:72rem;margin:0 auto;padding-left:1rem;padding-right:1rem}

.border{border:1px solid rgba(2,6,23,.12)}
.border-b{border-bottom:1px solid rgba(2,6,23,.12)}
.border-t{border-top:1px solid rgba(2,6,23,.12)}
.bg-white{background:#fff}
.card{background:#fff;border:1px solid rgba(2,6,23,.08);border-radius:1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:1rem;text-decoration:none}
.btn-primary{background:#059669;color:#fff}
.btn-outline{border:1px solid rgba(2,6,23,.12);background:#fff;color:#0f172a}
.grid{display:grid;gap:1rem}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.h-16{height:4rem}
.w-8{width:2rem}.h-8{height:2rem}
.p-4{padding:1rem}.p-6{padding:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}
.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
/* Simple responsive columns so grids don't collapse without Tailwind */
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.hidden.md\:flex{display:flex}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:col-span-2{grid-column:span 2 / span 2}}
/* Nav basic look to avoid odd layout before Tailwind boots */
.nav a{padding:.375rem .625rem;border-radius:.75rem;text-decoration:none;color:#475569}
.nav a.active{background:#059669;color:#fff}
/* Service cards hover (works even if Tailwind classes missing) */
.service-card{transition:background .25s,color .25s,transform .25s;border-radius:1rem}
.service-card:hover{background:#059669;color:#fff;transform:translateY(-2px)}
/* NG/EU hover-flip baseline */
.hover-flip{border:1px solid rgba(2,6,23,.12);border-radius:1rem;transition:background .25s,color .25s,transform .25s,border-color .25s}
.hover-flip:hover{background:#059669;color:#fff;transform:translateY(-2px);border-color:#047857}
/* Chat with Support FAB baseline */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.5rem;background:#25D366;color:#111;border-radius:9999px;padding:.75rem 1rem;box-shadow:0 8px 20px rgba(0,0,0,.15);}

/* Mobile hamburger icon */

/* Ensure button contrasts on dark header; tweak if needed */

/* === Header nav hover/active only (no persistent active state) === */
header .nav a:hover,
header .nav a:active { color: var(--accent) !important; }

/* === FINAL: Header nav behavior (no bg by default; green bg on hover/active) === */
header .nav a,
header .nav a:visited {
  background: transparent !important;
  color: inherit;
}
header .nav a:hover,
header .nav a.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 0.5rem;
}



/* === Modern Theme Enhancements (non-breaking) === */
:root{
  --accent:#25D366;
  --accent-hover:#1fb356;
  --bg:#0f172a;
  --card:#0b1220;
  --ring:#a7f3d0;
  --radius:16px;
  --shadow: 0 10px 24px rgba(2,6,23,.16), 0 2px 8px rgba(2,6,23,.08);
}
*{outline-color:var(--ring)}
a,button{transition:all .18s ease}
.card,.service-card,.bubble{border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:saturate(1.15)}
.header-glass{backdrop-filter: blur(8px) saturate(1.2); background: linear-gradient(to bottom, rgba(255,255,255,.86), rgba(255,255,255,.72));}
.footer-glass{backdrop-filter: blur(6px) saturate(1.1); background: linear-gradient(to top, rgba(15,23,42,.6), rgba(2,6,23,.4));}

/* Tap-as-hover support: make .hover class behave like :hover */
.service-card.hover, .bubble.hover, .hover-flip.hover, .flip-card.hover{transform:translateY(-2px);filter:brightness(1.03)}
/* Accessible focus ring */
:focus-visible{outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 12px;}

/* Hamburger button minimal style */
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:.5rem;background:transparent;border:none;color:#0f172a;font-size:22px;line-height:1;cursor:pointer;z-index:60}
@media (min-width:768px){ .hamburger{display:none} }