/* ═══════════════════════════════════════════════════
   SPOTNET — Enterprise ICT
   Dark network-operations aesthetic
   ═══════════════════════════════════════════════════ */

:root{
  --ink:#060B18;            /* page background — deep navy-black */
  --ink-2:#0A1226;          /* raised surface */
  --ink-3:#101B38;          /* card surface */
  --line:rgba(140,170,230,.14);
  --text:#E8EEFB;
  --text-dim:#93A3C4;
  --blue:#2E5FA3;           /* brand blue (logo) */
  --blue-bright:#5B9DF5;
  --ice:#CADCFC;
  --maroon:#8D2F4A;         /* brand maroon (logo "net") */
  --maroon-bright:#D9506F;
  --radius:14px;
  --font-display:"Archivo",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  font-variation-settings:"wdth" 100;
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--maroon);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mono{font-family:var(--font-mono)}

/* ── type scale ── */
h1,h2,h3{font-weight:800;line-height:1.04;letter-spacing:-.01em}
h2{
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  font-stretch:112%;
  text-transform:uppercase;
  margin-bottom:28px;
}
.kicker{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:18px;
}

/* ── buttons ── */
.btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 28px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s;
}
.btn-solid{
  background:linear-gradient(120deg,var(--blue) 0%,#3F76C4 100%);
  color:#fff;
  box-shadow:0 6px 24px rgba(46,95,163,.35);
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(91,157,245,.45)}
.btn-ghost{color:var(--ice);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-bright);background:rgba(91,157,245,.08)}
.btn-wide{width:100%}

/* ═══ TELEMETRY BAR ═══ */
.telemetry{
  display:flex;justify-content:center;gap:34px;
  padding:8px 16px;
  background:#04070F;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;
  color:var(--text-dim);
  position:relative;z-index:60;
}
.telemetry b{color:var(--ice);font-weight:600;margin-left:6px}
.telemetry-item{display:flex;align-items:center;white-space:nowrap}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:#3ADB84;margin-right:8px;
  box-shadow:0 0 0 0 rgba(58,219,132,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(58,219,132,.55)}
  70%{box-shadow:0 0 0 7px rgba(58,219,132,0)}
  100%{box-shadow:0 0 0 0 rgba(58,219,132,0)}
}

/* ═══ NAV ═══ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:40px;
  padding:16px 32px;
  background:rgba(6,11,24,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{
  height:48px;width:auto;display:block;
  /* lift the print-blue/crimson wordmark for legibility on dark navy */
  filter:brightness(1.55) saturate(1.15);
}
.nav-links{display:flex;gap:30px;margin-left:auto}
.nav-links a{
  color:var(--text-dim);text-decoration:none;
  font-size:.92rem;font-weight:600;
  transition:color .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--ice)}
.nav-cta{padding:11px 22px}
.nav-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-burger span{width:24px;height:2px;background:var(--ice);transition:.2s}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#mesh{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{
  position:absolute;pointer-events:none;
  width:900px;height:900px;right:-260px;top:-320px;
  background:radial-gradient(circle,rgba(46,95,163,.28) 0%,rgba(141,47,74,.10) 45%,transparent 70%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:90px 32px 40px;width:100%}
.hero-title{
  font-size:clamp(3.2rem,9vw,7.4rem);
  text-transform:uppercase;
  font-weight:900;
  font-stretch:118%;
  line-height:.96;
  letter-spacing:-.015em;
}
.hero-title .line{display:block}
.hero-title .accent{
  color:transparent;
  background:linear-gradient(95deg,var(--maroon-bright) 10%,var(--blue-bright) 90%);
  -webkit-background-clip:text;background-clip:text;
}
.hero-sub{max-width:560px;margin-top:28px;color:var(--text-dim);font-size:1.08rem}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
.hero-stats{
  display:flex;gap:0;margin-top:64px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(10,18,38,.55);backdrop-filter:blur(8px);
  overflow:hidden;max-width:760px;
}
.stat{flex:1;padding:20px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{
  display:block;font-family:var(--font-mono);
  font-size:1.7rem;font-weight:600;color:var(--ice);
}
.stat span{font-size:.78rem;color:var(--text-dim);letter-spacing:.04em;text-transform:uppercase}

/* marquee */
.hero-marquee{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding:16px 0;margin-top:60px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;gap:38px;width:max-content;
  animation:marquee 30s linear infinite;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);
  align-items:center;
}
.marquee-track i{color:var(--maroon-bright);font-style:normal;font-size:.6rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══ ABOUT ═══ */
.about{padding:130px 0;border-bottom:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.about-copy p{color:var(--text-dim);margin-bottom:20px;font-size:1.05rem}
.about-copy b{color:var(--ice);font-weight:600}

/* ═══ NETWORK ═══ */
.network{padding:130px 0;border-bottom:1px solid var(--line);background:
  radial-gradient(1000px 500px at 85% 10%,rgba(46,95,163,.12),transparent 60%),var(--ink-2)}
.network-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center;margin-top:24px}
.network-copy p{color:var(--text-dim);margin-bottom:20px;font-size:1.02rem}
.network-copy b{color:var(--ice);font-weight:600}
.ticks{list-style:none;margin-top:28px}
.ticks li{
  padding:13px 0 13px 34px;position:relative;
  border-top:1px solid var(--line);color:var(--text-dim);
}
.ticks li::before{
  content:"▸";position:absolute;left:6px;color:var(--maroon-bright);
  font-family:var(--font-mono);
}
.ticks b{color:var(--ice)}

/* topology figure */
.topology{
  background:rgba(6,11,24,.6);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 16px;
}
.topology svg{width:100%;height:auto;display:block}
.topology figcaption{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);
  text-align:center;margin-top:10px;
}
.topo-links path{stroke:rgba(91,157,245,.35);stroke-width:1.5;fill:none}
.topo-links path.dim{stroke:rgba(91,157,245,.12);stroke-dasharray:4 6}
.topo-pulses circle{fill:var(--blue-bright);filter:drop-shadow(0 0 6px var(--blue-bright))}
.topo-node circle{fill:var(--ink-3);stroke:rgba(91,157,245,.45);stroke-width:1.5}
.topo-node.core circle{fill:#14224A;stroke:var(--blue-bright);stroke-width:2}
.topo-node text{
  fill:var(--ice);font-family:var(--font-mono);font-size:11px;
  font-weight:600;text-anchor:middle;letter-spacing:.06em;
}
.topo-node text.sub{fill:var(--text-dim);font-size:8.5px;font-weight:400}
.topo-node.core text{font-size:12px}

/* ═══ SOLUTIONS ═══ */
.solutions{padding:130px 0;border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.card{
  background:linear-gradient(160deg,var(--ink-3) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 24px 26px;
  position:relative;
  transition:transform .25s ease,border-color .25s,box-shadow .25s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(91,157,245,.5);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.card-num{
  position:absolute;top:22px;right:22px;
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--text-dim);letter-spacing:.14em;
}
.card-icon{width:42px;height:42px;color:var(--blue-bright);margin-bottom:22px}
.card:nth-child(even) .card-icon{color:var(--maroon-bright)}
.card h3{font-size:1.18rem;margin-bottom:12px;font-stretch:108%}
.card p{font-size:.9rem;color:var(--text-dim);margin-bottom:18px}
.card ul{list-style:none}
.card li{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;
  color:var(--ice);padding:7px 0;border-top:1px solid var(--line);
}

/* ═══ MATRIX ═══ */
.matrix{padding:130px 0;border-bottom:1px solid var(--line);background:var(--ink-2)}
.matrix-table{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-top:14px;
}
.mt-row{
  display:grid;grid-template-columns:1.3fr .9fr .9fr 1.6fr;
  padding:22px 28px;gap:20px;align-items:center;
  border-top:1px solid var(--line);
  background:rgba(6,11,24,.4);
  transition:background .15s;
}
.mt-row:not(.mt-head):hover{background:rgba(46,95,163,.12)}
.mt-head{
  border-top:0;background:#0D1730;
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);
}
.mt-service{font-weight:700;font-size:1.05rem;color:var(--ice)}
.mt-row b.mono{color:var(--blue-bright);font-size:1.05rem;font-weight:600}
.mt-row span{color:var(--text-dim);font-size:.95rem}
.mt-row span b{margin-right:6px}

/* ═══ WHY ═══ */
.why{padding:130px 0;border-bottom:1px solid var(--line)}
.why-list{margin-top:10px}
.why-item{
  display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:baseline;
  padding:38px 0;border-top:1px solid var(--line);
}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-word{
  font-size:clamp(2.4rem,5.5vw,4.6rem);
  font-weight:900;font-stretch:118%;text-transform:uppercase;
  line-height:1;letter-spacing:-.015em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--text-dim);
  transition:color .3s,-webkit-text-stroke-color .3s;
}
.why-item:hover .why-word{
  color:var(--ice);-webkit-text-stroke-color:transparent;
}
.why-item:hover .why-word{
  background:linear-gradient(95deg,var(--blue-bright),var(--maroon-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.why-item p{color:var(--text-dim);font-size:1.05rem;max-width:460px}

/* ═══ CONTACT ═══ */
.contact{padding:130px 0;background:
  radial-gradient(900px 500px at 10% 90%,rgba(141,47,74,.14),transparent 60%),var(--ink-2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-lede{color:var(--text-dim);margin:6px 0 36px;max-width:420px;font-size:1.05rem}
.contact-list{list-style:none}
.contact-list li{
  display:flex;gap:20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line);
}
.contact-list .mono{
  font-size:.68rem;letter-spacing:.2em;color:var(--maroon-bright);
  min-width:44px;
}
.contact-list a,.contact-list address{
  color:var(--ice);text-decoration:none;font-style:normal;font-size:1.02rem;
}
.contact-list a:hover{color:var(--blue-bright)}

/* quote form */
.quote-form{
  background:rgba(6,11,24,.65);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;backdrop-filter:blur(8px);
}
.quote-form h3{font-size:1.3rem;margin-bottom:24px;font-stretch:108%}
.quote-form label{
  display:block;margin-bottom:16px;
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-form input,.quote-form select,.quote-form textarea{
  display:block;width:100%;margin-top:7px;
  background:var(--ink);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:var(--font-display);font-size:.95rem;
  padding:12px 14px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(91,157,245,.18);
}
.quote-form textarea{resize:vertical}
.quote-form .btn{margin-top:6px}
.form-note{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;
  color:#3ADB84;margin-top:14px;min-height:1.2em;
}
.form-note.err{color:var(--maroon-bright)}

/* ═══ ABOUT PAGE ═══ */
.page-hero{
  position:relative;overflow:hidden;
  padding:120px 0 90px;
  border-bottom:1px solid var(--line);
}
.page-title{
  font-size:clamp(2.6rem,6.5vw,5rem);
  text-transform:uppercase;font-weight:900;font-stretch:118%;
  line-height:1;letter-spacing:-.015em;
}
.page-title .accent{
  color:transparent;
  background:linear-gradient(95deg,var(--blue-bright) 10%,var(--maroon-bright) 90%);
  -webkit-background-clip:text;background-clip:text;
}
.page-lede{max-width:640px;margin-top:26px;color:var(--text-dim);font-size:1.12rem}

.pillars{padding:110px 0;border-bottom:1px solid var(--line);background:var(--ink-2)}
.pillar-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.pillar{
  position:relative;
  background:linear-gradient(160deg,var(--ink-3) 0%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;
  transition:transform .25s ease,border-color .25s;
}
.pillar:hover{transform:translateY(-5px);border-color:rgba(91,157,245,.5)}
.pillar-num{position:absolute;top:24px;right:24px;font-size:.68rem;color:var(--text-dim);letter-spacing:.14em}
.pillar h3{
  font-size:1.7rem;font-stretch:112%;text-transform:uppercase;
  margin-bottom:12px;
  color:transparent;
  background:linear-gradient(95deg,var(--blue-bright),var(--maroon-bright));
  -webkit-background-clip:text;background-clip:text;
}
.pillar p{font-size:.95rem;color:var(--text-dim)}

.company{padding:110px 0}
.company-card{
  display:grid;grid-template-columns:1.3fr 1fr auto;gap:44px;align-items:center;
  background:rgba(10,18,38,.6);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 48px;
}
.company-card h3{font-size:1.5rem;font-stretch:108%;margin-bottom:10px}
.company-card address{font-style:normal;color:var(--text-dim);max-width:340px}
.company-contacts{list-style:none}
.company-contacts li{
  display:flex;gap:18px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line);
}
.company-contacts li:first-child{border-top:0}
.company-contacts .mono{font-size:.66rem;letter-spacing:.2em;color:var(--maroon-bright);min-width:38px}
.company-contacts a,.company-contacts .c-val{color:var(--ice);text-decoration:none;font-size:.98rem}
.company-contacts a:hover{color:var(--blue-bright)}

/* ═══ FOOTER ═══ */
.footer{padding:56px 0;background:#04070F;border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer-tag{
  margin-left:auto;font-size:.72rem;letter-spacing:.2em;color:var(--text-dim);
}
.footer-copy{width:100%;font-size:.8rem;color:var(--text-dim);margin-top:14px}

/* ═══ REVEAL ANIMATION ═══ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1020px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .network-grid,.grid-2,.contact-grid{grid-template-columns:1fr;gap:48px}
  .pillar-row{grid-template-columns:1fr}
  .company-card{grid-template-columns:1fr;gap:30px;align-items:start}
  .t-hide-md{display:none}
}
@media (max-width:720px){
  .t-hide-sm{display:none}
  .nav{gap:16px;padding:14px 20px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(6,11,24,.97);border-bottom:1px solid var(--line);
    padding:10px 20px 18px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-cta{margin-left:auto;padding:10px 16px;font-size:.72rem}
  .nav-burger{display:flex}
  .hero-stats{flex-wrap:wrap}
  .stat{flex:1 1 50%;border-top:1px solid var(--line)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(-n+2){border-top:0}
  .cards{grid-template-columns:1fr}
  .why-item{grid-template-columns:1fr;gap:14px}
  .mt-row{grid-template-columns:1fr 1fr;row-gap:10px;padding:18px 20px}
  .mt-head{display:none}
  .mt-service{grid-column:1/-1}
  .field-row{grid-template-columns:1fr}
  .about,.network,.solutions,.matrix,.why,.contact{padding:90px 0}
  .page-hero{padding:80px 0 64px}
  .pillars,.company{padding:80px 0}
  .company-card{padding:30px 24px}
  .wrap{padding:0 20px}
  .quote-form{padding:26px 20px}
}