/* ═══════════════════════════════════════════════════════════
   SYSTRALOGIC — Shared Stylesheet v2
   Brand: Ink Navy #0B1320 · Slate Lavender #8F8EA8 · Mist #C7CCD3
═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --ink:    #0B1320;
  --ink85:  #303641;
  --ink70:  #545A63;
  --ink55:  #797D84;
  --ink40:  #9DA1A6;
  --lav:    #8F8EA8;
  --mist:   #C7CCD3;
  --paper:  #F0F1F2;
  --line:   #E2E3E4;
  --white:  #FFFFFF;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --max:    1200px;
  --ease:      cubic-bezier(.22,.8,.2,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart:cubic-bezier(0.25, 1, 0.5,  1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink85);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05","ss01";
  overflow-x: hidden;
}

/* ─── LOGO SVG THEMING ───────────────────────────────────── */
.lk-ink  { fill: var(--c-ink,  var(--ink)); }
.lk-ctr  { fill: var(--c-ctr,  var(--white)); }
.lk-mark { fill: var(--c-mark, var(--mist)); }
.ctx-light { --c-ctr: var(--white); }
.ctx-dark  { --c-ink: var(--white); --c-ctr: var(--ink); --c-mark: var(--lav); }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 48px; }
@media(max-width:768px){ .container { padding: 0 20px; } }

/* ─── TYPE ───────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lav);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.kicker-dark { color: rgba(143,142,168,.7); }
.kicker-accent { color: var(--lav); font-weight: 500; }

h1,h2,h3 { letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
h1 { font-size: clamp(36px,5.2vw,68px); font-weight: 600; }
h2 { font-size: clamp(26px,3.8vw,46px); font-weight: 600; }
h3 { font-size: clamp(18px,2.2vw,24px); font-weight: 600; }
p  { line-height: 1.72; color: var(--ink70); }
p.lead { font-size: 19px; line-height: 1.62; color: var(--ink85); }
a  { color: inherit; text-decoration: none; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 6px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: all .22s var(--ease);
  border: none; white-space: nowrap;
}
.btn svg { width:15px; height:15px; flex-shrink:0; transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-white   { background: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--mist); }

.btn-outline-white {
  background: transparent; color: rgba(199,204,211,.85);
  border: 1px solid rgba(199,204,211,.28);
}
.btn-outline-white:hover { border-color: var(--mist); color: var(--white); }

.btn-dark  { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink85); }

.btn-outline-dark {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(11,19,32,.25);
}
.btn-outline-dark:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn-lav { background: rgba(143,142,168,.15); color: var(--mist); border: 1px solid rgba(143,142,168,.25); }
.btn-lav:hover { background: rgba(143,142,168,.25); color: var(--white); }

.btn:active { transform: scale(0.97); transition-duration: 0.08s; }

/* ─── SCROLL REVEAL ─────────────────────────────────────── */
.rv { transition: opacity .72s var(--ease-expo), transform .72s var(--ease-expo); }
.anim-ready .rv          { opacity: 0; transform: translateY(24px); }
.anim-ready .rv.in       { opacity: 1; transform: none; }
.anim-ready .rv-left     { transform: translateX(-24px); }
.anim-ready .rv-right    { transform: translateX(24px); }
.anim-ready .rv-scale    { transform: scale(.96); }
.anim-ready .rv-left.in,
.anim-ready .rv-right.in,
.anim-ready .rv-scale.in { transform: none; }

.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}
.d7{transition-delay:.49s} .d8{transition-delay:.56s}

/* ─── NAV ────────────────────────────────────────────────── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
#nav.scrolled {
  background: rgba(11,19,32,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo svg { width: 154px; height: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 13.5px; color: rgba(199,204,211,.65);
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content:""; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--lav); transform:scaleX(0);
  transform-origin:left; transition: transform .25s var(--ease);
}
.nav-links a:hover, .nav-links a.active, .nav-links a.nav-active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after, .nav-links a.nav-active::after { transform: scaleX(1); }

/* CTA button in nav */
.nav-links a.btn { color: var(--ink); }
.nav-links a.btn::after { display: none; }
.nav-links a.btn-white { background: var(--white); color: var(--ink); }
.nav-links a.btn-white:hover { background: var(--mist); color: var(--ink); }

.nav-cta { padding: 9px 20px !important; font-size: 13.5px !important; }

.nav-burger {
  display: none; flex-direction: column; gap:5px;
  background:none; border:none; padding:8px; cursor:pointer;
}
.nav-burger span {
  display:block; width:22px; height:1.5px; background:var(--mist);
  border-radius:2px; transition: all .25s;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed; top:68px; left:0; right:0; bottom:0;
  background: var(--ink); z-index:199;
  flex-direction: column; padding: 40px 28px;
  gap: 0; overflow-y: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.nav-drawer.open {
  display: flex; opacity:1; transform:none; pointer-events:all;
}
.nav-drawer a {
  font-size: 20px; font-weight: 500; color: var(--mist);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s;
}
.nav-drawer a:hover { color: var(--white); }
.nav-drawer .drawer-cta {
  margin-top: 32px; padding: 16px 24px; text-align:center;
  background: rgba(255,255,255,.07); border-radius: 8px;
  font-size: 15px; color: var(--white); border: 1px solid rgba(255,255,255,.1);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 80px 0 36px;
}
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 56px; margin-bottom: 60px;
}
.footer-brand svg { width:148px; height:auto; display:block; }
.footer-brand p {
  font-size: 13.5px; color: var(--ink40); line-height:1.75;
  margin-top:18px; max-width:30ch;
}
.footer-locs { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.footer-loc {
  font-family: var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink55);
  display:flex; align-items:center; gap:7px;
}
.footer-loc::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--lav); flex-shrink:0;
}
.footer-col h4 {
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink55); margin-bottom:18px; font-family:var(--mono);
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col a { font-size:14px; color:var(--ink40); transition:color .2s; }
.footer-col a:hover { color:var(--mist); }
.footer-social { display:flex; gap:10px; margin-top:22px; }
.footer-social a {
  width:34px; height:34px; border:1px solid rgba(255,255,255,.1); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--ink40);
  transition: border-color .2s, color .2s;
}
.footer-social a:hover { border-color:var(--lav); color:var(--mist); }
.footer-social svg { width:14px; height:14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding-top:26px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
}
.footer-copy {
  font-family:var(--mono); font-size:11px; color:var(--ink55); letter-spacing:.06em;
}
.footer-legal { display:flex; gap:22px; }
.footer-legal a {
  font-family:var(--mono); font-size:11px; color:var(--ink55);
  transition:color .2s;
}
.footer-legal a:hover { color:var(--mist); }

/* ─── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  background: var(--ink); min-height: 420px;
  display: flex; align-items: flex-end;
  padding: 140px 0 80px; position:relative; overflow:hidden;
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 60%, #000, transparent 75%);
}
.page-hero-corner {
  position:absolute; width:90px; height:90px;
  border: 1.5px solid rgba(143,142,168,.25);
}
.page-hero-corner.tl { top:88px; left:48px; border-right:0; border-bottom:0; }
.page-hero-corner.br { bottom:32px; right:48px; border-left:0; border-top:0; }
.page-hero-content { position:relative; z-index:2; max-width:680px; }
.page-hero-content .kicker { color:var(--lav); }
.page-hero-content h1 { color:var(--white); margin-bottom:18px; line-height:1.06; }
.page-hero-content p { font-size:18px; color:var(--mist); max-width:54ch; }

/* ─── SECTION SPACING ────────────────────────────────────── */
.section { padding: 112px 0; }
.section-sm { padding: 72px 0; }
.section-dark { background: var(--ink); }
.section-paper { background: var(--paper); }
.section-white { background: var(--white); }

/* ─── GRID BG UTIL ───────────────────────────────────────── */
.grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 50px 50px;
}
.grid-bg-light {
  background-image:
    linear-gradient(rgba(11,19,32,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,19,32,.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ─── CORNER DEVICE ──────────────────────────────────────── */
.corner-device {
  position:absolute; width:80px; height:80px;
  border: 1.5px solid rgba(143,142,168,.22);
}
.corner-device.tl { top:24px; left:24px; border-right:0; border-bottom:0; }
.corner-device.br { bottom:24px; right:24px; border-left:0; border-top:0; }
.corner-device.tr { top:24px; right:24px; border-left:0; border-bottom:0; }
.corner-device.bl { bottom:24px; left:24px; border-right:0; border-top:0; }

/* ─── RESPONSIVE NAV ─────────────────────────────────────── */
@media(max-width:900px){
  #nav { padding: 0 20px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:36px; }
  .page-hero { padding: 120px 0 60px; }
  .page-hero-corner.br { display:none; }
}
@media(max-width:600px){
  .footer-grid { grid-template-columns: 1fr; gap:28px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED SCROLL-REVEAL  (rv upgrades — all pages)
   Elevates section reveals to match the hero animation style
═══════════════════════════════════════════════════════════ */

/* Section headings: blur-dissolve rise, like the hero h1 */
h2.rv, h3.rv {
  transition: opacity .96s var(--ease-expo), transform .96s var(--ease-expo), filter .96s var(--ease-expo);
}
.anim-ready h2.rv,
.anim-ready h3.rv {
  transform: translateY(36px);
  filter: blur(2.5px);
}
.anim-ready h2.rv.in,
.anim-ready h3.rv.in  { transform: none; filter: blur(0); }

/* Kickers & labels: slide from left like the hero eyebrow */
.anim-ready .kicker.rv      { transform: translateX(-14px); }
.anim-ready .kicker.rv.in   { transform: none; }

/* Lead paragraphs: subtle blur rise */
.lead.rv {
  transition: opacity .84s var(--ease-expo), transform .84s var(--ease-expo), filter .84s var(--ease-expo);
}
.anim-ready .lead.rv        { transform: translateY(22px); filter: blur(1px); }
.anim-ready .lead.rv.in     { transform: none; filter: blur(0); }

/* Cards with a slight blur for more atmosphere */
.anim-ready .sv-card.rv,
.anim-ready .why-card.rv {
  transform: translateY(32px);
  filter: blur(1px);
}
.anim-ready .sv-card.rv.in,
.anim-ready .why-card.rv.in { transform: none; filter: blur(0); }
.sv-card.rv, .why-card.rv {
  transition: opacity .76s var(--ease-expo), transform .76s var(--ease-expo), filter .76s var(--ease-expo);
}

/* Outcome metrics: slide in from the side (they live on the right panel) */
.anim-ready .out-metric.rv   { transform: translateX(20px); }
.anim-ready .out-metric.rv.in{ transform: none; }

/* ═══════════════════════════════════════════════════════════
   PAGE-HERO ENTRANCE CHOREOGRAPHY  (all inner pages)
   Shared .page-hero structure: .kicker / h1 / p / corners
═══════════════════════════════════════════════════════════ */
@keyframes ph-slide   { from { opacity:0; transform:translateX(-14px);               } to { opacity:1; transform:none;        } }
@keyframes ph-rise-lg { from { opacity:0; transform:translateY(32px); filter:blur(2px);} to { opacity:1; transform:none; filter:blur(0); } }
@keyframes ph-rise    { from { opacity:0; transform:translateY(18px);                 } to { opacity:1; transform:none;        } }
@keyframes ph-corner  { from { opacity:0; transform:scale(0.55);                      } to { opacity:1; transform:none;        } }
@keyframes ph-fade    { from { opacity:0;                                              } to { opacity:1;                        } }

/* Neutralise the rv transition for page-hero-content — CSS animations own these */
.page-hero-content .rv,
.page-hero-content .rv.in { transition: none !important; }

/* Content choreography */
.page-hero-content .kicker              { animation: ph-slide   600ms var(--ease-expo)  80ms both; }
.page-hero-content h1                   { animation: ph-rise-lg 880ms var(--ease-expo) 220ms both; }
.page-hero-content p                    { animation: ph-rise    720ms var(--ease-expo) 380ms both; }
.page-hero-content > div:not(.kicker)   { animation: ph-rise    680ms var(--ease-expo) 460ms both; }

/* Decorative elements */
.page-hero-grid                         { animation: ph-fade 500ms ease 0ms both, sl-grid-drift 56s linear .5s infinite; }
.anim-ready .page-hero-corner           { opacity: 0; }
.anim-ready .page-hero-corner.tl {
  animation:        ph-corner 520ms var(--ease-expo) 320ms both;
  transform-origin: top left;
}
.anim-ready .page-hero-corner.br {
  animation:        ph-corner 520ms var(--ease-expo) 460ms both;
  transform-origin: bottom right;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATE — Calm · Intelligent · Inevitable
   Precision motion system. Every element earns its movement.
═══════════════════════════════════════════════════════════ */

/* ── Page entrance fade ───────────────────────────────────── */
@keyframes sl-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: sl-page-in .28s ease both; }


/* ── Scroll progress indicator ────────────────────────────── */
#sl-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  height: 1.5px; background: var(--lav); opacity: .55;
  pointer-events: none; transform-origin: left;
  transform: scaleX(0);
  transition: transform .08s linear;
}

/* ── Ambient grid drift (operational pulse) ───────────────── */
@keyframes sl-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 50px 50px, 50px 50px; }
}
.grid-bg       { animation: sl-grid-drift 56s linear infinite; }
.grid-bg-light { animation: sl-grid-drift 70s linear infinite; }

/* ── Why-card rule line: draws in with the card ───────────── */
.anim-ready .why-card.rv .why-divider {
  transform: scaleX(0); opacity: 0;
  transform-origin: left center;
  transition: transform .72s var(--ease-expo) .12s, opacity .5s ease .12s;
}
.anim-ready .why-card.rv.in .why-divider { transform: scaleX(1); opacity: .35; }

/* ── Outcome metric: directional entry with depth ─────────── */
.out-metric.rv {
  transition: opacity .72s var(--ease-expo), transform .72s var(--ease-expo), filter .72s var(--ease-expo);
}
.anim-ready .out-metric.rv     { transform: translateX(28px); filter: blur(.5px); }
.anim-ready .out-metric.rv.in  { transform: none; filter: blur(0); }

/* Value inside metric: pinch-in from wider letter-spacing */
@keyframes sl-val-in {
  from { opacity: 0; transform: translateY(10px); letter-spacing: .04em; }
  to   { opacity: 1; transform: none;             letter-spacing: -.04em; }
}
.anim-ready .out-metric.rv.in .out-val {
  animation: sl-val-in .48s var(--ease-expo) .1s both;
}

/* ── Pipe node: left accent line on hover (hero panel) ────── */
.pipe-node { position: relative; overflow: hidden; }
.pipe-node::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px; background: var(--lav); border-radius: 1px;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .26s var(--ease-quart), opacity .18s;
  opacity: 0;
}
.pipe-node:hover::before { transform: scaleY(1); opacity: .9; }

/* ── Agent flow node: same left accent ───────────────────── */
.al-fnode { position: relative; overflow: hidden; }
.al-fnode::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; background: var(--lav); border-radius: 1px;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .24s var(--ease-quart), opacity .16s;
  opacity: 0;
}
.al-fnode:hover::before { transform: scaleY(1); opacity: .7; }

/* ── Strip step circle: lift + glow on hover ─────────────── */
.strip-num {
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
}
.strip-step:hover .strip-num {
  box-shadow: 0 0 0 4px rgba(143,142,168,.12);
}

/* ── Footer location dots: pulse alive ───────────────────── */
@keyframes sl-dot-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}
.footer-loc::before {
  animation: sl-dot-pulse 3.2s ease-in-out infinite;
}
.footer-loc:nth-child(2)::before { animation-delay: 1.6s; }

/* ── Nav CTA: sharper arrow response ────────────────────── */
.nav-cta svg { transition: transform .18s var(--ease-quart); }
.nav-cta:hover svg { transform: translateX(4px); }

/* ─── ACCESSIBILITY: REDUCED MOTION ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-delay:           0ms    !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}