/* ==========================================================================
   INTEGRATIONS HUB — new pieces only.
   proof-section (incl. schema-panel) is the REAL home.css class, reused
   verbatim - dark flat navy with white text, nothing to override EXCEPT
   its very top edge (see the seam fix near .proof-columns-fix below):
   home.css's own radial glow there is tuned for landing on a WHITE section
   above it, where any dark value reads as a clean cut regardless of its
   own internal brightness - but on this page software-section hands off
   already-dark, so that glow's peak (brighter than software-section's own
   end colour) showed up as a visible pop right at the seam instead of a
   continuation.

   Everything else on this page now runs one continuous dark "space"
   gradient, hero through the closing CTA, on purpose: the galaxy/orbit
   motif is the whole point of this page, and the homepage's usual
   light/dark section rhythm (pale stats band, white-background FAQ) read
   as a jarring wash-out against it rather than a deliberate beat. Each
   section's background below hands off to the next by matching hex
   stops exactly, same discipline as before - just all dark now instead
   of alternating. faq-section keeps the REAL home.css class (and its
   white accordion cards are untouched - already opaque, never relied on
   the section background) but its outer background gradient and header
   text colour ARE overridden here (page-scoped via body.integrations-
   hub-page) specifically to stay dark instead of home.css's pale start.
   ========================================================================== */

/* ── hero: vortex concept. The .hero-section wrapper and its gradient
   are still the exact real recipe from home.css (unchanged, for the
   seam into steps-section below) - only the content layout inside it
   changes: a left text column + a right canvas vortex with Magi's mark
   at the core and the real integrations orbiting it on a tilted ellipse. ── */
/* Bootstrap's default .container gutter (~0.75rem) reads as stretched
   edge-to-edge next to the artifact's own 2rem side padding at a capped
   1280px width - adding both explicitly here rather than touching the
   shared .container class everywhere else on the page. */
/* base.css has `main .container{width,max-width,margin,padding}` - an
   element+class selector, which beats a plain .hero-split class rule on
   specificity regardless of load order. That's why centering never
   took: base.css's rule was winning every time. Scoped to
   .hero-section .hero-split (two classes) to actually out-specificity it. */
/* Named areas (not just column order) because hero-cta-row is a sibling
   of hero-left/hero-right, not nested inside hero-left - needed so phones
   can reorder the CTA to the very bottom, below the spiral, instead of it
   being stuck right under the subtitle (see the 560px tier below, and
   980px tier which restacks these same areas into one column but keeps
   the CTA last). */
.hero-section .hero-split{display:grid; grid-template-columns:.92fr 1.15fr; grid-template-rows:auto 1fr;
  grid-template-areas:"left right" "cta right";
  gap:1.5rem; align-items:center; position:relative; z-index:3;
  width:95%; max-width:1280px; margin-left:auto; margin-right:auto; padding-left:2rem; padding-right:2rem;}
/* position+z-index needed now that the homepage embed's canvas can bleed
   left into this column (see resize()/buildArms() in integrations-hero.
   js) - .vortex-canvas is z-index:1, .hero-right has no z-index of its
   own, so the canvas is promoted straight into .hero-split's own
   stacking context (that element carries z-index:3, from home.css's
   .hero-section .container rule) and competes there directly against
   siblings. Without this, the title/subtitle text (z-index:auto) would
   lose that comparison and the spiral would paint OVER it instead of
   staying safely behind it. Harmless on the hub page, which never bleeds
   horizontally at all. */
.hero-left{grid-area:left; position:relative; z-index:2;}
.hero-cta-row{grid-area:cta; align-self:start; position:relative; z-index:2;}
.hero-split .hero-left{max-width:480px; text-align:left;}
/* home.css clips both of these with a white-to-cyan gradient
   (-webkit-background-clip:text) - that's the teal tint on part of the
   headline/subtitle. Cancelled back to flat white here. */
.hero-split .hero-title{
  font-size:2.5rem; text-align:left; background:none; -webkit-background-clip:unset;
  -webkit-text-fill-color:#fff; background-clip:unset; color:#fff; filter:none;
}
.hero-split .hero-subtitle{
  font-size:1.05rem; text-align:left; margin:0 0 1.75rem; max-width:none; background:none; -webkit-background-clip:unset;
  -webkit-text-fill-color:rgba(255,255,255,.88); background-clip:unset; color:rgba(255,255,255,.88); filter:none;
}
/* Plain white text throughout the left column - no teal/mint accent
   text anywhere here (that's reserved for "proof"-style claims
   elsewhere on the page), just white at different opacities. */
.hero-split .eyebrow{
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:.4rem 1rem; border-radius:30px; margin-bottom:1.4rem;
  transition:background .25s ease, border-color .25s ease;
}
/* Own class, not a reuse of home.css's .hero-section .btn-primary (which
   also carries a ::after shimmer sweep this page never asked for) or
   Bootstrap's .btn-primary - fully self-contained, exact artifact recipe. */
.hero-split .hero-cta-btn{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:.5rem;
  padding:1rem 2.3rem; font-size:1.02rem; font-weight:700; border-radius:50px;
  background:linear-gradient(135deg,#1a5a8e,#2d7aaf,#5ba3d0); color:#fff; border:2px solid rgba(91,163,208,.45);
  text-decoration:none; box-shadow:0 5px 22px rgba(0,0,0,.38), 0 0 32px rgba(91,163,208,.3);
  transition:transform .2s ease;
}
.hero-split .hero-cta-btn:hover{transform:translateY(-2px); color:#fff; text-decoration:none;}

/* Appears below the subtitle only while a pill is hovered/focused - JS
   sets the gradient background per-software and toggles .is-visible in
   the same setHover() that already swaps the subtitle text, so the three
   reactions (subtitle, eyebrow, this link) always move together. */
/* display:flex (not inline-flex) + width:max-content: a block-level box
   sized to its content. inline-flex was the bug here - as an INLINE box
   it could share a text line with the next sibling (.hero-cta-btn, also
   inline-flex), so once this filled with real text on hover, the CTA
   button got pushed rightward onto the same row instead of staying on
   its own line below. Always present in the flow (never display:none),
   just invisible at rest, so the CTA's vertical position never shifts
   between hovered/idle - only this link's own width can change (nowrap
   below keeps that from becoming a height change too). */
.hero-view-link{
  display:flex; width:max-content; align-items:center; gap:.5rem; margin:0 0 1rem; padding:.55rem 1.15rem;
  border-radius:30px; font-size:.82rem; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
}
.hero-view-link.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.hero-view-link i{font-size:.7rem; transition:transform .2s ease;}
.hero-view-link:hover i{transform:translateX(2px);}
.hero-view-link:hover{color:#fff; text-decoration:none;}

.hero-right{position:relative; height:480px; grid-area:right;}

/* The real .hero-section::after ring spiral (home.css) is positioned
   with `top:23rem; left:50%` relative to the WHOLE section - calibrated
   for the old centered-logo hero, not this split layout. Turned off
   here rather than repositioned: tried rebuilding it as a centered
   layer and it read as redundant/conflicting against the canvas vortex,
   which already does this page's "spiral" on its own (matches the
   artifact this was built from - vortex only, no separate ring). */
body.integrations-hub-page .hero-section::after{ content:none; }

/* Stopped hand-tuning the gradient - back to the exact unmodified real
   recipe (same as the artifact), zero custom stops. Only padding
   changes here, unrelated to colour. */
body.integrations-hub-page .hero-section{
  padding:2.75rem 0 2rem;
}

/* ── Homepage embed: the same hero-split/orbit reused mid-page (not as the
   page's first section), so home.css's own default .hero-section padding
   (5rem 0 3rem, sized for clearing the navbar as the very first element)
   is kept as-is rather than copying the hub's tighter top-of-page override
   above. Only the ::after ring needs disabling here too - same reason as
   the hub: it's positioned/sized for the old centered-logo hero, not this
   split layout, and the vortex canvas already carries this page's own
   "spiral" on its own. Scoped to a dedicated class instead of the hub's
   body-class hook, since the homepage's body class must stay untouched
   (its own .proof-section/.faq-section must not pick up the hub's
   dark-page overrides from further down in this file). */
.integrations-embed-hero::after{ content:none; }

/* Seam fix: home.css's real .hero-section gradient starts at #071828 (0%)
   - darker than .calc-teaser's flat #0a2540 directly above this embed on
   the homepage, so the top edge read as a sudden darkening instead of a
   continuation. Same gradient otherwise, just the first stop swapped to
   match (the original 12% stop is already #0a2540, so 0%-12% simply
   becomes a flat colour instead of a visible step). The 100% stop
   (#0a2540) already matches steps-section's own start below, so no
   bottom-seam fix is needed there. */
.integrations-embed-hero{
  background:linear-gradient(to bottom,
    #0a2540  0%,
    #0a2540 12%,
    #0f3d5c 28%,
    #1a5a8e 45%,
    #408fc4 62%,
    #57a9d8 72%,
    #3da8c0 80%,
    #2d7aaf 87%,
    #1a5a8e 92%,
    #0f3d5c 96%,
    #0a2540 100%);
}

/* No vignette on .hero-right here - tried a radial fade to #0a2540 at the
   box edges (matching the hub's own hero.. CSS - commit a19b23b6) but that
   colour is only correct at the very top/bottom of this section's gradient;
   through the middle (the bright #57a9d8 band - see .integrations-embed-hero
   below) the box sits in, a flat-#0a2540 edge read as a hard-edged dark-
   rimmed card floating on top of the brighter page background - the exact
   "ugly rectangle" it was meant to avoid, just inverted. The hub page never
   had this problem because it never added the vignette in the first place:
   .hero-right's canvas is literally hard-clipped by its own box there too,
   but since nothing overlays it, the box's background IS the section's
   background (same element, no seam) - so leaving it unstyled is the fix,
   not adding a fade. */

.vortex-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;}

/* Lets the spiral bleed into the calc-teaser/steps-section seams above
   and below instead of hard-clipping at this section's own edges - home.
   css's real .hero-section{overflow:hidden} (needed for ITS OWN
   decorative layers on the real homepage top hero, untouched here) would
   otherwise clip the taller canvas (see integrations-hero.js resize())
   at this section's own box.

   z-index:1 here, bumped from an earlier z-index:0 attempt that worked
   for the TOP bleed (into calc-teaser) but not the bottom one (into
   steps-section) - both .calc-teaser::before and .steps-section::before
   (their scan-line overlays, full coverage) carry z-index:0 too, a TRUE
   TIE against this section's old z-index:0. Ties resolve by DOM order,
   and that direction flips depending on which side the neighbour is on:
   calc-teaser comes BEFORE this section (so this section, being later,
   won that tie) but steps-section comes AFTER it (so steps-section's own
   scan-lines won instead, sitting on top of the bleed and hiding it) -
   exactly the asymmetry seen live. z-index:1 clears both scan-line
   layers outright, no tie-break involved either direction. home.css's
   .calc-teaser-inner / .steps-section .container (the REAL content:
   register card, copy text, stripe carousel) are bumped to z-index:2 to
   match, so they still safely out-rank this section and stay fully
   legible - see those two rules in home.css for the other half of this
   fix. */
.integrations-embed-hero{overflow:visible; z-index:1;}

/* Power-up beam: the charge line from the hovered/focused pill into the
   core (see startPowerUp() in integrations-hero.js) - sits above the
   canvas but below the pills/core (z-index 4 < core's 50) so it visually
   reads as "feeding into" the core rather than drawing over it; the part
   of the line under the core's own circle is simply hidden behind it. */
.beams{position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible;}

/* Replaced the old thin always-dashed connector: it was a single 1.6px
   stroke at the same brightness as the busy spiral behind it, so it
   genuinely got lost - barely visible against ~60 arm strokes. The new
   version "charges" a brighter line into the core on hover, then the core
   answers with a soft pulsing aura in the same colour, instead of trying
   to compete with the spiral for attention the whole time it's drawn.
   Glow is a two-pass stroke (wide+faint, then narrow+bright) - same
   technique the vortex canvas arms already use, chosen specifically
   because an earlier revision of this page's hero lagged from a
   real-time ctx.filter blur pass; stroke-width + opacity layering gets
   the same "glow" look with zero blur filter anywhere. Geometry
   (endpoints) is set ONCE per hover-start, not per frame - pills already
   pause their orbit angle while hovered (see orbitStep()), so there is
   nothing to re-measure after that single reset. */
.beam-charge-line, .beam-charge-glow{fill:none; stroke-linecap:round; opacity:0; transition:opacity .22s ease;}
.beam-charge-glow{stroke-width:9px;}
.beam-charge-line{stroke-width:2.4px;}
.beam-charge-line.is-charging, .beam-charge-glow.is-charging{
  transition:opacity .22s ease, stroke-dashoffset .38s cubic-bezier(.22,.7,.3,1);
}

/* Core tint: a glowing rim fused right to the white circle's own edge
   once the beam lands, instead of glowing in the space around it (tried
   first, washed out - the core sits in the busiest, brightest part of
   the canvas, and a translucent halo competed with that for attention
   and lost) or flooding the whole disc (tried second - buried the Magi
   mark under solid colour, unreadable). This version is transparent
   through the centre (where the mark sits, well inside the 0-50% radius
   stop below) and only opaque from ~65-85% outward, right where the
   core's own rim actually is for a box TINT_SCALE times its width - so
   it reads as the white circle's EDGE lighting up, logo untouched, and
   it's still opaque/bold enough (unlike the first attempt) to win
   against the spiral regardless of what's happening behind it.
   Colour is set once per hover-start via the --tint-rgb custom property
   (see startPowerUp() in integrations-hero.js) rather than rewriting the
   whole gradient string from JS - `rgba(var(--tint-rgb), alpha)` lets the
   alpha stops stay here, in CSS, as the single place to retune them. */
.core-tint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
  border-radius:50%; z-index:51; pointer-events:none; opacity:0;
  background:radial-gradient(circle,
    rgba(var(--tint-rgb,45,122,175),0) 0%, rgba(var(--tint-rgb,45,122,175),0) 50%,
    rgba(var(--tint-rgb,45,122,175),.5) 65%, rgba(var(--tint-rgb,45,122,175),1) 85%,
    rgba(var(--tint-rgb,45,122,175),.55) 94%, rgba(var(--tint-rgb,45,122,175),0) 100%);
  transition:opacity .3s ease;
}
.core-tint.is-active{opacity:1; animation:coreTintPulse 1.8s ease-in-out infinite;}
@keyframes coreTintPulse{
  0%,100%{transform:translate(-50%,-50%) scale(.98); opacity:.85;}
  50%{transform:translate(-50%,-50%) scale(1.05); opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .beam-charge-line.is-charging, .beam-charge-glow.is-charging{transition:opacity .22s ease;}
  .core-tint.is-active{animation:none; opacity:.9;}
}

.core{
  /* Back to the original solid white circle - the glow variants (both
     the big filled sphere and the steep-falloff small one) read worse
     than this once compared side by side. Only kept change: the last
     gradient stop ends on the same hue at alpha 0 instead of the
     `transparent` keyword (= transparent black), which is what was
     producing a thin dark ring right at the edge - that part was a
     real bug independent of circle-vs-glow. */
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50;
  width:128px; height:128px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.99) 0%, rgba(235,247,255,.97) 55%, rgba(200,235,250,.85) 80%, rgba(200,235,250,0) 100%);
  box-shadow:0 0 50px 18px rgba(255,255,255,.4), 0 0 100px 40px rgba(93,188,210,.35), 0 0 160px 70px rgba(45,122,175,.22);
  display:flex; align-items:center; justify-content:center;
  animation:coreBreathe 5s ease-in-out infinite;
}
@keyframes coreBreathe{
  0%,100%{box-shadow:0 0 50px 18px rgba(255,255,255,.4), 0 0 100px 40px rgba(93,188,210,.35), 0 0 160px 70px rgba(45,122,175,.22);}
  50%{box-shadow:0 0 62px 22px rgba(255,255,255,.5), 0 0 118px 46px rgba(93,188,210,.42), 0 0 180px 78px rgba(45,122,175,.28);}
}
.core-logo{width:84px; height:auto; display:block;}

.orbit-stage{position:absolute; inset:0; z-index:10;}
.pill{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.55rem; padding:.4rem .85rem .4rem .4rem; border-radius:30px;
  background:rgba(10,37,64,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap; will-change:transform, opacity;
  cursor:pointer; transition:box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/* Hover/focus: JS pauses this pill's orbit angle and drives an expanded
   scale directly (see integrations-hero.js) - this class only adds the
   visual highlight, not the motion/size, since that's animated per-frame. */
.pill.is-hovered{
  background:rgba(10,37,64,.85); border-color:rgba(255,255,255,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.3);
}
/* Pinned (clicked) pill: a quieter, permanent version of the hover ring -
   the eyebrow keeps that software's name/colour after the mouse leaves
   (see togglePin() in integrations-hero.js), so the pill itself needs its
   own quiet "this is the one" marker, not just the eyebrow text alone. */
.pill.is-pinned:not(.is-hovered){box-shadow:0 0 0 1.5px rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.35);}
.pill:focus-visible{outline:2px solid #6ee7b7; outline-offset:3px;}
/* Brief pulse when the galaxy anchor (bottom of page) scrolls back to a
   pinned pill - "welcome back to where you were", not just a jump-cut. */
.pill.is-welcome-back{animation:pillWelcomeBack 1.3s ease-out;}
@keyframes pillWelcomeBack{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.65);}
  60%{box-shadow:0 0 0 16px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
/* Icon badge (was a plain colour dot) - the real FA icon for each
   software, same icon key the software grid cards use below, in a
   circular brand-gradient badge. `position:relative` so the pulse ring
   (::after) can anchor to it. */
.pill-icon{
  position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 0 10px rgba(0,0,0,.3);
}
.pill-icon i{font-size:.62rem; color:#fff;}
/* Pulse ring: a quick sonar-style ping on hover/focus, says "this
   responds to you" before the cursor change even registers. */
.pill.is-hovered .pill-icon::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55); animation:pillPulse 1.1s ease-out infinite;
}
@keyframes pillPulse{0%{transform:scale(.85); opacity:.9;} 100%{transform:scale(1.7); opacity:0;}}
.pill-name{font-size:.82rem; font-weight:700; color:#fff;}
/* Arrow reveal: same open/explore cue as .sw-cta i below - collapsed to
   zero width at rest, slides in on hover/focus. */
.pill-arrow{display:inline-flex; width:0; overflow:hidden; opacity:0; color:#fff; flex-shrink:0; transition:width .2s ease, opacity .2s ease;}
.pill-arrow i{font-size:.6rem;}
.pill.is-hovered .pill-arrow{width:11px; opacity:.85;}
/* One shared brand-colour table for every representation of a software
   across the page (hero pill, strip chip, mini-orbit orb) - was defined
   three times over (once per representation); consolidated so there's a
   single place to update if a brand colour ever changes. */
.pill[data-software="alma"], .sw-chip[data-software="alma"], .mini-orb[data-software="alma"]{--c1:#2d7aaf;--c2:#1e5a85;}
.pill[data-software="microinvest"], .sw-chip[data-software="microinvest"], .mini-orb[data-software="microinvest"]{--c1:#10b981;--c2:#059669;}
.pill[data-software="bulmar"], .sw-chip[data-software="bulmar"], .mini-orb[data-software="bulmar"]{--c1:#0f766e;--c2:#115e59;}
.pill[data-software="mesonic"], .sw-chip[data-software="mesonic"], .mini-orb[data-software="mesonic"]{--c1:#dc2626;--c2:#b91c1c;}
.pill[data-software="business_navigator"], .sw-chip[data-software="business_navigator"], .mini-orb[data-software="business_navigator"]{--c1:#4f46e5;--c2:#4338ca;}
.pill[data-software="kast"], .sw-chip[data-software="kast"], .mini-orb[data-software="kast"]{--c1:#65a30d;--c2:#4d7c0f;}
.pill[data-software="click"], .sw-chip[data-software="click"], .mini-orb[data-software="click"]{--c1:#c026d3;--c2:#a21caf;}
.pill[data-software="gensoft"], .sw-chip[data-software="gensoft"], .mini-orb[data-software="gensoft"]{--c1:#0891b2;--c2:#0e7490;}

.hero-right-label{position:absolute; bottom:.5rem; left:50%; transform:translateX(-50%); z-index:3;
  font-size:.74rem; color:rgba(255,255,255,.5); text-align:center; white-space:nowrap;}

/* "Click to explore" callout - appended/positioned by JS next to the
   Business Navigator pill a little after every page load (see
   integrations-hero.js), not gated to first-visit only. */
.teach-hint{
  /* z-index 300: above every pill (hovered pills reach 200, see
     orbitStep() in integrations-hero.js) and the orbit-stage itself
     (10) - was 9, UNDER both, which combined with too small a vertical
     offset meant the hint's bottom edge rendered behind the pill it was
     supposed to sit above. */
  position:absolute; z-index:300; display:flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:20px;
  background:#fff; color:#0a2540; font-size:.76rem; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease; box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.teach-hint.is-visible{opacity:1; transform:translateY(0);}
.teach-hint::after{content:''; position:absolute; bottom:-5px; left:20px; width:9px; height:9px; background:inherit; transform:rotate(45deg);}

@media (prefers-reduced-motion: reduce){
  .core{animation:none;}
  .pill.is-hovered .pill-icon::after{animation:none; display:none;}
  .pill.is-welcome-back{animation:none;}
}

/* ── mini-orbit: fixed bottom-right, fades in once the software strip has
   scrolled out of view above (see the zone state machine in
   integrations-hero.js). Pushed in from the very edge, and wider than a
   single button, to leave room for the orbiting badges around it without
   clipping off the viewport. Centre is the ORIGINAL spiral-vortex anchor
   (restored verbatim - an earlier revision replaced it with a plain dark
   circle and lost the effect): same hand-rolled canvas spiral-arm
   technique as the hero, far fewer arms, no star dust. The 8
   integrations orbit it as plain colour-dot icons - no name labels, by
   request, this corner stays quiet; the full icon+name badge only
   appears transiently while something is actually flying in or out (see
   .flight-pill below). The whole cluster is one button: clicking
   anywhere scrolls back to the hero. ── */
.mini-orbit{
  position:fixed; right:2.25rem; bottom:1.25rem; z-index:60;
  width:220px; height:150px; padding:0; border:none; background:none; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
/* Opacity-only entrance on purpose, not the usual fade+rise transform:
   the strip -> corner flight needs to measure exactly where the orbs
   will land the instant this widget becomes visible (see flyBetween()
   in integrations-hero.js). A transform transition still mid-flight at
   that exact moment meant getBoundingClientRect() captured the orbs'
   pre-settle position, so the flight pills landed off by however much
   of the slide-up hadn't finished yet - a real bug, not cosmetic.
   Opacity never affects layout geometry, so this can't reintroduce it. */
.mini-orbit.is-visible{opacity:1; pointer-events:auto;}
.mini-orbit:focus-visible{outline:2px solid #6ee7b7; outline-offset:6px; border-radius:50%;}
.mini-orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:76px; height:76px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle, rgba(10,37,64,.92) 0%, rgba(10,37,64,.78) 70%, rgba(10,37,64,.55) 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .25s ease;
}
.mini-orbit:hover .mini-orbit-core{box-shadow:0 14px 38px rgba(0,0,0,.5), 0 0 24px rgba(93,188,210,.35);}
.mini-orbit-canvas{position:absolute; inset:0; width:100%; height:100%;}
.mini-orbit-core-logo{position:relative; width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(255,255,255,.5)); pointer-events:none;}
.mini-orbit-stage{position:absolute; inset:0;}
.mini-orb{
  position:absolute; top:50%; left:50%; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 10px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; will-change:transform, opacity;
  transition:box-shadow .2s ease;
}
.mini-orb:hover{box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 0 14px rgba(0,0,0,.5);}
.mini-orb i{font-size:.62rem; color:#fff;}
/* Hover-to-reveal name - mouse-only by design (these are aria-hidden
   presentational dots inside the one real interactive control, the
   .mini-orbit button itself) rather than a second click target: the
   whole widget already has one clear action (scroll to the hero), and
   per-orb links would both fight that and point at detail pages that
   don't exist yet. ── */
.mini-orb-label{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px;
  font-size:.66rem; font-weight:700; color:#fff; white-space:nowrap;
  background:rgba(10,37,64,.92); border:1px solid rgba(255,255,255,.25); padding:.25rem .6rem; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:20;
}
.mini-orb:hover .mini-orb-label{opacity:1;}

@media (max-width:640px){
  /* bottom:calc(68px + .75rem) instead of the desktop .75rem: below 991px
     navbar.css pins a guest-CTA bar (.mob-guest-cta-bar, z-index:1040,
     well above this widget's 60) across the full bottom of the viewport -
     the same 68px navbar.css already compensates for elsewhere via
     body.has-mobile-bottom-nav's padding-bottom. Left at .75rem here it
     sat mostly behind that bar instead of floating above it. right
     tightened too (1.5rem -> 1rem) to sit closer to the true corner now
     that it's riding higher. */
  .mini-orbit{width:160px; height:110px; right:1rem; bottom:calc(68px + .75rem);}
  .mini-orbit-core{width:56px; height:56px;}
  .mini-orbit-core-logo{width:20px; height:20px;}
  .mini-orb{width:17px; height:17px;}
  .mini-orb i{font-size:.5rem;}
}

@media (prefers-reduced-motion: reduce){
  .mini-orbit{transition:opacity .2s ease;}
}

/* ── flight pill: a transient proxy used by the hero-orbit <-> strip <->
   mini-orbit choreography in integrations-hero.js. Positioned document-
   relative (absolute, not fixed) so it rides along with the page if the
   user keeps scrolling mid-flight instead of landing wherever the
   viewport happened to be when the flight started. Renders at a single
   fixed reference size and reaches both of its endpoints purely via
   `transform:scale()` from its own centre - cheap, and the same
   technique the hero pills already use for their own depth scaling.
   Carries the full icon+name badge; the name's opacity is animated
   separately (0 at whichever end is the icon-only corner orb). One gets
   created per software item per crossing, then removed. ── */
.flight-pill{
  /* fixed, not absolute: positioned purely via `transform` every frame
     (see launchFlightPill() in integrations-hero.js) - avoids the
     layout-reflow cost of rewriting left/top on up to 8 of these at once. */
  position:fixed; z-index:70; display:flex; align-items:center; gap:.5rem;
  padding:0 .9rem 0 .3rem; border-radius:999px; pointer-events:none; white-space:nowrap; overflow:hidden;
  background:rgba(10,37,64,.78); border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 20px rgba(0,0,0,.4);
  transform-origin:center center; will-change:transform;
}
.flight-pill-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 8px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem;
}
.flight-pill-name{color:#fff; font-weight:700; font-size:.82rem;}

@media (max-width:980px){
  /* .hero-section .hero-split (line 41, two classes) outranks a plain
     .hero-split override on specificity regardless of media query, so this
     has to match that same two-class shape to actually win - a bare
     .hero-split here silently never applied and the grid stayed stuck at
     .92fr/1.15fr on every phone/tablet width, squeezing hero-right into a
     sliver and spilling its pills over the text column. */
  .hero-section .hero-split{grid-template-columns:1fr; grid-template-rows:auto auto auto;
    grid-template-areas:"left" "right" "cta"; gap:1rem; text-align:center;}
  .hero-cta-row{display:flex; justify-content:center; margin-top:.5rem;}
  .hero-split .hero-left{max-width:none; margin:0 auto;}
  .hero-split .hero-title, .hero-split .hero-subtitle{text-align:center;}
  .hero-split .trust-row{justify-content:center;}
  .hero-view-link{margin-left:auto; margin-right:auto;}
  .hero-right{height:460px;}
  .core{width:100px; height:100px;}
  .core-logo{width:56px;}
  .pill{padding:.35rem .7rem .35rem .35rem;}
  .pill-icon{width:20px; height:20px;}
  .pill-name{font-size:.72rem;}
}

/* ── Phones: hero-right stacked full-width is still only ~280-300px wide
   (see the 980px tier above) - too narrow for 8 orbiting PILLS with real
   software names ("Gensoft склад + Microinvest", "Бизнес Навигатор") to
   read as anything but a cramped, overlapping cluster. The text label was
   always the problem, not the orbit itself - so rather than drop the
   orbit (tried that - flat full-bleed canvas alone read as a decorative
   banner strip, not the dominant "wow" moment the spiral deserves),
   pills shrink down to icon-only orbs here: a fixed ~38px circle
   regardless of which software it is, so it can never overflow at any
   width the same way a text label does. Tap-to-navigate and the orbit
   motion itself are both untouched (still the real .pill element,
   still driven by the exact same orbitStep() in integrations-hero.js -
   only the CSS shrinks it, nothing JS-side needed to know names are
   hidden). No flat chip list under the orbit on either page any more -
   the homepage used to have one (removed per request, same reasoning the
   hub page's version was already dropped for: it's duplicate weight
   under an already-tall visual, and the existing "see the full
   integrations page" CTA already covers "I want the full named list").
   CTA closes out the section last (see the "cta" row in
   grid-template-areas here). ── */
@media (max-width:560px){
  /* Full-bleed width (same trick as before) + a real standalone height
     now instead of a short 280px band - hero-right is the dominant
     visual of the section on phones, same spirit as the desktop/tablet
     split layout where the canvas is the half that carries the page. */
  .hero-right{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    height:460px;
  }
  .orbit-stage .pill{
    width:38px; height:38px; padding:0; gap:0; justify-content:center; border-radius:50%;
    /* backdrop-filter is one of the most expensive properties on mobile
       compositors - re-sampling a blurred backdrop for 8 elements, every
       frame, as they all move and the canvas behind them keeps rotating,
       is real lag on mid-range phones. At 38px with no text behind it to
       protect legibility, the blur was barely perceptible anyway - a
       solid dark-glass background alone (already there) reads the same. */
    backdrop-filter:none;
  }
  .orbit-stage .pill-name, .orbit-stage .pill-arrow{display:none;}
  .orbit-stage .pill-icon{width:22px; height:22px;}
  .hero-view-link{display:none;}
}

/* ── proof-section seam fix. home.css's real .proof-section background is
   `radial-gradient(ellipse 1100px 550px at 50% -10%, #123049 0%, #0a1929
   60%), #0a1929` - the ellipse centre sits just ABOVE the section (-10%),
   so the section's own top edge is already partway into the glow's bloom,
   not at its dim 60%-stop base colour. Measured on this page: software-
   section's bottom edge is #0a1929 (10,25,41), but one pixel into
   proof-section the true rendered colour jumps to ~(16,42,64) - a sudden
   brightening instead of a continuation, since home.css's version of this
   seam only ever had to look clean against the WHITE section above it on
   the real homepage, where that internal brightness was irrelevant. Fixed
   by layering a short solid-to-transparent wash of the exact same end
   colour OVER the existing background, strongest (fully opaque, so the
   first pixel matches software-section's #0a1929 exactly) right at the
   seam and fully gone by 180px down - the glow is still there, just
   revealed gradually instead of appearing all at once. ── */
body.integrations-hub-page .proof-section{
  background:
    linear-gradient(to bottom, #0a1929 0%, rgba(10,25,41,0) 180px),
    radial-gradient(ellipse 1100px 550px at 50% -10%, #123049 0%, #0a1929 60%),
    #0a1929;
}

/* ── proof section column fix. home.css's real .proof-content-col /
   .proof-resources-col carry `order: 2` / `order: 1`, calibrated for the
   REAL homepage's narrow-left/wide-right layout. Reusing those exact
   class names here silently inherited that order and put the narrow
   documentation column on the left/wide and the software panel on the
   right/narrow - the opposite of what this page needs, and the reason
   the category row looked cramped with empty space beside it. New class
   names below avoid inheriting that `order` entirely. ── */
.proof-columns-fix{display:grid; grid-template-columns:1.4fr minmax(300px,360px); gap:3rem; align-items:start; text-align:left;}
.proof-software-col{padding-right:.5rem;}
.proof-docs-col{display:flex; flex-direction:column; gap:1rem;}
@media (max-width:900px){ .proof-columns-fix{grid-template-columns:1fr;} .proof-software-col{padding-right:0;} }

/* ── software strip section — sits right after the hero and carries the
   old stats-bridge section's job too (see template comment). Gradient
   now stays dark the whole way down - starts on the hero's own real
   #0a2540 end-stop, ends exactly on proof-section's real flat base
   (#0a1929) below, so that seam is a continuous match instead of a
   hard cut. (It briefly faded all the way to a pale near-white here -
   reverted on purpose, see task history - the whole page now reads as
   one continuous dark "space" passage instead of alternating light/dark
   bands, which fits the galaxy/orbit motif far better.) Chips/footnote
   keep their opaque dark-glass background (same rgba(10,37,64,.55)
   recipe the hero orbit's pills use) regardless - it was built to stay
   legible anywhere in a gradient, and reads just as well here as a
   quiet "glass pill on dark glass" look, consistent with the hero.

   Deliberately lean on the card-grid front too: this used to be a 4-col
   grid (image-block header, badge+date meta row, title, excerpt,
   "read more" link - a blog-card pattern wearing software names). That
   duplicated the hero orbit's "pick your software" job with a second,
   heavier mechanism. Now it's one row of flat chips - still real
   crawlable text/links, just a footnote to the orbit. ── */
.software-section{
  background:linear-gradient(to bottom,#0a2540 0%,#0f3d5c 24%,#123049 55%,#0f2740 80%,#0a1929 100%);
  padding:5rem 0 4.5rem; position:relative; overflow:hidden;
}
.software-section::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(255,255,255,.018) 4px,rgba(255,255,255,.018) 5px);}
.software-section .container{position:relative; z-index:1;}
.software-header{text-align:left; margin-bottom:1.75rem; padding-left:.5rem;}
.software-meta{font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.45); margin-bottom:.5rem;}
.software-title{font-size:1.6rem; font-weight:800; color:#fff; display:inline-block; position:relative; margin-bottom:0; text-shadow:0 2px 4px rgba(0,0,0,.35);}
.software-title::after{content:''; position:absolute; bottom:-7px; left:0; width:40px; height:3px; background:rgba(255,255,255,.5); border-radius:2px;}
/* The old stats-bridge's "41+ reports" number, folded in here instead of
   a separate section - sits right under the title, still in the dark
   top band of the gradient, so no readability fix is needed for it. */
.software-stat{margin:.9rem 0 0; font-size:.95rem; color:rgba(255,255,255,.78); font-weight:500;}
.software-stat-num{font-size:1.3rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-right:.3rem;}
.software-stat-num .u{font-size:.85rem; font-weight:700;}

.sw-strip{display:flex; flex-wrap:wrap; gap:.75rem;}
.sw-chip{display:inline-flex; align-items:center; gap:.6rem; padding:.55rem 1.1rem .55rem .55rem; border-radius:30px;
  background:rgba(10,37,64,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  text-decoration:none; color:rgba(255,255,255,.92); font-size:.85rem; font-weight:700;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;}
.sw-chip:hover{transform:translateY(-2px); background:rgba(10,37,64,.85); border-color:rgba(255,255,255,.4); color:#fff; text-decoration:none;}
.sw-chip-icon{display:flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 10px rgba(0,0,0,.25);}
.sw-chip-icon i{font-size:.82rem; color:#fff;}
.sw-chip--other{border-style:dashed;}
.sw-chip--other .sw-chip-icon{background:rgba(255,255,255,.14);}
.sw-chip--other .sw-chip-icon i{color:#7fd4ff;}
.software-footnote{display:inline-flex; width:max-content; align-items:center; gap:.4rem; margin-top:1.75rem;
  padding:.6rem 1.1rem; border-radius:30px; background:rgba(10,37,64,.5); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75); font-size:.85rem;}
.software-footnote a{color:#9fe9c9; font-weight:700; text-decoration:underline;}
/* width:max-content above sizes the pill to its full single-line content
   width - fine at desktop widths, but "Не виждате вашия?" + the full
   "Пишете ни - отговаряме..." sentence together need more width than a
   phone has, so the pill either overflowed past the viewport edge or
   forced the whole page to scroll horizontally. Stacked as two centered
   lines instead of fighting for one. */
@media (max-width:560px){
  .software-footnote{
    display:flex; flex-direction:column; width:auto; max-width:100%;
    text-align:center; gap:.3rem;
  }
}

/* ── FAQ — real home.css .faq-section class kept (so home.js's accordion
   JS and the .faq-item card markup are untouched), but its OWN outer
   background is overridden here: home.css's real recipe starts pale
   (#a8d4ed, near-white) since the homepage cuts hard from a white
   section above it. On this page proof-section (dark, unchanged) comes
   before it, so that pale start read as a jarring bright flash rather
   than a deliberate beat. Overridden to continue the same dark passage
   instead, picking up exactly where proof-section's real flat base
   (#0a1929) leaves off and handing off to whycard-merged's own start
   below. The .faq-item cards themselves need NO change - they're
   already opaque white glass (rgba(255,255,255,.94)) that never relied
   on the section background, so they still pop the same way, now
   against dark instead of pale (arguably reads better: white "document"
   cards floating in the same dark space as the rest of the page). Only
   the section header text, originally dark navy for contrast against a
   light background, needs flipping to white. ── */
body.integrations-hub-page .faq-section{
  background:linear-gradient(to bottom,#0a1929 0%,#102a44 30%,#123049 60%,#0f3d5c 85%,#1a5a8e 100%);
}
body.integrations-hub-page .faq-section .section-title{color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35);}
body.integrations-hub-page .faq-section .section-title::after{background:rgba(255,255,255,.5);}
body.integrations-hub-page .faq-section .section-subtitle{color:rgba(255,255,255,.72); text-shadow:none;}

/* ── "why Magi" card + closing CTA, merged into ONE section — same move
   the real home.css makes with social-proof-section/cta-section ("merging
   them means the ring pattern is drawn ONCE, so there's no seam left to
   misalign"). One shared background carries both, ending #071828 (matches
   the real closing CTA's last stop). FAQ above is now also page-scoped
   dark (see the override up near .software-footnote) and ends on #1a5a8e
   - this section opens directly on that same stop, so the two still hand
   off exactly, then fades into the same #0a2540 flat base the rest of
   this gradient always used. Two soft glow ellipses - one behind the
   why-card panel so the glow visibly overflows into it, one behind the
   CTA logo so it sits centered in its own ring, same as the homepage's
   logo-in-glow treatment. The why-card panel keeps its own semi-opaque
   fill/border so it stays readable through the glow. ── */
.whycard-merged{
  position:relative; overflow:hidden; padding:4.5rem 0 6rem;
  background:
    radial-gradient(ellipse 1000px 520px at 50% 28%, rgba(93,188,210,.17) 0%, transparent 70%),
    radial-gradient(ellipse 760px 480px at 50% 84%, rgba(93,188,210,.24) 0%, transparent 72%),
    linear-gradient(to bottom, #1a5a8e 0%, #0f3d5c 10%, #0a2540 20%, #0a2540 42%, #0f3d5c 64%, #1a5a8e 74%, #0f3d5c 84%, #0a2540 92%, #071828 100%);
}
.whycard-merged::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(255,255,255,.025) 4px,rgba(255,255,255,.025) 5px);}
.whycard-merged .container{position:relative; z-index:1;}
.whycard-merged .cta-section{margin-top:3.5rem;}
.whycard{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:rgba(255,255,255,.03);
  border:1px solid rgba(91,163,208,.22); border-radius:20px; padding:48px;}
.whycard-eyebrow{display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:.68rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#6ee7b7;}
.whycard-logo{width:22px; height:22px; filter:drop-shadow(0 0 5px rgba(110,231,183,.45));}
.whycard-title{font-size:1.75rem; font-weight:800; color:#fff; line-height:1.25; margin:0 0 14px; letter-spacing:-.01em;}
.whycard-body{font-size:.92rem; color:rgba(255,255,255,.68); line-height:1.65; margin:0 0 20px;}
.whycard-actions{display:flex; flex-wrap:wrap; gap:10px;}
.whycard-btn{display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:22px; font-size:.82rem; font-weight:700; text-decoration:none; transition:all .2s ease; white-space:nowrap;}
.whycard-btn--primary{background:linear-gradient(135deg,#2d7aaf,#1a5a8e); color:#fff; border:none; box-shadow:0 3px 12px rgba(45,122,175,.35);}
.whycard-btn--primary:hover{background:linear-gradient(135deg,#408fc4,#2d7aaf); color:#fff; transform:translateY(-1px); box-shadow:0 5px 18px rgba(45,122,175,.45); text-decoration:none;}
.whycard-btn--secondary{background:rgba(110,231,183,.1); color:#6ee7b7; border:1px solid rgba(110,231,183,.35);}
.whycard-btn--secondary:hover{background:rgba(110,231,183,.18); border-color:rgba(110,231,183,.6); color:#9fe9c9; transform:translateY(-1px); text-decoration:none;}
.whycard-feats{display:flex; flex-direction:column; gap:18px;}
.whycard-feat{display:flex; align-items:flex-start; gap:14px;}
.whycard-feat > i{font-size:1rem; color:#5ba3d0; margin-top:2px; flex-shrink:0; width:18px; text-align:center;}
.whycard-feat > div{display:flex; flex-direction:column; gap:2px;}
.whycard-feat strong{font-size:.85rem; font-weight:700; color:rgba(255,255,255,.9); line-height:1.3;}
.whycard-feat span{font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.4;}

@media (max-width:860px){
  .whycard{grid-template-columns:1fr; gap:28px; padding:28px 24px;}
  .whycard-title{font-size:1.4rem;}
}