/* ---- html/1.php ---- */
:root {
  --rose:       #c0364e;
  --rose-dark:  #a52d42;
  --rose-pale:  #fdf0f2;
  --black:      #111;
  --white:      #fff;
  --border:     #e8e8e8;
  --bg:         #f7f7f7;
  --gray:       #666;
  --lgray:      #aaa;
  --w:          1084px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--black); font-family:'PT Sans',sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font-family:'PT Sans',sans-serif; cursor:pointer; border:none; outline:none; }

.w { max-width:var(--w); margin:0 auto; padding:0 24px; }
.section { border-bottom:1px solid var(--border); }

/* ── HEADER ── */
header { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; width:100%; }
.header-inner { max-width:var(--w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:13px 24px; }
.logo { font-family:'PT Serif',serif; font-size:22px; font-weight:700; color:var(--black); letter-spacing:-.5px; }
.logo-dot { color:var(--rose); }
.header-nav { display:flex; align-items:center; gap:6px; }
.hnav-link { font-size:13px; font-weight:700; color:var(--gray); padding:7px 12px; border-radius:5px; transition:color .15s,background .15s; white-space:nowrap; }
.hnav-link:hover { color:var(--black); background:var(--bg); }
.hnav-btn { background:var(--rose); color:#fff; padding:8px 20px; font-size:13px; font-weight:700; border-radius:5px; transition:background .15s; }
.hnav-btn:hover { background:var(--rose-dark); }
.arrow-anim { display:inline-block; animation:arrowPulse 1.4s ease-in-out infinite; }
@keyframes arrowPulse { 0%,100%{transform:translateX(0);opacity:1} 50%{transform:translateX(5px);opacity:.6} }

/* ═══════════════════════════════════
   HERO — 2 columns: text + big chat
═══════════════════════════════════ */
.hero { border-bottom:1px solid var(--border); background:var(--white); }
.hero-inner { max-width:var(--w); margin:0 auto; padding:52px 24px 48px; display:grid; grid-template-columns:1fr 420px; gap:48px; align-items:center; }

.hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--rose-pale); border:1px solid #f0c8d0; border-radius:20px; padding:5px 14px; font-size:12px; font-weight:700; color:var(--rose); letter-spacing:.3px; margin-bottom:20px; }
.hero-badge::before { content:'●'; font-size:8px; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero h1 { font-family:'PT Serif',serif; font-size:clamp(34px,4vw,56px); font-weight:700; color:var(--black); line-height:1.08; letter-spacing:-.5px; margin-bottom:18px; animation:fadeUp .5s ease both; }
.hero h1 em { font-style:italic; color:var(--rose); }
.hero-sub { font-size:17px; color:var(--gray); line-height:1.75; margin-bottom:28px; animation:fadeUp .5s .1s ease both; }
.hero-cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:36px; animation:fadeUp .5s .2s ease both; }
.btn-hero { background:var(--rose); color:#fff; padding:15px 36px; font-size:16px; font-weight:700; border-radius:6px; display:inline-block; transition:background .15s,transform .1s; box-shadow:0 4px 20px rgba(192,54,78,.25); }
.btn-hero:hover { background:var(--rose-dark); transform:translateY(-1px); }
.hero-note { font-size:13px; color:#666; }
.hero-note strong { color:var(--black); }

.hero-proof { display:flex; gap:32px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--border); }
.proof-item { display:flex; flex-direction:column; }
.proof-num { font-family:'PT Sans',sans-serif; font-size:20px; font-weight:700; line-height:1; margin-bottom:3px; font-variant-numeric:tabular-nums; }
.proof-lbl { font-size:11px; color:#666; text-transform:uppercase; letter-spacing:.5px; }

/* ── HERO CHAT (big) ── */
.hero-chat { border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.1); }
.hc-head { background:var(--black); padding:9px 13px; display:flex; align-items:center; gap:8px; }
.hc-av { width:28px; height:28px; border-radius:50%; background:var(--rose); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.hc-info { flex:1; }
.hc-name { font-size:12px; font-weight:700; color:#fff; font-family:'PT Serif',serif; }
.hc-name span { color:var(--rose); }
.hc-status { font-size:11px; color:#6ee7a0; display:flex; align-items:center; gap:4px; }
.hc-status::before { content:''; width:6px; height:6px; background:#6ee7a0; border-radius:50%; animation:blink 2s infinite; }
.hc-msgs { padding:10px 12px; background:#f8f8f8; height:210px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.hm { max-width:82%; padding:7px 11px; font-size:12px; line-height:1.45; }
.hm-in  { background:#fff; border-radius:4px 16px 16px 16px; align-self:flex-start; box-shadow:0 1px 4px rgba(0,0,0,.07); color:var(--black); }
.hm-out { background:var(--rose); color:#fff; border-radius:16px 4px 16px 16px; align-self:flex-end; }
.hm { opacity:0; transform:translateY(8px); transition:opacity .4s,transform .4s; }
.hm.vis { opacity:1; transform:translateY(0); }
.hc-typing { display:flex; gap:5px; padding:10px 14px; background:#fff; border-radius:4px 16px 16px 16px; align-self:flex-start; width:fit-content; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.hc-typing span { width:8px; height:8px; background:#ccc; border-radius:50%; animation:typeBounce 1.2s infinite; }
.hc-typing span:nth-child(2){animation-delay:.2s} .hc-typing span:nth-child(3){animation-delay:.4s}
@keyframes typeBounce{0%,60%,100%{transform:translateY(0);background:#ccc}30%{transform:translateY(-6px);background:var(--rose)}}
.hc-input { display:flex; border-top:1px solid var(--border); background:#fff; }
.hc-input input { flex:1; border:none; padding:9px 12px; font-size:12px; font-family:'PT Sans',sans-serif; outline:none; color:#bbb; }
.hc-input button { background:var(--rose); color:#fff; border:none; padding:9px 14px; font-size:14px; cursor:pointer; }

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

/* ═══════════════════════════════════
   HOW IT WORKS — 3 cols
═══════════════════════════════════ */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step-card { background:var(--bg); border-radius:10px; padding:24px 20px; position:relative; }
.step-num { width:40px; height:40px; background:var(--rose); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'PT Serif',serif; font-size:18px; font-weight:700; margin-bottom:14px; }
.step-card .step-title { font-family:'PT Serif',serif; font-size:17px; font-weight:700; margin-bottom:8px; }
.step-card p { font-size:14px; color:var(--gray); line-height:1.7; }

/* ═══════════════════════════════════
   DEMO CHAT + INFO — 2 cols
═══════════════════════════════════ */
.demo-row { display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:center; }
.demo-text h2 { font-family:'PT Serif',serif; font-size:30px; font-weight:700; line-height:1.2; margin-bottom:14px; }
.demo-text h2 em { font-style:italic; color:var(--rose); }
.demo-text p { font-size:15px; color:var(--gray); line-height:1.8; margin-bottom:20px; }
.demo-points { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.demo-point { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--gray); line-height:1.55; }
.demo-point::before { content:'✓'; color:var(--rose); font-weight:700; font-size:15px; flex-shrink:0; margin-top:1px; }

.demo-chat-wrap { border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.08); }
.dc-head { background:var(--black); padding:12px 16px; display:flex; align-items:center; gap:10px; }
.dc-av { width:32px; height:32px; border-radius:50%; background:var(--rose); display:flex; align-items:center; justify-content:center; font-size:16px; }
.dc-name { font-family:'PT Serif',serif; font-size:14px; font-weight:700; color:#fff; flex:1; }
.dc-name span { color:var(--rose); }
.dc-online { font-size:11px; color:#6ee7a0; display:flex; align-items:center; gap:4px; }
.dc-online::before { content:''; width:6px; height:6px; background:#6ee7a0; border-radius:50%; animation:blink 2s infinite; }
.dc-msgs { padding:14px; background:#f8f8f8; display:flex; flex-direction:column; gap:9px; min-height:220px; }
.dm { max-width:84%; padding:9px 13px; font-size:13px; line-height:1.55; }
.dm-in  { background:#fff; border-radius:3px 14px 14px 14px; align-self:flex-start; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.dm-out { background:var(--rose); color:#fff; border-radius:14px 3px 14px 14px; align-self:flex-end; }
.dm { opacity:0; transform:translateY(6px); transition:opacity .4s,transform .4s; }
.dm.vis { opacity:1; transform:translateY(0); }
.dc-input { display:flex; border-top:1px solid var(--border); background:#fff; }
.dc-input span { flex:1; padding:11px 14px; font-size:13px; color:#666; }
.dc-input button { background:var(--rose); color:#fff; border:none; padding:11px 16px; font-size:14px; cursor:pointer; }

/* ═══════════════════════════════════
   FEATURES — 3 cols with heart bg
═══════════════════════════════════ */
.features-section-wrap { position:relative; overflow:hidden; }
.features-section-wrap::before { content:'♥'; position:absolute; right:-60px; top:50%; transform:translateY(-50%); font-size:500px; line-height:1; color:rgba(192,54,78,.045); pointer-events:none; user-select:none; font-family:serif; z-index:0; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; z-index:1; }
.feat-card { border:1px solid var(--border); border-radius:10px; padding:22px 18px; transition:border-color .15s,box-shadow .15s; }
.feat-card:hover { border-color:var(--rose); box-shadow:0 4px 16px rgba(192,54,78,.07); }
.feat-icon { font-size:30px; margin-bottom:12px; display:block; }
.feat-title { font-family:'PT Serif',serif; font-size:16px; font-weight:700; margin-bottom:6px; }
.feat-desc { font-size:13px; color:var(--gray); line-height:1.65; }

/* ═══════════════════════════════════
   PRICING — 2 cols: card + chat
═══════════════════════════════════ */
.pricing-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.pricing-card { border:2px solid var(--rose); border-radius:10px; padding:20px 22px; background:var(--white); position:relative; overflow:hidden; }
.pricing-card::before { content:'✦'; position:absolute; right:-8px; top:-16px; font-size:140px; color:var(--rose-pale); line-height:1; pointer-events:none; }
.pricing-badge { display:inline-block; background:var(--rose); color:#fff; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:3px; margin-bottom:8px; }
.pricing-card h2 { font-family:'PT Serif',serif; font-size:20px; font-weight:700; line-height:1.2; margin-bottom:5px; }
.pricing-card h2 em { font-style:italic; color:var(--rose); }
.pricing-card > p { font-size:12px; color:var(--gray); margin-bottom:10px; line-height:1.6; }
.price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.price { font-family:'PT Sans',sans-serif; font-size:36px; font-weight:700; font-variant-numeric:tabular-nums; }
.price-per { font-size:14px; color:#666; }
.price-old { font-size:13px; color:#666; text-decoration:line-through; }
.feat-list { list-style:none; margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
.feat-list li { font-size:12px; color:var(--gray); display:flex; gap:8px; line-height:1.45; }
.feat-list li::before { content:'✓'; color:var(--rose); font-weight:700; flex-shrink:0; margin-top:1px; }
.btn-big { display:block; width:100%; text-align:center; background:var(--rose); color:#fff; padding:11px; font-size:14px; font-weight:700; border-radius:6px; transition:background .15s; box-shadow:0 3px 12px rgba(192,54,78,.2); }
.btn-big:hover { background:var(--rose-dark); }
.pricing-note { text-align:center; font-size:11px; color:var(--lgray); margin-top:6px; }

.pricing-side { display:flex; flex-direction:column; gap:14px; }
.pricing-chat-wrap { border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.07); }
.pricing-why { background:var(--bg); border-radius:10px; padding:16px 18px; }
.pricing-why h3 { font-family:'PT Serif',serif; font-size:15px; font-weight:700; margin-bottom:10px; }
.why-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; font-size:13px; color:var(--gray); line-height:1.5; }
.why-item:last-child { margin-bottom:0; }
.why-icon { font-size:16px; flex-shrink:0; }

/* ═══════════════════════════════════
   REVIEWS — 3 cols
═══════════════════════════════════ */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card { background:var(--bg); border-radius:10px; padding:20px; border-left:3px solid var(--rose); }
.review-text { font-size:14px; color:var(--black); line-height:1.7; margin-bottom:12px; font-style:italic; }
.review-author { display:flex; align-items:center; gap:8px; }
.review-av { width:30px; height:30px; border-radius:50%; background:var(--rose); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.review-name { font-size:13px; font-weight:700; }
.review-meta { font-size:11px; color:#666; }
.review-stars { margin-left:auto; color:#f5a623; font-size:13px; }

/* ═══════════════════════════════════
   FAQ — 2 cols
═══════════════════════════════════ */
.faq-grid { display:flex; flex-direction:column; gap:10px; max-width:640px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.faq-q { width:100%; text-align:left; padding:16px 18px; font-size:15px; font-weight:700; color:var(--black); background:var(--white); display:flex; align-items:center; justify-content:space-between; gap:12px; transition:background .15s; }
.faq-q:hover { background:var(--bg); }
.faq-arrow { font-size:18px; color:var(--lgray); transition:transform .25s; flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0 18px 16px; font-size:14px; color:var(--gray); line-height:1.75; }
.faq-item.open .faq-a { display:block; }

/* ═══════════════════════════════════
   SECTION HELPERS
═══════════════════════════════════ */
.section-inner { max-width:var(--w); margin:0 auto; padding:48px 24px; }
.sec-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--rose); margin-bottom:10px; }
.sec-title { font-family:'PT Serif',serif; font-size:28px; font-weight:700; margin-bottom:28px; line-height:1.2; }

/* ═══════════════════════════════════
   POPULAR TOPICS — table
═══════════════════════════════════ */
.topics-table { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.topics-row { display:grid; grid-template-columns:160px 1fr; border-bottom:1px solid var(--border); }
.topics-row:last-child { border-bottom:none; }
.topics-cat { padding:14px 18px; border-right:1px solid var(--border); display:flex; align-items:flex-start; gap:10px; background:var(--bg); }
.topics-cat-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.topics-cat-name { font-family:'PT Serif',serif; font-size:14px; font-weight:700; color:var(--black); display:block; margin-bottom:2px; }
.topics-cat-count { font-size:11px; color:#666; }
.topics-links { padding:14px 18px; display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; }
.topic-pill { display:inline-block; font-size:13px; color:var(--gray); padding:5px 12px; border:1px solid var(--border); border-radius:4px; transition:color .12s,border-color .12s,background .12s; }
.topic-pill:hover { color:var(--rose); border-color:var(--rose); background:var(--rose-pale); }

/* ═══════════════════════════════════
   FINAL CTA
═══════════════════════════════════ */

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer { background:var(--black); }
.footer-inner { max-width:var(--w); margin:0 auto; padding:40px 24px 28px; }
.footer-top { display:grid; grid-template-columns:240px 1fr; gap:48px; margin-bottom:32px; }
.f-logo { font-family:'PT Serif',serif; font-size:26px; font-weight:700; color:#fff; display:block; margin-bottom:10px; }
.f-logo-dot { color:var(--rose); }
.f-desc { font-size:14px; color:#888; line-height:1.7; }
.f-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.f-nav-col .f-nav-title { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.f-nav-col a { display:block; font-size:14px; color:#999; padding:3px 0; transition:color .12s; }
.f-nav-col a:hover { color:#fff; }
.footer-disclaimer { border-top:1px solid #2a2a2a; padding:20px 0; margin-bottom:20px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.footer-disclaimer p { font-size:12px; color:#666; line-height:1.75; }
.footer-disclaimer strong { color:#999; }
.footer-bottom { border-top:1px solid #2a2a2a; padding-top:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:13px; color:#555; }
.footer-bottom-links { display:flex; flex-wrap:wrap; gap:16px; }
.footer-bottom-links a { font-size:13px; color:#555; transition:color .12s; }
.footer-bottom-links a:hover { color:#aaa; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-chat { display:none; }
  .demo-row { grid-template-columns:1fr; }
  .pricing-row { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .f-nav { grid-template-columns:1fr 1fr; }
  .footer-disclaimer { grid-template-columns:1fr; }
}
@media(max-width:560px) {
  .features-grid { grid-template-columns:1fr; }
  .reviews-grid { grid-template-columns:1fr; }
  .topics-row { grid-template-columns:1fr; }
  .topics-cat { border-right:none; border-bottom:1px solid var(--border); }
}