/* Happi OnePage PWA – CSS */
:root{ --bg:#f7fbff; --ink:#0c1230; --muted:#5d6790; --brand:#19c6c6; --accent:#7b5cff; --shadow:0 10px 30px rgba(0,0,0,.08); --shadow-strong:0 18px 50px rgba(0,0,0,.15); }
.happi-app, .happi-app *{ box-sizing:border-box; font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
.happi-app{ min-height:100svh; min-height:100dvh; background:var(--bg); color:var(--ink); }
.happi-app .wrap{ max-width:980px; margin:0 auto; padding:clamp(16px,2.5vw,28px); }

.happi-app .view{ display:none; }
.happi-app[data-state="start"] .view-start{ display:block; }
.happi-app[data-state="flow"]  .view-flow{ display:block; }

.view-start{ display:flex; align-items:center; min-height:100svh; min-height:100dvh;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(123,92,255,.25), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(25,198,198,.25), transparent 60%); }
.badge{ display:inline-block; background:#fff; border-radius:999px; padding:8px 12px; box-shadow:var(--shadow); font-weight:600; font-size:13px; }
.view-start h1{ font-size: clamp(28px, 6vw, 46px); line-height:1.05; margin:10px 0 0 0; font-weight:800; }
.view-start .sub{ font-size:clamp(16px,3.8vw,20px); color:var(--muted); margin:10px 0 0 0; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.btn{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#001a1a; font-weight:800; letter-spacing:.2px; padding:16px 22px; border-radius:14px; font-size:18px; box-shadow:var(--shadow-strong); }
.btn.secondary{ background:#fff; color:#1b2050; border:1px solid #e8ecf8 }
.btn.ghost{ background:#fff; color:#1b2050; border:1px solid #e8ecf8; padding:12px 16px; font-size:16px; }

.demo{ margin-top:28px; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:16px; }
.bubble{ max-width:88%; padding:12px 14px; border-radius:16px; margin:10px 0; font-size:16px; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.ai{ background:#e9fbfb; border:1px solid #d6f5f5; border-top-left-radius:6px; }
.me{ background:#f2efff; border:1px solid #e7e1ff; border-top-right-radius:6px; margin-left:auto; }
.progress{ height:10px; background:#eef1fb; border-radius:999px; overflow:hidden; margin:12px 2px 0; }
.progress > span{ display:block; height:100%; width:66%; background:linear-gradient(90deg, var(--brand), var(--accent)); }
.center{ text-align:center; margin-top:14px; }

.features{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:24px 0 6px; }
.feat{ background:#fff; border:1px solid #eef1fb; border-radius:14px; padding:12px; text-align:center; box-shadow:var(--shadow); font-weight:700; font-size:14px; }
@media (max-width:740px){ .features{ grid-template-columns:1fr 1fr 1fr; } }

.view-flow .flow-wrap{ display:flex; flex-direction:column; gap:12px; min-height:100svh; min-height:100dvh; }
.chat{ flex:1; padding:10px 0 4px; display:flex; flex-direction:column; gap:14px; max-width:520px; margin:0 auto; overflow-y:auto; }
.options{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.result{ background:#fff; border-radius:16px; padding:20px; box-shadow:0 4px 16px rgba(0,0,0,.12); font-size:16px; line-height:1.4; }
.flow-footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #e8ecf8; padding:10px 0; }
.link{ color:#2830a0; text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

.qr-dialog{ border:0; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.15); padding:18px; }
.qr-dialog img{ width:220px; height:220px; display:block; margin:10px auto; border-radius:10px; }
.qr-actions{ display:flex; gap:10px; justify-content:center; }

@supports(padding:max(0px)){
  .flow-footer{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .wrap{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}