/* ============================================================================
   HOME PAGE - section-specific layout
   ========================================================================== */

/* ---- HERO ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:clip;
  /* --header-h clears the floating nav island, which now sits over this section */
  padding:calc(var(--header-h) + clamp(1.4rem,3vw,2.4rem)) 0 clamp(4rem,8vw,7rem);
  background:var(--bg-cream);
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.08fr .92fr}
}
.hero-copy .display{margin-bottom:1.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;
  margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);
}
.ht-item{display:flex;align-items:center;gap:.55rem}
.ht-item b{color:var(--ink);font-weight:650}
.ht-div{width:1px;height:22px;background:var(--line-strong)}
@media(max-width:640px){.ht-div{display:none}.hero-trust{gap:.7rem;flex-direction:column;align-items:flex-start}}

.hero-media{position:relative}
.hero-frame{
  position:relative;overflow:hidden;
  border-radius:52% 48% 44% 56% / 46% 44% 56% 54%;
  background:var(--grad-soft);
  box-shadow:0 30px 80px rgba(25,36,81,.18);
  aspect-ratio:1/1;
}
.hero-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-chip{
  position:absolute;z-index:2;
  display:flex;align-items:flex-start;gap:.8rem;
  max-width:264px;padding:.95rem 1.1rem;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(25,36,81,.08);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);
}
.hero-chip b{display:block;font-family:var(--font-display);font-size:1.35rem;line-height:1.1;color:var(--ink);font-weight:600}
.hero-chip span{display:block;font-size:.78rem;line-height:1.4;color:var(--ink-soft);margin-top:.2rem}
.hero-chip--a{left:-8px;bottom:16%}
.hero-chip--b{right:-6px;top:9%;max-width:216px}
@media(max-width:959px){
  .hero-chip--a{left:0;bottom:2%}
  .hero-chip--b{right:0;top:2%}
}
@media(max-width:520px){
  .hero-chip{max-width:190px;padding:.75rem .85rem}
  .hero-chip b{font-size:1.1rem}
  .hero-chip span{font-size:.72rem}
}
.hc-ic{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--purple-tint);color:var(--purple);
}
.hc-ic--blue{background:var(--blue-tint);color:var(--blue-dark)}
.hc-ic svg{width:19px;height:19px}

/* ---- BADGE STRIP --------------------------------------------------------- */
.badge-strip{background:var(--bg-cream);padding-block:clamp(2.5rem,4vw,3.5rem)}
.strip-label{
  text-align:center;font-size:var(--fs-tiny);font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:2rem;
}

/* ---- PAIN GRID ----------------------------------------------------------- */
/* "Sound familiar?" label sits directly above the four issue cards, so the
   headline block above it gets a tighter gap than a normal section head. */
.pain-eyebrow{text-align:center;margin-bottom:1.5rem}
.pain-eyebrow + .pain-grid{margin-top:0}
.section-head + .pain-eyebrow{margin-top:calc(clamp(2.5rem,5vw,4rem) * -0.45)}
.pain-grid .card{padding:1.6rem}
.pain-grid .icon-chip{width:46px;height:46px;border-radius:14px}
.pain-grid .icon-chip svg{width:22px;height:22px}
.pain-grid h3{font-size:1.15rem}
.pain-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.6rem;
  margin-top:2.8rem;text-align:center;
}
.pain-cta p{max-width:46ch}

/* ---- SERVICES ------------------------------------------------------------ */
.svc-grid .card{display:flex;flex-direction:column}
/* The tag row wraps to different depths per card, which left ragged bottoms.
   Pushing the tags and the link to the foot of a stretched card keeps every
   card in a row visually level regardless of how much copy it carries. */
.svc-grid .card>p{flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.svc-tags li{
  font-size:.78rem;font-weight:550;color:var(--ink-soft);
  padding:.32rem .7rem;border-radius:var(--r-pill);
  background:var(--bg-soft);border:1px solid var(--line);
}
.flagship{
  position:relative;overflow:hidden;display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;
  margin-top:1.5rem;padding:clamp(2rem,4vw,3.4rem);
  border-radius:var(--r-xl);background:var(--navy);color:#fff;
  box-shadow:var(--shadow-lift);
  transition:transform var(--t-med),box-shadow var(--t-med);
}
.flagship:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(25,36,81,.14),0 40px 80px rgba(25,36,81,.24)}
@media(min-width:900px){.flagship{grid-template-columns:1.02fr .98fr}}
.flagship::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 110% at 100% 0%,rgba(56,145,254,.34),transparent 58%),
    radial-gradient(55% 90% at 0% 100%,rgba(96,36,149,.5),transparent 60%);
}
/* :not() guard so the decorative blob is never pulled into the grid */
.flagship>*:not(.blob):not(.dot-grid):not(.ring-deco){position:relative;z-index:1}
.flagship h3{color:#fff;font-size:clamp(1.75rem,2.9vw,2.4rem);margin:.9rem 0 .85rem;letter-spacing:-.02em}
.flagship p{color:rgba(255,255,255,.78);max-width:46ch}
.flagship .badge-soft{background:rgba(56,145,254,.18);color:#9CC5FF}
.fl-list{display:grid;gap:.65rem;margin:1.6rem 0 1.9rem}
.fl-list li{
  display:flex;align-items:center;gap:.75rem;font-size:var(--fs-small);
  color:rgba(255,255,255,.85);
  padding:.7rem .9rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
}
.fl-list li b{color:#fff;margin-left:auto;font-variant-numeric:tabular-nums;font-size:1rem}
.fl-list .ck{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;
}
.fl-list .ck svg{width:11px;height:11px}

/* comparison panel */
.fl-viz{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.5vw,1.9rem);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.fv-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.fv-head b{display:block;color:#fff;font-size:.95rem;font-weight:650}
.fv-head span{display:block;font-size:.76rem;color:rgba(255,255,255,.6);margin-top:.15rem}
.fv-saving{text-align:right;flex:none}
.fv-saving b{
  font-family:var(--font-display);font-size:1.55rem;font-weight:600;line-height:1;
  background:linear-gradient(135deg,#7FB8FF,#5FE3A1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fv-row{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:.9rem;margin-bottom:1rem}
.fv-label{font-size:.8rem;color:rgba(255,255,255,.7)}
.fv-bar{height:12px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden}
.fv-bar i{
  display:block;height:100%;width:var(--w);border-radius:inherit;
  background:linear-gradient(90deg,#7C4DBE,#3891FE);
}
.fv-bar--good i{background:linear-gradient(90deg,#3891FE,#5FE3A1)}
@media(prefers-reduced-motion:no-preference){
  .fv-bar i{animation:growbar 1.2s var(--ease) backwards;animation-delay:.2s}
}
@keyframes growbar{from{width:0}}
.fv-val{font-size:.9rem;font-weight:650;color:#fff}
.fv-note{font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.5;margin-top:1.1rem}
@media(max-width:479px){
  .fv-row{grid-template-columns:1fr auto;gap:.5rem}
  .fv-label{grid-column:1/-1}
}

/* ---- BENTO (industries) --------------------------------------------------- */
/* Four cards on a three-column grid left the fourth stranded on a row of its
   own. Four columns resolve it cleanly: the feature fills the left half across
   both rows, two cards sit top-right, and the fourth spans the bottom-right as
   a horizontal card - a deliberate bento rather than a leftover. */
.bento{display:grid;gap:1.5rem}
@media(min-width:768px) and (max-width:959px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-card--lg{grid-column:1 / -1}
  /* Two industries rather than four: the wide card spans the row too, so
     neither breakpoint is left with an empty grid cell. */
  .bento--pair .bento-card--wide{grid-column:1 / -1}
}
@media(min-width:960px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(212px,auto)}
  .bento-card--lg{grid-column:1 / span 2;grid-row:1 / span 2}
  .bento-card--wide{grid-column:3 / span 2;flex-direction:row}
  /* In the two-card variant the feature card is one row tall so it sits
     level with the wide card instead of leaving row 2 half empty. */
  .bento--pair .bento-card--lg{grid-row:auto}
  .bento--pair .bento-card--wide{grid-column:3 / span 2}
  .bento-card--wide img{width:44%;flex:none;min-height:100%}
  .bento-card--wide .bento-body{flex:1;align-self:center}
}
.bento-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med);
}
.bento-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.bento-card img{width:100%;height:100%;object-fit:cover;flex:1;min-height:150px;transition:transform 1.1s var(--ease)}
.bento-card:hover img{transform:scale(1.05)}
.bento-card--lg img{min-height:280px}
.bento-body{padding:1.5rem;display:grid;gap:.5rem;align-content:start}
.bento-card--lg .bento-body{padding:1.9rem}
.bento-card--lg h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.bento-body p{font-size:var(--fs-small)}
.bento-body .btn--ghost{margin-top:.4rem}

/* Two-card variant ---------------------------------------------------------
   The pair should read as a matched set, not a feature card plus an
   afterthought. Both images crop to the same ratio so the two bodies start on
   one line; each body stretches to fill its card and pushes its footer down,
   so both cards land their call to action on the same baseline no matter how
   much copy they carry. */
.bento--pair .bento-card img{aspect-ratio:16/10;height:auto;flex:none;min-height:0}
.bento--pair .bento-body{
  flex:1;align-self:stretch;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  padding:1.9rem;
}
.bento--pair .bento-card--wide h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.bento--pair .btn--ghost{margin-top:auto}
@media(max-width:600px){.bento--pair .bento-body{padding:1.5rem}}
.badge-soft--alt{color:var(--purple);background:var(--purple-tint)}

/* ---- FOUNDER --------------------------------------------------------------- */
.founder{overflow:hidden}
.founder-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){.founder-grid{grid-template-columns:.92fr 1.08fr}}
/* The bio copy has no container rule of its own, so its paragraphs would sit
   flush against the headline and each other. Match .section-head p spacing. */
.founder-copy p{margin-top:1rem}
.founder-media{position:relative}
.fm-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.fm-frame::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 55%,rgba(25,36,81,.28));
}
.fm-frame img{width:100%;aspect-ratio:4/3.1;object-fit:cover;object-position:center 25%}
.fm-badge{
  position:absolute;right:-12px;bottom:-18px;z-index:2;
  background:var(--grad);color:#fff;
  padding:1rem 1.4rem;border-radius:var(--r-md);
  box-shadow:var(--shadow-glow);text-align:center;
}
.fm-badge b{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1}
.fm-badge span{display:block;font-size:.74rem;opacity:.85;margin-top:.25rem;max-width:14ch}
@media(max-width:520px){.fm-badge{right:8px;bottom:-14px;padding:.8rem 1.1rem}}
.cred-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0}
.founder-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  padding:1.6rem 0;margin-bottom:1.8rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media(max-width:479px){.founder-stats{grid-template-columns:1fr;gap:1.4rem}}

/* ---- HARMONY --------------------------------------------------------------- */
.harmony{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.harmony{grid-template-columns:1.15fr .85fr}}
.harmony-list{margin:2rem 0}
.harmony-list li{font-size:var(--fs-small)}
.harmony-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.harmony-card{position:sticky;top:130px}
@media(max-width:899px){.harmony-card{position:static}}
.hc-rows{margin-top:1.4rem;border-top:1px solid var(--line)}
.hc-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);
}
.hc-row span{color:var(--ink-soft)}
.hc-row b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* ---- TESTIMONIALS ---------------------------------------------------------- */
.t-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.2rem;
}
.t-head h2{max-width:20ch}
.t-foot{display:flex;justify-content:center;margin-top:1.4rem}
/* .t-logo is now a square brand-mark chip defined in main.css - the old pill
   override lived here and would stretch it back into a text-shaped pill. */

/* ---- RESOURCES BENTO -------------------------------------------------------- */
.res-bento{display:grid;gap:1.5rem}
@media(min-width:760px){.res-bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){
  .res-bento{grid-template-columns:repeat(3,1fr)}
  .res-card--book{grid-row:span 2}
}
.res-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.res-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.2)}
.res-card img{
  width:100%;max-width:230px;margin:2rem auto .5rem;
  filter:drop-shadow(0 18px 34px rgba(25,36,81,.24));
  transition:transform var(--t-med);
}
.res-card:hover img{transform:translateY(-6px) rotate(-2deg)}
.res-body{padding:1.6rem;display:grid;gap:.55rem;align-content:start}
.res-body p{font-size:var(--fs-small)}
.res-card--book{background:linear-gradient(180deg,var(--purple-tint),#fff 45%)}
.res-card--pod{background:linear-gradient(160deg,var(--blue-tint),#fff 55%)}
.pod-ic{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:var(--purple-tint);color:var(--purple);margin-bottom:.5rem;
  transition:transform .4s var(--ease-spring),background-color var(--t-med),color var(--t-med);
}
.res-card:hover .pod-ic{transform:translateY(-3px) scale(1.05);background:var(--grad);color:#fff}
.pod-ic--blue{background:var(--blue-tint);color:var(--blue-dark)}
.pod-ic svg{width:23px;height:23px}

/* ---- STEPS -------------------------------------------------------------------- */
.steps{display:grid;gap:1.5rem;counter-reset:step}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:2rem 1.8rem;border-radius:var(--r-lg);background:var(--bg-soft);border:1px solid var(--line)}
.step-n{
  display:block;font-family:var(--font-display);font-size:2.6rem;font-weight:600;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.9rem;
}
.step h3{margin-bottom:.5rem}
.step p{font-size:var(--fs-small)}
@media(min-width:820px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:2.6rem;right:-1.1rem;width:.7rem;height:.7rem;
    border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);
    transform:rotate(45deg);
  }
}