/* =========================================================================
   MAKTONIC — main stylesheet
   Design tokens, type scale and layout mirror the reference design system.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:Archivo;src:url(../fonts/Archivo-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url(../fonts/AzeretMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(../fonts/Switzer-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(../fonts/Switzer-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens */
:root{
  /* neutrals */
  --gray-50:#f2f6f5;  --gray-100:#d9dfde; --gray-200:#bec9c6; --gray-300:#a5b2af;
  --gray-400:#8b9a96; --gray-500:#73817e; --gray-600:#5c6764; --gray-700:#454e4c;
  --gray-800:#2e3332; --black:#15171a;    --white:#fff;
  /* coral (primary action) */
  --coral-10:#fdfafa; --coral-50:#fbeeec; --coral-100:#f6dad5; --coral-200:#ebb5ab;
  --coral-300:#e69786; --coral-400:#e06f68; --coral-500:#ce3c2b; --coral-card:#c24b3e;
  /* green (brand accent) */
  --green-50:#c4ece1; --green-100:#c4ece1; --green-200:#93dcc8; --green-300:#60c7ac;
  --green-400:#37a88a; --green-500:#08906c; --green-900:#064c39;
  /* blue (deep surfaces) */
  --blue-50:#ebf5f9;  --blue-100:#d8ebf4; --blue-200:#b0d4e8; --blue-300:#87bbd9;
  --blue-400:#66a7cc; --blue-500:#478fb8; --blue-700:#2b4d60;
  /* purple (used by the hero timeline cards) */
  --purple-50:#f6eefb; --purple-100:#edddf8; --purple-200:#dbbaf1;
  --purple-300:#cb97eb; --purple-400:#bc71e3; --purple-500:#ac49d8;
  /* maktonic identity blue — used for focus rings and the mark tile */
  --brand-blue:#0447a6;

  /* spacing scale */
  --s-4:.25rem;   --s-6:.375rem;  --s-8:.5rem;    --s-10:.625rem; --s-12:.75rem;
  --s-14:.875rem; --s-16:1rem;    --s-18:1.125rem;--s-20:1.25rem; --s-24:1.5rem;
  --s-32:2rem;    --s-38:2.375rem;--s-40:2.5rem;  --s-42:2.625rem;--s-44:2.75rem;
  --s-48:3rem;    --s-50:3.125rem;--s-52:3.25rem; --s-60:3.75rem; --s-64:4rem;
  --s-80:5rem;    --s-90:5.625rem;--s-100:6.25rem;--s-105:6.625rem;
  --s-120:7.5rem; --s-140:8.75rem;
  --container:85rem;
  --btn-radius:5rem;
  --gutter:var(--s-40);

  /* type scale (desktop) */
  --f-title-xl:4.5rem; --f-title-l:3.625rem; --f-title-m:2.25rem;
  --f-title-s:1.75rem; --f-title-xs:1.375rem;
  --f-text-xl:1.25rem; --f-text-l:1.125rem;  --f-text-m:1rem; --f-text-s:.875rem;
  --f-nav:.875rem;     --f-chips:1.125rem;

  --lh-100:100%; --lh-110:110%; --lh-120:120%; --lh-130:130%; --lh-140:140%;
  --ls-0:0em; --ls-1:-.01em; --ls-2:-.02em; --ls-3:-.03em;

  --font:Archivo,Arial,Helvetica,sans-serif;
  --font-mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-alt:Switzer,Archivo,Arial,sans-serif;

  --ease:cubic-bezier(.215,.61,.355,1);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  margin:0;
  background-color:var(--gray-50);
  color:var(--black);
  font-family:var(--font);
  font-size:var(--f-text-m);
  line-height:var(--lh-120);
  font-weight:400;
  letter-spacing:var(--ls-3);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color .4s;
  overflow-x:hidden;
}
/* A single fixed layer behind all content. Its colour is scrubbed by scroll,
   so section-to-section background changes crossfade instead of snapping.
   Sections that need their own colour simply paint over it. */
.page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--gray-50);
}
.page_wrapp{position:relative;z-index:1}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------ typography */
.title--xl{font-size:var(--f-title-xl);line-height:var(--lh-120);font-weight:600;letter-spacing:var(--ls-3)}
.title--l{font-size:var(--f-title-l);line-height:var(--lh-110);font-weight:500;letter-spacing:-.04em}
.title--m{font-size:var(--f-title-m);line-height:var(--lh-120);font-weight:500;letter-spacing:var(--ls-3)}
.title--s{font-size:var(--f-title-s);line-height:var(--lh-130);font-weight:500;letter-spacing:var(--ls-3)}
.title--xs{font-size:var(--f-title-xs);line-height:var(--lh-130);font-weight:400;letter-spacing:var(--ls-2)}
.text--xl{font-size:var(--f-text-xl);line-height:var(--lh-140);letter-spacing:var(--ls-2)}
.text--l{font-size:var(--f-text-l);line-height:var(--lh-140);letter-spacing:var(--ls-2)}
.text--m{font-size:var(--f-text-m);line-height:var(--lh-140);letter-spacing:var(--ls-1)}
.text--s{font-size:var(--f-text-s);line-height:var(--lh-140);letter-spacing:var(--ls-1)}
.text--70{font-size:4.375rem;line-height:var(--lh-100);letter-spacing:var(--ls-3);font-weight:500}
.text--number{font-size:4.375rem;line-height:var(--lh-100);letter-spacing:var(--ls-3);font-weight:500}
.text--mono{font-family:var(--font-mono);font-size:var(--f-text-s);line-height:var(--lh-130);font-weight:400;letter-spacing:var(--ls-0)}
.text--mono.is--grey{color:var(--gray-500)}
.text--chips{font-family:var(--font-alt);font-size:var(--f-chips);font-weight:500;letter-spacing:0}
.opacity-60{opacity:.6}
.is--green{color:var(--green-500)}
.is--light-green{color:var(--green-200)}
.is--gray-600{color:var(--gray-600)}
.is--green-200{color:var(--green-200)}

/* gradient headline treatment */
.text--grad{
  background:linear-gradient(265.26deg,#08906c 38.04%,#34bf99 94.86%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;padding-right:.05ch;
}
.text--grad-light{
  background:linear-gradient(265.26deg,#93dcc8 38.04%,#e9fbf5 94.86%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;padding-right:.05ch;
}

/* ---------------------------------------------------------------- layout */
.section{width:100%;position:relative}
.section.main-large{padding-top:var(--s-100);padding-bottom:var(--s-100)}
.section.is--bg-white{background-color:var(--white)}
.padding_global{z-index:2;width:100%;padding-left:var(--gutter);padding-right:var(--gutter);position:relative}
.padding_global.is--static{position:static}
.container{z-index:1;width:100%;max-width:var(--container);margin-inline:auto}
.container.is--relative{position:relative}
.vflex{display:flex;flex-direction:column}
.spacer-60{height:var(--s-60)}
.spacer-40{height:var(--s-40)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- buttons */
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s-16) var(--s-40);
  border-radius:var(--btn-radius);
  background-color:var(--coral-500);
  color:var(--white);
  font-size:1rem;line-height:var(--lh-130);font-weight:500;
  letter-spacing:var(--ls-3);text-align:center;white-space:nowrap;
  transition:background-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
}
.button:hover{background-color:#b33324;transform:translateY(-2px);box-shadow:0 10px 24px rgba(206,60,43,.28)}
.button:active{transform:translateY(0)}
.button.is--ghost{background-color:var(--gray-50);color:var(--coral-500);border:1px solid var(--coral-500)}
.button.is--ghost:hover{background-color:var(--coral-500);color:var(--white);border-color:var(--coral-500)}
.button.is--ghost-light{background-color:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.button.is--ghost-light:hover{background-color:var(--white);color:var(--black);box-shadow:inset 0 0 0 1px var(--white)}
.button.is--white{background-color:var(--white);color:var(--black)}
.button.is--white:hover{background-color:var(--gray-100);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.button.is--sm{
  height:var(--s-40);padding:var(--s-12) var(--s-24);
  font-size:var(--f-nav);flex:none;
}
.button.is--ghost.is--sm{background-color:var(--gray-50)}
.navbar.is--scrolled .button.is--ghost.is--sm{background-color:transparent}
.button.is--link{background:none;color:var(--black);padding:var(--s-10) 0}
.button.is--link:hover{background:none;color:var(--coral-500);transform:none;box-shadow:none}

/* ------------------------------------------------------------ eyebrow chip */
.section_chips{
  display:inline-flex;align-items:center;gap:var(--s-8);
  color:var(--gray-600);
  font-family:var(--font-alt);font-size:var(--s-16);font-weight:500;
  line-height:var(--lh-130);letter-spacing:0;
}
.section_chips.is--light{color:var(--green-200)}
.section_chips.is--on-dark{color:var(--blue-200)}
.icon_chips{width:1rem;height:1rem;flex:none}
.icon_chips svg{width:100%;height:100%}

.section_heading{display:flex;flex-direction:column;gap:var(--s-24);max-width:56rem}
.section_heading p{color:var(--gray-600);max-width:44rem}

/* ================================================================== NAVBAR */
.navbar{
  z-index:99;position:fixed;inset:0 0 auto;width:100%;
  padding-left:var(--s-40);padding-right:var(--s-40);
  background-color:transparent;
}
.nav_bg{
  z-index:0;position:absolute;inset:0;width:100%;height:100%;
  background-color:var(--gray-50);
  opacity:0;transition:opacity .35s ease;
  border-bottom:1px solid transparent;
}
.navbar.is--scrolled .nav_bg{opacity:1;border-bottom-color:var(--gray-100);box-shadow:0 6px 24px rgba(21,23,26,.05)}
.nav_container{
  z-index:1;position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-16);
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-top:var(--s-20);padding-bottom:var(--s-20);
}
.nav_logo{display:flex;align-items:center;justify-self:start}
.nav_logo img{height:1.75rem;width:auto}
/* the links sit inside a white pill, as in the reference */
.nav_links{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:var(--s-38);height:var(--s-40);padding-inline:var(--s-32);
  border-radius:var(--btn-radius);background-color:var(--white);
  justify-self:center;
  box-shadow:0 1px 2px rgba(21,23,26,.04),0 8px 24px rgba(21,23,26,.05);
}
.navlink{
  font-size:var(--f-nav);line-height:var(--lh-130);font-weight:500;
  letter-spacing:var(--ls-2);white-space:nowrap;color:var(--black);
  transition:color .3s;position:relative;
}
.navlink::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:currentColor;transition:right .3s var(--ease);
}
.navlink:hover{color:var(--coral-500)}
.navlink.is--current{color:var(--coral-500)}
.navlink.is--current::after{right:0}
.navlink:hover::after{right:0}
.nav_actions{display:flex;align-items:center;gap:var(--s-12);justify-self:end}
.menu-button{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:50%;color:var(--black)}
.menu-button svg{width:1.5rem;height:1.5rem}

/* mobile drawer */
.nav_drawer{
  display:none;position:fixed;inset:0;z-index:98;
  background:var(--gray-50);padding:6rem var(--s-24) var(--s-40);
  flex-direction:column;gap:var(--s-24);
  transform:translateY(-100%);transition:transform .45s var(--ease);
}
.nav_drawer.is--open{transform:translateY(0)}
.nav_drawer .navlink{font-size:var(--f-title-s);color:var(--black)}
.nav_drawer .nav_actions{justify-self:stretch;flex-direction:column;align-items:stretch;gap:var(--s-12);margin-top:auto}
.nav_drawer .button{width:100%}

/* ==================================================================== HERO */
.hero_section{position:relative;overflow:hidden}
.hero_container{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:var(--s-48);
  height:100vh;min-height:54.375rem;max-height:56.25rem;
}
.hero_content{display:flex;flex-direction:column;gap:var(--s-32);max-width:42rem}
.hero_content h1{margin:0}
.hero__description{max-width:34rem;color:var(--gray-700)}
.hero_buttons{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-top:var(--s-8)}

/* ---------------------------------------------------- animated hero visual
   A looping two-scene sequence: the assistants logging work minute by minute,
   then the split of who did what. Cards are markup, not bitmaps. */
.hero-animation{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.hero-visual{
  position:relative;width:100%;max-width:38rem;height:min(46rem,80vh);
  display:flex;align-items:center;justify-content:center;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* The mesh is drawn in JS from the real card positions, so every line is
   genuinely anchored to a card at any breakpoint. It overflows the visual
   box on purpose; .hero_section clips it. */
.hero-net{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
  /* dissolve the lines where they converge, so the hub never reads as a starburst */
  -webkit-mask-image:radial-gradient(circle var(--hr,16rem) at var(--hx,100%) var(--hy,50%),transparent 0,#000 100%);
  mask-image:radial-gradient(circle var(--hr,16rem) at var(--hx,100%) var(--hy,50%),transparent 0,#000 100%);
}
.hero-net path{stroke:#15171a;stroke-opacity:.11;fill:none}

.hero-scene{position:absolute;inset:0;z-index:1}
.hero-scene.is--b{opacity:0}

/* --- scene A: timeline notification cards --- */
.hero-note{
  position:absolute;width:23.5rem;max-width:96%;
  display:flex;align-items:center;gap:var(--s-16);
  padding:var(--s-16) var(--s-20);border-radius:var(--s-20);
  background:var(--white);
  box-shadow:-18px 30px 56px rgba(8,144,108,.20),-5px 8px 18px rgba(8,144,108,.12);
  opacity:0;
}
.hero-note.n1{top:2%;left:26%}
.hero-note.n2{top:27%;left:6%}
.hero-note.n3{top:52%;left:16%}
.hero-note.n4{top:77%;left:28%}

.hero-note_icon{
  width:3.25rem;height:3.25rem;flex:none;border-radius:var(--s-14);
  display:grid;place-items:center;
}
.hero-note_icon svg{width:1.5rem;height:1.5rem}
.hero-note_icon.is--green{background:var(--green-100);color:var(--green-500)}
.hero-note_icon.is--blue{background:var(--blue-100);color:var(--blue-500)}
.hero-note_icon.is--coral{background:var(--coral-100);color:var(--coral-500)}
.hero-note_icon.is--purple{background:var(--purple-100);color:var(--purple-500)}

.hero-note_body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hero-note_time{font-size:.8125rem;font-weight:500;letter-spacing:var(--ls-1)}
.hero-note_time.is--green{color:var(--green-500)}
.hero-note_time.is--blue{color:var(--blue-500)}
.hero-note_time.is--coral{color:var(--coral-500)}
.hero-note_time.is--purple{color:var(--purple-500)}
.hero-note_title{font-size:1.125rem;font-weight:700;letter-spacing:var(--ls-3);color:var(--black)}
.hero-note_sub{font-size:.8125rem;color:var(--gray-500);letter-spacing:var(--ls-1)}

.hero-note_check{
  width:1.75rem;height:1.75rem;flex:none;margin-left:auto;border-radius:50%;
  background:var(--green-500);color:var(--white);display:grid;place-items:center;
}
.hero-note_check svg{width:.85rem;height:.85rem}

/* --- scene B: who did what --- */
.hero-sum{
  position:absolute;width:23.5rem;max-width:96%;
  display:flex;flex-direction:column;gap:var(--s-20);
  padding:var(--s-20);border-radius:var(--s-20);background:var(--white);
  box-shadow:-18px 30px 56px rgba(8,144,108,.20),-5px 8px 18px rgba(8,144,108,.12);
  opacity:0;
}
.hero-sum.s1{top:16%;left:22%}
.hero-sum.s2{top:56%;left:22%}
.hero-sum_head{display:flex;align-items:center;gap:var(--s-16)}
.hero-sum_tile{
  width:3.5rem;height:3.5rem;flex:none;border-radius:var(--s-14);
  background:var(--green-500);display:grid;place-items:center;overflow:hidden;
}
.hero-sum_tile img{width:58%;height:auto}
.hero-sum_tile.is--photo{background:var(--blue-100)}
.hero-sum_tile.is--photo img{width:100%;height:100%;object-fit:cover}
.hero-sum_name{font-size:1.375rem;font-weight:700;letter-spacing:var(--ls-3)}
.hero-sum_foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.hero-sum_stat{
  display:flex;align-items:center;gap:var(--s-10);
  font-size:1rem;font-weight:500;letter-spacing:var(--ls-2);color:var(--gray-800);
}
.hero-sum_stat .hero-note_check{margin-left:0;width:1.4rem;height:1.4rem}
.hero-sum_stat .hero-note_check svg{width:.7rem;height:.7rem}
.hero-stack{display:flex;align-items:center}
.hero-stack img,.hero-stack b{
  width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid var(--white);
  margin-left:-.55rem;flex:none;
}
.hero-stack img:first-child{margin-left:0}
.hero-stack b{
  background:var(--green-500);color:var(--white);
  font-size:.6875rem;font-weight:500;letter-spacing:0;
  display:grid;place-items:center;
}

.hero-animation_grad{
  position:absolute;top:0;bottom:0;width:9rem;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,var(--gray-50),rgba(242,246,245,0));
  left:-2rem;
}
.hero-animation_grad.is--right{left:auto;right:-2rem;transform:scaleX(-1)}

/* ======================================================== THE EXECUTION GAP */
.benefits_header{display:flex;flex-direction:column;gap:var(--s-24);max-width:25rem}
.benefits_grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;place-items:start;width:100%}
.benefits{display:flex;flex-direction:column;gap:var(--s-40);width:100%}
.benefits_chips{
  display:inline-flex;align-items:center;gap:var(--s-10);align-self:flex-start;
  height:var(--s-48);padding-inline:1rem;border-radius:var(--btn-radius);
  background-color:var(--gray-800);color:var(--white);
}
.benefits_chips.is--green{background-color:var(--green-500)}
.benefits_chips-logo{height:1.15rem;width:auto;flex:none}
.benefits_list{display:flex;flex-direction:column;gap:var(--s-24);width:100%;max-width:26rem}
.benefits_item{
  display:flex;align-items:center;gap:var(--s-16);
  padding-bottom:var(--s-20);border-bottom:1px solid var(--gray-200);
}
.benefits_item.is--last{border-bottom:0;padding-bottom:0}
.benefit_marker{
  width:var(--s-32);height:var(--s-32);flex:none;border-radius:var(--btn-radius);
  border:1px solid var(--gray-800);color:var(--gray-800);
  display:grid;place-items:center;
}
.benefit_marker.is--green{border-color:var(--green-500);color:var(--green-500)}
.benefit_marker svg{width:.875rem;height:.875rem}

@media (min-width:1280px){
  .benefits_header{max-width:36rem}
  .benefits_list{max-width:29rem}
  /* three tracks, two lists — the empty first track is the gap on the left */
  .benefits_grid{grid-template-columns:1fr 1fr 1fr}
  .benefits_grid > .benefits:first-child{grid-column:2}
}

/* ==================================================== ANIMATED LINE HEADING */
.animated_title{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.animate-text_opacity{overflow:hidden}
.animate-text_opacity .word{display:inline-block;opacity:.16;transition:opacity .2s linear}

/* =============================================================== TRUSTED BY */
.trusted-container{padding-block:3.75rem}
.trusted-wrapp{display:flex;align-items:center;gap:var(--s-48);height:5.375rem}
.trusted-wrapp > .title--s{flex:none}
.trusted-track{
  flex:1;height:100%;padding-left:3rem;display:flex;align-items:center;overflow:hidden;
  border-left:1px solid var(--gray-300);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.trusted-list{
  display:flex;align-items:center;gap:7.5rem;padding-right:7.5rem;flex:none;
  animation:marquee 34s linear infinite;
}
.trusted-track:hover .trusted-list{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.trusted-logo{height:2rem;width:auto;object-fit:contain;opacity:.68;filter:grayscale(1);transition:opacity .3s}
.trusted-track:hover .trusted-logo{opacity:.9}

/* ========================================================== BENTO / BUILT */
.built_title{display:flex;flex-direction:column;gap:var(--s-16)}
.built-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-20)}
.built-card{
  position:relative;overflow:hidden;
  height:31.25rem;padding:var(--s-32);
  border-radius:var(--s-24);background-color:var(--white);
  display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 100%;
}

.built-card.is--accent-red{background-color:var(--coral-card);color:var(--white)}
.built-card.is--accent-green{background-color:var(--green-500);color:var(--white)}
.built-card.is--wide-accent{background-color:var(--blue-700);color:var(--white)}
.built-card-content{
  z-index:2;position:relative;display:flex;flex-direction:column;gap:var(--s-16);
  width:100%;max-width:30rem;margin-right:auto;
}
.built-card-content{max-width:100%}
.built-card p{opacity:.85}
.built-card.is--accent-red p,.built-card.is--accent-green p,.built-card.is--wide-accent p{opacity:.8}

/* the visual half of each bento card — a swappable image file per card */
.built-visual{
  position:relative;z-index:1;width:100%;flex:1;margin-top:var(--s-24);min-height:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.built-img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}

/* ======================================================== IMPACT (circles) */
.impact-track{position:relative}
.impact-section{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;
  justify-content:space-between;overflow:hidden;
}
.impact-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-64);
  width:100%;max-width:var(--container);margin-inline:auto;height:100%;
}
.impact-section_heading{display:flex;flex-direction:column;gap:var(--s-24);max-width:30rem;flex:none}
.impact-section_heading p{color:var(--gray-600)}
.impact-list{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  width:100%;max-width:38rem;max-height:38rem;margin-inline:auto;flex:1;
}
.impact-item{
  position:relative;overflow:hidden;aspect-ratio:1;width:50%;
  border:1px solid var(--gray-200);border-radius:50%;
  display:grid;place-items:center;
}
.impact-content{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s-8);
  text-align:center;padding-inline:var(--s-32);
}
.impact-content .text--number{color:var(--green-500);transition:color .5s var(--ease)}
.impact-content .text--l{color:var(--gray-600);transition:color .5s var(--ease)}
.impact-bg{
  position:absolute;inset:0;z-index:0;border-radius:50%;
  background-color:var(--green-500);transform:scale(0);
  transition:transform .5s var(--ease);
}
@media (min-width:992px){
  .impact-item:hover .impact-bg{transform:scale(1)}
  .impact-item:hover .text--number{color:var(--white)}
  .impact-item:hover .text--l{color:var(--green-200)}
}
.impact-item-accent{
  position:absolute;z-index:5;left:50%;top:50%;
  width:28.125rem;height:28.125rem;border-radius:50%;
  background-color:var(--green-500);color:var(--white);
  display:grid;place-items:center;text-align:center;
  padding-inline:4rem;transform:translate(-50%,-50%) scale(0);
  box-shadow:0 30px 80px rgba(8,144,108,.28);
}
.impact-item-accent-text{transition:opacity .3s;opacity:0}

/* ============================================================ WINS (venn) */
/* The whole track runs on black; the section above keeps its own light
   background so nothing bleeds through while the body colour crossfades. */
.impact-track{background-color:transparent}
.sales-track{background-color:var(--gray-50)}

/* the track owns its dark background, so the white text is safe at every
   width and never depends on JS having run */
.wins-track{position:relative;background-color:var(--black);color:var(--white)}
/* with the scrubbed backdrop running, the wins track hands its colour over */
.bg-scrub .wins-track,
.bg-scrub .steps-section{background-color:transparent}
/* the intro is white on white until the backdrop darkens, so it fades in on
   the same scroll range rather than on its own reveal trigger */
.bg-scrub .wins-track .steps-section-title{opacity:0}
.wins-track .section_chips{color:var(--gray-400)}
.wins-track .win_title p{color:rgba(255,255,255,.72)}
.wins-track .button.is--ghost{
  background-color:transparent;color:var(--white);border-color:var(--white);
}
.wins-track .button.is--ghost:hover{background-color:var(--white);color:var(--black)}

/* pinned by GSAP rather than position:sticky — body has overflow-x:hidden,
   which turns it into a scroll container and breaks sticky descendants */
.wins-section{
  position:relative;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}

/* wrapper is sized so the two circles overlap by roughly a quarter */
.win-circles-wrapp{
  --win-d:30rem;
  position:relative;width:52rem;height:var(--win-d);
  margin-inline:auto;
}
.win-lines{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.win-circle{
  position:absolute;top:0;width:var(--win-d);height:var(--win-d);
  border-radius:50%;border:1px solid var(--green-500);
  display:grid;place-items:center;color:var(--white);
}
.win-circle.is--left{left:0;z-index:2;padding-right:3rem}
.win-circle.is--right{right:0;z-index:2;padding-left:3rem;border-color:var(--blue-300)}
.win-circle-content{text-align:center;width:15rem}
.win-circle-content .title--m{line-height:1.18}

/* the logo sits in the lens, over the dotted intersection */
.win-lens-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;width:5.5rem;display:block;
}
.win-lens-mark img{width:100%;height:auto}

/* annotations */
.win-tips{position:absolute;inset:0;pointer-events:none;z-index:2}
.win-tip{
  position:absolute;width:21rem;margin:0;
  font-size:var(--f-text-l);line-height:1.5;letter-spacing:var(--ls-2);
}
.win-tips.is--left .win-tip{right:calc(100% - 2rem);text-align:right;color:var(--green-200)}
.win-tips.is--right .win-tip{left:calc(100% - 2rem);text-align:left;color:var(--blue-200)}
.win-tip.t1{top:-2.25rem}
.win-tip.t2{top:11rem}
.win-tip.t3{top:24.25rem}

.win_title{display:flex;flex-direction:column;gap:var(--s-20)}
.steps-btns{display:flex;flex-wrap:wrap;gap:var(--s-12)}
.steps-section-title{display:flex;flex-direction:column;gap:var(--s-40)}

/* ================================================= STEPS (horizontal scroll) */
.steps-wrapp-outer{position:relative}
.steps-section{
  position:sticky;top:0;min-height:100vh;
  padding-block:var(--s-120);
  display:flex;flex-direction:column;justify-content:space-around;gap:var(--s-80);
  overflow:hidden;background-color:var(--green-500);color:var(--white);
}
.steps-section .section_chips{color:var(--green-200)}
.steps-section_heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-40);flex-wrap:wrap}
.steps_title{display:flex;flex-direction:column;gap:var(--s-16);max-width:44rem}
.steps_title p{color:rgba(255,255,255,.78)}
.steps-wrapp{position:relative;width:100%;overflow:hidden}
.step-container{position:relative;width:100%}
.steps-track{
  position:relative;z-index:3;display:flex;align-items:stretch;gap:10rem;width:max-content;
  padding-right:20vw;
}
.step_item{display:flex;flex-direction:column;gap:var(--s-40);flex:none;width:19rem}
.step_icon{
  width:3.5rem;height:3.5rem;border-radius:50%;background:var(--white);
  display:grid;place-items:center;padding:.7rem;
  box-shadow:0 22px 22px rgba(43,77,96,.09),0 5px 12px rgba(43,77,96,.1);
}
.step_icon img{width:100%;height:auto}
.step_content{display:flex;flex-direction:column;gap:var(--s-16)}
.step_content .text--70{font-size:2.75rem}
.step_sub .text--l{color:rgba(255,255,255,.78)}
.step-line{
  position:absolute;left:0;right:0;top:1.75rem;height:1px;
  background:rgba(255,255,255,.24);z-index:1;
}

/* ==================================================== SALES (compounding) */
.sales-track{position:relative}
.sales-section{
  position:sticky;top:0;height:100vh;
  padding-top:var(--s-100);padding-bottom:8.5rem;
  display:flex;flex-direction:column;justify-content:space-around;gap:var(--s-48);
  overflow:hidden;
}
.sales-section_title{display:flex;flex-direction:column;gap:var(--s-16);max-width:52rem}
.sales-section_title p{color:var(--gray-600)}
.sales-cards{width:100%;overflow:hidden}
.sales-cards_track{display:flex;gap:var(--s-20);width:max-content}
.sales-card{
  width:24.375rem;height:15rem;flex:none;padding:var(--s-32);
  border-radius:var(--s-24);background-color:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;
}
.sales-card.is--cta{background-color:var(--blue-700);color:var(--white);width:38.75rem}
.sales-card_btns{display:flex;flex-wrap:wrap;gap:var(--s-12)}
.sales-figure-wrapp{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sales-figure-wheel{
  position:absolute;width:287.5rem;height:287.5rem;
  display:grid;place-items:center;transform:translate(10%,-20%);
}
.sales-figure-line{position:absolute;width:100%;height:0;border-top:1px solid var(--gray-200)}
.sales-figure-line.l2{transform:rotate(30deg)}
.sales-figure-line.l3{transform:rotate(60deg)}
.sales-figure-line.l4{transform:rotate(90deg)}
.sales-figure-line.l5{transform:rotate(120deg)}
.sales-figure-line.l6{transform:rotate(150deg)}

/* ============================================================ TESTIMONIALS */
.testimonials{
  padding-top:var(--s-80);padding-bottom:10rem;
  background-color:var(--blue-700);color:var(--white);overflow:clip;position:relative;
}
/* halftone panel bleeding off the bottom-left of the section */
.testim-section_bg{
  position:absolute;z-index:0;left:-5rem;bottom:-9rem;
  width:44rem;max-width:58%;height:auto;
  pointer-events:none;
}
.testimonials .section_chips{color:var(--blue-200)}
.testim_slider{position:relative;z-index:1;width:70%;margin-left:auto;margin-top:var(--s-60)}
.testim-slider_viewport{overflow:hidden}
.testim-slider_list{display:flex;transition:transform .6s var(--ease)}
.testim-slider_slide{
  flex:0 0 100%;min-width:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-48);
}
.testim-slider_slide blockquote{margin:0}
.testim-slide_content{display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);flex-wrap:wrap}
.testim-slider_person{display:flex;align-items:center;gap:var(--s-16)}
.slide_avatar{width:4.5rem;height:4.5rem;border-radius:50%;flex:none}
.slider_person-name{display:flex;flex-direction:column;gap:var(--s-4)}
.testim-slider_logo{height:3.5rem;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.9}
.testim-nav{display:flex;align-items:center;gap:var(--s-12);margin-top:var(--s-64)}
.testim-arrow{
  width:3.25rem;height:3.25rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;transition:background-color .3s,color .3s,border-color .3s;
}
.testim-arrow:hover{background:#fff;color:var(--blue-700);border-color:#fff}
.testim-arrow svg{width:1rem;height:1rem}
.testim-arrow.is--prev svg{transform:scaleX(-1)}
.testim-pagination{display:flex;align-items:center;gap:var(--s-12);margin-right:auto}
.testim-pagination button{width:var(--s-42);height:2px;border-radius:var(--s-40);background:rgba(255,255,255,.2);transition:background-color .3s}
.testim-pagination button[aria-current="true"]{background:#fff}

/* ==================================================================== FAQ */
.faq_grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64);align-items:start}
.faq_section-title{max-width:25rem;display:flex;flex-direction:column;gap:var(--s-16)}
.faq_section-title p{color:var(--gray-600)}
.faq_accordion-list{width:100%}
.accordion{border-bottom:1px solid var(--gray-200)}
.accordion-control{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);
  padding-block:var(--s-32);cursor:pointer;transition:color .3s;text-align:left;
}
.accordion-control:hover{color:var(--blue-700)}
.accordion-icon{position:relative;width:1.5rem;height:1.5rem;flex:none}
.accordion-icon::before,.accordion-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s;
}
.accordion-icon::before{width:1rem;height:2px}
.accordion-icon::after{width:2px;height:1rem}
.accordion.is--open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.accordion-content{
  max-height:0;opacity:0;overflow:hidden;will-change:max-height;
  transition:max-height .35s ease-out,opacity .35s ease-out,padding-bottom .35s ease-out;
}
.accordion.is--open .accordion-content{opacity:1;padding-bottom:var(--s-40)}
.accordion-content-text{color:var(--gray-800);max-width:48.125rem}

/* ================================================================= FOOTER */
.footer-section{
  color:var(--white);
  background-image:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(248deg,var(--green-900) 16%,var(--green-500));
  position:relative;overflow:hidden;
}
.footer-section::before{
  content:"";position:absolute;inset:0;
  background-image:url(../img/pattern-dots.svg);background-size:240px;
  opacity:.5;pointer-events:none;
}
.footer-top{padding-block:11.25rem;position:relative;z-index:1}
.footer-cta-content{display:flex;flex-direction:column;align-items:center;gap:var(--s-40);text-align:center}
.footer-cta-title{display:flex;flex-direction:column;gap:var(--s-20);max-width:46rem}
.footer-cta-title .text--l{color:rgba(255,255,255,.8)}
.footer-bottom{padding-block:var(--s-60);position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.16)}
.footer_container-grid{display:grid;grid-template-columns:3fr 3fr 3fr;gap:var(--s-40)}
.footer-logo_wrapp{display:flex;flex-direction:column;gap:var(--s-20);align-items:flex-start}
.footer_logo img{height:1.75rem;width:auto}
.footer_column-links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24)}
.footer_links-list{display:flex;flex-direction:column;gap:var(--s-16)}
.text--link{font-size:1rem;letter-spacing:var(--ls-2);transition:opacity .3s}
.text--link:hover{opacity:.7}
.footer_sn-wrapp{display:flex;flex-direction:column;gap:var(--s-24);align-items:flex-end}
.footer_sn-list{display:flex;gap:var(--s-12)}
.footer_sn-link{
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;transition:background-color .3s,color .3s;
}
.footer_sn-link:hover{background:#fff;color:var(--green-500)}
.footer_sn-link svg{width:1.1rem;height:1.1rem}
.footer_meta{display:flex;flex-direction:column;gap:var(--s-6);align-items:flex-end;text-align:right}
.footer_meta .text--s{color:var(--green-200)}

/* ============================================== scroll-reveal base states */
.animate-block_appear{opacity:0;transform:translateY(28px)}
.js-off .animate-block_appear{opacity:1;transform:none}

/* reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .animate-block_appear{opacity:1;transform:none}
  .win-tooltip{opacity:1;transform:none}
  .impact-item-accent-text{opacity:1}
}

/* ============================================================== RESPONSIVE */
@media (max-width:1200px){
  :root{--f-title-xl:3.75rem;--f-title-l:3rem;--f-title-m:2rem}
  .hero_container{grid-template-columns:1.2fr 1fr}
  .hero-note,.hero-sum{width:21rem}
  .hero-note.n1{left:12%}
  .hero-note.n2{left:0}
  .hero-note.n3{left:6%}
  .hero-note.n4{left:14%}
  .hero-sum.s1,.hero-sum.s2{left:8%}
  .hero-note_icon{width:2.875rem;height:2.875rem}
  .hero-note_title{font-size:1.0625rem}
  .win-tooltips.is--left .win-tooltip.t2{left:-52%}
  .win-tooltips.is--right .win-tooltip.t2{right:-52%}
  .win-tooltip{width:13rem}
}

@media (max-width:991px){
  :root{
    --f-title-xl:3.25rem;--f-title-l:2.75rem;--f-title-m:1.9rem;
    --f-title-s:1.5rem;--f-title-xs:1.25rem;
    --f-text-xl:1.125rem;--f-text-l:1rem;
    --s-100:4.5rem;--s-120:5rem;--s-140:6rem;
    --gutter:var(--s-24);
  }
  .navbar{padding-inline:var(--s-24)}
  .nav_links{display:none}
  .nav_actions{display:none}
  .menu-button{display:grid}
  .nav_drawer{display:flex}
  .nav_container{grid-template-columns:1fr auto}

  .hero_container{
    grid-template-columns:1fr;height:auto;min-height:0;max-height:none;
    padding-top:8.625rem;padding-bottom:var(--s-80);gap:var(--s-60);
  }
  .hero_content{max-width:none}
  .hero-visual{max-width:30rem;height:34rem}
  .hero-note,.hero-sum{width:22rem}
  .hero-note.n1{left:14%}
  .hero-note.n2{left:0}
  .hero-note.n3{left:8%}
  .hero-note.n4{left:16%}
  .hero-sum.s1,.hero-sum.s2{left:10%}
  .hero-animation_grad{display:none}

  .benefits_grid{grid-template-columns:1fr 1fr;gap:var(--s-40)}
  .built-container{grid-template-columns:1fr}
  .built-card{height:auto;min-height:26rem}
  .built-card .built-card-content{max-width:100%}
  .built-visual{flex:none;height:15rem;min-height:15rem}

  .impact-section{position:static;height:auto;padding-block:var(--s-80)}
  .impact-inner{flex-direction:column;align-items:flex-start;gap:var(--s-48);height:auto}
  .impact-list{flex-direction:column;max-width:100%;max-height:none;gap:var(--s-20)}
  .impact-item{width:100%;aspect-ratio:auto;border-radius:var(--s-24);padding:var(--s-40) var(--s-24)}
  .impact-content{padding-inline:0}
  .impact-item-accent{
    position:static;width:100%;height:auto;aspect-ratio:auto;transform:none;
    border-radius:var(--s-24);padding:var(--s-40) var(--s-24);
  }
  .impact-item-accent-text{opacity:1}

  /* below 992 the venn unstacks into two plain blocks, no annotation lines */
  .wins-track{padding-bottom:0}
  .wins-section{position:static;height:auto;padding-block:var(--s-80)}
  .win-circles-wrapp{
    display:flex;flex-direction:column;width:100%;height:auto;gap:var(--s-32);
  }
  .win-lines,.win-lens-mark{display:none}
  .win-circle{
    position:static;width:100%;height:auto;aspect-ratio:auto;
    border-radius:var(--s-24);padding:var(--s-40) var(--s-24);
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-24);
  }
  .win-circle.is--left,.win-circle.is--right{padding-inline:var(--s-24)}
  .win-circle-content{width:auto;text-align:left}
  .win-tips{
    position:static;display:flex;flex-direction:column;gap:var(--s-16);
    pointer-events:auto;width:100%;
  }
  .win-tip{position:static;width:100%;opacity:1;transform:none}
  .win-tips.is--left .win-tip,.win-tips.is--right .win-tip{text-align:left}
  /* pair each list with its own circle, since they are siblings in the DOM */
  .win-circle.is--left{order:1}
  .win-tips.is--left{order:2}
  .win-circle.is--right{order:3}
  .win-tips.is--right{order:4}

  .steps-section{position:static;min-height:0;padding-block:var(--s-80)}
  .steps-track{gap:var(--s-48);padding-right:var(--s-24)}
  .step_item{width:15rem;gap:var(--s-24)}
  .steps-wrapp{overflow-x:auto;scrollbar-width:none}
  .steps-wrapp::-webkit-scrollbar{display:none}

  .sales-section{position:static;height:auto;padding-block:var(--s-80)}
  .sales-cards{overflow-x:auto;scrollbar-width:none}
  .sales-cards::-webkit-scrollbar{display:none}
  .sales-card{width:19rem;height:auto;min-height:12rem}
  .sales-card.is--cta{width:22rem}

  .faq_grid{grid-template-columns:1fr;gap:var(--s-40)}
  .footer-top{padding-block:6.875rem}
  .footer_container-grid{grid-template-columns:1fr;gap:var(--s-40)}
  .footer_sn-wrapp{align-items:flex-start}
  .footer_meta{align-items:flex-start;text-align:left}
  .trusted-wrapp{flex-direction:column;align-items:flex-start;height:auto;gap:var(--s-20)}
  .trusted-track{width:100%;height:3rem;padding-left:0;border-left:0}
  .trusted-list{gap:3rem;padding-right:3rem}
  .testim-section_bg{width:26rem;max-width:90%;left:-6rem;bottom:-6rem}
  .testim_slider{width:100%;margin-left:0}
  .testim-nav{margin-top:var(--s-40)}
}

@media (max-width:600px){
  :root{
    --f-title-xl:2.875rem;--f-title-l:2.5rem;--f-title-m:1.75rem;
    --f-title-s:1.375rem;--f-title-xs:1.25rem;
    --f-text-xl:1.125rem;--f-text-l:1rem;--f-text-m:.875rem;--f-text-s:.75rem;
    --f-chips:1rem;
  }
  .section_chips{font-size:var(--s-14);white-space:nowrap}
  .text--number,.text--70{font-size:3.5rem}
  .hero_buttons .button,.steps-btns .button,.sales-card_btns .button,.footer-cta-content .button{width:100%}
  .hero_buttons,.steps-btns,.sales-card_btns{width:100%}
  .built-card{padding:var(--s-24)}
  .animated_title{width:100%;max-width:21rem;margin-inline:auto}
  .benefits_grid{grid-template-columns:1fr;gap:var(--s-40)}
  .benefits_list{max-width:none}
  .hero-visual{height:30rem}
  .hero-note,.hero-sum{width:100%;padding:var(--s-14) var(--s-16);gap:var(--s-12)}
  .hero-note.n1,.hero-note.n2,.hero-note.n3,.hero-note.n4,
  .hero-sum.s1,.hero-sum.s2{left:0}
  .hero-note.n1{top:1%}.hero-note.n2{top:26%}.hero-note.n3{top:51%}.hero-note.n4{top:76%}
  .hero-sum.s1{top:14%}.hero-sum.s2{top:56%}
  .hero-note_icon{width:2.75rem;height:2.75rem;border-radius:var(--s-12)}
  .hero-note_title{font-size:1rem}
  .step_content .text--70{font-size:2.25rem}
}