/* ===========================
   HabithackAI — V3 Clean
   =========================== */
:root{
  --blue:#5DB7FF;    /* baby blue */
  --pink:#FF7EB3;    /* pink */
  --ink:#0f172a;     /* charcoal */
  --ink2:#334155;    /* slate */
  --muted:#64748b;   /* gray */
  --panel:#F5FAFF;   /* soft tint */
  --radius:16px;
  --shadow:0 18px 60px rgba(15,23,42,.16);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 1200px at 0% -10%, rgba(93,183,255,.35), transparent 55%),
    radial-gradient(900px 900px at 110% 10%, rgba(255,126,179,.32), transparent 55%),
    linear-gradient(180deg, #fff, #f9fbff);
}

/* Layout */
.shell{max-width:1080px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.6);
  border-bottom:1px solid rgba(148,163,184,.25);
}
.site-header .shell{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink)}
.brand-name{font-weight:700; letter-spacing:.2px}

.logo-badge{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  box-shadow:0 8px 20px rgba(93,183,255,.35), 0 6px 18px rgba(255,126,179,.2);
  border:1px solid rgba(255,255,255,.6);
}
.logo{
  width:22px; height:22px; object-fit:contain;
  /* Faux outline so white marks pop on any bg */
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.35))
    drop-shadow(0 0 1px rgba(0,0,0,.35))
    drop-shadow(0 0 1px rgba(0,0,0,.35));
}

.nav .btn{margin-left:10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:999px; border:none; cursor:pointer;
  font-weight:600; text-decoration:none; transition:transform .06s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--blue), var(--pink));
  color:#fff; box-shadow:0 10px 28px rgba(255,126,179,.28);
}
.btn-primary:active{ transform: translateY(1px) }
.btn-outline{
  color:var(--ink); border:1px solid rgba(51,65,85,.22);
  background:rgba(255,255,255,.65);
}
.btn-outline:hover{ box-shadow:0 8px 24px rgba(93,183,255,.22) }

/* Hero */
.hero{ position:relative; padding:84px 0 56px }
.bg-fade{
  position:absolute; inset:-10vh -10vw auto -10vw; height:42vh;
  background:linear-gradient(90deg, rgba(93,183,255,.25), rgba(255,126,179,.25));
  filter: blur(42px); z-index:0; pointer-events:none;
}
.hero-grid{ position:relative; z-index:1; display:grid; gap:24px; grid-template-columns: 1.3fr 1fr; align-items:center }

.hero-copy{
  padding:28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(93,183,255,.10), rgba(255,126,179,.06));
  border:1px solid rgba(148,163,184,.28);
  box-shadow: var(--shadow);
}
.hero h1{
  margin:0 0 .5rem 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.15;
}
.sub{ margin:.2rem 0 1rem 0; color:var(--ink2); font-weight:600 }
.benefits{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none;
}
.benefits li{
  background:#fff; border:1px solid rgba(148,163,184,.3);
  padding:.42rem .7rem; border-radius:999px; color:var(--ink2); font-size:.93rem;
}

/* Waitlist */
.waitlist{
  display:grid; gap:.6rem;
  padding:24px;
  border-radius: var(--radius);
  background:#fff; /* light card (not full-bleed white) */
  border:1px solid rgba(148,163,184,.28);
  box-shadow: var(--shadow);
}
.waitlist input{
  padding:.95rem 1rem; border-radius:12px; border:1px solid rgba(51,65,85,.22);
  font-size:1rem; color:var(--ink); background: #f9fbff;
}
.tiny-note{ margin:0; color:var(--muted); font-size:.9rem; text-align:center }
.sr-only{ position:absolute; left:-9999px }

/* How it works */
.how{ padding:56px 0 }
.how h2{ text-align:center; margin:0 0 1.1rem 0; font-size:1.6rem }
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.step{
  background: rgba(255,255,255,.8);
  border:1px solid rgba(148,163,184,.28);
  border-radius: var(--radius);
  padding:1rem;
}
.step h3{ margin:.4rem 0 .25rem 0; font-size:1.08rem }
.step p{ margin:0; color:var(--muted) }
.num{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  color:#fff; font-weight:700; font-size:.95rem;
}

/* Footer */
.site-footer{ padding:40px 0 46px }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted) }
.site-footer a{ color:var(--ink2); text-decoration:none; border-bottom:1px solid rgba(51,65,85,.25) }
.site-footer a:hover{ border-bottom-color: var(--pink) }

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:72px 0 40px }
}
@media (max-width: 560px){
  .benefits li{ font-size:.9rem }
  .waitlist{ padding:18px }
}