:root {
  --bg:#fffaf6; --bg2:#fff1e8; --fg:#1d1a22; --muted:#625b6b; --card:#ffffff; --line:#f0e1d6;
  --pink:#e8456b; --coral:#f26a4f; --orange:#f58a3a; --yellow:#f7b733;
  --grad:linear-gradient(135deg,var(--pink),var(--coral) 45%,var(--orange) 80%,var(--yellow));
  --accent:#d8345c; --accent-fg:#fff; --shadow:0 18px 50px -20px rgba(216,52,92,.35);
  --radius:20px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#120f16; --bg2:#1a1520; --fg:#f6f1f4; --muted:#b2a8b4; --card:#1c1722; --line:#2c2433; --accent:#ff7a96; --accent-fg:#1a0a10; --shadow:0 18px 50px -20px rgba(0,0,0,.7); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
img { max-width:100%; display:block; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

#announcement { background:var(--grad); color:#fff; text-align:center; padding:9px 16px; font-size:14px; font-weight:600; }

header.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; gap:18px; min-height:64px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:700; font-size:18px; }
.brand img { width:36px; height:36px; border-radius:10px; }
header.top nav { margin-left:auto; display:flex; align-items:center; gap:6px; }
header.top nav a { color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:500; }
header.top nav a:hover { color:var(--fg); background:var(--bg2); }
header.top nav a.nav-cta { background:var(--accent); color:var(--accent-fg); font-weight:600; }
header.top nav a.nav-cta:hover { filter:brightness(1.08); background:var(--accent); color:var(--accent-fg); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--grad); color:#fff; padding:14px 26px; border-radius:14px; font-weight:700; text-decoration:none; border:0; font-size:16px; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s, filter .15s; min-height:48px; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn:disabled { opacity:.6; transform:none; }
.btn.ghost { background:transparent; color:var(--fg); border:1.5px solid var(--line); box-shadow:none; }
.btn[hidden] { display:none; }

.hero { padding:72px 0 56px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:-20% -10% auto auto; width:640px; height:640px; background:radial-gradient(closest-side,rgba(245,138,58,.28),transparent); pointer-events:none; }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; }
.pill { display:inline-block; background:var(--bg2); border:1px solid var(--line); color:var(--accent); font-weight:600; font-size:14px; padding:6px 14px; border-radius:999px; margin:0 0 18px; }
.hero h1 { font-size:clamp(34px,5.6vw,58px); line-height:1.08; letter-spacing:-.02em; margin:0 0 18px; }
.hero h1 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { color:var(--muted); font-size:19px; max-width:50ch; margin:0 0 28px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.trust { display:flex; gap:20px; flex-wrap:wrap; margin:28px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14px; }
.trust li::before { content:"✓ "; color:var(--accent); font-weight:700; }

.phone { width:min(300px,100%); margin:0 auto; background:#15101a; border-radius:42px; padding:12px; box-shadow:var(--shadow), 0 0 0 2px rgba(255,255,255,.06) inset; transform:rotate(3deg); }
.screen { background:var(--bg); border-radius:32px; padding:18px 16px 22px; min-height:440px; }
.screen .bar { height:6px; width:80px; background:var(--line); border-radius:6px; margin:0 auto 18px; }
.screen h4 { margin:0 0 4px; font-size:15px; }
.screen small { color:var(--muted); }
.notice { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px; font-size:13.5px; line-height:1.5; }
.notice b { display:block; margin-bottom:6px; }
.notice .hi { color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.send { margin-top:14px; background:#25d366; color:#06330f; text-align:center; font-weight:700; padding:11px; border-radius:12px; font-size:14px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chips span { background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--muted); }

section.block { padding:56px 0; }
.eyebrow { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }
h2.title { font-size:clamp(26px,4vw,38px); line-height:1.15; letter-spacing:-.01em; margin:0 0 12px; }
p.sub { color:var(--muted); max-width:58ch; margin:0 0 32px; font-size:17px; }

.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .2s, box-shadow .2s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.card h3 { margin:14px 0 6px; font-size:18px; }
.card p { margin:0; color:var(--muted); }
.ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--grad); color:#fff; }
.ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card:nth-child(3n+2) .ico { background:linear-gradient(135deg,#7c5cff,#3ea8ff); }
.card:nth-child(3n+3) .ico { background:linear-gradient(135deg,#11b981,#7bd88f); }

.steps { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:s; }
.step { position:relative; background:var(--bg2); border-radius:var(--radius); padding:26px 24px 24px; counter-increment:s; }
.step::before { content:counter(s); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--grad); color:#fff; font-weight:800; margin-bottom:12px; }
.step h3 { margin:0 0 6px; font-size:18px; }
.step p { margin:0; color:var(--muted); }

.band { background:var(--grad); color:#fff; border-radius:28px; padding:44px 28px; text-align:center; margin:24px 0 56px; box-shadow:var(--shadow); }
.band h2 { margin:0 0 10px; font-size:clamp(24px,4vw,34px); }
.band p { margin:0 0 22px; opacity:.92; }
.band .btn { background:#fff; color:#b32447; box-shadow:none; }

main.page { padding:48px 0 72px; max-width:760px; }
main.page h1 { font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 24px; }
main.page h2 { font-size:21px; margin:32px 0 8px; }
main.page p { white-space:pre-wrap; margin:0 0 14px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
form label { display:block; font-weight:600; margin:16px 0 6px; }
form input, form textarea { width:100%; font:inherit; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; }
form input:focus, form textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
form .hp { position:absolute; left:-9999px; }
#form-status { margin-left:14px; color:var(--muted); }

footer { border-top:1px solid var(--line); background:var(--bg2); color:var(--muted); font-size:14px; padding:28px 0; }
footer .wrap { display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; }
footer .grow { flex:1 1 260px; }
footer a { color:var(--muted); }
footer a:hover { color:var(--accent); }

@media (max-width:820px) {
  .hero { padding:44px 0 32px; }
  .hero .wrap { grid-template-columns:1fr; gap:36px; }
  .phone { transform:none; }
  header.top nav a:not(.nav-cta) { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- motion + illustration layer ---------- */
@keyframes float { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(30px,-24px) scale(1.08); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(232,69,107,.55); } 70%,100% { box-shadow:0 0 0 12px rgba(232,69,107,0); } }
@keyframes popin { 0% { opacity:0; transform:translateY(10px) scale(.96); } 100% { opacity:1; transform:none; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes shine { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes check { 0% { transform:scale(0); } 70% { transform:scale(1.25); } 100% { transform:scale(1); } }

.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity:1; transform:none; }
.reveal:nth-child(2) { transition-delay:.08s; } .reveal:nth-child(3) { transition-delay:.16s; }
.reveal:nth-child(4) { transition-delay:.24s; } .reveal:nth-child(5) { transition-delay:.32s; } .reveal:nth-child(6) { transition-delay:.4s; }

.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; animation:drift 14s ease-in-out infinite; }
.blob.b1 { width:340px; height:340px; background:#ff7a96; top:-60px; left:-80px; }
.blob.b2 { width:300px; height:300px; background:#ffc15a; bottom:-40px; right:30%; animation-delay:-5s; }
.blob.b3 { width:260px; height:260px; background:#8f7bff; top:20%; right:-60px; opacity:.35; animation-delay:-9s; }
.hero .wrap { z-index:1; }
.hero h1 .grad { background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }

.stage { position:relative; display:grid; place-items:center; min-height:520px; }
.stage .phone { --r:3deg; animation:float 6s ease-in-out infinite; position:relative; z-index:2; }
.float-card { position:absolute; z-index:3; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 14px; font-size:13px; font-weight:600; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; animation:float 7s ease-in-out infinite; }
.float-card.fc1 { --r:-4deg; top:46px; left:-6px; animation-delay:-2s; }
.float-card.fc2 { --r:3deg; bottom:70px; right:-10px; animation-delay:-4s; }
.float-card.fc3 { --r:-2deg; bottom:8px; left:10px; animation-delay:-1s; }
.float-card .dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; background:#25d366; }
.float-card .dot.live { background:var(--pink); animation:pulse 1.8s infinite; }
.float-card .dot.gold { background:var(--yellow); color:#4a3200; }
.float-card small { display:block; font-weight:400; color:var(--muted); font-size:11.5px; }

.notice .row { opacity:0; animation:popin .5s ease forwards; display:block; }
.notice .row:nth-of-type(1) { animation-delay:.6s; } .notice .row:nth-of-type(2) { animation-delay:1.1s; } .notice .row:nth-of-type(3) { animation-delay:1.6s; } .notice .hi { opacity:0; animation:popin .6s 2.2s ease forwards; }
.send { position:relative; overflow:hidden; }
.send::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:200% 100%; animation:shine 3s linear infinite; }

.marquee { overflow:hidden; border-block:1px solid var(--line); background:var(--bg2); padding:14px 0; white-space:nowrap; }
.marquee .track { display:inline-flex; gap:44px; animation:marquee 32s linear infinite; padding-left:44px; }
.marquee span { font-weight:700; color:var(--muted); font-size:15px; }
.marquee span::before { content:"✦ "; color:var(--accent); }
.marquee:hover .track { animation-play-state:paused; }

.showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:end; margin-top:12px; }
.showcase figure { margin:0; text-align:center; }
.showcase figcaption { margin-top:16px; font-weight:700; }
.showcase figcaption small { display:block; font-weight:400; color:var(--muted); }
.showcase .phone { width:100%; max-width:260px; transform:none; transition:transform .35s ease; }
.showcase figure:nth-child(2) .phone { max-width:285px; }
.showcase figure:hover .phone { transform:translateY(-10px) rotate(-1.5deg); }
.showcase .screen { min-height:380px; padding:14px 12px 18px; font-size:12px; }
.showcase figure:nth-child(2) .screen { min-height:420px; }

.s-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.s-head img { width:26px; height:26px; border-radius:8px; }
.s-head b { font-size:13px; }
.s-search { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:8px 12px; color:var(--muted); margin-bottom:12px; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tile { border-radius:14px; padding:12px 10px; color:#fff; font-weight:700; font-size:12px; min-height:62px; display:flex; align-items:flex-end; }
.tile.t1 { background:linear-gradient(135deg,#e8456b,#f26a4f); } .tile.t2 { background:linear-gradient(135deg,#7c5cff,#3ea8ff); }
.tile.t3 { background:linear-gradient(135deg,#11b981,#7bd88f); } .tile.t4 { background:linear-gradient(135deg,#f58a3a,#f7b733); }
.lrow { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 10px; margin-top:8px; }
.lrow i { width:22px; height:22px; border-radius:7px; background:var(--grad); flex:none; }
.lrow:nth-of-type(even) i { background:linear-gradient(135deg,#7c5cff,#3ea8ff); }

.ttable { display:grid; grid-template-columns:34px repeat(3,1fr); gap:5px; }
.ttable div { border-radius:8px; padding:7px 4px; text-align:center; background:var(--bg2); color:var(--muted); font-weight:600; font-size:11px; }
.ttable .h { background:linear-gradient(135deg,#7c5cff,#3ea8ff); color:#fff; }
.ttable .m { background:#ffe7ea; color:#8a1f3a; } .ttable .s { background:#e3f7ec; color:#0f6b44; } .ttable .e { background:#e8eefc; color:#2f4a9a; }
.ttable .live { background:linear-gradient(135deg,#e8456b,#f26a4f); color:#fff; animation:pulse 1.8s infinite; }
.ttable .brk { grid-column:1 / -1; background:linear-gradient(90deg,#f58a3a,#f7b733); color:#fff; padding:4px; font-size:10.5px; }

.lesson h5 { margin:0 0 6px; font-size:13px; }
.bar-line { height:8px; border-radius:6px; background:var(--line); margin:7px 0; }
.bar-line.w1 { width:92%; } .bar-line.w2 { width:78%; } .bar-line.w3 { width:86%; } .bar-line.w4 { width:55%; }
.lesson .box { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:10px; }
.badge-ok { display:inline-flex; align-items:center; gap:6px; background:#e3f7ec; color:#0f6b44; border-radius:999px; padding:3px 10px; font-weight:700; font-size:11px; }
.badge-ok::before { content:"✓"; display:inline-grid; place-items:center; width:16px; height:16px; background:#11b981; color:#fff; border-radius:50%; font-size:10px; animation:check .6s .4s both; }

.card { position:relative; overflow:hidden; }
.card::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.card:hover::after { transform:scaleX(1); }
.ico { transition:transform .3s ease; }
.card:hover .ico { transform:rotate(-8deg) scale(1.1); }
.step { transition:transform .25s ease; } .step:hover { transform:translateY(-4px); }
.band { position:relative; overflow:hidden; }
.band::before, .band::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.14); animation:drift 12s ease-in-out infinite; }
.band::before { top:-80px; left:-60px; } .band::after { bottom:-90px; right:-40px; animation-delay:-6s; }
.band > * { position:relative; z-index:1; }

@media (max-width:820px) {
  .stage { min-height:500px; }
  .float-card.fc1 { left:0; } .float-card.fc2 { right:0; }
  .showcase { grid-template-columns:1fr; gap:36px; }
  .showcase .phone, .showcase figure:nth-child(2) .phone { max-width:280px; margin:0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .stage .phone, .float-card, .marquee .track, .send::after, .ttable .live, .float-card .dot.live, .hero h1 .grad { animation:none !important; }
  .notice .row, .notice .hi { opacity:1; animation:none; }
  .js .reveal { opacity:1; transform:none; transition:none; }
}

.screen.shot { padding:0; min-height:0; overflow:hidden; border-radius:32px; background:var(--bg); }
.showcase .screen.shot, .showcase figure:nth-child(2) .screen.shot { min-height:0; padding:0; }
.screen.shot img { width:100%; height:auto; display:block; }
.showcase figure:nth-child(2) { margin-bottom:28px; }