@charset "UTF-8";
/* ==========================================================================
   OrbitX — design system
   assets/orbitx.css · OrbitX Infotech Private Limited
   --------------------------------------------------------------------------
   01 Tokens            07 Section headers      13 Steps / method
   02 Reset             08 Cards                14 Accordion
   03 Typography        09 Feature rows         15 Tabs
   04 Layout            10 Callouts             16 Tables
   05 Navigation        11 Lists                17 Forms
   06 Heroes            12 Connected Floor      18 CTA / Footer
   ========================================================================== */

/* ---------- 01 · Tokens ----------
   Dark is the brand default and lives on bare :root. Light is applied two
   ways: by system preference (for visitors who never touch the switch) and
   by an explicit [data-theme] stamp (which must beat the system setting in
   BOTH directions). Every colour below is a token — nothing is hardcoded in
   a component, or it would only work in one theme. */
:root{
  color-scheme:dark;

  /* brand — taken from the OrbitX mark */
  --brand:#2E6DF6;
  --brand-lt:#5B8CFF;
  --brand-dk:#1A4FD0;
  --brand-soft:rgba(46,109,246,.12);
  --brand-line:rgba(46,109,246,.30);

  /* neutrals, biased blue so they sit with the brand */
  --bg:#0A0E1A;
  --bg-2:#0C1120;
  --surface:#111828;
  --elev:#161F33;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);

  --tx:#EEF2F9;
  --mut:#94A2BD;
  --dim:#64738F;

  /* semantic only — never decorative */
  --warn:#FF7A45;
  --warn-soft:rgba(255,122,69,.10);

  /* theme-dependent surfaces and effects */
  --nav-bg:rgba(10,14,26,.86);
  --grid-line:rgba(255,255,255,.028);
  --glow-1:rgba(46,109,246,.18);
  --glow-2:rgba(91,140,255,.10);
  --menu-shadow:0 32px 70px -22px rgba(0,0,0,.75);
  --card-shadow:none;
  --scroll-thumb:#222C44;
  --scroll-thumb-h:#2E3A56;
  --vis-bg:linear-gradient(165deg,#0F1626,#0A0E1A);
  --badge-bg:rgba(10,14,26,.72);
  --on-brand:#fff;
  --hover-fill:rgba(255,255,255,.05);
  --subtle-fill:rgba(255,255,255,.02);
  --grad-3:#8FB0FF;

  /* canvas drawing colours, read by orbitx.js so the visuals follow the theme */
  --canvas-ring:rgba(46,109,246,.16);
  --canvas-ring-2:rgba(46,109,246,.055);
  --canvas-dot:rgba(91,140,255,.92);
  --canvas-glow:rgba(46,109,246,.9);

  --ff-d:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-m:'JetBrains Mono','SF Mono',Consolas,monospace;

  --wrap:1200px;
  --narrow:860px;
  --nav-h:76px;
  --pad-y:clamp(88px,11vw,148px);
  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Light palette. --brand-lt inverts to a DARKER blue: the light tint used for
   eyebrows and small text on dark would fail contrast on white. */
:root[data-theme="light"]{
  color-scheme:light;
  --brand:#2E6DF6;
  --brand-lt:#1B4FD1;
  --brand-dk:#143FAE;
  --brand-soft:rgba(46,109,246,.07);
  --brand-line:rgba(46,109,246,.22);

  --bg:#FFFFFF;
  --bg-2:#F4F7FB;
  --surface:#FFFFFF;
  --elev:#FFFFFF;
  --line:rgba(12,19,32,.10);
  --line-2:rgba(12,19,32,.17);

  --tx:#0C1320;
  --mut:#55637A;
  --dim:#7A8798;

  --warn:#C2410C;
  --warn-soft:rgba(194,65,12,.07);

  --nav-bg:rgba(255,255,255,.88);
  --grid-line:rgba(12,19,32,.045);
  --glow-1:rgba(46,109,246,.10);
  --glow-2:rgba(91,140,255,.08);
  --menu-shadow:0 24px 56px -20px rgba(12,19,32,.22);
  --card-shadow:0 1px 2px rgba(12,19,32,.04),0 10px 28px -16px rgba(12,19,32,.14);
  --scroll-thumb:#C7D2E0;
  --scroll-thumb-h:#AEBDD0;
  --vis-bg:linear-gradient(165deg,#F4F7FB,#FFFFFF);
  --badge-bg:rgba(255,255,255,.82);
  --on-brand:#fff;
  --hover-fill:rgba(12,19,32,.05);
  --subtle-fill:rgba(12,19,32,.022);
  --grad-3:#143FAE;

  --canvas-ring:rgba(46,109,246,.22);
  --canvas-ring-2:rgba(12,19,32,.07);
  --canvas-dot:rgba(46,109,246,.85);
  --canvas-glow:rgba(46,109,246,.55);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --brand:#2E6DF6;
    --brand-lt:#1B4FD1;
    --brand-dk:#143FAE;
    --brand-soft:rgba(46,109,246,.07);
    --brand-line:rgba(46,109,246,.22);

    --bg:#FFFFFF;
    --bg-2:#F4F7FB;
    --surface:#FFFFFF;
    --elev:#FFFFFF;
    --line:rgba(12,19,32,.10);
    --line-2:rgba(12,19,32,.17);

    --tx:#0C1320;
    --mut:#55637A;
    --dim:#7A8798;

    --warn:#C2410C;
    --warn-soft:rgba(194,65,12,.07);

    --nav-bg:rgba(255,255,255,.88);
    --grid-line:rgba(12,19,32,.045);
    --glow-1:rgba(46,109,246,.10);
    --glow-2:rgba(91,140,255,.08);
    --menu-shadow:0 24px 56px -20px rgba(12,19,32,.22);
    --card-shadow:0 1px 2px rgba(12,19,32,.04),0 10px 28px -16px rgba(12,19,32,.14);
    --scroll-thumb:#C7D2E0;
    --scroll-thumb-h:#AEBDD0;
    --vis-bg:linear-gradient(165deg,#F4F7FB,#FFFFFF);
    --badge-bg:rgba(255,255,255,.82);
    --hover-fill:rgba(12,19,32,.05);
    --subtle-fill:rgba(12,19,32,.022);
    --grad-3:#143FAE;

    --canvas-ring:rgba(46,109,246,.22);
    --canvas-ring-2:rgba(12,19,32,.07);
    --canvas-dot:rgba(46,109,246,.85);
    --canvas-glow:rgba(46,109,246,.55);
  }
}

/* ---------- 02 · Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* No overflow property on html or body. Setting overflow-x (hidden OR clip)
   on either makes the other axis compute to auto, turning that element into a
   scroll container — which breaks position:sticky and scroll reporting.
   Layout is built so nothing overflows horizontally; wide content (tables,
   diagrams) scrolls inside its own container instead. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  background:var(--bg);color:var(--tx);
  font-family:var(--ff-b);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* decorative bleed elements must never widen the page */
.glow,.gridov{max-width:100vw}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--brand);color:var(--on-brand)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-h)}
:focus-visible{outline:2px solid var(--brand-lt);outline-offset:3px;border-radius:4px}

/* ---------- 03 · Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--ff-d);font-weight:700;letter-spacing:-.032em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,4.05rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.35rem);letter-spacing:-.022em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:-.018em}
p{color:var(--mut)}
strong{color:var(--tx);font-weight:600}
.lede{font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.68;color:var(--mut);max-width:65ch}
.mono{font-family:var(--ff-m)}
.grad{background:linear-gradient(96deg,var(--brand-lt) 0%,var(--brand) 55%,var(--grad-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.measure{max-width:65ch}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-m);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand-lt);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}
.eyebrow.warn{color:var(--warn)}

/* ---------- 04 · Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:32px;position:relative;z-index:2}
.wrap.narrow{max-width:var(--narrow)}
.sec{padding-block:var(--pad-y);position:relative}
.sec.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec.tight{padding-block:clamp(56px,7vw,88px)}

.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
.split.wide-l{grid-template-columns:1.15fr .85fr}
.split.wide-r{grid-template-columns:.85fr 1.15fr}
.split.top{align-items:start}
.sticky{position:sticky;top:calc(var(--nav-h) + 36px)}

.stack{display:flex;flex-direction:column}
.stack.s1{gap:10px} .stack.s2{gap:18px} .stack.s3{gap:28px}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center{text-align:center}
.center .lede{margin-inline:auto}
.mt-1{margin-top:14px} .mt-2{margin-top:26px} .mt-3{margin-top:40px} .mt-4{margin-top:clamp(48px,6vw,76px)}

/* ---------- reveal (visible at rest; JS opts in) ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .d1{transition-delay:.07s} .js .d2{transition-delay:.14s}
.js .d3{transition-delay:.21s} .js .d4{transition-delay:.28s}
.js .d5{transition-delay:.35s} .js .d6{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- 05 · Navigation ---------- */
#nav{
  position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:900;
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
#nav.stuck{background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}

/* gap is deliberately 0 — the wordmark and the X are separate flex items
   and any gap would split "Orbit" from "X". Spacing comes from the mark. */
.logo{display:inline-flex;align-items:center;gap:0;font-family:var(--ff-d);font-weight:800;font-size:1.22rem;letter-spacing:-.03em;color:var(--tx);flex:none;white-space:nowrap}
.logo svg{width:32px;height:32px;flex:none;margin-right:10px}
.logo .x{color:var(--brand)}

/* Visually hidden but present for screen readers and the heading outline.
   Used to label sections that are visually self-evident but would otherwise
   leave a gap in the h1 -> h2 -> h3 sequence. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--brand);color:var(--on-brand);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

.nav-links{display:flex;align-items:center;gap:34px}
.nav-links>a,.dd>button{
  font-size:.925rem;font-weight:450;color:var(--mut);
  display:inline-flex;align-items:center;gap:6px;
  padding-block:6px;position:relative;transition:color .2s;
}
.nav-links>a:hover,.dd>button:hover,.nav-links>a[aria-current]{color:var(--tx)}
.nav-links>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--brand);transition:right .32s var(--ease)}
.nav-links>a:hover::after,.nav-links>a[aria-current]::after{right:0}

.dd{position:relative}
.dd>button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s}
.dd:hover>button svg,.dd:focus-within>button svg{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:100%;left:50%;translate:-50% 8px;margin-top:16px;
  width:360px;background:var(--elev);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:8px;opacity:0;visibility:hidden;
  box-shadow:var(--menu-shadow);
  transition:opacity .22s,translate .28s var(--ease),visibility .22s;
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;translate:-50% 0}
.dd-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.dd-menu a{display:block;padding:12px 14px;border-radius:10px;transition:background .18s}
.dd-menu a:hover{background:var(--hover-fill)}
.dd-menu b{display:block;font-family:var(--ff-d);font-weight:600;font-size:.9rem;color:var(--tx);margin-bottom:3px;letter-spacing:-.015em}
.dd-menu span{display:block;font-size:.775rem;color:var(--dim);line-height:1.5}

.burger{display:none;width:24px;height:16px;position:relative;flex:none}
.burger i{position:absolute;inset-inline:0;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:7px}
.burger i:nth-child(3){top:14px}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#mob{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  padding:calc(var(--nav-h) + 32px) 30px 48px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  opacity:0;visibility:hidden;translate:0 -10px;
  transition:opacity .3s ease,translate .3s var(--ease),visibility .3s;
}
/* Class is toggled on #mob itself rather than inherited from body, so the
   open state does not depend on a descendant selector resolving. */
#mob.open{opacity:1;visibility:visible;translate:0 0}
#mob .lbl{font-family:var(--ff-m);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:26px 0 10px}
#mob .lbl:first-child{margin-top:0}
#mob a{font-family:var(--ff-d);font-size:1.3rem;font-weight:600;letter-spacing:-.025em;padding:10px 0}
#mob a.sub{font-size:1rem;font-weight:500;color:var(--mut);padding-left:16px;border-left:1px solid var(--line)}
#mob .m-cta{color:var(--brand-lt)}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand);z-index:950;transition:width .1s linear}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-d);font-weight:600;font-size:.93rem;letter-spacing:-.012em;
  padding:14px 26px;border-radius:11px;border:1px solid transparent;white-space:nowrap;
  transition:background .22s,border-color .22s,color .22s,box-shadow .22s,transform .22s var(--ease);
}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-p{background:var(--brand);color:var(--on-brand)}
.btn-p:hover{background:var(--brand-dk);box-shadow:0 14px 38px -12px rgba(46,109,246,.7)}
.btn-g{border-color:var(--line-2);color:var(--tx)}
.btn-g:hover{border-color:var(--brand);color:var(--brand-lt);background:var(--brand-soft)}
.btn-t{color:var(--brand-lt);padding-inline:0}
.btn-t:hover{color:var(--tx)}
.btn-sm{padding:10px 18px;font-size:.86rem}

/* ---------- 06 · Heroes ---------- */
#hero{position:relative;padding-block:calc(var(--nav-h) + clamp(64px,9vw,110px)) clamp(72px,9vw,116px);overflow:hidden}
#hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero-in{max-width:900px;position:relative;z-index:2}
#hero h1{margin-bottom:28px}
#hero .lede{margin-bottom:36px;max-width:62ch}

.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
.glow-a{width:560px;height:560px;background:var(--glow-1);top:-160px;right:-120px}
.glow-b{width:420px;height:420px;background:var(--glow-2);bottom:-180px;left:-140px}
.gridov{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 25%,transparent 78%);
}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line-2);border-radius:100px;
  padding:8px 16px;margin-bottom:30px;background:var(--subtle-fill);
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}

/* interior page hero */
.phero{position:relative;padding-block:calc(var(--nav-h) + clamp(56px,7vw,88px)) clamp(48px,6vw,76px);overflow:hidden;border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:22px}
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:.7rem;color:var(--dim);margin-bottom:24px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand-lt)}
.crumb span{color:var(--mut)}

/* ---------- 07 · Section headers ---------- */
.sh{max-width:660px;margin-bottom:clamp(44px,5.5vw,68px)}
.sh.center{margin-inline:auto}
.sh h2{margin-bottom:20px}
.sh .lede{margin:0}
.sh.center .lede{margin-inline:auto}

/* ---------- 08 · Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;position:relative;box-shadow:var(--card-shadow);
  transition:border-color .28s,background .28s,transform .28s var(--ease),box-shadow .28s;
}
.card h3{margin-bottom:12px}
.card p{font-size:.92rem;line-height:1.66}
.card .tag{
  display:inline-block;font-family:var(--ff-m);font-size:.64rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;
}
.card .tag.warn{color:var(--warn)}
.card .tag.brand{color:var(--brand-lt)}
a.card:hover{border-color:var(--brand-line);background:var(--elev);transform:translateY(-3px)}
.card-ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--brand-soft);border:1px solid var(--brand-line);
}
.card-ic svg{width:20px;height:20px;fill:none;stroke:var(--brand-lt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--ff-m);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-lt);
}
.card-go i{transition:transform .25s var(--ease);font-style:normal}
a.card:hover .card-go i{transform:translateX(5px)}

/* ---------- 09 · Feature rows (hairline grid) ---------- */
.feats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feats.c-2{grid-template-columns:repeat(2,1fr)}
.feats.c-3{grid-template-columns:repeat(3,1fr)}
.feats.c-4{grid-template-columns:repeat(4,1fr)}
.feats>div{background:var(--bg);padding:30px 28px}
.sec.alt .feats>div{background:var(--bg-2)}
.feats .k{font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:14px}
.feats h3,.feats h4{font-size:1.02rem;font-weight:600;letter-spacing:-.018em;margin-bottom:9px}
.feats p{font-size:.885rem;line-height:1.62}

/* ---------- 10 · Callouts ---------- */
.note{
  border-left:2px solid var(--brand);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;background:linear-gradient(90deg,var(--brand-soft),transparent 70%);
}
.note .k{font-family:var(--ff-m);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:10px}
.note p{font-size:.94rem;margin:0}
.note.warn{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-soft),transparent 70%)}
.note.warn .k{color:var(--warn)}

.qa{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);background:var(--surface);max-width:820px}
.qa .k{font-family:var(--ff-m);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:16px}
.qa h2,.qa h3{font-size:clamp(1.16rem,1.9vw,1.42rem);letter-spacing:-.022em;margin-bottom:16px}
.qa p{margin:0}

/* ---------- 11 · Lists ---------- */
.ticks{list-style:none;display:flex;flex-direction:column;gap:13px}
.ticks li{position:relative;padding-left:30px;font-size:.92rem;color:var(--mut);line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--brand-soft);border:1px solid var(--brand-line)}
.ticks li::after{content:"";position:absolute;left:6.5px;top:8px;width:4px;height:8px;border:solid var(--brand-lt);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ticks strong{color:var(--tx)}

.bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.bullets li{position:relative;padding-left:18px;font-size:.86rem;color:var(--mut)}
.bullets li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:1px;background:var(--brand);opacity:.85}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-size:.775rem;color:var(--mut);border:1px solid var(--line);border-radius:7px;padding:5px 11px;background:var(--subtle-fill)}
.chips.brand span{color:var(--brand-lt);border-color:var(--brand-line);background:var(--brand-soft);font-family:var(--ff-m);font-size:.7rem}

/* ---------- 12 · Connected Floor ---------- */
.floor{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:center}
.floor-vis svg{width:100%;height:auto;overflow:visible}
.fl-ring{fill:none;stroke:var(--line-2);stroke-width:1}
#flLinks line{stroke:var(--line-2);stroke-width:1;transition:stroke .25s,stroke-width .25s}
#flLinks line.on{stroke:var(--brand);stroke-width:1.8}
.fl-node{cursor:pointer}
.fl-node circle{fill:var(--surface);stroke:var(--line-2);stroke-width:1;transition:fill .22s,stroke .22s}
.fl-node text{fill:var(--mut);font-family:var(--ff-m);font-size:6.4px;text-anchor:middle;transition:fill .22s;pointer-events:none}
.fl-node:hover circle{stroke:var(--brand-lt)}
.fl-node.on circle{fill:var(--brand);stroke:var(--brand)}
.fl-node.on text{fill:#fff}
.floor-panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--surface);min-height:320px}
.floor-panel .k{font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-lt);margin-bottom:12px}
.floor-panel h3{margin-bottom:14px}
.floor-panel p{font-size:.91rem;margin-bottom:20px}
.floor-panel .sub-k{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}

/* ---------- 13 · Steps / method ---------- */
.steps{display:flex;flex-direction:column;gap:14px}
.step{border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;background:var(--surface);transition:border-color .3s,background .3s}
.step.on{border-color:var(--brand-line);background:var(--elev)}
.step-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.step-n{font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.16em;color:var(--brand-lt);flex:none}
.step h3{font-size:1.08rem}
.step p{font-size:.9rem;line-height:1.65;margin-bottom:14px}

.phase-vis{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--vis-bg);aspect-ratio:1/1;overflow:hidden}
.phase-vis canvas{width:100%;height:100%}
.phase-badge{position:absolute;left:20px;bottom:18px;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-lt);border:1px solid var(--line-2);border-radius:100px;padding:7px 14px;background:var(--badge-bg);backdrop-filter:blur(8px)}

/* ---------- Leadership band ----------
   A horizontal record rather than a card in a grid, so a single entry reads
   as a credentials strip instead of a conspicuously empty team page. */
/* Identity as a header row with the body flowing beneath, rather than two
   columns — the identity block is short and the body is long, so a side-by-side
   grid stretched the card over a large area of dead space. */
.lead-band{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(26px,3.5vw,40px);box-shadow:var(--card-shadow);
}
.lead-id{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line);
}
.lead-id > div:last-child{flex:1 1 260px}
.lead-mark{width:52px;height:52px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-soft);border:1px solid var(--brand-line)}
.lead-mark svg{width:30px;height:30px}
.lead-id h3{margin-bottom:5px}
.lead-role{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-lt);margin:0 0 10px}
.lead-links{margin-left:auto}
.lead-links a{font-size:.84rem;color:var(--mut);transition:color .18s}
.lead-links a:hover{color:var(--brand-lt)}
/* gap, not margins — .lead-body p{margin:0} would out-specify any .mt-* utility */
.lead-body{display:flex;flex-direction:column;gap:14px;max-width:72ch}
.lead-body p{font-size:.94rem;margin:0}
@media (max-width:620px){ .lead-id{gap:14px} .lead-id h3{font-size:1.15rem} }

/* ---------- 14 · Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.acc+.acc{margin-top:10px}
.acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;text-align:left;font-family:var(--ff-d);font-weight:600;font-size:1rem;letter-spacing:-.018em;transition:color .2s}
.acc-h:hover{color:var(--brand-lt)}
.acc-h i{flex:none;width:18px;height:18px;position:relative;transition:transform .3s var(--ease)}
.acc-h i::before,.acc-h i::after{content:"";position:absolute;background:var(--brand-lt);border-radius:2px}
.acc-h i::before{inset:8px 0 auto;height:2px}
.acc-h i::after{inset:0 8px;width:2px;transition:opacity .25s}
.acc.open .acc-h i{transform:rotate(180deg)}
.acc.open .acc-h i::after{opacity:0}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-b .inner{padding:0 24px 24px}
.acc-b p{font-size:.92rem}

/* ---------- 15 · Tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;border-bottom:1px solid var(--line);padding-bottom:0}
.tabs button{
  font-family:var(--ff-d);font-weight:600;font-size:.9rem;letter-spacing:-.015em;color:var(--dim);
  padding:12px 18px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.tabs button:hover{color:var(--mut)}
.tabs button.on{color:var(--tx);border-bottom-color:var(--brand)}
.pane{display:none}
.pane.on{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 16 · Tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:.89rem;min-width:620px}
th{
  text-align:left;padding:15px 18px;background:var(--bg-2);border-bottom:1px solid var(--line);
  font-family:var(--ff-m);font-size:.63rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
}
td{padding:16px 18px;border-bottom:1px solid var(--line);color:var(--mut);vertical-align:top;line-height:1.6}
tbody tr:last-child td{border-bottom:none}
td strong{color:var(--tx)}
.badge{display:inline-block;font-family:var(--ff-m);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--brand-line);color:var(--brand-lt);background:var(--brand-soft);margin-top:9px}
.badge.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn);background:var(--warn-soft)}

/* ---------- 17 · Forms ---------- */
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--line-2);border-radius:11px;
  padding:14px 16px;font-size:.94rem;color:var(--tx);width:100%;
  transition:border-color .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);background:var(--elev)}
.field textarea{resize:vertical;min-height:132px}
.field.err input,.field.err textarea,.field.err select{border-color:var(--warn)}
.field .msg{font-size:.78rem;color:var(--warn);display:none}
.field.err .msg{display:block}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* honeypot — off-screen rather than display:none, which some bots detect */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:.88rem;color:var(--warn);border-left:2px solid var(--warn);
  background:var(--warn-soft);padding:12px 16px;border-radius:0 8px 8px 0;margin:0}
.btn:disabled{opacity:.6;cursor:not-allowed}
.form-ok{text-align:center;padding:52px 24px}
.form-ok .ic{width:54px;height:54px;border-radius:50%;background:var(--brand-soft);border:1px solid var(--brand-line);
  display:grid;place-items:center;margin:0 auto 22px;color:var(--brand-lt);font-size:1.4rem}
.form-ok h3{margin-bottom:12px}

/* ---------- 18 · CTA / Footer ---------- */
.cta{position:relative;padding-block:clamp(84px,11vw,140px);text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.cta-in{max-width:700px;margin-inline:auto;position:relative;z-index:2}
.cta h2{margin-bottom:20px}
.cta .lede{margin:0 auto 34px}
.cta .row{justify-content:center}

footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,84px) 32px;position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.ft-brand{max-width:320px}
.ft-brand .logo{margin-bottom:18px}
.ft-brand p{font-size:.875rem;line-height:1.65}
.ft-col h3,.ft-col h4{font-family:var(--ff-m);font-size:.63rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.ft-col a{display:block;font-size:.875rem;color:var(--mut);padding:6px 0;transition:color .18s}
.ft-col a:hover{color:var(--brand-lt)}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--ff-m);font-size:.7rem;color:var(--dim)}
.ft-bot a:hover{color:var(--brand-lt)}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .g-3,.feats.c-3{grid-template-columns:repeat(2,1fr)}
  .g-4,.feats.c-4{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1;max-width:none}
}
@media (max-width:880px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta{display:none}
  .split,.split.wide-l,.split.wide-r,.floor{grid-template-columns:1fr;gap:40px}
  .sticky{position:static}
  .feats.c-2,.g-2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{padding-inline:20px}
  .g-3,.g-4,.feats.c-3,.feats.c-4{grid-template-columns:1fr}
  .form-2{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr;gap:32px}
  .btn{width:100%}
  .row .btn{flex:1 1 auto}
  .card{padding:26px 22px}
  .feats>div{padding:26px 22px}
}

/* ---------- Theme switch ---------- */
.theme-btn{
  width:38px;height:38px;flex:none;border-radius:10px;
  border:1px solid var(--line-2);background:transparent;color:var(--mut);
  display:grid;place-items:center;
  transition:color .2s,border-color .2s,background .2s;
}
.theme-btn:hover{color:var(--tx);border-color:var(--brand-line);background:var(--brand-soft)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Show the icon for the theme you would switch TO. */
.theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:block}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="dark"]) .theme-btn .i-moon{display:none}
}
#mob .theme-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
#mob .theme-row span{font-family:var(--ff-m);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
#mob .theme-row a{padding:0}
/* ---------- Spacing after removing section marker labels ----------
   The eyebrow / counter used to supply the top offset above a heading.
   With it gone, headings sit flush and the block needs its own rhythm. */
.sh > h2:first-child{margin-top:0}
.feats > div > h3:first-child{margin-top:0}
.card > h3:first-child{margin-top:0}
.qa > h2:first-child{margin-top:0}