/* ============================================================
   HERO — INVERSIONISTAS
   ============================================================ */
.hero{padding:100px 0 56px}
.h-sub{max-width:560px}

/* ============================================================
   INVESTMENT CARD
   ============================================================ */
.iv{border-radius:14px;overflow:hidden;border:1px solid var(--bdr);width:100%}
.iv-t{background:var(--grad);padding:22px}
.iv-t .l{font-family:var(--m);font-size:9px;color:rgba(255,255,255,.5);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.iv-t .bg{font-family:var(--m);font-size:clamp(44px,10vw,64px);font-weight:700;color:var(--mint);letter-spacing:-3px;line-height:1}
.iv-t .bg small{font-size:.4em}
.iv-t>p{font-size:12px;color:var(--muted);margin-top:5px}
.iv-b{display:grid;grid-template-columns:repeat(3,1fr)}
.iv-s{padding:14px 8px;text-align:center;background:var(--bg);border-right:1px solid var(--bdr)}
.iv-s:last-child{border-right:none}
.iv-s .v{font-family:var(--m);font-weight:700;font-size:14px;margin-bottom:2px}
.iv-s .l{font-size:9px;color:var(--muted)}

/* ============================================================
   PORTFOLIO MOCKUP (hero visual)
   ============================================================ */
.pf{border-radius:16px;background:var(--grad);padding:2px;width:100%;margin-top:32px}
.pf-i{border-radius:14px;background:rgba(11,10,34,.88);backdrop-filter:blur(6px);padding:20px;display:flex;flex-direction:column;gap:14px}
.pf-h{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.pf-h span{font-family:var(--m);font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.pf-big{font-family:var(--m);font-size:clamp(28px,5.5vw,44px);font-weight:700;color:var(--mint);letter-spacing:-2px}
.pf-big small{font-size:.5em;opacity:.5}
.pf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-c{background:rgba(255,255,255,.05);border-radius:8px;padding:10px;min-width:0}
.pf-c .l{font-family:var(--m);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.pf-c .v{font-family:var(--m);font-size:clamp(14px,2vw,18px);font-weight:600}
.pf-c .v.gr{color:var(--mint)}
.pf-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px}
.pf-bar span{border-radius:3px}
.pf-bar .b1{flex:4;background:var(--mint)}
.pf-bar .b2{flex:3;background:var(--purple)}
.pf-bar .b3{flex:2;background:rgba(255,255,255,.15)}
.pf-lg{display:flex;gap:12px;flex-wrap:wrap}
.pf-lg span{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}
.pf-lg span::before{content:'';width:6px;height:6px;border-radius:2px;flex-shrink:0}
.pf-lg .lg1::before{background:var(--mint)}
.pf-lg .lg2::before{background:var(--purple)}
.pf-lg .lg3::before{background:rgba(255,255,255,.15)}
.pf-st{background:rgba(255,255,255,.05);border-radius:8px;padding:10px;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.pf-dt{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:blnk 2s infinite;flex-shrink:0}
.pf-st .hl{color:var(--mint)}

/* ============================================================
   OPPORTUNITY LIST
   ============================================================ */
.op-list{display:flex;flex-direction:column;gap:10px;max-width:600px;margin:0 auto}
.op{display:flex;align-items:center;gap:12px;padding:16px;flex-wrap:wrap}
.op-ic{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px}
.op-info{flex:1;min-width:120px}
.op-info h4{font-size:13px;font-weight:600;margin-bottom:2px}
.op-info p{font-size:11px;color:var(--muted)}
.op-rate{text-align:right;min-width:70px}
.op-rate .v{font-family:var(--m);font-weight:700;font-size:16px;color:var(--mint)}
.op-rate .l{font-size:9px;color:var(--muted)}

/* ============================================================
   RISK GRID
   ============================================================ */
.rk-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rk{padding:18px}
.rk .ic{font-size:20px;margin-bottom:6px}
.rk h4{font-size:13px;font-weight:600;margin-bottom:3px}
.rk p{font-size:11px;color:var(--muted);line-height:1.5}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:600px){
  .hero{padding:110px 0 70px}
  .pf-row{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .hero{padding:140px 0 80px}
  .h-g{display:flex;align-items:center;gap:48px}
  .h-txt{flex:1.1;min-width:0}
  .h-vis{flex:1;min-width:0;display:flex;justify-content:flex-end}
  .pf{max-width:420px;margin-top:0}
  .iv{max-width:420px}
}