/* ---------- CSS: Site Networx Landing (no frameworks) ---------- */
:root{
  --bg-1:#0f172a; /* slate-900 */
  --bg-2:#0a2a4a; /* custom sky-ish */
  --bg-3:#0f766e; /* teal-700 */
  --text:#e5e7eb; /* zinc-200 */
  --muted:#a1a1aa; /* zinc-400 */
  --ring:#38bdf8; /* sky-400 */
  --primary-1:#14b8a6; /* teal-500 */
  --primary-2:#38bdf8; /* sky-500 */
  --card-bg:rgba(255,255,255,0.1);
  --border:rgba(255,255,255,0.12);
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1600px 500px at 10% 10%, rgba(20,184,166,.25), transparent 50%),
              radial-gradient(1400px 500px at 90% 0%, rgba(56,189,248,.25), transparent 50%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2) 60%, var(--bg-3));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

/* a11y: focus ring */
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* Layout helpers */
.container{
  width:min(1200px, 100% - 2rem);
  margin-inline:auto;
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(6px);
  background:transparent;
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; height:5rem}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand-icon{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:14px;
  background:rgba(20,184,166,.2);
  color:#5eead4;
}
.brand-name{
  font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.5rem, 2vw + 1rem, 2rem);
  color:var(--white);
}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
}
.hero-grid{
  display:grid; gap:2.5rem;
  grid-template-columns: 1fr;
  padding-block: min(14vh, 7rem);
}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 1fr 1fr; align-items:center; gap:3rem; padding-block: min(22vh, 8.5rem)}
}
.hero-title{
  margin:0;
  font-size:clamp(2.5rem, 3.5vw + 1rem, 4rem);
  line-height:1.1;
  font-weight:800;
  color:var(--white);
}
.text-gradient{
  background:linear-gradient(90deg, var(--primary-1), var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.hero-sub{
  margin-top:1rem;
  max-width:46ch;
  color:#cbd5e1;
}

/* Bullets */
.bullets{margin:1.5rem 0 0; padding:0; list-style:none; color:#cbd5e1}
.bullets li{display:flex; align-items:flex-start; gap:.6rem; margin:.65rem 0}
.check{
  color:#5eead4; font-weight:700; margin-top:.2rem;
}

/* Card / Form */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}
@media (min-width: 900px){ .card{ padding:1.5rem 1.5rem 1.75rem } }
.card-title{margin:.25rem 0 1rem; font-size:1.1rem; font-weight:700; color:var(--white)}

.form{display:block}
.grid-2{display:grid; gap:1rem}
@media (min-width: 640px){ .grid-2{grid-template-columns: 1fr 1fr} }
.field{display:flex; flex-direction:column; gap:.4rem; }
.field label{font-size:.9rem; color:#e5e7eb}

input, textarea, button{
  font:inherit;
}
input, textarea{
  color:var(--white);
  background:rgba(255,255,255,.18);
  border:1px solid transparent;
  border-radius:12px;
  padding:.85rem .95rem;
  outline:none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  margin-bottom:10px;
}
/* Placeholder must be white */
input::placeholder, textarea::placeholder{ color:var(--white); opacity:1 }
textarea::placeholder{ color:var(--white); opacity:1 }
input:focus, textarea:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(56,189,248,.25);
  background:rgba(255,255,255,.22);
}

.hp{position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important;}

/* Submit */
.btn-primary{
  width:100%;
  border:0;
  border-radius:14px;
  padding:.9rem 1.1rem;
  font-weight:600;
  color:var(--white);
  background:linear-gradient(90deg, var(--primary-1), var(--primary-2));
  cursor:pointer;
}
.btn-primary:hover{ filter:brightness(1.05) }
.disclaimer{margin:.6rem 0 0; text-align:center; font-size:.8rem; color:#cbd5e1}

.form-status{margin-top:.5rem; min-height:1.25rem; font-size:.9rem}

.footer{border-top:1px solid var(--border); padding:1.2rem 0; background:transparent}
.footer p{margin:0; text-align:center; color:#94a3b8}

/* Popup overlay */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: opacity 0.3s ease;
}
.popup.hidden { display: none; }
.popup-content {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  color: #fff;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.popup-content button {
  margin-top: 1.5rem;
  background: linear-gradient(90deg, var(--primary-1), var(--primary-2));
  border: none;
  padding: 0.7rem 1.4rem;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.popup-content button:hover { filter: brightness(1.1); }