:root{
  --brand:#9b1c26;
  --brand2:#b1323b;
  --gold:#C89212;

  --bg:#f6f7fb;
  --surface:#ffffff;
  --soft:#eef1f7;
  --text:#0b1220;
  --muted:#42546d;
  --line:rgba(11,18,32,.10);

  --shadow: 0 18px 60px rgba(11,18,32,.12);
  --shadow2: 0 10px 30px rgba(11,18,32,.10);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:22px}
.muted{color:var(--muted);font-size:14px;line-height:1.65}
.biglink a{font-weight:950;color:var(--brand);text-decoration:none}
.biglink a:hover{text-decoration:underline}

/* ===== Topbar ===== */
.topbar{
  position:sticky;top:0;z-index:60;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;
  padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand-logo{
  width:46px;height:46px;border-radius:14px;object-fit:contain;
  background: var(--surface);
  border:1px solid var(--line);
  padding:6px;
  box-shadow: var(--shadow2);
}
.brand-name{font-weight:950}
.brand-sub{font-size:12px;color:var(--muted)}
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background: var(--surface);
  border-radius:12px;
  padding:10px 12px;
  font-weight:950;
  box-shadow: var(--shadow2);
}
.nav-desktop{display:flex;gap:10px;align-items:center}
.nav-desktop a{
  text-decoration:none;
  font-size:14px;color:var(--muted);
  padding:10px 12px;border-radius:12px;
  transition:.18s ease;
}
.nav-desktop a:hover{background:rgba(155,28,38,.08);color:var(--text)}
.nav-desktop a.active{
  background:rgba(155,28,38,.12);
  border:1px solid rgba(155,28,38,.18);
  color:var(--brand);
}

/* Dropdown click-open */
.dropdown{position:relative}
.dropdown .dropbtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dropdown-menu{
  position:absolute; top:46px; left:0;
  min-width:260px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:8px;
  display:none;
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
}
.dropdown-menu a:hover{background:rgba(155,28,38,.08)}

/* ===== Buttons ===== */
.btn{
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:950;
  font-size:14px;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  color:#fff;
  border-color: rgba(155,28,38,.35);
}
.btn.gold{
  background: linear-gradient(135deg, rgba(200,146,18,.95), rgba(200,146,18,.75));
  color:#1B1300;
  border-color: rgba(200,146,18,.35);
}
.btn.light{
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  box-shadow:none;
}

/* ===== Pill ===== */
.pill{
  display:inline-flex;
  padding:8px 12px;border-radius:999px;
  background: rgba(155,28,38,.10);
  border:1px solid rgba(155,28,38,.16);
  color: var(--brand);
  font-weight:950;
  font-size:12px;
}
.pill-on-hero{
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* ===== Reveal ===== */
.reveal{opacity:0;transform: translateY(14px);transition: .7s ease}
.reveal.show{opacity:1;transform:none}

/* =========================
   HERO FULL PAGE SLIDER
========================= */
.heroFull{
  position:relative;
  height: calc(100vh - 72px);
  min-height: 680px;
  overflow:hidden;
}
.heroSlides{position:absolute; inset:0}
.heroSlide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform: scale(1.06);
  opacity:0;
  transition: opacity 950ms ease;
  will-change: opacity;
}
.heroSlide.is-active{opacity:1}

/* keep image visible but text readable */
.heroShade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 650px at 18% 24%, rgba(0,0,0,.34), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.10) 100%);
}

/* parallax glow */
.heroGlow{
  position:absolute; border-radius:999px;
  pointer-events:none;
  opacity:.9;
}
.heroGlow.g1{
  width:560px;height:560px;left:-190px;top:-190px;
  background: radial-gradient(circle at 30% 30%, rgba(155,28,38,.32), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(200,146,18,.22), transparent 60%);
}
.heroGlow.g2{
  width:520px;height:520px;right:-220px;top:-150px;
  background: radial-gradient(circle at 35% 35%, rgba(200,146,18,.28), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(155,28,38,.18), transparent 60%);
}
.heroGlow.g3{
  width:620px;height:620px;right:-260px;bottom:-260px;
  background: radial-gradient(circle at 40% 40%, rgba(155,28,38,.22), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(200,146,18,.18), transparent 60%);
}

.heroInner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
.heroContent{
  max-width: 760px;
}
.heroTitle{
  margin:14px 0 10px;
  font-size: 48px;
  line-height:1.05;
  color:#fff;
  text-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.heroLead{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.75;
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 34px rgba(0,0,0,.45);
  max-width: 68ch;
}
.heroCta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

.heroMetrics{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.metric{
  border-radius:16px;
  padding:12px;
}
.metric-on-hero{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.metric-num{font-weight:1000;font-size:18px}
.metric-on-hero .metric-num{color:#fff;text-shadow: 0 14px 34px rgba(0,0,0,.35)}
.metric-label{font-size:12px;margin-top:4px}
.metric-on-hero .metric-label{color: rgba(255,255,255,.86)}

/* Dots */
.heroDots{margin-top:16px;display:flex;gap:10px;align-items:center}
.heroDots .dot{
  width:11px;height:11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.25);
  cursor:pointer;
  transition:.2s ease;
}
.heroDots .dot.is-active{
  background: var(--brand);
  border-color: rgba(255,255,255,.80);
  transform: scale(1.18);
}

/* ===== Sections ===== */
.sectionWrap{padding:26px 0}
.sectionWrap.soft{
  background: linear-gradient(180deg, rgba(238,241,247,.90), rgba(238,241,247,.40));
  border-top:1px solid rgba(11,18,32,.06);
  border-bottom:1px solid rgba(11,18,32,.06);
}
.sectionHead h2{margin:0 0 6px}
.sectionHead{margin-bottom:12px}

/* Investments */
.investGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "a b"
    "c d"
    "wide wide";
  gap:12px;
}
.investCard{
  position:relative;
  border:none;
  padding:0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#ddd;
  box-shadow: var(--shadow2);
  cursor:pointer;
  min-height:250px;
  border:1px solid rgba(11,18,32,.10);
}
.investCard img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transform: scale(1.02);
  transition:.35s ease;
}
.investCard:hover img{transform: scale(1.08)}
.investOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
}
.investText{
  position:absolute;left:16px;bottom:16px;
  color:#fff;max-width:85%;
}
.investTitle{font-weight:1000;font-size:18px}
.investSub{opacity:.92;margin-top:4px;font-size:13px}

.investWide{
  grid-area:wide;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.wideBox{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.wideTitle{font-weight:1000;color:var(--brand);margin-bottom:6px}

/* Membership background */
.membershipWrap{
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(155,28,38,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(200,146,18,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(238,241,247,.55));
  border-top:1px solid rgba(11,18,32,.06);
  border-bottom:1px solid rgba(11,18,32,.06);
}
.membershipGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.memberCard{
  background: rgba(255,255,255,.96);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.memberCard:before{
  content:"";
  position:absolute;
  right:-70px; top:-70px;
  width:180px;height:180px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(155,28,38,.12), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(200,146,18,.12), transparent 60%);
}
.memberCard > *{position:relative}
.memberLabel{color:var(--muted);font-weight:900;font-size:12px}
.memberBig{font-weight:1000;color:var(--brand);font-size:26px;margin:8px 0}
.memberNote{margin-top:10px;color:var(--muted);font-size:13px}

/* Activities */
.activityRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.miniCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.miniTitle{font-weight:1000;color:var(--brand);margin-bottom:8px}

/* Contact bar */
.contactBar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}

/* Footer */
.footer{
  border-top:1px solid rgba(11,18,32,.10);
  background: #fff;
}
.footer-grid{
  display:grid;gap:14px;
  grid-template-columns: 1.3fr .7fr;
  padding:18px 0;
}
.footer-title{font-weight:1000;color:var(--brand);margin-bottom:8px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:var(--muted);text-decoration:none;font-weight:800}
.footer-links a:hover{color:var(--brand)}
.footer-bottom{padding:14px 0;border-top:1px solid rgba(11,18,32,.10)}

/* Bottom nav kept */
.nav-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  border-top:1px solid rgba(11,18,32,.10);
  display:none;
  gap:8px;
}
.nav-item{
  flex:1;
  text-decoration:none;
  padding:10px 10px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);
  border:1px solid transparent;
  font-weight:950;
}
.nav-item .dot{width:8px;height:8px;border-radius:99px;background: rgba(11,18,32,.14)}
.nav-item.active{
  color:var(--brand);
  background: rgba(155,28,38,.10);
  border-color: rgba(155,28,38,.18);
}
.nav-item.active .dot{background: var(--brand)}

/* Modal */
.modal{position:fixed; inset:0; z-index:200; display:none}
.modal.open{display:block}
.modalBackdrop{position:absolute; inset:0; background: rgba(11,18,32,.45)}
.modalCard{
  position:relative;
  width: min(960px, calc(100% - 28px));
  margin: 70px auto;
  background: #fff;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  border:1px solid rgba(11,18,32,.10);
  display:grid;
  grid-template-columns: 1fr 1.05fr;
}
.modalClose{
  position:absolute; top:12px; right:12px;
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.92);
  cursor:pointer;font-weight:1000;
}
.modalMedia{background:#eee; min-height:320px}
.modalMedia img{width:100%;height:100%;object-fit:cover;display:block}
.modalBody{padding:18px}
.modalPill{
  display:inline-flex;
  padding:7px 10px;border-radius:999px;
  background: rgba(155,28,38,.10);
  border:1px solid rgba(155,28,38,.16);
  color: var(--brand);
  font-weight:950;
  font-size:12px;
}
.modalBody h3{margin:10px 0 8px}
.modalActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Responsive */
@media (max-width: 980px){
  .heroTitle{font-size:30px}
  .heroFull{height: calc(100vh - 72px); min-height: 640px;}
  .heroMetrics{grid-template-columns: repeat(2, 1fr)}
  .investGrid{grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "wide"}
  .investWide{grid-template-columns:1fr}
  .membershipGrid{grid-template-columns:1fr}
  .activityRow{grid-template-columns:1fr}
  .contactBar{flex-direction:column;align-items:flex-start}
  .nav-desktop{display:none}
  .nav-toggle{display:inline-flex}
  .nav-mobile{display:flex}
  body{padding-bottom:72px}
  .modalCard{grid-template-columns:1fr}
  .modalMedia{min-height:220px}
}

/* Mobile menu drawer */
.nav-open #mainNav{
  display:flex !important;
  flex-direction:column;
  position:absolute;
  right:22px;
  top:72px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  box-shadow: var(--shadow);
  width: min(92vw, 380px);
}
.nav-open .dropdown-menu{
  position:static;
  display:block;
  box-shadow:none;
  border:none;
  padding:6px 0 0;
}
.nav-open .dropdown{width:100%}
.nav-open .dropdown-menu a{padding:10px 12px}
/* =========================
   Page Heroes (About/Legal/Contact)
========================= */
.pageHero{
  position:relative;
  height: 520px;
  min-height: 420px;
  overflow:hidden;
}
.pageHero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform: scale(1.05);
}
.pageHero-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 650px at 18% 24%, rgba(0,0,0,.34), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.10) 100%);
}
.pageHero-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
.pageHero-content{max-width: 820px;}
.pageHero-title{
  margin:14px 0 10px;
  font-size:44px;
  line-height:1.05;
  color:#fff;
  text-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.pageHero-lead{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.75;
  color: rgba(255,255,255,.92);
  text-shadow: 0 14px 34px rgba(0,0,0,.45);
  max-width: 72ch;
}
.pageHero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

/* About layout */
.aboutGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.aboutCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.aboutTitle{font-weight:1000;color:var(--brand);margin-bottom:8px}
.aboutText{font-weight:900;color:#0b1220}
.focusGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.focusItem{
  background: rgba(255,255,255,.94);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.focusName{font-weight:1000;color:var(--brand);margin-bottom:8px}

/* Legal pages */
.legalWrap{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:18px;
}
.legalWrap h2{margin:18px 0 8px}
.legalMeta{margin-bottom:10px}
.legalList{margin:10px 0 0 18px;color:var(--muted);line-height:1.7}
.legalList li{margin:8px 0}
.legalWrap strong{color:#0b1220}

/* Contact page */
.contactGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.contactCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.contactTitle{font-weight:1000;color:var(--brand);margin-bottom:8px}
.contactBig{
  font-weight:1000;
  font-size:18px;
  margin-bottom:6px;
}
.contactBig a{color:var(--brand);text-decoration:none}
.contactBig a:hover{text-decoration:underline}

/* CTA band */
.ctaBand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,241,247,.65));
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.ctaTitle{font-weight:1000;color:var(--brand);margin-bottom:6px}

/* Responsive */
@media (max-width: 980px){
  .pageHero{height: 460px; min-height: 380px;}
  .pageHero-title{font-size:30px}
  .aboutGrid{grid-template-columns:1fr}
  .focusGrid{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .ctaBand{flex-direction:column;align-items:flex-start}
}
/* =========================
   Assets + Meetings + Investments page UI
========================= */

/* Assets showcase */
.assetShowcase{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:12px;
}
.assetBigCard{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(155,28,38,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(200,146,18,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,241,247,.70));
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  overflow:hidden;
}
.assetBigTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.assetLabel{font-weight:950;color:var(--muted)}
.assetValue{font-weight:1000;color:var(--brand);font-size:36px;margin-top:6px}
.assetBadge{
  background: rgba(155,28,38,.10);
  border:1px solid rgba(155,28,38,.18);
  color: var(--brand);
  font-weight:950;
  padding:10px 12px;
  border-radius: 999px;
  white-space:nowrap;
}
.assetMiniRow{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.assetMini{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(11,18,32,.08);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding:12px;
}
.miniK{color:var(--muted);font-weight:900;font-size:12px}
.miniV{font-weight:1000;color:#0b1220;font-size:18px;margin:6px 0 2px}
.miniS{color:var(--muted);font-size:12px}

.assetSide{display:grid;gap:12px}
.assetSideCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.sideIcon{font-size:22px;margin-bottom:10px}
.sideTitle{font-weight:1000;color:var(--brand);margin-bottom:8px}

.valueGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.valueCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  overflow:hidden;
}
.valueTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.valueName{font-weight:1000;color:#0b1220}
.valueChip{
  padding:7px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(11,18,32,.08);
  background: rgba(246,247,251,.90);
  color: var(--muted);
}
.valueMain{font-weight:1000;font-size:26px;color:var(--brand);margin-top:10px}
.valueCard.v1{background: linear-gradient(180deg, rgba(155,28,38,.08), rgba(255,255,255,1));}
.valueCard.v2{background: linear-gradient(180deg, rgba(200,146,18,.10), rgba(255,255,255,1));}
.valueCard.v3{background: linear-gradient(180deg, rgba(34,49,75,.08), rgba(255,255,255,1));}
.valueCard.v4{background: linear-gradient(180deg, rgba(0,140,100,.08), rgba(255,255,255,1));}

/* Meetings */
.meetGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.meetCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.meetIcon{font-size:24px;margin-bottom:10px}
.meetTitle{font-weight:1000;color:var(--brand);margin-bottom:8px}

.timeline{
  display:grid;
  gap:12px;
  position:relative;
}
.tlItem{
  display:grid;
  grid-template-columns: 20px 1fr;
  gap:12px;
  align-items:start;
}
.tlDot{
  width:14px;height:14px;border-radius:999px;
  background: var(--brand);
  margin-top:14px;
  box-shadow: 0 0 0 6px rgba(155,28,38,.10);
}
.tlCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.tlTitle{font-weight:1000;color:#0b1220;margin-bottom:8px}

/* Investments details grid */
.investDetailGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.investDetailCard{
  position:relative;
  border:none;
  padding:0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#ddd;
  box-shadow: var(--shadow2);
  cursor:pointer;
  min-height:260px;
  border:1px solid rgba(11,18,32,.10);
}
.investDetailCard img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transform: scale(1.02);
  transition:.35s ease;
}
.investDetailCard:hover img{transform: scale(1.08)}
.dOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60));
}
.dText{
  position:absolute;left:16px;bottom:16px;
  color:#fff;max-width:85%;
}
.dTitle{font-weight:1000;font-size:18px}
.dSub{opacity:.92;margin-top:4px;font-size:13px}

.addGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.addCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  overflow:hidden;
  position:relative;
}
.addIcon{font-size:22px;margin-bottom:10px}
.addTitle{font-weight:1000;color:#0b1220;margin-bottom:8px}
.addCard.c1{background: linear-gradient(180deg, rgba(0,140,100,.10), #fff);}
.addCard.c2{background: linear-gradient(180deg, rgba(34,49,75,.10), #fff);}
.addCard.c3{background: linear-gradient(180deg, rgba(200,146,18,.10), #fff);}
.addCard.c4{background: linear-gradient(180deg, rgba(155,28,38,.08), #fff);}
.addCard.c5{background: linear-gradient(180deg, rgba(60,90,200,.08), #fff);}

/* Responsive */
@media (max-width: 980px){
  .assetShowcase{grid-template-columns:1fr}
  .assetMiniRow{grid-template-columns:1fr}
  .valueGrid{grid-template-columns:1fr}
  .meetGrid{grid-template-columns:1fr}
  .investDetailGrid{grid-template-columns:1fr}
  .addGrid{grid-template-columns:1fr}
}
/* Activities page cards */
.actGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.actCard{
  background: var(--surface);
  border:1px solid rgba(11,18,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  overflow:hidden;
}
.actIcon{font-size:24px;margin-bottom:10px}
.actTitle{font-weight:1000;color:#0b1220;margin-bottom:8px}
.actCard.a1{background: linear-gradient(180deg, rgba(60,90,200,.10), #fff);}
.actCard.a2{background: linear-gradient(180deg, rgba(155,28,38,.10), #fff);}
.actCard.a3{background: linear-gradient(180deg, rgba(200,146,18,.12), #fff);}

@media (max-width: 980px){
  .actGrid{grid-template-columns:1fr}
}