/* =========================================================
   BOM — design tokens (from Figma variable definitions)
   ========================================================= */
:root{
  --tamarind:#260F14;        /* color/red/10        */
  --tamarind-60:rgba(38,15,20,.6);
  --white:#FFFFFF;
  --mercury:#E5E5E5;         /* color/grey/90       */
  --killarney:#326D44;       /* color/spring-green/31 */
  --killarney-10:rgba(50,109,68,.1);
  --killarney-05:rgba(50,109,68,.05);
  --killarney-03:rgba(50,109,68,.03);
  --zambezi:#65585B;         /* color/grey/37       */
  --pampas:#F7F5F3;          /* color/grey/96       */
  --big-stone:#141B34;
  --gray-chateau:#A1AAB5;

  /* Layout scale. The design is drawn on a 1432px frame with 40px
     gutters; below that everything is driven off these so the whole
     page tightens together instead of being clipped. */
  --gut:40px;                 /* page gutter                          */
  --sec-pad:100px;            /* section top/bottom rhythm            */
  --h1:73px;  --h1-lh:78px;
  --h2:44.1px; --h2-lh:52.8px;
  --h3:29.4px; --h3-lh:35.2px;
  --body:18px; --body-lh:27px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* swipix easings */
  --out-quart:cubic-bezier(.165,.84,.44,1);
  --out-circ:cubic-bezier(.075,.82,.165,1);
  --hero-ease:cubic-bezier(.22,1,.36,1);      /* settles in */
  --hero-ease-out:cubic-bezier(.55,0,.85,.6); /* falls away */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:24px;
  color:var(--tamarind);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.page{width:100%;max-width:1432px;margin:0 auto;overflow-x:clip}
/* clip, not hidden: `overflow:hidden` would make .page a scroll
   container and stop the tab bar's position:sticky from working. */
.stack{display:flex;flex-direction:column;gap:53px}

/* ---------- shared type ---------- */
.h2{
  font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-1.44px;
  font-weight:500;color:var(--tamarind);
}
.h2--center{text-align:center}
.h3{
  font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:-.96px;
  font-weight:500;color:var(--tamarind);
}
.logo{font-weight:800;font-size:20px;line-height:24px;color:var(--tamarind)}

/* =========================================================
   Button — swipix `.button-primary` + `.button-hover-bg`
   hover: bg slides up from 100% -> 0 (700ms outCirc)
   leave: bg slides up from 0 -> -100%
   ========================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;background:var(--killarney);color:var(--white);
  font-size:15px;font-weight:500;line-height:24px;overflow:hidden;
  isolation:isolate;
}
.btn span{position:relative;z-index:1}
.btn__bg{
  position:absolute;left:0;right:0;bottom:0;height:100%;
  background:var(--tamarind);
  transform:translateY(100%);
  transition:transform .7s var(--out-circ);
  z-index:0;
}
.btn:hover .btn__bg{transform:translateY(0)}
.btn.is-leaving .btn__bg{transform:translateY(-100%)}
.btn--on-green .btn__bg{background:var(--tamarind)}

/* =========================================================
   Navbar  (Figma 1:5250 — h91, px40 py20, border l/r/b)
   ========================================================= */
.navbar{
  padding:20px 40px;
  border-left:1px solid var(--mercury);
  border-right:1px solid var(--mercury);
  border-bottom:1px solid var(--mercury);
  background:var(--white);
}
.navbar__inner{display:flex;align-items:center;justify-content:space-between}
.nav{display:flex;align-items:center;gap:24px}
.nav a{
  position:relative;font-size:16px;font-weight:500;line-height:24px;color:var(--tamarind);
  transition:color .3s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--killarney);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--out-quart);
}
.nav a:hover{color:var(--killarney)}
.nav a:hover::after{transform:scaleX(1)}
.navbar__cta{display:flex;justify-content:flex-end}

/* =========================================================
   Hero (1:2617 h761 / 1:2618 1352x760 bg Pampas)
   ========================================================= */
.hero{padding:0 var(--gut);border-top:1px solid var(--mercury)}
.hero__box{
  position:relative;height:760px;overflow:hidden;background:var(--pampas);
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
}
.hero__visual{position:absolute;left:10px;top:0;right:0;bottom:3px;overflow:hidden}

/* --- Hero: isometric build-in -----------------------------------------
   Choreographed off swipix's hero Lottie ("hero fixed.json", 60fps,
   frames 144-443 = 4.98s). Its own keyframes give the beats:

     slab in / card down   t=126-230  ->  0 - 1.43s
     settled hold          t=230-388  ->  1.43 - 4.07s   (10px bob)
     drop out              t=388-453  ->  4.07 - 4.98s   (loop cuts it)

   So the box rises into frame first, the dashboard descends onto it,
   they hold, then both slide straight down and it repeats. The
   dashboard carries a drop shadow that is wide and soft while it is
   still travelling and tightens as it lands, then opens back up on
   the way down. */
.hero__scene{position:absolute;inset:0}
.hero__layer{
  position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:left top;
  will-change:transform,opacity,filter;backface-visibility:hidden;
}
.hero__layer--slab{
  transform-origin:78% 100%;
  animation:hero-slab 4.98s var(--hero-ease) infinite both;
}
.hero__layer--dash{
  animation:hero-dash 4.98s var(--hero-ease) infinite both;
}
/* Cast shadow. Kept as its own silhouette layer rather than a
   drop-shadow on the dashboard: that layer is cut off by the frame on
   its bottom and right, and a filter would trace those cuts as straight
   lines across the desk. This silhouette has those two edges ramped
   out, and it trails below the dashboard by an amount that shrinks as
   it lands — wide and soft in the air, tight once it is down. */
.hero__layer--shadow{
  opacity:0;                       /* invisible at rest: the settled frame
                                      stays exactly the Figma composite */
  animation:hero-shadow 4.98s var(--hero-ease) infinite both;
}

@keyframes hero-slab{
  0%    {opacity:0; transform:translate3d(0,17.4%,0) scaleX(.88)}
  3%    {opacity:1}
  28.7% {opacity:1; transform:translate3d(0,0,0) scaleX(1)}
  81.7% {opacity:1; transform:translate3d(0,0,0) scaleX(1);
         animation-timing-function:var(--hero-ease-out)}
  100%  {opacity:1; transform:translate3d(0,76.6%,0) scaleX(1)}
}
@keyframes hero-dash{
  0%    {opacity:0; transform:translate3d(0,-84.5%,0)}
  3%    {opacity:1}
  28.7% {opacity:1; transform:translate3d(0,0,0)}
  46%   {transform:translate3d(0,-.92%,0)}
  64%   {transform:translate3d(0,0,0)}
  81.7% {opacity:1; transform:translate3d(0,-.92%,0);
         animation-timing-function:var(--hero-ease-out)}
  100%  {opacity:1; transform:translate3d(0,79.3%,0)}
}
@keyframes hero-shadow{
  0%    {opacity:0;   transform:translate3d(0,-72.4%,0); filter:blur(30px)}
  4%    {opacity:.28}
  22%   {opacity:.20}
  28.7% {opacity:0;   transform:translate3d(0,1.06%,0);    filter:blur(9px)}
  81.7% {opacity:0;   transform:translate3d(0,1.06%,0);    filter:blur(9px);
         animation-timing-function:var(--hero-ease-out)}
  86%   {opacity:.18}
  100%  {opacity:.30; transform:translate3d(0,92.5%,0);  filter:blur(30px)}
}

.hero__content{
  position:relative;z-index:1;
  width:514px;margin-left:40px;
  padding:100px 0 120px;
  display:flex;flex-direction:column;gap:36px;
  height:100%;
}
.hero__top{display:flex;flex-direction:column;gap:12px}
.badge{display:flex;align-items:center;gap:4px}
.badge__icon{width:20px;height:20px}
.badge span{font-size:16px;line-height:24px;color:var(--killarney)}
.hero__text{display:flex;flex-direction:column;gap:24px}
.hero__title{
  width:515px;max-width:100%;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:-2.4px;
  font-weight:500;color:var(--tamarind);
}
.hero__lead{
  padding-right:38.37px;font-size:18px;line-height:27px;color:var(--zambezi);
}
.hero__content > [data-anim]:last-child{margin-top:auto}

/* =========================================================
   "A BOM is only the beginning"  (1:2906)
   ========================================================= */
.beginning{padding:0 var(--gut)}
.beginning__box{
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  padding:100px 0 100px 40px;
  display:flex;flex-direction:column;gap:64px;overflow:hidden;
}
.beginning__head{display:flex;flex-direction:column;gap:15.9px;max-width:663px}
.beginning__lead{width:623.22px;font-size:18px;line-height:27px;color:var(--zambezi)}

.feature-grid{display:flex;gap:16px;justify-content:center}
.feature-card{
  flex:1 0 0;min-width:0;max-width:340px;
  border:1px solid var(--mercury);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;gap:24px;
  background:var(--white);
  transition:transform .45s var(--out-quart),box-shadow .45s var(--out-quart),
             border-color .45s var(--out-quart);
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:var(--killarney-10);
  box-shadow:0 18px 34px -20px rgba(38,15,20,.22);
}
.feature-card__media{
  height:258px;background:var(--edge,var(--pampas));overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.feature-card__media img{
  width:343.39px;height:258px;object-fit:cover;flex:none;
  transition:transform .3s ease;
}

/* The illustrations carry floor grids, rails and connector lines that
   run right to the edge of their canvas, so the card crop slices them
   and leaves stub strokes against the border. Dissolve the outer band
   into each illustration's own background colour (--edge, sampled per
   image) so nothing terminates hard on the frame. */
.feature-card__media img,
.ind-card__media img{
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 15px,#000 calc(100% - 15px),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 13px,#000 calc(100% - 13px),transparent 100%);
          mask-image:
    linear-gradient(90deg,transparent 0,#000 15px,#000 calc(100% - 15px),transparent 100%),
    linear-gradient(180deg,transparent 0,#000 13px,#000 calc(100% - 13px),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.feature-card:hover .feature-card__media img{transform:scale(1.1)}
.feature-card__body{padding:0 24px 24px;display:flex;flex-direction:column;gap:10px}
.feature-card__title{font-size:20px;line-height:22px;letter-spacing:-.6px;font-weight:500;white-space:nowrap}
.feature-card__text{font-size:18px;line-height:27px;color:var(--zambezi)}

/* diagonal-lines strip (1:3188 / 1:3973) */
.diagonal-strip{
  height:61.55px;min-height:60px;position:relative;overflow:hidden;
  border:1px solid var(--mercury);margin:0 var(--gut);
}
.diagonal-strip img{
  position:absolute;top:0;left:-1.6%;width:103.19%;height:100%;max-width:none;
  object-fit:fill;
}

/* =========================================================
   "Connect every part of production"  (1:3190 h598.7)
   ========================================================= */
.connect{
  position:relative;min-height:598.7px;
  display:flex;align-items:flex-start;gap:247px;
  padding:70px var(--gut) 70px 41px;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
}
.connect__text{
  flex:1 1 480px;min-width:0;max-width:480px;
  padding-top:29.4px;display:flex;flex-direction:column;gap:40px;align-items:flex-start;
}
.connect__head{display:flex;flex-direction:column;gap:16px;width:100%}
.connect .h2{white-space:nowrap}
.connect__lead{padding-right:79.39px;font-size:18px;line-height:27px;color:var(--zambezi)}
.checklist{display:flex;flex-direction:column;gap:10px;width:100%}
.checklist li{display:flex;align-items:center;gap:10px}
.checklist img{width:18px;height:18px;flex:none}
.checklist span{font-size:14.6px;font-weight:500;line-height:24px;color:var(--killarney);white-space:nowrap}
.connect__visual{flex:0 1 543px;min-width:0;width:543px;aspect-ratio:543/458.7;height:auto}

/* --- Network illustration ------------------------------------------
   swipix's counterpart slot holds the earth Lottie (6.23s loop): the
   dotted world fades in, green arcs draw across it, and a node pulse
   travels the route. Ours is the factory interior from the Figma with
   its arcs split onto their own layer so they can do the same. */
.netviz{position:relative;width:100%;height:100%}
.netviz__base,.netviz__arcs{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* The arcs sit on their own layer, wiped in left-to-right so they draw
   themselves; the pulse then rides the main arc on earth.json's own
   6.23s cycle. Path traced from the arc baked into the Figma export,
   in the illustration's own 543x459 coordinate space. */
.netviz__arcs{clip-path:inset(0 100% 0 0)}
.netviz__pulse{
  position:absolute;left:0;top:0;width:0;height:0;opacity:0;
  offset-path:path("M 161.7,254.1 C 165.7,248.9 177.7,230.7 185.7,223.1 C 193.7,215.5 201.7,212.6 209.7,208.3 C 217.7,204.0 225.7,200.7 233.7,197.5 C 241.7,194.3 249.7,191.6 257.7,189.2 C 265.7,186.8 273.7,184.7 281.7,182.9 C 289.7,181.2 297.7,179.8 305.7,178.7 C 313.7,177.6 321.7,176.7 329.7,176.2 C 337.7,175.7 345.7,175.4 353.7,175.5 C 361.7,175.6 369.7,176.0 377.7,176.7 C 385.7,177.3 393.7,178.2 401.7,179.4 C 409.7,180.6 417.7,182.1 425.7,184.0 C 433.7,185.9 441.7,188.2 449.7,190.8 C 457.7,193.4 469.7,198.3 473.7,199.8");
  offset-rotate:0deg;offset-distance:0%;
}
.netviz__dot,.netviz__halo{
  position:absolute;border-radius:50%;background:var(--killarney);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.netviz__dot{width:6px;height:6px}
.netviz__halo{width:20px;height:20px;opacity:.22;animation:netviz-halo 1.6s ease-out infinite}

/* Route markers sitting on the arc ends, pulsing on the same 6.23s
   cycle — the node beat from swipix's globe, on our own geometry. */
.netviz__node{
  position:absolute;left:var(--nx);top:var(--ny);width:0;height:0;opacity:0;
}
.netviz__node::before,.netviz__node::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--killarney);
}
.netviz__node::before{width:5px;height:5px}
.netviz__node::after{width:18px;height:18px;opacity:.22}
.connect__visual.is-in .netviz__node{
  animation:netviz-node-in .5s var(--out-quart) calc(1.35s + var(--nd) * .18) forwards;
}
.connect__visual.is-in .netviz__node::after{
  animation:netviz-node-ring 2.4s ease-out calc(1.5s + var(--nd)) infinite;
}
@keyframes netviz-node-in{to{opacity:1}}
@keyframes netviz-node-ring{
  0%  {transform:translate(-50%,-50%) scale(.35);opacity:.34}
  60% {transform:translate(-50%,-50%) scale(2.3);opacity:0}
  100%{transform:translate(-50%,-50%) scale(2.3);opacity:0}
}

.connect__visual.is-in .netviz__arcs{animation:netviz-draw 1.9s var(--out-quart) .45s forwards}
.connect__visual.is-in .netviz__pulse{animation:netviz-travel 6.23s linear 1.5s infinite}

@keyframes netviz-draw{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}
@keyframes netviz-travel{
  0%   {offset-distance:0%;   opacity:0}
  8%   {opacity:1}
  62%  {opacity:1}
  74%  {offset-distance:100%; opacity:0}
  100% {offset-distance:100%; opacity:0}
}
@keyframes netviz-halo{
  0%  {transform:translate(-50%,-50%) scale(.45);opacity:.32}
  70% {transform:translate(-50%,-50%) scale(1.8);opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}
}

/* =========================================================
   "Paired with smarter production tools"  (1:3762)
   ========================================================= */
.paired{padding:0 var(--gut)}
.paired__box{
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  padding:0 var(--gut);
}
.paired__head{padding:100px 0 64px;display:flex;justify-content:center}
.paired__head-inner{display:flex;flex-direction:column;align-items:center;gap:15.99px}
.paired__lead{font-size:18px;line-height:27px;color:var(--zambezi);text-align:center;white-space:nowrap}

/* Sticks under the navbar while the four panels scroll past, with the
   entry for whichever panel is in view highlighted. */
.tabbar{
  position:sticky;top:0;z-index:5;
  display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;gap:8px;
  padding:7px;background:var(--white);border:1px solid var(--mercury);
  transition:box-shadow .3s ease;
}
.tabbar.is-stuck{box-shadow:0 10px 24px -12px rgba(38,15,20,.16)}
.tabbar__item{
  position:relative;
  height:56px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;background:var(--white);
  font-size:20px;font-weight:500;line-height:22px;letter-spacing:-.6px;color:var(--zambezi);
  transition:background .35s ease,color .35s ease;
}
.tabbar__item img{
  width:24px;height:24px;flex:none;
  transition:opacity .35s ease,filter .35s ease;
}
.tabbar__item::after{
  content:"";position:absolute;left:24px;right:24px;bottom:6px;height:2px;
  background:var(--killarney);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .45s var(--out-quart);
}
.tabbar__item:hover{background:var(--killarney-05)}
.tabbar__item.is-active{background:var(--killarney-05);color:var(--killarney)}
.tabbar__item.is-active::after{transform:scaleX(1)}
.tabbar__item.is-active img{
  /* tint the Zambezi icon strokes to Killarney */
  filter:invert(34%) sepia(18%) saturate(1180%) hue-rotate(93deg) brightness(94%) contrast(89%);
}

.panels{display:flex;flex-direction:column;gap:80px}
.panel{
  display:flex;gap:clamp(24px,9vw,133px);min-height:629.2px;
  border-top:1px solid var(--mercury);border-bottom:1px solid var(--mercury);
}
.panel__text{
  flex:1 0 0;min-width:0;max-width:477px;
  padding-left:var(--gut);
  display:flex;flex-direction:column;justify-content:center;gap:40px;
}
.panel__head{display:flex;flex-direction:column;gap:15.6px}
.panel__lead{font-size:18px;line-height:27px;color:var(--zambezi)}
.pills{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}
.pill{
  display:flex;align-items:center;gap:8px;height:24px;
  font-size:16px;font-weight:500;line-height:24px;color:var(--killarney);
  white-space:nowrap;
}
.pill__ic{
  width:20px;height:20px;flex:none;border-radius:4px;
  background:var(--killarney-10);backdrop-filter:blur(2.5px);
  display:flex;align-items:center;justify-content:center;
}
.pill__ic img{width:10px;height:10px}
.pill{transition:transform .35s var(--out-quart)}
.pill:hover{transform:translateY(-2px)}
.panel__media{flex:1 1 775px;min-width:0;max-width:775px;overflow:hidden;align-self:stretch}
.panel__media img{width:100%;height:100%;min-height:100%;object-fit:cover}

/* =========================================================
   "One platform to manage"  (1:3974 h749.39)
   ========================================================= */
.manage{display:flex;flex-direction:column;padding:0 var(--gut)}
.manage__box{
  display:flex;height:508.39px;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
}
.manage__particle{position:relative;flex:1 1 330px;max-width:330px;height:408.39px;overflow:hidden}
.manage__particle-img{
  position:absolute;inset:0;
  background-image:url(../assets/img/particle.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.manage__particle--right .manage__particle-img{transform:scaleX(-1)}
.manage__particle-fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,.55) 78%,
    #fff 100%);
}
.manage__center{flex:0 1 690px;min-width:0;padding:0 clamp(16px,5vw,80px);display:flex;flex-direction:column;align-items:center}
.manage__center-inner{
  max-width:530px;width:100%;padding-top:99.3px;
  display:flex;flex-direction:column;align-items:center;gap:30px;
}
.manage__head{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.manage__lead{font-size:18px;line-height:27px;color:var(--zambezi);text-align:center;white-space:nowrap}

/* marquee (a-45 / a-56 — 50000ms linear, infinite) */
.marquee-box{
  height:96px;display:flex;flex-direction:column;gap:16px;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  overflow:hidden;
}
.marquee{height:40px;overflow:hidden;position:relative}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee--left .marquee__track{animation:marquee-left 50s linear infinite}
.marquee--right .marquee__track{animation:marquee-right 50s linear infinite}
.marquee__row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:1350px;min-width:1350px;flex:none;height:40px;
}
.marquee__row--wide{justify-content:space-between;gap:0;padding:0 96px}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.tag{
  display:inline-flex;align-items:center;gap:4px;height:40px;flex:none;
  padding:10px 13px;border-radius:10px;
  background:var(--killarney-05);border:1px solid var(--killarney);
  font-size:11.2px;font-weight:500;line-height:16.8px;color:var(--killarney);
  white-space:nowrap;
}
.tag img{width:16px;height:16px;flex:none}
.tagimg{
  display:inline-block;width:112px;height:40px;flex:none;
  background:url(../assets/img/tag-placeholder.png) no-repeat left center/112px 40px;
}
.manage__tail{
  height:100px;margin-top:45px;
  border:1px solid var(--mercury);
}

/* =========================================================
   "Built for whatever you make"  (1:4638)
   ========================================================= */
.industries{
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  padding-bottom:100px;
}
.industries__head{
  position:relative;
  padding:var(--sec-pad) var(--gut) 64px;
  border-top:1px solid var(--mercury);border-bottom:1px solid var(--mercury);
}
.industries__head-inner{max-width:480px;display:flex;flex-direction:column;gap:15.89px}
.industries .h2{white-space:nowrap}
.industries__lead{padding-right:18.23px;font-size:18px;line-height:27px;color:var(--zambezi);white-space:nowrap}
.industries__nav{position:absolute;right:40px;bottom:64px;display:flex;gap:12px}
.round-btn{
  width:30px;height:30px;border-radius:15px;border:1px solid var(--mercury);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:border-color .3s ease,background .3s ease;
}
.round-btn:hover{background:var(--pampas);border-color:var(--zambezi);transform:scale(1.08)}
.round-btn{transition:border-color .3s ease,background .3s ease,transform .3s var(--out-quart)}
.round-btn img{width:5.85px;height:10.35px}

.industries__rows{display:flex;flex-direction:column;gap:40px}
.industries__row{display:flex;gap:clamp(16px,2.8vw,40px);padding:0 var(--gut)}
.ind-card{
  flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:23.45px;
  padding-bottom:20px;
  border-left:1px solid var(--mercury);
  border-right:1px solid var(--mercury);
  border-bottom:1px solid var(--mercury);
}
.ind-card__media{min-height:220px;height:307px;overflow:hidden;background:var(--edge,#fff)}
.ind-card__media img{
  width:100%;height:307px;object-fit:cover;
  transition:transform .3s ease;
}
.ind-card:hover .ind-card__media img{transform:scale(1.1)}
.ind-card__body{padding:0 20px;display:flex;flex-direction:column;gap:10px}
.ind-card__title{
  font-size:22.1px;line-height:26.4px;letter-spacing:-.72px;font-weight:500;
  transition:color .3s ease;
}
.ind-card:hover .ind-card__title{color:var(--killarney)}
.ind-card__text{padding-right:51.02px;font-size:18px;line-height:27px;color:var(--zambezi)}

/* =========================================================
   Comparison  (1:4132 h735.42)
   ========================================================= */
.compare{
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  padding-top:100px;padding-bottom:100px;
}
.compare__head{
  height:196.41px;
  border-top:1px solid var(--mercury);border-bottom:1px solid var(--mercury);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16.01px;
}
.compare__lead{font-size:18px;line-height:27px;color:var(--zambezi);text-align:center;white-space:nowrap}
.compare__wrap{
  margin-top:40px;height:299px;
  border-top:1px solid var(--mercury);border-bottom:1px solid var(--mercury);
  padding:0 var(--gut);
}
.compare__box{display:flex;height:297px}
.compare__col{
  flex:1 0 0;min-width:0;position:relative;
  padding:40px;display:flex;flex-direction:column;gap:32px;
}
.compare__col:first-child{border-right:1px solid var(--mercury)}
.compare__col--bom{background:var(--killarney-03)}
.compare__title{font-size:45px;line-height:52.8px;letter-spacing:-1.44px;font-weight:500}
.compare__list{display:flex;flex-direction:column;gap:12px}
.compare__list li{display:flex;align-items:center;gap:12px}
.compare__ic{
  width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.compare__list span{font-size:14.9px;font-weight:500;line-height:24px;color:var(--tamarind);white-space:nowrap}
.compare__ribbon{
  position:absolute;left:0;top:0;width:100%;max-width:634px;height:21px;
  background:var(--killarney);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;line-height:24px;
}

/* =========================================================
   Green CTA  (4:3789 1352x684)
   ========================================================= */
.cta{
  position:relative;margin:0 var(--gut);height:684px;padding:var(--gut);
  border:1px solid var(--mercury);
  background:url(../assets/img/cta-outer-bg.png) no-repeat;
  background-size:103.55% 99.72%;
  background-position:-1.78% .14%;
}
.cta__inner{
  position:relative;height:100%;overflow:hidden;
  padding:0 clamp(24px,5.6vw,80px);display:flex;align-items:center;justify-content:space-between;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  background:var(--killarney);
}
.cta__inner::before{
  content:"";position:absolute;inset:0;opacity:.2;
  background:url(../assets/img/cta-pattern.png) no-repeat;
  background-size:104.15% 100%;background-position:-2.07% 0;
  pointer-events:none;
}
.cta__content{
  position:relative;z-index:1;width:620px;flex:none;
  padding:80px 0;display:flex;flex-direction:column;gap:77px;
}
.cta__text{display:flex;flex-direction:column;gap:24px}
.cta__title{font-size:73.9px;line-height:88px;letter-spacing:-2.4px;font-weight:500;color:var(--white)}
.cta__lead{font-size:18px;line-height:27px;color:var(--white);white-space:nowrap}
.cta__media{
  position:relative;z-index:1;width:1000.852px;flex:none;height:602px;
  border-radius:20.883px;overflow:hidden;
}
.cta__media img{
  position:absolute;left:-151.03px;top:-53.18px;
  width:873.574px;height:655.18px;max-width:none;object-fit:cover;
}

/* =========================================================
   Contact — same grammar as the rest of the page: 40px gutter,
   1px Mercury rules, Killarney accents, Inter at the section scale.
   ========================================================= */
.contact{padding:0 var(--gut)}
.contact__box{
  border:1px solid var(--mercury);
  display:flex;flex-wrap:wrap;gap:96px;padding:var(--sec-pad) 80px;
}
.contact__intro{flex:1 0 0;min-width:0;max-width:530px;display:flex;flex-direction:column;gap:24px}
.contact__lead{font-size:18px;line-height:27px;color:var(--zambezi)}
.contact__list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.contact__list li{display:flex;align-items:flex-start;gap:10px}
.contact__list img{width:18px;height:18px;flex:none;margin-top:3px}
.contact__list span{font-size:14.6px;font-weight:500;line-height:24px;color:var(--killarney)}
.contact__meta{display:flex;gap:64px;margin-top:16px;padding-top:24px;border-top:1px solid var(--mercury)}
.contact__meta-item{display:flex;flex-direction:column;gap:6px}
.contact__meta-label{font-size:16px;line-height:24px;color:var(--zambezi)}
.contact__meta-item a,.contact__meta-value{font-size:16px;line-height:24px;color:var(--tamarind)}
.contact__meta-item a:hover{text-decoration:underline}

.contact__form{
  flex:1 0 0;min-width:0;max-width:530px;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:start;
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1 / -1}
.field label{font-size:14.6px;font-weight:500;line-height:24px;color:var(--tamarind)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;line-height:24px;color:var(--tamarind);
  background:var(--white);border:1px solid var(--mercury);border-radius:0;
  padding:13px 16px;width:100%;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.field textarea{resize:vertical;min-height:118px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--zambezi) 50%),
                   linear-gradient(135deg,var(--zambezi) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{color:var(--gray-chateau,#a1aab5)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--zambezi)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--killarney);
  box-shadow:0 0 0 3px var(--killarney-10);
}
.contact__submit{display:flex;flex-direction:row;align-items:center;gap:20px;margin-top:4px}
.contact__note{font-size:14.6px;line-height:24px;color:var(--zambezi)}

/* =========================================================
   Footer  (1:5140 h744.61)
   ========================================================= */
.footer{padding:0 var(--gut);display:flex;flex-direction:column}
.footer__box{
  position:relative;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  border-top:1px solid var(--mercury);
  padding:50px var(--gut) 30px;
  background:url(../assets/img/footer-bg.png) no-repeat;
  background-size:100.24% 99.86%;
  background-position:-.12% .07%;
}
.footer__top{display:flex;flex-wrap:wrap;gap:218px;padding-bottom:64px}
.footer__brand{display:flex;flex-direction:column;gap:85px}
.footer__contacts{display:flex;flex-direction:column;gap:32px}
.footer__contact{display:flex;flex-direction:column;gap:6px}
.footer__label{font-size:16px;line-height:24px;color:var(--zambezi)}
.footer__contact a{font-size:16px;line-height:24px;color:var(--tamarind)}
.footer__col{display:flex;flex-direction:column;gap:24px}
.footer__coltitle{font-size:16px;font-weight:500;line-height:24px;color:var(--tamarind-60)}
.footer__col ul{display:flex;flex-direction:column;gap:12px}
.footer__col a{font-size:18px;line-height:24px;color:var(--tamarind)}
.footer__col a,.footer__contact a{transition:color .25s ease}
.footer__col a:hover,.footer__contact a:hover{color:var(--killarney);text-decoration:underline}
.footer__legal{display:flex;flex-direction:column;gap:8px;padding-bottom:40px}
.footer__legal p{font-size:10.7px;line-height:16.8px;color:var(--zambezi)}
.footer__bottom{display:flex;align-items:center;font-size:16px;line-height:24px;color:var(--zambezi)}
.footer__bottom a{color:var(--tamarind)}
.footer__tail{
  height:40px;min-height:40px;
  border-left:1px solid var(--mercury);border-right:1px solid var(--mercury);
  border-top:1px solid var(--mercury);
}

/* =========================================================
   Scroll reveal animations — values copied 1:1 from the
   swipix.webflow.io Webflow IX2 action lists.
   a-27 : y 50 -> 0, opacity 0 -> 1, 1200ms outQuart, delay 0
   a-28 : same, delay 200ms
   a-29 : same, delay 400ms
   a-30 : same, delay 600ms  (next step on swipix's 200ms ladder)
   slide-in-bottom : y 100 -> 0, 1000ms outQuart
   slide-in-top    : y -100 -> 0, 1000ms outQuart
   fade-in         : opacity, 1000ms outQuart
   grow-in         : scale .75 -> 1, 1000ms outQuart
   shrink-in       : scale 1.25 -> 1, 1000ms outQuart
   ========================================================= */
[data-anim]{will-change:transform,opacity}

[data-anim^="a-2"],[data-anim="a-30"]{
  opacity:0;transform:translateY(50px);
  transition:opacity 1200ms var(--out-quart),transform 1200ms var(--out-quart);
}
[data-anim="a-27"]{transition-delay:0ms}
[data-anim="a-28"]{transition-delay:200ms}
[data-anim="a-29"]{transition-delay:400ms}
[data-anim="a-30"]{transition-delay:600ms}

[data-anim="slide-in-bottom"]{
  opacity:0;transform:translateY(100px);
  transition:opacity 1000ms var(--out-quart),transform 1000ms var(--out-quart);
}
[data-anim="slide-in-top"]{
  opacity:0;transform:translateY(-100px);
  transition:opacity 1000ms var(--out-quart),transform 1000ms var(--out-quart);
}
[data-anim="fade-in"]{
  opacity:0;
  transition:opacity 1000ms var(--out-quart);
}
[data-anim="grow-in"]{
  opacity:0;transform:scale(.75);
  transition:opacity 1000ms var(--out-quart),transform 1000ms var(--out-quart);
}
[data-anim="shrink-in"]{
  opacity:0;transform:scale(1.25);
  transition:opacity 1000ms var(--out-quart),transform 1000ms var(--out-quart);
}
[data-anim].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track,.hero__layer,.netviz__arcs,.netviz__pulse,.netviz__halo{animation:none!important}
  .hero__layer--shadow{display:none}
  .netviz__node{display:none}
  .netviz__arcs{clip-path:none}
  .netviz__pulse{display:none}
  .btn__bg{transition:none}
  .feature-card,.pill,.round-btn,.nav a::after{transition:none!important}
  .feature-card:hover,.pill:hover,.round-btn:hover{transform:none}
}
/* Same freeze, applied by script (covers ?noanim=1 for visual QA). */
.no-motion [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
.no-motion .marquee__track,
.no-motion .hero__layer,
.no-motion .netviz__arcs,
.no-motion .netviz__pulse,
.no-motion .netviz__halo{animation:none!important}
.no-motion .hero__layer--shadow{display:none}
.no-motion .netviz__node{display:none}
.no-motion .netviz__arcs{clip-path:none}
.no-motion .netviz__pulse{display:none}
.no-motion .btn__bg{transition:none}

/* =========================================================
   Responsive
   The design is authored at 1432px. Below that the tokens above
   tighten the whole page together, and these steps restack it.
   Covers browser/OS scaling too: a 1920 screen at 150% reports a
   1280px viewport, 125% reports 1536 — both land in these ranges.
   ========================================================= */

/* --- 1432 -> 1200 : tighten, keep every column side by side --- */
@media (max-width:1431.98px){
  :root{
    --h1:clamp(44px,5.2vw,73px);   --h1-lh:1.08;
    --h2:clamp(30px,3.2vw,44.1px); --h2-lh:1.2;
    --h3:clamp(23px,2.2vw,29.4px); --h3-lh:1.2;
    --gut:clamp(20px,2.8vw,40px);
  }
  .hero__title{width:auto}
  .beginning__lead,.hero__lead,.connect__lead,.industries__lead,
  .paired__lead,.compare__lead,.manage__lead,.cta__lead{width:auto;padding-right:0}
  /* headings the Figma set to nowrap have to be allowed to wrap once
     they no longer fit the frame they were measured in */
  .connect .h2,.industries .h2,.industries__lead,.manage__lead,
  .paired__lead,.compare__lead,.cta__lead,.checklist span,
  .compare__list span,.feature-card__title{white-space:normal}
  .hero__content{width:min(514px,46%);margin-left:var(--gut)}
  .beginning__box{padding-left:var(--gut)}
  /* keep the panel split proportional rather than letting the 775px
     media basis crush the copy column */
  .panel{gap:clamp(24px,4vw,133px)}
  .panel__text{flex:1 1 42%;max-width:477px}
  .panel__media{flex:1 1 58%}
  .panel__media img{object-position:left center}
  .connect{gap:clamp(24px,4vw,247px)}
  .footer__top{gap:clamp(32px,14vw,218px)}
  .contact__box{gap:clamp(32px,6vw,96px);padding:var(--sec-pad) clamp(20px,5.6vw,80px)}
  .connect__text{flex:1 1 auto;max-width:480px}
  .connect__visual{flex:0 1 543px;width:auto;max-width:543px}
  .cta__content{width:auto;flex:1 1 56%;min-width:0;max-width:620px}
  .cta__media{width:auto;flex:1 1 44%;min-width:0}
  .marquee-box{margin:0 -1px}
}

/* --- large tablet / small laptop --- */
@media (max-width:1180px){
  :root{--sec-pad:80px}
  .nav{gap:18px}
  .nav a{font-size:15px}
  .feature-grid{flex-wrap:wrap}
  .feature-card{flex:1 1 calc(50% - 8px);max-width:none}
  .panel{flex-direction:column;gap:0;min-height:0}
  .panel__text{flex:1 1 auto;max-width:none;padding:56px var(--gut)}
  .panel__media{flex:1 1 auto;max-width:none;width:100%;aspect-ratio:775/629;align-self:auto}
  .panels{gap:56px}
  .industries__row{flex-wrap:wrap}
  .ind-card{flex:1 1 calc(50% - 20px)}
  .footer__top{gap:48px}
  .footer__brand{flex:1 1 100%;gap:40px}
}

/* --- hero stacks: text above, scene below --- */
@media (max-width:1000px){
  .hero__box{height:auto;display:flex;flex-direction:column}
  .hero__content{order:1;position:relative;width:auto;margin:0;padding:64px var(--gut) 40px}
  .hero__visual{order:2}
  .hero__visual{position:relative;left:0;right:auto;bottom:auto;
                width:100%;aspect-ratio:1342/757;height:auto}
  .hero__content > [data-anim]:last-child{margin-top:0}

  .connect{flex-direction:column;padding:64px var(--gut);gap:40px}
  .connect__text{flex:1 1 auto;max-width:640px;padding-top:0}
  .connect__visual{flex:1 1 auto;width:min(543px,100%);align-self:center}


  .manage__box{height:auto;padding:0 0 40px}
  .manage__particle{display:none}
  .manage__center{flex:1 1 100%;max-width:none;padding:0 var(--gut)}
  .manage__center-inner{padding-top:72px;max-width:560px;margin:0 auto}
  .manage__tail{margin-top:32px}

  .cta{height:auto}
  .cta__inner{flex-direction:column;padding:0}
  .cta__content{max-width:none;width:100%;padding:56px clamp(20px,5vw,56px)}
  .cta__media{width:100%;flex:1 1 auto;height:auto;aspect-ratio:1000/602;border-radius:0}
  .cta__media img{position:relative;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:18% 50%}
  .cta__title{font-size:clamp(34px,6vw,73.9px);line-height:1.1}

  .contact__box{padding:64px clamp(20px,4vw,48px)}
  .contact__intro,.contact__form{flex:1 1 100%;max-width:none}
}

/* --- tablet --- */
@media (max-width:820px){
  :root{--sec-pad:64px}
  .navbar__inner{flex-wrap:wrap;gap:14px;justify-content:space-between}
  .nav{order:3;flex:1 1 100%;justify-content:center;flex-wrap:wrap;gap:20px}
  .compare__box{flex-direction:column;height:auto}
  .compare__col:first-child{border-right:0;border-bottom:1px solid var(--mercury)}
  .compare__wrap{height:auto;padding:0}
  .compare__col{padding:40px var(--gut)}
  .compare__ribbon{max-width:none}
  .contact__form{grid-template-columns:1fr}
  .field--full,.field{grid-column:1 / -1}
  .industries__nav{position:static;margin-top:24px}
  .industries__head{display:flex;flex-direction:column;align-items:flex-start}
  .tabbar{grid-template-columns:1fr 1fr;gap:6px}
  .tabbar__item{font-size:16px;padding:12px 12px;height:52px;gap:8px}
  .tabbar__item img{width:20px;height:20px}
  .tabbar__item::after{left:12px;right:12px}
}

/* --- phone --- */
@media (max-width:640px){
  :root{--sec-pad:48px;--body:16px;--body-lh:25px}
  .beginning__box{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);gap:40px}
  .feature-card,.ind-card{flex:1 1 100%}
  .feature-grid{gap:16px}
  .industries__row{gap:24px}
  .panel__text{padding:40px var(--gut)}
  .pills{gap:8px 16px}
  .pill{width:auto}
  .contact__meta{flex-direction:column;gap:20px}
  .footer__top{flex-direction:column;gap:36px}
  .footer__brand{gap:32px}
  .navbar{padding:16px var(--gut)}
  .nav{gap:14px}
  .nav a{font-size:14px}
  .navbar__cta .btn{padding:11px 16px;font-size:14px}
  .diagonal-strip{margin:0 var(--gut)}
  .contact__box{padding:40px 20px}
  .cta__content{padding:40px 20px}
  .marquee-box{height:auto;padding:8px 0}
}

/* Comfortable tap targets on touch layouts — the text links inherit a
   24px line box, which is under the 32px minimum on their own. */
@media (max-width:820px){
  .nav a,.footer__col a,.footer__contact a{display:inline-block;padding:6px 0}
  .contact__meta-item a{display:inline-block;padding:4px 0}
  .round-btn{width:40px;height:40px;border-radius:20px}
}

@media (max-width:420px){
  .tabbar{grid-template-columns:1fr}
  .contact__submit{flex-direction:column;align-items:flex-start;gap:12px}
}