/* Z COM Networks — production stylesheet
   Reproduces the Claude Design prototype 1:1 on desktop.
   Adds: hover states (prototype used non-standard style-hover),
         mobile responsiveness (prototype was fixed-width only). */

* { box-sizing: border-box; }
body { margin: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; }

/* ---- keyframes (hero) ---- */
@keyframes zfloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
@keyframes zpulse { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
@keyframes zdash  { to { stroke-dashoffset: -240; } }

/* ---- hover utilities (replace prototype style-hover) ---- */
.btn-primary   { transition: background .18s ease; }
.btn-primary:hover   { background:#D44A14 !important; }
.btn-ghost     { transition: background .18s ease; }
.btn-ghost:hover     { background:rgba(255,255,255,.12) !important; }
.btn-ghost-14:hover  { background:rgba(255,255,255,.14) !important; }
.btn-opacity   { transition: opacity .18s ease; }
.btn-opacity:hover   { opacity:.9; }
.nav-link      { transition: color .18s ease; }
.nav-link:hover      { color:#EF5A20 !important; }
.foot-link     { transition: color .18s ease; }
.foot-link:hover     { color:#EF5A20 !important; }
.why-card      { transition: transform .2s ease, border-color .2s ease; }
.why-card:hover      { transform: translateY(-4px); border-color:#F2C9B5 !important; }
.svc-card      { transition: border-color .2s ease; }
.svc-card:hover      { border-color:rgba(239,90,32,.5) !important; }

/* ---- mobile menu ---- */
.nav-burger { display:none; background:none; border:none; font-size:26px; line-height:1; color:#15192A; cursor:pointer; padding:4px 8px; }
.mobile-menu a, .mobile-menu .mm-cta {
  display:block; padding:14px 24px; text-decoration:none; color:#15192A; font-weight:600; font-size:16px; border-top:1px solid #ECEEF2;
}
.mobile-menu .mm-cta { background:#EF5A20; color:#fff; text-align:center; border-top:none; margin:14px 24px; border-radius:10px; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .hero-grid    { grid-template-columns:1fr !important; gap:40px !important; }
  .why-grid     { grid-template-columns:1fr !important; gap:40px !important; }
  .grid-3       { grid-template-columns:1fr !important; }
  .grid-4       { grid-template-columns:1fr 1fr !important; }
  .svc-row      { grid-template-columns:1fr !important; gap:28px !important; }
  .svc-row > div{ order:0 !important; }
  .contact-grid { grid-template-columns:1fr !important; }
  .footer-grid  { grid-template-columns:1fr 1fr !important; }
  .h1-hero      { font-size:42px !important; }
  .cta-box      { padding:40px 26px !important; }
}
@media (max-width: 600px) {
  .grid-4       { grid-template-columns:1fr !important; }
  .footer-grid  { grid-template-columns:1fr !important; }
  .h1-hero      { font-size:32px !important; }
  .topbar       { display:none !important; }
  .nav-desktop  { display:none !important; }
  .nav-cta      { display:none !important; }
  .nav-burger   { display:block; }
  section       { padding-left:18px; padding-right:18px; }
}

/* ---- WhatsApp floating button ---- */
#waFloat {
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(37,211,102,.6); cursor:pointer;
  transition:transform .15s ease;
}
#waFloat:hover { transform:scale(1.07); }
@media (max-width:600px){ #waFloat{ right:16px; bottom:16px; width:54px; height:54px; } }

/* ---- logo walls (partners / clients) ---- */
@media (max-width:980px){ .logo-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:760px){ .logo-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:460px){ .logo-grid{ grid-template-columns:1fr 1fr !important; } }

/* ============ enhanced mobile responsiveness ============ */
@media (max-width:768px){
  /* tighten vertical rhythm on phones */
  section { padding-top:54px !important; padding-bottom:54px !important; }
  .cta-box { padding:36px 22px !important; }
  /* headings scale down */
  h2 { font-size:28px !important; line-height:1.2 !important; }
  h3 { font-size:19px !important; }
  /* hero stat dividers wrap cleanly */
  .hero-grid { padding-top:60px !important; padding-bottom:60px !important; }
}
@media (max-width:600px){
  section { padding-left:18px !important; padding-right:18px !important; }
  .h1-hero { font-size:30px !important; }
  h2 { font-size:25px !important; }
  /* service blocks: icon above text instead of beside */
  .svc-block { flex-direction:column !important; gap:16px !important; }
  /* contact overlap card: reduce negative margin so it doesn't clip */
  .contact-grid { gap:28px !important; }
  /* logo tiles a touch smaller */
  .logo-chip { min-height:64px !important; padding:14px 10px !important; }
  .logo-chip img { max-height:38px !important; }
  /* footer columns stack with breathing room */
  .footer-grid { gap:30px !important; }
}
@media (max-width:380px){
  .h1-hero { font-size:27px !important; }
  .topbar { font-size:12px !important; }
}
/* never allow sideways scroll */
html, body { max-width:100%; overflow-x:hidden; }
img, svg { max-width:100%; height:auto; }

/* ============ phone layout: force ALL inline grids to one column ============
   The site uses inline styles, so class-based rules miss grids without a class.
   This attribute selector catches every inline grid (keeping logos at 2-up). */
@media (max-width:600px){
  [style*="grid-template-columns"]:not(.logo-grid){ grid-template-columns:1fr !important; }
  .logo-grid{ grid-template-columns:1fr 1fr !important; }
  [style*="margin-top:-104px"]{ margin-top:0 !important; }   /* contact overlap card */
  /* let the speed-test card's inner 3-up stats stay readable */
  [style*="grid-template-columns:1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr 1fr !important; }
}

/* ============ motion / transitions ============ */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  .rv{ opacity:0; transform:translateY(22px);
       transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
       will-change:opacity, transform; }
  .rv.rv-in{ opacity:1; transform:none; }
}
/* interactive transitions */
a, button, .btn-primary, .btn-ghost, .nav-link, .foot-link{
  transition:color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(239,90,32,.6); }
.btn-ghost:hover{ transform:translateY(-2px); }
.why-card, .svc-card, .logo-chip{ transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.why-card:hover, .svc-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(0,0,0,.38); }
.logo-chip:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -16px rgba(0,0,0,.26); border-color:#EF5A20; }
.nav-link:hover, .foot-link:hover{ color:#EF5A20; }