/* Velura — tokens, reset, fonts, utilities */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --bg:#14091F;
  --bg-2:#1F1030;
  --bg-3:#2A1740;
  --text:#F2ECFA;
  --text-soft:#C7BBDA;
  --border:#3A2A52;
  --accent:#8A5CD1;
  --accent-2:#B98BFF;
  --holo:linear-gradient(135deg,#8A5CD1 0%,#6FE9FF 38%,#FF7BE5 72%,#B98BFF 100%);

  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --radius:14px;
  --radius-s:9px;
  --shadow:0 18px 48px -22px rgba(0,0,0,.78);
  --shadow-soft:0 8px 26px -16px rgba(0,0,0,.65);
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,6vw,3.5rem)}
h2{font-size:clamp(1.8rem,4vw,2.5rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
p{color:var(--text-soft);max-width:68ch}
ul,ol{padding-left:1.2em}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skipnav{
  position:absolute;left:16px;top:-120px;z-index:300;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:var(--radius-s);
  transition:top .2s var(--ease);
}
.skipnav:focus{top:16px}

:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:50px;padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:1rem;letter-spacing:.01em;
  background:var(--accent);color:#fff;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.btn:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(138,92,209,.7)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn--ghost:hover{background:var(--bg-3);border-color:var(--accent);transform:translateY(-2px);box-shadow:none}

.eyebrow{
  display:inline-block;font-family:var(--ff-body);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent-2);margin-bottom:14px;
}
.holo-rule{height:2px;border:0;background:var(--holo);border-radius:2px;opacity:.85}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}