/* Omneth Mathematics — landing + sign-in. Same tokens and type as omneth.com. */
:root{
  --bg:#07060f; --bg-2:#0c0a1a; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#eeecff; --text-soft:#b9b6d6; --muted:#8b88a8;
  --brand:#ff6b4a; --brand-2:#ff9966; --accent:#8f82ff;
  --serif:'Instrument Serif', Georgia, serif; --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --radius:20px;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; min-height:100%; display:flex; flex-direction:column; background:var(--bg); color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
.serif{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.02em;
  background:linear-gradient(100deg, #ffd2c4, var(--brand-2) 45%, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }

/* background: drawn curves + drifting symbols (canvas), two soft glows */
#field{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.glow{ position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.5; }
.g1{ width:52vw; height:52vw; left:-18vw; top:-22vw; background:radial-gradient(circle, rgba(255,107,74,.55), transparent 65%); animation:drift 22s ease-in-out infinite alternate; }
.g2{ width:46vw; height:46vw; right:-16vw; bottom:-20vw; background:radial-gradient(circle, rgba(143,130,255,.5), transparent 65%); animation:drift 26s ease-in-out infinite alternate-reverse; }
@keyframes drift{ to{ transform:translate3d(6vw, 4vw, 0) scale(1.08); } }

.top, .hero, .foot{ position:relative; z-index:1; }
.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(1120px, 100% - 40px); margin:22px auto 0; padding:12px 18px;
  border-radius:999px; background:rgba(12,10,26,.55); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.brand{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brand svg{ height:26px; width:auto; display:block; flex:none; }
.brand-sub{ font-family:var(--serif); font-style:italic; font-size:24px; line-height:1; color:var(--text-soft); padding-left:10px; border-left:1px solid var(--line-2); }
.beta{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#1a0d08; padding:4px 8px; border-radius:999px;
  background:linear-gradient(100deg, var(--brand), var(--brand-2)); }
.top-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-soft); padding:8px 12px; border-radius:999px; transition:color .2s, background .2s; }
.top-link:hover{ color:var(--text); background:var(--surface-2); }
.top-link svg, .btn svg, .role-go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.flip{ transform:scaleX(-1); }

.hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:min(980px, 100% - 40px); margin:0 auto; padding:56px 0 40px; }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
  padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); }
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 rgba(255,107,74,.6); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ to{ box-shadow:0 0 0 12px rgba(255,107,74,0); } }
h1{ margin:26px 0 0; font-size:clamp(44px, 8.4vw, 104px); line-height:.98; letter-spacing:-.045em; font-weight:800; }
h1 .serif{ font-size:1.08em; letter-spacing:-.03em; }
.lead{ margin:22px 0 0; max-width:34em; font-size:clamp(16px, 2vw, 20px); line-height:1.55; color:var(--text-soft); }

.roles{ display:grid; grid-template-columns:1fr 1fr; gap:16px; width:min(760px, 100%); margin:44px 0 0; }
.role{ position:relative; display:flex; align-items:center; gap:18px; text-align:left; padding:24px 24px; border-radius:calc(var(--radius) + 4px); overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid var(--line-2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s; }
.role::before{ content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,107,74,.30), transparent 60%); }
.role[data-role="teacher"]::before{ background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(143,130,255,.34), transparent 60%); }
.role:hover, .role:focus-visible{ transform:translateY(-4px); border-color:rgba(255,255,255,.3); box-shadow:0 30px 70px -34px rgba(255,107,74,.75); outline:none; }
.role[data-role="teacher"]:hover, .role[data-role="teacher"]:focus-visible{ box-shadow:0 30px 70px -34px rgba(143,130,255,.85); }
.role:hover::before, .role:focus-visible::before{ opacity:1; }
.role-ic{ flex:none; width:60px; height:60px; display:grid; place-items:center; border-radius:18px; color:#1a0d08; background:linear-gradient(135deg, var(--brand), var(--brand-2)); }
.role[data-role="teacher"] .role-ic{ color:#0d0a22; background:linear-gradient(135deg, #b3a9ff, var(--accent)); }
.role-ic svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.role-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.role-t small{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.role-t b{ font-size:clamp(24px, 3vw, 32px); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.role-go{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); color:var(--text-soft); transition:transform .3s, background .3s, color .3s, border-color .3s; }
.role:hover .role-go, .role:focus-visible .role-go{ transform:translateX(4px); background:var(--text); color:var(--bg); border-color:var(--text); }
.fine{ margin:22px 0 0; font-size:13px; color:var(--muted); }

.foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(1120px, 100% - 40px); margin:0 auto; padding:18px 4px 26px; font-size:13px; color:var(--muted); }
.foot a:hover{ color:var(--text); }

/* sign-in */
.login .hero{ padding-top:40px; }
.card{ width:min(440px, 100%); text-align:left; padding:28px; border-radius:calc(var(--radius) + 6px); border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(20,17,40,.82), rgba(12,10,26,.82)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px rgba(255,107,74,.7); }
.card h1{ margin:20px 0 22px; font-size:clamp(30px, 6vw, 40px); line-height:1.05; letter-spacing:-.035em; }
.who{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.who button{ all:unset; cursor:pointer; padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--text-soft); transition:background .2s, color .2s; }
.who button.on{ background:var(--text); color:var(--bg); }
.who button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.card label{ display:block; margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.card input{ display:block; width:100%; margin-top:8px; height:50px; padding:0 16px; border-radius:14px; border:1px solid var(--line); background:var(--bg); color:var(--text);
  font:500 15.5px 'Inter', sans-serif; letter-spacing:0; text-transform:none; outline:none; transition:border-color .2s, box-shadow .2s; }
.card input::placeholder{ color:var(--muted); }
.card input:focus{ border-color:rgba(255,107,74,.7); box-shadow:0 0 0 4px rgba(255,107,74,.14); }
.btn{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; margin-top:6px; border-radius:14px;
  font-size:15.5px; font-weight:700; color:#1a0d08; background:linear-gradient(100deg, var(--brand), var(--brand-2)); box-shadow:0 14px 34px -14px rgba(255,107,74,.9); transition:transform .2s, box-shadow .2s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 18px 40px -14px rgba(255,107,74,1); }
.btn:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.msg{ margin:16px 0 0; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.5; color:var(--text); background:rgba(143,130,255,.12); border:1px solid rgba(143,130,255,.35); }
.msg.err{ background:rgba(255,107,74,.1); border-color:rgba(255,107,74,.4); }
.card .fine{ margin-top:16px; }
[hidden]{ display:none !important; }

@media (max-width: 640px){
  .top{ margin-top:14px; padding:10px 14px; }
  .brand svg{ height:22px; } .brand-sub{ font-size:20px; padding-left:8px; }
  .roles{ grid-template-columns:1fr; margin-top:34px; }
  .role{ padding:18px; } .role-ic{ width:52px; height:52px; border-radius:16px; }
  .hero{ padding:40px 0 28px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}