:root {
	--blue: #1f6bff;
	--blue-d: #1553cc;
	--blue-l: #eaf1ff;
	--green: #3fbf7f;
	--green-l: #e8f8ef;
	--ink: #14213d;
	--muted: #5b6b86;
	--line: #e6ebf3;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--green)); display: grid; place-items: center; color: #fff; }
.nav-links { display: none; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--blue); }
@media (min-width: 820px) { .nav-links { display: flex; } }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: 0; border-radius: 999px;
	padding: 16px 30px; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 10px 24px rgba(31,107,255,.28); transition: transform .15s, background .15s; }
.cta:hover { background: var(--blue-d); transform: translateY(-2px); }
.cta.sm { padding: 10px 18px; font-size: 14px; box-shadow: none; }
.cta.ghost { background: var(--green-l); color: #1e8a55; box-shadow: none; }
.cta.ghost:hover { background: #d6f2e2; }
section { padding: 72px 0; }
.hero { padding: 72px 0 88px; background: radial-gradient(circle at 85% 20%, var(--green-l), transparent 45%), radial-gradient(circle at 10% 90%, var(--blue-l), transparent 45%); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr 1fr; } }
.pill { display: inline-block; background: var(--green-l); color: #1e8a55; font-weight: 600; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.08; margin: 18px 0; letter-spacing: -.02em; }
.hero h1 span { color: var(--blue); }
.hero p.sub { font-size: 19px; color: var(--muted); line-height: 1.55; max-width: 540px; margin: 0 0 32px; }
.hero-note { color: var(--muted); font-size: 14px; margin-top: 14px; }
.hero-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: 0 30px 60px rgba(20,33,61,.08); }
.bubble { padding: 12px 16px; border-radius: 16px; margin: 10px 0; line-height: 1.45; font-size: 15px; }
.bubble.me { background: var(--blue); color: #fff; margin-left: 20%; border-bottom-right-radius: 4px; }
.bubble.bot { background: var(--green-l); margin-right: 12%; border-bottom-left-radius: 4px; }
.h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 12px; letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 18px; margin: 0 0 40px; max-width: 620px; line-height: 1.5; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feat { border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: #fff; transition: transform .2s, box-shadow .2s; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,33,61,.08); }
.ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px; }
.ico.b { background: var(--blue-l); } .ico.g { background: var(--green-l); }
.feat h3 { margin: 0 0 8px; font-size: 19px; } .feat p { margin: 0; color: var(--muted); line-height: 1.5; }
.soft { background: #f7faff; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink); }
.tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.subject { display: grid; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
@media (min-width: 820px) { .subject { grid-template-columns: 1fr 1.3fr; } }
.subject h3 { font-size: 26px; margin: 8px 0; }
.topics { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.topic { background: #f7faff; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 500; }
.topic small { color: #1e8a55; background: var(--green-l); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ai-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .ai-grid { grid-template-columns: 1fr 1.1fr; } }
.check { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.check li { display: flex; gap: 12px; line-height: 1.5; color: var(--muted); }
.check li b { color: var(--ink); }
.check .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 14px; }
.task { font-weight: 700; font-size: 18px; margin: 0 0 16px; }
.step { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: #f7faff; margin-bottom: 10px; animation: pop .3s ease; }
.step-n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.step p { margin: 0; line-height: 1.5; } .step .q { color: #1e8a55; font-size: 14px; margin-top: 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.review { border: 1px solid var(--line); border-radius: 20px; padding: 26px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.stars { color: #ffb400; letter-spacing: 2px; }
.review p { margin: 0; line-height: 1.6; flex: 1; }
.who { display: flex; align-items: center; gap: 12px; }
.ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
.who small { color: var(--muted); display: block; }
.band { background: linear-gradient(135deg, var(--blue), #3f8cff); color: #fff; border-radius: 28px; padding: 48px 28px; text-align: center; }
.band h2 { margin: 0 0 12px; font-size: clamp(24px, 4vw, 34px); } .band p { opacity: .9; margin: 0 0 24px; }
.band .cta { background: #fff; color: var(--blue); }
footer { border-top: 1px solid var(--line); padding: 48px 0 32px; }
.foot { display: grid; gap: 28px; }
@media (min-width: 820px) { .foot { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot p { color: var(--muted); line-height: 1.5; }
.foot h4 { margin: 0 0 12px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.soc { padding: 8px 14px; border-radius: 999px; background: var(--blue-l); color: var(--blue); text-decoration: none; font-weight: 600; font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); font-size: 15px; cursor: pointer; text-decoration: underline; }
.copy { color: var(--muted); font-size: 14px; margin-top: 32px; }
.modal-bg { position: fixed; inset: 0; background: rgba(20,33,61,.45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: #fff; border-radius: 20px; padding: 28px; max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; }
.pill, .topic small, .step .q, .cta.ghost { color: #8a3fd1 !important; }
.cta { box-shadow: 0 10px 24px rgba(255,79,154,.28); }
.cta:disabled { opacity: .5; cursor: default; transform: none; }
.soft { background: #fff6fa !important; }
.topic { background: #fff6fa !important; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.topic:hover { background: var(--blue-l) !important; }
.band { background: linear-gradient(135deg, #ff4f9a, #ff8cc0) !important; }
.axo { flex: none; }
.axo.wave { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.hero-axo { display: flex; justify-content: center; }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 64px; height: 64px; border-radius: 50%; border: 0;
	background: #fff; box-shadow: 0 10px 30px rgba(255,79,154,.4); cursor: pointer; display: grid; place-items: center; }
.chat { background: #fff; border-radius: 22px; width: 100%; max-width: 560px; height: min(640px, 90vh); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--blue-l); }
.chat-head h3 { margin: 0; font-size: 17px; } .chat-head small { color: var(--muted); }
.x { border: 0; background: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.chat-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.chat-body .bubble p { margin: 0 0 4px; } .chat-body .bubble p:last-child { margin: 0; }
.chat-body .bubble.me { margin-left: 15%; } .chat-body .bubble.bot { margin-right: 6%; }
.typing { display: flex; gap: 5px; width: 64px; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: bob 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; }
.chip { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
button.topic { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.topic:hover { border-color: var(--blue); }
.cta:disabled { opacity: .5; cursor: not-allowed; }
.modal h3 { margin-top: 0; } .modal p, .modal li { color: var(--muted); line-height: 1.55; }