@font-face{
  font-family:"Afronaut";
  src:url("../assets/fonts/afronaut.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}

:root{
  --ink:#031030; --ink-2:#0a1c4d;
  --violet:#5C35CC; --violet-lt:#8a6bf0;
  --paper:#EEF1F6; --muted:#aab3d0;
  --c1:#0283E9;--c2:#1DC081;--c3:#A1C025;--c4:#F3893D;--c5:#D84C69;--c6:#D949DC;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--ink); color:var(--paper);
  min-height:100dvh; display:flex; flex-direction:column;
  padding:clamp(.8rem,2vw,1.4rem); gap:.9rem;
}

.hero{
  position:relative; flex:1 1 auto; min-height:78vh;
  border-radius:22px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(130% 100% at 18% 12%, rgba(138,107,240,.55) 0%, rgba(92,53,204,0) 55%),
    linear-gradient(160deg, var(--violet) 0%, var(--ink-2) 52%, var(--ink) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.5rem,4vw,3.4rem);
}

.logo{display:flex; align-items:center; gap:.85rem}
.logo .mark-svg{width:clamp(48px,5.5vw,72px); height:auto; display:block}
.logo .wm{font-family:"Afronaut",sans-serif;color:#EEF1F6;line-height:.92;font-size:clamp(1.1rem,1.9vw,1.5rem);text-transform:uppercase;display:block;white-space:nowrap}

.claim{max-width:min(90%,42rem)}
.eyebrow{font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--violet-lt); font-weight:700; margin-bottom:1.1rem;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.spectrum{display:inline-flex; gap:3px}
.spectrum i{width:9px;height:9px;border-radius:2px;display:block}
.spectrum i:nth-child(1){background:var(--c1)}
.spectrum i:nth-child(2){background:var(--c2)}
.spectrum i:nth-child(3){background:var(--c3)}
.spectrum i:nth-child(4){background:var(--c4)}
.spectrum i:nth-child(5){background:var(--c5)}
.spectrum i:nth-child(6){background:var(--c6)}
.claim h1{font-weight:800; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(2.6rem,8vw,6rem)}
.claim h1 em{color:var(--violet-lt); font-style:normal}
.claim p{margin-top:1.3rem; max-width:38ch;
  font-size:clamp(1.02rem,1.7vw,1.25rem); font-weight:500;
  line-height:1.45; color:#d3d9ec}

footer{display:flex; flex-wrap:wrap; align-items:center;
  gap:.35rem 1.8rem; padding:.2rem clamp(.6rem,1.2vw,1.4rem);
  font-size:.84rem; color:var(--muted)}
footer .co{color:var(--paper); font-weight:700}
footer a{color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(238,241,246,.3)}
footer a:hover{border-color:var(--violet-lt)}
footer .sep{opacity:.4}

@media (max-width:600px){
  .hero{min-height:82vh}
  footer .sep{display:none}
  footer span,footer a{width:100%}
}