:root{--tf-bg:#0a0f17;--tf-text:#e9eef2;--tf-muted:#9fb0c0;--tf-green:#69d08a}
*{box-sizing:border-box}
body.tf-body{background:radial-gradient(1200px 700px at 80% -10%, #10331e55, transparent),radial-gradient(1000px 600px at -10% 110%, #0f3b2550, transparent),var(--tf-bg);color:var(--tf-text);font-family:'Sora',system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{text-decoration:none}



/* NAV */
.tf-navbar{background:rgba(8,12,20,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);transition:all .25s}
.tf-navbar.scrolled{background:linear-gradient(180deg,rgba(8,12,20,.9),rgba(8,12,20,.75));border-bottom-color:rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.tf-brand-text{color:var(--tf-text);font-weight:700;letter-spacing:.2px}
.tf-toggler{border:1px solid rgba(255,255,255,.2)}
.tf-toggler:focus{box-shadow:0 0 0 .2rem rgba(105,208,138,.25)}
.tf-nav .nav-link{color:rgba(233,238,242,.92);padding:.9rem 1.1rem;transition:color .2s,transform .2s}
.tf-nav .nav-link:hover{color:var(--tf-green);transform:translateY(-1px)}
.tf-btn-green{background:linear-gradient(135deg,var(--tf-green),#8be1a4);color:#0a0f17;font-weight:600;border:0;box-shadow:0 10px 18px rgba(0,0,0,.25);transition:transform .2s,filter .2s,box-shadow .2s}
.tf-btn-green:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* ---------- Navbar height & item spacing tweaks ---------- */

/* make the bar a bit taller */
.tf-navbar{ --nav-pad: 1.15rem; }          /* was ~0.9rem */
.tf-navbar.scrolled{ --nav-pad: .85rem; }  /* was ~0.55rem */

/* bigger click area and gaps between items on desktop */
@media (min-width: 992px){
  /* put space between <li> items */
  .tf-nav{ display:flex; gap: 1.1rem; }

  /* slightly taller links for a nicer hit area */
  .tf-nav .nav-link{ padding: .85rem 1.1rem; }  /* was ~.65rem 1rem */
}

/* optional: if any Bootstrap margins linger, neutralize them */
@media (min-width: 992px){
  .tf-nav > .nav-item{ margin: 0; }
}

/* optional: make sure in-page anchor links don't hide under the fixed navbar */
:root{ --tf-nav-offset: 90px; } /* adjust if you tweak more */
html{ scroll-padding-top: var(--tf-nav-offset); }




/* ================= Language pill + dropdown (classic green→gold) ================= */
.tf-lang { position: relative; }

.tf-lang-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  height:42px; padding:0 14px; border-radius:999px;
  color:#e9f4ee; background: rgba(10,15,20,.35);
  border:1px solid rgba(214,181,111,.35); /* gold edge */
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.tf-lang-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 8px rgba(30,164,99,.12);
  border-color: rgba(214,181,111,.55);
  background: rgba(10,15,20,.5);
}
.tf-caret{
  width: 8px; height: 8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity:.8; transition: transform .18s ease;
}
.tf-lang.open .tf-caret{ transform: rotate(-135deg) translateY(1px); }

/* Menu */
.tf-lang-menu{
  position:absolute; right:0; top: calc(100% + 10px);
  min-width:230px; padding:8px; margin:0; list-style:none;
  background: rgba(12,16,22,.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow: 0 22px 60px rgba(0,0,0,.35);
  transform-origin: top right; transform: scale(.96) translateY(-6px);
  opacity:0; visibility:hidden; z-index:1000;
  transition: transform .16s ease, opacity .16s ease, visibility .16s step-end;
}
.tf-lang.open .tf-lang-menu{
  transform: scale(1) translateY(0);
  opacity:1; visibility:visible; transition: transform .18s ease, opacity .18s ease, visibility 0s;
}
.tf-lang-menu li{
  padding:10px 12px; border-radius:10px; cursor:pointer; color:#e9f4ee;
  transition: background .15s ease, transform .15s ease;
}
.tf-lang-menu li:hover{ background: rgba(30,164,99,.12); transform: translateX(2px); }
.tf-lang-menu li.active{ background: rgba(214,181,111,.14); }

/* Mobile: keep dropdown readable inside collapsed menu */
@media (max-width: 991.98px){
  .tf-lang-menu{
    position: static; transform:none; opacity:1; visibility:visible;
    background: rgba(12,16,22,.6); border:1px solid rgba(255,255,255,.06); margin-top:8px;
  }
}


/* HERO */
.tf-hero{padding-top:3rem;padding-bottom:2rem}
.py-6{padding-bottom:4rem}.pt-6{padding-top:4rem}
.tf-hero-chip{display:inline-block;color:#cfe7db;font-weight:600;background:rgba(105,208,138,.12);border:1px solid rgba(105,208,138,.35);padding:.7rem 1.2rem;border-radius:999px}
.tf-hero-title{font-weight:700;line-height:.98;letter-spacing:-.02em;font-size:clamp(2.4rem,6vw,5rem);color:#f5f9fd;margin-top:.2rem}
.tf-hero-sub{color:var(--tf-muted);max-width:48ch;font-size:clamp(1rem,2vw,1.12rem)}
.tf-hero-art{max-width:640px}.tf-hero-phone{width:100%;display:block;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6))}
.tf-orbit{position:absolute;left:-60px;top:20px;width:140px;height:140px;border-radius:50%;border:1px dashed rgba(255,255,255,.08);color:#e3f6ec99;display:grid;place-items:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;animation:spin 18s linear infinite}
.tf-orbit span{transform:rotate(-20deg)}@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width: 575.98px){
  .tf-hero-title{ margin-bottom: .75rem; }
}


/* LIVE + WIDGETS */
.tf-widget{background:#17212b;border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.tf-widget-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#202b36;border:1px solid rgba(255,255,255,.06)}
#ticker{border:1px solid rgba(255,255,255,.06)}
.ticker-item{min-width:max-content;opacity:.95}
.ticker-item strong{margin-right:.45rem}

/* FEATURES */
.tf-feat-title{font-weight:800;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em}
.tf-feat-item{padding:.35rem 0}
.tf-feat-icon{width:52px;height:52px;border-radius:999px;background:#0f1722;padding:10px;border:1px solid rgba(255,255,255,.06)}
.tf-portfolio-wrap{position:relative;max-width:560px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.tf-portfolio-img{border-radius:1rem}
.tf-line{position:absolute;height:2px;width:48%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(111,207,151,.4),rgba(255,255,255,0));opacity:.8}
.tf-line-1{left:-10%;top:18%;animation:lineMove 7s ease-in-out infinite}
.tf-line-2{left:-12%;top:38%;animation:lineMove 8s ease-in-out infinite .4s}
.tf-line-3{right:-12%;bottom:34%;animation:lineMove 9s ease-in-out infinite .2s}
.tf-line-4{right:-10%;bottom:16%;animation:lineMove 7.5s ease-in-out infinite .6s}
@keyframes lineMove{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
.tf-stat{background:#121a24;border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 36px rgba(0,0,0,.28)}
.tf-stat-num1{font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem)}

/* PREMIUM */
.tf-premium-title{font-weight:600;letter-spacing:-.01em;font-size:clamp(1.6rem,4.6vw,3.2rem);line-height:1.15}
.tf-premium-item .tf-premium-dot{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(105,208,138,.10);color:#9be3b6;border:1px solid rgba(105,208,138,.35)}
.tf-phone-wrap{position:relative;width:min(340px,86%);height:auto}
.tf-phone-img{width:100%;height:auto;display:block;border-radius:1.25rem;filter:drop-shadow(0 28px 60px rgba(0,0,0,.55));transform:translateZ(0)}
.tf-coin-float{position:absolute;right:-8%;top:40%;width:110px;height:auto;transform-origin:center;animation:coinFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
@keyframes coinFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}
.tf-rings{position:absolute;inset:-16% -20% -16% -20%;border-radius:50%;background:radial-gradient(circle at center,rgba(155,227,182,.08) 0%,transparent 45%),radial-gradient(circle at center,rgba(155,227,182,.06) 0%,transparent 65%);pointer-events:none}
.tf-rings::before,.tf-rings::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(255,255,255,.06)}
.tf-rings::after{inset:22%}
[data-zoom]{transform:scale(.94) translateY(10px) rotate(-.4deg);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
[data-zoom].in-view{transform:scale(1) translateY(0) rotate(0)}

/* FOOTER */
.tf-footer{background:transparent;border-top:1px solid rgba(255,255,255,.06)}

/* responsive tweaks */
@media (max-width: 991.98px){.tf-hero{padding-top:7.25rem}.tf-orbit{display:none}.tf-hero-art{max-width:480px;margin-top:1.25rem}.tf-coin-float{right:-4%;width:88px}}
@media (max-width: 575.98px){.tf-hero-title{font-size:clamp(2.2rem,10vw,3.2rem)}.tf-hero-sub{font-size:1rem}.tf-hero-chip{padding:.6rem 1rem}.tf-premium-title{font-size:clamp(1.4rem,8vw,2.1rem)}.tf-phone-wrap{width:min(360px,92%)}.tf-coin-float{display:none}}


/* ===================== Enhancements: parallax + hover glows ===================== */
:root { --tf-gold:#d6b56f; }

/* nav underline effect */
.tf-nav .nav-link{ position:relative }
.tf-nav .nav-link::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.45rem; height:2px; width:0;
  background: linear-gradient(90deg, var(--tf-green), var(--tf-gold));
  border-radius:2px; transition: width .25s ease;
}
.tf-nav .nav-link:hover::after{ width: calc(100% - 2rem); }

/* bullet dots glow */
.tf-premium-item .tf-premium-dot,
.tf-feat-icon{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
  will-change: transform, filter;
}
.tf-premium-item:hover .tf-premium-dot{
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 6px rgba(105,208,138,.12), 0 0 24px rgba(105,208,138,.35);
  border-color: rgba(105,208,138,.6);
  filter: saturate(1.1);
}
.tf-feat-icon:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 6px rgba(105,208,138,.10);
  border-color: rgba(105,208,138,.45);
}

/* cards + stats hover */
.tf-widget{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.tf-widget:hover{
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(110,231,160,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.tf-stat{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tf-stat:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0,0,0,.35);
  border-color: rgba(110,231,160,.35);
}

/* parallax performance hints */
.tf-phone-img, .tf-coin-float, .tf-rings{ will-change: transform; }
@media (pointer: coarse){ .tf-nav .nav-link::after{ display:none } }

/* ============================ CTA STRIP ============================ */
.tf-cta-card{
  position:relative;
  border: 1px solid transparent;
  background:
    linear-gradient(#101721, #101721) padding-box,
    radial-gradient(120% 100% at 85% 20%, rgba(110,231,160,.18), rgba(110,231,160,0)) border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.tf-cta-card::after{
  /* faint outline */
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.06); pointer-events:none;
}
.tf-cta-title{ font-weight:800; font-size: clamp(1.4rem, 3.3vw, 2.6rem); letter-spacing:-.015em; line-height:1.12 }
.tf-cta-art{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
}
/* abstract shapes on the right */
.tf-cta-art::before, .tf-cta-art::after{
  content:''; position:absolute; right:-8%; top:-10%;
  width:60%; height:160%;
  background:
    radial-gradient(50% 50% at 60% 50%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(60% 60% at 70% 40%, rgba(255,255,255,.04), transparent 70%);
  filter: blur(2px);
}
.tf-cta-art::after{
  right: 0; top: 10%;
  width:40%; height: 120%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.06), transparent 60%);
  opacity:.5;
}
/* CTA button shimmer */
.tf-cta-btn{ position:relative; overflow:hidden }
.tf-cta-btn::after{
  content:''; position:absolute; inset:-200% -40% auto auto; width:40%; height:300%;
  transform: rotate(25deg); background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.4), rgba(255,255,255,.0));
  transition: transform .8s ease;
}
.tf-cta-btn:hover::after{ transform: translateX(-220%) rotate(25deg); }

/* tilt hover feedback */
[data-tilt]{ transform-style: preserve-3d; transition: transform .2s ease; will-change: transform }
[data-tilt].tilting{ box-shadow: 0 28px 70px rgba(0,0,0,.45) }
@media (max-width: 991.98px){
  .tf-cta-art::before, .tf-cta-art::after{ display:none }
}

/* ============================ BUILD PORTFOLIO SECTION ============================ */
.tf-build-title{
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.05;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
}

.tf-build-art-wrap{
  position:relative;
  max-width: 560px;
  margin-inline:auto;
}

.tf-build-art{
  width:100%;
  height:auto;
  display:block;
  border-radius:20px;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.55));
}

.tf-build-dots{
  position:absolute; inset:-14% -10% -14% -10%;
  border-radius:28px;
  background:
    radial-gradient(70% 70% at 20% 20%, rgba(111,207,151,.10), transparent 60%),
    radial-gradient(60% 60% at 70% 60%, rgba(255,78,130,.10), transparent 62%);
  mask-image: radial-gradient(circle at 40% 40%, rgba(0,0,0,.9) 0%, transparent 70%);
  pointer-events:none;
}

/* Feature list */
.tf-pt-list{ margin-top: .5rem; }
.tf-pt-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 2px;
  transition: transform .2s ease;
}
.tf-pt-item:hover{ transform: translateX(4px); }

.tf-pt-ic{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  background:#0f1722; padding:8px;
  box-shadow: 0 0 0 0 rgba(105,208,138,.0);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tf-pt-item:hover .tf-pt-ic{
  box-shadow: 0 0 0 6px rgba(105,208,138,.10);
  border-color: rgba(105,208,138,.45);
}

.tf-pt-text .fw-semibold{ font-weight:700; }

.tf-pt-sep{
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
  margin-left: 60px;
  margin-right: 8px;
}

/* Parallax perf hints */
[data-parallax-lite] .tf-build-art,
[data-parallax-lite] .tf-build-dots{ will-change: transform; }

@media (max-width: 991.98px){
  .tf-build-art-wrap{ max-width:520px; }
}



/* ============================ ADVANTAGE / INVESTMENT ============================ */
.tf-adv-title{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.02;
  font-size:clamp(2rem, 5vw, 3.4rem);
}

.tf-adv-list .adv-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 4px;
  border-radius:12px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.tf-adv-list .adv-item:hover{
  transform: translateX(4px);
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.adv-ic{
  width:28px; height:28px; flex:0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(105,208,138,.35));
}

/* artwork */
.tf-adv-art-wrap{ position:relative; max-width:620px }
.tf-adv-art{
  width:100%; height:auto; display:block;
  border-radius:20px;
  filter: drop-shadow(0 38px 70px rgba(0,0,0,.55));
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.tf-adv-glow{
  position:absolute; inset:-14% -12% -18% -12%;
  pointer-events:none; border-radius:28px;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(111,207,151,.12), transparent 60%),
    radial-gradient(60% 50% at 20% 70%, rgba(79,192,141,.10), transparent 70%);
  filter: blur(2px);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  opacity:.9;
}

/* 3D tilt enhancements for Advantage artwork */
.tf-adv-art-wrap[data-tilt3d]{
  transform-style: preserve-3d;
  perspective: 1200px;
}
.tf-adv-art,
.tf-adv-glow{
  will-change: transform, opacity;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.tf-adv-art-wrap[data-tilt3d].tilting .tf-adv-art{
  /* slightly stronger drop shadow while tilting */
  filter: drop-shadow(0 46px 90px rgba(0,0,0,.6));
}

/* small screens */
@media (max-width: 991.98px){
  .tf-adv-art-wrap{ max-width:560px; margin-top:.5rem }
}



/* ============================ WEB3 WALLET ============================ */
.tf-wallet-title{
  font-weight:800; letter-spacing:-.02em; line-height:1.05;
  font-size: clamp(1.8rem, 4.4vw, 3rem); color: var(--tf-text);
}
.tf-wallet-sub{ color: var(--tf-muted); max-width: 52ch }

/* Light-ish card that still fits dark theme */
.tf-wallet-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

/* Segmented control */
.tf-segment{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.tf-seg-btn{
  position:relative; border:0; background:transparent; color:var(--tf-text);
  font-weight:600; padding:.7rem 1.2rem; border-radius:999px;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.tf-seg-btn:hover{ transform: translateY(-1px) }
.tf-seg-btn.active{
  background: linear-gradient(135deg, var(--tf-green), #8be1a4);
  color:#0a0f17;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Device stage + frame */
.tf-device-stage{
  background:#0f1722;
  border:1px solid rgba(255,255,255,.06);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.tf-device{
  position:relative;
  width:min(360px, 90%); aspect-ratio: 9 / 19.5;
  border-radius:36px; background:#0a0a0a;
  border:10px solid #111; box-shadow: inset 0 0 0 2px rgba(255,255,255,.05);
  transform-style: preserve-3d; perspective: 1200px;
}
/* notch */
.tf-device::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:42%; height:24px; background:#111; border-radius:0 0 16px 16px;
}
/* screen = the video */
.tf-device-screen{
  position:absolute; inset:52px 12px 12px 12px;   /* leave room for notch & bezels */
  width:calc(100% - 24px); height:calc(100% - 64px);
  border-radius:24px; object-fit:cover; background:#000;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* tilt flair when active */
.tf-device.tilting{ box-shadow: 0 36px 90px rgba(0,0,0,.55) }

@media (max-width: 991.98px){
  .tf-device{ width:min(420px, 100%) }
  .tf-device-stage{ padding: 1rem }
}



/* ============================ FAQ / POPULAR QUESTIONS ============================ */
.tf-faq-title{
  font-weight:800; letter-spacing:-.02em; line-height:1.03;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
}

.faq-item{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  margin: 14px 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq-item:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(0,0,0,.30); }

.faq-toggle{
  width:100%; text-align:left; background:transparent; border:0; color:inherit;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding: 20px 24px; border-radius:18px; cursor:pointer;
  font-weight:600; letter-spacing:.01em;
}
.faq-q{ font-size: clamp(1.05rem, 2.2vw, 1.35rem); }

/* Plus / minus icon built with CSS */
.faq-plus{
  position:relative; flex:0 0 auto; width:34px; height:34px;
  border-radius:999px; border:1px solid rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; background: var(--tf-green, #6fe39f);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-plus::before{ width:16px; height:2px; }
.faq-plus::after{ width:2px; height:16px; }
.faq-toggle:hover .faq-plus{
  box-shadow: 0 0 0 6px rgba(111, 227, 159, .10);
  border-color: rgba(111, 227, 159, .45);
}

/* Panel container (we animate height via JS) */
.faq-panel{
  overflow:hidden; height:0; opacity:.0;
  transition: opacity .2s ease;
}
.faq-panel-inner{
  padding: 0 24px 20px 24px; color: var(--tf-muted);
  line-height: 1.6;
  max-width: 90ch;
}

/* Open state */
.faq-item.open .faq-plus::after{ transform: scaleY(0); }  /* turn + into – */
.faq-item.open .faq-panel{ opacity:1; }





/* ?==========================BEGINING OF THE PLANS.HTML STYLING  */
/* ======================== PLANS – VISUALS, LAYOUT & REVEAL ======================== */
/* Uses your tokens if present; otherwise falls back to sensible defaults. */

/* Section typography helpers */
.tf-trade-plans .section-kicker{
  font: 600 .9rem/1 var(--ff-sans, system-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--tf-muted, #9aa3ab);
}
.tf-trade-plans .tf-adv-title{
  font-family: var(--ff-serif, ui-serif, Georgia, "Times New Roman", serif);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ------- Card base (glass + gradient hairline) ------- */
.plan-card{
  --accent:  #1ea463;                  /* can be overridden by variants */
  --accent2: #d6b56f;                  /* gold blend */
  --glow:    0 18px 40px rgba(30,164,99,.25);

  position: relative;
  display:flex; flex-direction:column; height:100%;
  border-radius: 20px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;

  will-change: transform;
  transform-style: preserve-3d;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    filter .25s ease;
}
.plan-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:.9; pointer-events:none;
}
.plan-card::after{
  content:""; position:absolute; inset:auto 16px 14px 16px; height:30px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,.35), transparent 70%);
  pointer-events:none;
}

/* Lift/glow on hover */
.plan-card:hover{
  box-shadow: 0 28px 90px rgba(0,0,0,.45), var(--glow, 0 0 0 rgba(0,0,0,0));
  border-color: rgba(214,181,111,.26);
}
.plan-card.tilting{ filter: saturate(1.02); }

/* Variants (optional) */
.plan-start   { --accent:#21c167; --accent2:#b1f4cf; --glow:0 18px 44px rgba(33,193,103,.28); }
.plan-pro     { --accent:#1ea463; --accent2:#d6b56f; --glow:0 18px 44px rgba(214,181,111,.28); }
.plan-premium { --accent:#3aa7ff; --accent2:#d6b56f; --glow:0 18px 44px rgba(58,167,255,.28); }

/* “Popular / Premium” badge */
.plan-badge{
  position:absolute; top:18px; right:18px;
  font: 700 .72rem/1 var(--ff-sans, system-ui);
  letter-spacing:.06em; text-transform:uppercase;
  color:#0b1116;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding:.35rem .6rem; border-radius:999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

/* Title + meta grid */
.plan-top{ margin-bottom: 10px; }
.plan-name{
  font-family: var(--ff-serif, ui-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(1.15rem,1.4vw,1.45rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.plan-meta{
  display:grid; grid-template-columns:1fr;
  row-gap:.65rem;
  margin:.75rem 0 1.25rem;
  flex: 1 1 auto; /* makes CTA sit at bottom */
}
.plan-meta .pair{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.35rem 0;
  border-top:1px dashed rgba(255,255,255,.08);
}
.plan-meta .pair:first-child{ border-top:none; }
.plan-meta span{ color: var(--tf-muted, #9aa3ab); font-size:.95rem; }
.plan-meta strong{
  font-weight:700; letter-spacing:.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Accent percentage */
.plan-card .accent{
  display:flex; align-items:baseline; gap:.12rem;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-card .accent .num{ font-weight:800; font-size: clamp(1.45rem,2.2vw,1.8rem); line-height:1; }
.plan-card .accent .unit{ font-weight:700; font-size:1rem; opacity:.9; }

/* CTA */
.plan-cta{
  margin-top:.8rem;
  box-shadow: var(--glow, 0 0 0 rgba(0,0,0,0));
  transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.plan-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* ------- Staggered reveal on scroll ------- */
@supports (transition: transform){
  .plan-card .plan-top,
  .plan-card .plan-meta .pair,
  .plan-card .plan-cta{
    opacity:0; transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  }
  .plan-card.in-view .plan-top{ opacity:1; transform:none; transition-delay:.05s; }
  .plan-card.in-view .plan-cta{ opacity:1; transform:none; transition-delay:.45s; }

  .plan-card.in-view .plan-meta .pair:nth-child(1){ opacity:1; transform:none; transition-delay:.10s; }
  .plan-card.in-view .plan-meta .pair:nth-child(2){ opacity:1; transform:none; transition-delay:.15s; }
  .plan-card.in-view .plan-meta .pair:nth-child(3){ opacity:1; transform:none; transition-delay:.20s; }
  .plan-card.in-view .plan-meta .pair:nth-child(4){ opacity:1; transform:none; transition-delay:.25s; }
  .plan-card.in-view .plan-meta .pair:nth-child(5){ opacity:1; transform:none; transition-delay:.30s; }
  .plan-card.in-view .plan-meta .pair:nth-child(6){ opacity:1; transform:none; transition-delay:.35s; }
}

/* Small screens */
@media (max-width: 991.98px){
  .plan-card{ padding:20px; }
  .plan-meta{ row-gap:.55rem; }
}


/* ===================== Investment Credibility Banner ===================== */
.tf-invest-cred .tf-panel{
  position: relative;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(1200px 800px at -10% 0%, rgba(255, 255, 255, 0.005), transparent 60%),
    radial-gradient(1100px 700px at 110% 10%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  background-color: #1a222b;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 32px 110px rgba(0,0,0,.55);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle pattern layer */
.tf-invest-cred .tf-panel::before{
  content:"";
  position:absolute; inset:0;
  opacity:.11; pointer-events:none;
  background:
    radial-gradient(90px 70px at 16% 30%, rgba(255,255,255,.18) 0 6%, transparent 7%) repeat,
    radial-gradient(120px 90px at 66% 40%, rgba(255,255,255,.16) 0 6%, transparent 7%) repeat;
  background-size: 420px 420px, 520px 520px;
  mix-blend-mode: overlay;
}

/* Center content */
.tf-invest-cred .content{
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  z-index: 2;
}
.tf-invest-cred .headline{
  font-family: var(--ff-serif, ui-serif, Georgia, "Times New Roman", serif);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-size: clamp(1.75rem, 3.8vw, 3rem);
  margin-bottom: clamp(16px, 2vw, 24px);
  color: #eef3f6;
}
.tf-invest-cred .lead{
  max-width: 760px;
  margin: 10px auto 18px;
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
}

/* CTA pink */
.tf-cta-pink{
  background: linear-gradient(135deg,#ff5e8e,#ff7ba4 55%,#ff98b8);
  color:#0b1116; font-weight:700;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(255,110,158,.28);
  transition: transform .18s ease, filter .2s ease, box-shadow .25s ease;
}
.tf-cta-pink:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* Small center thumb */
.tf-invest-cred .thumb-wrap{ margin: 6px auto 10px; }
.tf-invest-cred .thumb{
  width: 88px; height: 88px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
}

/* Left media block */
.tf-invest-cred .media-left,
.tf-invest-cred .media-right{
  position:absolute; inset:auto;
  z-index:1;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.45));
}
.tf-invest-cred .media-left{ left: clamp(10px, 3.5vw, 34px); top: clamp(28px, 5vw, 44px); }
.tf-invest-cred .media-right{ right: clamp(10px, 3.5vw, 34px); bottom: clamp(22px, 4vw, 40px); }

.tf-invest-cred figure img{
  display:block; width: clamp(180px, 22vw, 300px);
  height: auto; max-height: 420px; object-fit: cover;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.08);
  background: #2a333c;
}

/* Explicit heights at wide screens for the two figures */
@media (min-width: 992px){
  .tf-invest-cred .media-left img{ height: 420px; }
  .tf-invest-cred .media-right img{ height: 320px; }
}

/* Phone chip (slanted) */
.tf-invest-cred .phone-chip{
  position:absolute;
  left: clamp(120px, 23vw, 340px); top: clamp(220px, 28vw, 300px);
  transform: rotate(-10deg);
  z-index: 2;
  background: linear-gradient(135deg,#225f0d,#09651a);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(80, 9, 33, 0.28);
  padding: 8px 10px;
}
.tf-invest-cred .phone-chip span{
  display:block; background:#fff; color:#0b1116; font-weight:700;
  padding: 6px 12px; border-radius: 8px;
  font-size: .95rem; letter-spacing:.02em;
}

/* Thought bubble (CSS) */
.tf-invest-cred .bubble{
  position:absolute; right: clamp(12px, 4vw, 42px); top: clamp(24px, 5vw, 64px);
  z-index: 2;
}
.tf-invest-cred .bubble-body{
  border: 3px solid #0d4e1d; color:#e9f0f4;
  padding: 14px 18px; border-radius: 34px; text-align:center;
  font: 600 .95rem/1.15 var(--ff-sans, system-ui);
  background: rgba(255,255,255,.02);
  text-transform: uppercase; letter-spacing:.03em;
  box-shadow: 0 8px 22px rgba(255,110,158,.18);
}
.tf-invest-cred .bubble .dot{
  position:absolute; width:12px; height:12px; background:#0a3c05; border-radius:50%;
  opacity:.8; filter: drop-shadow(0 2px 4px rgba(255,110,158,.4));
}
.tf-invest-cred .bubble .d1{ right: -18px; top: 84px; }
.tf-invest-cred .bubble .d2{ right: -28px; top: 104px; width:10px; height:10px; }
.tf-invest-cred .bubble .d3{ right: -38px; top: 122px; width:8px;  height:8px; }

/* Reveal animation bits (section-level) */
.tf-invest-cred .content,
.tf-invest-cred .media-left,
.tf-invest-cred .media-right,
.tf-invest-cred .phone-chip,
.tf-invest-cred .bubble{ opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }

#invest-cred.in .content{ opacity:1; transform:none; transition-delay:.05s; }
#invest-cred.in .media-left{ opacity:1; transform:none; transition-delay:.15s; }
#invest-cred.in .media-right{ opacity:1; transform:none; transition-delay:.25s; }
#invest-cred.in .phone-chip{ opacity:1; transform: rotate(-10deg); transition-delay:.35s; }
#invest-cred.in .bubble{ opacity:1; transform:none; transition-delay:.45s; }

/* Float keyframes (if motion allowed) */
@media (prefers-reduced-motion: no-preference){
  .tf-invest-cred .media-left img{ animation: floatY 6.5s ease-in-out infinite; }
  .tf-invest-cred .media-right img{ animation: floatY 7.2s ease-in-out .5s infinite; }
  .tf-invest-cred .phone-chip{ animation: bob 5.5s ease-in-out 1.2s infinite; }
  @keyframes floatY{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
  @keyframes bob{ 0%,100%{ transform: translateY(0) rotate(-10deg) } 50%{ transform: translateY(-6px) rotate(-10deg) } }
}

/* Responsive trims */
@media (max-width: 991.98px){
  .tf-invest-cred .media-left{ left: 14px; top: 14px; }
  .tf-invest-cred .media-right{ right: 14px; bottom: 14px; }
  .tf-invest-cred .phone-chip{ left: 90px; top: 180px; }
  .tf-invest-cred .bubble .d1{ right:-14px } .tf-invest-cred .bubble .d2{ right:-22px } .tf-invest-cred .bubble .d3{ right:-30px }
}
@media (max-width: 575.98px){
  .tf-invest-cred .media-right{ display:none; }
  .tf-invest-cred .phone-chip{ left: 70px; top: 160px; }
}




/* ABOUT.HTML STYLING STARTS HERE  */
/* ============================================================================================== */
/* ============================ ABOUT PAGE – VISUALS, LAYOUT & REVEAL ============================ */

/* ================== ABOUT (4 sections) ================== */
:root{
  --green:#21c167;
  --gold:#d6b56f;
  --panel:#121821;
  --glassA: rgba(255,255,255,.05);
  --glassB: rgba(255,255,255,.03);
  --stroke: rgba(255,255,255,.08);
}

.title-green{ color: var(--green); font-weight: 800; letter-spacing: .2px; }
.kicker{ color: #a9b4bf; opacity:.85; max-width: 1100px; margin-inline:auto; }

/* Panels */
.glass-card{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg,var(--glassA),var(--glassB));
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.glass-thin{
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

/* Split cards (Mission / Ventures) */
.split-card{
  display:grid;
  gap: 12px 24px;
  grid-template-columns: 260px 1fr;
  padding: clamp(18px, 2vw, 26px);
}
.split-card .split-h h2{ margin:0; }
@media (max-width: 767.98px){
  .split-card{ grid-template-columns: 1fr; }
}

/* Band rows (What / Approach) */
.bands .band-card{ position: relative; }
.bands .band-card::before{
  content:""; position:absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px 160px at -10% 0, rgba(33,193,103,.06), transparent 65%);
  opacity:.65;
}

/* Sidebar accordion (class-based) */
.sidebar .sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.sidebar .sub.open {
  max-height: 900px; /* bigger than the tallest submenu */
}

/* Chevron rotation (optional clarity) */
.sidebar [data-toggle] .chev { transition: transform .2s ease; }
.sidebar [data-toggle][aria-expanded="true"] .chev { transform: rotate(90deg); }


/* Stats */
.stat-card .stat-num{
  font-weight: 800;
  font-family: var(--ff-serif, ui-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(1.8rem, 3.6vw, 2.25rem);
  color:#eaf2f7;
  margin-bottom: 4px;
}
.stat-card .suffix{ color: var(--green); margin-left: 4px; }
.tf-muted{ color:#a9b4bf; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* Tilt hover state (resting shadow) — transform handled via JS */
[data-tilt]{ will-change: transform; transform-style: preserve-3d; }
[data-tilt]:hover{ box-shadow: 0 40px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(214,181,111,.15) inset; }

/* Section spacing */
.about-section{ position:relative; }
.about-section + .about-section{ margin-top: 12px; }

/* Hero title weight */
.fw-800{ font-weight: 800; }



/* ================== BOARD OF DIRECTORS ================== */
.dir-card{
  position: relative;
  padding: clamp(18px, 1.8vw, 22px);
  border-radius: 18px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  min-height: 100%;
}
.dir-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(214,181,111,.16) inset;
}

.dir-top .tf-muted{ color:#9fb0ba; }
.dir-dot{
  width: 14px; height: 14px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--green), #0e7f47 60%, transparent 65%);
  box-shadow: 0 0 0 3px rgba(33,193,103,.18);
  flex: 0 0 auto;
}

/* Avatar */
.dir-avatar-wrap{
  position: relative;
  width: 140px; height: 140px;
  margin: 18px 0 10px;
  border-radius: 50%;
  display: grid; place-items: center;
  will-change: transform;
}
@media (max-width: 575.98px){
  .dir-avatar-wrap{ width: 120px; height: 120px; }
}

.dir-avatar{
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform .35s ease, filter .35s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dir-card:hover .dir-avatar{ transform: scale(1.05); }

/* Animated ring around the avatar */
.dir-ring{
  position:absolute; inset: -1px; border-radius: 50%;
  padding: 2px; pointer-events:none;
  background:
    conic-gradient(from 0deg, var(--green), rgba(33,193,103,.4), transparent 70%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ringSpin 8s linear infinite paused;
  opacity:.9;
}
.reveal.in .dir-ring{ animation-play-state: running; }

@keyframes ringSpin{
  to{ transform: rotate(360deg); }
}

/* Bio / Meta */
.dir-meta li + li{ margin-top: 4px; }
.dir-bio{ color:#c8d1d8; line-height: 1.7; }

/* Tighten card internals */
.dir-card h3{ line-height: 1.25; }


/* LEARN.HTML STYLING STARTS HERE */
/* ============================================================================================== */
/* ============================ LEARN PAGE – VISUALS, LAYOUT & REVEAL ============================

/* ============ Learn Page (scoped) ============ */
.lrn {
  --lrn-bg: #0b1219;
  --lrn-surface: #0f1722;
  --lrn-border: rgba(255,255,255,.08);
  --lrn-fore: #e9f0fb;
  --lrn-muted: #9db0c8;
  --lrn-green: #39d98a;        /* base green */
  --lrn-green-ghost: color-mix(in oklab, var(--lrn-green), #000 82%);
  --lrn-glow: 0 12px 28px rgba(0,0,0,.35);
  color: var(--lrn-fore);
  background: transparent;
}

.lrn-section {
  max-width: 1140px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 80px) 16px;
}

.lrn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 992px) {
  .lrn-row { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
  .lrn-section.alt .lrn-col-media { order: 2; }
  .lrn-section.alt .lrn-col-text  { order: 1; }
}

.lrn-head { margin-bottom: 10px; }
.lrn-title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Sora", Arial, sans-serif;
  font-weight: 750;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.lrn-underline {
  width: 62px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lrn-green), color-mix(in oklab, var(--lrn-green), #fff 15%));
  box-shadow: 0 0 0 4px var(--lrn-green-ghost);
}
.lrn-copy { color: var(--lrn-muted); font-size: 1.05rem; line-height: 1.75; }
.lrn-bullets { margin: 10px 0 0 0; padding-left: 20px; }
.lrn-bullets li { margin: 6px 0; }
.lrn-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--lrn-border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

/* Media block */
.lrn-media {
  aspect-ratio: 16/9;
  border-radius: 16px;
  background: linear-gradient(135deg,#1b2330,#0f1623 60%);
  border: 1px solid var(--lrn-border);
  box-shadow: var(--lrn-glow);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
.lrn-media::after { /* gentle inner glow */
  content: "";
  position: absolute; inset: -20% -10% auto;
  height: 60%;
  background: radial-gradient(120px 70px at 20% 0%, var(--lrn-green-ghost), transparent 60%);
  opacity: .45;
  pointer-events: none;
}
.lrn-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.lrn-media:hover img { transform: scale(1.06); }

/* CTA */
.lrn-cta {
  padding: clamp(34px, 4.5vw, 64px) 16px clamp(70px, 6vw, 90px);
}
.lrn-cta__inner{
  max-width: 1140px; margin-inline:auto; text-align:center;
  border-radius: 18px; border: 1px solid var(--lrn-border);
  background: radial-gradient(1200px 300px at 50% 0%, var(--lrn-green-ghost), transparent 60%),
              linear-gradient(180deg, #121a25, #0f1722 60%);
  padding: clamp(34px, 4.5vw, 58px) clamp(16px, 2.6vw, 28px);
  box-shadow: var(--lrn-glow);
}
.lrn-cta__inner h3{ margin:0 0 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;}
.lrn-cta__inner p { color: var(--lrn-muted); margin: 0 0 18px; }
.lrn-btn{
  display:inline-block; padding:12px 18px; border-radius: 12px;
  background: var(--lrn-green); color:#07120c; text-decoration:none; font-weight:700;
  box-shadow: 0 8px 22px rgba(57,217,138,.25), inset 0 0 0 1px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease;
}
.lrn-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(57,217,138,.32); }
.lrn-btn:active{ transform: translateY(0); }

/* Floating Outline */
.lrn-outline{
  position: sticky; top: clamp(70px, 6vw, 110px);
  max-width: 1140px; margin: 8px auto 0; padding: 0 16px;
  z-index: 10;
}
.lrn-outline__toggle{
  display:none; align-items:center; gap:8px;
  background: rgba(255,255,255,.04); color: var(--lrn-fore);
  border: 1px solid var(--lrn-border); border-radius: 10px;
  padding: 10px 12px; font-weight: 600;
}
.lrn-outline__list{
  width: min(230px, 44vw);
  background: linear-gradient(180deg, #0e1621, #0c141e);
  border: 1px solid var(--lrn-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--lrn-glow);
  display:grid; gap:4px;
}
.lrn-outline__list a{
  display:block; padding:10px 12px; border-radius:10px;
  text-decoration:none; color: color-mix(in oklab, var(--lrn-fore), #8fa2bb 30%);
  transition: background .18s ease, color .18s ease;
  font-size:.95rem;
}
.lrn-outline__list a:hover{ background: rgba(255,255,255,.04); color: var(--lrn-fore); }
.lrn-outline__list a.active{
  color: var(--lrn-fore);
  background: rgba(57,217,138,.12);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lrn-green), #000 22%);
}


/* remove numbers from the floating outline list */
.lrn-outline__list,
.lrn-outline__list li {
  list-style: none;     /* no markers */
}

.lrn-outline__list {
  margin: 0;            /* reset default OL margin */
  padding-left: 8px;    /* keep our compact padding */
}


/* Desktop rail: move to fixed right */
@media (min-width: 1200px){
  .lrn-outline{
    position: fixed; right: clamp(8px, 3vw, 36px);
    top: clamp(90px, 7vw, 140px);
    margin:0; padding:0; max-width:none;
  }
}

/* Mobile drawer */
@media (max-width: 1199.98px){
  .lrn-outline__toggle{ display:inline-flex; }
  .lrn-outline:not(.open) .lrn-outline__list{ display:none; }
  .lrn .lrn-caret{ transition: transform .18s ease; }
  .lrn-outline.open .lrn-caret{ transform: rotate(180deg); }
}

/* Reveal on scroll */
.lrn-section .lrn-col-text,
.lrn-section .lrn-media { opacity: 0; transform: translateY(14px); }
.lrn-section.is-inview .lrn-col-text,
.lrn-section.is-inview .lrn-media { opacity: 1; transform: none; transition: all .6s cubic-bezier(.2,.7,.2,1); }
.lrn-section.is-inview .lrn-media { transition-delay: .05s; }




/* FOOTER STYLING */
/* ================================================= */
/* ==================== Trivista Footer ==================== */

/* ---- Minimal footer (Trivista Partners) ---- */
.tv-footer{
  border-top: 1px solid rgba(255,255,255,.12);
  background: #0d131a;            /* keep simple & dark; tweak if needed */
  color: #e6edf5;
  font-size: 0.95rem;
}
.tv-wrap{
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 16px;             /* short and compact */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Brand */
.tv-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.tv-logo{
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #21c167;            /* simple brand green block */
  color: #0b1116;
  font-weight: 800;
  letter-spacing: .2px;
}
.tv-name{ font-weight: 700; }
.tv-name strong{ font-weight: 800; }

/* Legal links */
.tv-legal{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tv-legal a{
  color: #c8d2dc;
  text-decoration: none;
}
.tv-legal a:hover{ color: #ffffff; }
.tv-dot{ opacity: .4; }

/* Copyright */
.tv-copy{ color: #9fb0c0; }

/* Small screens: stack neatly */
@media (max-width: 640px){
  .tv-wrap{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px;
  }
  .tv-legal{ gap: 8px; }
}

/* quick fix: prevent horizontal overflow on small screens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}