:root{
  --bg:#0b1724;
  --card:#101e2d;
  --muted:#8eb6c9;
  --primary:#00d1b2;
  --accent:#22a7f0;
  --text:#dfe8ef;
  --heading:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(90deg,#051a2c,#0c3a63 50%,#0c5469);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}
.nav{
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;max-width:1100px;margin:0 auto;
}
.nav .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;letter-spacing:.2px}
.nav .brand img{width:40px;height:40px;border-radius:10px}
.nav .links{margin-left:auto;display:flex;gap:18px}
.nav .link{opacity:.9;padding:.4rem .6rem;border-radius:10px}
.nav .link:hover{background:rgba(255,255,255,.08)}

.container{max-width:1100px;margin:0 auto;padding:18px}
.card{background:var(--card);border-radius:18px;padding:18px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.07)}
.h1{font-size:1.85rem;color:var(--heading);margin:0 0 10px}
.h2{font-size:1.25rem;color:var(--heading);margin:0 0 10px}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

.select, select, input[type=text]{
  width:100%;padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:#0a1824;color:var(--text);outline:none
}
.btn{
  display:inline-block;padding:14px 18px;border-radius:14px;border:none;cursor:pointer;
  color:#001016;font-weight:800;background:linear-gradient(90deg,var(--primary),#41e6f5);
  box-shadow:0 6px 18px rgba(0,209,178,.3)
}
.btn.alt{background:linear-gradient(90deg,#2a93ff,#6ee7ff)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}
.help{color:var(--muted);font-size:.9rem}

.tutor-row{display:flex;gap:16px;flex-wrap:wrap}
.tutor{display:flex;gap:12px;align-items:center;background:#0b2132;border:1px solid rgba(255,255,255,.08);padding:10px;border-radius:14px;cursor:pointer;flex:1;min-width:240px}
.tutor.active{outline:2px solid var(--accent)}
.tutor img{width:56px;height:56px;border-radius:50%}

.pricing-tabs{display:flex;gap:10px;margin-bottom:12px}
.tab{padding:8px 12px;border:1px solid rgba(255,255,255,.15);border-radius:12px;cursor:pointer}
.tab.active{background:rgba(255,255,255,.08)}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{display:flex;flex-direction:column;gap:12px}
.price ul{margin:0;padding-left:18px;color:var(--muted)}
.price .cta{margin-top:auto}

.fab{position:fixed;right:16px;bottom:16px;width:58px;height:58px;border-radius:50%;background:#0c3a63;border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.fab img{width:36px;height:36px;border-radius:50%}

.chat{
  position:fixed;right:16px;bottom:86px;width:min(420px,92vw);display:none;flex-direction:column;
  background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)
}
.chat.open{display:flex}
.chat-header{display:flex;align-items:center;gap:12px;padding:12px;background:#0f2a41;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-header img{width:34px;height:34px;border-radius:50%}
.chat-header .title{font-weight:700}
.chat-close{margin-left:auto;background:transparent;border:none;color:var(--text);font-size:20px;cursor:pointer}
.messages{height:280px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{padding:10px 12px;border-radius:12px;max-width:85%}
.msg.bot{background:#092033;border:1px solid rgba(255,255,255,.08)}
.msg.user{background:#0d834b;color:#001;align-self:flex-end}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08);background:#091a29}
.chat-input input{flex:1}
.badge{background:#08304d;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;color:#9bd2ff;font-size:.8rem}
.footer{color:var(--muted);text-align:center;padding:20px}