/* ============================================================
   Saintz — editorial system
   Monochrome · hairline · type-led. No gradients on text, no glows.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08080a;
  --line:rgba(255,255,255,.075);
  --line-mid:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.02);
  --text:#f4f4f1;
  --muted:#8d8d8a;
  --faint:#57575a;
  --live:#6d9c81;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(22px,4.4vw,64px);
}
html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--sans);background:transparent;color:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:#f4f4f1;color:#08080a}
:focus-visible{outline:1px solid var(--text);outline-offset:4px}

/* film grain — the single texture in the whole system */
body::after{
  content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-2%,2%)}
  33%{transform:translate(2%,-1%)}    50%{transform:translate(-1%,-2%)}
  66%{transform:translate(1%,2%)}     83%{transform:translate(2%,1%)}
}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:.98}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- scroll progress + header ---------- */
.prog{position:fixed;top:0;left:0;height:1px;background:var(--text);z-index:60;width:0;
  transition:width .1s linear;opacity:.55}
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),border-color .4s}
header{border-bottom:1px solid transparent}
header.scrolled{background:rgba(8,8,10,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.nav-link:hover{color:var(--text)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;
  padding:14px 24px;border:1px solid transparent;overflow:hidden;transition:.4s var(--ease)}
.btn svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.btn-solid{background:var(--text);color:#08080a;border-color:var(--text)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-solid:hover svg{transform:translate(3px,-3px)}
.btn-line{color:var(--text);border-color:var(--line-mid)}
.btn-line:hover{border-color:var(--text);transform:translateY(-2px)}

/* ---------- word-rise reveal ---------- */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.rw>span{display:inline-block;transform:translateY(115%);animation:rise 1.1s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;
  padding:130px 0 0}
.hero .kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(26px,4vw,44px);opacity:0;
  animation:fade 1s var(--ease) .1s forwards}
.hero .kicker .rule{height:1px;width:clamp(40px,7vw,90px);background:var(--line-mid)}
.hero h1{font-size:clamp(48px,11.4vw,158px);margin-bottom:clamp(28px,4vw,52px)}
.hero p{color:var(--muted);font-size:clamp(15px,1.55vw,18px);max-width:52ch;line-height:1.6;
  opacity:0;animation:fade 1s var(--ease) .85s forwards}
@keyframes fade{to{opacity:1}}

.hero-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0;
  border-top:1px solid var(--line);opacity:0;animation:fade 1s var(--ease) 1.05s forwards}
.hero-meta .m{flex:1 1 150px;padding:20px 24px 26px 0;border-right:1px solid var(--line)}
.hero-meta .m:last-child{border-right:none;text-align:right;padding-right:0}
.hero-meta .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.hero-meta .v{font-size:14px;color:var(--text)}
.cue{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cue i{width:1px;height:18px;background:var(--line-mid);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--text);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- section frame ---------- */
.sec-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(70px,9vw,130px) 0 34px;border-bottom:1px solid var(--line)}
.sec-top h2{font-size:clamp(20px,2.2vw,26px)}

/* ---------- index rows ---------- */
.row{position:relative;display:grid;grid-template-columns:clamp(46px,5vw,80px) 1fr auto;
  gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(30px,3.6vw,46px) 0;
  border-bottom:1px solid var(--line);isolation:isolate}
.row::before{content:"";position:absolute;inset:0 calc(var(--gut) * -.5);z-index:-1;opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.055),transparent 68%)}
.row:hover::before{opacity:1}
.row .num{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;padding-top:9px;
  transition:color .4s var(--ease)}
.row:hover .num{color:var(--text)}
.row-main{min-width:0}
.row h2{font-size:clamp(26px,4.2vw,50px);display:inline-block;position:relative;transition:transform .5s var(--ease)}
.row h2::after{content:"";position:absolute;left:0;bottom:-.08em;height:1px;width:100%;background:var(--text);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.row:hover h2::after{transform:scaleX(1)}
.row:hover h2{transform:translateX(6px)}
.row .cat{display:flex;align-items:center;gap:9px;margin:14px 0 12px;transition:transform .5s var(--ease)}
.row:hover .cat{transform:translateX(6px)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none}
.row .cat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.row p{color:var(--muted);font-size:clamp(14px,1.35vw,15.5px);line-height:1.62;max-width:56ch;
  transition:transform .5s var(--ease)}
.row:hover p{transform:translateX(6px)}
.row .go{display:flex;align-items:center;gap:12px;white-space:nowrap;padding-top:12px}
.row .host{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);transition:color .4s}
.row .arw{width:16px;height:16px;color:var(--faint);transition:transform .5s var(--ease),color .4s}
.row:hover .host{color:var(--muted)}
.row:hover .arw{color:var(--text);transform:translate(5px,-5px)}

/* ---------- product page ---------- */
.p-head{padding:clamp(130px,15vw,190px) 0 clamp(56px,7vw,90px);border-bottom:1px solid var(--line);position:relative}
.ghost{position:absolute;right:0;top:clamp(96px,12vw,150px);font-family:var(--mono);font-weight:500;
  font-size:clamp(90px,20vw,260px);line-height:1;color:rgba(255,255,255,.022);pointer-events:none;user-select:none;letter-spacing:-.04em}
.back{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:clamp(40px,6vw,72px);transition:color .3s}
.back:hover{color:var(--text)}
.back svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.back:hover svg{transform:translateX(-4px)}
.p-meta{display:flex;align-items:center;gap:10px;margin-bottom:clamp(22px,3vw,34px);
  opacity:0;animation:fade .9s var(--ease) .1s forwards}
.p-meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.p-head h1{font-size:clamp(38px,7.4vw,96px);max-width:15ch;margin-bottom:clamp(24px,3.4vw,40px)}
.p-head .lede{color:var(--muted);font-size:clamp(15px,1.6vw,18.5px);max-width:56ch;line-height:1.62;
  opacity:0;animation:fade 1s var(--ease) .8s forwards}
.p-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4.4vw,52px);
  opacity:0;animation:fade 1s var(--ease) .95s forwards}

/* ---------- capability list ---------- */
.sec{padding:clamp(56px,7vw,100px) 0}
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:clamp(46px,5vw,80px) minmax(150px,240px) 1fr;
  gap:clamp(18px,3vw,44px);padding:clamp(24px,2.8vw,34px) 0;border-bottom:1px solid var(--line);align-items:baseline;
  transition:padding-left .5s var(--ease)}
.cap:hover{padding-left:8px}
.cap .cn{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em}
.cap h3{font-size:clamp(15px,1.5vw,17px);font-weight:500;letter-spacing:-.012em}
.cap p{color:var(--muted);font-size:14.5px;line-height:1.62;max-width:58ch}

/* ---------- spec strip ---------- */
.specs{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec{flex:1 1 180px;padding:26px 26px 30px 0;border-right:1px solid var(--line)}
.spec:last-child{border-right:none}
.spec .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}
.spec .v{font-size:15px}

/* ---------- reveal on scroll ---------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(44px,5vw,70px) 0 clamp(50px,6vw,80px)}
.foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .3s}
.foot-links a:hover{color:var(--text)}
.foot-big{font-size:clamp(30px,6vw,80px);letter-spacing:-.04em;font-weight:500;line-height:.9}

@media(max-width:760px){
  .hero{min-height:92svh;padding-top:110px}
  .hero-meta .m{flex:1 1 50%;border-right:none;padding-right:0}
  .hero-meta .m:last-child{text-align:left}
  .row{grid-template-columns:1fr;gap:0}
  .row .num{display:none}
  .row .go{padding-top:20px}
  .cap{grid-template-columns:1fr;gap:8px}
  .cap .cn{display:none}
  .spec{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line);padding-right:0}
  .spec:last-child{border-bottom:none}
  .ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rw>span{transform:none}[data-rv]{opacity:1;transform:none}
  .hero .kicker,.hero p,.hero-meta,.p-meta,.p-head .lede,.p-cta{opacity:1}
  body::after{display:none}
}

/* ---------- generated imagery ----------
   Set --img (and optionally --img-op) on .hero / .p-head per page.
   isolation:isolate keeps the z-index:-1 layer inside the section, otherwise it
   would paint behind body's solid background and vanish. */
.hero,.p-head{isolation:isolate}
.hero::before,.p-head::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background-image:var(--img,none);background-size:cover;background-position:center;
  opacity:var(--img-op,.18);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%);
}
@media(prefers-reduced-motion:no-preference){
  .hero::before,.p-head::before{animation:imgIn 1.6s var(--ease) both}
}
@keyframes imgIn{
  from{opacity:0;transform:translateX(-50%) scale(1.04)}
  to{opacity:var(--img-op,.18);transform:translateX(-50%) scale(1)}
}

/* ---------- brand mark ----------
   Wordmark inside a square-cornered outlined box; inverts to solid on hover.
   Asymmetric padding compensates for the trailing letter-space so the word
   sits optically centred inside the box. */
.brand{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--text);padding:9px 12px 9px 15px;
  line-height:1;transition:background .35s var(--ease),color .35s var(--ease)
}
.brand:hover{background:var(--text);color:#08080a}
.foot-mark{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--text);padding:12px 16px 12px 20px;margin-bottom:20px;
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;line-height:1
}

/* ---------- deep field ----------
   Three fixed layers behind all content: nebula (-3), star canvas (-2),
   vignette (-1). Background lives on <html> so these remain visible. */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;display:block}
.sky-neb{
  position:fixed;inset:-25%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(32% 26% at 78% 30%, rgba(186,202,255,.038), transparent 66%),
    radial-gradient(46% 34% at 62% 84%, rgba(255,255,255,.03), transparent 64%);
  filter:blur(30px);
  animation:neb 140s ease-in-out infinite alternate;
}
@keyframes neb{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2.5%,0) scale(1.09)}
}
.sky-vig{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 40%, transparent 40%, rgba(0,0,0,.62) 100%);
}
@media(prefers-reduced-motion:reduce){ .sky-neb{animation:none} }