:root{
  --bg:#0e0b16;
  --surface:#16111f;
  --raise:#1d1729;
  --line:#2b2338;
  --text:#ece8f5;
  --muted:#a097b3;
  --violet:#8a4dff;
  --violet-d:#6d35d8;
  --green:#38e08c;
  --danger:#ff6b81;
  --radius:10px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 1rem/1.6 "Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.top{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,5vw,56px);
  background:rgba(14,11,22,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.1rem "Unbounded",sans-serif}
.mark{width:34px;height:34px}
.ring{stroke-dasharray:132;stroke-dashoffset:0;animation:draw 1.4s ease-out both}
@keyframes draw{from{stroke-dashoffset:132}to{stroke-dashoffset:0}}
.lang{
  background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font:600 .85rem "Figtree",sans-serif;cursor:pointer;
}
.lang:hover{border-color:var(--violet)}

main{max-width:960px;margin:0 auto;padding:0 clamp(16px,5vw,32px)}

.hero{padding:clamp(56px,12vw,120px) 0 clamp(40px,8vw,72px)}
.hero h1{
  margin:0 0 18px;max-width:14ch;
  font:700 clamp(2.2rem,7vw,4.4rem)/1.05 "Unbounded",sans-serif;letter-spacing:-.02em;
}
.hero p{margin:0 0 28px;max-width:46ch;color:var(--muted);font-size:1.1rem}
.cta{
  display:inline-block;background:var(--violet);color:#fff;text-decoration:none;
  padding:13px 24px;border-radius:var(--radius);font-weight:600;
  transition:background .15s;
}
.cta:hover{background:var(--violet-d)}

.block{padding:clamp(32px,6vw,56px) 0}
.block h2{margin:0 0 6px;font:700 clamp(1.4rem,3.5vw,1.9rem)/1.2 "Unbounded",sans-serif}
.lead{margin:0 0 24px;color:var(--muted)}

.roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.role{
  display:flex;align-items:center;gap:20px;
  padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
}
.role-main{flex:1;min-width:0}
.role h3{margin:0 0 4px;font:600 1.1rem "Figtree",sans-serif}
.role p{margin:0;color:var(--muted);font-size:.95rem;max-width:58ch}

.role-feature{
  border-color:var(--violet);
  background:linear-gradient(100deg,#231845 0%,var(--surface) 60%);
  padding:26px 24px;
}
.payout{display:flex;flex-direction:column;align-items:flex-start;min-width:112px}
.payout strong{font:700 clamp(3rem,9vw,4.6rem)/1 "Unbounded",sans-serif;color:var(--green);letter-spacing:-.04em}
.payout span{font-size:.8rem;color:var(--muted);margin-top:4px;max-width:12ch}
.reqs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reqs li{
  border:1px solid #3a2d58;background:#1a1330;color:var(--text);
  border-radius:999px;padding:4px 12px;font-size:.85rem;
}

.apply{
  flex-shrink:0;background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 20px;font:600 .95rem "Figtree",sans-serif;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.apply:hover{background:var(--violet);border-color:var(--violet)}
.role-feature .apply{background:var(--violet);border-color:var(--violet)}
.role-feature .apply:hover{background:var(--violet-d)}

dialog{
  width:min(720px,94vw);max-height:92vh;overflow:auto;margin:auto;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,32px);
}
dialog::backdrop{background:rgba(5,3,10,.72);backdrop-filter:blur(3px)}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.dlg-head h2{margin:0;font:700 clamp(1.2rem,3.2vw,1.6rem)/1.25 "Unbounded",sans-serif}
.rolename{display:block;color:var(--green);font-size:.8em;margin-top:4px}
.close{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  background:transparent;color:var(--text);border:1px solid var(--line);
  font-size:1.4rem;line-height:1;cursor:pointer;
}
.close:hover{border-color:var(--violet)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1/-1}
.f>span{font-weight:600;font-size:.92rem}
input,select,textarea{
  width:100%;background:var(--raise);color:var(--text);
  border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font:inherit;
}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(138,77,255,.25)}
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.send{
  background:var(--green);color:#06130d;border:0;border-radius:var(--radius);
  padding:14px 28px;font:700 1rem "Figtree",sans-serif;cursor:pointer;transition:filter .15s;
}
.send:hover{filter:brightness(1.08)}
.send:disabled{opacity:.6;cursor:wait}
.status{margin:0;font-weight:500}
.status.ok{color:var(--green)}
.status.bad{color:var(--danger)}

.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:40px 16px 56px;border-top:1px solid var(--line);margin-top:24px}

@media (max-width:640px){
  .role,.role-feature{flex-direction:column;align-items:stretch;gap:14px}
  .apply{width:100%}
  form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{animation:none}
}

dialog[open]:not(:modal){position:fixed;inset:0;z-index:50;margin:auto;height:fit-content}