:root{
  --bg:#0D0F12;
  --surface:#15181C;
  --surface-2:#1B1F24;
  --border:#262B31;
  --text:#ECEEF1;
  --muted:#8A92A0;
  --accent:#46C2B5;
  --accent-dim:#2B7E76;
  --warn:#E8A33D;
  --radius:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:600;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; color:var(--muted);}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* subtle grain overlay for texture, no extra network cost */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- topbar ---- */
.topbar{padding:24px 0; border-bottom:1px solid var(--border);}
.topbar__row{display:flex; align-items:center; justify-content:space-between;}
.logo{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.02em;}
.logo__dot{color:var(--accent);}
.topbar__meta{color:var(--muted); font-size:13px;}

/* ---- hero ---- */
.hero{padding:88px 0 64px;}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.eyebrow{color:var(--accent); font-size:13px; margin-bottom:16px; letter-spacing:.02em;}
.hero__title{font-size:clamp(32px,4.2vw,52px); line-height:1.08;}
.accent{color:var(--accent);}
.hero__sub{font-size:17px; max-width:46ch;}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:8px; font-size:15px; font-weight:500;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn--primary{background:var(--accent); color:#08211E;}
.btn--primary:hover{transform:translateY(-1px); background:#57D2C4;}
.btn--ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn--ghost:hover{border-color:var(--accent);}
.btn--wide{width:100%; margin-top:4px;}

.hero__panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot--a{background:#E8635B;} .dot--b{background:#E8B23D;} .dot--c{background:#4FBF6B;}
.panel__title{margin-left:6px; color:var(--muted); font-size:12px;}
.log{list-style:none; margin:0; padding:18px 20px; display:flex; flex-direction:column; gap:12px; font-size:13.5px;}
.log li{color:var(--muted);}
.log__idx{color:var(--accent-dim); margin-right:10px;}
.log--ok{color:var(--text);}
.log--ok .log__idx{color:var(--accent);}
.panel__note{padding:0 20px 20px; font-size:13px; color:var(--muted); margin:0;}

/* ---- strip ---- */
.strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; background:var(--surface);}
.strip__row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; color:var(--muted); font-size:13px;}
.strip__sep{color:var(--accent-dim);}

/* ---- features ---- */
.features{padding:88px 0;}
.section-title{font-size:clamp(24px,3vw,32px); max-width:20ch;}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:40px;}
.feature{background:var(--surface); padding:28px 22px;}
.feature__num{color:var(--accent-dim); font-size:13px; margin-bottom:14px;}
.feature h3{font-size:17px; margin-bottom:8px;}
.feature p{font-size:14px; margin:0;}

/* ---- request / form ---- */
.request{padding:88px 0 96px;}
.request__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}

.form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  display:flex; flex-direction:column; gap:18px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:13px; color:var(--muted);}
.field input, .field textarea{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:12px 14px;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  resize:vertical;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.field--trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form__status{min-height:18px; font-size:13px; color:var(--muted);}
.form__status.is-ok{color:var(--accent);}
.form__status.is-error{color:var(--warn);}

/* ---- footer ---- */
.footer{border-top:1px solid var(--border); padding:24px 0 40px;}
.footer__row{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; color:var(--muted); font-size:12.5px;}

/* ---- responsive ---- */
@media (max-width: 860px){
  .hero__grid, .request__grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 540px){
  .feature-grid{grid-template-columns:1fr;}
  .hero{padding-top:56px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}