/* ============================================================
   MAASHA DIGITALS — Design tokens
   Palette: deep circuit-navy background, electric blue + brushed
   steel accents pulled straight from the MD mark, one cyan
   "signal" accent reserved for the connective-line motif only.
   Type: Sora (display) / Inter (body) / JetBrains Mono (utility)
   Signature: the "signal line" — a PCB-trace path that links
   sections, echoing the cloud-server glyph under the wordmark.
   ============================================================ */

:root{
  --bg:            #070a12;
  --bg-alt:        #0c1120;
  --panel:         #10162a;
  --panel-border:  rgba(154,176,214,0.14);
  --steel:         #a9b4c8;
  --steel-dim:     #6c7893;
  --white:         #f3f6fb;
  --blue:          #3a6ff0;
  --blue-light:    #7aa4ff;
  --signal:        #46e0ff;
  --line:          rgba(255,255,255,0.09);

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* faint circuit-grid backdrop, whole site */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 75%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--white);
}
h1{ font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.08; font-weight:700;}
h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.18; }
h3{ font-size:1.2rem; }
p{ margin:0; color:var(--steel); }
.lede{ font-size:1.1rem; color:var(--steel); max-width:640px; }

/* ---------------- Nav ---------------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(7,10,18,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:40px; height:40px; border-radius:50%; }
.brand-text{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.1; }
.brand-text span{ display:block; font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:0.16em; color:var(--signal); text-transform:uppercase; }

nav.links{ display:flex; gap:34px; align-items:center; }
nav.links a{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--steel);
  position:relative;
  padding:4px 0;
  transition:color .2s;
}
nav.links a::before{ content:"·/ "; color:var(--steel-dim); }
nav.links a:hover, nav.links a.active{ color:var(--white); }
nav.links a.active{ color:var(--signal); }

.nav-cta{
  font-family:var(--font-mono);
  font-size:12.5px;
  border:1px solid var(--blue-light);
  color:var(--white);
  padding:9px 16px;
  border-radius:6px;
  transition:background .2s, box-shadow .2s;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--blue); box-shadow:0 0 22px rgba(58,111,240,0.5); }

.nav-toggle{ display:none; background:none; border:1px solid var(--panel-border); border-radius:6px; padding:8px 10px; color:var(--white); font-family:var(--font-mono); }

@media (max-width:860px){
  nav.links{
    position:fixed; top:69px; left:0; right:0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--panel-border);
    flex-direction:column; align-items:flex-start;
    padding:18px 28px 26px; gap:18px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .2s, transform .2s;
  }
  nav.links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle{ display:inline-block; }
}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.03em;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border-radius:7px;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-primary{ background:linear-gradient(135deg,var(--blue),#2450c4); color:#fff; border:1px solid rgba(122,164,255,0.5);}
.btn-primary:hover{ box-shadow:0 0 28px rgba(58,111,240,0.55); transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--panel-border); color:var(--steel); }
.btn-ghost:hover{ color:var(--white); border-color:var(--steel-dim); }

/* ---------------- Hero ---------------- */
.hero{ padding:86px 0 60px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
.hero h1{ margin-top:18px; }
.hero .lede{ margin-top:20px; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.signal-art{ position:relative; height:380px; }
.signal-art svg{ width:100%; height:100%; }
.node{ fill:var(--signal); filter:drop-shadow(0 0 6px var(--signal)); }
.node-dim{ fill:var(--blue-light); opacity:0.7; }
.trace{ stroke:var(--panel-border); stroke-width:1.4; fill:none; }
.trace-live{ stroke:var(--signal); stroke-width:1.6; fill:none; stroke-dasharray:6 10; animation:dash 6s linear infinite; opacity:0.85; }
@keyframes dash{ to{ stroke-dashoffset:-160; } }
.pulse{ animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; r:3.4; } 50%{ opacity:1; r:5; } }

@media (prefers-reduced-motion:reduce){
  .trace-live{ animation:none; }
  .pulse{ animation:none; }
}

/* ---------------- Ticker ---------------- */
.ticker{
  border-top:1px solid var(--panel-border);
  border-bottom:1px solid var(--panel-border);
  overflow:hidden; white-space:nowrap;
  padding:16px 0;
  background:var(--bg-alt);
}
.ticker-track{ display:inline-flex; gap:40px; animation:scroll 32s linear infinite; }
.ticker span{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em;
  color:var(--steel-dim); text-transform:uppercase;
}
.ticker span b{ color:var(--signal); font-weight:400; margin-right:8px;}
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* ---------------- Sections ---------------- */
section{ padding:76px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ margin-top:14px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:28px;
  transition:border-color .2s, transform .2s;
}
.card:hover{ border-color:var(--blue-light); transform:translateY(-3px); }
.card .icon{ width:38px; height:38px; margin-bottom:18px; color:var(--signal); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:14.5px; }

.card-link{ display:inline-block; margin-top:16px; font-family:var(--font-mono); font-size:12.5px; color:var(--blue-light); }
.card-link:hover{ color:var(--signal); }

/* ---------------- Circuit spine (services page) ---------------- */
.spine{ position:relative; padding-left:34px; }
.spine::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--signal), var(--blue) 40%, var(--panel-border) 90%);
}
.spine-item{ position:relative; padding:0 0 46px 22px; }
.spine-item:last-child{ padding-bottom:0; }
.spine-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--signal); box-shadow:0 0 10px rgba(70,224,255,0.6);
}
.spine-item .tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--steel-dim); letter-spacing:0.1em; text-transform:uppercase; }
.spine-item h3{ margin-top:6px; }
.spine-item p{ margin-top:10px; max-width:600px; }

/* ---------------- Stat / quote band ---------------- */
.band{
  background:var(--bg-alt);
  border-top:1px solid var(--panel-border);
  border-bottom:1px solid var(--panel-border);
}
.band-inner{ padding:60px 0; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.stat{ min-width:140px; }
.stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--white); }
.stat span{ font-family:var(--font-mono); font-size:11.5px; color:var(--steel-dim); letter-spacing:0.08em; text-transform:uppercase; }

/* ---------------- Values / about ---------------- */
.values-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 34px; }
.values-list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--panel-border); }
.values-list b{ font-family:var(--font-mono); color:var(--signal); font-size:13px; min-width:26px; }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:26px; margin-bottom:16px;
  display:flex; gap:16px; align-items:center;
}
.contact-card .icon{ width:22px; height:22px; color:var(--signal); flex-shrink:0; }
.contact-card a, .contact-card span{ font-family:var(--font-mono); font-size:14.5px; color:var(--white); }
.contact-card small{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--steel-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px;}

form.contact-form{ display:flex; flex-direction:column; gap:14px; }
form.contact-form input, form.contact-form textarea{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:8px;
  padding:14px 16px; color:var(--white); font-family:var(--font-body); font-size:14.5px;
  outline:none; transition:border-color .2s;
}
form.contact-form input:focus, form.contact-form textarea:focus{ border-color:var(--signal); }
form.contact-form label{ font-family:var(--font-mono); font-size:11.5px; color:var(--steel-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:-6px; }
form.contact-form button{ align-self:flex-start; border:none; }

/* ---------------- Footer ---------------- */
footer{ border-top:1px solid var(--panel-border); padding:44px 0 34px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.footer-inner .brand-text{ font-size:0.95rem; }
footer .fine{ font-family:var(--font-mono); font-size:12px; color:var(--steel-dim); }
footer .fcols{ display:flex; gap:50px; flex-wrap:wrap; }
footer .fcols h4{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:12px; font-weight:400; }
footer .fcols a{ display:block; font-size:13.5px; color:var(--steel); padding:5px 0; }
footer .fcols a:hover{ color:var(--signal); }

/* ---------------- Page hero (about/services/contact) ---------------- */
.page-hero{ padding:64px 0 40px; }
.page-hero h1{ margin-top:16px; font-size:clamp(2rem,4vw,3rem); }

@media (max-width:860px){
  .hero-grid, .contact-grid{ grid-template-columns:1fr; }
  .grid-3, .grid-2, .values-list{ grid-template-columns:1fr; }
  .signal-art{ height:260px; margin-top:20px;}
  .band-inner{ gap:26px; }
}