/* CSS changed? Bump ?v=N on the matching <link> in index.html — these files are cached independently of the HTML. */

/* ============================================================
   home.css — homepage-only sections
   Loaded by: index.html
   Depends on: base.css, layout.css, components.css
   ============================================================ */

/* ---------- HERO ---------- */
/* ---------- HERO ---------- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:130px 28px 64px;
  background:
    radial-gradient(ellipse 900px 500px at 82% 8%, rgba(var(--accent-red-rgb), 0.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at 5% 95%, rgba(60,80,180,0.12), transparent 60%),
    var(--ink);
}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%;}
.hero h1{
  font-size:clamp(2.8rem,7.2vw,6.4rem);
  font-weight:700;
  letter-spacing:-0.035em;
  max-width:15ch;
  margin-bottom:48px;
}
.hero h1 em{font-style:normal;color:var(--red);}
.hero-sub{
  font-size:1.25rem;
  color:#d2d6e6;
  max-width:46ch;
  line-height:1.6;
  margin-bottom:40px;
}
@media (max-width:700px){
  .hero{padding:112px 24px 52px;}
  .hero h1{font-size:clamp(2.2rem,9vw,3.2rem);}
  .hero-sub{font-size:1rem;}
}

/* ---------- REFRAME ---------- */
/* ---------- REFRAME (redesigned: full-width head + 3-col body) ---------- */
.reframe-head{max-width:900px;margin-bottom:48px;}
.word-anim{
  display:inline-block;opacity:0;transform:translateX(-22px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reframe-head.in .word-anim{opacity:1;transform:translateX(0);}
.reframe-head h2{font-size:clamp(2rem,3.6vw,3rem);max-width:36ch;}
.reframe-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.col-anim{transition-duration:1.1s;}
@media (max-width:850px){.reframe-cols{grid-template-columns:1fr;gap:28px;}}
.reframe-cols .body-lg{font-size:1.05rem;}
.reframe-num{
  font-family:var(--font-display);font-weight:700;
  color:var(--navy);font-size:0.85rem;letter-spacing:0.08em;
  margin-bottom:10px;display:block;
}

/* ---------- SPEED (dark) ---------- */
/* the grid must sit above the section's .has-glow radial */
.speed-layer{position:relative;z-index:2;}

/* ---------- BUILD PIPELINE ---------- */
/* ---------- BUILD PIPELINE (single-column accordion) ---------- */
.pipeline-intro{font-size:1.1rem;line-height:1.65;color:var(--text-muted-light);max-width:60ch;margin:24px 0 56px;}

.pipeline-acc{border-top:1px solid var(--line-dark);}
.pipeline-acc-item{border-bottom:1px solid var(--line-dark);padding:26px 4px;cursor:pointer;}
.pipeline-acc-head{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.pipeline-acc-title-row{display:flex;align-items:baseline;gap:16px;}
.pipeline-acc-num{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--red-2);flex-shrink:0;}
.pipeline-acc-title{
  font-family:var(--font-display);font-weight:600;font-size:1.2rem;
  color:var(--ink);transition:color .3s ease;
}
.pipeline-acc-item.active .pipeline-acc-title,
.pipeline-acc-item:hover .pipeline-acc-title{color:var(--logo-red);}
.pipeline-acc-toggle{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line-dark);color:var(--red-2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pipeline-acc-item.active .pipeline-acc-toggle,
.pipeline-acc-item:hover .pipeline-acc-toggle{transform:rotate(45deg);background:var(--logo-red);color:#fff;border-color:var(--logo-red);}

.pipeline-acc-body{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease-spring), opacity .4s ease, margin-top .5s var(--ease-spring);
  margin-top:0;
}
.pipeline-acc-item.active .pipeline-acc-body,
.pipeline-acc-item:hover .pipeline-acc-body{max-height:200px;opacity:1;margin-top:16px;}
.pipeline-acc-body p{color:var(--text-muted-light);font-size:0.98rem;line-height:1.6;max-width:68ch;}
@media (max-width:700px){
  .pipeline-acc-title{font-size:1.05rem;}
}
@media (max-width:700px){
  .pipeline-intro{font-size:0.95rem;line-height:1.55;margin:16px 0 36px;}
}

/* ---------- BENEFITS MASONRY ---------- */
/* ---------- WHAT YOU ACTUALLY GET (light) ---------- */
.benefits-masonry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}
.masonry-col{display:flex;flex-direction:column;gap:28px;}
.masonry-col-offset{margin-top:0;}
@media (max-width:900px){
  .benefits-masonry{grid-template-columns:1fr;}
  .masonry-col-offset{margin-top:0;}
}
.ownership-callout{
  background:linear-gradient(120deg, var(--navy) 0%, var(--logo-red) 100%);
  color:var(--white);
  padding:34px 38px;border-radius:8px;
  font-size:1.15rem;font-family:var(--font-display);font-weight:500;
  max-width:none;
}

/* ---------- SCOPE / WHERE THIS SHOWS UP ---------- */
/* ---------- WHERE THIS SHOWS UP (tab row + shared panel) ---------- */
.scope-tab-row{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 28px;}
.scope-progress{display:none;}
.scope-tab{
  padding:11px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:transparent;color:var(--text-muted-dark);
  font-family:var(--font-display);font-weight:600;font-size:0.9rem;
  cursor:pointer;transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.scope-tab:hover{border-color:var(--logo-red);}
.scope-tab.active{background:var(--logo-red);border-color:var(--logo-red);color:#fff;}

.scope-panel-wrap{
  position:relative;min-height:230px;
  /* every panel shares one grid cell, so the box grows to fit the tallest one instead
     of clipping the longer copy at narrow desktop widths */
  display:grid;
  border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}
.scope-panel{
  grid-area:1 / 1;padding:36px 38px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  opacity:0;transform:translateX(16px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.scope-panel.active{opacity:1;transform:translateX(0);pointer-events:auto;}
.scope-panel-tag{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:#ffffff;margin-bottom:16px;}
.scope-panel ul{list-style:none;display:grid;gap:11px;}
.scope-panel li{color:#aab0c6;font-size:0.95rem;line-height:1.5;padding-left:22px;position:relative;max-width:60ch;}
.scope-panel li::before{content:'—';position:absolute;left:0;color:var(--logo-red);}
.scope-panel-outcome{
  border-left:1px solid var(--line);padding-left:40px;
  font-family:var(--font-display);font-weight:500;
  font-size:1.15rem;line-height:1.55;color:#dfe2ee;
}
@media (max-width:800px){
  .scope-tab-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    touch-action:pan-x;
    overscroll-behavior:contain;
  }
  .scope-tab-row::-webkit-scrollbar{display:none;}
  .scope-tab{flex-shrink:0;white-space:nowrap;}
  .scope-progress{display:flex;gap:6px;margin:22px 0 16px;}
  .scope-progress-seg{
    flex:1;height:3px;border-radius:2px;
    background:rgba(255,255,255,0.15);
    cursor:pointer;
    transition:background .3s ease;
  }
  .scope-progress-seg.filled{background:var(--logo-red);}
  .scope-panel-wrap{
    /* --scope-peek: space kept free on each side so the neighbouring cards peek in */
    --scope-peek:11%;
    --scope-gap:12px;
    min-height:0;
    display:flex;
    gap:var(--scope-gap);
    padding:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border:none;
    /* the wrap is an overflow container, so a radius here would round-clip the
       peeking cards at the left and right edges */
    border-radius:0;
    background:none;
  }
  .scope-panel-wrap::-webkit-scrollbar{display:none;}
  /* leading/trailing spacers let the first and last card sit centred too */
  .scope-panel-wrap::before,
  .scope-panel-wrap::after{
    content:'';
    flex:0 0 calc(var(--scope-peek) - var(--scope-gap));
  }
  .scope-panel{
    position:relative;
    flex:0 0 calc(100% - (2 * var(--scope-peek)));
    scroll-snap-align:center;
    grid-template-columns:1fr;gap:22px;padding:26px 22px;
    opacity:1;transform:none;pointer-events:auto;
    display:grid;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,0.03);
  }
  .scope-panel-outcome{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px;font-size:1rem;}
  .scope-nav{display:flex;justify-content:center;gap:16px;margin-top:20px;}
  .scope-nav-btn{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line);background:transparent;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.15rem;
    cursor:pointer;transition:background .25s ease, border-color .25s ease;
  }
  .scope-nav-btn:hover{border-color:var(--logo-red);background:rgba(var(--accent-red-rgb), 0.12);}
}
@media (min-width:801px){.scope-nav{display:none;}}
.slim-close{color:var(--steel);font-size:0.95rem;margin-top:26px;}

/* ---------- CAPABILITY HEAD + TILE GRID ---------- */
.cap-head{max-width:760px;margin-bottom:48px;}
.cap-headline-2line{
  font-weight:700;line-height:1.2;
  font-size:clamp(1.7rem,3.8vw,3.2rem);
  color:var(--navy);
}
.cap-headline-grad{
  display:inline-block;white-space:nowrap;
  color:var(--logo-red);
}
@media (max-width:700px){
  .cap-headline-2line{font-size:clamp(1.6rem,6vw,2.1rem);}
  .cap-headline-grad{white-space:normal;}
}

.cap-tag{
  font-family:var(--font-display);font-size:0.98rem;font-weight:700;
  background:linear-gradient(100deg, var(--logo-red) 0%, #ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.cap-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:900px){.cap-tiles{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cap-tiles{grid-template-columns:1fr;}}
@media (max-width:700px){
  .cap-head{margin-bottom:32px;}
}

/* ---------- GLOBAL REACH / INDUSTRY ---------- */
/* ---------- shared two-col stat layout (used by Global Reach) ---------- */

.industry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;max-width:70ch;}
@media (max-width:600px){.industry-grid{grid-template-columns:1fr;}}
.industry-item{color:var(--text-muted-dark);font-size:0.98rem;display:flex;align-items:baseline;gap:10px;}
.industry-mark{color:var(--logo-red);font-weight:700;flex-shrink:0;}

/* ---------- PROOF / MARQUEE ---------- */
/* ---------- PROOF / MARQUEE (dark) ---------- */
.proof-split-row{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;}
.proof-header-text{max-width:520px;}
.trust-panel{position:relative;align-self:stretch;}
.proof-banner-full{position:relative;z-index:1;border-radius:var(--radius-sm);overflow:hidden;width:100%;margin-top:50px;}
.proof-banner-full picture{display:block;}
.proof-banner-full img{width:100%;height:auto;display:block;aspect-ratio:4/1;}
/* Bottom-anchored so the badge lines up with the foot of the heading block; anchoring it
   to the top left a tall void between the badge and the review slider */
.trust-panel-sticker{
  position:absolute;bottom:0;right:16px;z-index:2;
  transition:transform .25s ease;
}
/* Card chrome lands only once Clutch's iframe is in, so a blocked widget leaves no empty box */
.trust-panel-sticker:has(iframe){
  background:#fff;border:1px solid #e2e2e2;border-radius:10px;padding:10px 14px;
  filter:drop-shadow(0 10px 20px rgba(13,21,48,0.18));
}
.trust-panel-sticker:hover{transform:scale(1.1);}
/* Type-2 widget clips its own content below 183px, so width can't shrink it; zoom is the lever */
.clutch-widget{width:190px;}
.clutch-widget iframe{width:100%!important;display:block;}
@media (max-width:800px){
  .proof-split-row{grid-template-columns:1fr;gap:24px;}
  .proof-banner-full{margin-top:28px;}
  /* In flow here: the panel takes on the badge's height so it can't crowd the review
     slider, and the card lines up with the heading instead of sitting 12px inside it */
  .trust-panel-sticker{position:static;width:fit-content;}
  /* Scales the card and its rendering together while the iframe keeps its 190px inner
     layout, so nothing clips. 0.85 is a floor: Clutch's own tap targets are already 23px */
  .clutch-widget{zoom:.85;}
}
@media (max-width:600px){.proof-banner-full{max-width:480px;margin-left:auto;margin-right:auto;}.proof-banner-full img{aspect-ratio:1/1;}}
.marquee-track{display:flex;gap:24px;width:max-content;transition:transform var(--review-slide,1s) cubic-bezier(.65,0,.35,1);}
.marquee-outer{
  --fade:max(var(--wrap-pad),calc((100% - var(--wrap-max)) / 2 + var(--wrap-pad)));
  overflow:hidden;margin:60px auto 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
.review-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:18px;}
.review-dots{
  grid-column:2;justify-self:center;position:relative;
  height:22px;overflow:hidden;
}
.review-dots-track{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;gap:var(--dot-gap,10px);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.review-dot{
  position:relative;flex:0 0 auto;overflow:hidden;
  width:var(--dot,8px);height:var(--dot,8px);padding:0;border:0;
  border-radius:999px;background:rgba(13,21,48,0.20);cursor:pointer;
  transition:width .45s cubic-bezier(.4,0,.2,1),transform .35s ease,opacity .35s ease,background .3s ease;
}
.review-dot:hover{background:rgba(13,21,48,0.40);}
.review-dot:focus-visible{outline:2px solid var(--logo-red);outline-offset:4px;}
.review-dot.is-active{width:var(--dot-active,26px);background:rgba(13,21,48,0.16);}
.review-dot.is-edge{transform:scale(.55);opacity:.45;}
.review-dot.is-out{transform:scale(.2);opacity:0;pointer-events:none;}
.review-dot-fill{position:absolute;inset:0;width:0;border-radius:inherit;background:var(--logo-red);}
.review-dot.is-active .review-dot-fill{animation:reviewDotFill var(--review-dwell,3000ms) linear both;}
.review-dots.is-paused .review-dot.is-active .review-dot-fill{animation-play-state:paused;}
@keyframes reviewDotFill{from{width:0;}to{width:100%;}}
.review-play{
  grid-column:3;justify-self:end;margin-right:12px;
  width:24px;height:24px;border-radius:50%;border:0;padding:0;
  background:rgba(13,21,48,0.07);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s ease,color .25s ease;
}
.review-play:hover{background:rgba(233,46,51,0.12);color:var(--logo-red);}
.review-play:focus-visible{outline:2px solid var(--logo-red);outline-offset:3px;}
.review-play svg{width:8px;height:8px;fill:currentColor;display:block;}
.review-play .icon-play{display:none;transform:translateX(0.5px);}
.review-play[data-paused="true"] .icon-play{display:block;}
.review-play[data-paused="true"] .icon-pause{display:none;}
@media (max-width:640px){
  .review-controls{gap:8px;margin-top:14px;}
}
.marquee-outer{overflow:hidden;margin:60px auto 0;}
@media (max-width:600px){
  .marquee-outer{--card-peek:10vw;--card-gap:12px;}
  .marquee-track{gap:var(--card-gap);}
}