:root{
  --bg:#eaf4fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --primary:#5b5ce6;
  --primary-600:#4b4dd6;
  --primary-700:#3f41bf;
  --success:#10b981;
  --accent:#1e293b;
  --ring:rgba(91,92,230,.35);
}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 500px at 50% -100px, #dff1ff 0%, #eaf4fb 40%, #eaf4fb 100%);
}
.shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:32px 16px;
}
.card{
  width:100%;
  max-width:640px;
  background:var(--card);
  box-shadow:0 20px 60px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;inset:0 0 auto; height:6px;
  background:linear-gradient(90deg,#74a6ff, var(--primary), #7c3aed);
}
.inner{padding:40px 28px 28px 28px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#7aa6ff 0%, var(--primary) 60%);
  box-shadow:0 8px 20px rgba(91,92,230,.35);
  font-weight:800; will-change:transform;
  animation:logoFloat 4.5s ease-in-out infinite;
}
h1{margin:18px 0 8px 0;font-size:34px;line-height:1.2;letter-spacing:.2px;}
.sub{color:var(--muted);font-size:15px;}
.features{display:flex;gap:18px;margin:26px 0 8px 0;flex-wrap:wrap;}
.feature{
  flex:1 1 140px;min-width:140px;
  border:1px solid #e5e7eb;border-radius:14px; padding:14px;
  display:grid;justify-items:center;gap:8px;text-align:center;
  transition:border-color .2s;
}
.feature:hover{border-color:#cbd5e1}
.feature .ico{font-size:22px;color:var(--primary)}
.featureTitle{font-weight:700; line-height:1.15; word-break:break-word; overflow-wrap:anywhere; hyphens:auto}
.steps{display:flex;gap:10px;justify-content:center;margin:20px 0 26px 0}
.dot{width:34px;height:10px;border-radius:999px;background:#e2e8f0; transition:background .25s ease}
.dot.active{background:var(--primary)}
.inputRow{display:flex;gap:12px;margin-top:8px}
.input{
  flex:1; height:48px; border:1.5px solid #e5e7eb; border-radius:14px; padding:0 16px; font-size:15px;
  outline:none; transition: box-shadow .2s,border-color .2s;
}
.input:focus{border-color:var(--primary); box-shadow:0 0 0 6px var(--ring)}
.btn{
  height:48px; padding:0 22px; border-radius:14px; border:0; cursor:pointer; color:#fff; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  box-shadow:0 10px 24px rgba(91,92,230,.35); transition: transform .15s ease, box-shadow .2s ease;
}
.btn:disabled{opacity:.6; cursor:not-allowed; box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.help{color:#94a3b8; font-size:13px; text-align:center; margin-top:10px}
/* Analyzing */
.analyzing{display:none; text-align:center; padding:10px 0 6px}
.spinner{width:54px;height:54px;border-radius:50%;border:5px solid #e5e7eb;border-top-color:var(--primary); margin:18px auto; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dot.active{background:var(--primary)}
/* subtle pulse for active step */
.dot.active{animation:dotPulse 2.8s ease-in-out infinite}
@keyframes dotPulse{0%{filter:none}50%{filter:brightness(1.15)}100%{filter:none}}
.statusTitle{font-size:22px; font-weight:800; color:#111827}
.statusSub{color:#6b7280; margin-top:6px}
/* Result */
.result{display:none; text-align:center; padding:8px 0}
.check{width:76px; height:76px; border-radius:50%; border:6px solid #a7f3d0; display:grid; place-items:center; color:var(--success); font-size:36px; margin:8px auto 10px auto}
.cta{
  display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px; background:linear-gradient(90deg,#20c997,#16a34a);
  color:#fff; text-decoration:none; font-weight:800; box-shadow:0 10px 24px rgba(16,185,129,.35); transition: transform .2s ease, filter .2s ease;
}
.cta:hover{transform:translateY(-1px); filter:brightness(1.05)}
.badges{display:flex;gap:18px;justify-content:center;margin-top:14px;color:#64748b;font-size:13px}
/* Footer */
.footer{padding:18px 20px 26px 20px; color:#64748b; font-size:12px}
.disclaimer{background:#f8fafc; border:1px solid #e2e8f0; padding:14px; border-radius:12px;}
.mini{font-size:11px;color:#94a3b8;margin-top:8px}
/* Responsive */
@media (min-width:920px){ h1{font-size:36px} .inner{padding:46px 44px 30px 44px}}

/* Subtle card and feature hovers */
.card{transition: box-shadow .25s ease}
.card:hover{box-shadow:0 24px 70px rgba(15,23,42,.16), 0 2px 10px rgba(15,23,42,.08)}
.feature{transition:transform .2s ease, box-shadow .2s ease}
.feature:hover{transform:translateY(-4px); box-shadow:0 10px 22px rgba(15,23,42,.08)}

/* Entrance animations */
.reveal{opacity:0; transform:translateY(12px)}
body.mounted .reveal{animation:fadeUp .5s ease forwards}
body.mounted .features .feature{opacity:0; transform:translateY(12px)}
body.mounted .features .feature:nth-child(1){animation:fadeUp .5s ease .05s forwards}
body.mounted .features .feature:nth-child(2){animation:fadeUp .5s ease .12s forwards}
body.mounted .features .feature:nth-child(3){animation:fadeUp .5s ease .18s forwards}

@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}

/* Constant floating for logo */
@keyframes logoFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

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