/* ==============================================================
   FundEx Loans LLC

   Brand palette per spec. Three values are derived because the
   spec does not cover them, and are marked DERIVED below.

   Contrast note: Growth Teal is 2.07:1 on white, so it cannot
   carry links or text on light grounds. It is used for links,
   accents and active states on navy only (7.58:1 on Deep Navy).
   Signal Blue takes that role on white (6.30:1).
   ============================================================== */

:root{
  /* --- Brand spec ------------------------------------------- */
  --navy:#0f3160;        /* Corporate Navy - wordmark, body, primary UI */
  --navy-deep:#0a2440;   /* Deep Navy - symbol shading, dark panels, footers */
  --signal:#1e6592;      /* Signal Blue - secondary fills, links on light */
  --growth:#4fc99a;      /* Growth Teal - accent, links + active on dark */
  --node:#a0ece8;        /* Node Cyan - highlights and glow only, never a fill */
  --gray:#9c9c9c;        /* Utility Grey - captions, disabled states */

  /* --- DERIVED (not in spec) -------------------------------- */
  --growth-dark:#3bb083; /* Growth Teal hover state */
  --ink-soft:#55677e;    /* Secondary text on light. Utility Grey is 2.75:1
                            on white, too pale for body copy. 5.1:1. */
  --paper:#ffffff;
  --paper-alt:#f1f4f8;   /* Section alternation, shifted blue under Navy */
  --paper-warm:#e8eef5;
  --line:#d5dee9;
  --line-strong:#b0becf;
  --warn:#a8501e;        /* Placeholder flags only. Deliberately off-palette. */

  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --wrap:1180px;
  --gut:20px;
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  color:var(--navy);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--navy)}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
  color:var(--navy);
}

p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}

:focus-visible{
  outline:3px solid var(--growth);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;
}
.skip:focus{left:0}

.wrap{
  width:100%;max-width:var(--wrap);
  margin:0 auto;padding:0 var(--gut);
}

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:500;
}

/* ---------- Masthead ---------------------------------------- */

.masthead{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}

.masthead-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:104px;flex-wrap:wrap;
}

.brand{display:block;flex:0 0 auto;line-height:0;padding:20px 20px 20px 0}
.brand img{width:200px;height:auto;display:block}

.navtoggle{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:9px 13px;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy);
}
.navtoggle-bars{
  width:17px;height:2px;background:var(--navy);position:relative;display:block;
}
.navtoggle-bars::before,.navtoggle-bars::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--navy);
}
.navtoggle-bars::before{top:-5px}
.navtoggle-bars::after{top:5px}

.nav{display:none;width:100%;padding-bottom:14px}
.nav.is-open{display:block}

.nav-list{list-style:none;margin:0;padding:0}
.nav-item{border-top:1px solid var(--line)}

.nav-link{
  display:block;width:100%;text-align:left;
  padding:13px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:1rem;font-weight:600;
  color:var(--navy);text-decoration:none;
}

.nav-sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chev{
  width:8px;height:8px;border-right:2px solid var(--signal);
  border-bottom:2px solid var(--signal);transform:rotate(45deg);
  transition:transform .18s ease;
}
.nav-sub-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}

.subnav{display:none;padding:0 0 12px}
.subnav.is-open{display:block}
.subnav-list{list-style:none;margin:0;padding:0}
.subnav-list a{
  display:block;padding:9px 0 9px 14px;
  border-left:2px solid var(--line);
  text-decoration:none;color:var(--navy);
}
.subnav-list a:hover{border-left-color:var(--growth);background:var(--paper-alt)}
.subnav-list strong{display:block;font-weight:600;font-size:.95rem}
.subnav-list span{
  display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.4;
}

.nav-portal-link{color:var(--signal)}
.nav-cta{border-top:1px solid var(--line);padding:12px 0}

/* ---------- Buttons ----------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:14px 26px;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.btn-sm{padding:10px 18px;font-size:.92rem}

.btn-primary{background:var(--growth);color:var(--navy-deep);border-color:var(--growth)}
.btn-primary:hover{background:var(--growth-dark);border-color:var(--growth-dark);color:var(--navy-deep)}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

.btn-outline{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- Hero -------------------------------------------- */

.hero{
  background:var(--navy-deep);
  color:#fff;
  padding:52px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 88% 6%,rgba(160,236,232,.20),transparent 62%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}

.hero h1{color:#fff;font-size:2.15rem;margin-bottom:.42em}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--growth);
  margin:0 0 16px;display:block;
}

.welcome{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--growth);margin:0 0 10px;
}

.hero-deck{
  font-size:1.1rem;color:#c5d3e2;max-width:44ch;margin-bottom:26px;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}

.hero-note{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray);margin:0;
}

/* Claim beats. Repeated verbatim across hero, widget slot and CTA
   band, so the two load-bearing promises are never more than a
   screen away. */
.claims{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.claim{
  position:relative;padding-left:26px;font-size:.95rem;line-height:1.45;
  color:#c5d3e2;
}
.claim strong{color:#fff;font-weight:600}
.claim::before{
  content:"";position:absolute;left:0;top:.52em;
  width:11px;height:11px;background:var(--growth);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%);
}
.hero .claims{margin-top:22px}

.claims-light .claim{color:var(--ink-soft)}
.claims-light .claim strong{color:var(--navy)}
.claims-light .claim::before{background:var(--signal)}
.qualify .claims{margin-top:16px}

@media (min-width:640px){
  .claims{grid-template-columns:repeat(3,1fr);gap:18px}
}

/* ---------- Widget slot ------------------------------------- */

.qualify{background:var(--paper-warm);padding:44px 0;border-bottom:1px solid var(--line);
  scroll-margin-top:125px}
.qualify-head{margin-bottom:22px}
.qualify-head h2{font-size:1.6rem;margin-bottom:.3em}
.qualify-head p{color:var(--ink-soft);max-width:56ch;margin:0}

/* Embed container. The Trulli snippet renders into a bare div, which
   is block-level and would otherwise fill the full column width. A
   four-field form reads badly above ~680px. If embed.js renders a
   fixed-width iframe instead, this wrapper will not help and the
   width has to come from the Trulli dashboard. */
.widget-frame{max-width:660px;margin:0 auto}

/* ---------- Signature: straight answers --------------------- */

.straight{padding:52px 0;border-bottom:1px solid var(--line)}
.straight h2{font-size:1.6rem}
.straight-intro{color:var(--ink-soft);max-width:54ch;margin-bottom:28px}

.spec{border-top:2px solid var(--navy)}
.spec-row{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.spec-k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--signal);
}
.spec-v{font-size:1.02rem;color:var(--navy);margin:0}
.spec-v strong{color:var(--navy);font-weight:600}

/* ---------- Section furniture ------------------------------- */

.sec{padding:52px 0}
.sec-alt{background:var(--paper-alt)}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:1.6rem;margin-bottom:.3em}
.sec-head p{color:var(--ink-soft);max-width:58ch;margin:0}

/* ---------- Industry grid ----------------------------------- */

.ind-grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.ind-card{
  background:var(--paper);padding:20px 18px;text-decoration:none;display:block;
  transition:background .15s ease;
}
.ind-card:hover{background:var(--paper-warm)}
.ind-card h3{font-size:1.02rem;margin-bottom:.25em;letter-spacing:-.01em}
.ind-card p{
  margin:0;font-size:.84rem;color:var(--ink-soft);line-height:1.45;
}
.ind-card.is-feature{background:var(--navy);}
.ind-card.is-feature h3{color:#fff}
.ind-card.is-feature p{color:#bccde0}
.ind-card.is-feature:hover{background:var(--signal)}

/* ---------- Steps (a real sequence) ------------------------- */

.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{
  counter-increment:step;padding:22px 0 22px 52px;position:relative;
  border-bottom:1px solid var(--line);
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:22px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  color:var(--signal);letter-spacing:.06em;
}
.step h3{font-size:1.1rem;margin-bottom:.3em}
.step p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ---------- Product rows ------------------------------------ */

.prods{border-top:2px solid var(--navy);margin-bottom:8px}
.prod{
  display:grid;grid-template-columns:1fr;gap:3px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.prod-n{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy)}
.prod-d{margin:0;font-size:.94rem;color:var(--ink-soft)}

/* ---------- Needs list -------------------------------------- */

.needs{list-style:none;padding:0;margin:0 0 8px}
.needs li{
  padding:12px 0 12px 26px;position:relative;
  border-bottom:1px solid var(--line);font-size:.98rem;
}
.needs li::before{
  content:"";position:absolute;left:2px;top:20px;
  width:9px;height:9px;background:var(--growth);
}

/* ---------- Cert tags --------------------------------------- */

.certbar{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none;
}
.certtag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;
  border:1px solid rgba(79,201,154,.55);color:var(--growth);border-radius:2px;
}
.certtag.is-primary{background:var(--growth);color:var(--navy-deep);border-color:var(--growth)}

/* ---------- FAQ --------------------------------------------- */

.faq{border-top:2px solid var(--navy)}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item h3{font-size:1.04rem;margin-bottom:.35em}
.faq-item p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ---------- CTA band ---------------------------------------- */

.band{background:var(--navy);color:#fff;padding:48px 0}
.band h2{color:#fff;font-size:1.55rem;max-width:22ch}
.band p{color:#c5d3e2;max-width:52ch;margin-bottom:24px}
.band-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Prose ------------------------------------------- */

.prose{max-width:70ch}
.prose h2{font-size:1.35rem;margin-top:1.7em}
.prose h3{font-size:1.08rem;margin-top:1.4em}
.prose li{margin-bottom:.4em}

/* ---------- Footer ------------------------------------------ */

.footsite{background:var(--paper-alt);border-top:1px solid var(--line);padding:44px 0 30px}

.foot-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:32px}
.foot-brand img{width:180px;height:auto;margin-bottom:14px}
.foot-line{font-size:.9rem;color:var(--ink-soft);max-width:38ch;margin:0}

.foot-h{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);margin-bottom:12px;font-weight:500;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:7px}
.foot-col a{font-size:.92rem;color:var(--navy);text-decoration:none}
.foot-col a:hover{text-decoration:underline}

.foot-legal{border-top:1px solid var(--line-strong);padding-top:22px}
.foot-legal p{font-size:.8rem;line-height:1.55;color:var(--ink-soft);max-width:88ch}
.foot-flag{color:var(--warn);letter-spacing:.09em}
.foot-copy{margin-bottom:6px}
.foot-addr{margin-bottom:0}
.foot-sep{color:var(--line-strong)}

/* ---------- Breakpoints ------------------------------------- */

@media (min-width:640px){
  .hero{padding:70px 0 74px}
  .hero h1{font-size:2.7rem}
  .ind-grid{grid-template-columns:1fr 1fr}
  .spec-row{grid-template-columns:190px 1fr;gap:20px;align-items:baseline}
  .prod{grid-template-columns:230px 1fr;gap:20px;align-items:baseline}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  body{font-size:17px}
  .brand img{width:240px}
  .brand{padding:24px 24px 24px 0}
  .masthead-inner{min-height:125px}
  .navtoggle{display:none}
  .nav{display:block;width:auto;padding:0}
  .nav-list{display:flex;align-items:center;gap:4px}
  .nav-item{border-top:0}
  .nav-link{padding:10px 13px;font-size:.94rem}
  .nav-item.has-sub{position:relative}

  .subnav{
    display:block;position:absolute;top:100%;left:0;
    width:620px;background:var(--paper);
    border:1px solid var(--line);border-top:3px solid var(--growth);
    box-shadow:0 18px 40px rgba(10,36,64,.16);
    padding:14px;opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .nav-item.has-sub:hover .subnav,
  .subnav.is-open{opacity:1;visibility:visible;transform:translateY(0)}

  .subnav-list{
    display:grid;grid-template-columns:1fr 1fr;gap:2px;
  }
  .subnav-list a{padding:9px 12px;border-left:2px solid transparent}

  .nav-cta{padding:0;margin-left:10px}

  .hero{padding:88px 0 92px}
  .hero h1{font-size:3.35rem;max-width:17ch}
  .hero-deck{font-size:1.18rem}

  .sec,.straight{padding:70px 0}
  .qualify{padding:60px 0}
  .sec-head h2,.straight h2,.qualify-head h2{font-size:2rem}
  .band h2{font-size:2rem}

  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}