/* ==========================================================================
   HADDON SOFTWARE SOLUTIONS
   --------------------------------------------------------------------------
   Restraint is the brief. The only motion here is:
     · a soft fade-and-rise as sections enter the viewport
     · gentle hover states
     · the mega menu opening
     · one slow capability marquee
   Everything else holds still on purpose.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --blue:#1E88FF;
  --violet:#7A3CF2;
  --grad:linear-gradient(110deg,var(--blue),var(--violet));

  --ff-d:'Sora','Segoe UI',system-ui,sans-serif;
  --ff-b:'Inter','Segoe UI',system-ui,sans-serif;

  --fs-h1:clamp(2.4rem,5.6vw,4.6rem);
  --fs-h2:clamp(1.75rem,3.2vw,2.7rem);
  --fs-h3:clamp(1.08rem,1.4vw,1.25rem);
  --fs-lede:clamp(1rem,1.1vw,1.12rem);

  --gut:clamp(20px,5vw,64px);
  --shell:1160px;
  --pad:clamp(72px,9vw,132px);
  --r:12px;
  --r-lg:18px;
  /* control radii — rounded rectangles, not pills */
  --r-btn:11px;
  --r-chip:9px;
  --r-tag:7px;

  --ease:cubic-bezier(.22,1,.36,1);
  --hdr:72px;
}

html[data-theme="dark"]{
  --bg:#070A16;
  --bg-2:#0A0E1C;
  --surf:#0E1426;
  --txt:#EAEDF7;
  --txt-2:#A3ACC6;
  --muted:#6B7593;
  --line:rgba(150,170,220,.13);
  --line-2:rgba(150,170,220,.26);
  --glass:rgba(8,12,24,.84);
  --shadow:0 24px 60px -32px rgba(0,0,0,.85);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#FBFBFD;
  --bg-2:#F3F5FA;
  --surf:#FFFFFF;
  --txt:#0B1020;
  --txt-2:#454E68;
  --muted:#6E7893;
  --line:rgba(11,16,32,.11);
  --line-2:rgba(11,16,32,.2);
  --glass:rgba(255,255,255,.88);
  --shadow:0 20px 50px -30px rgba(20,35,90,.24);
  color-scheme:light;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px)}
html.is-locked{overflow:hidden}
body{
  background:var(--bg);color:var(--txt);
  font:400 16px/1.65 var(--ff-b);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .35s var(--ease),color .35s var(--ease);
}
/* An author class such as .btn{display:inline-flex} outranks the user-agent
   [hidden] rule, which silently reveals elements meant to be hidden. */
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
svg{fill:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}
fieldset{border:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--ff-d);font-weight:500;line-height:1.12;letter-spacing:-.03em}

.skip{
  position:fixed;top:12px;left:12px;z-index:999;padding:12px 20px;border-radius:10px;
  background:var(--blue);color:#fff;font-weight:500;
  transform:translateY(-200%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}

.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:940;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:var(--grad)}

/* ---------- shared ---------- */
.shell{width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto}

.kicker{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.h2{font-size:var(--fs-h2)}
.sec{margin-bottom:clamp(40px,5vw,68px);max-width:46ch}
.sec--split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;max-width:none}
.sec--center{max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.sec__note{color:var(--txt-2);font-size:var(--fs-lede);line-height:1.7;max-width:44ch;margin-top:16px}
.sec--split .sec__note{margin-top:0;padding-bottom:3px}
.sec__note--center{text-align:center;max-width:52ch}
.sec__note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.live{width:6px;height:6px;border-radius:50%;background:#2BD98A;display:inline-block;margin-right:8px;vertical-align:middle}

/* min-height keeps standalone links at a comfortable 24px target (WCAG 2.2) */
.link{display:inline-flex;align-items:center;gap:8px;min-height:26px;color:var(--blue);font-size:.87rem;font-weight:500}
.link i{width:14px;height:1.5px;background:currentColor;transition:width .3s var(--ease)}
.link:hover i{width:24px}

/* ==========================================================================
   CONTROLS
   One shared language: pill geometry, a 220ms ease, a lift on hover, a press
   on :active, and the same focus ring. Buttons, choice pills, icon buttons and
   inline links all follow it so nothing looks borrowed from another site.
   ========================================================================== */
.btn{
  --btn-h:48px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h);padding:0 22px;border-radius:var(--r-btn);
  font-family:var(--ff-d);font-weight:500;font-size:.94rem;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;text-align:center;
  transition:transform .22s var(--ease),box-shadow .28s var(--ease),
             border-color .22s var(--ease),color .22s var(--ease),
             background-color .22s var(--ease),background-position .6s var(--ease);
}
.btn--sm{--btn-h:38px;padding:0 15px;font-size:.85rem;border-radius:var(--r-chip)}
.btn--lg{--btn-h:54px;padding:0 28px;font-size:.98rem}
.btn--block{width:100%}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* primary — the gradient shifts across on hover, with a hairline top highlight
   so the fill reads as a surface rather than a flat block */
.btn--solid{
  color:#fff;border:1px solid transparent;
  background-image:var(--grad);background-size:180% 100%;background-position:0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(8,12,24,.4),0 6px 16px -8px rgba(30,136,255,.55);
}
.btn--solid:hover{
  transform:translateY(-1px);background-position:100% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(8,12,24,.4),0 10px 22px -8px rgba(122,60,242,.6);
}
.btn--solid:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(8,12,24,.35)}

/* secondary */
.btn--ghost{color:var(--txt);border:1px solid var(--line-2);background:transparent}
.btn--ghost:hover{
  transform:translateY(-1px);color:var(--txt);border-color:var(--line-2);
  background-color:var(--surf);
  box-shadow:0 1px 2px rgba(8,12,24,.25),0 8px 18px -10px rgba(8,12,24,.5);
}
.btn--ghost:active{transform:translateY(0);box-shadow:none}

/* quiet — for tertiary actions that should not compete */
.btn--quiet{color:var(--txt-2);border:1px solid transparent;background:transparent;padding:0 14px}
.btn--quiet:hover{color:var(--blue);background-color:rgba(30,136,255,.07)}

/* icon button — same geometry family, square-ish so it reads as a control */
.iconbtn{
  width:44px;height:44px;border-radius:var(--r-btn);border:1px solid var(--line-2);
  display:grid;place-items:center;position:relative;flex:none;cursor:pointer;
  transition:border-color .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease);
}
.iconbtn:hover{border-color:var(--blue);background-color:rgba(30,136,255,.08)}
.iconbtn:active{transform:scale(.94)}
.iconbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.iconbtn svg{position:absolute;width:18px;height:18px;stroke:var(--txt);stroke-width:1.6;fill:none;transition:opacity .25s var(--ease)}
.iconbtn:hover svg{stroke:var(--blue)}
html[data-theme="dark"] .ic-sun{opacity:0}
html[data-theme="light"] .ic-moon{opacity:0}

/* choice pills — checkboxes and radios everywhere on the site */
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 14px;border-radius:var(--r-chip);border:1px solid var(--line-2);
  font-size:.85rem;color:var(--txt-2);line-height:1.3;text-align:center;
  transition:border-color .22s var(--ease),color .22s var(--ease),
             background-color .22s var(--ease),transform .22s var(--ease),
             box-shadow .22s var(--ease);
}
.pick:hover span{border-color:var(--blue);color:var(--blue);background-color:rgba(30,136,255,.07)}
.pick span:active{transform:scale(.97)}
.pick input:checked + span{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px -6px rgba(30,136,255,.65);
}
.pick input:checked + span:hover{color:#fff}
.pick input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}



.form__note{font-size:.78rem;color:var(--muted);text-align:center}
.form__note.is-ok{color:#2BD98A}
.form__note.is-bad{color:#F87171}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr.is-stuck,.hdr.mega-open{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
.hdr__in{
  width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;height:var(--hdr);
  display:flex;align-items:center;gap:clamp(12px,3vw,40px);
}

.brand{display:flex;align-items:center;gap:10px;margin-right:auto;flex:none}
.brand__mark{width:24px;flex:none}
.brand__mark img{width:100%;height:auto}
.brand__wrap{display:flex;flex-direction:column;gap:2px}
.brand__type{font-family:var(--ff-d);font-weight:600;font-size:1rem;letter-spacing:.14em;line-height:1}
.brand__sub{font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);line-height:1}

.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{
  display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;font-size:.9rem;
  color:var(--txt-2);cursor:pointer;
  transition:color .22s var(--ease),background-color .22s var(--ease);
}
.nav__link:hover,.nav__item.is-open .nav__link{color:var(--blue);background-color:rgba(30,136,255,.10)}
.nav__chev{
  width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .28s var(--ease);
}
.nav__item.is-open .nav__chev{transform:rotate(225deg) translateY(-2px);opacity:1}

.hdr__act{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-btn);border:1px solid var(--line-2);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.burger:hover{border-color:var(--blue);background-color:rgba(30,136,255,.08)}
.burger i{width:17px;height:1.6px;background:var(--txt);border-radius:2px;transition:transform .32s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ---------- mega menu ---------- */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .32s var(--ease),visibility 0s .32s;
}
.mega.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .26s var(--ease),transform .32s var(--ease),visibility 0s;
}
.mega__in{
  width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;
  padding:34px 0 38px;display:grid;gap:clamp(22px,3.2vw,48px);
}
.mega__in--cols{grid-template-columns:repeat(3,1fr) 1.15fr}
.mega__in--who{grid-template-columns:1.85fr 1fr 1.1fr}

.mega__kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mega__stack li + li{margin-top:2px}
.mega__stack a{display:block;padding:10px 12px;border-radius:10px;transition:background-color .22s var(--ease)}
.mega__stack a:hover{background-color:rgba(30,136,255,.10)}
.mega__stack b{display:block;font-family:var(--ff-d);font-weight:500;font-size:.94rem}
.mega__stack span{display:block;font-size:.78rem;color:var(--muted);margin-top:1px}

/* a wide two-column list, so the industry coverage reads as broad at a glance */
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px clamp(8px,1.4vw,20px)}
.mega__grid a{
  display:block;padding:8px 11px;border-radius:8px;font-size:.85rem;color:var(--txt-2);min-height:36px;
  transition:background-color .22s var(--ease),color .22s var(--ease);
}
.mega__grid a:hover{background-color:rgba(30,136,255,.10);color:var(--blue)}

.promo{
  padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);
  display:flex;flex-direction:column;gap:10px;height:100%;
}
.promo__badge{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.promo__h{font-family:var(--ff-d);font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.promo p{font-size:.83rem;color:var(--txt-2);line-height:1.55}
.promo .link{margin-top:auto}

.mega__bd{
  position:fixed;inset:var(--hdr) 0 0;background:rgba(4,7,18,.4);z-index:-1;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s .28s;
}
.hdr.mega-open .mega__bd{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}

/* ---------- mobile drawer ----------
   Below 1024px the mega menus are hidden, so this is the only way into the
   sub-pages. It carries the full navigation, built on <details>/<summary> so it
   works without JavaScript and gets the right semantics for free. */
.drawer{
  position:fixed;inset:0;z-index:880;background:var(--bg);
  padding:calc(var(--hdr) + 18px) var(--gut) 28px;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility 0s .32s;
}
.drawer.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility 0s;
}
.drawer__nav{display:flex;flex-direction:column}

.drawer__link,.dgroup>summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-d);font-size:clamp(1.12rem,4.6vw,1.38rem);font-weight:500;
  letter-spacing:-.025em;min-height:56px;
}
.dgroup>summary{cursor:pointer;list-style:none}
.dgroup>summary::-webkit-details-marker{display:none}
.dgroup>summary::marker{content:''}
.dgroup>summary i{position:relative;width:15px;height:15px;flex:none}
.dgroup>summary i::before,.dgroup>summary i::after{
  content:'';position:absolute;inset:0;margin:auto;background:var(--muted);border-radius:2px;
  transition:opacity .3s var(--ease),background-color .3s var(--ease);
}
.dgroup>summary i::before{width:14px;height:1.7px}
.dgroup>summary i::after{width:1.7px;height:14px}
.dgroup[open]>summary{color:var(--blue)}
.dgroup[open]>summary i::after{opacity:0}
.dgroup[open]>summary i::before{background:var(--blue)}

.dsub{padding:8px 0 16px;display:grid;gap:2px}
.dsub a{
  display:flex;align-items:center;gap:12px;min-height:46px;
  padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--txt-2);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.dsub a:hover,.dsub a:focus-visible{background-color:rgba(30,136,255,.10);color:var(--blue)}
.dsub .ico{width:19px;height:19px;color:var(--blue);opacity:.8}

.drawer__foot{
  margin-top:auto;padding-top:28px;
  display:flex;flex-direction:column;gap:14px;align-items:stretch;
}
.drawer__foot .btn{width:100%}
.drawer__mail{color:var(--blue);font-size:.95rem;min-height:28px}
.drawer__foot p{color:var(--muted);font-size:.84rem;line-height:1.5}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(var(--hdr) + clamp(68px,10vw,138px)) 0 clamp(60px,7vw,100px);overflow:hidden}
.hero__wash{
  position:absolute;top:-26%;left:50%;translate:-50% 0;
  width:min(1060px,128%);aspect-ratio:1.6/1;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(30,136,255,.2),transparent 70%) 30% 40%/62% 74% no-repeat,
    radial-gradient(closest-side,rgba(122,60,242,.18),transparent 70%) 70% 55%/60% 70% no-repeat;
  filter:blur(28px);
  animation:drift 28s ease-in-out infinite alternate;
}
html[data-theme="light"] .hero__wash{opacity:.65}
@keyframes drift{to{transform:translate(-2%,3%) scale(1.07)}}

.eyebrow{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.hero__h1{font-size:var(--fs-h1);font-family:var(--ff-d);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.hero__lede{margin-top:24px;max-width:52ch;font-size:var(--fs-lede);color:var(--txt-2);line-height:1.75}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__proof{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);
  margin-top:clamp(44px,6vw,76px);padding-top:26px;border-top:1px solid var(--line);
}
.hero__proof dt{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hero__proof dd{font-family:var(--ff-d);font-size:1.08rem;font-weight:500;margin-top:5px}

/* ---------- capability strip ---------- */
.strip{padding:20px 0;border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.strip__track{display:flex;width:max-content}
.strip__set{display:flex;align-items:center}
.strip__set li{
  padding-inline:clamp(18px,2.6vw,36px);white-space:nowrap;
  font-family:var(--ff-d);font-size:.92rem;color:var(--muted);
}
.strip__set li + li{border-left:1px solid var(--line)}

/* ---------- approach ---------- */
.approach{padding:var(--pad) 0}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.steps3 li{padding-top:22px;border-top:1px solid var(--line)}
.steps3__n{font-size:.75rem;letter-spacing:.13em;color:var(--blue);margin-bottom:12px}
.steps3 h3{font-size:var(--fs-h3);margin-bottom:10px}
.steps3 p{color:var(--txt-2);font-size:.92rem;line-height:1.7}

/* ---------- services ---------- */
.services{padding:var(--pad) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.card{
  position:relative;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card__n{font-size:.74rem;letter-spacing:.13em;color:var(--blue);margin-bottom:14px}
.card h3{font-size:1.3rem;margin-bottom:12px}
.card > p{color:var(--txt-2);font-size:.92rem;line-height:1.7}
.card__list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:9px}
.card__list li{position:relative;padding-left:16px;font-size:.85rem;color:var(--muted)}
.card__list li::before{content:'';position:absolute;left:0;top:.64em;width:6px;height:1px;background:var(--blue)}

/* ---------- deliverables ---------- */
.gets{padding:var(--pad) 0}
.gets__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.gets__grid li{padding-top:20px;border-top:1px solid var(--line)}
.gets__grid h3{font-size:var(--fs-h3);margin-bottom:9px}
.gets__grid p{color:var(--txt-2);font-size:.9rem;line-height:1.68}

/* ---------- who we help ---------- */
.who{padding:var(--pad) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.who__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.who__tags li{
  padding:8px 13px;border-radius:var(--r-chip);border:1px solid var(--line);
  font-size:.82rem;color:var(--txt-2);background:var(--surf);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.who__tags li:hover{border-color:var(--blue);color:var(--txt)}
.who__lead{
  max-width:64ch;margin-bottom:clamp(28px,4vw,44px);
  color:var(--txt-2);font-size:var(--fs-lede);line-height:1.7;
}
.who__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.who__col{
  padding:clamp(26px,2.8vw,36px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
}
.who__col h3{font-size:var(--fs-h3);margin-bottom:20px}
.who__list{display:grid;gap:12px}
.who__list li{position:relative;padding-left:28px;font-size:.92rem;color:var(--txt-2);line-height:1.6}
.who__list--yes li::before{
  content:'';position:absolute;left:2px;top:.34em;width:11px;height:6px;
  border-left:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:rotate(-45deg);
}
.who__list--no li::before,.who__list--no li::after{
  content:'';position:absolute;left:3px;top:.66em;width:12px;height:1.6px;
  background:var(--muted);border-radius:2px;
}
.who__list--no li::before{transform:rotate(45deg)}
.who__list--no li::after{transform:rotate(-45deg)}
.who__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}

/* ---------- process ---------- */
.process{padding:var(--pad) 0}
.phase{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,260px);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(26px,3vw,36px) 0;border-top:1px solid var(--line);
}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase__n{font-size:.77rem;letter-spacing:.13em;color:var(--blue);padding-top:4px}
.phase h3{font-size:var(--fs-h3);margin-bottom:9px}
.phase h3 em{font-style:normal;font-weight:300;color:var(--muted);font-size:.82em}
.phase p{color:var(--txt-2);font-size:.92rem;line-height:1.7}
.phase__out{font-size:.81rem;color:var(--muted);padding-top:4px}

/* ---------- ways to work ---------- */
.engage{padding:var(--pad) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);align-items:start}
.tier{
  position:relative;padding:clamp(26px,2.6vw,34px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);
  display:flex;flex-direction:column;gap:14px;
}
.tier--feat{border-color:var(--blue);box-shadow:var(--shadow)}
.tier__flag{
  position:absolute;top:-11px;left:clamp(26px,2.6vw,34px);
  font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-tag);background:var(--grad);color:#fff;
}
.tier__n{font-size:.74rem;letter-spacing:.13em;color:var(--blue)}
.tier h3{font-size:1.28rem}
.tier__sub{font-size:.88rem;color:var(--muted);line-height:1.55}
.tier__list{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.tier__list li{position:relative;padding-left:22px;font-size:.86rem;color:var(--txt-2);line-height:1.55}
.tier__list li::before{
  content:'';position:absolute;left:1px;top:.36em;width:11px;height:6px;
  border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg);
}
.tier .btn{margin-top:auto}
.engage__fine{margin-top:26px;text-align:center;font-size:.85rem;color:var(--muted)}

/* ---------- faq ---------- */
.faq{padding:var(--pad) 0}
.faq__shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.faq__side{position:sticky;top:calc(var(--hdr) + 36px)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item:first-child{border-top:1px solid var(--line)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
  text-align:left;font-family:var(--ff-d);font-weight:400;font-size:1.01rem;line-height:1.45;
  letter-spacing:-.02em;cursor:pointer;transition:color .22s var(--ease);
}
.acc__q:hover,.acc__q[aria-expanded="true"]{color:var(--blue)}
.acc__q i{position:relative;width:16px;height:16px;flex:none}
.acc__q i::before,.acc__q i::after{
  content:'';position:absolute;inset:0;margin:auto;background:currentColor;
  transition:transform .32s var(--ease),opacity .22s var(--ease);
}
.acc__q i::before{width:13px;height:1.5px}
.acc__q i::after{width:1.5px;height:13px}
.acc__q[aria-expanded="true"] i::after{transform:rotate(90deg);opacity:0}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc__item.is-open .acc__a{grid-template-rows:1fr}
.acc__a > div{overflow:hidden}
.acc__a p{padding-bottom:24px;padding-right:40px;color:var(--txt-2);font-size:.92rem;line-height:1.75}

/* ---------- about ---------- */
.about{padding:var(--pad) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.about__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.about__copy p{color:var(--txt-2);font-size:var(--fs-lede);line-height:1.8}
.about__copy p + p{margin-top:18px}
.about__meta{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);
}
.about__meta b{color:var(--txt);font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- contact ---------- */
.contact{padding:var(--pad) 0}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.contact__facts{display:grid;gap:14px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.contact__facts span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contact__facts a{color:var(--blue)}
.contact__facts p{color:var(--txt-2)}

.form{
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surf);display:grid;gap:14px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:22px 14px 9px;border-radius:var(--r);background:var(--bg);
  border:1px solid var(--line);font-size:.93rem;resize:vertical;
  transition:border-color .22s var(--ease);
}
.field textarea{padding-top:26px;line-height:1.6;min-height:96px}
.field label{
  position:absolute;left:15px;top:15px;font-size:.9rem;color:var(--muted);pointer-events:none;
  transform-origin:0 50%;transition:transform .24s var(--ease),color .24s var(--ease);
}
.field label span{font-size:.82em}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-8px) scale(.78);color:var(--blue);
}
.field.is-bad input,.field.is-bad textarea{border-color:#F87171}

.pickers{display:flex;flex-wrap:wrap;gap:8px;border:0}
.pickers legend{
  width:100%;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.form__note{font-size:.78rem;color:var(--muted);text-align:center}
.form__note.is-ok{color:#2BD98A}
.form__note.is-bad{color:#F87171}
.form__alt{font-size:.83rem;color:var(--muted);text-align:center;line-height:1.6}
.form__alt a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,76px)}
.ftr__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(32px,5vw,72px);padding-bottom:clamp(40px,5vw,60px);
}
.ftr__brand p{margin-top:18px;color:var(--txt-2);font-size:.89rem;line-height:1.7;max-width:38ch}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ftr__cols div{display:flex;flex-direction:column;gap:4px}
.ftr__lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ftr__cols a{
  display:inline-flex;align-items:center;min-height:26px;
  font-size:.87rem;color:var(--txt-2);width:fit-content;transition:color .22s var(--ease);
}
.ftr__cols a:hover{color:var(--blue)}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:22px 0 28px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);
}
.totop{display:inline-flex;align-items:center;min-height:26px;transition:color .22s var(--ease)}
.totop:hover{color:var(--blue)}

/* ---------- reveal ---------- */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:980;background:var(--bg);display:grid;place-items:center;
  transition:clip-path .9s var(--ease),visibility 0s .9s;
}
.loader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none}
.loader__inner{
  width:min(380px,78vw);display:flex;flex-direction:column;align-items:center;gap:18px;
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
.loader.is-done .loader__inner{opacity:0;transform:translateY(-20px)}

/* The lockup is a self-contained animated SVG — it draws the circuit, floods it
   with the gradient, then raises the letters. See assets/brand/haddon-animated.svg */
.loader__logo{width:min(300px,66vw);height:auto;margin-bottom:-6px}
.loader__sub{
  font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);
  text-indent:.42em;opacity:0;animation:subIn .6s var(--ease) 1.85s forwards;
}
@keyframes subIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.loader__sub{opacity:1;animation:none}}

.loader__meta{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.loader__count{
  font-family:var(--ff-d);font-size:1.5rem;letter-spacing:-.02em;color:var(--txt);
  font-variant-numeric:tabular-nums;text-transform:none;
}
.loader__bar{width:100%;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad)}

/* ==========================================================================
   MOTION LAYER
   One easing, one timing family. Every animation either reveals content or
   explains something — nothing is decorative for its own sake.
   ========================================================================== */

/* hero headline: per-line clip reveal */
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero__h1 .ln>span{display:block;transform:translateY(115%);transition:transform 1.05s var(--ease)}
.hero__h1.is-in .ln>span{transform:none}
.hero__h1.is-in .ln:nth-child(1)>span{transition-delay:.05s}
.hero__h1.is-in .ln:nth-child(2)>span{transition-delay:.15s}
.hero__h1.is-in .ln:nth-child(3)>span{transition-delay:.25s}

/* hero circuit network canvas */
.hero__net{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:0;animation:netIn 2.4s var(--ease) .35s forwards;
}
@keyframes netIn{to{opacity:1}}
html[data-theme="light"] .hero__net{opacity:0;animation-name:netInLight}
@keyframes netInLight{to{opacity:.55}}
.hero__in{position:relative}

/* word-by-word heading reveal */
.wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wd>span{
  display:inline-block;transform:translateY(110%);
  transition:transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 48ms);
}
[data-words].is-in .wd>span{transform:none}

/* label scramble uses a fixed-ish width so the line does not jitter */
[data-scramble]{font-variant-numeric:tabular-nums}

/* tilt cards need a 3D context and should not fight the hover lift */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.card[data-tilt]:hover,.tier[data-tilt]:hover{transform:none}

/* featured tier: slowly travelling gradient ring */
.tier--feat{border-color:transparent}
.tier--feat::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,var(--blue),var(--violet),var(--blue),var(--violet));
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ringFlow 9s linear infinite;
}
@keyframes ringFlow{to{background-position:300% 0}}

/* nav underline */
.nav__link{position:relative}
.nav__link::after{
  content:'';position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);
}
.nav__link:hover::after,.nav__item.is-open .nav__link::after{transform:scaleX(1)}

/* mega columns stagger in */
.mega__col{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.mega.is-open .mega__col{opacity:1;transform:none}
.mega.is-open .mega__col:nth-child(1){transition-delay:.05s}
.mega.is-open .mega__col:nth-child(2){transition-delay:.11s}
.mega.is-open .mega__col:nth-child(3){transition-delay:.17s}
.mega.is-open .mega__col:nth-child(4){transition-delay:.23s}

/* primary button styling now lives in the CONTROLS block above */

/* pointer sheen on cards */
[data-spot]::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(30,136,255,.11),transparent 62%);
}
[data-spot]:hover::after{opacity:1}

/* rules that draw themselves in */
.steps3 li,.gets__grid li{position:relative}
.steps3 li::before,.gets__grid li::before{
  content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease) calc(var(--d,0) * 1ms + 120ms);
}
.steps3 li.is-in::before,.gets__grid li.is-in::before{transform:scaleX(1)}

/* process: rail that fills as you scroll */
.phases{--rail:36px;position:relative;padding-left:var(--rail)}
.phases::before,.phases::after{content:'';position:absolute;left:3px;top:0;width:1px}
.phases::before{bottom:0;background:var(--line)}
.phases::after{height:var(--fill,0%);background:linear-gradient(var(--blue),var(--violet))}
.phase__n{position:relative}
.phase__n::before{
  content:'';position:absolute;left:calc(var(--rail) * -1 + 3px - 4.5px);top:.35em;
  width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.phase.is-in .phase__n::before{
  border-color:transparent;background:var(--grad);box-shadow:0 0 0 4px rgba(30,136,255,.14);
}

/* ==========================================================================
   SHOWCASE — one screen, three stages
   ========================================================================== */
.show{padding:var(--pad) 0 0}
.show__track{position:relative;height:340vh}
.show__pin{
  position:sticky;top:0;height:100svh;
  width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding-top:var(--hdr);
}
.show__steps{display:grid;gap:4px}
.show__steps li{
  padding:14px 0 14px 20px;border-left:2px solid var(--line);
  opacity:.34;transition:opacity .5s var(--ease),border-color .5s var(--ease);
}
.show__steps li.is-on{opacity:1;border-left-color:var(--blue)}
.show__steps b{font-size:.7rem;letter-spacing:.15em;color:var(--blue);font-weight:500}
.show__steps span{display:block;font-family:var(--ff-d);font-size:1.12rem;font-weight:500;margin-top:3px}
.show__steps p{
  font-size:.84rem;color:var(--txt-2);line-height:1.6;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease);
}
.show__steps li.is-on p{max-height:90px;opacity:1;margin-top:7px}

.frame__wrap{position:relative}
.frame__glow{
  position:absolute;inset:6% 4% -8%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(30,136,255,.3),transparent 72%),
             radial-gradient(closest-side,rgba(122,60,242,.26),transparent 72%);
  background-position:22% 40%,78% 60%;background-size:62% 80%,60% 76%;background-repeat:no-repeat;
  filter:blur(42px);opacity:0;transition:opacity 1s var(--ease);
}
.show.s-2 .frame__glow{opacity:.55}
.show.s-3 .frame__glow{opacity:1}

.frame{
  position:relative;border-radius:15px;overflow:hidden;
  border:1px solid var(--line);background:var(--surf);
  aspect-ratio:16/10;max-height:60svh;
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 18px 40px -18px rgba(0,0,0,.55),0 40px 90px -50px rgba(0,0,0,.9);
  transition:box-shadow .8s var(--ease),border-radius .8s var(--ease),border-color .8s var(--ease);
}
/* hairline highlight along the top edge, like glass catching light */
.frame::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 28%,rgba(255,255,255,.22) 72%,transparent);
  opacity:0;transition:opacity .8s var(--ease);
}
.show.s-2 .frame::before,.show.s-3 .frame::before{opacity:1}
.show.s-3 .frame{border-color:var(--line-2)}

.frame__bar{
  height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--bg-2);
}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none;transition:background .6s var(--ease)}
.show.s-2 .frame__bar i:nth-child(1),.show.s-3 .frame__bar i:nth-child(1){background:#FF5F57}
.show.s-2 .frame__bar i:nth-child(2),.show.s-3 .frame__bar i:nth-child(2){background:#FEBC2E}
.show.s-2 .frame__bar i:nth-child(3),.show.s-3 .frame__bar i:nth-child(3){background:#28C840}
.frame__url{margin-left:12px;font-size:11px;color:var(--muted);padding:4px 14px;border-radius:6px;background:var(--bg)}

.ui{display:grid;grid-template-columns:142px minmax(0,1fr);height:calc(100% - 36px)}
.ui__side{border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:16px}
.ui__user{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding-top:12px;border-top:1px solid var(--line);
}
.ui__av--sm{width:24px;height:24px}
.ui__usermeta{display:flex;flex-direction:column;gap:1px;min-width:0}
.ui__usermeta b{font-family:var(--ff-d);font-size:.72rem;font-weight:500}
.ui__usermeta em{font-style:normal;font-size:.62rem;color:var(--muted)}
.ui__h{font-family:var(--ff-d);font-size:1rem;font-weight:500;letter-spacing:-.02em}
.ui__logo{display:flex;align-items:center;gap:7px;font-family:var(--ff-d);font-size:.78rem;font-weight:600}
.ui__dot{width:15px;height:15px;border-radius:5px;background:var(--grad);flex:none;transition:background .6s var(--ease)}
.ui__nav{display:grid;gap:3px}
.ui__nav a{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-size:.74rem;
  color:var(--muted);transition:background .5s var(--ease),color .5s var(--ease);
}
.ui__nav a i{width:12px;height:12px;border-radius:3px;background:var(--line-2);flex:none;transition:background .5s var(--ease)}
.ui__nav a.is-on{background:rgba(30,136,255,.12);color:var(--blue)}
.ui__nav a.is-on i{background:var(--blue)}

.ui__main{padding:16px;display:flex;flex-direction:column;gap:13px;min-height:0}
.ui__top{display:flex;justify-content:space-between;align-items:center}
.ui__top h3{font-size:1rem}
.ui__btn{font-size:.72rem;padding:7px 13px;border-radius:8px;background:var(--grad);color:#fff;transition:background .5s var(--ease)}
.ui__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ui__stat{
  padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);
  display:flex;flex-direction:column;gap:4px;transition:border-radius .6s var(--ease);
}
.ui__stat span{font-size:.62rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.ui__stat b{font-family:var(--ff-d);font-size:1.2rem;font-weight:500;line-height:1}
.ui__panel{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;
  padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);
  transition:border-radius .6s var(--ease);
}
.ui__panelhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ui__panelhead span{font-size:.68rem;font-weight:500;color:var(--txt-2)}
.ui__panelhead em{font-style:normal;font-size:.6rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* faint horizontal gridlines behind the bars */
.ui__chart{
  flex:1;min-height:0;display:flex;align-items:flex-end;gap:clamp(4px,1vw,9px);
  padding-bottom:1px;border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(var(--line) 0 1px,transparent 1px 25%);
  background-size:100% 100%;
}
.ui__chart i{
  flex:1;max-width:26px;margin-inline:auto;border-radius:3px 3px 1px 1px;
  background:var(--grad);height:calc(var(--h) * 100%);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .75s var(--ease),background .5s var(--ease);
}
.ui__axis{display:flex;gap:clamp(4px,1vw,9px)}
.ui__axis span{flex:1;text-align:center;font-size:.55rem;color:var(--muted);letter-spacing:.05em}

.ui__rows{display:grid;gap:6px}
.ui__rows li{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--line);font-size:.74rem;transition:border-radius .6s var(--ease);
}
.ui__av{width:20px;height:20px;border-radius:50%;background:var(--grad);flex:none;transition:background .5s var(--ease)}
.ui__rows li span{flex:1;color:var(--txt-2)}
.ui__pill{
  font-style:normal;font-size:.62rem;padding:3px 8px;border-radius:6px;
  background:rgba(43,217,138,.16);color:#2BD98A;transition:background .5s var(--ease),color .5s var(--ease);
}
.ui__pill--wip{background:rgba(30,136,255,.16);color:var(--blue)}

/* stage 1 — wireframe */
.show.s-1 .frame{box-shadow:none;border-radius:6px}
.show.s-1 .sk{color:transparent;background:var(--line-2);border-radius:3px}
.show.s-1 .ui__dot,.show.s-1 .ui__av,.show.s-1 .ui__chart i,
.show.s-1 .ui__nav a i,.show.s-1 .ui__btn,.show.s-1 .ui__pill{background:var(--line-2)}
.show.s-1 .ui__nav a.is-on{background:var(--line);color:transparent}
.show.s-1 .ui__stat,.show.s-1 .ui__rows li,.show.s-1 .ui__panel{border-style:dashed;border-radius:4px}
.show.s-1 .ui__chart{background-image:none}
.show.s-1 .ui__axis span{color:transparent;background:var(--line-2);border-radius:2px;margin-inline:30%}
.show.s-1 .ui__panelhead em{background:var(--line-2);color:transparent;border-radius:3px}

/* stage 2 + 3 — designed */
.show.s-2 .ui__chart i,.show.s-3 .ui__chart i{transform:scaleY(1)}
.ui__chart i:nth-child(1){transition-delay:.04s}
.ui__chart i:nth-child(2){transition-delay:.09s}
.ui__chart i:nth-child(3){transition-delay:.14s}
.ui__chart i:nth-child(4){transition-delay:.19s}
.ui__chart i:nth-child(5){transition-delay:.24s}
.ui__chart i:nth-child(6){transition-delay:.29s}
.ui__chart i:nth-child(7){transition-delay:.34s}
.ui__chart i:nth-child(8){transition-delay:.39s}

/* stage 3 — alive */
.frame__cursor{
  position:absolute;left:28%;top:76%;width:15px;height:15px;opacity:0;pointer-events:none;
  border-radius:50% 50% 52% 3px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.45);
  transform:translate(-50%,-50%);transition:opacity .4s var(--ease);
}
.show.s-3 .frame__cursor{opacity:1;animation:cursorPath 5.2s var(--ease) infinite}
@keyframes cursorPath{
  0%  {left:28%;top:76%;transform:translate(-50%,-50%) scale(1)}
  26% {left:74%;top:20%;transform:translate(-50%,-50%) scale(1)}
  31% {transform:translate(-50%,-50%) scale(.78)}
  36% {transform:translate(-50%,-50%) scale(1)}
  62% {left:42%;top:56%;transform:translate(-50%,-50%) scale(1)}
  100%{left:28%;top:76%;transform:translate(-50%,-50%) scale(1)}
}
.show.s-3 .ui__btn{animation:btnPulse 5.2s var(--ease) infinite}
@keyframes btnPulse{
  0%,26%{box-shadow:0 0 0 0 rgba(30,136,255,.55)}
  34%{box-shadow:0 0 0 11px rgba(30,136,255,0)}
  100%{box-shadow:0 0 0 0 rgba(30,136,255,0)}
}
.show.s-3 .ui__rows li:nth-child(2){animation:rowGlow 5.2s var(--ease) infinite}
@keyframes rowGlow{0%,55%{border-color:var(--line)}66%{border-color:var(--blue)}86%{border-color:var(--line)}}

@media (max-width:1024px){
  .show__track{height:auto}
  .show__pin{position:static;height:auto;grid-template-columns:1fr;padding-top:0;padding-bottom:var(--pad);gap:26px}
  .show__steps{order:2}
  .frame{max-height:none;order:1}
  .phases{--rail:26px}
}
@media (max-width:620px){
  .ui{grid-template-columns:1fr}
  .ui__side{display:none}
  .ui__stats{grid-template-columns:1fr 1fr}
  .ui__stat:last-child{display:none}
  .frame{aspect-ratio:4/5}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--hdr:64px}
  .nav,.hdr__act .btn{display:none}
  .burger{display:flex}
  .mega{display:none}
  .steps3,.tiers,.cards,.who__grid{grid-template-columns:1fr}
  .gets__grid{grid-template-columns:1fr 1fr}
  .faq__shell,.about__in,.contact__in,.ftr__top{grid-template-columns:1fr}
  .faq__side{position:static}
  .phase{grid-template-columns:48px 1fr}
  .phase__out{grid-column:2;padding-top:12px}
}
@media (max-width:720px){
  .gets__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .contact__facts li{grid-template-columns:1fr;gap:2px}
  .acc__a p{padding-right:0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .strip__track{transform:none!important}
}

/* ==========================================================================
   ADVANCED MOTION
   Modern platform features, each added as progressive enhancement: browsers
   without them get the previous behaviour, not a broken page.
   ========================================================================== */

/* --- cross-document view transitions -------------------------------------
   Navigating between pages cross-fades instead of flashing white, and the
   header and footer are declared as persistent so they hold still while the
   content between them changes. Ignored entirely by browsers without support. */
@view-transition { navigation: auto; }

.hdr{view-transition-name:site-header}
.ftr{view-transition-name:site-footer}
.rail{view-transition-name:site-rail}

::view-transition-old(root){animation:vtOut .26s var(--ease) both}
::view-transition-new(root){animation:vtIn .4s var(--ease) both}
@keyframes vtOut{to{opacity:0;translate:0 -10px}}
@keyframes vtIn{from{opacity:0;translate:0 14px}}

/* --- native scroll-driven animation ---------------------------------------
   Where supported, the reading-progress bar runs off the compositor with no
   JavaScript at all. main.js checks for the same feature and skips its own
   handler so the two never fight over the element. */
@supports (animation-timeline: scroll()) {
  .scrollbar i{
    width:100%;transform-origin:0 50%;scale:0 1;
    animation:barGrow linear both;animation-timeline:scroll(root block);
  }
  @keyframes barGrow{to{scale:1 1}}
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    /* the hero interface settles as it enters — driven by scroll position,
       not by a timer, so it tracks the reader exactly */
    .motif{animation:motifSettle linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
    @keyframes motifSettle{from{scale:.94;opacity:.4}to{scale:1;opacity:1}}
  }
}

/* --- pointer parallax on the hero interface --- */
.motif{transform-style:preserve-3d;will-change:transform}
.motif .mo-body,.motif .mo-bar{
  transition:translate .18s linear;
  translate:calc(var(--px,0px) * .22) calc(var(--py,0px) * .22);
}
/* a soft glare that tracks the pointer, so the tilt reads as a surface */
.motif::after{
  content:'';position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;
  background:radial-gradient(
    380px circle at calc(50% + var(--px,0px) * 7) calc(50% + var(--py,0px) * 7),
    rgba(255,255,255,.075),transparent 62%);
}
html[data-theme="light"] .motif::after{
  background:radial-gradient(
    380px circle at calc(50% + var(--px,0px) * 7) calc(50% + var(--py,0px) * 7),
    rgba(30,136,255,.07),transparent 62%);
}

/* --- header responds to scroll --- */
.brand__mark{transition:scale .4s var(--ease),rotate .5s var(--ease)}
.hdr.is-stuck .brand__mark{scale:.88}
.brand:hover .brand__mark{rotate:-4deg}
.hdr::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;
  background:linear-gradient(var(--bg),transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.hdr.is-stuck::after{opacity:.55}

/* --- section rail ---------------------------------------------------------
   Built by main.js from the sections actually on the page. Labels stay hidden
   until hover so it reads as a progress indicator rather than a second menu. */
.rail{
  position:fixed;right:clamp(14px,2vw,28px);top:50%;translate:0 -50%;z-index:850;
  display:flex;flex-direction:column;gap:3px;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.rail.is-vis{opacity:1;pointer-events:auto}
.rail a{
  display:flex;align-items:center;gap:10px;padding:5px 2px;
  color:var(--muted);text-decoration:none;
}
.rail i{
  width:18px;height:2px;border-radius:2px;background:var(--line-2);flex:none;
  transition:width .35s var(--ease),background .35s var(--ease);
}
.rail a:hover i{width:26px;background:var(--txt-2)}
.rail a.is-on i{width:30px;background:var(--grad)}
.rail__lbl{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  opacity:0;translate:8px 0;transition:opacity .3s var(--ease),translate .35s var(--ease);
}
.rail:hover .rail__lbl{opacity:.75;translate:0 0}
.rail a.is-on .rail__lbl{opacity:1;color:var(--txt-2)}
@media (max-width:1319px){.rail{display:none}}

@media (prefers-reduced-motion:reduce){
  .motif::after{display:none}
  .motif .mo-body,.motif .mo-bar{translate:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==========================================================================
   BRANDED ICONS
   Drawn in the logo's vocabulary — see content/icons.mjs. The sprite is inlined
   once per page and referenced with <use>.
   ========================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:22px;height:22px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* service cards get a tinted tile that tilts on hover */
.card__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:16px;
  background:linear-gradient(140deg,rgba(30,136,255,.16),rgba(122,60,242,.16));
  color:var(--blue);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card__ico .ico{width:23px;height:23px}
.card:hover .card__ico{transform:translateY(-3px) rotate(-5deg);box-shadow:0 10px 24px -12px rgba(30,136,255,.6)}

/* deliverables */
.gets__ico{display:block;color:var(--blue);margin-bottom:12px}
.gets__ico .ico{width:24px;height:24px}

/* mega menu — icon spans both text rows */
.mega__stack a{display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:start}
.mega__stack .ico{grid-row:1/3;width:19px;height:19px;color:var(--blue);opacity:.8;margin-top:3px}
.mega__stack b,.mega__stack span{grid-column:2}
.mega__stack a:hover .ico{opacity:1}

/* contact details */
.contact__facts li{grid-template-columns:auto 78px 1fr;gap:12px}
.contact__facts .ico{width:18px;height:18px;color:var(--blue);opacity:.85;align-self:center}
@media (max-width:720px){
  .contact__facts li{grid-template-columns:auto 1fr;gap:4px 12px}
  .contact__facts .ico{grid-row:1/3}
}
.form__alt{font-size:.83rem;color:var(--muted);text-align:center;line-height:1.6}
.form__alt a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   TOUCH TARGETS
   WCAG 2.2 asks for 24x24 minimum on pointer targets. Footer links and the
   brand lockup were coming in under that on a phone, so they get a minimum
   box rather than relying on their text height.
   ========================================================================== */
.ftr__cols a{min-height:32px;display:flex;align-items:center}
.ftr__base a,.totop{min-height:32px;display:inline-flex;align-items:center}
.drawer__mail{min-height:44px;display:flex;align-items:center}
.card__link{display:inline-block;padding-block:3px}

@media (max-width:1024px){
  /* the lockup is a link; give it a real hit area */
  .brand{padding-block:7px}
  /* 8px was legible on a desktop monitor and not on a phone */
  .brand__sub{font-size:9.5px;letter-spacing:.18em}
  .contact__facts a{min-height:30px;display:inline-flex;align-items:center}
  .sec__note a,.acc__a a,.form__alt a,.istart__alt a{min-height:28px;display:inline-flex;align-items:center}
}

/* very narrow phones: the sub-label starts to crowd the mark */
@media (max-width:359px){
  .brand__sub{display:none}
  .brand__type{font-size:.95rem}
}

/* spam honeypot — a real person never sees or tabs into this */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   CURRENT PAGE
   main.js marks the links pointing at the page you are on. Without this the
   menus give no indication of where you are — which was especially confusing
   on light theme, where the hover tint is subtle by design.
   ========================================================================== */
.nav__link[aria-current="page"]{color:var(--blue);background-color:rgba(30,136,255,.12)}

.mega__stack a[aria-current="page"],
.mega__grid a[aria-current="page"],
.dsub a[aria-current="page"]{
  background-color:rgba(30,136,255,.12);
  color:var(--blue);
  position:relative;
}
.mega__stack a[aria-current="page"] b{color:var(--blue)}
/* a left marker, so it reads as "here" rather than just "hovered" */
.mega__stack a[aria-current="page"]::before,
.mega__grid a[aria-current="page"]::before,
.dsub a[aria-current="page"]::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--grad);
}
.drawer__link[aria-current="page"]{color:var(--blue)}
.ftr__cols a[aria-current="page"]{color:var(--blue)}