/* ============================================================
   Xalori — premium executive intelligence
   Single stylesheet. No web fonts, no external assets, no
   inline styles anywhere in the site (CSP: style-src 'self').
   ============================================================ */

:root{
  /* Base — deep graphite with a trace of navy */
  --bg:          #0A0E13;
  --bg-2:        #0C1117;

  /* Structure — used sparingly */
  --hair:        rgba(255,255,255,.075);
  --hair-2:      rgba(255,255,255,.12);
  --hair-3:      rgba(255,255,255,.30);

  /* Type */
  --text:        #EEF2F6;
  --text-2:      #A9B6C3;
  --text-3:      #8C9AA8;

  /* Signature accent — used selectively */
  --accent:      #45CDE6;
  --accent-2:    #86DFEF;
  --accent-ink:  #04212B;

  --max:         1120px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* native scrolling only — no scroll hijacking */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;color:var(--text);font-weight:600;line-height:1.14;letter-spacing:-.024em;}
h1{font-size:clamp(2.4rem,4.6vw,3.7rem);letter-spacing:-.033em;line-height:1.07;}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.028em;}
h3{font-size:1.05rem;letter-spacing:-.012em;line-height:1.35;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
dl,dd{margin:0;}

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
:focus:not(:focus-visible){outline:none;}

.skip-link{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;border-radius:6px;font-weight:650;font-size:.95rem;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:16px;text-decoration:none;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
#main{scroll-margin-top:88px;}

/* Eyebrows are quiet now — the accent no longer marks every section */
.eyebrow{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  font-weight:600;color:var(--text-3);margin:0 0 22px;
}

/* Scroll reveal — JS-gated, disabled under reduced motion */
.js .reveal{opacity:0;transform:translateY(14px);}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);}

/* ============================================================
   Header — thin, quiet, unobtrusive
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,14,19,.86);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--hair);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:var(--text);font-weight:600;font-size:1.05rem;letter-spacing:.01em;
}
.brand:hover{text-decoration:none;color:var(--text);}
.brand svg{display:block;flex:0 0 auto;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  color:var(--text-3);font-size:.9rem;font-weight:450;border-radius:5px;
  transition:color .16s var(--ease);
}
.nav-links a:hover{color:var(--text);text-decoration:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border-radius:5px;
  font-size:.94rem;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-2);color:var(--accent-ink);}
.btn-quiet{background:transparent;color:var(--text);border-color:var(--hair-3);}
.btn-quiet:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.45);color:var(--text);}
.nav .btn{min-height:40px;padding:0 18px;font-size:.875rem;}
.actions{display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   Sections — generous, evenly cadenced
   ============================================================ */
.section{padding:150px 0;position:relative;scroll-margin-top:88px;}
.section + .section{border-top:1px solid var(--hair);}

.head{max-width:52ch;margin-bottom:76px;}
.head-sub{margin-top:22px;color:var(--text-2);font-size:1.05rem;line-height:1.68;}

.note{
  margin-top:64px;max-width:82ch;
  font-size:.95rem;line-height:1.72;color:var(--text-3);
  padding-left:22px;border-left:1px solid var(--hair-2);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding:132px 0 0;overflow:hidden;}
.hero-field{
  position:absolute;top:-360px;left:50%;width:1500px;height:900px;
  transform:translateX(-58%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(69,205,230,.075),transparent 72%);
}
.hero-lead{position:relative;}
.hero h1{max-width:19ch;}
.lede{
  margin-top:30px;max-width:50ch;
  font-size:1.19rem;line-height:1.62;color:var(--text-2);
}
.hero .actions{margin-top:44px;}

.status{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:34px;
  font-size:.795rem;font-weight:500;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-3);
}
.status .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---------- Signal Engine: the hero visual ---------- */
.engine{position:relative;margin-top:104px;}
.engine-caption{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;
  font-weight:600;color:var(--text-3);margin-bottom:44px;
}
.track{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:56px;
}
/* the hairline the signal travels along */
.track::before{
  content:"";position:absolute;left:4px;right:4px;top:5px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 8%,var(--hair-2) 92%,transparent);
}
.track::after{
  content:"";position:absolute;top:4px;left:0;
  width:130px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:travel 7.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes travel{
  0%{left:0;opacity:0;}
  10%{opacity:.8;}
  90%{opacity:.8;}
  100%{left:calc(100% - 130px);opacity:0;}
}
.node{position:relative;padding-top:34px;}
.node .mark{
  position:absolute;top:0;left:0;
  width:11px;height:11px;border-radius:50%;
  border:1px solid var(--hair-3);background:var(--bg);
}
.node-mid .mark{border-color:var(--accent);box-shadow:0 0 0 4px rgba(69,205,230,.1);}
.node-mid .mark::after{
  content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent);
}
.node-kind{
  font-size:1.06rem;font-weight:600;color:var(--text);
  letter-spacing:-.012em;margin-bottom:9px;
}
.node-mid .node-kind{color:var(--accent-2);}
.node-desc{font-size:.945rem;color:var(--text-3);line-height:1.6;max-width:32ch;}

/* ---------- Scope rail ---------- */
.rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:40px;
  margin-top:110px;padding:36px 0 0;
  border-top:1px solid var(--hair);
}
.rail dt{
  font-size:.685rem;text-transform:uppercase;letter-spacing:.17em;
  font-weight:600;color:var(--text-3);margin-bottom:11px;
}
.rail dd{font-size:.95rem;color:var(--text);line-height:1.55;}

/* ============================================================
   How it works — editorial list, no cards
   ============================================================ */
.steps{max-width:800px;}
.steps li{
  display:grid;grid-template-columns:76px 1fr;
  gap:0 12px;align-items:baseline;
  padding:30px 0;border-top:1px solid var(--hair);
}
.steps li:last-child{border-bottom:1px solid var(--hair);}
.step-n{
  font-size:.76rem;font-weight:600;letter-spacing:.14em;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.steps h3{margin-bottom:8px;}
.steps p{font-size:.97rem;color:var(--text-3);line-height:1.68;max-width:56ch;}

/* ============================================================
   Sample intelligence — briefs, not cards
   ============================================================ */
.disclosure{
  max-width:78ch;margin-bottom:72px;
  font-size:.925rem;line-height:1.7;color:var(--text-3);
  padding-left:22px;border-left:1px solid var(--hair-2);
}
.disclosure strong{color:var(--text-2);font-weight:600;}

.briefs{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
.brief{border-top:1px solid var(--hair-2);padding-top:26px;}
.brief-flag{
  font-size:.665rem;text-transform:uppercase;letter-spacing:.19em;
  font-weight:600;color:var(--text-3);margin-bottom:20px;
}
.brief h3{font-size:1.12rem;line-height:1.3;margin-bottom:7px;}
.brief-sub{font-size:.875rem;color:var(--text-3);margin-bottom:26px;line-height:1.5;}
.brief dl > div{padding:13px 0;border-top:1px solid var(--hair);}
.brief dl > div:first-child{border-top:0;padding-top:0;}
.brief dt{
  font-size:.665rem;text-transform:uppercase;letter-spacing:.15em;
  font-weight:600;color:var(--text-3);margin-bottom:6px;
}
.brief dd{font-size:.93rem;color:var(--text);line-height:1.5;}
.brief-src{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:.79rem;letter-spacing:.03em;color:var(--text-3);
}

/* ---------- Provenance labels — understated, text-led ---------- */
.prov{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:8px;white-space:nowrap;vertical-align:baseline;
  font-size:.645rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);
}
.prov::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;
}
.ps::before{background:var(--accent);}
.pd::before{background:var(--text-3);}
.pi::before{background:transparent;border:1px solid var(--text-3);width:6px;height:6px;}

/* ============================================================
   Who it's for — editorial row
   ============================================================ */
.audience{display:grid;grid-template-columns:repeat(5,1fr);gap:34px;}
.audience li{border-top:1px solid var(--hair-2);padding-top:22px;}
.a-name{display:block;font-size:1.02rem;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.3;min-height:2.6em;}
.a-desc{display:block;margin-top:9px;font-size:.86rem;color:var(--text-3);line-height:1.5;}

/* ============================================================
   Data integrity
   ============================================================ */
.integrity{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;}
.integrity > div{border-top:1px solid var(--hair-2);padding-top:26px;}
.int-label{margin:0 0 20px;font-size:.7rem;letter-spacing:.18em;gap:9px;}
.integrity h3{margin-bottom:12px;font-size:1.04rem;}
.integrity p{font-size:.945rem;color:var(--text-3);line-height:1.68;}

/* ============================================================
   Closing
   ============================================================ */
.closing{padding:160px 0 170px;background:var(--bg-2);}
.closing-inner{max-width:34ch;}
.closing h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
.closing p{margin-top:24px;color:var(--text-2);max-width:52ch;font-size:1.05rem;}
.closing .actions{margin-top:40px;}
.closing .direct{margin-top:24px;font-size:.92rem;color:var(--text-3);}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{border-top:1px solid var(--hair);padding:56px 0 72px;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;}
.foot-links{display:flex;flex-wrap:wrap;gap:4px;}
.foot-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--text-3);font-size:.9rem;border-radius:5px;
}
.foot-links a:hover{color:var(--text);text-decoration:none;}
.foot-legal{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--hair);
  font-size:.83rem;color:var(--text-3);max-width:88ch;line-height:1.7;
}

/* ============================================================
   Legal document pages
   ============================================================ */
.doc{padding:88px 0 120px;}
.doc-inner{max-width:700px;margin:0 auto;}
.doc h1{font-size:clamp(2rem,4vw,2.7rem);margin-bottom:14px;}
.doc .updated{color:var(--text-3);font-size:.88rem;letter-spacing:.03em;margin-bottom:34px;}
.doc .doc-intro{color:var(--text-2);font-size:1.08rem;line-height:1.68;margin-bottom:10px;}
.doc h2{font-size:1.05rem;margin:54px 0 16px;letter-spacing:-.012em;}
.doc p{margin-bottom:17px;color:var(--text-2);}
.doc ul{margin:0 0 17px;padding-left:20px;list-style:disc;}
.doc li{margin-bottom:11px;color:var(--text-2);}
.doc strong{color:var(--text);font-weight:600;}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  color:var(--text);border-bottom:1px solid var(--hair-2);padding-bottom:1px;
}
.doc-note{
  margin:44px 0 0;padding-left:22px;border-left:1px solid var(--hair-2);
  font-size:.9rem;color:var(--text-3);line-height:1.7;
}

/* ============================================================
   Responsive — mobile is composed, not stacked
   ============================================================ */
@media (max-width:1000px){
  .track{grid-template-columns:1fr;row-gap:44px;}
  .track::before{
    left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--hair-2) 6%,var(--hair-2) 94%,transparent);
  }
  .track::after{
    top:0;left:4px;width:3px;height:100px;
    background:linear-gradient(180deg,transparent,var(--accent),transparent);
    animation-name:travel-y;
  }
  @keyframes travel-y{
    0%{top:0;opacity:0;}
    10%{opacity:.8;}
    90%{opacity:.8;}
    100%{top:calc(100% - 100px);opacity:0;}
  }
  .node{padding-top:0;padding-left:30px;}
  .node .mark{top:6px;}
  .node-desc{max-width:46ch;}
  .briefs{grid-template-columns:1fr;gap:52px;}
  .integrity{grid-template-columns:1fr;gap:44px;}
  .audience{grid-template-columns:1fr 1fr;gap:28px;}
  .rail{grid-template-columns:1fr 1fr;gap:32px 40px;}
}

@media (max-width:720px){
  body{font-size:16px;line-height:1.66;}
  .wrap{padding:0 24px;}
  .nav{height:66px;}
  .nav-links{display:none;}

  .section{padding:88px 0;}
  .head{margin-bottom:48px;}
  .head-sub{font-size:1rem;margin-top:18px;}

  .hero{padding:64px 0 0;}
  .hero h1{max-width:none;font-size:clamp(2.15rem,8.2vw,2.9rem);}
  .lede{font-size:1.06rem;margin-top:22px;}
  .hero .actions{margin-top:34px;}
  .actions{gap:12px;flex-direction:column;align-items:stretch;}
  .actions .btn{width:100%;}
  .status{margin-bottom:26px;font-size:.72rem;letter-spacing:.05em;line-height:1.5;align-items:flex-start;}
  .status .dot{margin-top:.55em;}

  .engine{margin-top:64px;}
  .engine-caption{margin-bottom:32px;}
  .track{row-gap:34px;}
  .node-kind{font-size:1rem;}

  .rail{grid-template-columns:1fr;gap:0;margin-top:64px;padding-top:0;border-top:0;}
  .rail > div{padding:22px 0;border-top:1px solid var(--hair);}

  .steps li{grid-template-columns:1fr;gap:0;padding:26px 0;}
  .step-n{display:block;margin-bottom:10px;}

  .disclosure{margin-bottom:48px;}
  .briefs{gap:44px;}
  .audience{grid-template-columns:1fr;gap:0;}
  .audience li{border-top:1px solid var(--hair);padding:20px 0;}
  .a-name{min-height:0;}
  .audience li:first-child{border-top:1px solid var(--hair-2);}

  .integrity{gap:36px;}
  .note{margin-top:44px;}

  .closing{padding:88px 0 96px;}
  .closing-inner{max-width:none;}
  .foot-top{flex-direction:column;align-items:flex-start;gap:4px;}
  .doc{padding:56px 0 80px;}
  .doc h2{margin-top:42px;}
}

/* ============================================================
   Reduced motion — movement removed, nothing hidden
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1!important;transform:none!important;}
  .track::after{display:none;}
  .status .dot{opacity:1;}
}

/* Printing must never hide content */
@media print{
  .js .reveal{opacity:1!important;transform:none!important;}
  .site-header{position:static;}
  body{background:#fff;color:#000;}
  .track::after{display:none;}
}

/* Forced colors */
@media (forced-colors:active){
  .btn{border:1px solid ButtonText;}
  .prov::before{forced-color-adjust:none;}
}