/* Landing page (index.html) — works on phones, tablets and computers */
:root { --p: #4f46e5; --p2: #4338ca; --ink: #0f172a; --mut: #5b6677; --line: #e2e8f0; --soft: #eef2ff; --night: #0a0d24; --lime: #bef264; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.w { width: min(1200px, 100% - 32px); margin: 0 auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); white-space: nowrap; transition: transform .1s, filter .15s; }
.btn:hover { filter: brightness(1.05); } .btn:active { transform: scale(.98); }
.btn.lime { background: var(--lime); border-color: var(--lime); color: #1a2e05; }
.btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.btn.lg { font-size: 17px; padding: 17px 30px; }
.hide { display: none !important; }

/* ===== hero ===== */
.hero { background: var(--night); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(900px 600px at 70% 30%, #000, transparent); mask-image: radial-gradient(900px 600px at 70% 30%, #000, transparent); }
.glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, .55), transparent 65%); right: -120px; top: -160px; filter: blur(10px); pointer-events: none; }
nav { position: relative; z-index: 2; }
nav .w { display: flex; align-items: center; height: 84px; gap: 36px; }
nav .logo img { height: 40px; width: auto; display: block; }
nav .links { display: flex; gap: 30px; font-weight: 500; color: #cbd5e1; font-size: 15px; }
nav .links a:hover { color: #fff; }
nav .r { margin-left: auto; display: flex; gap: 10px; }
.hw { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; padding: 70px 0 40px; }
.badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); padding: 7px 16px 7px 8px; border-radius: 99px; font-size: 14px; color: #e2e8f0; font-weight: 500; }
.badge b { background: var(--lime); color: #1a2e05; font-size: 12px; padding: 4px 10px; border-radius: 99px; }
h1 { font-family: Outfit, Rubik, sans-serif; font-weight: 800; font-size: clamp(46px, 6.4vw, 84px); line-height: .98; letter-spacing: -.05em; margin: 28px 0 24px; }
h1 s { text-decoration: none; position: relative; color: #64748b; }
h1 s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 54%; height: .1em; background: var(--lime); border-radius: 4px; transform: rotate(-4deg); }
h1 em { font-style: normal; background: linear-gradient(90deg, #a5b4fc, #c4b5fd 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: #cbd5e1; max-width: 540px; }
.hero .cta { display: flex; gap: 12px; margin: 36px 0 26px; flex-wrap: wrap; }
.ticks { display: flex; gap: 10px 24px; color: #94a3b8; font-size: 14.5px; flex-wrap: wrap; }
.ticks b { color: var(--lime); margin-right: 6px; }
.stage { position: relative; height: 600px; }
.bigring { position: absolute; left: 40%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -48%); }
.phone { position: absolute; left: 40%; top: 20px; transform: translateX(-50%) rotate(4deg); width: 280px; height: 560px; border-radius: 44px; background: #1e1b4b; padding: 11px; box-shadow: 0 50px 100px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.08); }
.scr { width: 100%; height: 100%; border-radius: 34px; background: #f8fafc; overflow: hidden; padding: 22px 16px; color: var(--ink); }
.sh { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.av { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.now { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); }
.now b { color: var(--ink); }
.tk { margin-top: 12px; background: linear-gradient(150deg, #6366f1, #3730a3); border-radius: 22px; color: #fff; padding: 20px 16px; text-align: center; }
.tk small { font-size: 11px; opacity: .8; font-weight: 700; letter-spacing: 1px; }
.ring { width: 140px; height: 140px; margin: 10px auto 6px; position: relative; }
.ring svg { position: absolute; inset: 0; }
.ring div { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px Outfit, Rubik, sans-serif; letter-spacing: -2px; }
.tk .row { display: flex; justify-content: space-around; margin-top: 6px; }
.tk .row b { display: block; font: 700 19px Outfit, Rubik, sans-serif; } .tk .row span { font-size: 11px; opacity: .8; }
.gm { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 4px; text-align: center; font-size: 11px; font-weight: 600; color: #334155; }
.gm i { display: block; font-style: normal; font-size: 17px; margin-bottom: 2px; }
.float { position: absolute; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 14px 16px; }
.f1 { right: -50px; top: 10px; width: 290px; display: flex; gap: 12px; align-items: center; transform: rotate(-2deg); }
.f1 img { width: 38px; height: 38px; border-radius: 10px; }
.f1 b { display: block; font-size: 14px; } .f1 span { font-size: 12.5px; color: var(--mut); }
.f2 { left: -70px; bottom: -24px; transform: rotate(-4deg); }
.f2 small { font-size: 11px; color: var(--mut); font-weight: 600; letter-spacing: .5px; }
.f2 .cs { display: flex; gap: 6px; margin-top: 8px; }
.f2 .cs span { font: 700 13px Outfit, Rubik, sans-serif; padding: 7px 10px; border-radius: 10px; background: var(--soft); color: var(--p2); }
.f2 .cs span.on { background: #dcfce7; color: #166534; }
.f3 { right: -50px; top: 300px; display: flex; align-items: center; gap: 10px; background: var(--lime); color: #1a2e05; font-weight: 700; transform: rotate(3deg); }
.f3 i { font-style: normal; font-size: 22px; }
.ribbon { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0; overflow: hidden; }
.rq { display: flex; gap: 12px; align-items: center; white-space: nowrap; width: max-content; animation: slide 40s linear infinite alternate; }
@keyframes slide { to { transform: translateX(-30%); } }
.rq span { font: 700 18px Outfit, Rubik, sans-serif; padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); color: #94a3b8; }
.rq span.done { opacity: .35; text-decoration: line-through; }
.rq span.srv { background: #16a34a; border-color: #16a34a; color: #fff; }
.rq span.you { background: #fff; color: var(--p2); border-color: #fff; box-shadow: 0 0 0 6px rgba(165,180,252,.35); }

/* ===== sections ===== */
section { padding: clamp(64px, 9vw, 110px) 0; }
.kick { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--p); background: var(--soft); padding: 7px 14px; border-radius: 99px; }
h2 { font-family: Outfit, Rubik, sans-serif; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.045em; line-height: 1.04; margin: 18px 0 16px; font-weight: 800; }
h2 em { font-style: normal; color: var(--p); }
.sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--mut); max-width: 640px; line-height: 1.55; }
.center { text-align: center; } .center .sub { margin: 0 auto; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; text-align: left; }
.st { border: 1px solid var(--line); border-radius: 24px; padding: 28px; background: #fff; }
.st .n { width: 46px; height: 46px; border-radius: 14px; background: var(--soft); color: var(--p); font: 800 20px Outfit, Rubik, sans-serif; display: grid; place-items: center; }
.st h3 { font: 700 21px Outfit, Rubik, sans-serif; letter-spacing: -.5px; margin: 18px 0 8px; } .st p { color: var(--mut); line-height: 1.55; }

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; text-align: left; }
.bx { border-radius: 30px; padding: clamp(24px, 3vw, 36px); position: relative; overflow: hidden; }
.bx.before { background: #fff1f2; border: 1px solid #fecdd3; }
.bx.after { background: linear-gradient(160deg, #4f46e5, #312e81); color: #fff; }
.bx .lab { font: 700 13px Rubik, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.before .lab { color: #be123c; } .after .lab { color: var(--lime); }
.bx h3 { font: 800 clamp(24px, 2.6vw, 32px) Outfit, Rubik, sans-serif; letter-spacing: -1.2px; margin: 12px 0 20px; }
.scene { height: 150px; border-radius: 20px; display: flex; align-items: flex-end; padding: 18px; gap: 6px; margin-bottom: 22px; position: relative; overflow: hidden; }
.before .scene { background: #ffe4e6; }
.after .scene { background: rgba(255,255,255,.08); justify-content: space-around; align-items: center; }
.ppl { display: flex; align-items: flex-end; gap: 5px; }
.pp { width: 22px; display: flex; flex-direction: column; align-items: center; }
.pp i { width: 15px; height: 15px; border-radius: 50%; background: #fb7185; } .pp b { width: 22px; height: 30px; border-radius: 11px 11px 4px 4px; background: #fb7185; margin-top: 3px; }
.pp.dim i, .pp.dim b { background: #fda4af; }
.desk { position: absolute; right: 18px; bottom: 18px; width: 70px; height: 46px; border-radius: 8px; background: #9f1239; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.angry { position: absolute; top: 16px; left: 20px; font-size: 13px; font-weight: 700; color: #be123c; background: #fff; padding: 6px 10px; border-radius: 10px; }
.calm { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #c7d2fe; }
.calm i { font-style: normal; font-size: 34px; }
.bx ul { list-style: none; display: grid; gap: 12px; font-size: 16px; }
.before li::before { content: "✕"; color: #e11d48; font-weight: 800; margin-right: 12px; }
.after li::before { content: "✓"; color: var(--lime); font-weight: 800; margin-right: 12px; }

.facts { background: var(--night); color: #fff; padding: 60px 0; }
.facts .w { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px 0; }
.facts .w > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.facts b { display: block; font: 800 clamp(40px, 4.6vw, 60px) Outfit, Rubik, sans-serif; letter-spacing: -2.5px; background: linear-gradient(90deg, #a5b4fc, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts span { color: #94a3b8; font-size: 16px; }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); gap: 18px; margin-top: 56px; text-align: left; }
.t { border-radius: 26px; padding: 26px; background: #f8fafc; border: 1px solid var(--line); position: relative; overflow: hidden; }
.t h3 { font: 700 20px Outfit, Rubik, sans-serif; letter-spacing: -.5px; margin-bottom: 6px; }
.t p { color: var(--mut); font-size: 14.5px; line-height: 1.5; max-width: 300px; }
.t .ic { font-size: 26px; margin-bottom: 14px; display: block; }
.t.big { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #eef2ff, #fff); padding-bottom: 230px; }
.t.wide { grid-column: span 2; }
.t.dark { background: var(--night); color: #fff; border: 0; } .t.dark p { color: #94a3b8; }
.t.lime { background: var(--lime); border: 0; } .t.lime p { color: #3f6212; }
.stack { position: absolute; left: 26px; right: 26px; bottom: 26px; display: grid; gap: 10px; }
.nt { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px rgba(15,23,42,.08); border: 1px solid var(--line); }
.nt img { width: 34px; height: 34px; border-radius: 9px; }
.nt b { display: block; font-size: 14px; } .nt span { font-size: 12.5px; color: var(--mut); }
.nt.o2 { transform: scale(.95); opacity: .75; } .nt.o3 { transform: scale(.9); opacity: .5; }
.cnt { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; }
.cnt div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 11px; color: var(--mut); text-align: center; }
.cnt b { display: block; font: 800 18px Outfit, Rubik, sans-serif; color: var(--ink); }
.games { display: grid; grid-template-columns: repeat(8, 38px); gap: 6px; margin-top: 16px; justify-content: end; }
.games span { height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 19px; }
.mini { position: absolute; right: 22px; top: 22px; width: 60px; height: 60px; }

.mq { display: grid; gap: 14px; margin-top: 46px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq .rw { display: flex; gap: 14px; white-space: nowrap; width: max-content; animation: slide 50s linear infinite alternate; }
.mq .rw:nth-child(2) { animation-direction: reverse; margin-left: -400px; }
.mq span { border: 1px solid var(--line); border-radius: 99px; padding: 14px 22px; font-weight: 600; font-size: 16px; background: #fff; }

.price { background: linear-gradient(180deg, #fff, #eef2ff); }
.pcard { width: min(900px, 100%); margin: 56px auto 0; border-radius: 34px; background: var(--night); color: #fff; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; text-align: left; box-shadow: 0 40px 80px rgba(30,27,75,.25); }
.pcard .l { padding: clamp(28px, 4vw, 46px); }
.pcard .l .tag { display: inline-block; background: var(--lime); color: #1a2e05; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 99px; }
.pcard .amt { font: 800 clamp(60px, 7vw, 86px) Outfit, Rubik, sans-serif; letter-spacing: -4px; margin: 20px 0 4px; }
.pcard .amt small { font: 600 20px Rubik, sans-serif; color: #94a3b8; letter-spacing: 0; }
.pcard .alt { color: #94a3b8; }
.pcard .l .btn { margin-top: 30px; }
.pcard .r { padding: clamp(28px, 4vw, 46px); background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.08); }
.pcard .r h4 { font: 700 15px Rubik, sans-serif; color: #94a3b8; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.pcard ul { list-style: none; display: grid; gap: 13px; font-size: 16px; }
.pcard li::before { content: "✓"; color: var(--lime); font-weight: 800; margin-right: 12px; }
.trial { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--mut); justify-content: center; font-size: 15px; flex-wrap: wrap; }
.trial .bar { width: 260px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--lime), #86efac); }

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 50px; text-align: left; align-items: start; }
.q { border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.q summary { list-style: none; cursor: pointer; padding: 22px 26px; font: 600 17px Outfit, Rubik, sans-serif; display: flex; justify-content: space-between; gap: 20px; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; color: var(--p); font-size: 24px; line-height: .8; transition: transform .2s; }
.q[open] summary::after { transform: rotate(45deg); }
.q p { color: var(--mut); padding: 0 26px 22px; font-size: 15px; line-height: 1.6; margin-top: -8px; }

.final { margin: 0 auto 100px; width: min(1200px, 100% - 32px); border-radius: 40px; background: var(--night); color: #fff; padding: clamp(48px, 7vw, 80px) 24px; position: relative; overflow: hidden; text-align: center; }
.final .glow { left: 50%; top: -300px; transform: translateX(-50%); right: auto; }
.final h2 { color: #fff; font-size: clamp(40px, 6vw, 64px); position: relative; }
.final p { color: #cbd5e1; font-size: 19px; position: relative; }
.final .cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; position: relative; flex-wrap: wrap; }
footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--mut); font-size: 14px; }
footer .w { display: flex; align-items: center; gap: 20px 30px; flex-wrap: wrap; }
footer img { height: 32px; display: block; }
footer .l { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
footer a:hover { color: var(--ink); }

/* ===== tablets ===== */
@media (max-width: 1080px) {
  nav .links { display: none; }
  .hw { grid-template-columns: 1fr; padding-top: 40px; }
  .stage { height: 600px; max-width: 520px; width: 100%; margin: 10px auto 0; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t.big { grid-row: auto; }
}
/* ===== phones ===== */
@media (max-width: 680px) {
  nav .w { height: 70px; gap: 10px; }
  nav .logo img { height: 32px; }
  nav .r .btn { padding: 10px 14px; font-size: 14px; }
  nav .r .btn.lime { display: none; }
  .hero .cta .btn { width: 100%; }
  .stage { height: 540px; transform: scale(.86); transform-origin: top center; margin-bottom: -60px; }
  .f1 { right: -10px; width: 260px; }
  .f3 { right: -10px; }
  .f2 { left: -10px; }
  .bigring { width: 460px; height: 460px; }
  .steps, .ba, .faq, .pcard { grid-template-columns: 1fr; }
  .pcard .r { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .facts .w { grid-template-columns: 1fr 1fr; }
  .facts .w > div:nth-child(3) { border-left: 0; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .f3 { display: none; }
  .t.big, .t.wide { grid-column: auto; }
  .t.big { padding-bottom: 240px; }
  .games { grid-template-columns: repeat(4, 38px); justify-content: start; }
  .cnt { justify-content: flex-start; }
  .ppl .pp:nth-child(n+8) { display: none; }
  .calm i { font-size: 28px; }
  footer .l { margin-left: 0; }
  .trial .bar { width: 120px; }
}