/*
 * fim-home.css — FIM Marketplace Homepage / Educational Hub
 * Layers on top of fim-core.css. Scoped under .fim-home.
 * Unique components: spoke selector, the educational narrative (problem →
 * three options → definition), media/credibility band.
 */

/* ── HERO + SPOKE ENTRY ──────────────────────────────────────────────────── */
.fim-home .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.fim-home .hero-q{font-family:var(--fh);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g300);margin-bottom:16px}
.fim-home .spoke-card-wrap{display:flex;flex-direction:column;gap:10px}
.fim-home .spoke-entry{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:18px 20px;text-decoration:none;backdrop-filter:blur(8px);transition:background .22s,border-color .22s,transform .15s}
.fim-home .spoke-entry:hover{background:rgba(255,255,255,.14);border-color:rgba(172,194,143,.5);transform:translateX(4px)}
.fim-home .spoke-entry-icon{flex-shrink:0;width:52px;height:52px;border-radius:10px;background:var(--g500);display:flex;align-items:center;justify-content:center}
.fim-home .spoke-entry-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8}
.fim-home .spoke-entry-text{flex:1}
.fim-home .spoke-entry-text strong{display:block;font-family:var(--fh);font-size:1.38rem;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.fim-home .spoke-entry-text span{font-size:.92rem;color:rgba(255,255,255,.65);font-weight:300}
.fim-home .spoke-entry-arrow{flex-shrink:0;color:var(--g300);font-size:1.1rem;transition:transform .2s}
.fim-home .spoke-entry:hover .spoke-entry-arrow{transform:translateX(3px)}

/* ── DEFINITION STRIP ────────────────────────────────────────────────────── */
.fim-home #definition{background:var(--white)}
.fim-home .def-card{max-width:900px;margin:0 auto;text-align:center}
.fim-home .def-quote{font-family:var(--fh);font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:700;line-height:1.3;color:var(--g900);letter-spacing:-.02em;margin:18px 0}
.fim-home .def-quote em{color:var(--g500);font-style:normal}
.fim-home .def-sub{font-size:1rem;color:var(--ink-mid);font-weight:300;max-width:640px;margin:0 auto}
.fim-home .def-here{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-family:var(--fh);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g700);background:var(--g100);padding:8px 18px;border-radius:100px}

/* ── PROBLEM SECTION ─────────────────────────────────────────────────────── */
.fim-home #problem{background-color:var(--g900);background-size:cover;background-position:center}
.fim-home .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.fim-home .problem-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:34px 30px}
.fim-home .problem-num{font-family:var(--fh);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g300);margin-bottom:14px}
.fim-home .problem-card h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.fim-home .problem-card p{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.7}
.fim-home .problem-link{text-align:center;margin-top:36px;font-family:var(--fh);font-size:1.05rem;font-weight:600;color:var(--g300);letter-spacing:-.01em}

/* ── THREE OPTIONS ───────────────────────────────────────────────────────── */
.fim-home #options{background:var(--off-white)}
.fim-home .options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.fim-home .option-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:34px 28px;transition:border-color .25s,transform .2s,box-shadow .25s}
.fim-home .option-card.is-answer{border-color:var(--g500);box-shadow:0 12px 40px rgba(90,126,61,.16)}
.fim-home .option-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(33,46,27,.1)}
.fim-home .option-tag{position:absolute;top:-11px;left:28px;font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--g500);padding:4px 12px;border-radius:100px}
.fim-home .option-num{font-family:var(--fh);font-size:2.4rem;font-weight:800;color:var(--g100);line-height:1;margin-bottom:14px}
.fim-home .option-card.is-answer .option-num{color:var(--g300)}
.fim-home .option-card h3{font-size:1.05rem;margin-bottom:10px}
.fim-home .option-card p{font-size:.86rem;color:var(--ink-mid);line-height:1.7}
.fim-home .option-verdict{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-family:var(--fh);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.fim-home .option-verdict.no{color:var(--ink-light)}
.fim-home .option-verdict.yes{color:var(--g700)}

/* ── MEDIA / CREDIBILITY ─────────────────────────────────────────────────── */
.fim-home #media{background-color:var(--g900);background-size:cover;background-position:center}
.fim-home .media-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fim-home .video-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#2b5c44,#1b3a2d);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.fim-home .video-frame::after{content:'';position:absolute;inset:0;background:var(--bg-dark-overlay);opacity:.3}
.fim-home .play-btn{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s}
.fim-home .play-btn:hover{transform:scale(1.08);background:#fff}
.fim-home .play-btn svg{width:26px;height:26px;fill:var(--g900);margin-left:4px}
.fim-home .video-label{position:absolute;bottom:16px;left:18px;z-index:1;font-family:var(--fh);font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.fim-home .media-names{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.fim-home .media-name{font-family:var(--fh);font-size:.7rem;font-weight:600;color:var(--g300);background:rgba(172,194,143,.14);padding:6px 14px;border-radius:100px;border:1px solid rgba(172,194,143,.25)}

/* ── SPOKES DETAIL ───────────────────────────────────────────────────────── */
.fim-home #spokes{background:var(--white)}
.fim-home .spokes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.fim-home .spoke-detail{display:flex;flex-direction:column;background:var(--g50);border:1px solid var(--g200);border-radius:14px;padding:32px 30px;text-decoration:none;transition:background .22s,border-color .22s,transform .2s}
.fim-home .spoke-detail:hover{background:var(--g100);border-color:var(--g300);transform:translateY(-3px)}
.fim-home .spoke-detail-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fim-home .spoke-detail-icon{flex-shrink:0;width:46px;height:46px;border-radius:10px;background:var(--g500);display:flex;align-items:center;justify-content:center}
.fim-home .spoke-detail-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.fim-home .spoke-detail-head h3{font-size:1.1rem;margin-bottom:2px}
.fim-home .spoke-detail-head .pill{background:var(--g200);color:var(--g700)}
.fim-home .spoke-detail p{font-size:.88rem;color:var(--ink-mid);line-height:1.7;flex:1}
.fim-home .spoke-detail-cta{margin-top:16px;font-family:var(--fh);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g700);display:inline-flex;align-items:center;gap:6px}
.fim-home .spoke-detail:hover .spoke-detail-cta{gap:10px}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.fim-home #home-cta{background-color:var(--g900);background-size:cover;background-position:center top;text-align:center}
.fim-home #home-cta h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:16px}
.fim-home #home-cta p{font-size:1rem;color:rgba(255,255,255,.7);max-width:540px;margin:0 auto 36px;font-weight:300;line-height:1.75}
.fim-home .cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .fim-home .hero-grid,.fim-home .problem-grid,.fim-home .media-grid,.fim-home .spokes-grid{grid-template-columns:1fr}
  .fim-home .options-grid{grid-template-columns:1fr}
  .fim-home .hero-grid{gap:40px}
}


/* "Others" — secondary text link beneath the 4 path cards (afterthought, not a card) */
.fim-home .spoke-others{display:inline-block;margin-top:14px;padding-left:4px;font-size:.86rem;font-weight:300;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.fim-home .spoke-others span{font-weight:600;color:var(--g300);white-space:nowrap}
.fim-home .spoke-others:hover{color:rgba(255,255,255,.85)}
.fim-home .spoke-others:hover span{text-decoration:underline}