/* ============================================================
   Lili — landing page styles
   Brand: deep violet/purple orb, warm glow, soft motion.
   ============================================================ */

:root {
  --bg: #0b0817;
  --bg-soft: #120e23;
  --bg-light: #f7f5fb;
  --ink: #14112a;
  --ink-2: #2b2547;
  --ink-3: #5a5380;
  --muted: #8a83ad;
  --line: rgba(255,255,255,0.08);
  --line-dark: rgba(20,17,42,0.08);

  --violet-50:  #f3eeff;
  --violet-100: #e6dbff;
  --violet-200: #c9b3ff;
  --violet-300: #ab86ff;
  --violet-400: #8b5cf6;
  --violet-500: #7c3aed;
  --violet-600: #6d28d9;
  --violet-700: #5b21b6;
  --violet-800: #4c1d95;

  --pink: #ff7ad8;
  --cyan: #79e7ff;
  --teal: #67f5c2;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow-card: 0 30px 60px -25px rgba(76, 29, 149, 0.35), 0 8px 20px -10px rgba(20,17,42,0.15);

  --maxw: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-light);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--violet-600); text-decoration: none; }
a:hover { color: var(--violet-500); }

h1, h2, h3, h4 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  margin: 0 0 .4em;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.6rem, 5.8vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1rem; }

em { font-style: normal; color: var(--violet-600); font-weight: 500; }

.grad {
  background: linear-gradient(95deg, var(--violet-300), var(--pink) 55%, var(--violet-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-soft {
  background: linear-gradient(95deg, var(--violet-200), #fff 60%, var(--violet-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =============== NAV =============== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(247,245,251,0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-weight: 700;
}
.brand-name { font-family: 'Sora', sans-serif; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand-orb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff 0%, var(--violet-200) 18%, var(--violet-500) 60%, var(--violet-800) 100%);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12), 0 8px 18px -8px rgba(124,58,237,.6);
  position: relative;
}
.brand-orb.sm { width: 22px; height: 22px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-2); font-weight: 500; font-size: .96rem; }
.nav-links a:hover { color: var(--violet-600); }

/* =============== BUTTONS =============== */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-align: center;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
  line-height: 1;
}
.btn-primary {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(109, 40, 217, 0.6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(109,40,217,.7); color: #fff; }
.btn-secondary {
  background: #fff; color: var(--violet-700); border-color: var(--violet-200);
}
.btn-secondary:hover { border-color: var(--violet-400); color: var(--violet-700); }
.btn-ghost {
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-dark);
  padding: 9px 16px; font-size: .92rem;
}
.btn-ghost:hover { color: var(--violet-700); border-color: var(--violet-200); }

/* =============== HERO =============== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f4eeff 60%, #e9defc 100%);
  overflow: hidden;
  padding: 90px 32px 110px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.bg-blob {
  position: absolute; filter: blur(70px); opacity: .55; border-radius: 50%;
}
.bg-blob-a {
  width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, var(--violet-300), transparent 70%);
  top: -120px; left: -80px;
}
.bg-blob-b {
  width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, var(--pink), transparent 65%);
  bottom: -200px; right: -160px; opacity: .35;
}
.bg-grain {
  position: absolute; inset: 0; opacity: .035;
  background-image: radial-gradient(rgba(20,17,42,.6) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
.eyebrow {
  display: inline-block;
  background: rgba(124,58,237,.10);
  color: var(--violet-700);
  border: 1px solid rgba(124,58,237,.15);
  font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 22px;
}
.lede {
  font-size: 1.18rem;
  color: var(--ink-2);
  max-width: 580px;
  margin-top: 14px;
}
.cta-row { display: flex; gap: 14px; margin: 30px 0 24px; flex-wrap: wrap; }

.trust-bullets {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  color: var(--ink-2); font-size: .94rem;
}
.trust-bullets li { display: flex; align-items: center; gap: 8px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-400), var(--pink));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}

/* ---------- HERO ORB ---------- */
.hero-orb-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 460px;
}
.orb {
  position: relative;
  width: 320px; height: 320px;
}
.orb-body {
  position: absolute; inset: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #fff 0%, var(--violet-100) 12%, var(--violet-400) 45%, var(--violet-700) 82%, #1a0b3a 100%);
  box-shadow:
    inset -20px -30px 60px rgba(0,0,0,.35),
    inset 18px 22px 40px rgba(255,255,255,.18),
    0 30px 60px -10px rgba(76, 29, 149, .55);
  animation: breathe 4.5s ease-in-out infinite;
}
.orb-glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 134, 255, .55), rgba(171, 134, 255, 0) 65%);
  filter: blur(15px);
  animation: glow 4.5s ease-in-out infinite;
}
.orb-ring {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(124,58,237,.35);
  animation: spin 22s linear infinite;
}
.orb-shadow {
  position: absolute; left: 18%; right: 18%; bottom: -22px; height: 30px;
  background: radial-gradient(ellipse at center, rgba(76,29,149,.45), transparent 70%);
  filter: blur(8px);
}
.eye {
  position: absolute;
  width: 38px; height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    inset 0 -4px 8px rgba(124,58,237,.15),
    inset 0 6px 10px rgba(255,255,255,.9),
    0 4px 10px rgba(20,17,42,.25);
  top: 42%;
  transform: translateY(-50%);
  animation: blink 5s ease-in-out infinite;
}
.eye-l { left: 28%; }
.eye-r { right: 28%; }
.pupil {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5a4884 0%, #1a0b3a 70%, #000 100%);
  transform: translate(-50%, -50%);
  box-shadow: inset -2px -2px 3px rgba(255,255,255,.2);
  animation: lookaround 7s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes glow {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes blink {
  0%, 92%, 100% { transform: translateY(-50%) scaleY(1); }
  94% { transform: translateY(-50%) scaleY(0.08); }
  96% { transform: translateY(-50%) scaleY(1); }
}
@keyframes lookaround {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-30%, -50%); }
  50% { transform: translate(-50%, -40%); }
  75% { transform: translate(-70%, -50%); }
}

.wake-bubble {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -2px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line-dark);
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(76,29,149,.25);
  font-weight: 600; color: var(--violet-700);
}
.wake-wave { display: inline-flex; gap: 3px; align-items: end; height: 18px; }
.wake-wave i {
  width: 3px; background: linear-gradient(180deg, var(--violet-400), var(--pink));
  border-radius: 2px; display: inline-block;
  animation: wave 1.1s ease-in-out infinite;
}
.wake-wave i:nth-child(1) { height: 40%; animation-delay: 0.0s; }
.wake-wave i:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.wake-wave i:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.wake-wave i:nth-child(4) { height: 70%; animation-delay: 0.3s; }
.wake-wave i:nth-child(5) { height: 40%; animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.4); }
}

/* =============== BANDS =============== */
.band { padding: 100px 32px; background: #fff; }
.band-soft { background: linear-gradient(180deg, #faf7ff 0%, #fff 100%); }
.band-dark {
  background: linear-gradient(180deg, #16102e 0%, #0b0817 100%);
  color: #d9d3ee;
}
.band-cta {
  background: linear-gradient(135deg, #1a0e3e 0%, #2c1466 45%, #4f1ea3 100%);
  color: #fff; position: relative; overflow: hidden;
}
.band-cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,122,216,.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(121,231,255,.18), transparent 45%);
  pointer-events: none;
}
.band-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }

.kicker {
  text-transform: uppercase; letter-spacing: .14em; font-size: .8rem;
  color: var(--violet-600); font-weight: 700; margin-bottom: 10px;
}
.kicker-light { color: var(--violet-300); }
.h-light { color: #fff; }
.band-lede { font-size: 1.12rem; color: var(--ink-2); max-width: 760px; margin-bottom: 50px; }
.band-lede.light { color: #c8c0e6; }

/* =============== PILLARS =============== */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--violet-200);
  box-shadow: var(--shadow-card);
}
.pillar h3 { margin-bottom: .35em; }
.pillar p { color: var(--ink-3); font-size: .98rem; margin: 0; }
.pillar-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--violet-50), var(--violet-200));
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pillar-ico::before {
  content: "";
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
  border-radius: 6px;
}
.ico-listen::before { border-radius: 50%; }
.ico-think::before { transform: rotate(45deg); border-radius: 4px; }
.ico-speak::before { clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); background: var(--violet-600); border-radius: 0; }
.ico-do::before { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); border-radius: 0; }

/* =============== PRIVACY =============== */
.privacy-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
.check-list { list-style: none; padding: 0; margin: 20px 0 0; }
.check-list li {
  position: relative; padding-left: 32px; margin-bottom: 12px;
  color: #d1c9ee;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--violet-300));
  box-shadow: 0 0 0 4px rgba(103,245,194,0.10);
}
.check-list li::after {
  content: ""; position: absolute; left: 5px; top: 10px;
  width: 8px; height: 4px;
  border-left: 2px solid #0b0817; border-bottom: 2px solid #0b0817;
  transform: rotate(-45deg);
}
.privacy-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(8px);
}
.card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.card-row:last-child { border-bottom: 0; }
.card-row-emph { background: rgba(255,122,216,0.06); border-radius: 12px; padding-left: 14px; padding-right: 14px; }
.card-key { color: #d6cfee; font-weight: 500; }
.card-val { font-weight: 600; }
.pill {
  padding: 5px 11px; border-radius: 999px; font-size: .82rem;
}
.pill-good { background: rgba(103,245,194,0.16); color: #67f5c2; border: 1px solid rgba(103,245,194,0.3); }
.pill-none { background: rgba(255,122,216,0.16); color: #ff7ad8; border: 1px solid rgba(255,122,216,0.3); }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 6px;
  font-size: .92em; color: #f0e9ff;
}

/* =============== FEATURE GRID =============== */
.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.feat {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.feat:hover { transform: translateY(-3px); border-color: var(--violet-200); box-shadow: var(--shadow-card); }
.feat h4 { color: var(--ink); margin-bottom: 6px; }
.feat p { margin: 0; color: var(--ink-3); }

/* =============== CONNECTIONS =============== */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 8px;
}
.conn {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: 14px; padding: 14px 16px;
  font-weight: 600; color: var(--ink-2);
}
.conn em { color: var(--muted); font-weight: 500; margin-left: 4px; }
.conn-soon { opacity: .8; }
.conn-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-400), var(--pink));
  box-shadow: 0 0 8px rgba(139,92,246,.5);
}
.conn-soon .conn-dot { background: #cfc7e8; box-shadow: none; }

/* =============== HOW SHE FEELS =============== */
.howshe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.howshe blockquote {
  margin: 24px 0 0; padding: 22px 26px;
  background: linear-gradient(180deg, #faf7ff, #f1e9ff);
  border-left: 4px solid var(--violet-400);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-2); font-style: italic;
}
.quote-lili { font-weight: 500; }

.howshe-states {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.state {
  background: #fff; border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px; text-align: center;
}
.state-orb {
  width: 80px; height: 80px; margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff 0%, var(--violet-100) 18%, var(--violet-500) 60%, var(--violet-800) 100%);
  box-shadow: 0 14px 30px -12px rgba(76,29,149,.5);
}
.state-orb.listening { animation: breathe 1.6s ease-in-out infinite; }
.state-orb.thinking {
  background: radial-gradient(circle at 30% 28%, #fff 0%, #ffd8e6 18%, var(--pink) 60%, #8a2059 100%);
  animation: spin 5s linear infinite;
}
.state-orb.speaking {
  background: radial-gradient(circle at 30% 28%, #fff 0%, #d8f9ff 18%, var(--cyan) 60%, #1d6e8a 100%);
  animation: pulse 0.9s ease-in-out infinite;
}
.state-orb.idle { opacity: .55; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.state-label { color: var(--ink-2); font-weight: 600; font-size: .95rem; }

/* =============== ROADMAP =============== */
.road-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.road-col {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 26px;
}
.road-col h4 {
  color: var(--violet-300);
  text-transform: uppercase; font-size: .85rem; letter-spacing: .12em;
  margin-bottom: 16px;
}
.road-col ul { list-style: none; padding: 0; margin: 0; }
.road-col li {
  position: relative; padding-left: 22px; margin-bottom: 12px; color: #d6cfee; font-size: .96rem;
}
.road-col li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-300), var(--pink));
}

/* =============== CTA =============== */
.cta-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: #d6cfee; }
.waitlist-form {
  display: flex; gap: 10px; margin: 28px auto 14px; max-width: 520px;
}
.wl-input {
  flex: 1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 1rem;
  outline: none;
}
.wl-input::placeholder { color: rgba(255,255,255,.55); }
.wl-input:focus { border-color: var(--violet-200); background: rgba(255,255,255,.16); }
.fineprint { font-size: .85rem; color: rgba(255,255,255,.55); margin: 8px 0 0; }

/* =============== FOOTER =============== */
.foot {
  background: #0b0817; color: #b3acd1;
  padding: 40px 32px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.foot-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.foot-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem;
}
.foot-tag { margin: 0; font-size: .92rem; color: #9890bd; }
.foot-copy { margin: 0; font-size: .85rem; color: #75709a; }

/* =============== RESPONSIVE =============== */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero-orb-wrap { min-height: 380px; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .conn-grid { grid-template-columns: repeat(3, 1fr); }
  .road-grid { grid-template-columns: 1fr; }
  .privacy-grid, .howshe { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }
}
@media (max-width: 640px) {
  .nav { padding: 14px 18px; }
  .hero { padding: 60px 18px 80px; }
  .band { padding: 70px 18px; }
  .pillars, .feat-grid, .conn-grid { grid-template-columns: 1fr; }
  .waitlist-form { flex-direction: column; }
  .wl-input, .waitlist-form .btn { width: 100%; }
  .orb { width: 240px; height: 240px; }
}