/* ==========================================================================
   Pro Paxis — design system
   One stylesheet for every page. Edit tokens here, never per page.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --paper:#FFFFFF;
  --mist:#F4F6F8;
  --line:#E3E8EE;
  --line-soft:#EEF2F6;

  /* #38B6FF and #D9D9D9 are the logo. Used as-is for graphics, never for text. */
  --cyan:#38B6FF;
  --cyan-soft:#B2E3FF;
  --cyan-mist:#EBF8FF;
  --grey:#D9D9D9;

  /* derived at the logo's hue (202deg) so text passes contrast on white */
  --deep:#0D5985;
  --deep-hover:#0A4668;
  --ink:#0B2434;
  --ink-2:#102F43;
  --body:#51606E;
  --muted:#7C8794;

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.78,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shell:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --radius:12px;
  --radius-lg:18px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:104px}
body{background:var(--paper);color:var(--body);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--deep);text-decoration-color:color-mix(in srgb,var(--deep) 35%,transparent);text-underline-offset:3px}
a:hover{color:var(--deep-hover)}
ul{list-style:none}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
::selection{background:var(--cyan-soft);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:.85rem 1.25rem;z-index:999;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- TYPE ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.08;letter-spacing:-.02em;font-variation-settings:'wdth' 112;text-wrap:balance}
h1{font-size:clamp(2.15rem,3.9vw,3.4rem)}
h2{font-size:clamp(1.9rem,3.3vw,2.7rem);letter-spacing:-.025em}
h3{font-size:1.28rem;line-height:1.25;font-variation-settings:'wdth' 106}
h4{font-size:1.0625rem;font-variation-settings:'wdth' 104}
p{max-width:68ch}
.lede{font-size:clamp(1.08rem,1.45vw,1.22rem);line-height:1.6;color:var(--body);max-width:56ch}
.sub{color:var(--muted);font-size:.9375rem}
strong{color:var(--ink);font-weight:600}

/* ---------- LAYOUT ---------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(4rem,7vw,6.5rem)}
.band--mist{background:var(--mist)}
.band--edge{border-block:1px solid var(--line)}
.band--tight{padding-block:clamp(2.5rem,4vw,3.5rem)}
.band--flush{padding-top:0}
.head{max-width:58ch;margin-bottom:clamp(2.25rem,3.5vw,3rem)}
.head p{margin-top:1rem}
.head--mid{margin-inline:auto;text-align:center}
.head--mid p{margin-inline:auto}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-weight:600;font-size:.9875rem;font-variation-settings:'wdth' 104;padding:.92rem 1.6rem;border-radius:10px;text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn--primary{background:var(--deep);color:#fff;box-shadow:0 8px 22px -12px rgba(13,89,133,.7)}
.btn--primary:hover{background:var(--deep-hover);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(13,89,133,.8)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--deep);color:var(--deep);background:var(--cyan-mist)}
.btn--sm{padding:.6rem 1.1rem;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* ==========================================================================
   NAV
   ========================================================================== */
/* floating pill header: brand left, menu optically centred, CTA right */
.nav{position:sticky;top:0;z-index:100;padding:14px var(--gutter) 0;background:none;transition:padding .3s var(--ease)}
.nav[data-stuck="true"]{padding-top:8px}
.nav__inner{display:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  height:62px;max-width:1120px;margin-inline:auto;padding:0 .5rem 0 1.15rem;
  background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 2px 10px -6px rgba(11,36,52,.12),0 18px 44px -26px rgba(11,36,52,.3);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.nav[data-stuck="true"] .nav__inner{background:rgba(255,255,255,.93);
  box-shadow:0 2px 10px -6px rgba(11,36,52,.16),0 22px 54px -28px rgba(11,36,52,.42)}
/* explicit columns: when .nav__mid is hidden on mobile, auto-placement
   would otherwise drop .nav__end into the middle column */
.nav__inner > .brand{grid-column:1}
.nav__mid{grid-column:2;justify-self:center}
.nav__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.5rem}
.nav__cta{margin-left:0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.brand img{height:30px;width:auto}
.brand span{font-weight:700;font-size:1.0625rem;color:var(--ink);font-variation-settings:'wdth' 110;letter-spacing:-.015em}
.nav__links{display:flex;align-items:center;gap:.2rem}
.nav__links > li{position:relative}
/* `> li >` keeps this off the dropdown panel; :not(.btn) keeps it off the CTA */
.nav__links > li > a:not(.btn){display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .78rem;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--body);text-decoration:none;transition:background .18s,color .18s}
.nav__links > li > a:not(.btn):hover,.nav__links > li > a:not(.btn)[aria-current="page"]{background:var(--cyan-mist);color:var(--deep)}
.nav__links > li > a:not(.btn)[aria-current="page"]{font-weight:600}
.nav__drop > a svg{transition:transform .22s var(--ease)}
.nav__drop:hover > a svg,.nav__drop:focus-within > a svg{transform:rotate(180deg)}
.nav__panel{position:absolute;top:calc(100% + .5rem);left:50%;translate:-50% 0;min-width:560px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 24px 60px -24px rgba(11,36,52,.3);padding:.75rem;display:grid;grid-template-columns:1fr 1fr;gap:.15rem;opacity:0;visibility:hidden;translate:-50% 8px;transition:opacity .2s,translate .2s var(--ease),visibility .2s}
.nav__panel::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;visibility:visible;translate:-50% 0}
.nav__panel a{display:block;padding:.6rem .75rem;border-radius:9px;line-height:1.35;text-decoration:none;transition:background .18s}
.nav__panel a:hover{background:var(--mist)}
.nav__panel b{display:block;color:var(--ink);font-weight:600;font-size:.9375rem}
.nav__panel em{display:block;font-style:normal;color:var(--muted);font-size:.8125rem;margin-top:.1rem}
.nav__panel a:hover b{color:var(--deep)}
.nav__cta{margin-left:.5rem}

.burger{display:none;width:42px;height:42px;border-radius:999px;align-items:center;justify-content:center}
.burger:hover{background:var(--mist)}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
/* cover the whole viewport; the nav pill (z-index 100) stays above it,
   so no page content can show through behind the menu */
.sheet{position:fixed;inset:0;background:var(--paper);z-index:99;overflow-y:auto;padding:96px var(--gutter) 3rem;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.sheet[data-open="true"]{opacity:1;visibility:visible;transform:none}
.sheet a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:1.05rem;text-decoration:none}
.sheet .sheet__sub a{font-weight:500;font-size:.9688rem;color:var(--body);padding-left:1rem}
.sheet .btn{margin-top:1.5rem;width:100%}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;padding-block:clamp(2.25rem,4vw,3.5rem) clamp(3.5rem,6vw,5rem);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:80px 80px;opacity:.6;mask-image:radial-gradient(85% 78% at 76% 46%,#000 0%,transparent 70%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero h1{margin-bottom:1.2rem}
.flag{display:inline-flex;align-items:center;gap:.55rem;background:var(--cyan-mist);color:var(--deep);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);border-radius:100px;padding:.4rem .9rem .4rem .5rem;font-size:.8438rem;font-weight:600;margin-bottom:1.5rem}
.flag b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--cyan);color:#fff;font-size:.625rem;flex-shrink:0}
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 1.75rem;margin-top:2.25rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.proof dt{font-size:1.6rem;font-weight:700;color:var(--ink);font-variation-settings:'wdth' 108;line-height:1;letter-spacing:-.02em}
.proof dd{font-size:.8438rem;color:var(--muted);margin-top:.35rem;line-height:1.3}

/* ==========================================================================
   FLOW — the animated build sequence. The page's one bold moment.
   ========================================================================== */
.stage{perspective:1400px;perspective-origin:50% 40%}
.flow{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem;box-shadow:0 30px 70px -40px rgba(11,36,52,.35);
  transform-style:preserve-3d;transition:transform .5s var(--ease-out);
}
.flow__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;margin-bottom:.35rem;border-bottom:1px solid var(--line)}
.flow__head b{font-size:.8125rem;color:var(--ink);font-weight:600}
.flow__live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6875rem;color:var(--muted)}
.flow__live i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.flow[data-play="true"] .flow__live i{animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(56,182,255,.5)}50%{opacity:.65;box-shadow:0 0 0 5px rgba(56,182,255,0)}}

.step{position:relative;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:.9rem;padding:.72rem .55rem;border-radius:11px;opacity:0;transform:translateY(10px)}
.flow[data-play="true"] .step{animation:stepIn .55s var(--ease-out) forwards;animation-delay:var(--d)}
@keyframes stepIn{to{opacity:1;transform:none}}
/* connector rail between icons */
.step::before{content:'';position:absolute;left:19px;top:calc(50% + 19px);width:2px;height:calc(100% - 38px);background:var(--line);border-radius:2px}
.step:last-of-type::before{display:none}
.step::after{content:'';position:absolute;left:19px;top:calc(50% + 19px);width:2px;height:0;background:var(--c);border-radius:2px;transition:height .45s var(--ease-out)}
.flow[data-play="true"] .step::after{height:calc(100% - 38px);transition-delay:calc(var(--d) + .3s)}
.step:last-of-type::after{display:none}

.step__ic{width:38px;height:38px;border-radius:10px;background:var(--mist);border:1px solid var(--line);display:grid;place-items:center;position:relative;z-index:1;transition:background .4s var(--ease),border-color .4s var(--ease)}
.step__ic svg{width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.flow[data-play="true"] .step__ic{background:color-mix(in srgb,var(--c) 14%,#fff);
  border-color:color-mix(in srgb,var(--c) 34%,transparent);transition-delay:calc(var(--d) + .2s)}
.flow[data-play="true"] .step__ic svg{stroke:color-mix(in srgb,var(--c) 88%,#000);transition-delay:calc(var(--d) + .2s)}
.flow[data-play="true"] .step__ic svg .dash{stroke-dasharray:var(--l,60);stroke-dashoffset:var(--l,60);animation:trace .7s var(--ease-out) forwards;animation-delay:calc(var(--d) + .25s)}
@keyframes trace{to{stroke-dashoffset:0}}

.step__t{min-width:0}
.step__t b{display:block;color:var(--ink);font-size:.9375rem;font-weight:600;font-variation-settings:'wdth' 104;line-height:1.3}
.step__t > span{display:block;color:var(--muted);font-size:.8125rem;line-height:1.35;margin-top:.1rem}
.step__w{font-family:var(--mono);font-size:.6875rem;color:color-mix(in srgb,var(--c) 88%,#000);
  background:color-mix(in srgb,var(--c) 13%,#fff);border-radius:5px;padding:.25rem .5rem;white-space:nowrap}
.step--opt .step__w{color:var(--muted);background:var(--mist)}

/* marketplace chips, the branch at the end of the sequence */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0 .15rem 48px}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:8px;padding:.38rem .6rem;font-size:.8125rem;font-weight:600;color:var(--ink);background:var(--paper);opacity:0;transform:translateY(6px) scale(.97)}
.flow[data-play="true"] .chip{animation:stepIn .45s var(--ease-out) forwards;animation-delay:var(--d)}
.chip svg{width:14px;height:14px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   BRANDS / PLATFORMS
   ========================================================================== */
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.brands li{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:.6rem .95rem;font-weight:600;font-size:.9375rem;color:var(--ink);font-variation-settings:'wdth' 104}
.brands svg{width:16px;height:16px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.brands-note{text-align:center;margin:1.6rem auto 0;font-size:.8438rem;color:var(--muted);max-width:60ch}

/* ==========================================================================
   SEQUENCE STRIP
   ========================================================================== */
.seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.seq__step{padding:1.8rem 1.5rem;border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.seq__step:last-child{border-right:0}
.seq__step::before{content:'';position:absolute;top:0;left:0;height:3px;width:0;background:var(--cyan);transition:width .9s var(--ease-out);transition-delay:var(--d,0s)}
.seq[data-play="true"] .seq__step::before{width:100%}
.seq__n{font-family:var(--mono);font-size:.75rem;color:var(--cyan);font-weight:600;margin-bottom:.8rem}
.seq__step h3{font-size:1.0625rem;margin-bottom:.45rem}
.seq__step p{font-size:.9375rem;line-height:1.55}
.seq__wait{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:.75rem;color:var(--deep);background:var(--cyan-mist);border-radius:5px;padding:.2rem .5rem}
.seq__step p + .seq__wait{margin-top:1rem}

/* ==========================================================================
   STRATA
   ========================================================================== */
.strata{border-top:1px solid var(--line)}
.layer{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(190px,.62fr) minmax(0,1.55fr);gap:clamp(1.25rem,3vw,2.5rem);padding-block:2.4rem;align-items:start}
.layer__id{position:sticky;top:110px}
.layer__id h3{margin-bottom:.45rem}
.layer__id p{font-size:.9063rem;color:var(--muted);line-height:1.5}
.layer__tier{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6875rem;color:var(--deep);background:var(--cyan-mist);border-radius:5px;padding:.22rem .5rem;margin-bottom:.85rem}
.layer__list{display:grid;gap:.1rem}
.svc{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:1rem;padding:1rem;border-radius:11px;text-decoration:none;transition:background .2s var(--ease)}
.svc:hover{background:var(--mist)}
.svc__ic{width:38px;height:38px;border-radius:10px;background:var(--cyan-mist);display:grid;place-items:center;flex-shrink:0;transition:background .2s}
.svc__ic svg{width:18px;height:18px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .svc__ic{background:var(--cyan-soft)}
.svc b{display:block;color:var(--ink);font-weight:600;font-size:1.0313rem;font-variation-settings:'wdth' 104;margin-bottom:.2rem}
.svc div span{display:block;color:var(--body);font-size:.9375rem;line-height:1.5;max-width:52ch}
.svc em{font-style:normal;font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap;background:var(--mist);border-radius:5px;padding:.25rem .55rem;transition:background .2s,color .2s}
.svc:hover em{background:var(--cyan-mist);color:var(--deep)}
.svc:hover b{color:var(--deep)}

/* ==========================================================================
   REASONS
   ========================================================================== */
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.75rem,2.5vw,2.25rem)}
.reason{padding-top:1.3rem;border-top:2px solid var(--cyan)}
.reason h3{font-size:1.08rem;margin-bottom:.55rem}
.reason p{font-size:.9688rem;line-height:1.6}
@media (max-width:1080px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reasons{grid-template-columns:1fr}}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:1.1rem}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;display:flex;flex-direction:column}
.stars{display:flex;gap:2px;margin-bottom:1rem}
.stars svg{width:15px;height:15px;fill:#F5A623;stroke:none}
.review blockquote{color:var(--ink);font-size:1.0063rem;line-height:1.6;margin-bottom:1.35rem}
.review figcaption{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:auto}
.review .mark{width:38px;height:38px;border-radius:50%;background:var(--cyan-mist);color:var(--deep);display:grid;place-items:center;font-weight:700;font-size:.8125rem;flex-shrink:0}
.review b{display:block;color:var(--ink);font-size:.9375rem;font-weight:600}
.review figcaption span{display:block;color:var(--muted);font-size:.8125rem}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;cursor:pointer;color:var(--ink);font-weight:600;font-size:1.0313rem;line-height:1.4;list-style:none;font-variation-settings:'wdth' 104}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--deep)}
.faq summary i{flex-shrink:0;width:20px;height:20px;position:relative;margin-top:3px}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;background:var(--deep);border-radius:2px;transition:transform .25s var(--ease)}
.faq summary i::before{top:9px;left:2px;width:16px;height:2px}
.faq summary i::after{top:2px;left:9px;width:2px;height:16px}
.faq details[open] summary i::after{transform:rotate(90deg)}
.faq details > div{padding-bottom:1.4rem}
.faq details p{font-size:.9688rem;line-height:1.65}
.faq details p + p{margin-top:.7rem}

/* ==========================================================================
   PROSE (founder, about, legal)
   ========================================================================== */
.prose{max-width:70ch}
.prose h2{margin:2.5rem 0 .9rem;font-size:clamp(1.5rem,2.3vw,1.9rem)}
.prose h3{margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1.1rem}
.prose ul{margin:0 0 1.3rem;padding-left:0}
.prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.prose ul li::before{content:'';position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:2px;background:var(--cyan)}
.prose > :first-child{margin-top:0}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 24px 60px -44px rgba(11,36,52,.4)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.field label span{color:var(--deep)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.9688rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(56,182,255,.22)}
.field input::placeholder,.field textarea::placeholder{color:#9AA4B0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.form .btn{width:100%}
.form__note{font-size:.8125rem;color:var(--muted);margin-top:1rem;text-align:center}
.form__err{display:none;background:#FFF2F2;border:1px solid #F5C6C6;color:#A32B2B;border-radius:9px;padding:.7rem .9rem;font-size:.875rem;margin-bottom:1rem}
.form__err[data-show="true"]{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cline{display:flex;gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline__ic{width:38px;height:38px;border-radius:10px;background:var(--cyan-mist);display:grid;place-items:center;flex-shrink:0}
.cline__ic svg{width:18px;height:18px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cline h4{margin-bottom:.2rem}
.cline a{color:var(--ink);text-decoration:none;font-weight:500}
.cline a:hover{color:var(--deep)}
.cline p{font-size:.9375rem;color:var(--body);margin:0}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.close{background:var(--ink);border-radius:var(--radius-lg);padding:clamp(2.25rem,4.5vw,3.5rem);position:relative;overflow:hidden}
.close::after{content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 40%,transparent),transparent 68%)}
.close > *{position:relative;z-index:1}
.close h2{color:#fff;max-width:19ch}
.close p{color:#AFC2CF;margin-top:1rem;max-width:50ch}
.close .btn--primary{background:var(--cyan);color:var(--ink);box-shadow:none}
.close .btn--primary:hover{background:#fff;color:var(--ink)}
.close .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.close .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ==========================================================================
   FOOTER — dark
   ========================================================================== */
.foot{background:var(--ink);color:#9FB3C2;padding-block:clamp(3rem,5vw,4.25rem) 1.75rem;position:relative;overflow:hidden}
.foot::before{content:'';position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(56,182,255,.16),transparent 70%)}
.foot > *{position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:minmax(230px,1.4fr) repeat(auto-fit,minmax(140px,1fr));gap:2.5rem clamp(1.5rem,3vw,2.5rem)}
.foot .brand span{color:#fff}
.foot__brand p{font-size:.9063rem;color:#9FB3C2;margin-top:1rem;max-width:34ch;line-height:1.6}
.foot h4{font-size:.8125rem;color:#fff;margin-bottom:1rem;font-variation-settings:'wdth' 106}
.foot li{margin-bottom:.55rem}
.foot li a{font-size:.9063rem;color:#9FB3C2;text-decoration:none}
.foot li a:hover{color:var(--cyan)}
.social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:9px;display:grid;place-items:center;transition:border-color .2s,background .2s}
.social a:hover{border-color:var(--cyan);background:rgba(56,182,255,.14)}
.social svg{width:16px;height:16px;fill:#9FB3C2}
.social a:hover svg{fill:var(--cyan)}
.foot__contact a{display:block;font-size:.9063rem;color:#fff;text-decoration:none;font-weight:500;margin-bottom:.2rem}
.foot__contact a:hover{color:var(--cyan)}
.foot__contact span{display:block;font-size:.75rem;color:#7D93A4;margin-bottom:.85rem;font-family:var(--mono)}
.foot__contact p{font-size:.875rem;color:#9FB3C2;line-height:1.5}
.foot__base{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8438rem;color:#7D93A4}
.foot__base ul{display:flex;gap:1.25rem}
.foot__base a{color:#7D93A4;text-decoration:none}
.foot__base a:hover{color:var(--cyan)}

.wa{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:90;width:52px;height:52px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(37,211,102,.55);transition:transform .22s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:26px;height:26px;fill:#fff}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.8438rem;color:var(--muted);margin-bottom:1.25rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--deep)}
.crumb span{color:var(--line)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.rise.in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .nav__mid,.nav__cta{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .stage{max-width:520px;perspective:none}
  .flow{transform:none!important}
  .layer{grid-template-columns:1fr;gap:1.25rem;padding-block:2rem}
  .layer__id{position:static}
}
@media (max-width:760px){
  .seq{grid-template-columns:1fr}
  .seq__step{border-right:0;border-bottom:1px solid var(--line)}
  .seq__step:last-child{border-bottom:0}
  .svc{grid-template-columns:38px 1fr;gap:.9rem}
  .svc em{grid-column:2;justify-self:start;margin-top:.5rem}
}
@media (max-width:520px){
  body{font-size:1rem}
  .step{grid-template-columns:34px 1fr;gap:.75rem;padding:.65rem .35rem}
  .step__ic{width:34px;height:34px}
  .step::before,.step::after{left:17px;top:calc(50% + 17px);height:calc(100% - 34px)}
  .flow[data-play="true"] .step::after{height:calc(100% - 34px)}
  .step__w{grid-column:2;justify-self:start;margin-top:.35rem}
  .chips{margin-left:0}
  .foot__base{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   REDUCED MOTION — everything resolves to its finished state
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
  .step,.chip{opacity:1;transform:none}
  .flow{transform:none!important}
  .step::after{height:calc(100% - 38px)}
  .seq__step::before{width:100%}
}
@media print{.nav,.wa,.sheet,.close{display:none}body{color:#000}}

/* ==========================================================================
   ===  PREMIUM LAYER  ======================================================
   Added after the base system. Hero slider, 3D orbit, platform colours,
   section illustrations and the site-wide motion pass.
   ========================================================================== */

/* ---------- ambient hero wash ---------- */
.hero{isolation:isolate}
.hero::after{
  content:'';position:absolute;z-index:-1;inset:auto -10% -40% 30%;height:620px;
  background:radial-gradient(45% 50% at 70% 40%,rgba(56,182,255,.16),transparent 70%),
             radial-gradient(40% 45% at 35% 60%,rgba(13,89,133,.10),transparent 72%);
  filter:blur(8px);pointer-events:none;
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.slides{position:relative}
.slide{opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .42s var(--ease-out),transform .42s var(--ease-out),visibility .42s;pointer-events:none}
.slide[data-on="true"]{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.slide__kicker{display:inline-block;font-family:var(--mono);font-size:.7rem;color:var(--deep);
  background:var(--cyan-mist);border-radius:6px;padding:.3rem .6rem;margin-bottom:1.1rem}
.slide h1{margin-bottom:1.1rem}
.slide h1 .hl{color:var(--deep);position:relative;white-space:nowrap}
.slide h1 .hl::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.3em;
  background:var(--cyan);opacity:.22;border-radius:3px;transform:scaleX(0);transform-origin:left;
  animation:wipe .5s var(--ease-out) .12s forwards}
@keyframes wipe{to{transform:scaleX(1)}}

.dots{display:flex;gap:.55rem;margin-top:2rem;align-items:center}
.dot{width:26px;height:4px;border-radius:3px;background:var(--line);transition:background .3s,width .3s;position:relative;overflow:hidden}
.dot[aria-selected="true"]{width:46px;background:var(--cyan-mist)}
.dot[aria-selected="true"]::after{content:'';position:absolute;inset:0;background:var(--deep);
  transform-origin:left;transform:scaleX(0);animation:fill 2s linear forwards}
.slides[data-paused="true"] .dot[aria-selected="true"]::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

/* ==========================================================================
   3D ORBIT
   ========================================================================== */
.orbit{position:relative;width:100%;aspect-ratio:1;max-width:520px;margin-inline:auto}
.orbit__tilt{position:absolute;inset:0}
.orbit__ring{position:absolute;top:50%;left:50%;border:1px solid var(--line);border-radius:50%;
  translate:-50% -50%;aspect-ratio:1}
.orbit__ring.r1{width:70%;border-color:color-mix(in srgb,var(--cyan) 34%,transparent)}
.orbit__ring.r2{width:86%;border-style:dashed;border-color:var(--line)}
.orbit__ring.r3{width:100%;border-color:var(--line-soft)}
.orbit__ring.r1::after{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 5px rgba(56,182,255,.18);translate:-50% 0;
  animation:ringdot 36s linear infinite;transform-origin:50% calc(50% + 0px)}
@keyframes ringdot{to{rotate:360deg}}
.orbit__ring.r1{animation:ringdot 36s linear infinite}

.orbit__core{position:absolute;top:50%;left:50%;width:138px;height:138px;translate:-50% -50%;
  border-radius:50%;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;z-index:3;
  box-shadow:0 2px 6px -2px rgba(11,36,52,.1),0 26px 60px -28px rgba(11,36,52,.45)}
.orbit__core::before{content:'';position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,182,255,.2),transparent 68%);z-index:-1}
.orbit__core::after{content:'';position:absolute;inset:9px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--cyan) 30%,transparent)}
.orbit__core img{width:44px;height:auto}
.orbit__core b{display:block;font-size:.6563rem;color:var(--muted);font-family:var(--mono);margin-top:.3rem;letter-spacing:.02em}

/* true circle: 2D rotation, so nothing reads as an oval */
.orbit__spin{position:absolute;inset:0;animation:spin2d 36s linear infinite}
@keyframes spin2d{from{rotate:0deg}to{rotate:360deg}}
.orbit__node{position:absolute;top:50%;left:50%;width:0;height:0;
  transform:rotate(var(--a)) translate(var(--r,196px))}
/* each card undoes its own angle and the parent spin, so it never tips over */
.orbit__face{position:absolute;animation:unspin 36s linear infinite}
@keyframes unspin{
  from{transform:rotate(calc(0deg - var(--a)))}
  to  {transform:rotate(calc(-360deg - var(--a)))}
}
.orbit__card{position:absolute;display:flex;align-items:center;gap:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.46rem .85rem .46rem .5rem;
  white-space:nowrap;font-size:.8125rem;font-weight:600;color:var(--ink);
  transform:translate(-50%,-50%);
  box-shadow:0 2px 6px -3px rgba(11,36,52,.12),0 14px 30px -18px rgba(11,36,52,.4);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease)}
.orbit__card svg{width:15px;height:15px;fill:none;stroke:var(--deep);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:stroke .45s var(--ease)}
.orbit__card[data-hot="true"]{border-color:transparent;background:var(--deep);color:#fff;
  box-shadow:0 4px 10px -4px rgba(13,89,133,.5),0 18px 38px -18px rgba(13,89,133,.75)}
.orbit__card[data-hot="true"] svg{stroke:var(--cyan)}
.orbit:hover .orbit__spin,.orbit:hover .orbit__face,.orbit:hover .orbit__ring.r1{animation-play-state:paused}
.orbit__cap{position:absolute;left:0;right:0;bottom:-1.6rem;text-align:center;font-family:var(--mono);
  font-size:.75rem;color:var(--muted)}

/* ==========================================================================
   PLATFORM GRID — brand-tinted, original icons
   ========================================================================== */
/* 12 platforms: four explicit columns divide cleanly and leave room for
   the longer names. auto-fit produced 6 cramped columns with wrapping. */
.plat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media (max-width:1080px){.plat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.plat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plat li{display:flex;align-items:center;gap:.7rem;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:.85rem .95rem;font-weight:600;font-size:.9375rem;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.plat li:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 16px 34px -20px color-mix(in srgb,var(--c) 70%,transparent)}
.plat__ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--c) 13%,#fff)}
.plat__ic svg{width:17px;height:17px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.plat li small{display:block;font-size:.75rem;color:var(--muted);font-weight:500;margin-top:.08rem}

/* ==========================================================================
   SECTION ILLUSTRATIONS
   ========================================================================== */
.figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist);
  border:1px solid var(--line)}
.figure svg{width:100%;height:auto;display:block}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.split--flip .split__fig{order:-1}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2rem}.split--flip .split__fig{order:0}}

/* draw-in for illustration strokes */
.figure .ink{stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300)}
.figure[data-play="true"] .ink{animation:trace 1.1s var(--ease-out) forwards;animation-delay:var(--d,0s)}
.figure .pop{opacity:0;transform:scale(.9);transform-box:fill-box;transform-origin:center}
.figure[data-play="true"] .pop{animation:popIn .5s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes popIn{to{opacity:1;transform:none}}
.figure .float{animation:bob 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ==========================================================================
   LOCAL vs GLOBAL (about)
   ========================================================================== */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem}
.path{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.9rem;background:var(--paper);
  position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.path:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(11,36,52,.4)}
.path::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--grad,var(--cyan))}
.path__ic{width:44px;height:44px;border-radius:12px;background:var(--cyan-mist);display:grid;place-items:center;margin-bottom:1.1rem}
.path__ic svg{width:21px;height:21px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.path h3{margin-bottom:.6rem}
.path > p{font-size:.9688rem;margin-bottom:1.2rem}
.path ol{list-style:none;counter-reset:s}
.path ol li{counter-increment:s;position:relative;padding-left:2rem;margin-bottom:.7rem;font-size:.9375rem;line-height:1.5}
.path ol li::before{content:counter(s);position:absolute;left:0;top:.05em;width:21px;height:21px;border-radius:6px;
  background:var(--cyan-mist);color:var(--deep);font-size:.6875rem;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}

/* ==========================================================================
   SITE-WIDE MOTION PASS
   ========================================================================== */
.stagger > *{opacity:0;transform:translateY(18px)}
.stagger.in > *{animation:stepIn .6s var(--ease-out) forwards}
.stagger.in > *:nth-child(1){animation-delay:.00s}
.stagger.in > *:nth-child(2){animation-delay:.07s}
.stagger.in > *:nth-child(3){animation-delay:.14s}
.stagger.in > *:nth-child(4){animation-delay:.21s}
.stagger.in > *:nth-child(5){animation-delay:.28s}
.stagger.in > *:nth-child(6){animation-delay:.35s}
.stagger.in > *:nth-child(7){animation-delay:.42s}
.stagger.in > *:nth-child(8){animation-delay:.49s}
.stagger.in > *:nth-child(n+9){animation-delay:.56s}

.lift{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.lift:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(11,36,52,.42)}
.review{transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.review:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(11,36,52,.42)}
.svc{position:relative}
.svc::after{content:'';position:absolute;left:1rem;right:1rem;bottom:.35rem;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.svc:hover::after{transform:scaleX(1)}
.layer__tier,.seq__n{position:relative}
.btn--primary::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn--primary{position:relative;overflow:hidden}
.btn--primary:hover::after{transform:translateX(120%)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .orbit{max-width:430px}
  .orbit__node{--r:162px}
  .orbit__core{width:112px;height:112px}
  .orbit__core img{width:36px}
}
@media (max-width:520px){
  .orbit{max-width:310px}
  .orbit__node{--r:118px}
  .orbit__core{width:84px;height:84px}
  .orbit__core img{width:28px}
  .orbit__card{font-size:.6875rem;padding:.34rem .5rem}
  .orbit__card svg{width:12px;height:12px}
  .plat{gap:.5rem}
  .plat li{padding:.65rem .6rem;font-size:.8125rem}
  .plat li small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .orbit__spin,.orbit__face,.orbit__ring.r1{animation:none!important}
  .slide{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .slide:not([data-on="true"]){display:none}
  .stagger > *{opacity:1;transform:none;animation:none!important}
  .figure .ink{stroke-dashoffset:0}
  .figure .pop{opacity:1;transform:none}
  .figure .float{animation:none}
  .slide h1 .hl::after{transform:scaleX(1);animation:none}
  .dot[aria-selected="true"]::after{animation:none;transform:scaleX(1)}
}

/* ---------- setup notice: visible only while the form key is unset ---------- */
.setup-note{display:none;background:#FFF8E6;border:1px solid #F0D898;border-radius:10px;
  padding:.9rem 1rem;margin-bottom:1.1rem;font-size:.8438rem;line-height:1.55;color:#6B5316}
.setup-note[data-visible="true"]{display:block}
.setup-note b{display:block;color:#5A4310;margin-bottom:.25rem;font-size:.875rem}
.setup-note code{background:#fff;border:1px solid #EADCB4;border-radius:4px;padding:.05rem .3rem;
  font-family:var(--mono);font-size:.78em;color:#5A4310}
.setup-note a{color:#8A6914}

/* Only the first slide is an <h1>; the rest repeat its look without
   adding extra headings to the document outline. */
.slide__h{font-family:var(--sans);font-size:clamp(2.15rem,3.9vw,3.4rem);font-weight:700;
  line-height:1.08;letter-spacing:-.02em;font-variation-settings:'wdth' 112;color:var(--ink);
  text-wrap:balance;margin-bottom:1.1rem;max-width:none}
.slide__h .hl{color:var(--deep);position:relative;white-space:nowrap}
.slide__h .hl::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.3em;
  background:var(--cyan);opacity:.22;border-radius:3px;transform:scaleX(0);transform-origin:left;
  animation:wipe .5s var(--ease-out) .12s forwards}
@media (prefers-reduced-motion:reduce){.slide__h .hl::after{transform:scaleX(1);animation:none}}

/* split() passes raw paragraphs, so they need their own rhythm */
.split p + p{margin-top:.9rem}
.split .layer__tier{margin-bottom:1rem}

/* ==========================================================================
   ===  POLISH PASS  ========================================================
   Per-section hover accents, softer elevation, refined surfaces.
   ========================================================================== */

/* ---------- section accents: each layer gets its own hover colour ---------- */
.layer{--accent:#38B6FF;--accent-ink:#0D5985}
.layer:nth-of-type(1){--accent:#38B6FF;--accent-ink:#0D5985}   /* foundation  */
.layer:nth-of-type(2){--accent:#F59E0B;--accent-ink:#8A5A05}   /* marketplaces */
.layer:nth-of-type(3){--accent:#10B981;--accent-ink:#06694D}   /* storefronts  */
.layer:nth-of-type(4){--accent:#8B5CF6;--accent-ink:#5B32B5}   /* demand       */
.layer .layer__tier{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-ink)}
.svc:hover{background:color-mix(in srgb,var(--accent) 7%,#fff)}
.svc:hover .svc__ic{background:color-mix(in srgb,var(--accent) 20%,#fff)}
.svc:hover .svc__ic svg{stroke:var(--accent-ink)}
.svc:hover b{color:var(--accent-ink)}
.svc:hover em{background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent-ink)}
.svc::after{background:var(--accent)}
.svc__ic,.svc__ic svg{transition:background .25s var(--ease),stroke .25s var(--ease)}

/* reasons: a tint per card */
.reasons .reason:nth-child(1){--accent:#38B6FF}
.reasons .reason:nth-child(2){--accent:#F59E0B}
.reasons .reason:nth-child(3){--accent:#10B981}
.reasons .reason:nth-child(4){--accent:#8B5CF6}
.reason{border-top-color:var(--accent,var(--cyan));transition:border-color .25s,transform .25s var(--ease)}
.reason:hover{transform:translateY(-3px)}
.reason:hover h3{color:var(--accent,var(--deep))}
.reason h3{transition:color .25s var(--ease)}

/* paths: tint per card, matched to the gradient bar */
.paths .path:nth-child(1){--accent:#38B6FF}
.paths .path:nth-child(2){--accent:#0D5985}
.paths .path:nth-child(3){--accent:#8B5CF6}
.path:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.path:hover .path__ic{background:color-mix(in srgb,var(--accent) 18%,#fff)}
.path:hover .path__ic svg{stroke:var(--accent)}
.path:hover h3{color:var(--accent)}
.path h3,.path__ic,.path__ic svg{transition:color .25s var(--ease),background .25s var(--ease),stroke .25s var(--ease)}

/* seq strip: each stage its own colour */
.seq__step:nth-child(1){--accent:#38B6FF}
.seq__step:nth-child(2){--accent:#F59E0B}
.seq__step:nth-child(3){--accent:#10B981}
.seq__step:nth-child(4){--accent:#8B5CF6}
.seq__step::before{background:var(--accent)}
.seq__step{transition:background .25s var(--ease)}
.seq__step:hover{background:color-mix(in srgb,var(--accent) 5%,#fff)}
.seq__n{color:var(--accent)}
.seq__step:hover .seq__wait{background:color-mix(in srgb,var(--accent) 15%,#fff)}

/* faq rows */
.faq details{transition:background .22s var(--ease)}
.faq details:hover{background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.faq summary{padding-inline:.9rem;margin-inline:-.9rem;border-radius:10px}

/* ---------- elevation: two-part shadows read as real depth ---------- */
.review,.path,.form,.plat li,.flow{
  box-shadow:0 1px 3px -1px rgba(11,36,52,.08),0 16px 40px -24px rgba(11,36,52,.32)}
.review:hover,.path:hover{
  box-shadow:0 2px 6px -2px rgba(11,36,52,.1),0 28px 56px -28px rgba(11,36,52,.4)}
.figure{box-shadow:0 1px 3px -1px rgba(11,36,52,.06),0 20px 48px -30px rgba(11,36,52,.3)}

/* ---------- surfaces ---------- */
.band--mist{background:linear-gradient(180deg,#F7F9FB 0%,var(--mist) 100%)}
.review,.path,.plat li,.form{background:linear-gradient(180deg,#fff 0%,#FDFEFF 100%)}
.close{background:linear-gradient(145deg,#0B2434 0%,#123246 60%,#0D2A3C 100%)}
.close::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(70% 90% at 80% 10%,#000,transparent 70%)}
.foot{background:linear-gradient(180deg,#0B2434 0%,#081925 100%)}

/* ---------- type polish ---------- */
.lede{color:#56656F}
.proof dt{background:linear-gradient(135deg,var(--ink) 30%,var(--deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.head h2{letter-spacing:-.028em}

/* ---------- quieter grid behind the hero ---------- */
.hero::before{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .reason:hover,.path:hover,.review:hover,.plat li:hover{transform:none}
}

/* ==========================================================================
   ===  MOBILE + LAYOUT FIXES  ==============================================
   ========================================================================== */

/* --- icon boxes: `.svc span{display:block}` was out-ranking `.svc__ic`
       (0,1,1 beats 0,1,0), flattening the grid and pinning icons to the
       top-left. Scoped to the description span only. --- */
.svc div span{display:block;color:var(--body);font-size:.9375rem;line-height:1.5;max-width:52ch}
.svc__ic{display:grid!important;place-items:center;align-content:center;justify-content:center}
.svc__ic svg{margin:0}
.cline__ic,.path__ic,.step__ic,.plat__ic{display:grid;place-items:center;align-content:center}

/* --- slider: stack every slide in one grid cell so the container is always
       as tall as the tallest one. Swapping no longer reflows the page. --- */
.slides{display:grid}
.slides > .slide{grid-area:1/1;position:static}
.slide{position:static}
.slide[data-on="false"]{pointer-events:none}

/* --- headline highlight must be allowed to wrap on narrow screens --- */
@media (max-width:920px){
  .slide h1 .hl,.slide__h .hl{white-space:normal}
}

/* --- hero children must be allowed to shrink inside the grid --- */
.hero__grid > *{min-width:0}
.proof div{min-width:0}
.proof dd{overflow-wrap:break-word}

/* --- orbit: logo dead-centre inside the dotted ring, no caption text --- */
.orbit__core{display:grid;place-items:center;align-content:center}
.orbit__core img{width:46px;margin:0}
.orbit__core::after{inset:11px}

/* --- footer: single column on phones so nothing runs off the edge --- */
@media (max-width:900px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:620px){
  .foot__grid{grid-template-columns:1fr;gap:2rem}
  .foot__brand{grid-column:auto}
  .foot__contact a,.foot__contact p,.foot li a{overflow-wrap:anywhere}
}

/* --- mobile sheet: Home first, Services collapsible, CTA centred --- */
.sheet details{border-bottom:1px solid var(--line)}
.sheet details > summary{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 0;cursor:pointer;color:var(--ink);font-weight:600;font-size:1.05rem;list-style:none}
.sheet details > summary::-webkit-details-marker{display:none}
.sheet details > summary i{width:18px;height:18px;position:relative;flex-shrink:0}
.sheet details > summary i::before,.sheet details > summary i::after{content:'';position:absolute;
  background:var(--deep);border-radius:2px;transition:transform .25s var(--ease)}
.sheet details > summary i::before{top:8px;left:1px;width:16px;height:2px}
.sheet details > summary i::after{top:1px;left:8px;width:2px;height:16px}
.sheet details[open] > summary i::after{transform:rotate(90deg)}
.sheet details[open] > summary{color:var(--deep)}
.sheet details a{border-bottom:0;padding:.62rem 0 .62rem 1rem;font-weight:500;font-size:.9688rem;color:var(--body)}
.sheet details a:last-child{padding-bottom:1rem}
.sheet .btn{margin-top:1.75rem;width:100%;justify-content:center;text-align:center;
  font-size:1.0313rem;font-weight:700;padding:1.05rem 1.6rem;border-bottom:0}
.sheet .btn:hover{color:#fff}

/* --- mobile orbit: keep the whole ring inside the page gutter --- */
@media (max-width:520px){
  .orbit{max-width:290px}
  .orbit__node{--r:102px}
  .orbit__core{width:80px;height:80px}
  .orbit__core img{width:28px}
  .orbit__core::after{inset:8px}
  .orbit__card{font-size:.6563rem;padding:.3rem .55rem .3rem .36rem;gap:.3rem}
  .orbit__card svg{width:11px;height:11px}
  .orbit__cap{bottom:-1.3rem;font-size:.6875rem}
}
@media (max-width:380px){
  .orbit{max-width:258px}
  .orbit__node{--r:92px}
}

/* FAQ pairs with an illustration; the heading and figure stay put while
   the questions scroll past on desktop. */
.split--faq{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.split__fig--sticky{position:sticky;top:110px}
.split--faq .faq{border-top:0}
.split--faq .faq details:first-child{border-top:1px solid var(--line)}
@media (max-width:900px){
  .split--faq{grid-template-columns:1fr}
  .split__fig--sticky{position:static}
  .split--faq .split__fig--sticky .figure{display:none}
}

/* While the mobile menu is open the nav is pinned, so the close button is
   always reachable no matter how far the page was scrolled. */
html[data-menu="open"] .nav{position:fixed;top:0;left:0;right:0;padding-top:14px}
html[data-menu="open"] .nav__inner{background:#fff}

/* ==========================================================================
   ===  FINAL PASS  =========================================================
   ========================================================================== */

/* --- Phones: eight text pills cannot sit round a 300px circle without
       colliding, so the ring becomes icon-only chips. The service names are
       already listed in full directly below, in "Four layers". --- */
@media (max-width:620px){
  .orbit{max-width:280px;aspect-ratio:1}
  .orbit__node{--r:104px}
  .orbit__card{padding:0;width:40px;height:40px;border-radius:50%;justify-content:center;gap:0}
  .orbit__lb{display:none}
  .orbit__card svg{width:17px;height:17px}
  .orbit__core{width:84px;height:84px}
  .orbit__core img{width:30px}
  .orbit__core::after{inset:8px}
  .orbit__cap{bottom:-1.4rem;font-size:.6875rem}
}
@media (max-width:360px){
  .orbit{max-width:244px}
  .orbit__node{--r:90px}
  .orbit__card{width:36px;height:36px}
  .orbit__card svg{width:15px;height:15px}
}

/* --- richer hero composition: drifting arc + soft aura --- */
.orbit__arc{position:absolute;top:50%;left:50%;width:78%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:2px solid transparent;
  border-top-color:color-mix(in srgb,var(--cyan) 70%,transparent);
  border-right-color:color-mix(in srgb,var(--cyan) 22%,transparent);
  animation:spin2d 9s linear infinite}
.orbit__aura{position:absolute;top:50%;left:50%;width:120%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;background:radial-gradient(circle,rgba(56,182,255,.14),transparent 62%);
  animation:breathe 7s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
.orbit__core{animation:corePulse 7s ease-in-out infinite}
@keyframes corePulse{0%,100%{box-shadow:0 2px 6px -2px rgba(11,36,52,.1),0 26px 60px -28px rgba(11,36,52,.45)}
  50%{box-shadow:0 2px 6px -2px rgba(11,36,52,.1),0 26px 60px -28px rgba(11,36,52,.45),0 0 0 14px rgba(56,182,255,.07)}}

@media (prefers-reduced-motion:reduce){
  .orbit__arc,.orbit__aura,.orbit__core{animation:none!important}
}

/* Hero copy must respect its grid column; 56ch was wider than the column at
   desktop, so the sentence ran under the orbit. */
.slides .lede,.slide .lede{max-width:100%}
.hero__grid > div:first-child{min-width:0;max-width:100%}
.orbit__aura{width:106%}
@media (min-width:1001px){
  .hero__grid{gap:clamp(2.5rem,4.5vw,4rem)}
}

/* ---- Highlight underline, rebuilt ----
   The old version used white-space:nowrap plus an absolutely positioned
   ::after. In the slider's grid cell that nowrap set a min-width wider than
   the hero column, pushing the copy under the orbit. A clipped background
   with box-decoration-break wraps correctly, so nowrap is gone. */
.slide h1 .hl,.slide__h .hl{
  white-space:normal;
  color:var(--deep);
  background-image:linear-gradient(color-mix(in srgb,var(--cyan) 34%,transparent),
                                   color-mix(in srgb,var(--cyan) 34%,transparent));
  background-repeat:no-repeat;
  background-position:0 86%;
  background-size:0% .30em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:wipeBg .55s var(--ease-out) .12s forwards;
}
.slide h1 .hl::after,.slide__h .hl::after{content:none}
@keyframes wipeBg{to{background-size:100% .30em}}

/* grid items default to min-width:auto, which let the widest slide set the
   track width; 0 lets the column govern instead */
.slides,.slides > .slide{min-width:0}
.slide h1,.slide__h,.slide .lede{max-width:100%;overflow-wrap:break-word}

@media (prefers-reduced-motion:reduce){
  .slide h1 .hl,.slide__h .hl{background-size:100% .30em;animation:none}
}

/* ==========================================================================
   ===  COLOUR PASS  ========================================================
   Solid accent tiles with white glyphs, stat icons, denser visual rhythm.
   ========================================================================== */
:root{
  --c-blue:#0D5985;  --c-sky:#38B6FF;   --c-teal:#0E9F8E;  --c-green:#19A463;
  --c-amber:#F59E0B; --c-orange:#F2740C;--c-red:#E04353;   --c-pink:#E8366F;
  --c-violet:#7C5CF0;--c-indigo:#4F46E5;
}

/* --- the tile: solid colour, white glyph (Enablers-style) --- */
.tile{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  background:var(--c,var(--c-sky));
  box-shadow:0 3px 8px -3px color-mix(in srgb,var(--c,var(--c-sky)) 65%,transparent),
             0 10px 22px -12px color-mix(in srgb,var(--c,var(--c-sky)) 75%,transparent);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.tile svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile--sm{width:38px;height:38px;border-radius:11px}
.tile--sm svg{width:18px;height:18px}
.tile--lg{width:54px;height:54px;border-radius:15px}
.tile--lg svg{width:26px;height:26px}
a:hover > .tile,.lift:hover .tile,.path:hover .tile,.ecoc:hover .tile{transform:translateY(-2px) scale(1.04)}

/* --- hero stats now carry icons --- */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem;
  margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.proof > div{display:flex;align-items:center;gap:.7rem;min-width:0}
.proof dt{font-size:1.45rem;line-height:1;margin-bottom:.15rem}
.proof dd{font-size:.8125rem;margin-top:0}
.proof .tile{width:38px;height:38px;border-radius:11px}
.proof .tile svg{width:18px;height:18px}

/* --- service rows: real colour per service --- */
.svc:hover{background:color-mix(in srgb,var(--c,var(--c-sky)) 7%,#fff)}
.svc:hover b{color:color-mix(in srgb,var(--c,var(--c-sky)) 86%,#000)}
.svc:hover em{background:color-mix(in srgb,var(--c,var(--c-sky)) 15%,#fff);
  color:color-mix(in srgb,var(--c,var(--c-sky)) 86%,#000)}
.svc::after{background:var(--c,var(--c-sky))}

/* --- ecosystem grid --- */
.eco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.ecoc{display:flex;align-items:flex-start;gap:.85rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:1.15rem;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.ecoc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 3px 8px -3px rgba(11,36,52,.08),0 22px 44px -26px color-mix(in srgb,var(--c) 70%,transparent)}
.ecoc b{display:block;color:var(--ink);font-size:.9688rem;font-weight:700;font-variation-settings:'wdth' 104;margin-bottom:.15rem}
.ecoc div span{display:block;color:var(--muted);font-size:.8125rem;line-height:1.4}
@media (max-width:1080px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.eco{grid-template-columns:1fr}}

/* --- reasons get coloured tiles --- */
.reason{border-top:0;padding-top:0}
.reason .tile{margin-bottom:1rem}
.reason h3{margin-bottom:.5rem}

/* --- platform grid: solid tiles --- */
.plat__ic{background:var(--c);border-radius:11px}
.plat__ic svg{stroke:#fff}
.plat li:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}

/* --- metric band, coloured and horizontal like theirs --- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.metric{display:flex;align-items:center;gap:.9rem;padding:1.5rem 1.35rem;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric b{display:block;font-size:1.5rem;font-weight:700;color:var(--ink);
  font-variation-settings:'wdth' 108;line-height:1;letter-spacing:-.02em}
.metric div span{display:block;font-size:.8125rem;color:var(--muted);margin-top:.3rem;line-height:1.35}
@media (max-width:1000px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.metrics{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}.metric:last-child{border-bottom:0}}

/* ==========================================================================
   NAV — separated from the page, brand lockup, Home link
   ========================================================================== */
.nav__inner{background:rgba(255,255,255,.72);border-color:#DCE3EB;
  box-shadow:0 1px 2px rgba(11,36,52,.04),0 10px 28px -14px rgba(11,36,52,.26),
             inset 0 1px 0 rgba(255,255,255,.9)}
.nav[data-stuck="true"] .nav__inner{background:rgba(255,255,255,.94);border-color:#D3DCE6;
  box-shadow:0 1px 2px rgba(11,36,52,.05),0 16px 36px -16px rgba(11,36,52,.34),
             inset 0 1px 0 rgba(255,255,255,.95)}
/* a faint tinted field behind the pill so it reads as a separate surface */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(235,248,255,.85),rgba(235,248,255,0));
  pointer-events:none}
.nav{position:sticky;isolation:isolate}

.brand{gap:.65rem}
.brand__mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,#0D5985,#38B6FF);flex-shrink:0;
  box-shadow:0 2px 6px -2px rgba(13,89,133,.5),0 8px 18px -10px rgba(13,89,133,.6)}
.brand__mark img{width:21px;height:auto;filter:brightness(0) invert(1)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-weight:700;font-size:1.0625rem;color:var(--ink);
  font-variation-settings:'wdth' 110;letter-spacing:-.015em}
.brand__txt i{font-style:normal;font-size:.625rem;color:var(--muted);font-family:var(--mono);
  letter-spacing:.07em;margin-top:.18rem;text-transform:uppercase}
@media (max-width:420px){.brand__txt i{display:none}}

/* ==========================================================================
   HERO — compressed so the whole composition fits a laptop at 100% zoom
   ========================================================================== */
.hero{padding-block:clamp(1.5rem,2.5vw,2.25rem) clamp(2.5rem,4vw,3.5rem)}
.hero h1,.slide h1,.slide__h{font-size:clamp(1.95rem,3.2vw,2.95rem)}
.slide .lede{font-size:clamp(1rem,1.2vw,1.09rem);line-height:1.55}
.slide__kicker{margin-bottom:.85rem}
.slide h1,.slide__h{margin-bottom:.85rem}
.btn-row{margin-top:1.5rem}
.dots{margin-top:1.5rem}
.orbit{max-width:452px}
.orbit__node{--r:172px}
@media (min-width:1001px) and (max-height:820px){
  .hero{padding-block:1.25rem 2rem}
  .orbit{max-width:404px}
  .orbit__node{--r:152px}
  .orbit__core{width:116px;height:116px}
}


/* ==========================================================================
   Icon tiles, made collision-proof.
   A plain `span { display:block }` rule in a parent section out-ranks
   `.tile` on specificity and flattens the grid, which pins the glyph to the
   top of the box. Those rules are now scoped to their text spans, and the
   tile declares its own centring at higher specificity as a backstop.
   ========================================================================== */
.tile,.tile--sm,.tile--lg,
.svc > .tile,.ecoc > .tile,.metric > .tile,.proof .tile,.reason > .tile{
  display:inline-grid;
  place-items:center;
  place-content:center;
  line-height:0;
}
.tile > svg,.plat__ic > svg,.cline__ic > svg,.path__ic > svg,.step__ic > svg{
  display:block;margin:0;grid-area:1/1;align-self:center;justify-self:center;
}
.plat__ic,.cline__ic,.path__ic,.step__ic,.svc__ic,.brand__mark{
  display:inline-grid;place-items:center;place-content:center;line-height:0;
}


/* ==========================================================================
   NAV, final layout
   The brand sits in the top-left corner of the page, outside the menu.
   The pill holds only the links and the CTA.
   ========================================================================== */
.nav__row{display:flex;align-items:center;gap:1.25rem;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);height:72px}
.nav__row > .brand{margin-right:auto;flex-shrink:0}

.nav__pill{display:flex;align-items:center;gap:.5rem;height:56px;
  padding:0 .4rem 0 .6rem;border-radius:999px;
  background:rgba(255,255,255,.76);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid #DCE3EB;
  box-shadow:0 1px 2px rgba(11,36,52,.04),0 10px 28px -14px rgba(11,36,52,.26),
             inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.nav[data-stuck="true"] .nav__pill{background:rgba(255,255,255,.95);border-color:#D3DCE6;
  box-shadow:0 1px 2px rgba(11,36,52,.05),0 16px 36px -16px rgba(11,36,52,.34),
             inset 0 1px 0 rgba(255,255,255,.95)}
.nav__pill .nav__cta{margin-left:.25rem}

/* the brand gets its own quiet surface so it reads as a logo, not a link */
.brand{padding:.4rem .75rem .4rem .4rem;border-radius:999px;
  transition:background .25s var(--ease)}
.brand:hover{background:rgba(255,255,255,.7)}

@media (max-width:1040px){
  .nav__pill{display:none}
  .burger{display:flex}
  .nav__row{height:68px}
}
@media (min-width:1041px){.burger{display:none}}

/* ==========================================================================
   ===  SUBPAGE COLOUR  =====================================================
   Each service page inherits its own accent via --c on <body>, so the hero,
   bullets, breadcrumb and panels all carry the same colour.
   ========================================================================== */
body{--c:var(--c-sky)}

/* page hero gets a tinted field in the page's own colour */
.phero{position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 90% at 82% 8%,color-mix(in srgb,var(--c) 16%,transparent),transparent 72%),
             linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,transparent),transparent 62%)}
.phero__tag{display:inline-flex;align-items:center;gap:.5rem;background:color-mix(in srgb,var(--c) 13%,#fff);
  color:color-mix(in srgb,var(--c) 88%,#000);border:1px solid color-mix(in srgb,var(--c) 28%,transparent);
  border-radius:100px;padding:.35rem .8rem;font-size:.8125rem;font-weight:600;margin-bottom:1.1rem}
.phero__tag .dotc{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}

/* breadcrumb + eyebrows pick up the accent */
.crumb a:hover{color:color-mix(in srgb,var(--c) 85%,#000)}
.layer__tier,.seq__n{color:color-mix(in srgb,var(--c) 85%,#000)}
.phero .layer__tier{background:color-mix(in srgb,var(--c) 13%,#fff)}

/* included list: square bullets in the page colour */
.prose ul li::before{background:var(--c)}
.inclist{display:grid;gap:.6rem}
.inclist li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem .9rem;border-radius:11px;
  background:#fff;border:1px solid var(--line);font-size:.9688rem;line-height:1.5;
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.inclist li:hover{border-color:color-mix(in srgb,var(--c) 42%,transparent);transform:translateX(3px)}
.inclist .tick{width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--c) 15%,#fff);
  display:inline-grid;place-items:center;place-content:center;flex-shrink:0;margin-top:.1rem;line-height:0}
.inclist .tick svg{width:13px;height:13px;fill:none;stroke:color-mix(in srgb,var(--c) 88%,#000);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* the service page's side card */
.flow__head b{color:color-mix(in srgb,var(--c) 88%,#000)}
.phero .step__ic{background:color-mix(in srgb,var(--c) 14%,#fff);
  border-color:color-mix(in srgb,var(--c) 28%,transparent)}
.phero .step__ic svg{stroke:color-mix(in srgb,var(--c) 88%,#000)}
.phero .flow__live i{background:var(--c)}
.phero .step__w{background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 88%,#000)}
.phero .step::after{background:var(--c)}

/* buttons on a coloured page */
.phero .btn--primary{background:color-mix(in srgb,var(--c) 92%,#000);
  box-shadow:0 8px 22px -12px color-mix(in srgb,var(--c) 85%,transparent)}
.phero .btn--primary:hover{background:color-mix(in srgb,var(--c) 78%,#000)}
.phero .btn--ghost:hover{border-color:var(--c);color:color-mix(in srgb,var(--c) 88%,#000);
  background:color-mix(in srgb,var(--c) 8%,#fff)}

/* FAQ + closing band on subpages */
.faq details:hover{background:color-mix(in srgb,var(--c) 5%,transparent)}
.faq summary i::before,.faq summary i::after{background:color-mix(in srgb,var(--c) 88%,#000)}
.faq summary:hover{color:color-mix(in srgb,var(--c) 88%,#000)}
.close::after{background:radial-gradient(circle,color-mix(in srgb,var(--c) 42%,transparent),transparent 68%)}
.close .btn--primary{background:color-mix(in srgb,var(--c) 62%,#fff);color:var(--ink)}

/* contact page lines become coloured tiles */
.cline__ic{background:var(--cl,var(--c-sky));border-radius:11px}
.cline__ic svg{stroke:#fff}
.cline{align-items:center}

/* legal pages get a coloured rule so they are not bare text */
.legal h2{padding-top:1.4rem;border-top:2px solid color-mix(in srgb,var(--c) 35%,transparent)}
.legal h2:first-of-type{border-top:0;padding-top:0}