/* ===================================================
   PULSE CHAT — Landing Page
   =================================================== */

#page-landing { flex-direction:column; background:var(--gradient-bg); overflow-y:auto; overflow-x:hidden; }

.landing-bg { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.landing-bg .orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15; animation:orbFloat 20s ease-in-out infinite; }
.landing-bg .orb:nth-child(1) { width:500px; height:500px; background:var(--accent); top:-10%; left:-5%; }
.landing-bg .orb:nth-child(2) { width:400px; height:400px; background:#a855f7; bottom:10%; right:-10%; animation-delay:-7s; }
.landing-bg .orb:nth-child(3) { width:300px; height:300px; background:#06b6d4; top:50%; left:40%; animation-delay:-14s; }

.landing-nav { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:16px 40px; background:var(--glass); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); z-index:50; }
.landing-logo { font-size:26px; font-weight:800; letter-spacing:-1px; background:var(--gradient-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.landing-nav-links { display:flex; align-items:center; gap:32px; }
.landing-nav-links a { font-size:15px; font-weight:500; color:var(--text-2); transition:color 0.2s; }
.landing-nav-links a:hover { color:var(--text-0); }

.landing-hero { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:100px 24px 60px; }
.landing-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; background:var(--accent-soft); border:1px solid rgba(56,189,248,0.15); border-radius:var(--radius-full); font-size:13px; font-weight:500; color:var(--accent); margin-bottom:24px; animation:fadeUp 0.6s ease both; }
.landing-h1 { font-size:clamp(40px,7vw,72px); font-weight:800; line-height:1.05; letter-spacing:-2px; margin-bottom:20px; animation:fadeUp 0.6s ease 0.1s both; }
.landing-h1 .gradient { background:linear-gradient(135deg,var(--accent),#a855f7,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.landing-sub { font-size:18px; color:var(--text-2); max-width:520px; line-height:1.6; margin-bottom:40px; animation:fadeUp 0.6s ease 0.2s both; }
.landing-cta { display:flex; gap:16px; animation:fadeUp 0.6s ease 0.3s both; }

/* Preview */
.landing-preview { position:relative; z-index:1; max-width:900px; margin:40px auto 0; padding:0 24px; animation:fadeUp 0.8s ease 0.4s both; }
.preview-frame { background:var(--bg-1); border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--shadow),var(--accent-glow); overflow:hidden; height:400px; display:flex; }
.preview-sidebar { width:260px; border-right:1px solid var(--divider); display:flex; flex-direction:column; flex-shrink:0; }
.preview-sidebar-h { height:48px; display:flex; align-items:center; padding:0 16px; font-weight:600; font-size:16px; border-bottom:1px solid var(--divider); color:var(--text-2); }
.preview-chat-item { display:flex; align-items:center; gap:10px; padding:10px 16px; }
.preview-chat-item.active { background:var(--bg-active); }
.preview-chat-item.active .preview-chat-name { color:#fff; }
.preview-chat-item.active .preview-chat-msg { color:rgba(255,255,255,0.7); }
.preview-dot { width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:16px; }
.preview-chat-lines { flex:1; min-width:0; }
.preview-chat-name { font-size:14px; font-weight:600; margin-bottom:2px; }
.preview-chat-msg { font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-main { flex:1; display:flex; flex-direction:column; }
.preview-main-h { height:48px; display:flex; align-items:center; padding:0 16px; gap:10px; border-bottom:1px solid var(--divider); font-weight:600; }
.preview-main-h .status { font-size:12px; color:var(--online); font-weight:400; }
.preview-msgs { flex:1; padding:12px 16px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; overflow:hidden; }
.preview-bubble { max-width:70%; padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.4; }
.preview-bubble.other { background:var(--bubble-other); border:1px solid var(--divider); align-self:flex-start; }
.preview-bubble.own { background:var(--bubble-own); color:var(--text-0); align-self:flex-end; }
.preview-input-bar { height:48px; display:flex; align-items:center; padding:0 12px; gap:8px; border-top:1px solid var(--divider); }
.preview-input-fake { flex:1; height:32px; background:var(--input-bg); border-radius:16px; padding:0 12px; font-size:13px; color:var(--text-2); display:flex; align-items:center; }

/* Features grid */
.landing-features { position:relative; z-index:1; max-width:1000px; margin:80px auto; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:32px 24px; transition:transform 0.2s,box-shadow 0.2s; backdrop-filter:blur(10px); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.feature-icon { width:48px; height:48px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--accent); margin-bottom:16px; }
.feature-title { font-size:17px; font-weight:700; margin-bottom:8px; }
.feature-desc { font-size:14px; color:var(--text-2); line-height:1.5; }

.landing-footer { position:relative; z-index:1; text-align:center; padding:40px 24px; color:var(--text-2); font-size:14px; border-top:1px solid var(--divider); }

@media (max-width: 768px) {
  .landing-nav { padding:10px 12px; }
  .landing-nav-links a.hide-mobile { display:none; }
  .landing-nav-links { gap:12px; }
  .landing-logo { font-size:22px; }
  .landing-hero { padding:40px 16px 30px; }
  .landing-h1 { letter-spacing:-1px; }
  .landing-sub { font-size:15px; margin-bottom:24px; }
  .landing-features { grid-template-columns:1fr; gap:12px; padding:0 16px; margin:40px auto; }
  .feature-card { padding:20px 16px; }
  .preview-frame { height:250px; }
  .preview-sidebar { width:160px; }
  .landing-cta { flex-direction:column; align-items:stretch; }
  .landing-cta .btn-primary, .landing-cta .btn-outline { text-align:center; }
  .landing-preview { padding:0 16px; }
  .landing-footer { padding:24px 16px; }
}
@media (max-width: 480px) {
  .preview-sidebar { display:none; }
  .landing-hero { padding:30px 12px 20px; }
  .landing-badge { font-size:12px; padding:4px 12px; }
}