/* DiazTech — Matrix aesthetic */
:root{
  --bg:#030712;
  --surface:#0b1020;
  --ink:#e5f2ff;
  --muted:#8da6c1;
  --neon:#00ff95;         /* matrix green */
  --neon2:#30f6ff;        /* cyan pop */
  --accent:#baff3b;       /* lime highlight */
  --line:#122238;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 70% -20%, rgba(48,246,255,.08), transparent 60%),
              radial-gradient(900px 500px at 10% -10%, rgba(0,255,149,.08), transparent 50%),
              #030712;
  line-height:1.6;
  overflow-x:hidden;
}

/* Matrix canvas backdrop */
#matrix{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  opacity:.35;
  background:#02060f;
}

.container{width:min(1140px,92vw); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(150%) blur(6px);
  background:rgba(3, 7, 18, .6);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{font-weight:900; letter-spacing:.6px; color:var(--ink); text-shadow:0 0 14px rgba(0,255,149,.35)}
.brand:hover{text-decoration:none; color:var(--neon)}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:1.2rem}
.site-nav a{margin-left:1rem; font-weight:700; color:var(--ink)}
.site-nav a:hover{color:var(--neon)}

@media (max-width: 820px){
  .nav-toggle{display:block}
  .site-nav{display:none; position:absolute; right:1rem; top:64px; background:#0a0f1f; border:1px solid var(--line); border-radius:.75rem; padding:.5rem}
  .site-nav.open{display:flex; flex-direction:column}
  .site-nav a{margin:.25rem .5rem}
}

.hero{padding:6.75rem 0 4.5rem; text-align:center; position:relative}
.hero-title{
  font-size:clamp(1.8rem, 5.5vw, 4rem);
  margin:0;
  font-weight:900;
  letter-spacing:1px;
}
.glow{
  background:linear-gradient(90deg, var(--neon), var(--neon2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 18px rgba(0,255,149,.35), 0 0 32px rgba(48,246,255,.25);
}
.sub{color:var(--muted); margin:.7rem 0 1.3rem}

.btn{display:inline-block; padding:.85rem 1.2rem; border-radius:.8rem; font-weight:900; letter-spacing:.3px}
.btn.primary{background:linear-gradient(90deg, var(--neon), var(--neon2)); color:#001015}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border:2px solid var(--neon); color:var(--neon); margin-left:.5rem}
.btn.ghost:hover{background:rgba(0,255,149,.08)}

.section{padding:3.2rem 0}
.section.alt{background:linear-gradient(180deg,#071426, #050d1a); border-block:1px solid var(--line)}

.section-title{font-size:clamp(1.6rem, 3vw, 2.2rem); margin:.2rem 0 1rem; text-shadow:0 0 14px rgba(0,255,149,.25)}

.grid-3{display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg,#0b1220, #071222);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 0 0 1px rgba(0,255,149,.06) inset, 0 10px 30px rgba(0,0,0,.25);
}

.check{margin:.5rem 0 0 0; padding-left:1rem}
.check li{margin:.2rem 0}
.check li::marker{color:var(--accent)}

.features{padding-left:1rem}
.features li{margin:.4rem 0}

.contact-form label{display:block; font-weight:800; margin:.5rem 0 .25rem}
.contact-form input, .contact-form textarea{
  width:100%; background:#061021; color:var(--ink);
  border:1px solid var(--line); border-radius:.6rem; padding:.6rem;
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--neon)}

.muted{color:var(--muted)}
.small{font-size:.88rem}

.site-footer{border-top:1px solid var(--line); background:#060f20}
.footer-inner{text-align:center; padding:1.2rem 0}