/* ==========================================================================
   FORELAD · SECTIONS — fanout, why, how, testimonial, faq, cta
   ========================================================================== */

/* ============================ FANOUT ==================================== */
/* The hero rail resolves here: on desktop the loan cards begin as a fanned
   deck and spread into a grid as you scroll (JS-driven, buildoptimus-style).
   Without JS / on mobile they are simply a clean responsive grid. */
.fanout{ position:relative; background:var(--bg); }
.fanout__head{ max-width:var(--container); margin-inline:auto; padding:var(--section-y) var(--gutter) 0; }
.fanout__head h2{ max-width:14ch; }
.fanout__head .lead{ margin-top:18px; max-width:46ch; }

/* default (no-JS / desktop fallback): a bento grid that mirrors the JS layout */
.fanout__grid{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(32px,4vw,52px) var(--gutter) var(--section-y);
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(158px,1fr); gap:16px;
}
.fanout__grid .fcard:nth-child(1){ grid-column:span 2; grid-row:span 2; }  /* A feature */
.fanout__grid .fcard:nth-child(4){ grid-column:span 2; }                   /* D wide */
.fanout__grid .fcard:nth-child(7){ grid-column:span 2; }                   /* G wide */
.fcard{
  position:relative; display:block; border-radius:var(--r-xl); overflow:hidden;
  min-height:clamp(230px,26vw,300px); box-shadow:var(--sh-card); background:var(--grad-card);
  color:#fff; text-decoration:none;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); color:#fff; }
.fcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fcard .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,32,.05) 30%,rgba(20,10,32,.82)); }
.fcard .body{ position:absolute; inset:auto 0 0 0; padding:22px 22px 24px; }
.fcard .tag{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); padding:5px 12px; border-radius:var(--r-pill); margin-bottom:12px; }
.fcard .name{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; line-height:1.12; }
.fcard .desc{ margin-top:7px; font-size:var(--fs-sm); line-height:1.5; color:rgba(255,255,255,.82); max-width:34ch; }
.fcard .go{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-xs); font-weight:600; color:#fff; }
.fcard .go .arr{ transition:transform var(--t-fast) var(--ease); }
.fcard:hover .go .arr{ transform:translateX(4px); }

/* JS-animated mode: the grid becomes a sticky stage; cards morph deck -> grid */
.fanout.is-animated .fanout__grid{ display:block; padding:0; position:sticky; top:0; height:100vh; overflow:hidden; }
.fanout.is-animated .fcard{ position:absolute; top:0; left:0; margin:0; min-height:0; will-change:transform,width,height; box-shadow:var(--sh-lg); }
.fanout.is-animated .fanout__head{ position:relative; z-index:2; }
/* small bento tiles hide the long copy so they stay clean */
.fanout.is-animated .fcard[data-sm] .desc, .fanout.is-animated .fcard[data-sm] .go{ display:none; }
.fanout.is-animated .fcard:nth-child(1) .name{ font-size:1.7rem; }

@media (max-width:920px){
  .fanout__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(150px,1fr); }
  .fanout__grid .fcard:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .fanout__grid .fcard:nth-child(4), .fanout__grid .fcard:nth-child(7){ grid-column:span 2; }
  .fcard[data-sm] .desc, .fcard[data-sm] .go{ display:none; }
}
@media (max-width:520px){
  .fanout__grid{ grid-template-columns:1fr; }
  .fanout__grid .fcard:nth-child(1n){ grid-column:span 1; }
}

/* ============================ WHY (split) ============================== */
.why{ position:relative; overflow:hidden; background:var(--bg-subtle); }
.why__grid{ max-width:var(--container); margin-inline:auto; padding:var(--section-y) var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:center; }
.why__list{ display:flex; flex-direction:column; gap:8px; }
.why__item{ display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--border); }
.why__item:last-child{ border-bottom:none; }
.why__ico{ flex-shrink:0; width:52px; height:52px; border-radius:15px; background:var(--white); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--violet-deep); box-shadow:var(--sh-xs); }
.why__ico svg{ width:23px; height:23px; }
.why__item h3{ font-size:1.15rem; font-weight:600; color:var(--aubergine); }
.why__item p{ margin-top:5px; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted); }
/* the visual proof card (product-ui, no invented numbers) */
.why__proof{ position:relative; }
.proofcard{ background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--sh-md); padding:26px; }
.proofcard__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.proofcard__title{ font-weight:600; color:var(--aubergine); }
.badge-teal{ font-size:var(--fs-xs); font-weight:600; color:var(--teal); background:var(--teal-tint); padding:5px 13px; border-radius:var(--r-pill); }
.proofcard__lines{ display:flex; flex-direction:column; gap:13px; }
.pline{ display:flex; justify-content:space-between; font-size:var(--fs-sm); }
.pline span:first-child{ color:var(--text-muted); }
.pline span:last-child{ font-weight:600; color:var(--aubergine); }
.pline .ok{ color:var(--teal); }
.proofcard__note{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-faint); }
@media (max-width:920px){ .why__grid{ grid-template-columns:1fr; gap:40px; } .why__proof{ order:-1; } }

/* ============================ HOW IT WORKS ============================= */
/* a connecting rail runs through the step icons and fills as you scroll,
   activating each step in turn (JS sets --p 0..1 on .how__grid). */
.how__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.how__rail{ position:absolute; top:34px; left:12.5%; right:12.5%; height:2px; background:var(--border); border-radius:2px; overflow:hidden; z-index:0; }
.how__rail-fill{ display:block; height:100%; width:calc(var(--p,0) * 100%); background:linear-gradient(90deg,var(--violet),var(--violet-deep)); transition:width .12s linear; }
.step{ position:relative; z-index:1; text-align:center; }
.step__ico{ position:relative; width:68px; height:68px; border-radius:20px; background:#fff; border:1.5px solid var(--border); box-shadow:var(--sh-xs); display:flex; align-items:center; justify-content:center; color:var(--violet-deep); margin:0 auto 20px; transition:background var(--t-med) var(--ease), color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease); }
.step__ico svg{ width:26px; height:26px; }
.step__n{ position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:var(--ink-100); color:var(--text-muted); font-family:var(--font-mono); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; transition:background var(--t-med), color var(--t-med); }
.step.is-active .step__ico{ background:var(--violet); border-color:var(--violet); color:#fff; transform:translateY(-4px); }
.step.is-active .step__n{ background:var(--aubergine); color:#fff; }
.step h3{ font-size:1.15rem; font-weight:600; }
.step p{ margin-top:8px; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted); max-width:24ch; margin-inline:auto; }
@media (max-width:920px){
  .how__grid{ grid-template-columns:1fr; gap:0; }
  .how__rail{ top:44px; bottom:44px; left:33px; right:auto; width:2px; height:auto; }
  .how__rail-fill{ width:100%; height:calc(var(--p,0) * 100%); }
  .step{ display:grid; grid-template-columns:68px 1fr; column-gap:20px; row-gap:4px; padding-bottom:34px; text-align:left; }
  .step__ico{ margin:0; grid-column:1; grid-row:1 / span 2; align-self:start; }
  .step h3{ grid-column:2; grid-row:1; align-self:center; }
  .step p{ grid-column:2; grid-row:2; margin:0; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .how__rail-fill{ width:100%; height:100%; }
  .step .step__ico{ background:var(--violet); border-color:var(--violet); color:#fff; }
  .step .step__n{ background:var(--aubergine); color:#fff; }
}

/* ============================ TESTIMONIALS =========================== */
.quote{ position:relative; overflow:hidden; background:var(--bg-tint); }
.quote__inner{ max-width:860px; margin-inline:auto; padding:var(--section-y) var(--gutter) clamp(28px,4vw,44px); text-align:center; position:relative; z-index:1; }
.quote__lead{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.32; letter-spacing:-.02em; color:var(--aubergine); margin-top:14px; }
.tgrid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:var(--section-y); }
.tcard{ background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; box-shadow:var(--sh-xs); display:flex; flex-direction:column; }
.tcard p{ font-size:var(--fs-sm); line-height:1.7; color:var(--text-body); }
.tcard figcaption{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.tcard__av{ flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--grad-band); color:#fff; font-size:var(--fs-xs); font-weight:600; display:flex; align-items:center; justify-content:center; letter-spacing:.02em; }
.tcard figcaption b{ display:block; color:var(--aubergine); font-size:var(--fs-sm); font-weight:600; }
.tcard figcaption span span{ font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:820px){ .tgrid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ============================ FAQ ===================================== */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:24px 4px; font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--aubergine); }
.faq__q .ico{ flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--violet); transition:transform var(--t-med) var(--ease), background var(--t-fast), color var(--t-fast); }
.faq__item[data-open="true"] .faq__q .ico{ transform:rotate(45deg); background:var(--violet); color:#fff; border-color:var(--violet); }
.faq__a{ overflow:hidden; height:0; transition:height var(--t-med) var(--ease); }
.faq__a-in{ padding:0 4px 24px; font-size:var(--fs-sm); line-height:1.7; color:var(--text-muted); max-width:64ch; }

/* ============================ CTA BAND (dark) ========================= */
.cta{ position:relative; overflow:hidden; }
.cta__inner{ max-width:var(--container); margin-inline:auto; padding:0 var(--gutter) var(--section-y); }
.cta__band{ position:relative; overflow:hidden; background:var(--grad-band); border-radius:var(--r-3xl); padding:clamp(40px,6vw,80px); }
.cta__band .deco{ z-index:0; }
.cta__band .ring{ border-color:rgba(255,255,255,.14); }
.cta__band .ring.teal{ border-color:rgba(95,194,186,.28); }
.cta__content{ position:relative; z-index:1; max-width:620px; }
.cta__content h2{ color:#fff; }
.cta__content h2 em{ font-style:normal; color:var(--ink-300); }
.cta__content .lead{ color:rgba(255,255,255,.82); margin:18px 0 32px; }
.cta__actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* ============================ FANOUT ROW MORPH + CAROUSEL ============== */
.fanout__stage{ position:relative; max-width:var(--container); margin-inline:auto; padding:var(--section-y) var(--gutter); }
.fanout__stage .fanout__head{ padding:0; margin:0; }

.fanout.is-animated{ overflow-x:clip; overflow-y:visible; }
.fanout.is-animated .fanout__stage{ position:relative; max-width:none; margin:0; padding:0; overflow:visible; }
.fanout.is-animated .fanout__head{ position:absolute; left:var(--fanout-x); top:var(--fanout-head-y); width:var(--fanout-text-w); max-width:none; padding:0; margin:0; z-index:9; }
.fanout.is-animated .fanout__head h2{ max-width:12ch; }
.fanout.is-animated .fanout__head .lead{ max-width:39ch; }
.fanout.is-animated .fanout__grid{ position:static; display:block; max-width:none; height:auto; margin:0; padding:0; overflow:visible; }
.fanout.is-animated .fcard{ position:absolute; top:0; left:0; min-height:0; margin:0; transform-origin:top left; will-change:transform,width,height; box-shadow:var(--sh-lg); }
.fanout.is-animated .fcard .body{ opacity:var(--label-o,0); transition:opacity .18s linear; }
.fanout.is-animated .fcard:not(:first-child) .desc,
.fanout.is-animated .fcard:not(:first-child) .go{ display:none; }
.fanout.is-animated .fcard:nth-child(1) .name{ font-size:clamp(1.25rem,1.8vw,1.55rem); }
.fanout.is-animated .fcard:nth-child(1) .desc{ max-width:30ch; }
.fanout.is-animated .fcard:not(:first-child) .name{ font-size:clamp(.98rem,1.26vw,1.16rem); }
.fanout.is-animated .fcard:not(:first-child) .body{ padding:15px; }
.fanout.is-animated .fcard:not(:first-child) .tag{ font-size:10px; margin-bottom:8px; }

.tcarousel{ position:relative; z-index:1; padding-bottom:var(--section-y); --slide-gap:20px; --slide-w:calc((100% - (var(--slide-gap) * 2)) / 3); }
.tcarousel__viewport{ overflow:hidden; }
.tcarousel__track{ display:flex; gap:var(--slide-gap); transition:transform var(--t-med) var(--ease); will-change:transform; }
.tcarousel .tcard{ flex:0 0 var(--slide-w); min-height:100%; }
.tcarousel__controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
.tcarousel__btn{ width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); color:var(--aubergine); box-shadow:var(--sh-xs); font-size:18px; transition:transform var(--t-fast) var(--ease), border-color var(--t-fast), color var(--t-fast); }
.tcarousel__btn:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--violet); color:var(--violet); }
.tcarousel__btn:disabled{ opacity:.42; cursor:not-allowed; }
.tcarousel__dots{ display:flex; align-items:center; gap:8px; }
.tcarousel__dot{ width:8px; height:8px; border-radius:999px; background:var(--ink-200); transition:width var(--t-fast) var(--ease), background var(--t-fast); }
.tcarousel__dot[aria-current="true"]{ width:26px; background:var(--violet); }

@media (max-width:979px){
  .tcarousel{ --slide-w:calc((100% - var(--slide-gap)) / 2); }
}
@media (max-width:679px){
  .tcarousel{ --slide-w:100%; }
}
@media (max-width:920px){
  .fanout__stage{ padding:var(--section-y) var(--gutter); }
}
@media (prefers-reduced-motion: reduce){
  .tcarousel__track{ transition:none; }
}

/* fanout readability overrides: caption cards, not paragraph-heavy posters */
.fcard .body > span{ display:block; }
.fcard .tag{ display:inline-flex; width:max-content; max-width:100%; }
.fcard .name{ display:block; }
.fcard .desc{ display:block; }
.fcard .go{ display:inline-flex; }

.fanout.is-animated .fcard .veil{
  background:linear-gradient(180deg,rgba(20,10,32,0) 30%,rgba(20,10,32,.45) 66%,rgba(20,10,32,.86));
}
.fanout.is-animated .fcard .body{
  inset:auto 0 0 0;
  width:auto;
  padding:18px 20px 20px;
  opacity:var(--label-o,0);
  transition:opacity .18s linear;
}
.fanout.is-animated .fcard .tag{
  font-size:9px;
  letter-spacing:.075em;
  margin-bottom:7px;
  padding:4px 9px;
  background:rgba(255,255,255,.16);
}
.fanout.is-animated .fcard .name{
  font-size:clamp(1rem,1.2vw,1.18rem);
  line-height:1.12;
  text-wrap:balance;
}
.fanout.is-animated .fcard:first-child .name{ font-size:clamp(1.16rem,1.55vw,1.42rem); }
.fanout.is-animated .fcard .desc,
.fanout.is-animated .fcard .go{ display:none; }

@media (max-width:920px){
  .fcard .veil{ background:linear-gradient(180deg,rgba(20,10,32,0) 32%,rgba(20,10,32,.5) 66%,rgba(20,10,32,.88)); }
  .fcard .body{ inset:auto 0 0 0; padding:16px 18px 18px; }
  .fcard .tag{ font-size:9px; margin-bottom:8px; }
  .fcard .name{ font-size:1.08rem; text-wrap:balance; }
  .fcard .body > .desc,
  .fcard .body > .go{ display:none; }
}