:root{
  --bg: #06070b;
  --bg-2:#0c0e16;
  --ink:#ECECF6;
  --muted:#9aa0b5;
  --line:#171929;
  --accent:#c3c6ff;
  --accent-2:#888cff;
  --mx:50; --my:50;
}
*{box-sizing:border-box} html,body{height:100%}
html,body{
  margin:0; padding:0; color:var(--ink);
  background: radial-gradient(1200px 700px at 70% -10%, #17192c60, transparent 50%),
              radial-gradient(900px 500px at 10% 120%, #171a3360, transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.45;
  overflow-x:hidden;
}
/* fine grid overlay */
.grid{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 24px);
  mask: radial-gradient(1000px 700px at 50% 40%, #000 30%, transparent 70%);
}

/* wrap */
.wrap{ max-width:1200px; margin:0 auto; padding:26px 20px 60px; }

/* nav */
.nav{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:3px; font-weight:900; }
.brand img{ width:40px; height:40px; border-radius:8px; }
.nav .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 18px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, #121420, #0b0d16); color:#f4f5ff; text-decoration:none; font-weight:800; letter-spacing:.5px;
  transition: border-color .15s ease, transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ border-color:#2a2d3f; transform: translateY(-1px); box-shadow:0 0 28px 0 rgba(150,155,255,.22); }

/* banner — huge outlined type with subtle fill; add trailing semicolon like monolith.wtf */
.banner{ display:flex; align-items:flex-end; justify-content:center; height:min(24vmin, 184px); margin-top:6px; }
.banner h1{
  margin:0; line-height:1; user-select:none; pointer-events:none;
  font-size:clamp(48px, 16vw, 184px); font-weight:1000; letter-spacing:clamp(6px, 1.2vw, 28px);
  color:transparent; -webkit-text-stroke: 2.2px rgba(230,230,255,.16);
  text-transform:uppercase; background:linear-gradient(180deg, rgba(230,230,255,.20), rgba(255,255,255,0));
  -webkit-background-clip:text; background-clip:text;
  filter: drop-shadow(0 14px 36px rgba(40,40,80,.24));
}
.banner h1 .semi{ color:transparent; -webkit-text-stroke: 2.2px rgba(170,175,255,.3); }

/* hero two-column */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; }
@media (max-width: 920px){ .hero{ grid-template-columns:1fr; } }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -30px rgba(0,0,0,.6);
  transform: translate3d(calc((var(--mx)-50)/50*3px), calc((var(--my)-50)/50*3px), 0);
  transition: transform .12s ease;
}
.kicker{ text-transform:uppercase; letter-spacing:2px; color:#c7c9ff; font-size:12px; font-weight:900; }
.subtitle{ color:var(--muted); max-width:62ch; }

/* product strip style blocks (inspired by guarantee/features strips) */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.strip .box{
  border:1px solid var(--line); border-radius:14px; padding:14px;
  background:linear-gradient(180deg, #0e1020, #0b0d18);
  font-weight:800; letter-spacing:.4px;
}
@media (max-width:900px){ .strip{ grid-template-columns:1fr 1fr; } }

/* preview tile (redacted tee) */
.preview{
  position:relative; height:380px; border-radius:16px; overflow:hidden; border:1px dashed #2a2d3f;
  background:linear-gradient(180deg, #0a0c16, #070914);
}
.preview .veil{
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.02) 40px 42px);
  opacity:.25;
}
.preview .stamp{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-6deg);
  border:2px solid rgba(180,180,255,.28); padding:11px 16px; border-radius:10px;
  font-weight:1000; letter-spacing:4px; color:#f0f1ff; background:rgba(6,8,20,.42);
  text-shadow:0 4px 22px rgba(140,140,255,.32);
}

/* form */
.form-grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:740px){ .form-grid{ grid-template-columns:1fr; } }
label{display:block; margin-bottom:6px; color:#cbd0ff; font-size:13px; font-weight:800;}
.input{ width:100%; padding:14px; border-radius:12px; background:#0b0d16; border:1px solid var(--line); color:#f5f6ff; outline:none; }
.input::placeholder{ color:#6f7392; }

/* reveals + parallax driver */
body{ --mx:50; --my:50; }
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.show{ opacity:1; transform:none; }

footer{ margin:46px 0 20px; text-align:center; color:#6c6f86; border-top:1px solid #141520; padding-top:18px; font-size:14px; }