/* ALVANTIS — shared service-page stylesheet */
:root{
  --obsidian:#050505; --deep:#0B0B0B; --graphite:#111114;
  --ink:#C6C6C8; --ink2:#9BA0A4; --label:#7C8892; --hair:#2A2A2A; --border:#2E2E2E;
  --aluminium:#B8B8B8; --titanium:#D6D6D6; --soft-white:#F4F4F4;
  --cold:#7C8892; --bronze:#9A7F52;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(24px,7vw,140px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:#000;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--obsidian);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:clamp(15px,1.02vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:#33342f;color:var(--soft-white)}
a:focus-visible,button:focus-visible{outline:2px solid var(--titanium);outline-offset:3px;border-radius:1px}

/* header */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);background:rgba(6,6,7,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.hd .brand{display:flex;align-items:center;gap:.8rem}
.hd .brand img{width:24px;height:24px;object-fit:contain}
.hd .brand b{font-weight:500;font-size:.7rem;letter-spacing:.4em;color:var(--soft-white)}
.hd nav{display:flex;align-items:center;gap:1.6rem}
.hd nav a.l{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);transition:color .3s}
.hd nav a.l:hover{color:var(--soft-white)}
@media(max-width:720px){.hd nav a.l{display:none} .hd .brand b{display:none}}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--titanium);border:1px solid #3A3A3A;padding:.85rem 1.6rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.btn:hover{color:#0a0a0a;background:var(--titanium);border-color:var(--titanium)}
.btn .arw{transition:transform .4s var(--ease)}.btn:hover .arw{transform:translateX(3px)}

/* hero */
.phero{padding:14vh var(--gutter) 9vh;border-bottom:1px solid var(--hair);
  background:radial-gradient(ellipse 80% 70% at 30% 0%,#0d0d10,#050505 70%)}
.phero .bc{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:1.6rem}
.phero .bc a{color:var(--ink2)}.phero .bc a:hover{color:var(--soft-white)}
.phero .kick{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--cold);margin-bottom:1.2rem}
.phero h1{font-weight:500;font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.025em;color:var(--soft-white);max-width:16em}
.phero .lead{margin-top:1.8rem;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:var(--titanium);max-width:34em;letter-spacing:-.01em}
.phero .cta{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap}

/* prose sections */
.sec{padding:9vh var(--gutter);border-bottom:1px solid var(--hair)}
.sec.tight{padding:7vh var(--gutter)}
.sec h2{font-weight:500;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;color:var(--soft-white);max-width:18em}
.sec .p{margin-top:1.4rem;max-width:42em;color:var(--ink)}
.sec .p + .p{margin-top:1.1rem}
.sec .p b{color:var(--soft-white);font-weight:500}
.sec .num{font-family:var(--mono);font-weight:300;line-height:.8;letter-spacing:-.02em;font-size:clamp(3rem,9vw,7rem);
  color:transparent;-webkit-text-stroke:1px #3d3d3d;display:block;margin-bottom:1.4rem}

/* step / feature list */
.steps{margin-top:3rem;border-top:1px solid var(--hair);max-width:52em}
.steps .r{display:flex;gap:1.4rem;padding:1.3rem 0;border-bottom:1px solid #1c1c1c;align-items:baseline}
.steps .r .i{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cold);min-width:2.4em}
.steps .r .x b{color:var(--soft-white);font-weight:500;display:block;letter-spacing:-.01em}
.steps .r .x span{display:block;margin-top:.3rem;color:var(--ink2);font-size:.94rem}
.chips{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--aluminium);border:1px solid var(--border);padding:.45rem .85rem}

/* related links */
.rel{padding:9vh var(--gutter);background:var(--deep);border-bottom:1px solid var(--hair)}
.rel .kick{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--label);margin-bottom:2.4rem}
.rel .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.rel a{display:block;border:1px solid var(--border);padding:1.8rem;transition:border-color .4s,transform .4s var(--ease);background:var(--graphite)}
.rel a:hover{border-color:#484848;transform:translateY(-3px)}
.rel a b{display:block;font-weight:500;color:var(--soft-white);letter-spacing:-.01em;font-size:1.1rem}
.rel a span{display:block;margin-top:.6rem;color:var(--ink2);font-size:.9rem;line-height:1.5}
.rel a .go{margin-top:1.2rem;display:inline-flex;gap:.5em;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--titanium)}
@media(max-width:820px){.rel .grid{grid-template-columns:1fr}}

/* cta band */
.ctaband{padding:12vh var(--gutter);text-align:center;background:radial-gradient(ellipse 60% 80% at 50% 50%,#0c0c0f,#050505 72%)}
.ctaband h2{font-weight:500;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;color:var(--soft-white);max-width:16em;margin:0 auto}
.ctaband p{margin:1.4rem auto 0;max-width:32em;color:var(--ink2)}
.ctaband .cta{margin-top:2.6rem}

/* footer */
.ft{padding:9vh var(--gutter) 6vh;text-align:center;background:var(--obsidian)}
.ft img{width:min(240px,56vw);height:auto;margin:0 auto;opacity:.9}
.ft .fl{margin-top:1.6rem;font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:#7c7c7c}
.ft .fnav{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.ft .fnav a{color:#9a9a9a;transition:color .3s}.ft .fnav a:hover{color:var(--titanium)}
.ft .fc{margin-top:2.4rem;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#7c7c7c}
.ft .fc a{color:#9a9a9a}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}