:root{
  --sv-bg:#0b0c10; --sv-fg:#e6e6e6; --sv-muted:#b9bdc3; --sv-line:#20242b; --sv-card:#111318;
  --sv-grad-1:#10172b; --sv-grad-2:#070f18;
  --sv-blue:#3B4CCA; --sv-blush:#F4A7B9; --sv-violet:#8B7FF6; --sv-pearl:#E5E6EB; --sv-gold:#D4A017;
  --sv-pop-1:var(--sv-blue); --sv-pop-2:var(--sv-violet);
  --sv-max:1120px;
  --role-architect: var(--sv-gold);
  --role-keeper:#7a909f; --role-core:#2b3866; --role-runner:#4aa8ff; --role-flux:var(--sv-violet); --role-vessel:var(--sv-blush);
}
@media (prefers-color-scheme: light){
  :root{
    --sv-bg:#ffffff; --sv-fg:#0f172a; --sv-muted:#334155; --sv-line:#e2e8f0; --sv-card:#f8fafc;
    --sv-grad-1:#eaf0ff; --sv-grad-2:#ffffff; --sv-pop-1:#2f46bf; --sv-pop-2:#6f64e8;
  }
}
/* minimal layout helpers so sections don’t collapse into sadness */
.sv-wrap{color:var(--sv-fg); background:var(--sv-bg);}
.sv-section{padding:64px 20px;}
.sv-container{max-width:var(--sv-max); margin:0 auto;}
.sv-muted{color:var(--sv-muted);}
.sv-bg-alt{background:linear-gradient(180deg, var(--sv-grad-1) 0%, var(--sv-grad-2) 100%); border-top:1px solid var(--sv-line); border-bottom:1px solid var(--sv-line);}
.sv-card{background:linear-gradient(180deg, var(--sv-grad-1) 0%, var(--sv-grad-2) 100%); border:1px solid var(--sv-line); border-radius:16px; padding:20px; transition:transform .12s ease, box-shadow .12s ease, border-color .2s ease;}
.sv-card:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.28); border-color:var(--sv-pop-1);}
.sv-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; justify-content:center;}
.sv-btn{display:inline-block; padding:14px 20px; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid transparent; transition:transform .08s ease, background .2s ease, border-color .2s ease;}
.sv-btn:active{transform:translateY(1px);}
.sv-btn--solid{color:#fff; background:linear-gradient(90deg, var(--sv-pop-1) 0%, var(--sv-pop-2) 100%);}
.sv-btn--ghost{color:var(--sv-fg); background:transparent; border:1px solid var(--sv-line);}
.sv-btn--ghost:hover{border-color:var(--sv-pop-1); background:color-mix(in oklab, var(--sv-pop-1) 12%, transparent);}
.sv-hero{padding:96px 20px 72px; background:linear-gradient(180deg, var(--sv-grad-1) 0%, var(--sv-grad-2) 100%); border-bottom:1px solid var(--sv-line); text-align:center; color:#fff;}
.sv-hero h1{font-size:clamp(32px,4vw,52px); line-height:1.1; margin:0 0 12px; letter-spacing:-.01em;}
.sv-subhead{font-size:clamp(16px,2.2vw,18px); color:var(--sv-muted); max-width:780px; margin:0 auto;}
.sv-banner img{display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-bottom:1px solid var(--sv-line);}
.sv-backtop{position:fixed; bottom:20px; right:20px; background:linear-gradient(90deg, var(--sv-pop-1) 0%, var(--sv-pop-2) 100%); border:1px solid var(--sv-line); padding:10px 14px; border-radius:8px; font-size:14px; text-decoration:none; color:#fff;}