:root{
  --bg: #0b0c10;
  --card: #12131a;
  --text: #e8ebf0;
  --muted: #aab2c0;
  --primary: #7c5cff;
  --primary-2: #5ac8fa;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --border: #1f2430;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  --radius: 14px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

:root.light{
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #0e141b;
  --muted: #5a6676;
  --border: #e6e9ef;
  --shadow: 0 10px 30px rgba(10,10,10,.12), 0 2px 6px rgba(10,10,10,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(124,92,255,.25), transparent 60%) , var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(1100px, 92%); margin:0 auto}

.section{padding:72px 0}
.h2{font-size:1.8rem; margin:0 0 12px}
.h3{font-size:1.25rem; margin:0 0 10px}
.h4{font-size:1rem; margin:18px 0 8px}

.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
  backdrop-filter: blur(6px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.logo{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:white; font-weight:800; box-shadow:var(--shadow);
}
.brand-text{font-weight:800}

.hero{position:relative; overflow:hidden}
.hero-inner{text-align:center; padding:36px 0 18px}
.title{font-size:clamp(2rem, 4vw, 3rem); margin:0 0 10px}
.subtitle{color:var(--muted); margin:0 auto 22px; max-width:720px}
.grad{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bg-blob{
  position:absolute; inset:-20% -10% auto auto; width:55vmin; height:55vmin; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.35), transparent 60%);
  filter: blur(30px); opacity:.6; animation: float 16s var(--ease) infinite;
}

.form-grid{
  display:grid; gap:24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .form-grid{grid-template-columns: 1.1fr .9fr}
}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; position:relative; overflow:hidden;
}
.elevate{box-shadow:var(--shadow)}

.input, .input-affix{
  width:100%; font:inherit; color:var(--text);
}
.input{
  background:#0f1117; border:1px solid var(--border); border-radius:12px;
  padding:14px 14px; outline:none; transition:border-color .2s var(--ease), transform .2s var(--ease);
}
:root.light .input{background:#f6f7fb}
.input:focus{border-color:var(--primary); transform: scale(1.01)}
.input-affix{
  display:flex; align-items:center; gap:10px;
  background:#0f1117; border:1px solid var(--border); border-radius:12px; padding:6px 10px;
}
:root.light .input-affix{background:#f6f7fb}
.input-affix .input{border:none; padding:10px; background:transparent}
.suffix{opacity:.7; white-space:nowrap; user-select:none}

.label{display:block; font-weight:600; margin:6px 0 8px}
.hint{font-size:.9rem; color:var(--muted); margin-top:6px}

.status-row{display:flex; align-items:center; gap:10px; min-height:28px; margin-top:10px}
.status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:.9rem; border:1px solid var(--border);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.status-pill.neutral{color:var(--muted)}
.status-pill.ok{background:rgba(34,197,94,.12); color:#22c55e; border-color:rgba(34,197,94,.35)}
.status-pill.bad{background:rgba(239,68,68,.12); color:#ef4444; border-color:rgba(239,68,68,.35)}
.status-pill.warn{background:rgba(245,158,11,.12); color:#f59e0b; border-color:rgba(245,158,11,.35)}

.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  border-top-color: var(--primary);
  animation: spin .9s linear infinite;
  opacity:0; transform: scale(.7);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.spinner.show{opacity:1; transform: scale(1)}

.actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}

.btn{
  appearance:none; border:none; border-radius:12px; padding:12px 16px; cursor:pointer; font-weight:700;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.btn.primary{
  color:white; background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 20px rgba(124,92,255,.35);
}
.btn.primary:hover{transform: translateY(-1px)}
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid var(--border)
}
.btn:active{transform: translateY(0) scale(.98)}

.form-message{
  margin-top:14px; font-weight:600; padding:12px 14px; border-radius:12px; border:1px dashed var(--border);
  opacity:0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.form-message.show{opacity:1; transform: translateY(0)}
.form-message.ok{color:#22c55e; background:rgba(34,197,94,.08); border-color: rgba(34,197,94,.35)}
.form-message.err{color:#ef4444; background:rgba(239,68,68,.08); border-color: rgba(239,68,68,.35)}

.features-grid{
  display:grid; gap:18px; grid-template-columns: 1fr; margin-top:6px;
}
@media (min-width: 800px){
  .features-grid{grid-template-columns: repeat(3, 1fr)}
}
.feature-card{padding:20px}
.icon{font-size:26px; margin-bottom:6px}

.site-footer{border-top:1px solid var(--border)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:24px 0; flex-wrap:wrap; gap:10px}
.footer-nav{display:flex; gap:14px}
.link{color:var(--muted); text-decoration:none}
.link:hover{color:var(--text)}

/* Animations */
@keyframes float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(10px)}
}
@keyframes spin{to{transform: rotate(360deg)}}

.fade-in{opacity:0; transform: translateY(8px); animation: fadeIn .6s var(--ease) .05s forwards}
@keyframes fadeIn{to{opacity:1; transform:none}}

.fade-out{opacity:1; transform:none; transition: opacity .35s var(--ease), transform .35s var(--ease)}
.fade-out.hide{opacity:0; transform: translateY(-8px)}

.shrink-in{transform: scale(1); transition: transform .18s var(--ease)}
.shrink-in:active{transform: scale(.96)}
/* shrink-out utility to apply on hide */
.shrink-out{transform: scale(1); transition: transform .2s var(--ease), opacity .2s var(--ease)}
.shrink-out.hide{transform: scale(.96); opacity:0}

.fade-in-on-scroll{opacity:0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease)}
.fade-in-on-scroll.visible{opacity:1; transform: none}