@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root { --primary:#5B7C99; --accent:#A8C3D6; --dark:#1F2A36; --bg:#F6F4EF; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dark); background: var(--bg); line-height:1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .nav-brand, .price { font-family: "Cormorant Garamond", Georgia, serif; }
a { color: var(--primary); text-decoration:none; }

.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background: rgba(31,42,54,.96); color:#fff;
  backdrop-filter: blur(8px); position: sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav a { color:#fff; opacity:.85; transition:opacity .2s; }
.nav a:hover { opacity:1; }
.nav-brand { font-weight:600; font-size:22px; letter-spacing:.02em; }
.nav-links { display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }

.hero {
  display:flex; align-items:center; gap:48px; padding:88px 32px 72px;
  max-width:1120px; margin:0 auto; flex-wrap:wrap;
}
.hero-copy { flex:1 1 440px; }
.hero h1 { font-size:clamp(38px,5.5vw,60px); font-weight:600; line-height:1.12; letter-spacing:.01em; }
.hero-sub { font-size:18px; color:#5b6470; margin:20px 0 32px; max-width:540px; }
.hero-trust { font-size:13px; color:#9a8f7f; margin:-18px 0 22px; letter-spacing:.02em; }
.hero-art { flex:1 1 360px; }
.hero-art img { width:100%; border-radius:24px; box-shadow:0 24px 60px rgba(31,42,54,.16); }
.hero-cta2 { margin-left:12px; }

.btn {
  display:inline-block; padding:16px 34px; border-radius:999px; border:none;
  font-size:16px; font-weight:600; cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 8px 24px rgba(91,124,153,.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(91,124,153,.34); }
.btn-ghost { background:transparent; border:1px solid var(--primary); color:var(--primary); margin-top:12px; }

.home-quick {
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:9000; background:var(--dark); color:#fff; border-radius:999px;
  padding:13px 26px; font-size:15px; font-weight:700; box-shadow:0 12px 34px rgba(31,42,54,.28);
  opacity:0; pointer-events:none; transition:opacity .6s ease, transform .3s ease;
}
.home-quick:hover { transform:translateX(-50%) translateY(-2px); color:#fff; }
body.home-loaded .home-quick { opacity:1; pointer-events:auto; }

.section { padding:72px 32px; max-width:1120px; margin:0 auto; }
.section-alt { background:#fff; }
.section h2 { text-align:center; margin-bottom:40px; font-size:34px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.card, .step {
  background:var(--bg); border:1px solid rgba(31,42,54,.08); border-radius:18px;
  padding:28px; transition:transform .25s, box-shadow .25s;
}
.card:hover, .step:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(31,42,54,.08); }
.card h3, .step h3 { font-size:20px; margin-bottom:8px; }
.card p, .step p { font-size:14px; color:#5b6470; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.step { background:#fff; counter-increment:step; position:relative; padding-top:40px; }
.step::before {
  content: counter(step); position:absolute; top:18px; left:24px;
  font-family:"Cormorant Garamond",serif; font-size:26px; color:var(--primary);
}

.plan-card {
  max-width:480px; margin:0 auto; background:#fff; border:1px solid rgba(31,42,54,.08);
  border-radius:24px; padding:40px; text-align:center; box-shadow:0 16px 50px rgba(31,42,54,.08);
}
.plan-card ul { list-style:none; margin:24px 0; text-align:left; }
.plan-card li { padding:8px 0; color:#3d4752; }
.plan-card li::before { content:"✓ "; color:var(--primary); font-weight:700; }
.price { font-size:46px; font-weight:600; color:var(--primary); }
.price small { font-size:16px; color:#888; font-family:"Inter",sans-serif; }

.faq { max-width:760px; margin:0 auto; }
.faq-item { border-bottom:1px solid rgba(31,42,54,.1); padding:18px 0; }
.faq-item summary { font-weight:600; cursor:pointer; font-size:16px; }
.faq-item p { margin-top:10px; color:#5b6470; }

.footer {
  background:var(--dark); color:#cfd6dd; text-align:center;
  padding:44px 24px; margin-top:64px;
}
.footer a { color:#fff; margin:0 12px; opacity:.85; }
.footer a:hover { opacity:1; }
.compliance { margin:14px 0 4px; font-size:13px; color:#9aa5af; }
.digital-note { font-size:12px; color:#7d8891; }

.chat-body { min-height:100vh; display:flex; flex-direction:column; }
.chat-main { flex:1; text-align:center; padding:64px 24px; }
.chat-page { max-width:820px; }
.chat-page h1 { text-align:center; }
#chat-root { margin-top:24px; }
.ai-label { color:var(--primary); font-weight:700; font-size:15px; margin:8px 0 4px; letter-spacing:.02em; }
.chat-hint { color:#666; margin-bottom:24px; }
.chat-footer { margin-top:0; }
.nav-back { display:none; }

.pricing-main { padding:72px 24px; text-align:center; }
.pricing-note { margin-top:28px; color:#777; }
.charity-note { margin-top:14px; font-size:13px; color:#8a8a8a; }
.stats-line { margin-top:10px; font-size:14px; color:var(--primary); font-weight:600; }
.gw-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:24px; }
.gw-item { background:#fff; border:1px solid rgba(31,42,54,.08); border-radius:14px; padding:16px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.gw-text { font-size:14px; color:#3d4752; flex:1; }
.gw-light { background:none; border:1px solid var(--primary); color:var(--primary); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:13px; white-space:nowrap; }
.gw-empty { color:#999; text-align:center; padding:20px; }
.gw-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; }
.gw-modal { background:#fff; max-width:480px; width:calc(100% - 40px); border-radius:18px; padding:26px; position:relative; }
.gw-close { position:absolute; right:14px; top:10px; background:none; border:none; font-size:24px; cursor:pointer; color:#888; }
.gw-input { width:100%; min-height:90px; border:1px solid #ddd; border-radius:12px; padding:12px; font-size:15px; resize:none; }
.gw-warn { font-size:12px; color:#b08968; margin:8px 0; }
.gw-submit { background:var(--primary); color:#fff; border:none; border-radius:999px; padding:12px 24px; font-weight:700; cursor:pointer; }
.gw-msg { min-height:18px; font-size:13px; margin-top:8px; }
.activate-box { margin-top:18px; }
.activate-box input, .activate-main input {
  width:100%; padding:14px 16px; border:1px solid #ddd; border-radius:12px;
  margin:10px 0; font-size:15px;
}
.msg { min-height:20px; font-size:14px; margin-top:8px; }
.ok { color:#1e7e34; } .err { color:#c0392b; }
.activate-body { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.activate-main { max-width:440px; width:100%; padding:24px; text-align:center; }
.activate-main h1 { color:var(--primary); }
.link { display:inline-block; margin-top:16px; }

@media (max-width:720px) {
  .nav { flex-direction:column; gap:12px; padding:14px 16px; }
  .nav-links { justify-content:center; gap:14px; }
  .hero { padding:48px 20px 40px; gap:28px; text-align:center; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-trust { margin-left:auto; margin-right:auto; }
  .hero-cta2 { margin:0 auto; display:block; max-width:320px; }
  .hero-art { order:-1; }
  .hero-art img { max-width:320px; }
  .section { padding:48px 20px; }
  .cards, .steps { grid-template-columns:1fr; }
  .plan-card { padding:28px 20px; }
  .chat-page .nav-links { display:none; }
  .chat-page .nav-back { display:inline-block; font-size:14px; opacity:.9; }
  .home-quick { width:calc(100% - 32px); text-align:center; }
}