/* Home page: motion and marketing sections. Everything here respects prefers-reduced-motion (see the end). */
body.home { overflow-x:hidden; }
.glow { position:fixed; inset:-20% -10% auto -10%; height:90vh; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 20% 30%, rgba(245,181,63,.20), transparent 70%), radial-gradient(35% 45% at 80% 20%, rgba(45,212,191,.16), transparent 70%);
  animation:drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate3d(4%, 6%, 0) scale(1.08); } }

.nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); background:rgba(15,23,32,.72); border-bottom:1px solid rgba(255,255,255,.06); }
.nav .in { max-width:1040px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nav .links { display:flex; align-items:center; gap:8px; }
.nav a.plain { color:var(--muted); text-decoration:none; padding:6px 8px; font-size:15px; }
.nav a.plain:hover { color:var(--text); }
@media (max-width:520px) { .nav a.plain { display:none; } }

.hero2 { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; padding:48px 0 28px; }
@media (max-width:860px) { .hero2 { grid-template-columns:1fr; padding-top:28px; } }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--accent); background:rgba(245,181,63,.1); border:1px solid rgba(245,181,63,.3); padding:5px 12px; border-radius:999px; }
.eyebrow i { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow:0 0 0 0 rgba(74,222,128,0); } }
.hero2 h1 { font-size:clamp(34px,5.6vw,58px); line-height:1.05; margin:16px 0 14px; letter-spacing:-.5px; }
.hero2 h1 em { font-style:normal; background:linear-gradient(90deg, var(--accent), #ffd98a, var(--accent2)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
@keyframes shine { to { background-position:200% 0; } }
.hero2 p.lead { font-size:18px; color:var(--muted); max-width:560px; margin:0; }
.cta-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.btn.big { padding:14px 22px; font-size:16px; border-radius:12px; }
.btn.pulse { position:relative; box-shadow:0 8px 30px rgba(245,181,63,.28); transition:transform .15s ease, box-shadow .15s ease; }
.btn.pulse:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(245,181,63,.4); }
.ticks { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; color:var(--muted); font-size:14px; }
.ticks span::before { content:"✓ "; color:var(--ok); font-weight:800; }

/* The phone demo */
.phone { position:relative; width:min(340px, 100%); margin:0 auto; background:#0b121a; border:1px solid #2a3b50; border-radius:34px; padding:14px; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.02); animation:float 6s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-8px); } }
.phone .bar { display:flex; align-items:center; gap:10px; padding:8px 10px 12px; border-bottom:1px solid #1e2c3d; }
.phone .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); display:grid; place-items:center; font-weight:800; color:#0f1720; }
.phone .who b { display:block; font-size:14px; } .phone .who span { font-size:12px; color:var(--ok); }
.wave { margin-left:auto; display:flex; gap:3px; align-items:center; height:22px; }
.wave i { width:3px; background:var(--accent2); border-radius:2px; height:30%; animation:wave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay:.1s; } .wave i:nth-child(3) { animation-delay:.2s; } .wave i:nth-child(4) { animation-delay:.3s; } .wave i:nth-child(5) { animation-delay:.4s; }
@keyframes wave { 50% { height:100%; } }
.screen { height:360px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:12px 6px 62px; }
.bub { flex:0 0 auto; max-width:86%; padding:9px 12px; border-radius:14px; font-size:14px; line-height:1.35; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .35s ease, transform .35s ease; }
.bub.in { opacity:1; transform:none; }
.bub.b-sec { background:#1e2c3d; align-self:flex-start; border-bottom-left-radius:4px; }
.bub.b-cal { background:#3b2f10; align-self:flex-end; border-bottom-right-radius:4px; }
.bub small { display:block; font-size:11px; color:var(--muted); margin-bottom:2px; }
.sms { position:absolute; left:-18px; right:-18px; bottom:-26px; background:#f4f6f8; color:#101820; border-radius:16px; padding:12px 14px; font-size:13.5px; line-height:1.35; box-shadow:0 18px 50px rgba(0,0,0,.5); opacity:0; transform:translateY(24px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.2); }
.sms.in { opacity:1; transform:none; }
.sms b { display:flex; justify-content:space-between; font-size:12px; color:#5b6b7b; margin-bottom:3px; }
@media (max-width:860px) { .sms { left:0; right:0; } .phone { margin-bottom:34px; } }

/* Strip of facts */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:44px 0 8px; }
@media (max-width:700px) { .facts { grid-template-columns:repeat(2,1fr); } }
.fact { text-align:center; padding:16px 8px; border:1px solid #243244; border-radius:var(--radius); background:rgba(23,34,48,.6); }
.fact b { display:block; font-size:28px; color:var(--accent); } .fact > span { font-size:13px; color:var(--muted); }

.sec { margin-top:64px; }
.sec h2 { font-size:clamp(26px,3.6vw,36px); margin:0 0 8px; letter-spacing:-.3px; }
.sec > p.sub { color:var(--muted); margin:0 0 20px; max-width:640px; }

/* Three steps with the number being assigned */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:s; }
@media (max-width:800px) { .steps3 { grid-template-columns:1fr; } }
.steps3 .card { position:relative; padding-top:46px; }
.steps3 .card::before { counter-increment:s; content:counter(s); position:absolute; top:14px; left:18px; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#1a1200; font-weight:800; display:grid; place-items:center; font-size:14px; }
.numroll { font:700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--accent2); margin-top:10px; letter-spacing:1px; min-height:28px; }
.codechip { display:inline-block; margin-top:10px; font:700 18px ui-monospace, Menlo, monospace; background:#243244; padding:6px 12px; border-radius:10px; }

.feat .card { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feat .card:hover { transform:translateY(-4px); border-color:#3a5270; box-shadow:0 14px 40px rgba(0,0,0,.35); }
.feat .ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:rgba(245,181,63,.12); margin-bottom:10px; }

.langs { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hello { font-size:clamp(30px,5vw,48px); font-weight:800; min-width:220px; min-height:1.3em; transition:opacity .35s ease, transform .35s ease; }
.hello.out { opacity:0; transform:translateY(8px); }

.price { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:700px) { .price { grid-template-columns:1fr; } }
.price .card { position:relative; transition:transform .2s ease, box-shadow .2s ease; }
.price .card:hover { transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,0,0,.4); }
.price .amt { font-size:44px; font-weight:800; color:var(--text); margin:6px 0 2px; } .price .amt span { font-size:15px; font-weight:400; color:var(--muted); }
.price ul { list-style:none; padding:0; margin:12px 0 16px; color:var(--muted); } .price li { margin:6px 0; } .price li::before { content:"✓ "; color:var(--ok); font-weight:800; }
.price .best { border-color:var(--accent); background:linear-gradient(180deg, rgba(245,181,63,.09), transparent 55%), var(--panel); }
.tag { position:absolute; top:-11px; right:16px; background:var(--accent); color:#1a1200; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; }

.faq details { border:1px solid #243244; border-radius:12px; padding:14px 16px; background:var(--panel); margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:10px; }
.faq summary::after { content:"+"; color:var(--accent); font-size:20px; line-height:1; transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); margin:10px 0 0; }

.band { margin-top:64px; text-align:center; padding:44px 20px; border-radius:22px; border:1px solid rgba(245,181,63,.35);
  background:radial-gradient(60% 120% at 50% 0%, rgba(245,181,63,.18), transparent 70%), var(--panel); }
.band h2 { font-size:clamp(26px,4vw,40px); margin:0 0 8px; } .band p { color:var(--muted); margin:0 0 20px; }

/* Scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.rv.on { opacity:1; transform:none; }
.rv.d1 { transition-delay:.08s; } .rv.d2 { transition-delay:.16s; } .rv.d3 { transition-delay:.24s; } .rv.d4 { transition-delay:.32s; }

@media (prefers-reduced-motion: reduce) {
  .glow, .phone, .wave i, .eyebrow i, .hero2 h1 em, .dots::after { animation:none !important; }
  .rv, .bub, .sms, .hello { transition:none !important; opacity:1 !important; transform:none !important; }
}