/* ============================================================
   Fawzan A. — Matrix / terminal edition
   Phosphor green on black, monospace, glyph-rain canvas behind.
   Kept legible for enterprise buyers: body copy high-contrast,
   rain dimmed behind panels, reduced-motion respected.
   ============================================================ */
:root{
  --bg:#000600;
  --panel:rgba(0,14,4,.72);
  --green:#00ff66;
  --green-dim:#19c15a;
  --green-soft:#7dffb0;
  --green-ghost:#0c3d22;
  --ink:#c9ffe0;
  --ink-soft:#5fae82;
  --line:#123b26;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* the glyph rain sits behind everything */
#matrix{position:fixed; inset:0; z-index:0; display:block; opacity:.42}
/* vignette + scanlines over the rain to seat content */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.75) 100%);
}
main, .masthead, .foot{position:relative; z-index:2}

.wrap{max-width:1040px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.25rem)}
a{color:inherit}
:focus-visible{outline:2px solid var(--green); outline-offset:3px}
em{font-style:normal; color:var(--green); text-shadow:0 0 12px rgba(0,255,102,.55)}

.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green); margin:0 0 1rem; text-shadow:0 0 10px rgba(0,255,102,.4);
}
.eyebrow::before{content:"> "; opacity:.7}

/* masthead */
.masthead{position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(0,6,0,.95), rgba(0,6,0,.75));
  border-bottom:1px solid var(--line); backdrop-filter:blur(3px)}
.masthead-inner{display:flex; align-items:center; gap:1rem; padding:.8rem 0}
.sig{font-weight:500; font-size:1.05rem; letter-spacing:.04em; color:var(--green);
  text-shadow:0 0 10px rgba(0,255,102,.5)}
.sig::before{content:"["; color:var(--ink-soft)} .sig::after{content:"]"; color:var(--ink-soft)}
.sig-role{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); border-left:1px solid var(--line); padding-left:.9rem}
.nav-cta{margin-left:auto; font-weight:500; font-size:.82rem; letter-spacing:.05em;
  color:var(--green); border:1px solid var(--green-dim); padding:.5rem .95rem;
  text-decoration:none; background:rgba(0,255,102,.06); transition:.15s}
.nav-cta:hover{background:var(--green); color:#000; box-shadow:0 0 18px rgba(0,255,102,.6)}
@media(max-width:620px){ .sig-role{display:none} }

/* hero */
.hero{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem)}
h1{font-weight:500; font-size:clamp(2.1rem,6vw,3.9rem); line-height:1.08;
  letter-spacing:-.01em; margin:0 0 1.5rem; max-width:20ch; color:#eafff2;
  text-shadow:0 0 24px rgba(0,255,102,.25)}
.lede{font-size:clamp(1rem,2vw,1.2rem); line-height:1.65; color:var(--ink);
  max-width:60ch; margin:0 0 2.5rem}
.type-caret::after{content:"_"; color:var(--green); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:2.5rem}
.stat{background:var(--panel); padding:1.3rem 1.2rem}
.stat-num{display:block; font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1;
  margin-bottom:.5rem; color:var(--green); text-shadow:0 0 16px rgba(0,255,102,.45)}
.stat-label{font-size:.8rem; color:var(--ink-soft); line-height:1.45}
@media(max-width:680px){ .stat-row{grid-template-columns:1fr} }

.hero-cta{display:flex; gap:.9rem; flex-wrap:wrap}
.btn{display:inline-block; font-family:var(--mono); font-weight:500; font-size:.95rem;
  letter-spacing:.03em; padding:.85rem 1.5rem; text-decoration:none; cursor:pointer;
  border:1px solid var(--green-dim); transition:.15s}
.btn-lg{padding:1rem 1.9rem; font-size:1rem}
.btn-primary{background:var(--green); color:#000; box-shadow:0 0 0 rgba(0,255,102,0)}
.btn-primary:hover{box-shadow:0 0 22px rgba(0,255,102,.6)}
.btn-primary::before{content:"$ "; opacity:.55}
.btn-ghost{background:rgba(0,255,102,.05); color:var(--green)}
.btn-ghost:hover{background:rgba(0,255,102,.14)}

/* bands */
.band{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
.two-col{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
.big-claim{font-weight:500; font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.4;
  margin:0; color:#eafff2}
.body{margin:0; color:var(--ink-soft)}
@media(max-width:760px){ .two-col{grid-template-columns:1fr; gap:1.25rem} }

h2{font-weight:500; font-size:clamp(1.6rem,3.6vw,2.35rem); line-height:1.15;
  margin:0 0 2rem; color:#eafff2; text-shadow:0 0 20px rgba(0,255,102,.2)}

/* services */
.services{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.card{background:var(--panel); padding:1.6rem 1.4rem 1.9rem; transition:.2s}
.card:hover{background:rgba(0,255,102,.06)}
.card-quiet{background:rgba(0,10,3,.55)}
.card-idx{font-size:.78rem; color:var(--green); letter-spacing:.05em}
.card-idx::before{content:"["} .card-idx::after{content:"]"}
.card h3{font-weight:500; font-size:1.12rem; margin:.55rem 0 .55rem; color:var(--green-soft)}
.card p{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.55}
@media(max-width:820px){ .grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .grid{grid-template-columns:1fr} }

/* client wall */
.clients{list-style:none; margin:0 0 1.2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line)}
.clients li{background:var(--panel); flex:1 1 auto; text-align:center;
  padding:1.4rem 1.6rem; font-weight:500; font-size:1.05rem; letter-spacing:.02em;
  min-width:150px; color:var(--green-soft); transition:.2s}
.clients li:hover{background:rgba(0,255,102,.08); color:var(--green); text-shadow:0 0 12px rgba(0,255,102,.6)}
.fineprint{font-size:.78rem; color:var(--ink-soft); margin:0}
.fineprint::before{content:"// "; color:var(--green-dim)}

/* why */
.why{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,4rem)}
.why-grid p{margin:0; font-size:.98rem; line-height:1.55; padding-left:1.1rem;
  border-left:2px solid var(--green-dim); color:var(--ink)}
@media(max-width:680px){ .why-grid{grid-template-columns:1fr; gap:1.5rem} }

/* close */
.close{padding:clamp(3.5rem,8vw,6rem) 0; border-top:1px solid var(--line); text-align:center}
.close h2{max-width:20ch; margin-inline:auto}
.close .lede{margin-inline:auto; margin-bottom:2.5rem}
.close .hero-cta{justify-content:center}

/* footer */
.foot{border-top:1px solid var(--line); padding:2rem 0}
.foot-inner{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.74rem; color:var(--ink-soft)}
.foot-inner span::before{content:"// "; color:var(--green-dim)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #matrix{display:none}
  body{background:#000600}
  .type-caret::after{animation:none}
}