/* Apple-like minimalist look */
:root{
  --bg:#0b0c10;
  --paper:#0f1116;
  --ink:#0f172a;
  --tx:#0a0a0a;
  --fg:#ffffff;
  --muted:#a3b3c4;
  --brand:#0b3da8;
  --accent:#2f86ff;
  --radius:24px;
  --shadow:0 20px 60px rgba(0,0,0,.25);
}
.fa-hero,.fa-panels,.fa-split,.fa-chat,.fa-cta-final{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
.container{width:min(1200px,92%);margin:0 auto}

/* HERO */
.fa-hero{position:relative; padding:120px 0 30px; background:linear-gradient(180deg,#0a0c11,#0b1220); color:#fff; overflow:hidden}
.fa-hero-inner{width:min(1100px,92%); margin:0 auto; text-align:center}
.fa-hero .eyebrow{letter-spacing:.12em; text-transform:uppercase; color:#a6b7d6; font-size:12px; margin-bottom:14px}
.fa-hero h1{font-size:clamp(42px,7vw,76px); line-height:1.04; letter-spacing:-.02em; margin:0 0 10px; font-weight:800}
.fa-hero h1 em{background:linear-gradient(90deg,#9ac6ff,#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal}
.fa-hero .sub{color:#c9d6ea; font-size:clamp(16px,2vw,18px); margin:0 auto 22px; max-width:760px}
.fa-cta .btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; border:1px solid transparent; margin:0 6px}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.ghost{background:transparent; border-color:#2a3956; color:#cfe1ff}
.btn.primary:hover{transform:translateY(-1px)}
.device-stage{margin:36px auto 0; perspective:1200px}
.device-mockup{border-radius:20px; overflow:hidden; border:1px solid #1b2a4a; background:#05070b; box-shadow:0 30px 60px rgba(0,0,0,.35); transform:rotateX(0deg) translateZ(0)}
.device-mockup iframe{width:100%;height:520px;border:0;display:block}
.device-mockup .placeholder{position:relative; height:520px; display:grid; place-items:center; color:#a6b7d6}
.device-mockup .placeholder .glow{position:absolute; inset:-30%; background:radial-gradient(600px 300px at 50% 20%, #2f86ff33, transparent 60%); filter:blur(20px)}

/* PANELS */
.fa-panels{background:#0b1220; color:#d9e7ff; padding:56px 0}
.fa-panels .container{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.fa-panels .panel{background:#0f172a; border:1px solid #1e2b49; border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.2)}
.fa-panels h3{margin:0 0 6px; color:#fff}

/* SPLIT */
.fa-split{background:#0f1116; color:#e6eefc; padding:70px 0}
.fa-split .split{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center}
@media (max-width:900px){ .fa-split .split{grid-template-columns:1fr; gap:18px} }
.fa-split .eyebrow{color:#8aa7d8; text-transform:uppercase; letter-spacing:.12em; font-size:12px}
.fa-split h2{font-size:clamp(28px,4.5vw,42px); margin:4px 0 10px; color:#fff}
.fa-split .bullets{margin:0 0 14px 16px}
.fa-split .bullets li{margin:6px 0}
.fa-split .glass{border-radius:20px; padding:18px; backdrop-filter: blur(10px); background:linear-gradient(180deg,#101522cc,#0a0c12bb); border:1px solid #243250; box-shadow: var(--shadow); display:flex; gap:14px; justify-content:space-between}
.fa-split .glass .stat{background:#0e1628; border:1px solid #223256; border-radius:14px; padding:14px; text-align:center; flex:1}
.fa-split .glass .stat b{font-size:24px; display:block; color:#fff}
.fa-split .glass .stat span{color:#a6b7d6; font-size:12px; text-transform:uppercase; letter-spacing:.1em}

/* CHAT */
.fa-chat{background:#0b1220; color:#e6eefc; padding:70px 0}
.chat-head h2{margin:0 0 4px; font-size:clamp(28px,4.5vw,40px); color:#fff}
.chat-head p{margin:0 0 14px; color:#c9d6ea}
.chat-widget{background:#0f172a; border:1px solid #1e2b49; border-radius:18px; padding:14px; box-shadow:0 16px 40px rgba(0,0,0,.28)}
.chat-log{min-height:200px; max-height:380px; overflow:auto; border-radius:12px; background:#0b1220; padding:12px; border:1px dashed #2a3956}
.bubble{max-width:78%; padding:10px 12px; border-radius:16px; margin:8px 0; line-height:1.35}
.bubble.user{margin-left:auto; background:#1e2b49; color:#e6eefc}
.bubble.bot{background:#141d33; color:#e0edff}
.bubble.typing{opacity:.7; font-style:italic}
.chat-form{display:flex; gap:8px; margin-top:10px}
.chat-form input{flex:1; padding:12px; border-radius:12px; border:1px solid #2a3956; background:#0b1220; color:#e6eefc}
.chat-form .send{padding:12px 16px; border-radius:12px; border:0; background:var(--accent); color:#fff}
.hint{display:block; margin-top:6px; color:#8aa7d8}

/* CTA FINAL */
.fa-cta-final{background:linear-gradient(180deg,#0f1116,#0b1220); color:#fff; padding:72px 0; text-align:center}
.fa-cta-final h3{font-size:clamp(24px,4vw,36px); margin:0 0 8px}
.fa-cta-final p{color:#c9d6ea; margin:0 0 12px}

/* Reveal on scroll */
[data-animate]{opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.65,.2,1), opacity .6s}
[data-animate].in{opacity:1; transform:none}
[data-animate="left"]{transform:translateX(-18px)}
[data-animate="right"]{transform:translateX(18px)}

/* Parallax tweak */
[data-parallax]{will-change:transform}