/* ============================================================
   Elite Network & Computer Solutions — design system
   Palette: deep navy base, signal-teal accent, amber CTA
   Type: Space Grotesk (display) + Inter (body)
   ============================================================ */

:root{
  --bg:        #0A0E17;
  --surface:   #111827;
  --surface-2: #17213A;
  --border:    #263352;
  --text:      #EAF0FB;
  --text-dim:  #94A3C4;
  --text-faint:#5E6C8E;
  --accent:    #33D6C0;
  --accent-2:  #1AA99A;
  --cta:       #FFB13C;
  --cta-2:     #E89A2A;
  --danger:    #FF6B6B;
  --radius:    10px;
  --radius-lg: 18px;
  --max:       1180px;
  --serif-line: 1.15;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Space Grotesk","Inter",sans-serif;
  line-height:1.08;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:650;}
h2{font-size:clamp(1.6rem,3vw,2.35rem);}
h3{font-size:1.28rem;}
p{margin:0 0 1em; color:var(--text-dim); max-width:66ch;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--cta);}
img{max-width:100%; display:block; border-radius:var(--radius);}
ul{padding-left:1.15em; color:var(--text-dim);}
li{margin-bottom:.4em;}
strong{color:var(--text);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--surface);}
.eyebrow{color:var(--accent); font-weight:600; font-size:.85rem;}
.lede{font-size:1.15rem; color:var(--text-dim); max-width:60ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:600;
  font-size:.98rem; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-cta{background:var(--cta); color:#1A1204;}
.btn-cta:hover{background:var(--cta-2); color:#1A1204;}
.btn-outline{border-color:var(--border); color:var(--text); background:transparent;}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-ghost{color:var(--text); background:var(--surface-2); border-color:var(--border);}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.btn-sm{padding:9px 16px; font-size:.88rem;}

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  font-size:.82rem; color:var(--text-faint);
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:6px;}
.topbar a{color:var(--text-dim);}
.topbar a:hover{color:var(--accent);}
.topbar .tb-links{display:flex; gap:18px; flex-wrap:wrap;}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(10,14,23,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:background .2s ease;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:14px; flex-wrap:nowrap;}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:650; font-size:1.15rem; color:var(--text); min-width:0; flex:1 1 auto; transition:opacity .2s ease;}
.brand:hover{color:var(--text);}
.brand .mark{
  width:38px;
  height:38px;
  flex:none;
  object-fit:contain;
  border-radius:0 !important;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(56, 189, 248, 0.35));
  transition:transform .2s ease, filter .2s ease;
}
.brand:hover .mark{
  transform:scale(1.06);
  filter:drop-shadow(0 4px 14px rgba(56, 189, 248, 0.55));
}
.brand > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brand small{display:block; font-family:"Inter",sans-serif; font-weight:500; font-size:.65rem; color:var(--text-faint); letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
nav.primary{display:flex; align-items:center; gap:26px;}
nav.primary > a{color:var(--text-dim); font-size:.94rem; font-weight:500; position:relative;}
nav.primary > a:hover, nav.primary > a.active{color:var(--text);}
.has-drop{position:relative;}
.dropdown{
  position:absolute; top:calc(100% + 14px); left:0; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:10px;
  min-width:250px; display:none; box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{display:block;}
.dropdown a{display:block; padding:9px 12px; border-radius:8px; color:var(--text-dim); font-size:.9rem;}
.dropdown a:hover, .dropdown a.active{background:var(--surface); color:var(--accent);}
.nav-cta{display:flex; align-items:center; gap:8px; flex:none;}
.menu-toggle{
  display:none; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text);
  padding:0; cursor:pointer; position:relative; z-index:1001; flex:none;
  width:42px; height:42px; align-items:center; justify-content:center; font-size:1.25rem;
  line-height:1; transition:all .15s ease;
}
.menu-toggle:hover{border-color:var(--accent); color:var(--accent);}
.menu-toggle[aria-expanded="true"]{background:var(--surface); border-color:var(--accent); color:var(--accent);}

.mobile-nav-footer{display:none;}

@media (max-width:960px){
  /* Crucial fix: backdrop-filter on an ancestor forms a containing block for fixed descendants.
     Removing it ensures nav.primary expands to the full viewport instead of being clipped to header height. */
  header.site{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(10,14,23,0.98);
    height:60px;
    display:flex;
    align-items:center;
  }
  body.nav-open header.site{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    z-index:1000;
  }
  body.nav-open .brand{
    position:relative;
    z-index:1001;
  }
  body.nav-open .nav-cta .btn-cta{
    display:none !important;
  }
  .nav{
    width:100%;
    height:100%;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{font-size:1rem; gap:8px;}
  .brand small{display:none;}

  nav.primary{
    position:fixed;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:calc(100vh - 60px);
    height:calc(100dvh - 60px);
    z-index:999;
    background:var(--bg);
    background:linear-gradient(180deg, #0d1424 0%, #0A0E17 100%);
    flex-direction:column;
    align-items:stretch;
    padding:16px 20px calc(24px + env(safe-area-inset-bottom, 20px));
    gap:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    display:none;
    box-sizing:border-box;
  }
  nav.primary.open{
    display:flex;
    animation:navFadeIn .22s ease-out;
  }
  @keyframes navFadeIn{
    from{opacity:0; transform:translateY(-8px);}
    to{opacity:1; transform:translateY(0);}
  }
  nav.primary > a, .has-drop > a{
    width:100%;
    padding:14px 4px;
    border-bottom:1px solid rgba(38,51,82,0.6);
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:1.05rem;
    font-weight:500;
    color:var(--text);
    transition:color .15s ease, padding-left .15s ease;
    box-sizing:border-box;
  }
  nav.primary > a:hover, nav.primary > a.active,
  .has-drop > a:hover, .has-drop.active > a{
    color:var(--accent);
    padding-left:4px;
  }
  .has-drop{position:relative; width:100%;}
  .has-drop > a{cursor:pointer; user-select:none;}
  /* Modern rotating chevron for dropdown toggle */
  .has-drop > a::after{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-right:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
    transform:rotate(45deg);
    transition:transform .22s ease;
    margin-right:8px;
    flex:none;
  }
  .has-drop.open > a::after{
    transform:rotate(-135deg);
  }
  .dropdown{
    position:static;
    display:none !important;
    border:none;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    margin:8px 0 12px;
    padding:6px 8px;
    box-shadow:none;
    min-width:0;
  }
  .has-drop.open .dropdown{
    display:flex !important;
    flex-direction:column;
    gap:2px;
    animation:dropSlide .2s ease-out;
  }
  @keyframes dropSlide{
    from{opacity:0; transform:translateY(-6px);}
    to{opacity:1; transform:translateY(0);}
  }
  .dropdown a{
    display:flex;
    align-items:center;
    padding:11px 12px;
    border-radius:8px;
    color:var(--text-dim);
    font-size:.92rem;
    min-height:44px;
    border-bottom:1px solid rgba(38,51,82,0.3);
    box-sizing:border-box;
  }
  .dropdown a:last-child{border-bottom:none;}
  .dropdown a:hover, .dropdown a.active{
    background:var(--surface);
    color:var(--accent);
  }

  /* Mobile menu action drawer footer */
  .mobile-nav-footer{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--border);
    width:100%;
  }
  .mobile-nav-footer .btn{
    width:100%;
    justify-content:center;
    padding:12px 16px;
    font-size:.94rem;
    box-sizing:border-box;
  }
  .mobile-nav-info{
    text-align:center;
    font-size:.78rem;
    color:var(--text-faint);
    margin-top:4px;
  }

  .menu-toggle{display:inline-flex;}
  .nav-cta .btn-outline{display:none;}
}

@media (max-width:640px){
  .topbar .wrap{
    padding:6px 16px;
    font-size:.76rem;
    justify-content:center;
    text-align:center;
    gap:4px 14px;
  }
  .topbar .tb-links{
    justify-content:center;
    gap:12px;
  }
  .nav-cta .btn-cta{display:none !important;}
}

@media (max-width:480px){
  .nav{padding:0 12px;}
  .brand{font-size:.95rem; gap:8px;}
  .brand .mark{width:32px; height:32px;}
  .menu-toggle{width:38px; height:38px; font-size:1.15rem;}
}

html.nav-open, body.nav-open{
  overflow:hidden !important;
  height:100%;
  overscroll-behavior:contain;
}
body.nav-open .wa-float{display:none !important;}
body.nav-open .topbar{display:none;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:64px 0 72px;}
.hero-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3;}
.hero-media img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.hero-media::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,23,0) 40%,rgba(10,14,23,.75) 100%);}
.hero-stats{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:"Space Grotesk",sans-serif; font-size:1.7rem; color:var(--accent);}
.hero-stats div span{font-size:.82rem; color:var(--text-faint);}
.badge-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.badge{border:1px solid var(--border); background:var(--surface); color:var(--text-dim); font-size:.78rem; padding:6px 12px; border-radius:999px;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; padding-top:36px;}}

/* ---------- marquee strip ---------- */
.strip{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; overflow:hidden;}
.strip .track{display:flex; gap:44px; white-space:nowrap; font-size:.82rem; color:var(--text-faint); letter-spacing:.02em; text-transform:uppercase;}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--accent-2); transform:translateY(-2px);}
.card .icon{width:44px; height:44px; margin-bottom:16px; color:var(--accent);}
.card h3{margin-bottom:.4em;}
.card ul{margin:14px 0 16px; padding-left:1.1em; font-size:.92rem;}
.card a.more{font-size:.88rem; font-weight:600;}

.icon-tile{
  width:48px; height:48px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--accent); margin-bottom:16px;
}

/* feature split rows */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split.reverse .split-media{order:2;}
.split-media{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);}
.split-media img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){.split, .split.reverse{grid-template-columns:1fr;} .split.reverse .split-media{order:0;}}

/* stat bar */
.stat-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--surface);}
.stat-bar div b{display:block; font-family:"Space Grotesk",sans-serif; font-size:2rem; color:var(--accent);}
.stat-bar div span{font-size:.82rem; color:var(--text-faint);}
@media (max-width:700px){.stat-bar{grid-template-columns:repeat(2,1fr);}}

/* process steps */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.step{border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; background:var(--surface); position:relative;}
.step .num{font-family:"Space Grotesk",sans-serif; font-size:2rem; color:var(--accent-2); opacity:.6; margin-bottom:10px;}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* testimonials */
.testi{border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); padding:24px;}
.testi .stars{color:var(--cta); letter-spacing:2px; margin-bottom:10px;}
.testi footer{margin-top:14px; display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--text-faint);}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:.78rem; font-weight:700; font-family:"Space Grotesk",sans-serif;}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--border); padding:18px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; font-weight:600; color:var(--text);}
.faq-q::after{content:"+"; color:var(--accent); font-size:1.3rem; flex:none;}
.faq-item.open .faq-q::after{content:"–";}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding-top:12px; margin:0;}

/* location chip list */
.chip-list{display:flex; flex-wrap:wrap; gap:10px;}
.chip{border:1px solid var(--border); background:var(--surface); padding:8px 14px; border-radius:999px; font-size:.86rem; color:var(--text-dim);}
.chip:hover{border-color:var(--accent); color:var(--accent);}
.prov-group{margin-bottom:30px;}
.prov-group h4{color:var(--text); margin-bottom:12px; font-size:1.02rem;}

/* CTA banner */
.cta-band{background:linear-gradient(135deg,var(--surface-2),var(--surface)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px; text-align:center;}
.cta-band h2{margin-bottom:10px;}

/* breadcrumb */
.crumbs{font-size:.82rem; color:var(--text-faint); padding:16px 0 0;}
.crumbs a{color:var(--text-faint);}
.crumbs a:hover{color:var(--accent);}

/* table (comparison) */
table.compare{width:100%; border-collapse:collapse; font-size:.92rem;}
table.compare th, table.compare td{border:1px solid var(--border); padding:12px 14px; text-align:left;}
table.compare th{background:var(--surface-2); color:var(--text);}
table.compare td{color:var(--text-dim);}

/* forms */
form.quote{display:grid; gap:14px; max-width:560px;}
form.quote label{font-size:.86rem; color:var(--text-dim); display:block; margin-bottom:6px;}
form.quote input, form.quote select, form.quote textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:11px 13px; color:var(--text); font-family:inherit; font-size:.95rem;
}
form.quote textarea{min-height:110px; resize:vertical;}
form.quote input:focus, form.quote textarea:focus, form.quote select:focus{border-color:var(--accent);}

/* footer */
footer.site{background:var(--surface); border-top:1px solid var(--border); padding:64px 0 28px; margin-top:60px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.foot-grid h5{color:var(--text); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;}
.foot-grid ul{list-style:none; padding:0; margin:0;}
.foot-grid li{margin-bottom:9px;}
.foot-grid a{color:var(--text-dim); font-size:.92rem;}
.foot-grid a:hover{color:var(--accent);}
.foot-bottom{border-top:1px solid var(--border); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--text-faint);}
.group-note{font-size:.82rem; color:var(--text-faint); margin-top:10px; max-width:52ch;}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}

/* whatsapp float */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:60; background:#25D366; color:#06210f; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.4);}
.wa-float:hover{filter:brightness(1.08); color:#06210f;}

/* utility */
.center{text-align:center; margin-left:auto; margin-right:auto;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.small{font-size:.85rem; color:var(--text-faint);}
.divider{height:1px; background:var(--border); margin:56px 0;}
.tag{display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2); background:rgba(51,214,192,.08); border:1px solid rgba(51,214,192,.25); padding:4px 10px; border-radius:999px; margin-bottom:14px;}
.blog-card time{font-size:.8rem; color:var(--text-faint);}