/* SWAPPIT — fundament. Tokens, reset og chrome ét sted, saa siderne ikke driver fra hinanden.
   Sider saetter kun --page (bredden paa deres flade) og deres egen side-specifikke CSS. */

@font-face{
  font-family:"ClashGrotesk";
  src:url("../fonts/ClashGrotesk-Variable.woff2") format("woff2-variations");
  font-weight:200 700;
  font-display:swap;
}

:root{
  /* flader */
  --bg:#151719;
  --surface:#1a1c1f;
  --surface-2:#1f2225;
  --sunken:#131517;
  --line:#2b2e32;
  --line-soft:#242629;

  /* tekst */
  --text:#e8e9ec;
  --text-2:#a2a6ad;
  --text-3:#71767e;

  /* accent + semantik */
  --violet:#9664ff;
  --violet-deep:#6d28ff;
  --lime:#bbff28;
  --danger:#ff5a5a;
  --warn:#ffb02e;
  --pos:#3ddc84;
  --stat:#ff8a3d;

  /* system */
  --page:1280px;          /* indholdets bredde — app-flader saetter 1800px */
  --chrome:1800px;        /* headeren er ALTID lige bred, saa den ikke hopper mellem sider */
  --gutter:24px;
  --nav-h:64px;
  --r-sm:8px;
  --r:10px;
  --r-lg:12px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,monospace;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"ClashGrotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 14.5px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.004em;
}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.015em}
h1{font-size:27px}
h2{font-size:19px}
h3{font-size:15.5px}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}

/* ---------- chrome ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(21,23,25,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--chrome);margin:0 auto;padding:0 var(--gutter);
  height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.brand{
  justify-self:start;
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.03em;
}
.brand img{height:26px;width:auto;display:block}
.brand .tld{color:var(--violet)}

.nav-links{justify-self:center;display:flex;gap:34px}
.nav-links a{
  font-size:17px;font-weight:500;color:rgba(224,224,224,.78);
  padding:7px 2px;position:relative;white-space:nowrap;
  transition:color .16s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--violet)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;
  bottom:calc((var(--nav-h) - 100%) / -2 + 1px);
  height:3px;background:var(--violet);border-radius:2px;
}

.acct{
  justify-self:end;flex:none;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--violet-deep);color:#fff;border:0;
  padding:9px 15px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:filter .16s var(--ease);
}
.acct:hover{filter:brightness(1.12)}
.acct img{width:21px;height:21px;border-radius:5px;object-fit:cover;display:block}
.acct.sw-connected{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}

.strip-claims{
  display:flex;align-items:center;justify-content:center;
  height:38px;background:var(--sunken);
  border-bottom:1px solid var(--line-soft);overflow:hidden;
}
.strip-claims span{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;white-space:nowrap;
}
.strip-claims i{font-style:normal;color:#33363c;margin:0 22px;font-size:9px}

/* ---------- delte primitiver ---------- */
.shell-page{max-width:var(--page);margin:0 auto;padding:34px var(--gutter) 110px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);background:none;color:var(--text-2);
  font-size:12.5px;padding:8px 14px;border-radius:7px;cursor:pointer;
  transition:color .14s var(--ease),border-color .14s var(--ease);
}
.btn:hover{color:var(--text);border-color:#3a3e45}
.btn.is-danger:hover{color:#ff8f8f;border-color:rgba(255,90,90,.35)}
.btn.is-primary{
  background:var(--violet-deep);border-color:var(--violet-deep);color:#fff;font-weight:600;
  transition:filter .16s var(--ease);
}
.btn.is-primary:hover{filter:brightness(1.12);color:#fff}
.btn[disabled]{background:var(--surface-2);border-color:var(--line);color:var(--text-3);cursor:not-allowed;filter:none}

.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.card.is-hero{
  border-color:rgba(150,100,255,.45);
  background:linear-gradient(180deg,rgba(150,100,255,.07),rgba(150,100,255,0));
}

.k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.v{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v.lime{color:var(--lime)}

.state{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:44px 34px;text-align:center;
}
.state h2{font-size:19px}
.state p{margin-top:10px;color:var(--text-2);font-size:14px;max-width:58ch;margin-left:auto;margin-right:auto}
.state .go{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  background:var(--violet-deep);color:#fff;border:0;border-radius:9px;
  padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;
  transition:filter .16s var(--ease);
}
.state .go:hover{filter:brightness(1.12)}

.skel{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  position:relative;overflow:hidden;
}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.045) 50%,transparent 80%);
  transform:translateX(-100%);animation:sw-shine 1.5s var(--ease) infinite;
}
@keyframes sw-shine{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .skel::after{animation:none}
}
@media (max-width:900px){
  .strip-claims{display:none}
  .nav-links{display:none}
}
@media (max-width:640px){
  :root{--gutter:16px}
}

/* ---------- footer (delt af hele sitet) ---------- */
.site-foot{
  border-top:1px solid var(--line-soft);
  background:var(--sunken);
  margin-top:64px;
}
.foot-inner{
  max-width:var(--chrome);margin:0 auto;
  padding:46px var(--gutter) 34px;
  display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:64px;align-items:start;
}
.foot-brand .brand{font-size:17px}
.foot-brand > p{
  margin-top:14px;max-width:42ch;
  font-size:13.5px;line-height:1.65;color:var(--text-2);
}
.foot-terms{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);width:max-content;overflow:hidden;
}
.foot-terms li{padding:11px 18px;border-right:1px solid var(--line-soft)}
.foot-terms li:last-child{border-right:0}
.foot-terms b{
  display:block;font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.foot-terms li:nth-child(3) b{color:var(--text-2)}
.foot-terms span{display:block;margin-top:3px;font-size:11px;color:var(--text-3)}

.foot-cols{display:flex;gap:56px}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:150px}
.foot-col h4{
  margin:0 0 5px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.foot-col a{
  font-size:13.5px;color:var(--text-2);width:max-content;
  transition:color .14s var(--ease);
}
.foot-col a:hover{color:var(--text)}
.foot-col a i{font-style:normal;color:var(--text-3);font-size:11px}

.foot-base{
  border-top:1px solid var(--line-soft);
  max-width:var(--chrome);margin:0 auto;
  padding:18px var(--gutter) 40px;
}
.foot-ca{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
}
.foot-ca b{
  font-family:var(--mono);font-weight:500;color:var(--warn);
  letter-spacing:.02em;text-transform:none;
}
.foot-base p{
  margin-top:14px;max-width:96ch;
  font-size:12px;line-height:1.7;color:var(--text-3);
}