﻿ * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #221D3B;
    /* padding: 28px 16px 60px; */
  }

  .wrap {max-width: 1280px;margin: 0 auto;margin-bottom: 47px;}

  h1, h2, h3, .disp { font-family: 'Poppins', sans-serif; }

  .eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: #8A7A1E; margin-bottom: 6px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 2px; background: #453C82; display:inline-block; }

  /* ============ PAGE TITLE (attractive version) ============ */
  .page-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 51px;
    margin-bottom: 8px;
  }
 .page-title-icon {
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #9b8f45;
    animation: titleIconFloat 3.4s ease-in-out infinite;
    padding-top: 7px;
}
  @keyframes titleIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-5px) rotate(-6deg); }
  }
  .page-title {
    font-size: 26px;
    font-weight: 800;
    color: #6d6d6d;
    margin: 0;
    position: relative;
  }
  .page-title span {
    background: linear-gradient(90deg, #453C82 0%, #8A7A1E 50%, #453C82 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: titleShine 4.5s linear infinite;
    position: relative;
  }
  @keyframes titleShine {
    to { background-position: -200% center; }
  }
  @media (max-width: 480px) {
    .page-title-wrap { gap: 12px; }
    .page-title-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
    .page-title { font-size: 21px; }
  }

  /* ============ HERO GRID ============ */
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr;
    gap: 22px;
    margin-bottom: 46px;
  }

  /* ---- Register banner ---- */
  .register-card {
    position: relative;
    border-radius: 20px;
    padding: 9px 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #453C82 0%, #322B5E 60%, #241f45 100%);
    color: #fff;
    box-shadow: 0 18px 40px -14px rgba(69,60,130,.55);
    isolation: isolate;
  }
  .register-card::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 85% 10%, rgba(255,255,255,.12), transparent 45%),
      radial-gradient(circle at 10% 95%, rgba(138,122,30,.35), transparent 50%);
    z-index: -1;
  }
  .register-eyebrow { font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color:#D8CFA0; font-weight:600; margin-bottom:10px;}
  .register-card h2 { font-size: 34px; line-height: 1.08; font-weight: 800; margin-bottom: 8px; }
  .register-card h2 em { font-style: normal; color: #C9BB5F; }
  .register-card p {font-size: 14px;color: #cfc9e6;/* max-width: 330px; */margin-bottom: 11px;}

  .cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #C9BB5F;
    color: #221D3B;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease;
    box-shadow: 0 8px 18px -8px rgba(201,187,95,.7);
  }
  .cta-btn i { transition: transform .3s ease; }
  .cta-btn:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -10px rgba(0,0,0,.35);
  }
  .cta-btn:hover i { transform: translateX(5px); }

  /* mini promo tiles under register card */
  .promo-row {/* display: grid; */grid-template-columns: 1fr 1fr;gap: 14px;margin-top: 16px;}
  .promo-tile {
    position: relative;
    border-radius: 16px;
    padding: 0px 0px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    box-shadow: 0 10px 22px -12px rgba(0,0,0,.4);
  }
  .promo-tile.purple { background: linear-gradient(140deg,#4C4290,#322B5E); }
  .promo-tile.olive  {/* background: linear-gradient(140deg,#9A8A2A,#695E12); */}
  .promo-tile i.bg-icon {
    position: absolute; right: -6px; top: -6px; font-size: 58px; opacity: .16;
    transform: rotate(-12deg);
  }
  .promo-tile .ptxt { font-size: 13.5px; font-weight: 700; line-height:1.25; position: relative; z-index:1; }
  .promo-tile .ptag { font-size: 11px; color: rgba(255,255,255,.75); margin-top:3px; position:relative; z-index:1;}
  .promo-tile:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 34px -14px rgba(0,0,0,.5);
  }

  /* ---- Product grid ---- */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
  }
  .product-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 8px 18px;
    text-decoration: none;
    color: #221D3B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 108px;
    box-shadow: 0 6px 16px -10px rgba(34,29,59,.18);
    border: 1px solid rgba(34,29,59,.05);
    overflow: hidden;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
  }
  .product-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(69,60,130,.05), rgba(138,122,30,.05));
    opacity: 0;
    transition: opacity .32s ease;
  }
  .product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 34px -16px rgba(69,60,130,.35);
    border-color: rgba(69,60,130,.18);
  }
  .product-card:hover::after { opacity: 1; }

  .product-card .icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    position: relative;
    z-index: 1;
  }
  .product-card:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }
  .icon-badge.purple {background: linear-gradient(145deg, #5A4FA0, #8a8895);}
  .icon-badge.olive  {background: linear-gradient(145deg, #A5952F, #818181);}

  .product-card .p-name {font-size: 17px;font-weight: 700;line-height: 1.25;position: relative;z-index:1;padding-bottom: 9px;}
  .product-card .p-arrow {
    position: absolute; right: 14px; bottom: 14px;
    font-size: 12px; color: #8A7A1E; opacity: 0; transform: translateX(-6px);
    transition: all .3s ease; z-index: 1;
  }
  .product-card:hover .p-arrow { opacity: 1; transform: translateX(0); }

  .new-badge {
    position: absolute; top: 10px; right: 10px;
    background: #C9384B; color: #fff; font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
    z-index: 2;
  }

  /* ============ VIDEO SECTION ============ */
  .section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;}
  .section-head h3 {font-size: 27px;/* font-weight: 800; */}
  .section-head p { font-size: 13px; color:#7a7288; margin-top:4px; }

  .see-all-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px;
    color: #453C82;
    padding: 8px 4px;
  }
  .see-all-btn i { transition: transform .3s ease; }
  .see-all-btn:hover i { transform: translateY(3px); }

  .video-slider-wrap { position: relative; margin-bottom: 50px; }
  .video-slider {
    display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .video-slider::-webkit-scrollbar { display: none; }

  .video-card {
    flex: 0 0 240px; scroll-snap-align: start;
    border-radius: 16px; overflow: hidden; cursor: pointer;
    background: #1c1836;
    position: relative; height: 150px;
    box-shadow: 0 10px 20px -12px rgba(34,29,59,.35);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
  }
  .video-card.in-grid { flex: none; height: auto; aspect-ratio: 4 / 2.7; }
  .video-card .thumb-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    transition: transform .5s ease;
  }
  .video-card:hover .thumb-bg { transform: scale(1.06); }
  .video-card::before {
    content:"";
    position:absolute; inset:0; z-index: 1;
    background: linear-gradient(150deg,#453C82 0%, #322B5E 55%, #171331 100%);
    opacity: .92;
  }
  .video-card.olive::before { background: linear-gradient(150deg,#8A7A1E 0%, #695E12 55%, #2c2708 100%); }
  .video-card.has-thumb::before {
    background: linear-gradient(to top, rgba(10,8,25,.9) 0%, rgba(10,8,25,.12) 55%, rgba(10,8,25,.4) 100%);
    opacity: 1;
  }
  .video-card:hover { transform: translateY(-8px); box-shadow: 0 22px 34px -14px rgba(0,0,0,.45); }

  .video-card .cat-icon {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-size: 15px; color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.14); width: 30px; height: 30px;
    border-radius: 9px; display:flex; align-items:center; justify-content:center;
  }
  .play-circle {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.16); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 2;
    transition: transform .28s ease, background .28s ease;
    border: 1px solid rgba(255,255,255,.35);
  }
  .play-circle i { color:#fff; font-size: 16px; margin-left: 3px; }
  .video-card:hover .play-circle { transform: translate(-50%,-50%) scale(1.14); background: rgba(255,255,255,.28); }

  .video-caption {position: absolute;left:14px;right:14px;bottom: -50px;z-index:2;}
  .video-caption .v-title { color:#fff; font-size: 13.5px; font-weight: 700; }
  .video-caption .v-sub { color: rgba(255,255,255,.7); font-size: 11px; margin-top:2px; }

  .slider-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(34,29,59,.1);
    display: flex; align-items:center; justify-content:center;
    cursor: pointer; box-shadow: 0 8px 18px -8px rgba(34,29,59,.3);
    color: #453C82; z-index: 3; transition: transform .2s ease, background .2s ease;
    padding: 0; font: inherit;
  }
  .slider-nav:hover { transform: translateY(-50%) scale(1.08); background:#453C82; color:#fff; }
  .slider-nav.prev { left: -14px; }
  .slider-nav.next { right: -14px; }

  /* ============ FESTIVE HIGHLIGHTS (now a slider — scales to any number of images) ============ */
  .festive-slider-wrap { position: relative; margin-top: 8px; }
  .festive-slider {
    display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .festive-slider::-webkit-scrollbar { display: none; }

  .festive-banner {
    position: relative;
    flex: 0 0 min(440px, 82%);
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    min-height: 170px;
    cursor: pointer;
    box-shadow: 0 14px 28px -16px rgba(34,29,59,.4);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    background: linear-gradient(120deg,#453C82 0%, #6355ab 45%, #8A7A1E 130%);
  }
  .festive-banner:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -16px rgba(34,29,59,.5); }
  .festive-banner img {
    width: 100%; height: 100%;
    min-height: 170px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
  }
  .festive-banner:hover img { transform: scale(1.05); }

  @media (max-width: 600px) {
    .festive-banner { flex: 0 0 88%; min-height: 150px; }
    .festive-banner img { min-height: 150px; }
  }

  /* ============ MODALS ============ */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(20,16,38,.72);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 24px; backdrop-filter: blur(3px);
  }
  .modal-overlay.open { display: flex; }

  /* player modal */
  #playerModal { z-index: 1200; }
  #playerModal .modal-box {
    width: min(880px, 100%); background:#000; border-radius: 16px;
    overflow: hidden; position: relative; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  }
  .video-wrapper { position: relative; padding-top: 56.25%; background:#000; }
  .video-wrapper video { position:absolute; inset:0; width:100%; height:100%; }
  .modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.12); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: background .25s ease;
    border: none; padding: 0; font: inherit;
  }
  .modal-close:hover { background: rgba(255,255,255,.28); }

  /* all-videos modal */
  #allVideosModal .modal-box {
    width: min(980px, 100%); max-height: 85vh; overflow-y: auto;
    background: #FBF3EE; border-radius: 20px; padding: 30px 28px;
    position: relative; box-shadow: 0 30px 70px -20px rgba(0,0,0,.55);
  }
  #allVideosModal .modal-close { background:#221D3B; color:#fff; top:18px; right:18px; }
  #allVideosModal h3 { font-size: 22px; font-weight:800; margin-bottom: 22px; }

  .all-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 720px) {
    .all-videos-grid { grid-template-columns: repeat(2,1fr); }
    .wrap{ margin:5px;}
  }
  @media (max-width: 460px) {
    .all-videos-grid { grid-template-columns: 1fr; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2,1fr); }
    .promo-row { grid-template-columns: 1fr; }
  }
  /**********/

  .video-card { position: relative; overflow: hidden; }
  .thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
  .video-card.has-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 100%);
    z-index: 1;
  }
  .video-card .cat-icon, .video-card .play-circle, .video-card .video-caption { position: relative; z-index: 2; }
  .video-card.has-thumb .cat-icon { display: none; }
  .video-card .video-caption { color: #fff; }
  .video-card .v-sub { color: rgba(255,255,255,0.8); font-size: 13px; }
  
  
  
  /****************************************************/
  
  
    :root{
    --stage-bg-1:#070c16;
    --stage-bg-2:#0c1526;
    --ink:#eef1f8;
    --muted:#93a0b8;

    /* card 1 — Unlisted Shares */
    --c1-a:#0a1730; --c1-b:#152c56; --c1-accent:#e7b96a; --c1-accent-2:#fbe2ad;
    /* card 2 — Mutual Funds */
    --c2-a:#06322f; --c2-b:#0d5850; --c2-accent:#59e0c0; --c2-accent-2:#ffd166;
    /* card 3 — Alternative Investment Funds */
    --c3-a:#0c0a09; --c3-b:#1e130c; --c3-accent:#e08a4f; --c3-accent-2:#ffb37a;
    /* card 4 — Bonds & NCDs */
    --c4-a:#140c33; --c4-b:#251a5c; --c4-accent:#b79cff; --c4-accent-2:#7dd3fc;
  }

 
  
  .stage-head{ max-width:1040px; margin:0 auto 34px; }
  .stage-eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--c2-accent); margin-bottom:14px;
  }
  .stage-eyebrow::before{ content:""; width:22px; height:1px; background:var(--c2-accent); display:inline-block; }
  .stage-head h1{
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(1.7rem, 3.2vw, 2.6rem);
    margin:0 0 8px; letter-spacing:-.01em;
  }
  .stage-head p{ color:var(--muted); font-size:.95rem; max-width:560px; margin:0; }

  .promo-grid{
    max-width:1040px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: 5px;
  }
  @media (max-width:760px){ .promo-grid{ grid-template-columns:1fr; } }

  /* ============ CARD BASE ============ */
  .promo-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height: 157px;
    padding: 8px 13px 13px;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:var(--ink);
    isolation:isolate;
    border:1px solid rgba(255,255,255,.06);
    transform-style:preserve-3d;
    transform:perspective(900px) rotateX(0deg) rotateY(0deg);
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .4s ease;
    will-change:transform;
  }
  .promo-card:hover{ box-shadow:0 30px 60px -20px rgba(0,0,0,.55); border-color:rgba(255,255,255,.14); }

  /* cursor spotlight */
  .promo-card::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(280px circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.14), transparent 60%);
    opacity:0; transition:opacity .35s ease;
  }
  .promo-card:hover::before{ opacity:1; }

  .promo-card__bg{ position:absolute; inset:0; z-index:0; }
  .promo-card__content{ position:relative; z-index:2; transform:translateZ(30px); }
  .promo-card__foot{position:relative;z-index:2;transform:translateZ(30px);margin-bottom: 0px;margin-top: 2px;}

  .promo-eyebrow{
    font-size: .62rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.8;
    margin-bottom: 3px;
    display:block;
  }
  .promo-card h3{
    /* font-family:'Fraunces', serif; */
    /* font-weight:600; */
    font-size: 19px;
    line-height:1.22;
    margin:0;
    letter-spacing:-.01em;
    max-width: 92%;
  }

  /* CTA pill */
  .promo-cta{
    margin-top: 5px;
    display:inline-flex;
    align-items:center;
    gap: 7px;
    padding: 10px 17px;
    border-radius:999px;
    background:#fff;
    color:#0a1628;
    font-size:.82rem;
    font-weight:700;
    border:none;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    width:fit-content;
    transition:transform .3s ease, color .3s ease, background .3s ease;
  }
  .promo-cta i{ transition:transform .35s cubic-bezier(.2,.8,.2,1); font-size:.78rem; }
  .promo-cta::after{
    content:""; position:absolute; inset:0; translate:-120% 0;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transition:translate .6s ease;
  }
  .promo-card:hover .promo-cta::after{ translate:220% 0; }
  .promo-card:hover .promo-cta i{ transform:translateX(4px); }
  .promo-card:hover .promo-cta{ transform:translateY(-1px); }

  /* signature: ticker-pulse underline shared across all cards, per-card colour */
  .promo-ticker{
    position:relative;
    height:3px;
    width:100%;
    margin-top: 9px;
    border-radius:3px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
  }
  .promo-ticker::after{
    content:""; position:absolute; top:0; left:-40%; height:100%; width:40%;
    background:linear-gradient(90deg, transparent, var(--tick-color, #fff), transparent);
    animation:tickerRun 2.6s ease-in-out infinite;
  }
  @keyframes tickerRun{ 0%{ left:-40%; } 100%{ left:100%; } }

  /* =====================================================
     CARD 1 — Unlisted Shares (navy / gold, candlestick rally)
     ===================================================== */
  .promo-card--unlisted{ background:linear-gradient(150deg, var(--c1-a), var(--c1-b)); --tick-color:var(--c1-accent); }
  .promo-card--unlisted .promo-eyebrow{ color:var(--c1-accent-2); }
  .promo-card--unlisted .promo-cta:hover{ background:var(--c1-accent); color:#221604; }

  .candles{ position:absolute; right:14px; bottom:16px; display:flex; align-items:flex-end; gap:5px; height:120px; z-index:0; opacity:.9; }
  .candles i{
    display:block; width:6px; border-radius:2px;
    background:linear-gradient(180deg, var(--c1-accent-2), var(--c1-accent));
    animation:candleGrow 2.8s ease-in-out infinite;
    transform-origin:bottom;
  }
  .candles i:nth-child(1){ height:30px; animation-delay:.0s; }
  .candles i:nth-child(2){ height:48px; animation-delay:.15s; }
  .candles i:nth-child(3){ height:38px; animation-delay:.3s; }
  .candles i:nth-child(4){ height:64px; animation-delay:.45s; }
  .candles i:nth-child(5){ height:52px; animation-delay:.6s; }
  .candles i:nth-child(6){ height:80px; animation-delay:.75s; }
  .candles i:nth-child(7){ height:66px; animation-delay:.9s; }
  .candles i:nth-child(8){ height:96px; animation-delay:1.05s; }
  @keyframes candleGrow{ 0%,100%{ transform:scaleY(.86); opacity:.75; } 50%{ transform:scaleY(1); opacity:1; } }

  .rally-line{ position:absolute; inset:0; z-index:0; }
  .rally-path{
    fill:none;
    stroke:var(--c1-accent-2);
    stroke-width: 1px;
    stroke-linecap:round;
    stroke-dasharray: 260;
    stroke-dashoffset:220;
    animation:drawLine 2.4s ease forwards .3s;
    opacity: .55;
    }
  @keyframes drawLine{ to{ stroke-dashoffset:0; } }
  .promo-card--unlisted:hover .candles i{ animation-duration:1.1s; }

  /* =====================================================
     CARD 2 — Mutual Funds (teal / gold coins, growth bars)
     ===================================================== */
  .promo-card--mf{ background:linear-gradient(150deg, var(--c2-a), var(--c2-b)); --tick-color:var(--c2-accent); }
  .promo-card--mf .promo-eyebrow{ color:var(--c2-accent); }
  .promo-card--mf .promo-cta:hover{ background:var(--c2-accent); color:#04211d; }

  .growth-bars{ position:absolute; right:78px; bottom:16px; display:flex; align-items:flex-end; gap:6px; height:90px; z-index:0; opacity:.55; }
  .growth-bars i{ width:9px; border-radius:3px 3px 0 0; background:var(--c2-accent); animation:barPulse 2.4s ease-in-out infinite; }
  .growth-bars i:nth-child(1){ height:26px; animation-delay:0s; }
  .growth-bars i:nth-child(2){ height:42px; animation-delay:.2s; }
  .growth-bars i:nth-child(3){ height:34px; animation-delay:.4s; }
  .growth-bars i:nth-child(4){ height:60px; animation-delay:.6s; }
  .growth-bars i:nth-child(5){ height:50px; animation-delay:.8s; }
  @keyframes barPulse{ 0%,100%{ transform:scaleY(.9); } 50%{ transform:scaleY(1); } }

  .coin{
    position:absolute; width:44px; height:44px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--c2-accent-2), #b8860b 78%);
    box-shadow:0 8px 18px -6px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:700; color:#5a3d02; font-size:1.1rem;
    animation:coinFloat 3.4s ease-in-out infinite;
  }
  .coin--1{ right:22px; bottom:52px; animation-delay:0s; }
  .coin--2{ right:56px; bottom:14px; width:30px; height:30px; font-size:.85rem; animation-delay:.5s; }
  @keyframes coinFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-8px) rotate(6deg); } }
  .promo-card--mf:hover .coin{ animation-duration:1.4s; }

  /* =====================================================
     CARD 3 — Alternative Investment Funds (near-black / copper embers)
     ===================================================== */
  .promo-card--aif{ background:linear-gradient(160deg, var(--c3-a), var(--c3-b)); --tick-color:var(--c3-accent); }
  .promo-card--aif .promo-eyebrow{ color:var(--c3-accent-2); }
  .promo-card--aif .promo-cta:hover{ background:var(--c3-accent); color:#1e0e04; }

  .ember-field{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .ember{
    position:absolute; bottom:-10px; border-radius:50%;
    background:radial-gradient(circle, var(--c3-accent-2), transparent 70%);
    opacity:.75; animation:emberRise linear infinite;
  }
  .ember:nth-child(1){ left:60%; width:6px; height:6px; animation-duration:5.5s; animation-delay:0s; }
  .ember:nth-child(2){ left:70%; width:4px; height:4px; animation-duration:4.2s; animation-delay:1s; }
  .ember:nth-child(3){ left:80%; width:8px; height:8px; animation-duration:6.2s; animation-delay:.4s; }
  .ember:nth-child(4){ left:88%; width:5px; height:5px; animation-duration:4.8s; animation-delay:1.8s; }
  .ember:nth-child(5){ left:74%; width:3px; height:3px; animation-duration:3.6s; animation-delay:2.4s; }
  .ember:nth-child(6){ left:64%; width:5px; height:5px; animation-duration:5s; animation-delay:.9s; }
  @keyframes emberRise{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 15%{ opacity:.9; } 100%{ transform:translateY(-180px) translateX(14px); opacity:0; } }

  .beam{
    position:absolute; top:-30%; right:-10%; width:60%; height:180%;
    background:linear-gradient(115deg, transparent 40%, rgba(224,138,79,.12) 50%, transparent 60%);
    transform:rotate(8deg); animation:beamSweep 6s ease-in-out infinite;
  }
  @keyframes beamSweep{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

  /* =====================================================
     CARD 4 — Bonds & NCDs (indigo / lavender data grid)
     ===================================================== */
  .promo-card--bonds{ background:linear-gradient(150deg, var(--c4-a), var(--c4-b)); --tick-color:var(--c4-accent); }
  .promo-card--bonds .promo-eyebrow{ color:var(--c4-accent-2); }
  .promo-card--bonds .promo-cta:hover{ background:var(--c4-accent); color:#1a0f3d; }

  .data-grid{ position:absolute; inset:0; z-index:0; opacity:.5; overflow:hidden; }
  .data-col{
    position:absolute; top:0; display:flex; flex-direction:column; gap:14px;
    font-family:'Inter',sans-serif; font-size:.66rem; font-weight:600; color:var(--c4-accent-2);
    animation:tickScroll linear infinite; opacity:.55;
  }
  .data-col span{ white-space:nowrap; }
  .data-col--1{ right:20px; animation-duration:9s; }
  .data-col--2{ right:70px; animation-duration:12s; animation-delay:-3s; }
  .data-col--3{ right:118px; animation-duration:7.5s; animation-delay:-1.5s; }
  @keyframes tickScroll{ 0%{ transform:translateY(-50%); } 100%{ transform:translateY(0%); } }

  .pulse-ring{
    position:absolute; right:34px; bottom:28px; width:56px; height:56px; border-radius:50%;
    border:1.5px solid var(--c4-accent); opacity:.6;
  }
  .pulse-ring::after{
    content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--c4-accent);
    animation:ringPulse 2.4s ease-out infinite;
  }
  @keyframes ringPulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  .promo-card:focus-visible{ outline:2.5px solid #fff; outline-offset:3px; }
