/* =========================================================
   RAprime — Premium Site Styles
   ========================================================= */

:root{
  /* dark (header / footer / status) */
  --d-bg-0:        #05070d;
  --d-bg-1:        #0a0e1a;
  --d-bg-2:        #11172a;
  --d-line:        rgba(255,255,255,0.08);
  --d-line-2:      rgba(255,255,255,0.14);
  --d-text:        #e9edf6;
  --d-text-dim:    #a8b1c7;
  --d-text-soft:   #6e7691;

  /* light (body sections) */
  --bg:            #f4f6fb;
  --bg-alt:        #ffffff;
  --bg-soft:       #eef1f8;
  --bg-tint:       linear-gradient(180deg, #f6f7fb 0%, #eef1f8 100%);
  --text:          #030641;
  --text-2:        #2d3a55;
  --text-mute:     #5a6478;
  --text-soft:     #8a93a8;
  --line:          #e3e7ef;
  --line-2:        #d4dae6;
  --shadow-sm:     0 4px 14px rgba(10,20,40,.06);
  --shadow-md:     0 12px 28px rgba(10,20,40,.08);
  --shadow-lg:     0 24px 60px -16px rgba(10,20,40,.18);

  /* brand — primary navy + secondary blue */
  --brand-1:       #030641;  /* primary */
  --brand-2:       #0e3789;  /* secondary */
  --brand-3:       #2950bd;  /* light accent */

  /* accent system (used to be gold; now mapped to brand blue) */
  --gold-1:        #2950bd;
  --gold-2:        #0e3789;
  --gold-3:        #030641;
  --gold-glow:     rgba(14,55,137,0.35);
  --gold-glow-2:   rgba(14,55,137,0.18);

  /* gold (preserved ONLY for PRIME package card via scoped override) */
  --pkg-gold-1:    #f5d77a;
  --pkg-gold-2:    #d4af37;
  --pkg-gold-3:    #a07c1c;
  --pkg-gold-glow: rgba(212,175,55,0.35);

  --navy:          #030641;
  --navy-2:        #0e3789;
  --accent:        #4f8cff;
  --danger:        #ef4760;
  --success:       #1abc88;

  --maxw: 1320px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
html[dir="rtl"] body{ font-family: 'Tajawal', 'Inter', system-ui, sans-serif; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img{ display:block; max-width:100%; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============== STATUS BAR ============== */
.statusbar{
  position: relative;
  background: linear-gradient(90deg, #060912 0%, #0a0f1f 50%, #060912 100%);
  border-bottom: 1px solid var(--d-line);
  font-size: 12.5px;
  color: var(--d-text-dim);
  z-index: 60;
  overflow: hidden;
}
.statusbar::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
  opacity:.18;
  pointer-events:none;
  animation: shimmer 6s linear infinite;
  background-size: 200% 100%;
}
@keyframes shimmer{
  0%{ background-position: -100% 0; }
  100%{ background-position: 200% 0; }
}
.statusbar-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; position: relative;
}
.status-left, .status-right{ display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
.status-item{ display:inline-flex; align-items:center; gap:8px; transition: color .25s var(--ease); }
.status-item i{ color: var(--gold-2); font-size: 12px; }
.status-item:hover{ color: var(--gold-1); }
.status-divider{ width:1px; height:14px; background: var(--d-line-2); }
.status-pulse{
  width:8px; height:8px; border-radius:50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(43,212,156,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(43,212,156,.6);}
  70%{ box-shadow: 0 0 0 10px rgba(43,212,156,0);}
  100%{ box-shadow: 0 0 0 0 rgba(43,212,156,0);}
}
.market-ticker{ display:flex; align-items:center; gap:14px; font-variant-numeric: tabular-nums; font-weight: 500; }
.tick{ display:inline-flex; align-items:center; gap:6px; }
.tick .sym{ color: var(--d-text); font-weight:600; }
.tick.up   .price{ color: var(--success); }
.tick.down .price{ color: var(--danger); }
.tick i{ font-size: 9px; }
.social-mini{ display:flex; align-items:center; gap: 10px; }
.social-mini a{
  width: 24px; height: 24px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 6px; color: var(--d-text-dim);
  transition: all .25s var(--ease);
}
.social-mini a:hover{ color: #fff; background: var(--gold-2); transform: translateY(-2px); }

/* ============== HEADER ============== */
.header{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(3,6,65,0.98) 0%, rgba(3,6,65,0.94) 60%, rgba(14,55,137,0.90) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(14,55,137,.45);
  box-shadow: 0 6px 22px rgba(3,6,65,.45);
  transition: all .35s var(--ease);
  color: var(--d-text);
}
.header.scrolled{
  background: linear-gradient(180deg, #030641 0%, rgba(3,6,65,0.99) 60%, rgba(14,55,137,0.96) 100%);
  box-shadow: 0 14px 36px rgba(3,6,65,.65), 0 1px 0 rgba(14,55,137,.50);
}
.nav{
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap: 18px;
}
.brand{ display:inline-flex; align-items:center; gap:12px; flex-shrink: 0; }
.brand img{
  height: 48px; width: auto;
  filter: drop-shadow(0 3px 14px rgba(14,55,137,.25));
  transition: transform .35s var(--ease);
}
.brand:hover img{ transform: scale(1.04); }

.nav-list{ display:flex; align-items:center; list-style:none; margin:0; padding:0; gap: 4px; }
.nav-item{ position: relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--d-text-dim); border-radius: 10px; position: relative;
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.nav-link:hover,
.nav-item.open > .nav-link,
.nav-link.active{
  color: #fff;
  background: linear-gradient(135deg, rgba(14,55,137,.50), rgba(3,6,65,.40));
  box-shadow: inset 0 0 0 1px rgba(14,55,137,.45);
}
.nav-link .caret{ font-size: 10px; transition: transform .35s var(--ease), color .25s var(--ease); opacity:.7; }
.nav-link:hover .caret,
.nav-item.open > .nav-link .caret{ color: #6cf2bf; opacity: 1; }
.nav-item.open > .nav-link .caret{ transform: rotate(180deg); }
.nav-link::after{
  content:""; position:absolute;
  left:14px; right:14px; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, var(--brand-3), #4f8cff);
  border-radius: 2px; transform: scaleX(0);
  transform-origin: left center; transition: transform .35s var(--ease);
}
html[dir="rtl"] .nav-link::after{ transform-origin: right center; }
.nav-link:hover::after,
.nav-item.open > .nav-link::after{ transform: scaleX(1); }

/* ============== DROPDOWNS ============== */
.dropdown{
  position: absolute; top: calc(100% + 14px); left: 0;
  min-width: 280px; padding: 10px;
  background: linear-gradient(180deg, rgba(8,12,80,.98), rgba(3,6,65,.98));
  border: 1px solid var(--d-line-2);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(14,55,137,.08) inset;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility .25s linear;
  z-index: 100;
}
html[dir="rtl"] .dropdown{ left:auto; right:0; transform-origin: top right; }
.dropdown.align-right{ left:auto; right:0; transform-origin: top right; }
html[dir="rtl"] .dropdown.align-right{ right:auto; left:0; transform-origin: top left; }
.dropdown::before{
  content:""; position:absolute;
  top:-6px; left: 22px; width:12px; height:12px;
  background: rgba(8,12,80,.98);
  border-left: 1px solid var(--d-line-2);
  border-top: 1px solid var(--d-line-2);
  transform: rotate(45deg);
}
html[dir="rtl"] .dropdown::before{ left:auto; right: 22px; }
.dropdown.align-right::before{ left:auto; right: 22px; }
html[dir="rtl"] .dropdown.align-right::before{ right:auto; left: 22px; }
.nav-item.open > .dropdown{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.dropdown-item{
  display:flex; align-items:center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--d-text-dim); font-size: 13.5px; font-weight: 500;
  position: relative; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
  opacity: 0; transform: translateX(-6px);
}
html[dir="rtl"] .dropdown-item{ transform: translateX(6px); }
.nav-item.open .dropdown-item{ animation: ddIn .35s var(--ease-out) forwards; }
.nav-item.open .dropdown-item:nth-child(1){ animation-delay: .04s; }
.nav-item.open .dropdown-item:nth-child(2){ animation-delay: .08s; }
.nav-item.open .dropdown-item:nth-child(3){ animation-delay: .12s; }
.nav-item.open .dropdown-item:nth-child(4){ animation-delay: .16s; }
.nav-item.open .dropdown-item:nth-child(5){ animation-delay: .20s; }
.nav-item.open .dropdown-item:nth-child(6){ animation-delay: .24s; }
.nav-item.open .dropdown-item:nth-child(7){ animation-delay: .28s; }
.nav-item.open .dropdown-item:nth-child(8){ animation-delay: .32s; }
@keyframes ddIn{ to{ opacity:1; transform: translateX(0); } }
.dropdown-item:hover{ background: linear-gradient(90deg, rgba(14,55,137,.10), transparent); color: var(--d-text); }
.dropdown-item .icon{
  width: 34px; height:34px;
  display:grid; place-items:center;
  border-radius: 9px;
  background: rgba(14,55,137,.10);
  color: var(--gold-1); font-size: 13px;
  flex-shrink:0; transition: all .25s var(--ease);
}
.dropdown-item:hover .icon{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff; box-shadow: 0 4px 14px var(--gold-glow);
  transform: scale(1.05);
}
.dropdown-item .meta{ display:flex; flex-direction:column; flex: 1; min-width: 0; }
.dropdown-item .title-row{ display:flex; align-items:center; gap:8px; font-weight: 600; color: var(--d-text); }
.dropdown-item .desc{ font-size: 11.5px; color: var(--d-text-soft); margin-top: 2px; }
.dropdown-item .badge{
  font-size: 9.5px; padding: 2px 7px;
  border-radius: 999px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
}
.badge.new{ background: rgba(26,188,136,.18); color: #5af0b8; }
.badge.hot{ background: rgba(239,71,96,.18); color: #ff8a99; }
.dropdown-item .arrow{ margin-left: auto; font-size: 10px; color: var(--d-text-soft); transition: transform .25s var(--ease); }
html[dir="rtl"] .dropdown-item .arrow{ margin-left: 0; margin-right: auto; transform: rotate(180deg); }
.dropdown-item:hover .arrow{ transform: translateX(3px); color: var(--gold-1); }
html[dir="rtl"] .dropdown-item:hover .arrow{ transform: rotate(180deg) translateX(3px); }
.dropdown-divider{ height:1px; background: var(--d-line); margin: 6px 4px; }
.dropdown-heading{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--d-text-soft); padding: 10px 12px 6px; font-weight: 700; }
.dropdown.mega{ min-width: 360px; padding: 12px; }

.has-submenu{ position: relative; }
.submenu{
  position: absolute; top: -10px; left: calc(100% + 6px);
  min-width: 240px; padding: 10px;
  background: linear-gradient(180deg, rgba(12,18,90,.99), rgba(3,6,65,.99));
  border: 1px solid var(--d-line-2);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden;
  transform: translateX(-10px) scale(.98);
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility .25s linear;
}
html[dir="rtl"] .submenu{ left:auto; right: calc(100% + 6px); transform: translateX(10px) scale(.98); }
.has-submenu:hover > .submenu,
.has-submenu.open > .submenu{ opacity: 1; visibility: visible; transform: translateX(0) scale(1); }

.nav-actions{ display:flex; align-items:center; gap: 10px; }
.icon-btn{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 10px;
  color: var(--d-text-dim);
  border: 1px solid var(--d-line);
  transition: all .25s var(--ease);
}
.icon-btn:hover{ color: #fff; border-color: var(--brand-2); background: linear-gradient(135deg, rgba(14,55,137,.45), rgba(3,6,65,.35)); box-shadow: 0 6px 16px rgba(3,6,65,.45); }
.lang-btn{ color: #fff; }
.lang-btn .flag{ font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fff; }

.btn{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .3px; cursor: pointer;
  transition: all .3s var(--ease); white-space: nowrap;
  border: 1px solid transparent;
}
.btn-ghost-dark{ color: var(--d-text); border-color: var(--d-line-2); }
.btn-ghost-dark:hover{ border-color: var(--gold-2); background: rgba(14,55,137,.06); }
.btn-gold{
  color: #fff;
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 60%, var(--gold-3) 100%);
  box-shadow: 0 8px 20px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.18);
  position: relative; overflow: hidden;
}
/* Inside PRIME card the gradient is gold → use dark text for contrast */
.pkg-card.featured .btn-gold{ color: #0a0f1f; box-shadow: 0 8px 20px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-gold::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--ease-out);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px var(--gold-glow); }
.btn-gold:hover::after{ transform: translateX(100%); }
.btn-outline{
  color: var(--navy); border-color: var(--line-2); background: var(--bg-alt);
}
.btn-outline:hover{ border-color: var(--gold-2); color: var(--gold-3); background: rgba(14,55,137,.06); }
.btn-navy{
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  color: #fff; box-shadow: 0 8px 20px rgba(11,29,58,.25);
}
.btn-navy:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,29,58,.32); }
.btn-lg{ padding: 14px 26px; font-size: 14.5px; }

.burger{
  display:none; width: 44px; height: 44px;
  border-radius: 10px; border:1px solid var(--d-line-2);
  flex-direction: column; gap:5px; align-items:center; justify-content:center;
  cursor: pointer;
}
.burger:hover{ border-color: var(--gold-2); }
.burger span{ display:block; width: 22px; height: 2px; background: var(--d-text); border-radius: 2px; transition: all .35s var(--ease); }
.burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); background: var(--gold-1); }
.burger.active span:nth-child(2){ opacity: 0; }
.burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); background: var(--gold-1); }

/* Drawer */
.drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s linear;
  z-index: 80;
}
.drawer-backdrop.show{ opacity:1; visibility:visible; }
.drawer{
  position: fixed; top: 0; right: 0;
  width: min(380px, 86vw); height: 100vh;
  background: linear-gradient(180deg, #060a52 0%, #030641 100%);
  border-left: 1px solid var(--d-line-2);
  z-index: 90; transform: translateX(100%);
  transition: transform .45s var(--ease-out);
  display:flex; flex-direction: column; overflow: hidden;
  color: var(--d-text);
}
html[dir="rtl"] .drawer{ right:auto; left: 0; border-left: none; border-right: 1px solid var(--d-line-2); transform: translateX(-100%); }
.drawer.show{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--d-line); }
.drawer-head .brand img{ height: 38px; }
.drawer-close{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px solid var(--d-line-2);
  color: var(--d-text-dim);
  transition: all .25s var(--ease);
}
.drawer-close:hover{ color: var(--gold-1); border-color: var(--gold-2); }
.drawer-body{ flex: 1; overflow-y: auto; padding: 14px 14px 20px; }
.drawer-body::-webkit-scrollbar{ width: 6px; }
.drawer-body::-webkit-scrollbar-thumb{ background: rgba(14,55,137,.3); border-radius:6px; }
.m-item{ display:block; width:100%; text-align:left; }
html[dir="rtl"] .m-item{ text-align: right; }
.m-link{
  display:flex; align-items:center; justify-content: space-between;
  width: 100%; padding: 14px 14px;
  font-size: 15px; font-weight: 600; color: var(--d-text);
  border-radius: 10px; transition: all .25s var(--ease);
}
.m-link:hover, .m-item.open > .m-link{ background: rgba(14,55,137,.08); color: var(--gold-1); }
.m-link .chev{ transition: transform .35s var(--ease); font-size: 11px; opacity:.7; }
.m-item.open > .m-link .chev{ transform: rotate(180deg); color: var(--gold-1); }
.m-sub{ max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); padding-left: 14px; }
html[dir="rtl"] .m-sub{ padding-left: 0; padding-right: 14px; }
.m-item.open > .m-sub{ max-height: 1200px; }
.m-sub .m-link{ font-size: 13.5px; color: var(--d-text-dim); font-weight: 500; padding: 11px 14px; }
.m-sub .m-sub .m-link{ font-size: 12.5px; opacity: .85; }
.drawer-foot{ padding: 16px; border-top: 1px solid var(--d-line); display:flex; flex-direction: column; gap: 10px; }

/* ============== HERO (two-column with animated chart) ============== */
.hero{
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(14,55,137,.16), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(79,140,255,.08), transparent 60%),
    var(--bg-tint);
  border-bottom: 1px solid var(--line);
}

/* Full-width transparent decorative banner behind the hero */
.hero-banner-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-banner-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-banner-grid line{
  stroke: rgba(14,55,137,.06);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}
.hero-banner-wave{
  animation: bannerWaveSlide 18s linear infinite;
}
.hero-banner-wave.wave2{
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes bannerWaveSlide{
  0%{ stroke-dashoffset: 0; opacity: .55; }
  50%{ opacity: .85; }
  100%{ stroke-dashoffset: -200; opacity: .55; }
}
.hero-banner-dots .float-dot{
  fill: #1abc88;
  filter: drop-shadow(0 0 6px rgba(26,188,136,.7));
  animation: bannerDotPulse 4s ease-in-out infinite;
}
.hero-banner-dots .float-dot.d2{ fill: #c69a3a; filter: drop-shadow(0 0 6px rgba(212,175,55,.7)); animation-delay: -.8s; }
.hero-banner-dots .float-dot.d3{ animation-delay: -1.6s; }
.hero-banner-dots .float-dot.d4{ fill: #c69a3a; filter: drop-shadow(0 0 6px rgba(212,175,55,.7)); animation-delay: -2.4s; }
.hero-banner-dots .float-dot.d5{ animation-delay: -3.2s; }
.hero-banner-dots .float-dot.d6{ fill: #c69a3a; filter: drop-shadow(0 0 6px rgba(212,175,55,.7)); animation-delay: -1.2s; }
@keyframes bannerDotPulse{
  0%, 100%{ opacity: .35; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.4); }
}
.hero-banner-world{
  animation: bannerWorldFloat 30s ease-in-out infinite;
}
@keyframes bannerWorldFloat{
  0%, 100%{ opacity: .35; }
  50%{ opacity: .55; }
}
.hero-banner-candles rect, .hero-banner-candles line{
  animation: bannerCandleFade 6s ease-in-out infinite;
}
@keyframes bannerCandleFade{
  0%, 100%{ opacity: .6; }
  50%{ opacity: 1; }
}
.hero > .container{ position: relative; z-index: 1; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero-content h1{
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
  color: var(--text);
}
.hero-content h1 .gold{
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-content p{ font-size: 17px; color: var(--text-mute); max-width: 560px; margin: 0 0 32px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust{
  margin-top: 36px;
  display:flex; align-items:center;
  gap: 14px; flex-wrap: wrap;
  color: var(--text-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 600;
}
.hero-trust .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.hero-trust .pill i{ color: var(--gold-2); font-size: 13px; }

/* Hero visual + animated chart */
.hero-visual{
  position: relative;
  aspect-ratio: 1.15 / 1;
  width: 100%;
}
.hero-visual::before{
  content:"";
  position:absolute; inset: -10% -8% -10% -8%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(14,55,137,.16), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, rgba(26,188,136,.10), transparent 70%);
  filter: blur(20px);
  pointer-events:none;
}
.hero-chart{
  position: relative;
  width: 100%; height: 100%;
}
.hero-chart-svg{ width: 100%; height: 100%; display: block; }
.chart-grid line{ stroke: rgba(11,29,58,.07); stroke-dasharray: 3 6; }
.chart-axis text{ fill: var(--text-soft); font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600; }
.chart-candle{ animation: candleRise .9s var(--ease-out) backwards; }
@keyframes candleRise{
  from{ transform: translateY(20px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.chart-area-path{
  fill: url(#heroAreaGrad);
  animation: areaFade 1.4s var(--ease-out) both;
}
@keyframes areaFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.chart-line-path{
  fill: none;
  stroke: url(#heroLineGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawLine 2.4s var(--ease-out) .2s forwards;
  filter: drop-shadow(0 4px 10px rgba(14,55,137,.35));
}
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
.chart-dot{
  fill: var(--gold-1);
  stroke: #fff; stroke-width: 2;
  transform-origin: center; transform-box: fill-box;
  filter: drop-shadow(0 0 10px var(--gold-glow));
  opacity: 0;
  animation: dotShow .4s var(--ease-out) 2.5s forwards;
}
@keyframes dotShow{ to{ opacity: 1; } }
.chart-dot-ring{
  fill: none;
  stroke: var(--gold-2); stroke-width: 2;
  transform-origin: center; transform-box: fill-box;
  animation: dotPulse 2s var(--ease-out) 2.7s infinite;
  opacity: 0;
}
@keyframes dotPulse{
  0%{ r: 6; opacity: .9; }
  100%{ r: 22; opacity: 0; }
}

/* Floating overlay cards on hero chart */
.hero-float{
  position: absolute;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px -10px rgba(11,29,58,.20);
  min-width: 140px;
  display:flex; flex-direction: column; gap: 4px;
  animation: floatBob 6s ease-in-out infinite;
}
.hero-float.f1{ top: 8%; left: -4%; animation-delay: 0s; }
.hero-float.f2{ bottom: 14%; right: -4%; animation-delay: -3s; }
html[dir="rtl"] .hero-float.f1{ left: auto; right: -4%; }
html[dir="rtl"] .hero-float.f2{ right: auto; left: -4%; }
@keyframes floatBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.hero-float .hf-top{ display:flex; align-items:center; gap:8px; }
.hero-float .hf-icon{
  width: 26px; height: 26px;
  display:grid; place-items:center;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff; font-size: 11px;
}
/* The f2 card sets its own navy gradient inline — keep the glyph white there too. */
.hero-float .hf-icon i,
.hero-float .hf-icon .fa-solid,
.hero-float .hf-icon .fa-brands{ color: #fff; }
.hero-float .hf-sym{ font-weight: 800; font-size: 12.5px; color: var(--text); letter-spacing: .3px; }
.hero-float .hf-price{ font-weight: 800; font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.hero-float .hf-change{ display:inline-flex; align-items:center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; align-self: flex-start; }
.hero-float .hf-change.up{ background: rgba(26,188,136,.14); color: #0a8a5c; }
.hero-float .hf-change.down{ background: rgba(239,71,96,.14); color: #b9344b; }

/* ============== SECTIONS GENERIC ============== */
.section{ padding: 90px 0; position: relative; }
.section.tinted{ background: var(--bg-alt); }
.section.soft{ background: var(--bg-soft); }
.section-head{ text-align: center; margin-bottom: 56px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px;
  background: rgba(14,55,137,.10);
  color: var(--gold-3);
  border: 1px solid rgba(14,55,137,.25);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 16px;
}
.eyebrow i{ font-size: 11px; }
.section-title{
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 800; letter-spacing: -1px;
  margin: 0 0 14px; color: var(--text);
}
.section-title .gold{
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub{ color: var(--text-mute); font-size: 16px; max-width: 640px; margin: 0 auto; }

/* ============== PACKAGES ============== */
.packages{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pkg-card{
  position: relative;
  display: flex; flex-direction: column;   /* lets the CTA pin to the bottom */
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden;
}
.pkg-card::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(14,55,137,.04));
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.pkg-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(14,55,137,.3); }
.pkg-card:hover::before{ opacity: 1; }
.pkg-card.featured{
  /* PRIME card keeps gold — scoped variables remap gold tokens to actual gold
     so all gold-using children (ribbon, button, icons, spread number) stay gold */
  --gold-1: var(--pkg-gold-1);
  --gold-2: var(--pkg-gold-2);
  --gold-3: var(--pkg-gold-3);
  --gold-glow: var(--pkg-gold-glow);
  /*background: linear-gradient(180deg, #0d1730 0%, #050911 100%);*/
  background: #030641;
  color: #e9edf6;
  border: 1px solid transparent;
  box-shadow: 0 30px 60px -20px rgba(11,29,58,.4), 0 0 0 1px rgba(212,175,55,.25);
}
.pkg-card.featured::after{
  content:""; position: absolute; inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--gold-1), transparent 40%, var(--gold-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pkg-card.featured:hover{ transform: translateY(-8px); }
.pkg-ribbon{
  position: absolute; top: 28px; right: -56px;
  width: 200px; text-align: center;          /* fixed band + centered text */
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #0a0f1f;
  padding: 7px 0;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
  transform: rotate(45deg);
  box-shadow: 0 6px 14px var(--gold-glow);
}
html[dir="rtl"] .pkg-ribbon{ right:auto; left: -56px; transform: rotate(-45deg); }
.pkg-name{ font-size: 14px; text-transform: uppercase; letter-spacing: 4px; font-weight: 800; color: var(--gold-3); margin: 0 0 10px; }
.pkg-card.featured .pkg-name{ color: var(--gold-1); }
.pkg-tag{ font-size: 13px; color: var(--text-mute); margin-bottom: 22px; }
.pkg-card.featured .pkg-tag{ color: #a8b1c7; }
.pkg-price{ display:flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.pkg-price .lbl{ font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.pkg-spread{
  font-size: 44px; font-weight: 900; letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pkg-card.featured .pkg-spread{ background: linear-gradient(135deg, var(--gold-1), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkg-pip{ color: var(--text-soft); font-weight: 600; font-size: 13px; }
.pkg-card.featured .pkg-pip{ color: #a8b1c7; }
.pkg-divider{ height: 1px; background: var(--line); margin: 22px 0; }
.pkg-card.featured .pkg-divider{ background: rgba(255,255,255,.08); }
.pkg-features{ list-style: none; margin: 0 0 26px; padding: 0; display:flex; flex-direction: column; gap: 12px; }
.pkg-features li{ display:flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.pkg-card.featured .pkg-features li{ color: #d6dceb; }
.pkg-features li i{
  flex-shrink: 0; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(14,55,137,.14);
  color: var(--gold-3); font-size: 10px; margin-top: 1px;
}
.pkg-card.featured .pkg-features li i{ background: rgba(212,175,55,.18); color: var(--gold-1); }
.pkg-features li b{ color: var(--text); font-weight: 700; }
.pkg-card.featured .pkg-features li b{ color: #fff; }
/* Deposit-method icons + platform logo inside package features */
.pkg-pay{ display:inline-flex; align-items:center; gap:7px; vertical-align:middle; position:relative; cursor:pointer; outline:none; }
/* Hover popover: every supported payment method (opens upward, right-aligned to stay inside the card) */
.pkg-pay-tip{
  position:absolute; bottom:calc(100% + 10px); right:0;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
  width:max-content; max-width:210px;
  padding:10px 11px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(11,29,58,.4);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:6;
}
.pkg-pay:hover .pkg-pay-tip, .pkg-pay:focus-within .pkg-pay-tip{ opacity:1; visibility:visible; transform:translateY(0); }
.pkg-pay-tip::after{ content:""; position:absolute; top:100%; right:22px; border:6px solid transparent; border-top-color:#fff; }
.pay-tip-item{ font-size:10px; font-weight:800; letter-spacing:.3px; padding:4px 8px; border-radius:6px; background:rgba(3,6,65,.06); color:var(--text-2); white-space:nowrap; }
/* logo tiles: 4 per row, every logo fitted into the same box */
.pkg-pay-tip{ display:grid; grid-template-columns:repeat(4, 50px); gap:6px; max-width:none; }
.pkg-pay-tip .pay-tip-item{
  width:50px; height:34px; padding:5px;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(3,6,65,.10); border-radius:8px;
  box-shadow:0 2px 6px -3px rgba(11,29,58,.25);
}
.pkg-pay-tip .pay-tip-item img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.pkg-pay-tip .pay-tip-item i{ font-size:26px; line-height:1; color:#0b1d3a; }
.pkg-card.featured .pkg-pay-tip .pay-tip-item i{ color:#0b1d3a; }
/* centred over the "+7" so the popover stays inside the card in LTR and RTL */
.pkg-pay-tip,
html[dir="rtl"] .pkg-pay-tip{ left:50%; right:auto; transform:translate(-50%, 6px); }
.pkg-pay:hover .pkg-pay-tip, .pkg-pay:focus-within .pkg-pay-tip{ transform:translate(-50%, 0); }
.pkg-pay-tip::after,
html[dir="rtl"] .pkg-pay-tip::after{ left:50%; right:auto; margin-left:-6px; }
/* K-NET / Visa / Mastercard shown inline next to "+7" */
.pkg-pay .pay-logos{ display:inline-flex; align-items:center; gap:4px; }
.pkg-pay .pay-logo{
  width:30px; height:20px; padding:2px 3px;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(3,6,65,.12); border-radius:5px;
}
.pkg-pay .pay-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.pkg-card.featured .pkg-pay .pay-logo{ border-color:rgba(255,255,255,.25); }
.pkg-pay-tip .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html[dir="rtl"] .pkg-pay-tip{ right:auto; left:0; justify-content:flex-start; }
html[dir="rtl"] .pkg-pay-tip::after{ right:auto; left:22px; }
.pkg-pay .pay-more{
  font-size:12px; font-weight:800; color: var(--secondary, #0e3789);
  padding:2px 9px; border-radius:999px;
  border:1px dashed rgba(14,55,137,.35); background:rgba(14,55,137,.05);
  transition: background .2s ease, border-color .2s ease;
}
.pkg-pay:hover .pay-more, .pkg-pay:focus-within .pay-more{ background:rgba(14,55,137,.12); border-color:rgba(14,55,137,.6); }
.pkg-card.featured .pkg-pay .pay-more{ color:#f5d77a; border-color:rgba(245,215,122,.5); background:rgba(245,215,122,.08); }
.pkg-card.featured .pkg-pay:hover .pay-more{ background:rgba(245,215,122,.18); }
.pkg-pay i{ font-size:18px; color: var(--secondary, #0e3789); }
.pkg-card.featured .pkg-pay i{ color:#cdd6ea; }
.pkg-pay .pay-txt{ font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 5px; border-radius:4px; border:1px solid rgba(3,6,65,.22); color: var(--text-2); }
.pkg-card.featured .pkg-pay .pay-txt{ border-color:rgba(255,255,255,.3); color:#cdd6ea; }
.pkg-plat{ height:18px; width:auto; vertical-align:middle; }
.pkg-cta{ display: flex; width: 200px; max-width: 100%; margin: auto auto 0; justify-content: center; }
/* Keep the label and its icon(s) on one line (deposit methods, platform logo) */
.pkg-line{ display:inline-flex; align-items:center; gap:8px; }

/* ============== PRODUCTS ============== */
.prod-head{ display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.prod-tabs{ display:flex; gap: 6px; flex-wrap: wrap; background: var(--bg-alt); padding: 6px; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.prod-tab{ padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--text-mute); border-radius: 999px; transition: all .25s var(--ease); white-space: nowrap; }
.prod-tab:hover{ color: var(--gold-3); }
.prod-tab.active{ color: #fff; background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 55%, var(--gold-3) 100%); box-shadow: 0 4px 12px var(--gold-glow); }
.prod-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prod-card{
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative; overflow: hidden; cursor: pointer;
}
.prod-card:hover{ transform: translateY(-6px); border-color: rgba(14,55,137,.4); box-shadow: var(--shadow-lg); }
.prod-top{ display:flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-sym{ display:flex; align-items:center; gap: 10px; }
.prod-sym .icon{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14,55,137,.14), rgba(14,55,137,.05));
  color: var(--gold-3); font-size: 16px;
  border: 1px solid rgba(14,55,137,.18);
}
.prod-sym .pair{ font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: .5px; }
.prod-sym .name{ font-size: 11px; color: var(--text-soft); font-weight: 500; }
.prod-change{ display:inline-flex; align-items:center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.prod-change.up{ background: rgba(26,188,136,.12); color: #098e5d; }
.prod-change.down{ background: rgba(239,71,96,.12); color: #c0334a; }
.prod-spark{ height: 56px; position: relative; }
.prod-spark svg{ width: 100%; height: 100%; display:block; }
.prod-price{ display:flex; align-items: end; justify-content: space-between; gap: 10px; }
.prod-bid, .prod-ask{ display:flex; flex-direction: column; }
.prod-bid .lbl, .prod-ask .lbl{ font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-soft); font-weight: 700; }
.prod-bid .val{ color: var(--danger); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.prod-ask .val{ color: var(--success); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.prod-foot{ display:flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--text-mute); }
.prod-foot .spread{ font-weight: 600; }
.prod-foot .trade{ color: var(--gold-3); font-weight: 700; display:inline-flex; align-items: center; gap: 4px; transition: gap .25s var(--ease); }
.prod-foot .trade:hover{ gap: 8px; color: var(--gold-2); }

/* ============== WHY RAprime ============== */
.why{
  position: relative; padding: 80px 0;
  background: linear-gradient(135deg, #0b1d3a 0%, #0a1426 50%, #07101e 100%);
  color: #fff; overflow: hidden;
}
.why::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 350px at 0% 0%, rgba(14,55,137,.18), transparent 60%),
    radial-gradient(700px 350px at 100% 100%, rgba(79,140,255,.10), transparent 60%);
}
.why::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background: #030641;
  background-size: 22px 22px; opacity: .35;
}
.why .container{ position: relative; z-index: 1; }
.why-head{ text-align: center; margin-bottom: 48px; }
.why-head .eyebrow{ background: rgba(14,55,137,.18); color: #fff; border-color: rgba(14,55,137,.35); }
.why-head h2{ color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; font-weight: 800; letter-spacing: -1px; }
.why-head h2 .gold{ background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-head p{ color: #c0c8db; max-width: 620px; margin: 0 auto; }
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center; position: relative;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
  backdrop-filter: blur(8px);
}
.stat-card:hover{ transform: translateY(-6px); border-color: rgba(14,55,137,.5); background: rgba(14,55,137,.05); }
.stat-icon{
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff; font-size: 22px;
  box-shadow: 0 10px 24px var(--gold-glow);
}
.stat-num{
  font-size: 44px; font-weight: 900; letter-spacing: -1.5px;
  background: linear-gradient(135deg, #fff, var(--gold-1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-plus{ color: var(--gold-1); font-weight: 700; margin-left: 4px; }
.stat-label{ margin-top: 10px; color: #c0c8db; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; }
/* Home "Numbers that tell our story": white cards in brand primary / secondary */
.why .stat-card{
  background: #fff;
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
  backdrop-filter: none;
}
.why .stat-card:hover{ background: #fff; border-color: #fff; box-shadow: 0 26px 50px -18px rgba(0,0,0,.6); }
.why .stat-icon{
  background: linear-gradient(135deg, var(--brand-1, #030641) 0%, var(--brand-2, #0e3789) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(14,55,137,.55);
}
.why .stat-num{
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--brand-1, #030641);
  -webkit-text-fill-color: currentColor;
}
.why .stat-plus{ color: var(--brand-2, #0e3789); }
.why .stat-label{ color: var(--brand-2, #0e3789); font-weight: 700; }

/* ============== OFFICES (World Map) ============== */
.offices-grid{
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: 50px; align-items: center;
}
.world-wrap{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #030641 0%, #02042b 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.world-wrap::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 250px at 20% 20%, rgba(14,55,137,.10), transparent 60%),
    radial-gradient(500px 250px at 80% 80%, rgba(79,140,255,.08), transparent 60%);
  pointer-events:none;
}
.world-wrap::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 18px 18px; opacity: .8; pointer-events: none;
}
.world-svg{
  width: 100%; height: auto;
  display: block;
  position: relative; z-index: 1;
}
/* world-map.png (Robinson projection, generated from Natural-Earth-style
   coastline data) sits behind everything else inside the SVG. White sea /
   navy land, blended onto the navy panel. */
.world-bg-img{
  opacity: .92;
  filter: brightness(1.05) contrast(1.05) saturate(1.1);
  mix-blend-mode: screen;
}
/* Parallels are <line>s, meridians are curved <path>s in this projection */
.world-grid line,
.world-grid path{ stroke: rgba(255,255,255,.06); }
.world-dots circle{
  fill: rgba(150,190,255,.55);
  filter: drop-shadow(0 0 2px rgba(74,144,255,.35));
  animation: dotsTwinkle 6s ease-in-out infinite;
}
.world-dots circle:nth-child(3n){ animation-delay: -2s; }
.world-dots circle:nth-child(4n){ animation-delay: -4s; }
@keyframes dotsTwinkle{
  0%, 100%{ opacity: .55; }
  50%{ opacity: .95; }
}
.world-arc{
  fill: none;
  stroke: #4a90ff;
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(74,144,255,.55));
  animation: arcFlow 16s linear infinite;
}
@keyframes arcFlow{ to{ stroke-dashoffset: -200; } }
.map-marker{ cursor: pointer; }
.map-marker .pin{
  fill: #4a90ff;
  stroke: #fff; stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(74,144,255,.7));
  transition: fill .3s var(--ease), r .3s var(--ease);
}
.map-marker .ring{
  fill: none;
  stroke: #4a90ff;
  stroke-width: 2;
  opacity: .85;
  transform-origin: center; transform-box: fill-box;
}
.map-marker .ring.r1{ animation: ringExpand 2.4s ease-out infinite; }
.map-marker .ring.r2{ animation: ringExpand 2.4s ease-out infinite .8s; }
.map-marker .ring.r3{ animation: ringExpand 2.4s ease-out infinite 1.6s; }
@keyframes ringExpand{
  0%{ r: 6; opacity: .9; }
  100%{ r: 36; opacity: 0; }
}
.map-marker .label{
  fill: #cfe0ff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
.map-marker.active .pin{
  fill: #fff;
  r: 8;
}
.map-marker.active .ring{ stroke: #fff; }
.map-marker.active .label{ fill: #fff; }

.world-legend{
  display:flex; justify-content: center; gap: 28px;
  margin-top: 20px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.world-legend span{
  display:inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #c0c8db; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.world-legend .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #4a90ff;
  box-shadow: 0 0 8px rgba(74,144,255,.6);
}

.offices-list{ display:flex; flex-direction: column; gap: 18px; }
.office-card{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  display:flex; gap: 18px; cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative; overflow: hidden;
}
.office-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .4s var(--ease);
}
html[dir="rtl"] .office-card::before{ left:auto; right:0; }
.office-card:hover, .office-card.active{
  transform: translateX(6px);
  border-color: rgba(14,55,137,.35);
  box-shadow: var(--shadow-md);
}
html[dir="rtl"] .office-card:hover,
html[dir="rtl"] .office-card.active{ transform: translateX(-6px); }
.office-card:hover::before, .office-card.active::before{ transform: scaleY(1); }
.office-flag{
  flex-shrink: 0; width: 60px; height: 60px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(14,55,137,.12), rgba(212,175,55,.03));
  border: 1px solid rgba(14,55,137,.2);
  font-size: 30px;
}
.office-info h4{ margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--text); }
.office-role{
  display:inline-block;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gold-3);
  background: rgba(14,55,137,.10);
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 8px;
}
.office-info p{ margin: 0; color: var(--text-mute); font-size: 13px; line-height: 1.6; }
.office-company{ display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:12.5px; font-weight:700; color: var(--gold-3); }
.office-company i{ font-size:11px; opacity:.8; }
.office-info .meta{ display:flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.office-info .meta span{ display:inline-flex; align-items: center; gap: 5px; }
.office-info .meta i{ color: var(--gold-2); }

/* ============== LICENSES ============== */
/* Flex + wrap + centred: the cards stay centred whatever their number, and wrap
   into centred rows on narrower screens instead of leaving a gap on the right. */
.licenses{ display:flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; }
.licenses > .lic-card{ flex: 0 1 380px; min-width: 280px; max-width: 420px; }
.lic-card{
  position: relative;
  padding: 30px 20px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  text-align: center; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  isolation: isolate;
}
.lic-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(400px 220px at 50% 0%, rgba(14,55,137,.10), transparent 60%);
  z-index: -1;
}
.lic-card::after{
  content:""; position:absolute; left: 50%; top: 0;
  width: 60%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transform: translateX(-50%);
}
.lic-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.lic-seal{
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 60%, var(--gold-3) 100%);
  color: #fff; font-size: 38px;
  box-shadow: 0 12px 26px var(--gold-glow), inset 0 2px 0 rgba(255,255,255,.18);
  position: relative;
}
.lic-seal::before{
  content:""; position:absolute; inset:-6px;
  border-radius: 50%;
  border: 2px dashed rgba(14,55,137,.35);
  animation: spinSlow 30s linear infinite;
}
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
.lic-name{ font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.lic-region{ display:inline-flex; align-items:center; gap: 6px; font-size: 12px; color: var(--text-mute); font-weight: 600; margin-bottom: 22px; }
.lic-meta{ display:flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; gap: 10px; }
.lic-row{ display:flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.lic-row .k{ color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10.5px; }
.lic-row .v{ color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.lic-verify{
  display:none; align-items: center; gap: 6px;   /* hidden for now */
  margin-top: 22px;
  font-size: 12.5px; font-weight: 700;
  color: var(--gold-3);
  border: 1px solid rgba(14,55,137,.3);
  padding: 8px 14px; border-radius: 999px;
  transition: all .25s var(--ease);
}
.lic-verify:hover{ background: var(--gold-2); color: #fff; border-color: var(--gold-2); }

/* ============== CERTIFICATES ============== */
/* Same card styling as the licences (.lic-card); only the grid differs — two
   centred cards instead of three full-width ones. */
.certs-section{ background: var(--bg-soft); }
.licenses.certs{ max-width: 900px; margin: 0 auto; }
.licenses.certs > .lic-card{ flex: 0 1 420px; max-width: 440px; }
/* The verify button is globally hidden (.lic-verify{display:none}) because the
   three licence cards have no public verification URL yet. Both certificate
   cards DO have one, so re-enable it inside this section only. */
.licenses.certs .lic-verify{ display: inline-flex; }

/* Cards carry a different number of meta rows, so lay each one out as a column
   and let the verify button take the leftover space — both buttons then sit on
   the same baseline at the foot of the cards. */
.licenses.certs .lic-card{ display: flex; flex-direction: column; }
.licenses.certs .lic-region{ align-self: center; }
.licenses.certs .lic-verify{ margin-top: auto; align-self: center; }

/* ============== COURSES ============== */
.courses-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.course-card{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.course-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.course-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1d3a, #1a2a4a);
}
.course-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.course-card:hover .course-thumb img{ transform: scale(1.08); }
.course-thumb::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,16,30,.85));
}
.course-badge{
  position: absolute; top: 14px; left: 14px;
  z-index: 2;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  border-radius: 999px;
  box-shadow: 0 6px 14px var(--gold-glow);
}
html[dir="rtl"] .course-badge{ left:auto; right: 14px; }
.course-meta-row{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  display:flex; justify-content: space-between; align-items: center;
  color: #e9edf6; font-size: 12px;
}
.course-meta-row span{ display:inline-flex; align-items: center; gap: 5px; }
.course-meta-row i{ color: var(--gold-1); }
.course-body{ padding: 22px 22px 24px; display:flex; flex-direction: column; flex: 1; }
.course-cat{ font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold-3); font-weight: 700; margin-bottom: 8px; }
.course-title{ font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 10px; line-height: 1.3; }
.course-desc{ color: var(--text-mute); font-size: 13.5px; line-height: 1.6; flex: 1; margin: 0 0 18px; }
.course-actions{ display:flex; gap: 10px; }
.course-actions .btn{ flex: 1; justify-content: center; padding: 10px 14px; font-size: 12.5px; }
.courses-cta{ display:flex; justify-content: center; margin-top: 48px; }

/* ============== FOOTER ============== */
.footer{
  position: relative;
  background: linear-gradient(180deg, #060912 0%, #04060d 100%);
  border-top: 1px solid var(--d-line);
  overflow: hidden;
  color: var(--d-text);
}
.footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity:.5;
}
.footer::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 250px at 10% 0%, rgba(14,55,137,.06), transparent 60%),
    radial-gradient(500px 250px at 90% 100%, rgba(79,140,255,.06), transparent 60%);
  pointer-events:none;
}
.newsletter{
  max-width: var(--maxw); margin: 0 auto;
  padding: 50px 24px 30px;
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: 40px; align-items: center;
  position: relative;
}
.newsletter h3{ font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.5px; color: #fff; }
.newsletter h3 .gold{ background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.newsletter p{ margin: 0; color: var(--d-text-dim); font-size: 14px; }
.newsletter-form{
  display:flex; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--d-line-2);
  border-radius: 14px; padding: 6px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.newsletter-form:focus-within{ border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(14,55,137,.08); }
.newsletter-form input{ flex: 1; background: transparent; border: 0; outline: 0; padding: 12px 14px; color: var(--d-text); font-size: 14px; font-family: inherit; }
.newsletter-form input::placeholder{ color: var(--d-text-soft); }
.footer-main{
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px 24px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 40px; position: relative;
  border-top: 1px solid var(--d-line);
}
.f-col h4{ font-size: 12px; text-transform: uppercase; letter-spacing: 2.4px; color: var(--gold-1); margin: 0 0 18px; font-weight: 700; }
.f-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction: column; gap: 10px; }
.f-links a{ color: var(--d-text-dim); font-size: 13.5px; display:inline-flex; align-items:center; gap:8px; transition: all .25s var(--ease); }
.f-links a::before{ content:""; width:0; height:1px; background: var(--gold-2); transition: width .3s var(--ease); }
.f-links a:hover{ color: var(--gold-1); transform: translateX(3px); }
html[dir="rtl"] .f-links a:hover{ transform: translateX(-3px); }
.f-links a:hover::before{ width: 14px; }
.f-brand-block .brand{ margin-bottom: 16px; }
.f-brand-block .brand img{ height: 50px; }
.f-brand-block p{ color: var(--d-text-dim); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }
.f-contact{ display:flex; flex-direction:column; gap: 10px; }
.f-contact a, .f-contact span{ display:inline-flex; align-items:flex-start; gap:10px; color: var(--d-text-dim); font-size: 13.5px; line-height: 1.55; transition: color .25s var(--ease); }
.f-contact a:hover{ color: var(--gold-1); }
.f-contact i{ color: var(--gold-2); width: 16px; margin-top: 4px; flex-shrink:0; }
.f-social{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.f-social a{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px solid var(--d-line-2);
  color: var(--d-text-dim);
  transition: all .3s var(--ease);
}
.f-social a:hover{ color: #fff; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); border-color: transparent; transform: translateY(-3px); box-shadow: 0 8px 20px var(--gold-glow); }
.payment-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.pay-chip{
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--d-line-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: var(--d-text-dim);
  transition: all .25s var(--ease);
}
.pay-chip:hover{ color: var(--gold-1); border-color: var(--gold-2); }
.pay-chip--icon{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 50px; height: 34px; padding: 0 12px;
  font-size: 22px; line-height: 1;
  background: #fff;
  border-color: rgba(255,255,255,.9);
}
.pay-chip--icon:hover{ border-color: #fff; transform: translateY(-2px); }
/* Brand colours */
.pay--knet    i{ color: #00a3a1; }
.pay--master  i{ color: #eb001b; }
.pay--visa    i{ color: #1434cb; }
.pay--wire    i{ color: #0e3789; }
.pay--samsung i{ color: #1428a0; }
.pay--google  i{ color: #4285f4; }
.pay--apple   i{ color: #000; }
.pay-text{ font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.pay--knet .pay-text{ color: #00a3a1; }
.compliance{ max-width: var(--maxw); margin: 0 auto; padding: 30px 24px; border-top: 1px solid var(--d-line); position: relative; }
.warning-block{
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--gold-2);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--d-text-soft);
  line-height: 1.7;
}
html[dir="rtl"] .warning-block{ border-left: 1px solid var(--d-line); border-right: 3px solid var(--gold-2); }
.warning-block .w-title{ display:flex; align-items:center; gap:10px; color: var(--gold-1); font-size: 13px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.5px; }
.warning-block .w-title i{ font-size: 14px; }
.fc-badge{
  display:flex; align-items:center; gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(14,55,137,.08), rgba(212,175,55,.02));
  border: 1px solid rgba(14,55,137,.25);
  border-radius: 12px;
  margin: 18px 0;
}
.fc-badge .fc-icon{ width: 46px; height: 46px; display:grid; place-items:center; border-radius: 11px; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #fff; flex-shrink: 0; font-size: 18px; }
.fc-badge p{ margin: 0; font-size: 13px; color: var(--d-text-dim); line-height: 1.55; }
.fc-badge a{ color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px; }
.sub-footer{ max-width: var(--maxw); margin: 0 auto; padding: 22px 24px; display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--d-line); font-size: 12.5px; color: var(--d-text-soft); }
.sub-footer .sub-links{ display:flex; gap: 18px; flex-wrap: wrap; }
.sub-footer a{ color: var(--d-text-soft); transition: color .25s var(--ease); }
.sub-footer a:hover{ color: var(--gold-1); }

/* =========================================================
   Floating chat buttons (WhatsApp + Telegram)
   ========================================================= */
.float-actions{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none; /* let children opt in */
}
html[dir="rtl"] .float-actions{ right: auto; left: 22px; }

.float-btn{
  pointer-events: auto;
  position: relative;
  flex: 0 0 auto;        /* never shrink in the flex column */
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  aspect-ratio: 1 / 1;   /* hard-lock the circle */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  overflow: visible;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
  /* default shadow (overridden per variant for color-matched glow) */
  box-shadow: 0 10px 24px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.12);
}
.float-btn i{
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 1;
  width: auto;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

/* Glossy highlight overlay */
.float-btn::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 1;
}

/* Color-matched pulsing ring */
.float-btn::before{
  content:"";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  z-index: 0;
  animation: floatBtnPulse 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes floatBtnPulse{
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Hover lift + tooltip label */
.float-btn:hover{
  transform: translateY(-4px) scale(1.03);
  filter: saturate(1.15);
}
.float-btn .float-label{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0f1530;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;          /* removed from any layout flow */
  width: max-content;
  max-width: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.float-btn .float-label::after{
  content:"";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #0f1530;
}
html[dir="rtl"] .float-btn .float-label{
  right: auto;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-8px);
}
html[dir="rtl"] .float-btn .float-label::after{
  left: auto;
  right: 100%;
  border-left-color: transparent;
  border-right-color: #0f1530;
}
.float-btn:hover .float-label,
.float-btn:focus-visible .float-label{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

/* WhatsApp — green */
.float-btn.wa{
  color: #25D366;
  background: linear-gradient(135deg, #25D366 0%, #1ebb56 45%, #128C7E 100%);
  box-shadow: 0 12px 28px rgba(37,211,102,.42), 0 4px 12px rgba(18,140,126,.30);
}
.float-btn.wa:hover{
  box-shadow: 0 18px 36px rgba(37,211,102,.52), 0 6px 16px rgba(18,140,126,.40);
}
/* The ::before ring inherits this color via currentColor */
.float-btn.wa{ color: #25D366; }
.float-btn.wa i{ color: #fff; }

/* Telegram — blue */
.float-btn.tg{
  color: #2AABEE;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 45%, #0088CC 100%);
  box-shadow: 0 12px 28px rgba(42,171,238,.42), 0 4px 12px rgba(0,136,204,.30);
}
.float-btn.tg:hover{
  box-shadow: 0 18px 36px rgba(42,171,238,.52), 0 6px 16px rgba(0,136,204,.40);
}
.float-btn.tg{ color: #2AABEE; }
.float-btn.tg i{ color: #fff; }

/* Focus ring (a11y) */
.float-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.7),
    0 0 0 6px currentColor,
    0 14px 30px rgba(0,0,0,.28);
}

/* Stagger the two buttons' pulse so the rings don't fire simultaneously */
.float-btn.wa::before{ animation-delay: 0s; }
.float-btn.tg::before{ animation-delay: 1.1s; }

/* Reduce-motion: stop the ring pulse */
@media (prefers-reduced-motion: reduce){
  .float-btn::before{ animation: none; opacity: .25; transform: scale(1.1); }
  .float-btn:hover{ transform: none; }
}

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal[data-reveal="left"]{ transform: translateX(-40px); }
.reveal[data-reveal="left"].in{ transform: translateX(0); }
.reveal[data-reveal="right"]{ transform: translateX(40px); }
.reveal[data-reveal="right"].in{ transform: translateX(0); }
.reveal[data-reveal="scale"]{ transform: scale(.9); }
.reveal[data-reveal="scale"].in{ transform: scale(1); }
.reveal[data-reveal="fade"]{ transform: none; }
.reveal[data-reveal="fade"].in{ transform: none; }
.reveal[data-reveal="zoom"]{ transform: scale(.7); }
.reveal[data-reveal="zoom"].in{ transform: scale(1); }
.reveal[data-reveal="rotate"]{ transform: rotate(-5deg) translateY(20px); }
.reveal[data-reveal="rotate"].in{ transform: rotate(0) translateY(0); }
.reveal[data-reveal-delay="1"]{ transition-delay: .1s; }
.reveal[data-reveal-delay="2"]{ transition-delay: .2s; }
.reveal[data-reveal-delay="3"]{ transition-delay: .3s; }
.reveal[data-reveal-delay="4"]{ transition-delay: .4s; }
.reveal[data-reveal-delay="5"]{ transition-delay: .5s; }
.reveal[data-reveal-delay="6"]{ transition-delay: .6s; }

/* Staggered child reveal */
.stagger-children > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.stagger-children.in > *{ opacity: 1; transform: translateY(0); }
.stagger-children.in > *:nth-child(1){ transition-delay: .05s; }
.stagger-children.in > *:nth-child(2){ transition-delay: .15s; }
.stagger-children.in > *:nth-child(3){ transition-delay: .25s; }
.stagger-children.in > *:nth-child(4){ transition-delay: .35s; }
.stagger-children.in > *:nth-child(5){ transition-delay: .45s; }
.stagger-children.in > *:nth-child(6){ transition-delay: .55s; }
.stagger-children.in > *:nth-child(7){ transition-delay: .65s; }
.stagger-children.in > *:nth-child(8){ transition-delay: .75s; }

/* ============== Micro-animation utilities ============== */

/* Magnetic button hover - lift + glow */
.btn{
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.btn:hover::before{ opacity: 1; }

/* Floating animation utility */
.float-animate{ animation: floatBob 6s ease-in-out infinite; }
.float-animate.delay-1{ animation-delay: -2s; }
.float-animate.delay-2{ animation-delay: -4s; }

/* Pulse glow on focus elements */
@keyframes pulseGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(74,144,255,.4); }
  50%{ box-shadow: 0 0 0 14px rgba(74,144,255,0); }
}
.pulse-glow{ animation: pulseGlow 2.4s ease-out infinite; }

/* Animated underline links */
.anim-link{
  position: relative;
  display: inline-block;
}
.anim-link::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.anim-link:hover::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* Tick price flash effect */
@keyframes flashUp{
  0%{ background: rgba(26,188,136,.35); color: #1abc88; }
  100%{ background: transparent; }
}
@keyframes flashDown{
  0%{ background: rgba(239,71,96,.35); color: #ef4760; }
  100%{ background: transparent; }
}
.tick-flash-up{ animation: flashUp .9s ease-out; border-radius: 4px; }
.tick-flash-down{ animation: flashDown .9s ease-out; border-radius: 4px; }

/* Gradient text animation */
.grad-text-anim{
  background: linear-gradient(90deg, var(--gold-1), var(--accent), var(--gold-2), var(--gold-1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradTextShift 4s linear infinite;
}
@keyframes gradTextShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* 3D tilt card */
.tilt-card{
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  will-change: transform;
}
.tilt-card > *{
  transform: translateZ(20px);
}

/* Section divider wave */
.section-divider{
  position: relative;
  height: 60px;
  overflow: hidden;
}
.section-divider svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Marquee animation */
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee-track{
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeScroll 35s linear infinite;
}
.marquee-track:hover{ animation-play-state: paused; }

/* Click ripple */
.ripple{
  position: relative;
  overflow: hidden;
}
.ripple > .ripple-burst{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: rgba(255,255,255,.5);
  animation: rippleGrow .65s ease-out;
}
@keyframes rippleGrow{
  to{ transform: scale(4); opacity: 0; }
}

/* Smooth hover lift utility */
.hover-lift{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Animated gradient border */
.grad-border{
  position: relative;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.grad-border::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold-1), var(--accent), var(--gold-2));
  background-size: 200% 200%;
  z-index: -1;
  animation: gradBorderShift 4s linear infinite;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.grad-border:hover::before{ opacity: 1; }
@keyframes gradBorderShift{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 200% 200%; }
}

/* Status pulse upgraded */
.status-pulse{
  position: relative;
}
.status-pulse::after{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(26,188,136,.5);
  animation: statusRing 1.8s ease-out infinite;
}
@keyframes statusRing{
  0%{ transform: scale(.6); opacity: 1; }
  100%{ transform: scale(1.6); opacity: 0; }
}

/* Enhanced card hover with shine */
.shine-on-hover{
  position: relative;
  overflow: hidden;
}
.shine-on-hover::after{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .8s var(--ease);
  pointer-events: none;
}
.shine-on-hover:hover::after{ left: 150%; }

/* Particle background container */
.particle-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.particle{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-2);
  opacity: .3;
  animation: particleFloat 12s linear infinite;
}
@keyframes particleFloat{
  0%{ transform: translateY(100vh) translateX(0); opacity: 0; }
  10%{ opacity: .4; }
  90%{ opacity: .4; }
  100%{ transform: translateY(-100px) translateX(40px); opacity: 0; }
}

/* Hero content fade-in on load */
.hero-content > *{
  opacity: 0;
  animation: heroFadeUp .9s var(--ease-out) both;
}
.hero-content > *:nth-child(1){ animation-delay: .2s; }
.hero-content > *:nth-child(2){ animation-delay: .35s; }
.hero-content > *:nth-child(3){ animation-delay: .5s; }
.hero-content > *:nth-child(4){ animation-delay: .65s; }
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}
.hero-visual{
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out) .4s both;
}
@keyframes heroFadeIn{
  from{ opacity: 0; transform: scale(.95); }
  to{ opacity: 1; transform: scale(1); }
}

/* Number counter highlight */
.count{
  display: inline-block;
  transition: transform .35s var(--ease);
}
.count.counting{
  animation: countPop 1.8s ease-out;
}
@keyframes countPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); color: var(--gold-1); }
  100%{ transform: scale(1); }
}

/* Cursor follow dot */
.cursor-dot{
  position: fixed;
  pointer-events: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: 0;
  z-index: 9997;
  transition: opacity .25s, transform .12s var(--ease);
  mix-blend-mode: screen;
}
@media (hover: hover){
  .cursor-dot.active{ opacity: .7; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
}

/* ============== WELCOME BONUS BANNER ============== */
.bonus-section{ padding: 70px 0; }
.bonus-band{
  position: relative;
  padding: 56px 56px;
  background: linear-gradient(135deg, #030641 0%, #0e3789 65%, #1a4fb8 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(3,6,65,.5);
}
.bonus-band::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(500px 280px at 80% 20%, rgba(120,165,255,.30), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(74,144,255,.20), transparent 60%);
  pointer-events: none;
}
.bonus-band::after{
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .45; pointer-events: none;
}
.bonus-content{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative; z-index: 1;
}
.bonus-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.2px;
  color: #cfe0ff;
  margin-bottom: 18px;
}
.bonus-eyebrow i{ color: #f5d77a; }
.bonus-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.8px;
  color: #fff;
  margin: 0 0 16px;
}
.bonus-amount{
  display: inline-block;
  font-size: clamp(56px, 8vw, 100px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #cfe0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -3px;
  filter: drop-shadow(0 6px 18px rgba(120,165,255,.45));
}
.bonus-desc{
  font-size: 15px;
  color: rgba(255,255,255,.78);
  max-width: 500px;
  margin: 0 0 24px;
  line-height: 1.65;
}
.bonus-features{
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 28px;
}
.bonus-features span{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  font-weight: 500;
}
.bonus-features i{
  color: #4a90ff;
  background: rgba(74,144,255,.18);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 10px;
}
.bonus-cta-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.bonus-cta-row .btn-gold{
  color: #030641;
  background: linear-gradient(135deg, #ffffff 0%, #cfe0ff 100%);
  box-shadow: 0 12px 30px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
.bonus-cta-row .btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255,255,255,.3); }
.bonus-cta-row .btn-ghost-white{
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.05);
}
.bonus-cta-row .btn-ghost-white:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.bonus-visual{ position: relative; display: flex; justify-content: center; perspective: 1000px; }
.bonus-coupon{
  position: relative;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(135deg, #ffffff 0%, #f4f6fb 100%);
  border-radius: 18px;
  padding: 28px;
  transform: rotate(-5deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
  animation: couponFloat 5s ease-in-out infinite;
}
@keyframes couponFloat{
  0%, 100%{ transform: rotate(-5deg) translateY(0); }
  50%{ transform: rotate(-5deg) translateY(-14px); }
}
.bonus-coupon::before, .bonus-coupon::after{
  content: ""; position: absolute;
  width: 26px; height: 26px;
  background: #030641;
  border-radius: 50%;
  top: 50%; transform: translateY(-50%);
}
.bonus-coupon::before{ left: -13px; }
.bonus-coupon::after{ right: -13px; }
.bonus-coupon-top{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--line);
  margin-bottom: 18px;
}
.bonus-coupon-brand{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 2.2px;
  color: var(--gold-2);
  text-transform: uppercase;
}
.bonus-coupon-amt{
  font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -1.5px;
  text-align: center;
  margin-bottom: 6px;
}
.bonus-coupon-label{
  text-align: center;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}
.bonus-coupon-bar{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.bonus-stack{
  position: absolute;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  width: 280px; height: 180px;
  z-index: -1;
}
.bonus-stack.s1{ top: -16px; right: -8px; transform: rotate(8deg); }
.bonus-stack.s2{ top: 8px; left: -16px; transform: rotate(-12deg); }

/* ============== HOW TO START (3 steps) ============== */
.steps-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.steps-grid::before{
  content: "";
  position: absolute;
  top: 80px; left: 18%; right: 18%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--gold-2), var(--gold-2) 50%, transparent 50%);
  background-size: 14px 2px;
  opacity: .35;
  z-index: 0;
}
.step-card{
  position: relative;
  text-align: center;
  padding: 44px 28px 32px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  z-index: 1;
}
.step-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(14,55,137,.30); }
.step-num{
  position: absolute;
  top: -8px; right: 18px;
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: rgba(14,55,137,.08);
  letter-spacing: -4px;
}
html[dir="rtl"] .step-num{ right: auto; left: 18px; }
.step-icon{
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 55%, var(--gold-3) 100%);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 14px 30px var(--gold-glow);
  position: relative;
  z-index: 1;
}
.step-icon::before{
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(14,55,137,.22);
  animation: spinSlow 28s linear infinite;
}
.step-card:hover .step-icon{ transform: scale(1.06); }
.step-title{
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
}
.step-desc{
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.65;
  margin: 0 0 18px;
}
.step-meta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(14,55,137,.08);
  color: var(--gold-2);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.step-meta i{ font-size: 10px; }

/* ============== TRADING PLATFORMS ============== */
.platforms-grid{
  display: grid;
  grid-template-columns: 1fr;   /* only MetaTrader 5 is shown — single centered column */
  gap: 24px;
  max-width: 560px;
  margin-inline: auto;
}
/* Keep only the MetaTrader 5 card; the rest are hidden (kept in markup, not deleted). */
.platforms-grid .platform-card:not(:first-child){ display: none; }
.platform-card{
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex; flex-direction: column;
  gap: 20px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden;
}
.platform-card::before{
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(14,55,137,.10), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .6s var(--ease);
}
html[dir="rtl"] .platform-card::before{ right: auto; left: -60px; }
.platform-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(14,55,137,.3); }
.platform-card:hover::before{ transform: scale(1.5); }
.platform-head{ display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.platform-icon{
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 55%, var(--gold-3) 100%);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 24px var(--gold-glow);
  flex-shrink: 0;
}
/* MT5 card: real MetaTrader 5 logo on a light tile instead of the chart glyph */
.platform-icon--logo{
  background: #fff;
  border: 1px solid rgba(14,55,137,.12);
  box-shadow: 0 10px 24px -8px rgba(11,29,58,.28);
}
.platform-icon--logo img{ width: 44px; height: 44px; object-fit: contain; display: block; }
.platform-name{
  font-size: 22px; font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.2;
}
.platform-tag{
  font-size: 11.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.platform-badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(26,188,136,.16);
  color: #098e5d;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-left: auto;
}
html[dir="rtl"] .platform-badge{ margin-left: 0; margin-right: auto; }
.platform-badge.pro{ background: rgba(14,55,137,.14); color: var(--gold-2); }
.platform-features{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative; z-index: 1;
}
.platform-features li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--text-2);
}
.platform-features li i{
  flex-shrink: 0;
  color: var(--gold-2);
  font-size: 11px;
  margin-top: 5px;
}
.platform-downloads{
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  position: relative; z-index: 1;
}
.platform-dl{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  transition: all .25s var(--ease);
}
.platform-dl:hover{
  background: var(--gold-2);
  color: #fff;
  border-color: var(--gold-2);
  transform: translateY(-2px);
}
.platform-dl i{ font-size: 13px; }

/* ============== TESTIMONIALS / TRUSTPILOT ============== */
.trustpilot-strip{
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 0 auto 46px;
  padding: 16px 28px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  max-width: 640px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.tp-brand{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800;
  color: var(--text);
}
.tp-brand .tp-star{
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: #00b67a;
  border-radius: 4px;
  color: #fff; font-size: 13px;
}
.tp-divider{ width: 1px; height: 22px; background: var(--line); }
.tp-rating{ display: inline-flex; align-items: center; gap: 8px; }
.tp-stars{
  display: inline-flex; gap: 2px;
}
.tp-stars span{
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: #00b67a;
  color: #fff;
  font-size: 11px;
  border-radius: 2px;
}
.tp-score{ font-weight: 800; color: var(--text); font-size: 15px; }
.tp-of{ color: var(--text-soft); font-size: 13px; }
.tp-count{ color: var(--text-mute); font-size: 13px; font-weight: 500; }
.tp-count b{ color: var(--text); font-weight: 700; }

/* Google Reviews strip (replaces the Trustpilot strip) */
.google-strip{
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 0 auto 46px; padding: 16px 28px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; max-width: 680px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.gr-brand{ display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: var(--text); }
.gr-brand svg{ width: 20px; height: 20px; flex: none; }
.gr-divider{ width: 1px; height: 22px; background: var(--line); }
.gr-rating{ display: inline-flex; align-items: center; gap: 8px; }
.gr-stars{ display: inline-flex; gap: 3px; color: #fbbc04; font-size: 14px; }
.gr-stars .gr-star-empty{ color: rgba(3,6,65,.16); }
.gr-score{ font-weight: 800; color: var(--text); font-size: 15px; }
.gr-of{ color: var(--text-soft); font-size: 13px; }
.gr-count{ color: var(--text-mute); font-size: 13px; font-weight: 500; }
.gr-count b{ color: var(--text); font-weight: 700; }
.gr-cta{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--secondary, #0e3789); }
.gr-cta:hover{ color: var(--gold-3); }
/* Google review cards */
.testi-avatar-img{ object-fit: cover; padding: 0; }
.testi-stars .gr-star-empty{ color: rgba(3,6,65,.16); }
.gr-verified{ display: inline-flex; align-items: center; gap: 5px; }
.gr-verified svg{ width: 13px; height: 13px; }
/* Avatar shows the Google logo instead of the reviewer's photo */
.testi-avatar-google{ background:#fff; border:1px solid var(--line); padding:0; display:grid; place-items:center; }
.testi-avatar-google svg{ width:22px; height:22px; }

/* Testimonials carousel (all Google reviews) */
.testi-carousel-wrap{ position:relative; }
.testi-carousel{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:6px 2px 10px;
}
.testi-carousel::-webkit-scrollbar{ display:none; }
.testi-carousel .testi-card{
  flex:0 0 calc((100% - 48px) / 3);   /* 3 per view */
  scroll-snap-align:start;
}
.testi-carousel .testi-quote{
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.testi-nav{
  position:absolute; top:42%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:var(--bg-alt); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  color:var(--text); font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:all .25s var(--ease);
}
.testi-nav:hover{ color:var(--gold-3); border-color:var(--gold-2); box-shadow:var(--shadow-md); }
.testi-prev{ left:-14px; }
.testi-next{ right:-14px; }
html[dir="rtl"] .testi-prev{ left:auto; right:-14px; }
html[dir="rtl"] .testi-next{ right:auto; left:-14px; }
@media (max-width:900px){ .testi-carousel .testi-card{ flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:600px){ .testi-carousel .testi-card{ flex-basis:100%; } .testi-nav{ display:none; } }

.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 24px;
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display: flex; flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.testi-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(14,55,137,.30); }
.testi-card::before{
  content: "\201C";
  position: absolute;
  top: 6px; right: 22px;
  font-size: 90px;
  line-height: 1;
  color: rgba(14,55,137,.10);
  font-family: Georgia, serif;
  font-weight: 700;
}
html[dir="rtl"] .testi-card::before{ right: auto; left: 22px; }
.testi-stars{
  display: inline-flex; gap: 3px;
  color: #ffb800;
  font-size: 14px;
  z-index: 1;
}
.testi-quote{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
  flex: 1;
  position: relative; z-index: 1;
}
.testi-user{
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testi-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.5px;
  flex-shrink: 0;
}
.testi-name{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.testi-role{
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}
.testi-verified{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  color: #00b67a;
  font-weight: 700;
}
html[dir="rtl"] .testi-verified{ margin-left: 0; margin-right: auto; }
.testi-verified i{ font-size: 12px; }

/* ============== EXTRA RESPONSIVE FOR NEW SECTIONS ============== */
@media (max-width: 1180px){
  .bonus-content{ grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .bonus-visual{ order: -1; }
  .bonus-features{ justify-content: center; }
  .bonus-cta-row{ justify-content: center; }
  .bonus-desc{ margin-left: auto; margin-right: auto; }
  .steps-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .steps-grid::before{ display: none; }
  .platforms-grid{ grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .testimonials-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 760px){
  .bonus-band{ padding: 36px 24px; border-radius: 20px; }
  .bonus-section{ padding: 50px 0; }
  .bonus-amount{ font-size: 56px; letter-spacing: -2px; }
  .step-num{ font-size: 60px; }
  .platform-card{ padding: 24px; }
  .trustpilot-strip, .google-strip{ padding: 14px 20px; gap: 12px; }
  .tp-of, .tp-divider, .gr-of, .gr-divider{ display: none; }
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1180px){
  .nav-list{ display:none; }
  .burger{ display:flex; }
  .nav-actions .btn-ghost-dark,
  .nav-actions > .nav-item.has-dd{ display:none; }
  .hero-grid{ grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .hero-content p{ margin-left: auto; margin-right: auto; }
  .hero-actions{ justify-content: center; }
  .hero-trust{ justify-content: center; }
  .hero-visual{ max-width: 540px; margin: 0 auto; }
  .packages{ grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pkg-card.featured{ transform: none; }
  .pkg-card.featured:hover{ transform: translateY(-8px); }
  .prod-grid{ grid-template-columns: repeat(3, 1fr); }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .offices-grid{ grid-template-columns: 1fr; gap: 30px; }
  .licenses > .lic-card, .licenses.certs > .lic-card{ flex-basis: 100%; max-width: 460px; }
  .courses-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .footer-main{ grid-template-columns: 1.4fr 1fr 1fr; }
  .f-brand-block{ grid-column: 1 / -1; }
  .newsletter{ grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px){
  .statusbar-inner{ padding: 8px 16px; gap: 10px; font-size: 11.5px; }
  .market-ticker{ display:none; }
  .status-left{ gap: 12px; }
  .nav{ padding: 12px 16px; }
  .brand img{ height: 42px; }
  .nav-actions .btn-gold{ padding: 10px 14px; font-size: 12.5px; }
  .hero{ padding: 50px 0 70px; }
  .hero-grid{ gap: 40px; }
  .hero-float{ display:none; }
  .section{ padding: 64px 0; }
  .section-head{ margin-bottom: 36px; }
  .prod-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-card{ padding: 14px; }
  .footer-main{ grid-template-columns: 1fr 1fr; padding: 30px 18px; gap: 28px; }
  .f-brand-block{ grid-column: 1 / -1; }
  .newsletter{ padding: 36px 18px 20px; }
  .newsletter h3{ font-size: 22px; }
  .compliance{ padding: 24px 18px; }
  .sub-footer{ padding: 20px 18px; flex-direction: column; align-items: flex-start; }
  .float-btn{ width: 52px; height: 52px; font-size: 22px; }
  .float-btn .float-label{ display: none; }
  .float-actions{ right: 14px; bottom: 14px; gap: 12px; }
  html[dir="rtl"] .float-actions{ right: auto; left: 14px; }
  .stats{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat-card{ padding: 22px 14px; }
  .stat-num{ font-size: 32px; }
}
@media (max-width: 480px){
  .prod-grid{ grid-template-columns: 1fr; }
  .footer-main{ grid-template-columns: 1fr; }
  .status-right .status-item:not(.status-pulse-wrap){ display:none; }
  .social-mini{ display:none; }
  .prod-tabs{ width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}


/* =========================================================
   === ACHIEVEMENTS PAGES (appended) =====================
   Styles for: achievements.html + achievement-details.html
   ========================================================= */

/* =========================================================
   ACHIEVEMENTS — Page Styles (scoped with .ach- prefix)
   ========================================================= */

/* ============== HERO ============== */
.ach-hero{
  position: relative;
  padding: 72px 0 60px;
  background: linear-gradient(135deg, #030641 0%, #0e3789 55%, #2950bd 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.ach-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(720px 460px at 88% 16%, rgba(74,144,255,.28), transparent 60%),
    radial-gradient(620px 460px at 8% 92%, rgba(245,215,122,.14), transparent 60%);
  z-index:-1;
}
.ach-hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index:-1;
}
.ach-hero .container{ text-align:center; position:relative; z-index:1; }

.ach-crumbs{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:rgba(255,255,255,.72);
  margin-bottom:18px; letter-spacing:.3px;
}
.ach-crumbs a{ color:rgba(255,255,255,.72); transition:color .25s var(--ease); }
.ach-crumbs a:hover{ color:#fff; }
.ach-crumbs .sep{ opacity:.5; }
.ach-crumbs .here{ color:#fff; font-weight:600; }

.ach-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  font-size: 12px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase;
  color:#cfe1ff; margin-bottom:18px;
}
.ach-eyebrow .gem{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg,#f5d77a,#d4af37);
  box-shadow: 0 0 12px rgba(245,215,122,.7);
  animation: gemPulse 2.2s infinite;
}
@keyframes gemPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.7; }
}
.ach-title{
  font-size: clamp(36px, 5.8vw, 60px);
  font-weight: 800; line-height: 1.06; letter-spacing:-1.4px;
  margin: 0 0 16px;
}
.ach-title .grad{
  background: linear-gradient(90deg,#f5d77a 0%,#7ec0ff 50%,#f5d77a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shineGrad 5s linear infinite;
}
@keyframes shineGrad{ to{ background-position: 220% 0; } }
.ach-sub{
  font-size: 16.5px; color: rgba(255,255,255,.80);
  max-width: 680px; margin: 0 auto 32px; line-height: 1.65;
}

.ach-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 760px){ .ach-stats{ grid-template-columns: repeat(2, 1fr); } }
.ach-stat{
  padding: 18px 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  position:relative; overflow:hidden;
}
.ach-stat::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(245,215,122,.0), rgba(245,215,122,.10));
  opacity:0; transition: opacity .35s var(--ease);
}
.ach-stat:hover{ transform: translateY(-4px); background: rgba(255,255,255,.10); border-color: rgba(245,215,122,.35); }
.ach-stat:hover::before{ opacity:1; }
.ach-stat .ico{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(245,215,122,.18), rgba(245,215,122,.05));
  color:#f5d77a; font-size:14px; margin: 0 auto 10px;
  border:1px solid rgba(245,215,122,.25);
}
.ach-stat .v{ font-size: 26px; font-weight: 800; color:#fff; line-height:1; }
.ach-stat .v .gold{ color:#f5d77a; }
.ach-stat .l{ font-size:12.5px; color: rgba(255,255,255,.65); margin-top:6px; letter-spacing:.4px; }

/* ============== FILTER STRIP ============== */
.ach-filter-bar{
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.ach-filter-row{
  display:flex; align-items:center; gap:14px;
  overflow-x:auto; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.ach-filter-row::-webkit-scrollbar{ height:6px; }
.ach-filter-row::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius:99px; }

.ach-chip{
  flex: 0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 16px; border-radius: 999px;
  background:#fff; border: 1px solid var(--line);
  color: var(--text-2); font-weight:600; font-size:13.5px;
  cursor:pointer; transition: all .25s var(--ease);
  scroll-snap-align: start;
}
.ach-chip i{ font-size: 12px; opacity:.7; }
.ach-chip:hover{ border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); }
.ach-chip.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(14,55,137,.55);
}
.ach-chip.active i{ opacity:1; }
.ach-chip .count{
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background: rgba(14,55,137,.08); color: var(--brand-2);
  font-size: 11px; font-weight:700;
}
.ach-chip.active .count{ background: rgba(255,255,255,.20); color:#fff; }

/* ============== GRID SECTION ============== */
.ach-grid-section{
  padding: 56px 0 30px;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(245,215,122,.05), transparent 60%),
    var(--bg);
}

.ach-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
@media (max-width: 980px){ .ach-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px){ .ach-grid{ grid-template-columns: 1fr; gap: 18px; } }

/* Card */
.ach-card{
  position: relative;
  grid-column: span 4;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 20px;
  overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display:flex; flex-direction:column;
  isolation: isolate;
}
@media (max-width: 980px){ .ach-card{ grid-column: span 3; } }
@media (max-width: 720px){ .ach-card{ grid-column: span 6; } }
@media (max-width: 600px){ .ach-card{ grid-column: 1 / -1; } }

.ach-card.feature{ grid-column: span 8; }
.ach-card.tall{ grid-column: span 4; }
@media (max-width: 980px){
  .ach-card.feature{ grid-column: span 6; }
  .ach-card.tall{ grid-column: span 6; }
}
@media (max-width: 600px){
  .ach-card.feature, .ach-card.tall{ grid-column: 1 / -1; }
}

.ach-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -22px rgba(3,6,65,.30);
  border-color: rgba(14,55,137,.35);
}

/* Media banner */
.ach-media{
  position:relative;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.ach-card.feature .ach-media{ aspect-ratio: 16/8; }
.ach-card.tall .ach-media{ aspect-ratio: 4 / 3; }

.ach-media::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(380px 240px at 80% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(280px 200px at 15% 90%, rgba(245,215,122,.18), transparent 60%);
}
.ach-media::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.ach-media .ach-glyph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size: 84px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .5s var(--ease);
}
.ach-card:hover .ach-media .ach-glyph{ transform: scale(1.08) rotate(-3deg); }

.ach-card.feature .ach-glyph{ font-size: 108px; }

/* Decorative ribbon top-left */
.ach-cat{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--brand-1); font-weight:700; font-size:11px;
  letter-spacing:.6px; text-transform:uppercase;
  border:1px solid rgba(3,6,65,.08);
  box-shadow: 0 4px 14px rgba(3,6,65,.18);
}
.ach-cat i{ font-size:10px; }
.ach-cat.award{ background: linear-gradient(135deg,#f5d77a,#d4af37); color:#3a2a00; border-color: transparent; }
.ach-cat.cert{ background: linear-gradient(135deg,#cfe1ff,#7ec0ff); color: var(--brand-1); border-color: transparent; }
.ach-cat.milestone{ background: linear-gradient(135deg,#bef0d8,#1abc88); color:#013a23; border-color: transparent; }
.ach-cat.partnership{ background: linear-gradient(135deg,#ffd6e7,#ff7eb0); color:#56003c; border-color: transparent; }
.ach-cat.event{ background: linear-gradient(135deg,#ffdfb5,#ff9b3f); color:#4a1f00; border-color: transparent; }
.ach-cat.community{ background: linear-gradient(135deg,#dbd1ff,#9b87ff); color:#28005b; border-color: transparent; }

.ach-date{
  position:absolute; top:14px; right:14px; z-index:2;
  padding: 6px 12px; border-radius: 10px;
  background: rgba(3,6,65,.55);
  backdrop-filter: blur(8px);
  color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.18);
}
.ach-date i{ margin-right:5px; opacity:.85; }

/* Body */
.ach-body{
  padding: 22px 22px 24px;
  flex:1;
  display:flex; flex-direction:column;
}
.ach-card.feature .ach-body{ padding: 26px 28px 28px; }

.ach-name{
  font-size: 19px; font-weight:800; line-height: 1.3;
  color: var(--text); margin: 0 0 10px;
  letter-spacing:-.3px;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow:hidden;
}
.ach-card.feature .ach-name{ font-size: 24px; }

.ach-desc{
  font-size: 14px; line-height: 1.65;
  color: var(--text-mute);
  margin: 0 0 16px;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow:hidden;
  flex:1;
}
.ach-card.feature .ach-desc{ font-size: 15px; -webkit-line-clamp: 4; }

.ach-meta-row{
  display:flex; align-items:center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.ach-meta-left{
  display:inline-flex; align-items:center; gap:14px;
  color: var(--text-soft);
}
.ach-meta-left span{ display:inline-flex; align-items:center; gap:6px; }
.ach-meta-left i{ color: var(--brand-2); opacity:.8; }

.ach-read{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--brand-2); font-weight:700;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.ach-read i{ transition: transform .3s var(--ease); }
.ach-card:hover .ach-read{ gap: 12px; color: var(--brand-1); }
.ach-card:hover .ach-read i{ transform: translateX(3px); }

/* Shimmer accent on hover */
.ach-card::after{
  content:""; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background: linear-gradient(110deg, transparent 30%, rgba(245,215,122,.10) 50%, transparent 70%);
  transition: left .9s var(--ease);
  pointer-events:none; z-index:1;
}
.ach-card:hover::after{ left: 130%; }

/* ============== TIMELINE STRIP ============== */
.ach-timeline-section{
  padding: 60px 0 70px;
  background: var(--bg);
}
.section-head-c{ text-align:center; max-width:720px; margin: 0 auto 38px; }
.section-eyebrow-c{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px; border-radius:999px;
  background: rgba(14,55,137,.08); color: var(--brand-2);
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  margin-bottom:14px;
}
.section-title-c{
  font-size: clamp(28px, 3.6vw, 38px); font-weight:800;
  letter-spacing:-1px; line-height:1.15; margin: 0 0 12px;
  color: var(--text);
}
.section-title-c .grad{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.section-sub-c{ font-size:15.5px; color: var(--text-mute); line-height:1.65; margin:0; }

.timeline{
  position:relative;
  padding: 30px 0 10px;
  overflow-x:auto;
}
.timeline-rail{
  display:flex; gap: 28px;
  position:relative;
  padding-bottom: 28px;
  min-width: max-content;
}
.timeline-rail::before{
  content:""; position:absolute; left:0; right:0; top: 36px;
  height:2px; background: linear-gradient(90deg, transparent, var(--brand-2) 12%, var(--brand-2) 88%, transparent);
  opacity:.35;
}
.t-node{
  position:relative;
  min-width: 220px; max-width: 240px;
  padding-top: 56px;
  text-align:center;
}
.t-node .dot{
  position:absolute; left:50%; top:28px;
  transform: translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background: #fff;
  border: 3px solid var(--brand-2);
  box-shadow: 0 0 0 6px rgba(14,55,137,.10), 0 6px 16px -6px rgba(14,55,137,.6);
  z-index:1;
}
.t-node.gold .dot{ border-color:#d4af37; box-shadow: 0 0 0 6px rgba(212,175,55,.18), 0 6px 16px -6px rgba(212,175,55,.8); }
.t-node .year{
  font-size: 13px; font-weight:800; color: var(--brand-2);
  letter-spacing: 1.5px; margin-bottom: 6px;
}
.t-node.gold .year{ color:#a07c1c; }
.t-node .label{
  font-size:15px; font-weight:700; color:var(--text);
  line-height: 1.4; margin-bottom: 4px;
}
.t-node .desc{
  font-size:12.5px; color: var(--text-mute);
  line-height:1.5;
}

/* ============== CTA STRIP ============== */
.ach-cta{
  margin: 0 0 0;
  padding: 60px 0;
  background: linear-gradient(135deg, #030641 0%, #0e3789 60%, #1a4bb8 100%);
  color:#fff; position:relative; overflow:hidden; isolation:isolate;
}
.ach-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 360px at 85% 50%, rgba(74,144,255,.30), transparent 60%),
    radial-gradient(500px 320px at 10% 50%, rgba(245,215,122,.15), transparent 60%);
  z-index:-1;
}
.ach-cta-inner{
  display:flex; align-items:center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.ach-cta h3{
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight:800; letter-spacing:-.6px; margin:0 0 6px;
  line-height: 1.2;
}
.ach-cta h3 .gold{
  background: linear-gradient(90deg,#f5d77a,#d4af37);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.ach-cta p{ margin:0; color: rgba(255,255,255,.78); font-size:15px; max-width: 580px; }
.ach-cta-actions{ display:flex; gap:12px; flex-wrap: wrap; }

.btn-cta-gold{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px; border-radius:12px;
  background: linear-gradient(135deg,#f5d77a,#d4af37);
  color:#2c1f00; font-weight:800; font-size:14px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 12px 26px -10px rgba(212,175,55,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-cta-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(212,175,55,.7); }
.btn-cta-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px; border-radius:12px;
  background: rgba(255,255,255,.06);
  color:#fff; font-weight:700; font-size:14px;
  border: 1px solid rgba(255,255,255,.20);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-cta-ghost:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* ============== RESPONSIVE TWEAKS ============== */
@media (max-width: 720px){
  .ach-hero{ padding: 56px 0 50px; }
  .ach-grid-section{ padding: 40px 0 20px; }
  .ach-cta-inner{ flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   ACHIEVEMENT DETAILS — Page Styles (.det- prefix)
   ========================================================= */

/* ============== HERO ============== */
.det-hero{
  position: relative;
  padding: 60px 0 70px;
  background: linear-gradient(135deg, #030641 0%, #0e3789 60%, #2950bd 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.det-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(720px 460px at 85% 18%, rgba(74,144,255,.30), transparent 60%),
    radial-gradient(560px 420px at 8% 92%, rgba(245,215,122,.16), transparent 60%);
  z-index:-1;
}
.det-hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index:-1;
}

.det-crumbs{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; color: rgba(255,255,255,.72);
  margin-bottom: 18px; letter-spacing:.3px;
}
.det-crumbs a{ color: rgba(255,255,255,.72); transition: color .25s var(--ease); }
.det-crumbs a:hover{ color:#fff; }
.det-crumbs .sep{ opacity:.5; }
.det-crumbs .here{ color:#fff; font-weight:600; }

.det-cat-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #f5d77a, #d4af37);
  color:#2c1f00; font-weight:800; font-size:11.5px;
  letter-spacing:.6px; text-transform:uppercase;
  margin-bottom: 16px;
}
.det-cat-pill.cert{ background: linear-gradient(135deg,#cfe1ff,#7ec0ff); color: var(--brand-1); }
.det-cat-pill.milestone{ background: linear-gradient(135deg,#bef0d8,#1abc88); color:#013a23; }
.det-cat-pill.partnership{ background: linear-gradient(135deg,#ffd6e7,#ff7eb0); color:#56003c; }
.det-cat-pill.event{ background: linear-gradient(135deg,#ffdfb5,#ff9b3f); color:#4a1f00; }
.det-cat-pill.community{ background: linear-gradient(135deg,#dbd1ff,#9b87ff); color:#28005b; }

.det-title{
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; line-height: 1.1; letter-spacing:-1.2px;
  margin: 0 0 18px; max-width: 920px;
}
.det-lead{
  font-size: 17px; color: rgba(255,255,255,.82); line-height:1.7;
  max-width: 760px; margin: 0 0 26px;
}

.det-meta-row{
  display:flex; flex-wrap: wrap; gap: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: 13.5px;
}
.det-meta-row .m{
  display:inline-flex; align-items:center; gap:8px;
}
.det-meta-row .m i{ color: #f5d77a; opacity:.95; }
.det-meta-row .m strong{ color:#fff; font-weight:700; }

/* ============== HERO IMAGE BANNER ============== */
.det-banner-wrap{
  margin-top: -50px; position:relative; z-index: 2;
  margin-bottom: 50px;
}
.det-banner{
  position:relative;
  aspect-ratio: 21 / 8;
  border-radius: 22px;
  overflow:hidden;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 30px 70px -20px rgba(3,6,65,.55);
  border: 1px solid rgba(255,255,255,.10);
}
@media (max-width: 720px){
  .det-banner{ aspect-ratio: 16 / 11; border-radius: 18px; }
  .det-banner-wrap{ margin-top: -30px; margin-bottom: 36px; }
}
.det-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(560px 320px at 80% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(400px 280px at 12% 90%, rgba(245,215,122,.20), transparent 60%);
}
.det-banner::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.det-banner .glyph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size: clamp(96px, 14vw, 180px);
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 36px rgba(0,0,0,.4);
}
.det-banner .corner-stamp{
  position:absolute; right: 22px; bottom: 22px;
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff; font-size: 12px; font-weight:700;
  letter-spacing:.6px;
}
.det-banner .corner-stamp i{ color:#f5d77a; }

/* ============== BODY LAYOUT ============== */
.det-body-section{ padding: 0 0 70px; background: var(--bg); }
.det-grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
}
@media (max-width: 980px){
  .det-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ============== ARTICLE ============== */
.det-article{
  font-size: 16px; line-height: 1.75;
  color: var(--text-2);
}
.det-article h2{
  font-size: 26px; font-weight: 800;
  letter-spacing:-.5px; color: var(--text);
  margin: 38px 0 14px;
  display:flex; align-items:center; gap:12px;
}
.det-article h2 .num{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff; font-size:14px; font-weight:800;
  box-shadow: 0 8px 18px -8px rgba(14,55,137,.55);
}
.det-article h2:first-child{ margin-top:0; }
.det-article p{ margin: 0 0 16px; }
.det-article p:last-child{ margin-bottom: 0; }
.det-article a{ color: var(--brand-2); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.det-article strong{ color: var(--text); }

.det-article ul{
  list-style: none; padding: 0; margin: 12px 0 22px;
}
.det-article ul li{
  position: relative;
  padding: 10px 14px 10px 38px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 15px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.det-article ul li:hover{ transform: translateX(4px); border-color: var(--brand-3); }
.det-article ul li::before{
  content: "\f00c";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff; font-size: 9px;
  display:grid; place-items:center;
}

/* Pull-quote */
.det-quote{
  margin: 30px 0;
  padding: 30px 32px;
  background: linear-gradient(135deg, rgba(14,55,137,.05), rgba(245,215,122,.05));
  border-left: 4px solid var(--brand-2);
  border-radius: 14px;
  position: relative;
}
.det-quote::before{
  content: "\201C";
  position:absolute; top: 4px; left: 22px;
  font-size: 64px; line-height:1;
  color: var(--brand-2); opacity: .18;
  font-family: Georgia, serif;
}
.det-quote p{
  font-size: 19px; line-height: 1.55;
  color: var(--text); font-weight: 500; font-style: italic;
  margin: 0 0 10px;
}
.det-quote cite{
  font-style: normal; font-size: 13.5px; font-weight:700;
  color: var(--brand-2); letter-spacing:.4px;
}
.det-quote cite .role{
  color: var(--text-mute); font-weight: 500; margin-left: 6px;
}

/* Stat row */
.det-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0;
}
@media (max-width: 600px){ .det-stats{ grid-template-columns: 1fr 1fr; } }
.det-stat{
  padding: 22px 18px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.det-stat:hover{ transform: translateY(-3px); border-color: var(--brand-3); }
.det-stat .v{
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  line-height: 1; margin-bottom: 6px;
}
.det-stat .l{ font-size: 12.5px; color: var(--text-mute); letter-spacing:.4px; }

/* ============== GALLERY ============== */
.det-gallery{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 26px 0 8px;
}
@media (max-width: 720px){ .det-gallery{ grid-template-columns: repeat(2, 1fr); } }

.gal{
  position: relative;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gal:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(3,6,65,.35); }
.gal.big{ grid-column: span 4; aspect-ratio: 16/10; }
.gal.sm{ grid-column: span 2; }
@media (max-width: 720px){
  .gal.big, .gal.sm{ grid-column: span 2; aspect-ratio: 4/3; }
}

.gal-img{
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.gal-img.alt1{ background: linear-gradient(135deg, #0e3789 0%, #2950bd 100%); }
.gal-img.alt2{ background: linear-gradient(135deg, #030641 0%, #1a4bb8 100%); }
.gal-img.alt3{ background: linear-gradient(135deg, #2950bd 0%, #4f8cff 100%); }
.gal-img.alt4{ background: linear-gradient(135deg, #0e3789 0%, #030641 100%); }
.gal-img::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(280px 200px at 80% 20%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(220px 180px at 15% 90%, rgba(245,215,122,.18), transparent 60%);
}
.gal-img::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.gal-icon{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color: rgba(255,255,255,.92);
  font-size: 48px;
  text-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .35s var(--ease);
}
.gal.big .gal-icon{ font-size: 72px; }
.gal:hover .gal-icon{ transform: scale(1.1) rotate(-3deg); }

.gal-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
  color:#fff; font-size: 12px; font-weight: 600;
  letter-spacing:.3px;
}

/* ============== SIDEBAR ============== */
.det-side{
  position: sticky; top: 24px;
  align-self: start;
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 980px){ .det-side{ position: static; } }

.side-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px -14px rgba(3,6,65,.18);
}
.side-head{
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff;
  font-size: 13px; font-weight: 800; letter-spacing:.6px;
  text-transform: uppercase;
  display:flex; align-items:center; gap: 10px;
}
.side-head i{ font-size: 14px; color: #f5d77a; }

.side-body{ padding: 18px 20px; }

.fact-row{
  display:flex; align-items: flex-start; gap:12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.fact-row:last-child{ border-bottom: 0; }
.fact-row .ic{
  width: 32px; height:32px; border-radius:10px;
  background: linear-gradient(135deg, rgba(14,55,137,.10), rgba(41,80,189,.08));
  color: var(--brand-2);
  display:grid; place-items:center;
  flex-shrink: 0;
  font-size: 13px;
}
.fact-row .txt{ flex: 1; }
.fact-row .lbl{ font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing:.5px; margin-bottom: 2px; }
.fact-row .val{ color: var(--text); font-weight: 600; }

.side-share{
  display:flex; gap: 8px;
  margin-top: 4px;
}
.side-share a{
  flex: 1;
  display:grid; place-items: center;
  height: 38px; border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: 14px;
  transition: all .25s var(--ease);
}
.side-share a:hover{ background: var(--brand-2); color: #fff; transform: translateY(-2px); }

.side-cta{
  padding: 22px 20px;
  background: linear-gradient(135deg, #030641 0%, #0e3789 100%);
  color: #fff;
  text-align: center;
}
.side-cta h4{
  font-size: 17px; font-weight: 800; margin: 0 0 6px;
}
.side-cta h4 .gold{
  background: linear-gradient(90deg, #f5d77a, #d4af37);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.side-cta p{
  font-size: 13px; color: rgba(255,255,255,.75);
  margin: 0 0 14px; line-height:1.55;
}
.side-cta .btn-go{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #f5d77a, #d4af37);
  color:#2c1f00; font-weight: 800; font-size: 13px;
  transition: transform .25s var(--ease);
}
.side-cta .btn-go:hover{ transform: translateY(-2px); }

/* ============== PREV / NEXT NAV ============== */
.det-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 50px;
}
@media (max-width: 720px){ .det-nav{ grid-template-columns: 1fr; } }

.det-nav a{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border:1px solid var(--line);
  border-radius: 16px;
  transition: all .3s var(--ease);
  color: var(--text);
}
.det-nav a:hover{ border-color: var(--brand-2); transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(3,6,65,.22); }
.det-nav a .arr{
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff;
  display:grid; place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.det-nav a:hover .arr{ transform: scale(1.05); }
.det-nav .next{ text-align: right; }
.det-nav .next .arr{ order: 2; }
.det-nav .lbl{
  font-size: 11px; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
  margin-bottom: 4px;
}
.det-nav .ttl{
  font-size: 14.5px; font-weight: 700;
  display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden;
}

/* ============== RELATED ============== */
.det-related{
  padding: 60px 0 70px;
  background:
    radial-gradient(800px 400px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    var(--bg-soft);
}
.section-head-c{ text-align:center; max-width:720px; margin: 0 auto 38px; }
.section-eyebrow-c{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 14px; border-radius:999px;
  background: rgba(14,55,137,.08); color: var(--brand-2);
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  margin-bottom:14px;
}
.section-title-c{
  font-size: clamp(26px, 3.2vw, 34px); font-weight:800;
  letter-spacing:-.8px; line-height:1.15; margin: 0 0 10px;
  color: var(--text);
}
.section-title-c .grad{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub-c{ font-size:15px; color: var(--text-mute); line-height:1.6; margin:0; }

.rel-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px){ .rel-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .rel-grid{ grid-template-columns: 1fr; } }

.rel-card{
  background:#fff; border:1px solid var(--line);
  border-radius: 18px; overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column;
}
.rel-card:hover{ transform: translateY(-5px); border-color: var(--brand-3); box-shadow: 0 22px 44px -18px rgba(3,6,65,.25); }
.rel-media{
  aspect-ratio: 16/9;
  position: relative;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  overflow:hidden;
}
.rel-media::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(280px 180px at 80% 25%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(220px 160px at 15% 90%, rgba(245,215,122,.20), transparent 60%);
}
.rel-media .icon{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size: 56px; color: rgba(255,255,255,.92);
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
  transition: transform .4s var(--ease);
}
.rel-card:hover .rel-media .icon{ transform: scale(1.1) rotate(-3deg); }
.rel-media .tag{
  position:absolute; top:12px; left:12px;
  padding: 5px 11px; border-radius:999px;
  background: rgba(255,255,255,.94); color: var(--brand-1);
  font-size: 11px; font-weight: 700; letter-spacing:.5px;
  text-transform: uppercase;
}
.rel-body{ padding: 18px 20px 20px; }
.rel-date{
  font-size: 12px; color: var(--text-soft); font-weight:700;
  letter-spacing:.4px; margin-bottom: 8px;
}
.rel-title{
  font-size: 16px; font-weight:800;
  color: var(--text); line-height: 1.35; margin: 0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rel-desc{
  font-size: 13.5px; color: var(--text-mute);
  line-height:1.55; margin: 0 0 12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rel-link{
  display:inline-flex; align-items:center; gap: 7px;
  color: var(--brand-2); font-weight: 700; font-size: 13px;
  transition: gap .3s var(--ease);
}
.rel-card:hover .rel-link{ gap: 12px; }

/* ============== LIGHTBOX ============== */
.lb-backdrop{
  position: fixed; inset:0; z-index: 999;
  background: rgba(3,6,30,.88);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn .3s var(--ease);
}
.lb-backdrop.open{ display:flex; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.lb-content{
  width: min(900px, 100%);
  aspect-ratio: 16/10;
  border-radius: 22px;
  overflow:hidden;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
}
.lb-close{
  position: absolute; top: -50px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 16px;
  cursor: pointer;
  display:grid; place-items:center;
  transition: background .25s var(--ease);
}
.lb-close:hover{ background: rgba(255,255,255,.22); }

/* ============== RESPONSIVE ============== */
@media (max-width: 720px){
  .det-hero{ padding: 50px 0 60px; }
  .det-stats{ gap: 10px; }
}


/* =========================================================
   === MARKET WATCH (economic-calendar.html) ==============
   Custom live-style market watch widget
   ========================================================= */

.mw-section{
  padding: 60px 0 70px;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(245,215,122,.05), transparent 60%),
    var(--bg);
}
.mw-section .mw-grad{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.mw-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(3,6,65,.30);
  isolation: isolate;
}

/* Animated accent strip */
.mw-accent{
  position: absolute; top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 45%, var(--brand-3) 70%, #f5d77a 100%);
  background-size: 200% 100%;
  animation: mwShine 6s linear infinite;
  z-index: 2;
}
@keyframes mwShine{ 0%{ background-position: 0 0; } 100%{ background-position: 200% 0; } }

/* ====== Toolbar ====== */
.mw-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.mw-status{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26,188,136,.10), rgba(26,188,136,.04));
  border: 1px solid rgba(26,188,136,.25);
  color: #0e7a52;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px;
}
.mw-status-text{ text-transform: uppercase; }
.mw-pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: #1abc88;
  box-shadow: 0 0 0 0 rgba(26,188,136,.6);
  animation: mwPulse 1.6s infinite;
}
@keyframes mwPulse{
  0%{ box-shadow: 0 0 0 0 rgba(26,188,136,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(26,188,136,0); }
  100%{ box-shadow: 0 0 0 0 rgba(26,188,136,0); }
}
.mw-time{
  margin-left: 4px; padding-left: 10px;
  border-left: 1px solid rgba(26,188,136,.25);
  color: #0e7a52; opacity: .85;
  font-weight: 600; font-size: 11.5px;
}

.mw-search-wrap{
  position: relative;
  min-width: 260px; flex: 1; max-width: 380px;
}
.mw-search-wrap > i{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); font-size: 13px;
  pointer-events: none;
}
.mw-search{
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: 500 13.5px Inter, system-ui, sans-serif;
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mw-search::placeholder{ color: var(--text-soft); }
.mw-search:focus{
  outline: 0; border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

/* ====== Tabs ====== */
.mw-tabs{
  display: flex; gap: 8px;
  padding: 14px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.mw-tabs::-webkit-scrollbar{ height: 4px; }
.mw-tabs::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 99px; }

.mw-tab{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  color: var(--text-2);
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.mw-tab i{ font-size: 12px; opacity: .8; }
.mw-tab:hover{ background: #eef1f8; color: var(--brand-1); }
.mw-tab.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(14,55,137,.55);
}
.mw-tab-count{
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: rgba(14,55,137,.10);
  color: var(--brand-2);
  font-size: 10.5px; font-weight: 800;
}
.mw-tab.active .mw-tab-count{ background: rgba(255,255,255,.22); color: #fff; }

/* ====== Table ====== */
.mw-table-wrap{
  overflow-x: auto;
  background: #fff;
}
.mw-table{
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.mw-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, #f7f8fc 0%, #f0f3fa 100%);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px; font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .6px;
  white-space: nowrap;
}
.mw-th-num{ text-align: right; }
.mw-th-chart{ text-align: center; width: 90px; }
.mw-th-action{ text-align: right; width: 150px; }
.mw-table thead th[data-sort]{ cursor: pointer; }
.mw-table thead th[data-sort]:hover{ color: var(--brand-2); }

.mw-table tbody tr{
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.mw-table tbody tr:hover{
  background: linear-gradient(90deg, rgba(14,55,137,.025), rgba(14,55,137,.05));
}
.mw-table tbody td{
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--text);
}

/* Symbol cell */
.mw-td-sym{
  display: flex; align-items: center; gap: 12px;
  font-weight: 700;
}
.mw-ic{
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .3px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(14,55,137,.45);
}
.mw-sym{ font-size: 14px; letter-spacing: -.2px; }
.mw-cat-mini{
  display: block;
  font-size: 11px; color: var(--text-soft);
  font-weight: 600; margin-top: 2px;
}

/* Price cells */
.mw-td-price{
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.mw-td-price.flash-up{ animation: mwFlashUp .9s ease-out; }
.mw-td-price.flash-dn{ animation: mwFlashDn .9s ease-out; }
@keyframes mwFlashUp{
  0%{ background: rgba(26,188,136,.30); color: #0e7a52; }
  100%{ background: transparent; color: var(--text); }
}
@keyframes mwFlashDn{
  0%{ background: rgba(239,71,96,.28); color: #c0263c; }
  100%{ background: transparent; color: var(--text); }
}
.mw-ask{ color: var(--text-2); }

/* Spread chip */
.mw-td-spread{ text-align: right; }
.mw-spread-chip{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--line);
  min-width: 44px; text-align: center;
}

/* Change pill */
.mw-td-change{ text-align: right; }
.mw-chg{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .2px;
  min-width: 90px; justify-content: center;
}
.mw-chg.up{ background: rgba(26,188,136,.12); color: #0e7a52; }
.mw-chg.dn{ background: rgba(239,71,96,.12); color: #c0263c; }
.mw-chg i{ font-size: 11px; }

/* High / Low compact */
.mw-td-hl{ text-align: right; line-height: 1.3; }
.mw-hi, .mw-lo{
  font-size: 12px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.mw-hi .lbl{ color: #1abc88; margin-right: 6px; font-weight: 800; }
.mw-lo .lbl{ color: #ef4760; margin-right: 6px; font-weight: 800; }

/* Sparkline */
.mw-td-spark{ text-align: center; }
.mw-td-spark svg{
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(3,6,65,.10));
}

/* Action buttons */
.mw-td-action{ text-align: right; white-space: nowrap; }
.mw-btn-sell, .mw-btn-buy{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  margin-left: 6px;
}
.mw-btn-sell{
  background: rgba(239,71,96,.10);
  color: #c0263c;
  border: 1px solid rgba(239,71,96,.30);
}
.mw-btn-sell:hover{
  background: #ef4760; color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(239,71,96,.6);
}
.mw-btn-buy{
  background: rgba(26,188,136,.12);
  color: #0e7a52;
  border: 1px solid rgba(26,188,136,.30);
}
.mw-btn-buy:hover{
  background: #1abc88; color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(26,188,136,.6);
}

.mw-empty{
  padding: 50px 22px !important;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}

/* ====== Footer ====== */
.mw-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border-top: 1px solid var(--line);
}
.mw-foot-left{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-mute); font-size: 13px; line-height: 1.5;
  flex: 1; min-width: 220px;
}
.mw-foot-left i{ color: var(--brand-2); font-size: 14px; }

.mw-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-weight: 700; font-size: 13.5px;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 24px -12px rgba(14,55,137,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mw-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px rgba(14,55,137,.7);
}
.mw-cta i{ font-size: 12px; }
.mw-cta-arr{ transition: transform .25s var(--ease); }
.mw-cta:hover .mw-cta-arr{ transform: translateX(3px); }

/* ====== Responsive ====== */
@media (max-width: 720px){
  .mw-section{ padding: 44px 0 54px; }
  .mw-toolbar{ padding: 16px 16px; }
  .mw-tabs{ padding: 12px 16px; }
  .mw-search-wrap{ min-width: 100%; max-width: none; }
  .mw-table tbody td{ padding: 12px 14px; }
  .mw-foot{ padding: 16px 18px; }
  .mw-foot-left{ font-size: 12.5px; }
  .mw-cta{ width: 100%; justify-content: center; }
}


/* =========================================================
   === FOREX MARKET HOURS (economic-calendar.html) ========
   Live session tracker — Sydney / Tokyo / London / NY
   ========================================================= */

.fmh-section{
  padding: 60px 0 70px;
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(14,55,137,.05), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(245,215,122,.05), transparent 60%),
    var(--bg);
}
.fmh-section .fmh-grad{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.fmh-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(3,6,65,.30);
  isolation: isolate;
}
.fmh-accent{
  position: absolute; top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 45%, var(--brand-3) 70%, #f5d77a 100%);
  background-size: 200% 100%;
  animation: mwShine 6s linear infinite;
  z-index: 2;
}

/* ====== Toolbar ====== */
.fmh-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.fmh-status{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26,188,136,.10), rgba(26,188,136,.04));
  border: 1px solid rgba(26,188,136,.25);
  color: #0e7a52;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px;
}
.fmh-status-text{ text-transform: uppercase; }
.fmh-pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: #1abc88;
  box-shadow: 0 0 0 0 rgba(26,188,136,.6);
  animation: mwPulse 1.6s infinite;
}

.fmh-clocks{
  display: flex; gap: 10px; flex-wrap: wrap;
}
.fmh-clock{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.fmh-clock .lbl{
  font-size: 10.5px; color: var(--text-soft);
  font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
}
.fmh-clock .val{
  font-weight: 800; color: var(--brand-1);
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}

/* ====== 24h Timeline ====== */
.fmh-timeline{
  padding: 22px 22px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-bottom: 1px solid var(--line);
}
.fmh-rail{
  position: relative;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f4f6fb 0%, #eef1f8 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
/* faint hourly grid */
.fmh-grid24{
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(14,55,137,.08) 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
  opacity: .6;
  pointer-events: none;
}
.fmh-session{
  position: absolute;
  top: 8px; bottom: 8px;
  left: var(--start);
  width: calc(var(--end) - var(--start));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
  color: #fff;
  letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  opacity: .92;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px -6px rgba(3,6,65,.3);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.fmh-session:hover{ transform: translateY(-1px); opacity: 1; }
.fmh-session-label{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 8px;
}
.fmh-session.sydney  { background: linear-gradient(135deg, #5b8def, #2950bd); }
.fmh-session.tokyo   { background: linear-gradient(135deg, #ef4760, #b91c1c); }
.fmh-session.london  { background: linear-gradient(135deg, #f5d77a, #d4af37); color: #2c1f00; text-shadow: none; }
.fmh-session.newyork { background: linear-gradient(135deg, #1abc88, #0e7a52); }

/* "Now" cursor */
.fmh-now{
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: #030641;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(245,215,122,.6), 0 0 14px rgba(3,6,65,.5);
  transition: left .8s linear;
}
.fmh-now::before{
  content: ""; position: absolute;
  top: -4px; left: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #030641;
  box-shadow: 0 0 0 3px rgba(245,215,122,.8), 0 0 14px rgba(245,215,122,.5);
}
.fmh-now::after{
  content: "NOW";
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px; font-weight: 800;
  color: #030641;
  background: #f5d77a;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .6px;
  white-space: nowrap;
}

/* hour ticks */
.fmh-ticks{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 8px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .4px;
}
.fmh-ticks span{ text-align: center; }
.fmh-ticks span:first-child{ text-align: left; }
.fmh-ticks span:last-child{ text-align: right; }

/* Legend */
.fmh-legend{
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  padding-top: 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text-mute);
}
.fmh-leg{
  display: inline-flex; align-items: center; gap: 6px;
}
.fmh-leg .sw{
  width: 10px; height: 10px; border-radius: 3px;
}
.fmh-leg.sydney  .sw{ background: linear-gradient(135deg, #5b8def, #2950bd); }
.fmh-leg.tokyo   .sw{ background: linear-gradient(135deg, #ef4760, #b91c1c); }
.fmh-leg.london  .sw{ background: linear-gradient(135deg, #f5d77a, #d4af37); }
.fmh-leg.newyork .sw{ background: linear-gradient(135deg, #1abc88, #0e7a52); }
.fmh-leg.now     .sw{ background: #030641; box-shadow: 0 0 0 2px #f5d77a; }

/* ====== Session cards grid ====== */
.fmh-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px;
}
@media (max-width: 980px){ .fmh-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .fmh-grid{ grid-template-columns: 1fr; } }

.fmh-card-mini{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.fmh-card-mini:hover{
  transform: translateY(-3px);
  border-color: var(--brand-3);
  box-shadow: 0 16px 30px -14px rgba(3,6,65,.20);
}
.fmh-card-mini[data-open="1"]{
  border-color: rgba(26,188,136,.35);
  background: linear-gradient(180deg, rgba(26,188,136,.04) 0%, #ffffff 60%);
}

.fmh-card-head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.fmh-card-head > div:not(.fmh-pill){ flex: 1; min-width: 0; }
.fmh-ic{
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(14,55,137,.45);
}
.fmh-ic.sydney  { background: linear-gradient(135deg, #5b8def, #2950bd); }
.fmh-ic.tokyo   { background: linear-gradient(135deg, #ef4760, #b91c1c); }
.fmh-ic.london  { background: linear-gradient(135deg, #f5d77a, #d4af37); color: #2c1f00; }
.fmh-ic.newyork { background: linear-gradient(135deg, #1abc88, #0e7a52); }

.fmh-city{
  font-size: 15px; font-weight: 800; color: var(--text);
  letter-spacing: -.2px;
}
.fmh-zone{
  font-size: 11.5px; color: var(--text-soft);
  margin-top: 2px;
}

.fmh-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
}
.fmh-pill.open{
  background: rgba(26,188,136,.12);
  color: #0e7a52;
  border: 1px solid rgba(26,188,136,.30);
}
.fmh-pill.open::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #1abc88;
  animation: mwPulse 1.6s infinite;
}
.fmh-pill.closed{
  background: rgba(110,118,145,.10);
  color: var(--text-mute);
  border: 1px solid var(--line);
}
.fmh-pill.closed::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-soft);
}

.fmh-info-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.fmh-info{
  display: flex; flex-direction: column;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.fmh-info .lbl{
  font-size: 10.5px; color: var(--text-soft);
  font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 4px;
}
.fmh-info .val{
  font-size: 14px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fmh-info .val.accent{ color: var(--brand-2); }

/* Mini bar — session progress for that city */
.fmh-mini-bar{
  position: relative;
  height: 8px; border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 8px;
}
.fmh-mini-fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(14,55,137,.20), var(--brand-2));
  transition: width .8s linear;
}
.fmh-card-mini[data-open="1"] .fmh-mini-fill{
  background: linear-gradient(90deg, rgba(26,188,136,.40), #1abc88);
}
.fmh-mini-cursor{
  position: absolute; top: -2px; bottom: -2px;
  width: 2px; left: 0%;
  background: #030641;
  box-shadow: 0 0 0 1px #f5d77a;
  transition: left .8s linear;
}

.fmh-hours{
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 600;
}
.fmh-hours span{ color: var(--text-2); font-weight: 700; }

/* ====== Footer ====== */
.fmh-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border-top: 1px solid var(--line);
}
.fmh-foot-left{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-mute); font-size: 13px; line-height: 1.5;
  flex: 1; min-width: 220px;
}
.fmh-foot-left i{ color: var(--brand-2); font-size: 14px; }

.fmh-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-weight: 700; font-size: 13.5px;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 24px -12px rgba(14,55,137,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fmh-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px rgba(14,55,137,.7);
}
.fmh-cta i{ font-size: 12px; }
.fmh-cta-arr{ transition: transform .25s var(--ease); }
.fmh-cta:hover .fmh-cta-arr{ transform: translateX(3px); }

/* ====== Responsive ====== */
@media (max-width: 720px){
  .fmh-section{ padding: 44px 0 54px; }
  .fmh-toolbar{ padding: 16px; }
  .fmh-timeline{ padding: 16px; }
  .fmh-grid{ padding: 16px; }
  .fmh-foot{ padding: 16px 18px; }
  .fmh-cta{ width: 100%; justify-content: center; }
  .fmh-session-label{ font-size: 10px; }
}


/* =========================================================
   === SWAP-FREE (swap-free.html) =========================
   ========================================================= */

/* Explainer */
.sf-explain{
  padding: 70px 0;
  background: var(--bg);
}
.sf-explain-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px){ .sf-explain-grid{ grid-template-columns: 1fr; gap: 40px; } }

.sf-explain-text .section-title-c{ text-align: left; }
.sf-explain-text p{
  font-size: 15.5px; line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 16px;
}
.sf-explain-text strong{ color: var(--text); }
.sf-explain-text em{ color: var(--brand-2); font-style: italic; }

.sf-quote{
  margin-top: 24px;
  padding: 20px 22px 20px 56px;
  background: linear-gradient(135deg, rgba(245,215,122,.10), rgba(212,175,55,.04));
  border-left: 4px solid #d4af37;
  border-radius: 12px;
  position: relative;
}
.sf-quote > i{
  position: absolute; top: 18px; left: 22px;
  color: #d4af37; opacity: .65;
  font-size: 20px;
}
.sf-quote p{
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  color: var(--text);
}

/* Compare cards */
.sf-explain-visual{
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
}
.sf-vis-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 14px 28px -18px rgba(3,6,65,.20);
}
.sf-vis-card.good{
  border-color: rgba(26,188,136,.30);
  background: linear-gradient(180deg, rgba(26,188,136,.05) 0%, #fff 50%);
}
.sf-vis-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.sf-vis-title{
  font-size: 15px; font-weight: 800; color: var(--text);
  letter-spacing: -.3px;
}
.sf-vis-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
}
.sf-vis-tag.bad{
  background: rgba(239,71,96,.10);
  color: #c0263c;
  border: 1px solid rgba(239,71,96,.25);
}
.sf-vis-tag.good{
  background: rgba(26,188,136,.12);
  color: #0e7a52;
  border: 1px solid rgba(26,188,136,.30);
}
.sf-vis-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sf-vis-list li{
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-2);
}
.sf-vis-list li i{ font-size: 14px; flex-shrink: 0; }
.sf-bad{ color: #ef4760; }
.sf-good{ color: #1abc88; }

.sf-vis-divider{
  text-align: center;
  position: relative;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-soft);
}
.sf-vis-divider span{
  display: inline-block;
  padding: 4px 14px;
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* Steps */
.sf-how{
  padding: 70px 0;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    var(--bg-soft);
}
.sf-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: sf-step;
}
@media (max-width: 980px){ .sf-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .sf-steps{ grid-template-columns: 1fr; } }

.sf-step{
  position: relative;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow: hidden;
}
.sf-step::after{
  content: ""; position: absolute;
  inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  opacity: 0; transition: opacity .3s var(--ease);
}
.sf-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -16px rgba(3,6,65,.25);
  border-color: var(--brand-3);
}
.sf-step:hover::after{ opacity: 1; }

.sf-step-num{
  position: absolute; top: 16px; right: 18px;
  font-size: 48px; font-weight: 900;
  letter-spacing: -1px;
  color: var(--line-2);
  line-height: 1;
}
.sf-step-ic{
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  display: grid; place-items: center;
  font-size: 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px -8px rgba(14,55,137,.55);
}
.sf-step h4{
  margin: 0 0 8px;
  font-size: 16px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.sf-step p{
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-mute);
}

/* Features */
.sf-features{
  padding: 70px 0;
  background: var(--bg);
}
.sf-feat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px){ .sf-feat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .sf-feat-grid{ grid-template-columns: 1fr; } }

.sf-feat{
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sf-feat:hover{
  transform: translateY(-4px);
  border-color: var(--brand-3);
  box-shadow: 0 16px 30px -16px rgba(3,6,65,.20);
}
.sf-feat-ic{
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,55,137,.10), rgba(41,80,189,.05));
  color: var(--brand-2);
  display: grid; place-items: center;
  font-size: 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(14,55,137,.10);
}
.sf-feat h4{
  margin: 0 0 8px;
  font-size: 16px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.sf-feat p{
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-mute);
}

/* Compliance band */
.sf-compliance{
  padding: 40px 0;
  background: linear-gradient(135deg, #030641 0%, #0e3789 100%);
  color: #fff;
}
.sf-cert{
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px){ .sf-cert{ grid-template-columns: 1fr; gap: 18px; } }

.sf-cert-ic{
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5d77a, #d4af37);
  color: #2c1f00;
  display: grid; place-items: center;
  font-size: 32px;
  box-shadow: 0 12px 30px -12px rgba(245,215,122,.55);
}
.sf-cert-body{ color: rgba(255,255,255,.85); }
.sf-cert-label{
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: #f5d77a;
  margin-bottom: 6px;
}
.sf-cert-body h3{
  margin: 0 0 10px;
  font-size: 22px; font-weight: 800;
  color: #fff; letter-spacing: -.5px;
  line-height: 1.3;
}
.sf-cert-body p{
  margin: 0 0 14px;
  font-size: 14.5px; line-height: 1.65;
}
.sf-cert-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: #f5d77a;
  transition: gap .3s var(--ease);
}
.sf-cert-link:hover{ gap: 12px; }
.sf-cert-link i{ font-size: 12px; }

/* FAQ */
.sf-faq-section{
  padding: 70px 0;
  background: var(--bg-soft);
}
.sf-faq{
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 12px;
}
.sf-faq-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sf-faq-item:hover{ border-color: var(--brand-3); }
.sf-faq-item[open]{
  border-color: var(--brand-2);
  box-shadow: 0 14px 28px -16px rgba(14,55,137,.25);
}
.sf-faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 15px; font-weight: 700;
  color: var(--text);
}
.sf-faq-item summary::-webkit-details-marker{ display: none; }
.sf-faq-item summary i{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--brand-2);
  display: grid; place-items: center;
  font-size: 12px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  flex-shrink: 0;
}
.sf-faq-item[open] summary i{
  transform: rotate(45deg);
  background: var(--brand-2);
  color: #fff;
}
.sf-faq-body{
  padding: 0 22px 18px;
  font-size: 14px; line-height: 1.7;
  color: var(--text-mute);
}
.sf-faq-body p{ margin: 0; }
.sf-faq-body em{ color: var(--brand-2); font-style: italic; }


/* =========================================================
   === SWAP SYMBOL (swap-symbol.html) =====================
   ========================================================= */

.ss-tool-section{
  padding: 60px 0;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(245,215,122,.05), transparent 60%),
    var(--bg);
}
.ss-tool-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px){ .ss-tool-grid{ grid-template-columns: 1fr; } }

/* Calculator card */
.ss-calc{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  position: sticky; top: 20px;
  box-shadow: 0 14px 30px -18px rgba(3,6,65,.20);
}
@media (max-width: 980px){ .ss-calc{ position: static; } }

.ss-calc-head{
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 13px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.ss-calc-head i{ color: #f5d77a; font-size: 14px; }
.ss-calc-body{ padding: 18px 20px; }

.ss-field{ display: block; margin-bottom: 14px; }
.ss-field-lbl{
  display: block;
  font-size: 11px; font-weight: 800;
  color: var(--text-soft);
  letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 6px;
}
.ss-select, .ss-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: 600 14px Inter, system-ui, sans-serif;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ss-input:focus, .ss-select:focus{
  outline: 0;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

.ss-pos-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ss-pos-toggle button{
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  font: 700 13px Inter, system-ui, sans-serif;
  color: var(--text-mute);
  cursor: pointer;
  transition: all .2s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ss-pos-toggle button i{ font-size: 11px; }
.ss-pos-toggle button:hover{ color: var(--brand-1); }
.ss-pos-toggle button.active{
  background: #fff;
  color: var(--brand-1);
  box-shadow: 0 4px 10px -4px rgba(3,6,65,.15);
}
.ss-pos-toggle button.active[data-side="long"]{ color: #0e7a52; }
.ss-pos-toggle button.active[data-side="short"]{ color: #c0263c; }

.ss-calc-result{
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(14,55,137,.05), rgba(245,215,122,.04));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ss-calc-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.ss-calc-row .lbl{ color: var(--text-mute); }
.ss-calc-row .val{
  font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ss-calc-row.total{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.ss-calc-row.total .lbl{ color: var(--text); font-weight: 700; }
.ss-calc-row.total .val{
  font-size: 18px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ss-calc-row.total.pos .val{
  background: linear-gradient(135deg, #1abc88, #0e7a52);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ss-calc-row.total.neg .val{
  background: linear-gradient(135deg, #ef4760, #c0263c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ss-calc-note{
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

.ss-calc-cta{
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5d77a, #d4af37);
  color: #2c1f00;
  font-weight: 800; font-size: 13px;
  letter-spacing: .3px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ss-calc-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(212,175,55,.55); }
.ss-calc-cta i{ font-size: 13px; }

/* Filter chips */
.ss-filter-row{
  display: flex; gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ss-filter-row::-webkit-scrollbar{ height: 4px; }
.ss-filter-row::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 99px; }

.ss-chip{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.ss-chip i{ font-size: 12px; opacity: .8; }
.ss-chip:hover{ border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); }
.ss-chip.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(14,55,137,.55);
}
.ss-chip .count{
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: rgba(14,55,137,.08);
  color: var(--brand-2);
  font-size: 11px; font-weight: 800;
}
.ss-chip.active .count{ background: rgba(255,255,255,.22); color: #fff; }

/* Search */
.ss-search-wrap{
  position: relative;
  margin-bottom: 14px;
}
.ss-search-wrap > i{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); font-size: 13px;
  pointer-events: none;
}
.ss-search{
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: 500 14px Inter, system-ui, sans-serif;
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ss-search::placeholder{ color: var(--text-soft); }
.ss-search:focus{
  outline: 0;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

/* Table card */
.ss-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 30px -20px rgba(3,6,65,.20);
}
.ss-card-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.ss-card-title{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--brand-1);
}
.ss-card-title i{ color: var(--brand-2); }
.ss-updated{
  font-size: 11.5px; font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .3px;
}

.ss-table-scroll{
  overflow-x: auto;
  background: #fff;
}
.ss-table{
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.ss-table thead th{
  background: linear-gradient(180deg, #f7f8fc 0%, #f0f3fa 100%);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px; font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .6px;
  white-space: nowrap;
}
.ss-th-num{ text-align: right; }

.ss-table tbody tr{
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.ss-table tbody tr:hover{
  background: linear-gradient(90deg, rgba(14,55,137,.025), rgba(14,55,137,.05));
}
.ss-table tbody td{
  padding: 13px 16px;
  vertical-align: middle;
}
.ss-td-sym{
  display: flex; align-items: center; gap: 12px;
  font-weight: 700;
}
.ss-ic{
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.ss-sym-name{
  font-size: 14px; color: var(--text);
}
.ss-sym-cat{
  font-size: 11px; color: var(--text-soft);
  margin-top: 2px; font-weight: 600;
}
.ss-rate{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12.5px;
  min-width: 78px; text-align: center;
}
.ss-rate.pos{
  background: rgba(26,188,136,.12);
  color: #0e7a52;
}
.ss-rate.neg{
  background: rgba(239,71,96,.10);
  color: #c0263c;
}
.ss-td-unit{
  text-align: right;
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 600;
}
.ss-td-triple{
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
}
.ss-td-triple .day{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245,215,122,.18);
  color: #8a6800;
  border: 1px solid rgba(212,175,55,.30);
  font-size: 11px;
}

.ss-empty{
  padding: 50px 22px !important;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}

.ss-card-foot{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.ss-card-foot i{ color: var(--brand-2); font-size: 14px; }

/* Disclaimer note */
.ss-note-section{
  padding: 0 0 70px;
  background: var(--bg);
}
.ss-note{
  background: linear-gradient(135deg, rgba(14,55,137,.05), rgba(41,80,189,.03));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 600px){ .ss-note{ grid-template-columns: 1fr; padding: 22px; } }

.ss-note-ic{
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 12px 22px -10px rgba(14,55,137,.45);
}
.ss-note h3{
  margin: 0 0 10px;
  font-size: 18px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.4px;
}
.ss-note p{
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.65;
  color: var(--text-2);
}
.ss-note strong{ color: var(--text); }
.ss-note em{ color: var(--brand-2); font-style: italic; }
.ss-note ul{
  list-style: none; padding: 0;
  margin: 0; display: flex; flex-direction: column;
  gap: 6px;
}
.ss-note ul li{
  padding: 8px 12px 8px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-2);
  position: relative;
}
.ss-note ul li::before{
  content: "\f054";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 9px;
  color: var(--brand-2);
}
.ss-note ul li a{
  color: var(--brand-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   === ECONOMIC CALENDAR (economic-calendar.html) =========
   Day-grouped event cards with rich details
   ========================================================= */

.ec-section{
  padding: 60px 0 70px;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,55,137,.05), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(245,215,122,.05), transparent 60%),
    var(--bg);
}
.ec-section .ec-grad{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ec-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(3,6,65,.30);
  isolation: isolate;
}
.ec-accent{
  position: absolute; top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 45%, var(--brand-3) 70%, #f5d77a 100%);
  background-size: 200% 100%;
  animation: mwShine 6s linear infinite;
  z-index: 2;
}

/* ====== Toolbar ====== */
.ec-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.ec-status{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26,188,136,.10), rgba(26,188,136,.04));
  border: 1px solid rgba(26,188,136,.25);
  color: #0e7a52;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px;
}
.ec-status-text{ text-transform: uppercase; }
.ec-pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: #1abc88;
  box-shadow: 0 0 0 0 rgba(26,188,136,.6);
  animation: mwPulse 1.6s infinite;
}
.ec-counter{
  margin-left: 4px; padding-left: 10px;
  border-left: 1px solid rgba(26,188,136,.25);
  color: #0e7a52; opacity: .85;
  font-weight: 700; font-size: 11.5px;
}

.ec-tabs{
  display: inline-flex; gap: 6px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ec-tab{
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font: 700 13px Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.ec-tab:hover{ color: var(--brand-1); }
.ec-tab.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(14,55,137,.55);
}

.ec-search-wrap{
  position: relative;
  min-width: 240px; flex: 1; max-width: 320px;
}
.ec-search-wrap > i{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); font-size: 13px;
  pointer-events: none;
}
.ec-search-wrap input{
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: 500 13.5px Inter, system-ui, sans-serif;
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ec-search-wrap input::placeholder{ color: var(--text-soft); }
.ec-search-wrap input:focus{
  outline: 0; border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

/* ====== Filter chips ====== */
.ec-filters{
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.ec-fchips{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
}
.ec-fchips-label{
  display: inline-block;
  font-size: 10.5px; font-weight: 800;
  color: var(--text-soft);
  letter-spacing: .8px; text-transform: uppercase;
  margin-right: 8px; min-width: 56px;
}
.ec-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  color: var(--text-2);
  font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.ec-chip:hover{ background: #eef1f8; color: var(--brand-1); }
.ec-chip.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(14,55,137,.45);
}
.ec-chip .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-soft);
}
.ec-chip.imp-chip.h .dot{ background: #ef4760; }
.ec-chip.imp-chip.m .dot{ background: #ff9b3f; }
.ec-chip.imp-chip.l .dot{ background: #6e7691; }
.ec-chip.imp-chip.h.active{ background: linear-gradient(135deg, #ef4760, #b91c1c); box-shadow: 0 6px 14px -6px rgba(239,71,96,.55); }
.ec-chip.imp-chip.m.active{ background: linear-gradient(135deg, #ff9b3f, #d97706); box-shadow: 0 6px 14px -6px rgba(255,155,63,.55); }
.ec-chip.imp-chip.l.active{ background: linear-gradient(135deg, #6e7691, #475569); box-shadow: 0 6px 14px -6px rgba(110,118,145,.45); }

/* ====== Feed ====== */
.ec-feed{
  background: #fff;
}
.ec-empty{
  padding: 60px 22px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13.5px;
}

.ec-day{
  border-bottom: 1px solid var(--line);
}
.ec-day:last-child{ border-bottom: 0; }
.ec-day-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  background: linear-gradient(180deg, #f7f8fc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.ec-day-head.today{
  background: linear-gradient(135deg, rgba(14,55,137,.06), rgba(245,215,122,.06));
}
.ec-day-name{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
.ec-day-name .badge-today{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d77a, #d4af37);
  color: #2c1f00;
  font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
}
.ec-day-name .badge-tomorrow{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
}
.ec-day-count{
  font-size: 11.5px; font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .3px;
}

.ec-events{ display: flex; flex-direction: column; }

/* Single event row */
.ec-event{
  display: grid;
  grid-template-columns: 76px 30px 56px 70px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  transition: background .2s var(--ease);
  position: relative;
}
.ec-event:first-child{ border-top: 0; }
.ec-event:hover{ background: linear-gradient(90deg, rgba(14,55,137,.025), rgba(14,55,137,.05)); }

.ec-event.released::after{
  content: "Released"; position: absolute;
  top: 8px; right: 14px;
  font-size: 9px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  color: #0e7a52;
  background: rgba(26,188,136,.10);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(26,188,136,.25);
}

.ec-time{
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.ec-time .hh{
  font-size: 15px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.ec-time .zz{
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .4px;
  margin-top: 1px;
}

/* Flag — small rectangular pill with national color band */
.ec-flag{
  width: 30px; height: 22px;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.ec-flag.us{ background: linear-gradient(180deg, #b22234 0%, #b22234 14%, #fff 14%, #fff 28%, #b22234 28%, #b22234 42%, #fff 42%, #fff 56%, #b22234 56%, #b22234 70%, #fff 70%, #fff 84%, #b22234 84%); }
.ec-flag.us::before{
  content:""; position:absolute; top:0; left:0;
  width: 40%; height: 60%;
  background: #3c3b6e;
}
.ec-flag.eu{ background: #003399; }
.ec-flag.eu::before{
  content:"\002B"; position:absolute; inset:0;
  color: #ffcc00; font-size: 12px;
  display: grid; place-items:center;
  font-weight: 900;
}
.ec-flag.gb{ background: linear-gradient(135deg, #012169 0%, #012169 35%, #fff 35%, #fff 45%, #c8102e 45%, #c8102e 55%, #fff 55%, #fff 65%, #012169 65%); }
.ec-flag.jp{ background: #fff; }
.ec-flag.jp::before{
  content:""; position:absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #bc002d;
}
.ec-flag.au{ background: linear-gradient(180deg, #012169 70%, #c8102e 70%); }
.ec-flag.au::after{
  content:""; position:absolute;
  top: 4px; left: 4px;
  width: 10px; height: 6px;
  background: linear-gradient(45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%);
}
.ec-flag.ca{ background: linear-gradient(90deg, #d52b1e 0%, #d52b1e 25%, #fff 25%, #fff 75%, #d52b1e 75%); }
.ec-flag.ca::before{
  content:"\1F341"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size: 10px; color: #d52b1e;
}
.ec-flag.ch{ background: #d52b1e; position:relative; }
.ec-flag.ch::before{
  content:""; position:absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 12px;
  background: #fff;
}
.ec-flag.ch::after{
  content:""; position:absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 4px;
  background: #fff;
}
.ec-flag.nz{ background: #012169; }
.ec-flag.nz::before{
  content:""; position:absolute;
  top: 4px; left: 4px;
  width: 8px; height: 4px;
  background: linear-gradient(45deg, #fff 40%, transparent 40%);
}
.ec-flag.cn{ background: #de2910; position: relative; }
.ec-flag.cn::before{
  content:"\2605"; position: absolute;
  top: 3px; left: 4px;
  font-size: 9px; color: #ffde00;
  line-height: 1;
}

.ec-ccy{
  display: inline-grid; place-items: center;
  height: 26px; padding: 0 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .5px;
}

/* Impact — cow-skull icons (count = severity: high=3, med=2, low=1) */
.ec-imp{
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  min-width: 64px;
  justify-content: center;
}
.ec-imp i{
  font-size: 12px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.10));
}
.ec-imp.h{
  background: rgba(239,71,96,.10);
  border-color: rgba(239,71,96,.30);
}
.ec-imp.h i{ color: #ef4760; }
.ec-imp.m{
  background: rgba(255,155,63,.12);
  border-color: rgba(255,155,63,.30);
}
.ec-imp.m i{ color: #ff9b3f; }
.ec-imp.l{
  background: rgba(110,118,145,.08);
  border-color: rgba(110,118,145,.20);
}
.ec-imp.l i{ color: #6e7691; }

.ec-event-name .name{
  font-size: 14px; font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -.2px;
}
.ec-event-name .cat{
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft);
  letter-spacing: .5px; text-transform: uppercase;
}

/* Actual / Forecast / Previous columns */
.ec-vals{
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 8px;
  margin-left: auto;
}
.ec-vals .v{
  display: flex; flex-direction: column;
  align-items: flex-end;
  padding: 6px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 70px;
}
.ec-vals .v .lbl{
  font-size: 9.5px; font-weight: 800;
  color: var(--text-soft);
  letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 2px;
}
.ec-vals .v .val{
  font-size: 13px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ec-vals .v.actual{ background: #fff; border-color: var(--brand-2); }
.ec-vals .v.actual.up{ background: linear-gradient(180deg, rgba(26,188,136,.06), #fff); border-color: rgba(26,188,136,.40); }
.ec-vals .v.actual.up .val{ color: #0e7a52; }
.ec-vals .v.actual.dn{ background: linear-gradient(180deg, rgba(239,71,96,.06), #fff); border-color: rgba(239,71,96,.40); }
.ec-vals .v.actual.dn .val{ color: #c0263c; }
.ec-vals .v.pending .val{ color: var(--text-soft); font-weight: 700; }

/* ====== Foot ====== */
.ec-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  border-top: 1px solid var(--line);
}
.ec-stats{ display: flex; gap: 22px; flex-wrap: wrap; }
.ec-stat{
  display: flex; flex-direction: column;
}
.ec-stat .lbl{
  font-size: 10.5px; font-weight: 800;
  color: var(--text-soft);
  letter-spacing: .6px; text-transform: uppercase;
}
.ec-stat .val{
  font-size: 17px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.ec-stat .val.red{ color: #c0263c; }
.ec-stat .val.green{ color: #0e7a52; }

.ec-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-weight: 700; font-size: 13.5px;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 24px -12px rgba(14,55,137,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ec-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px rgba(14,55,137,.7);
}
.ec-cta i{ font-size: 12px; }
.ec-cta-arr{ transition: transform .25s var(--ease); }
.ec-cta:hover .ec-cta-arr{ transform: translateX(3px); }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .ec-event{
    grid-template-columns: 64px 28px 50px 60px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  .ec-vals{ grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .ec-section{ padding: 44px 0 54px; }
  .ec-toolbar{ padding: 14px 16px; flex-direction: column; align-items: stretch; }
  .ec-tabs{ overflow-x: auto; }
  .ec-search-wrap{ max-width: none; }
  .ec-filters{ padding: 12px 16px; }
  .ec-event{
    grid-template-columns: auto auto auto auto;
    padding: 14px 16px;
  }
  .ec-event-name{ grid-column: 1 / -1; }
  .ec-vals{ grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .ec-day-head{ padding: 12px 16px; }
  .ec-foot{ padding: 16px; flex-direction: column; align-items: stretch; }
  .ec-cta{ justify-content: center; }
}


/* Skull icons beside impact filter chips */
.ec-skulls{
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  opacity: .85;
}
.ec-skulls i{
  font-size: 11px;
  line-height: 1;
}
.ec-chip.imp-chip.h .ec-skulls i{ color: #ef4760; }
.ec-chip.imp-chip.m .ec-skulls i{ color: #ff9b3f; }
.ec-chip.imp-chip.l .ec-skulls i{ color: #6e7691; }
.ec-chip.imp-chip.active .ec-skulls i{ color: #fff; opacity: .95; }


/* ============================================================
   ONLINE COURSES — public marketplace page
   ============================================================ */
.oc-hero{
  position: relative;
  padding: 60px 0 40px;
  background:
    radial-gradient(720px 460px at 85% 20%, rgba(74,144,255,.16), transparent 60%),
    radial-gradient(620px 420px at 10% 90%, rgba(245,183,60,.12), transparent 60%),
    linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  color:#fff;
  overflow: hidden;
  isolation: isolate;
}
.oc-hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: -1;
}
.oc-hero-inner{
  max-width: 920px; margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.oc-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(245,183,60,.12);
  border: 1px solid rgba(245,183,60,.30);
  color: #f9c660;
  font-size: 12px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 16px;
}
.oc-hero h1{
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 0 0 14px;
  line-height: 1.05;
}
.oc-hero h1 .grad{
  background: linear-gradient(135deg, #f5b73c, #ffd98a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oc-hero p{
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 640px;
}
.oc-hero-stats{
  display: flex; justify-content: center; gap: 30px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.oc-hero-stat{ text-align: center; }
.oc-hero-stat .val{
  font-size: 28px; font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.oc-hero-stat .val .grad{
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oc-hero-stat .lbl{
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.65);
  letter-spacing: .8px; text-transform: uppercase;
  margin-top: 4px;
}

/* Hero search */
.oc-search{
  position: relative;
  max-width: 520px;
  margin: 28px auto 0;
}
.oc-search input{
  width: 100%;
  height: 52px;
  padding: 0 16px 0 50px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.oc-search input::placeholder{ color: rgba(255,255,255,.55); }
.oc-search input:focus{
  outline: none;
  background: rgba(255,255,255,.16);
  border-color: rgba(108,242,191,.50);
  box-shadow: 0 0 0 4px rgba(108,242,191,.18);
}
.oc-search i{
  position: absolute;
  left: 18px; top: 50%; transform: translateY(-50%);
  color: #6cf2bf; font-size: 16px;
  pointer-events: none;
}

/* Body */
.oc-section{
  padding: 50px 0 80px;
  background: var(--bg);
}
.oc-wrap{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Filter bar */
.oc-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.oc-toolbar .left{
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.oc-toolbar .count{
  font-size: 12px; font-weight: 800;
  color: var(--text-mute);
  padding: 6px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.oc-toolbar .right{
  display: flex; align-items: center; gap: 10px;
}
.oc-sort{
  position: relative;
}
.oc-sort select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 0 38px 0 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a93a8' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.oc-filters{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.oc-filter{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.oc-filter:hover{
  border-color: var(--brand-2);
  color: var(--brand-2);
  transform: translateY(-1px);
}
.oc-filter.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(3,6,65,.30);
}
.oc-filter i{ font-size: 10px; }

/* Grid */
.oc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
@media (max-width:520px){
  .oc-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* Course card */
.oc-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(10,20,40,.06);
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--text);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  isolation: isolate;
}
.oc-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(3,6,65,.20);
  border-color: rgba(3,6,65,.30);
}

/* Cover */
.oc-cover{
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.oc-cover::before{
  content:""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  z-index: -1;
  opacity: .5;
}
.oc-cover::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 110% -10%, rgba(255,255,255,.30), transparent 50%),
    radial-gradient(circle at -10% 110%, rgba(0,0,0,.30), transparent 60%);
  z-index: -1;
}
.oc-cover.navy{    background: linear-gradient(135deg, #030641, #0e3789); }
.oc-cover.blue{    background: linear-gradient(135deg, #0e3789, #2950bd); }
.oc-cover.teal{    background: linear-gradient(135deg, #0d8a5f, #1abc88); }
.oc-cover.gold{    background: linear-gradient(135deg, #d4901c, #f5b73c); }
.oc-cover.red{     background: linear-gradient(135deg, #c2185b, #ef4760); }
.oc-cover.purple{  background: linear-gradient(135deg, #5d2a64, #7e3e87); }
.oc-cover.slate{   background: linear-gradient(135deg, #2c3e50, #4a5d72); }
.oc-cover.emerald{ background: linear-gradient(135deg, #0d8a5f, #11998e); }
.oc-cover.sunset{  background: linear-gradient(135deg, #c2185b, #ff6a3d); }
.oc-cover.ocean{   background: linear-gradient(135deg, #00576b, #0078d4); }

.oc-cover .ic{
  font-size: 52px;
  opacity: .85;
  text-shadow: 0 4px 16px rgba(0,0,0,.30);
  transition: transform .35s var(--ease);
}
.oc-card:hover .oc-cover .ic{ transform: scale(1.10) rotate(-3deg); }

.oc-tag{
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.22);
  z-index: 1;
}
.oc-tag i{ font-size: 9px; }

.oc-ribbon{
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1abc88, #0d8a5f);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(26,188,136,.40);
  z-index: 1;
}
.oc-ribbon.hot{ background: linear-gradient(135deg, #ef4760, #c2185b); box-shadow: 0 6px 14px rgba(239,71,96,.40); }
.oc-ribbon.bestseller{ background: linear-gradient(135deg, #f5b73c, #d4901c); box-shadow: 0 6px 14px rgba(245,183,60,.40); }

/* Level chip in cover bottom-right */
.oc-level{
  position: absolute;
  bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.22);
}

/* Body */
.oc-body{
  padding: 18px 18px 16px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 8px;
}
.oc-title{
  font-size: 15.5px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.oc-instructor{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-mute);
}
.oc-instructor i{ font-size: 10px; color: var(--brand-2); }

.oc-meta{
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute);
  flex-wrap: wrap;
}
.oc-meta i{ font-size: 10px; color: var(--brand-2); }
.oc-meta .rating{
  display: inline-flex; align-items: center; gap: 4px;
  color: #d4901c;
}
.oc-meta .rating i{ color: #f5b73c; font-size: 10px; }
.oc-meta .rating .reviews{ color: var(--text-soft); font-weight: 600; margin-left: 2px; }
.oc-meta .dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

/* Footer with price + enroll */
.oc-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.oc-price{
  display: flex; flex-direction: column;
}
.oc-price .now{
  font-size: 18px; font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oc-price .now.free{
  background: linear-gradient(135deg, #1abc88, #0d8a5f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.oc-price .was{
  font-size: 11px; font-weight: 700;
  color: var(--text-soft);
  text-decoration: line-through;
  margin-top: 1px;
}

.oc-enroll{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border: 0; border-radius: 10px;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 6px 14px rgba(3,6,65,.30);
}
.oc-enroll:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(3,6,65,.45); color:#fff; }
.oc-enroll i{ font-size: 11px; }

/* Empty state */
.oc-empty{
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  color: var(--text-mute);
}
.oc-empty i{ font-size: 36px; color: var(--text-soft); display: block; margin-bottom: 12px; }
.oc-empty h4{ margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--text); }
.oc-empty p{ margin: 0; font-size: 13px; }

/* Pagination — reuse the same look as portal pagination */
.oc-pagination{
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.oc-page-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all .15s var(--ease);
}
.oc-page-btn:hover:not(:disabled):not(.active){
  border-color: var(--brand-2);
  color: var(--brand-2);
  transform: translateY(-1px);
}
.oc-page-btn.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(3,6,65,.35);
  cursor: default;
}
.oc-page-btn:disabled{ opacity: .45; cursor: not-allowed; }
.oc-page-btn i{ font-size: 10px; }
.oc-page-ellipsis{
  display: inline-flex; align-items: center;
  padding: 0 4px;
  color: var(--text-soft);
  font-weight: 800;
}

/* ============================================================
   ONLINE COURSES — WHY & CTA sections
   ============================================================ */
.oc-why{
  padding: 70px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  position: relative;
}
.oc-why-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.oc-why-head h2{
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--text);
  margin: 0 0 10px;
}
.oc-why-head p{
  font-size: 15px;
  color: var(--text-mute);
  margin: 0;
}
.oc-why-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
}
@media (max-width:900px){ .oc-why-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .oc-why-grid{ grid-template-columns: 1fr; } }
.oc-why-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.oc-why-card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(3,6,65,.02), rgba(14,55,137,.04));
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: -1;
}
.oc-why-card:hover{
  transform: translateY(-6px);
  border-color: rgba(3,6,65,.20);
  box-shadow: 0 18px 40px rgba(3,6,65,.10);
}
.oc-why-card:hover::before{ opacity: 1; }
.oc-why-icon{
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 16px;
  font-size: 22px;
  box-shadow: 0 10px 22px rgba(3,6,65,.30);
  transition: transform .3s var(--ease);
}
.oc-why-card:hover .oc-why-icon{ transform: scale(1.08) rotate(-5deg); }
.oc-why-card h3{
  font-size: 16px; font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}
.oc-why-card p{
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.55;
  margin: 0;
}

/* CTA strip */
.oc-cta-strip{
  padding: 30px 0 80px;
  background: var(--bg-soft);
}
.oc-cta-card{
  position: relative;
  background:
    radial-gradient(620px 320px at 90% 10%, rgba(245,183,60,.16), transparent 60%),
    radial-gradient(520px 320px at 10% 90%, rgba(74,144,255,.14), transparent 60%),
    linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  border-radius: 24px;
  padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(3,6,65,.30);
}
.oc-cta-card::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: -1;
}
.oc-cta-text{ flex: 1; min-width: 0; }
.oc-cta-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245,183,60,.18);
  border: 1px solid rgba(245,183,60,.40);
  color: #f9c660;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 14px;
}
.oc-cta-card h2{
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 8px;
  color: #fff;
}
.oc-cta-card p{
  font-size: 14.5px;
  color: rgba(255,255,255,.78);
  margin: 0;
  line-height: 1.55;
}
.oc-cta-actions{
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.oc-cta-actions .btn{
  white-space: nowrap;
  min-width: 200px;
  justify-content: center;
}
@media (max-width: 820px){
  .oc-cta-card{
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }
  .oc-cta-actions{ width: 100%; }
  .oc-cta-actions .btn{ width: 100%; }
}

/* ============================================================
   COURSE DETAILS — single course page
   ============================================================ */
.cd-hero{
  position: relative;
  padding: 50px 0 90px;
  background:
    radial-gradient(640px 420px at 88% 18%, rgba(74,144,255,.18), transparent 60%),
    radial-gradient(620px 420px at 8% 90%, rgba(245,183,60,.12), transparent 60%),
    linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cd-hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: -1;
}
.cd-hero-wrap{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 1024px){ .cd-hero-wrap{ grid-template-columns: 1fr; } }

.cd-breadcrumb{
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.62);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cd-breadcrumb a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.cd-breadcrumb a:hover{ color: #6cf2bf; }
.cd-breadcrumb i{ font-size: 9px; opacity: .55; }
.cd-breadcrumb .current{ color: #f9c660; }

.cd-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245,183,60,.14);
  border: 1px solid rgba(245,183,60,.32);
  color: #f9c660;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 14px;
}
.cd-eyebrow i{ font-size: 10px; }

.cd-title{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.8px;
  margin: 0 0 14px;
  line-height: 1.12;
  color: #fff;
}
.cd-sub{
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 720px;
}

.cd-meta{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
}
.cd-meta i{ color: #f9c660; }
.cd-meta .rating{
  display: inline-flex; align-items: center; gap: 6px;
  color: #f5b73c; font-weight: 800;
}
.cd-meta .rating .stars i{ color: #f5b73c; font-size: 12px; }
.cd-meta .rating .reviews{
  color: rgba(255,255,255,.62);
  font-weight: 600;
  margin-left: 2px;
}
.cd-meta .pipe{
  width: 1px; height: 14px;
  background: rgba(255,255,255,.20);
}

.cd-author{
  display: flex; align-items: center; gap: 10px;
}
.cd-author .av{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  display: grid; place-items: center;
  color: #03301f;
  font-weight: 800;
  font-size: 12px;
}
.cd-author .nm{ color: #fff; font-weight: 700; }
.cd-author .role{ color: rgba(255,255,255,.6); font-size: 12px; font-weight: 600; }

/* Sticky enroll aside on the right */
.cd-aside{
  position: sticky; top: 90px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(3,6,65,.32);
  z-index: 2;
}
.cd-preview{
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  color: #fff;
  overflow: hidden;
}
.cd-preview::before{
  content:""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  opacity: .5;
}
.cd-preview .cd-cover-icon{
  font-size: 76px;
  opacity: .55;
  text-shadow: 0 4px 20px rgba(0,0,0,.40);
}
.cd-play{
  position: absolute;
  display: grid; place-items: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--brand-1);
  font-size: 22px;
  border: 0; cursor: pointer;
  box-shadow: 0 16px 38px rgba(0,0,0,.40);
  transition: transform .25s var(--ease);
}
.cd-play:hover{ transform: scale(1.08); }
.cd-play i{ margin-left: 4px; }
.cd-preview-label{
  position: absolute; left: 14px; bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.cd-aside-body{ padding: 22px 22px 24px; }

.cd-price-row{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 6px;
}
.cd-price{
  font-size: 32px; font-weight: 900;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
.cd-price-was{
  font-size: 16px; font-weight: 700;
  color: var(--text-soft);
  text-decoration: line-through;
}
.cd-discount{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239,71,96,.10);
  color: #c9173a;
  font-size: 11px; font-weight: 800;
  letter-spacing: .4px;
}
.cd-timer{
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(245,183,60,.10), rgba(245,183,60,.04));
  border: 1px solid rgba(245,183,60,.30);
  font-size: 12.5px; font-weight: 700;
  color: #8a5a00;
}
.cd-timer i{ color: #d4901c; }
.cd-timer b{
  background: #fff; padding: 2px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
  color: var(--brand-1);
  font-weight: 900;
  border: 1px solid rgba(245,183,60,.30);
}

.cd-enroll-btn,
.cd-cart-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14.5px; font-weight: 800;
  cursor: pointer;
  border: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration: none;
}
.cd-enroll-btn{
  background: linear-gradient(135deg, #f5b73c, #d4901c);
  color: #1a1303;
  box-shadow: 0 12px 26px rgba(245,183,60,.40);
  margin-bottom: 10px;
}
.cd-enroll-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(245,183,60,.55); color: #1a1303; }
.cd-cart-btn{
  background: #fff;
  color: var(--brand-1);
  border: 1.5px solid var(--brand-1);
}
.cd-cart-btn:hover{ background: var(--brand-1); color: #fff; }

.cd-includes{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cd-includes-title{
  font-size: 13px; font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.1px;
}
.cd-includes ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.cd-includes li{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
.cd-includes li i{
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(14,55,137,.08);
  color: var(--brand-2);
  border-radius: 6px;
  font-size: 11px;
  flex-shrink: 0;
}

.cd-share{
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cd-share-btn{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s var(--ease);
}
.cd-share-btn:hover{
  background: var(--brand-1);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* MAIN content body */
.cd-section{
  padding: 60px 0 70px;
  background: var(--bg);
}
.cd-body-grid{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1024px){ .cd-body-grid{ grid-template-columns: 1fr; } }

.cd-main{ min-width: 0; display: flex; flex-direction: column; gap: 32px; }

/* Tabs */
.cd-tabs{
  display: flex; gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
  position: sticky; top: 78px;
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
}
.cd-tabs::-webkit-scrollbar{ display: none; }
.cd-tab{
  flex: 1; min-width: max-content;
  padding: 11px 18px;
  background: transparent; border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  color: var(--text-mute);
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.cd-tab:hover{ color: var(--brand-2); background: var(--bg-soft); }
.cd-tab.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  box-shadow: 0 6px 14px rgba(3,6,65,.25);
}

/* Card panels */
.cd-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 6px 20px rgba(10,20,40,.04);
}
.cd-card-title{
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -.4px;
}
.cd-card-title i{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
}
.cd-card-sub{
  font-size: 14px;
  color: var(--text-mute);
  margin: 0 0 20px;
}

/* What you'll learn — grid of check items */
.cd-learn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
@media (max-width:640px){ .cd-learn-grid{ grid-template-columns: 1fr; } }
.cd-learn-item{
  display: flex; gap: 12px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}
.cd-learn-item i{
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(26,188,136,.12);
  color: #1abc88;
  border-radius: 7px;
  font-size: 11px;
  margin-top: 1px;
}

/* Curriculum — accordion */
.cd-curriculum-summary{
  display: flex; flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 18px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-mute);
}
.cd-curriculum-summary span i{ color: var(--brand-2); margin-right: 5px; font-size: 11px; }
.cd-curriculum-actions{
  display: flex; justify-content: flex-end;
  margin-bottom: 14px;
}
.cd-expand-all{
  background: transparent; border: 0;
  color: var(--brand-2);
  font-family: inherit;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .2s var(--ease);
}
.cd-expand-all:hover{ background: rgba(14,55,137,.06); }

.cd-module{
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s var(--ease);
}
.cd-module.open{
  border-color: rgba(14,55,137,.30);
  box-shadow: 0 4px 16px rgba(3,6,65,.06);
}
.cd-module-head{
  display: flex; align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: transparent; border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .2s var(--ease);
}
.cd-module-head:hover{ background: var(--bg-soft); }
.cd-module-num{
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cd-module-info{ flex: 1; min-width: 0; }
.cd-module-title{
  font-size: 14.5px; font-weight: 800;
  color: var(--text);
  margin: 0 0 3px;
  letter-spacing: -.1px;
}
.cd-module-meta{
  font-size: 12px; font-weight: 600;
  color: var(--text-mute);
  display: flex; gap: 10px;
}
.cd-module-meta i{ color: var(--brand-2); font-size: 10px; margin-right: 4px; }
.cd-module-chev{
  flex-shrink: 0;
  color: var(--text-mute);
  font-size: 12px;
  transition: transform .25s var(--ease);
}
.cd-module.open .cd-module-chev{ transform: rotate(180deg); color: var(--brand-2); }

.cd-lessons{
  list-style: none; padding: 0;
  margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease);
  border-top: 1px solid transparent;
}
.cd-module.open .cd-lessons{
  max-height: 1000px;
  border-top-color: var(--line);
}
.cd-lesson{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 64px;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.cd-lesson:last-child{ border-bottom: 0; }
.cd-lesson:hover{ background: var(--bg-soft); }
.cd-lesson-icon{
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--brand-2);
  border-radius: 6px;
  font-size: 10px;
  flex-shrink: 0;
}
.cd-lesson.preview .cd-lesson-icon{
  background: rgba(26,188,136,.12);
  color: #1abc88;
  border-color: rgba(26,188,136,.30);
}
.cd-lesson-title{ flex: 1; min-width: 0; }
.cd-lesson-meta{
  font-size: 11.5px; font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.cd-lesson-preview{
  font-size: 11px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  color: #1abc88;
  padding: 3px 8px;
  background: rgba(26,188,136,.10);
  border-radius: 6px;
  text-decoration: none;
}
.cd-lesson-preview:hover{ background: rgba(26,188,136,.18); color: #0d8a5f; }

/* Requirements + description */
.cd-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cd-list li{
  display: flex; gap: 12px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}
.cd-list li i{
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(14,55,137,.08);
  color: var(--brand-2);
  border-radius: 6px;
  font-size: 10px;
  margin-top: 1px;
}
.cd-prose{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.cd-prose p{ margin: 0 0 12px; }
.cd-prose p:last-child{ margin-bottom: 0; }
.cd-prose strong{ color: var(--text); font-weight: 800; }

/* Instructor card */
.cd-instructor-card{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width:640px){
  .cd-instructor-card{ grid-template-columns: 1fr; text-align: center; }
}
.cd-instructor-avatar{
  width: 120px; height: 120px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center;
  color: #fff;
  font-size: 36px; font-weight: 800;
  letter-spacing: -1px;
  box-shadow: 0 14px 30px rgba(3,6,65,.30);
}
@media (max-width:640px){ .cd-instructor-avatar{ margin: 0 auto; } }
.cd-instructor-info h3{
  margin: 0 0 4px;
  font-size: 18px; font-weight: 800;
  color: var(--text);
}
.cd-instructor-role{
  font-size: 13px; font-weight: 700;
  color: var(--brand-2);
  margin-bottom: 12px;
}
.cd-instructor-stats{
  display: flex; flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-mute);
}
.cd-instructor-stats i{ color: var(--brand-2); margin-right: 5px; font-size: 11px; }
.cd-instructor-bio{
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}

/* Reviews */
.cd-reviews-summary{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px;
  background: var(--bg-soft);
  border-radius: 14px;
  margin-bottom: 22px;
}
@media (max-width:640px){ .cd-reviews-summary{ grid-template-columns: 1fr; text-align: center; gap: 18px; } }
.cd-rating-big{
  text-align: center;
}
.cd-rating-big .big-num{
  font-size: 52px; font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--brand-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-rating-big .big-stars{ margin: 6px 0; color: #f5b73c; font-size: 16px; }
.cd-rating-big .big-stars i{ margin: 0 1px; }
.cd-rating-big .big-label{
  font-size: 12px; font-weight: 700;
  color: var(--text-mute);
}
.cd-rating-bars{
  display: flex; flex-direction: column; gap: 8px;
}
.cd-rating-bar{
  display: grid;
  grid-template-columns: 40px 1fr 50px;
  align-items: center;
  gap: 12px;
  font-size: 12px; font-weight: 700;
  color: var(--text-mute);
}
.cd-rating-bar-label{ display: inline-flex; align-items: center; gap: 4px; }
.cd-rating-bar-label i{ color: #f5b73c; font-size: 10px; }
.cd-rating-bar-track{
  position: relative;
  height: 8px;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cd-rating-bar-fill{
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border-radius: 999px;
  transition: width .6s var(--ease);
}
.cd-rating-bar-count{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cd-review-list{
  display: flex; flex-direction: column;
  gap: 18px;
}
.cd-review{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cd-review:last-child{ border-bottom: 0; }
.cd-review-head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.cd-review-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.cd-review-meta{ flex: 1; min-width: 0; }
.cd-review-name{
  font-size: 14px; font-weight: 800;
  color: var(--text);
}
.cd-review-date{
  font-size: 11.5px; font-weight: 600;
  color: var(--text-soft);
}
.cd-review-stars{
  color: #f5b73c; font-size: 13px;
  display: inline-flex; gap: 2px;
}
.cd-review-text{
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* FAQ */
.cd-faq-item{
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
.cd-faq-q{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: transparent; border: 0;
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .2s var(--ease);
}
.cd-faq-q:hover{ background: var(--bg-soft); }
.cd-faq-q i{ color: var(--brand-2); transition: transform .25s var(--ease); flex-shrink: 0; }
.cd-faq-item.open .cd-faq-q i{ transform: rotate(45deg); }
.cd-faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
}
.cd-faq-item.open .cd-faq-a{
  max-height: 320px;
}
.cd-faq-a-inner{
  padding: 0 18px 18px;
}

/* Related courses strip */
.cd-related{
  padding: 60px 0 80px;
  background: var(--bg-soft);
}
.cd-related-wrap{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
}
.cd-related-head{
  display: flex; align-items: end; justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.cd-related-head h2{
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 4px;
  color: var(--text);
}
.cd-related-head p{
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 0;
}
.cd-related-link{
  font-size: 13px; font-weight: 800;
  color: var(--brand-2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.cd-related-link:hover{ color: var(--brand-1); }
.cd-related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Mobile sticky CTA bar */
.cd-mobile-cta{
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 50;
  box-shadow: 0 -8px 22px rgba(3,6,65,.10);
  align-items: center; gap: 14px;
}
.cd-mobile-cta .price{
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.cd-mobile-cta .was{
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: line-through;
  font-weight: 700;
}
.cd-mobile-cta .btn{
  flex: 1;
  justify-content: center;
}
@media (max-width:1024px){
  .cd-mobile-cta{ display: flex; }
  .cd-aside{ position: static; }
  /* Add bottom padding to prevent overlap */
  .cd-related{ padding-bottom: 110px; }
}

/* Cover color helpers — reuse the same palette as oc-cover (referenced via .cd-preview.<color>) */
.cd-preview.navy{    background: linear-gradient(135deg, #030641, #0e3789); }
.cd-preview.blue{    background: linear-gradient(135deg, #0e3789, #2950bd); }
.cd-preview.teal{    background: linear-gradient(135deg, #0d8a5f, #1abc88); }
.cd-preview.gold{    background: linear-gradient(135deg, #d4901c, #f5b73c); }
.cd-preview.red{     background: linear-gradient(135deg, #c2185b, #ef4760); }
.cd-preview.purple{  background: linear-gradient(135deg, #5d2a64, #7e3e87); }
.cd-preview.slate{   background: linear-gradient(135deg, #2c3e50, #4a5d72); }
.cd-preview.emerald{ background: linear-gradient(135deg, #0d8a5f, #11998e); }
.cd-preview.sunset{  background: linear-gradient(135deg, #c2185b, #ff6a3d); }
.cd-preview.ocean{   background: linear-gradient(135deg, #00576b, #0078d4); }

/* ============================================================
   COURSE DETAILS — VIDEO PLAYER + EPISODES (inline preview)
   ============================================================ */
.cd-player-section{
  padding: 0 0 20px;
  background: var(--bg);
  margin-top: -50px; /* pull up over hero curve */
  position: relative;
  z-index: 3;
}
.cd-player-wrap{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
}
.cd-player-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(3,6,65,.14);
  overflow: hidden;
}
.cd-player-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.cd-player-head-left h2{
  margin: 0 0 4px;
  font-size: 18px; font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.cd-player-head-left h2 i{
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
}
.cd-player-head-left p{
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}
.cd-player-head-right{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(26,188,136,.10);
  color: #1abc88;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
}
.cd-player-head-right i{ font-size: 10px; }

.cd-player-grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 420px;
}
@media (max-width: 980px){
  .cd-player-grid{ grid-template-columns: 1fr; }
}

/* Left: the video player */
.cd-player{
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
@media (max-width: 980px){
  .cd-player{ aspect-ratio: 16 / 9; }
}
.cd-player video,
.cd-player iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.cd-player-poster{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  transition: opacity .3s var(--ease);
}
.cd-player-poster::before{
  content:""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  z-index: -1;
}
.cd-player-poster::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.30), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0,0,0,.40), transparent 60%);
  z-index: -1;
}
.cd-player.playing .cd-player-poster{
  opacity: 0;
  pointer-events: none;
}
.cd-player-poster-icon{
  font-size: 92px;
  color: rgba(255,255,255,.20);
  text-shadow: 0 6px 26px rgba(0,0,0,.50);
  position: absolute;
  top: 40px; right: 50px;
  transform: rotate(-8deg);
}
.cd-player-poster-info{
  text-align: center;
  color: #fff;
  z-index: 1;
  padding: 30px;
}
.cd-player-poster-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(245,183,60,.16);
  border: 1px solid rgba(245,183,60,.40);
  color: #f9c660;
  font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 14px;
}
.cd-player-poster h3{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: -.3px;
  color: #fff;
  line-height: 1.25;
}
.cd-player-poster p{
  margin: 0 0 20px;
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
}
.cd-player-big-play{
  display: grid; place-items: center;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--brand-1);
  font-size: 26px;
  border: 0; cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  margin: 0 auto;
}
.cd-player-big-play:hover{
  transform: scale(1.08);
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.cd-player-big-play i{ margin-left: 5px; }
.cd-player-duration{
  position: absolute;
  bottom: 14px; right: 14px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .4px;
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}

/* Right: episodes list */
.cd-episodes{
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  max-height: 100%;
}
@media (max-width: 980px){
  .cd-episodes{ border-left: 0; border-top: 1px solid var(--line); }
}
.cd-episodes-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
}
.cd-episodes-head-title{
  font-size: 13.5px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}
.cd-episodes-count{
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute);
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.cd-episodes-list{
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.cd-episodes-list::-webkit-scrollbar{ width: 6px; }
.cd-episodes-list::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 999px; }
@media (max-width: 980px){
  .cd-episodes-list{ max-height: 320px; }
}

.cd-episode{
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background .15s var(--ease);
  position: relative;
  background: transparent;
  border: 1px solid transparent;
}
.cd-episode:hover{ background: #fff; }
.cd-episode.active{
  background: #fff;
  border-color: rgba(14,55,137,.30);
  box-shadow: 0 8px 18px rgba(3,6,65,.08);
}
.cd-episode.locked{ cursor: not-allowed; opacity: .78; }
.cd-episode.locked:hover{ background: transparent; }

.cd-episode-thumb{
  flex-shrink: 0;
  width: 70px; height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}
.cd-episode-thumb::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,.30));
}
.cd-episode-thumb i{ position: relative; z-index: 1; opacity: .65; }
.cd-episode.active .cd-episode-thumb{
  background: linear-gradient(135deg, #1abc88, #0d8a5f);
}
.cd-episode.active .cd-episode-thumb i{ opacity: 1; animation: cdPulse 1.4s ease-in-out infinite; }
@keyframes cdPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.15); } }
.cd-episode.locked .cd-episode-thumb{
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}
.cd-episode.locked .cd-episode-thumb i{
  font-size: 14px; opacity: .85;
}

.cd-episode-info{
  flex: 1; min-width: 0;
}
.cd-episode-title{
  font-size: 13px; font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-episode-meta{
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--text-soft);
}
.cd-episode-meta .free{
  color: #1abc88;
  background: rgba(26,188,136,.10);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .3px; text-transform: uppercase;
}
.cd-episode-meta .lock{
  color: #6b7280;
  display: inline-flex; align-items: center; gap: 4px;
}
.cd-episode-now{
  flex-shrink: 0;
  display: none;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .6px; text-transform: uppercase;
  color: #1abc88;
  padding: 3px 8px;
  background: rgba(26,188,136,.10);
  border-radius: 5px;
}
.cd-episode.active .cd-episode-now{ display: inline-flex; }

.cd-episodes-foot{
  flex-shrink: 0;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: var(--text-mute);
}
.cd-episodes-foot i{ color: var(--brand-2); }
.cd-episodes-foot b{ color: var(--text); font-weight: 800; }
.cd-episodes-foot a{
  margin-left: auto;
  font-size: 12px; font-weight: 800;
  color: var(--brand-2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.cd-episodes-foot a:hover{ color: var(--brand-1); }

/* ============================================================
   COURSE DETAILS — HERO REDESIGN (single-column, immersive)
   Overrides the older 2-col hero so the empty area is gone.
   ============================================================ */
.cd-hero{
  padding: 60px 0 100px;
}
.cd-hero-wrap{
  display: block !important;
  grid-template-columns: none !important;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.cd-hero-wrap .cd-hero-left{
  max-width: 880px;
  margin: 0 auto;
}
.cd-hero .cd-breadcrumb{
  justify-content: center;
}
.cd-hero .cd-title{
  font-size: clamp(32px, 4.8vw, 50px);
  max-width: 860px;
  margin: 0 auto 16px;
  text-align: center;
  letter-spacing: -1px;
}
.cd-hero .cd-sub{
  margin: 0 auto 24px;
  max-width: 720px;
  text-align: center;
  font-size: 17px;
}
.cd-hero .cd-meta{
  justify-content: center;
  gap: 16px;
}
.cd-hero .cd-author{
  justify-content: center;
}

/* New: stat pills under the author row */
.cd-hero-pills{
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.cd-hero-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .2px;
  backdrop-filter: blur(8px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.cd-hero-pill:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.cd-hero-pill i{
  color: #6cf2bf;
  font-size: 11px;
}
.cd-hero-pill b{
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* New: stats tiles row — 4 numerical highlights */
.cd-hero-stats-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px){
  .cd-hero-stats-row{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.cd-hero-stat{
  padding: 16px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  text-align: center;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cd-hero-stat:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.10);
}
.cd-hero-stat .num{
  font-size: 22px; font-weight: 900;
  color: #fff;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cd-hero-stat .num .accent{
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-hero-stat .lab{
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* New: CTA row in the hero (compact) */
.cd-hero-cta-row{
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.cd-hero-cta-row .btn{
  min-width: 200px;
  justify-content: center;
}
.cd-hero-cta-row .btn-watch{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .2s var(--ease);
  backdrop-filter: blur(8px);
}
.cd-hero-cta-row .btn-watch:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(108,242,191,.50);
}
.cd-hero-cta-row .btn-watch i{ color: #6cf2bf; }

.cd-hero-price-line{
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13.5px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
.cd-hero-price-line .price{
  font-size: 26px; font-weight: 900;
  color: #fff;
  letter-spacing: -.4px;
  background: linear-gradient(135deg, #ffd98a, #f5b73c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.cd-hero-price-line .was{
  text-decoration: line-through;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}
.cd-hero-price-line .save{
  padding: 4px 11px;
  background: rgba(239,71,96,.18);
  border: 1px solid rgba(239,71,96,.40);
  color: #ffaab8;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .4px;
}
.cd-hero-price-line .timer{
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.7);
  font-size: 12.5px;
}
.cd-hero-price-line .timer i{ color: #f9c660; }
.cd-hero-price-line .timer b{
  background: rgba(255,255,255,.10);
  padding: 2px 7px;
  border-radius: 5px;
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255,255,255,.18);
}

/* HIDE the original hero aside — it moves to the content body */
.cd-hero .cd-aside{ display: none !important; }

/* Body sticky aside (re-anchored) — same look as before */
.cd-body-grid .cd-aside{
  position: sticky; top: 90px;
}

/* Ensure the body grid second column actually holds the aside */
.cd-body-grid > .cd-aside{
  display: block;
}

/* ============================================================
   PRIMES ACADEMY — LANDING PAGE
   ============================================================ */
.pa-wrap{
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- HERO ---------- */
.pa-hero{
  position: relative;
  padding: 80px 0 70px;
  background:
    radial-gradient(720px 460px at 85% 18%, rgba(74,144,255,.18), transparent 60%),
    radial-gradient(620px 420px at 8% 90%, rgba(245,183,60,.14), transparent 60%),
    linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.pa-hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: -1;
}
.pa-hero-inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.pa-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(245,183,60,.12);
  border: 1px solid rgba(245,183,60,.30);
  color: #f9c660;
  font-size: 12px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 18px;
}
.pa-hero h1{
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.06;
  margin: 0 0 18px;
}
.pa-hero h1 .grad{
  background: linear-gradient(135deg, #ffd98a, #f5b73c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-hero p{
  font-size: 17px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 720px;
}
.pa-search{
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
.pa-search input{
  width: 100%;
  height: 60px;
  padding: 0 170px 0 56px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  font-family: inherit;
  font-size: 16px;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .25s var(--ease);
}
.pa-search input::placeholder{ color: rgba(255,255,255,.55); }
.pa-search input:focus{
  outline: none;
  background: rgba(255,255,255,.16);
  border-color: rgba(108,242,191,.50);
  box-shadow: 0 0 0 4px rgba(108,242,191,.18);
}
.pa-search > i{
  position: absolute;
  left: 22px; top: 50%; transform: translateY(-50%);
  color: #6cf2bf; font-size: 18px;
  pointer-events: none;
}
.pa-search button{
  position: absolute;
  right: 8px; top: 8px;
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(135deg, #f5b73c, #d4901c);
  color: #1a1303;
  border: 0; border-radius: 10px;
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 8px 18px rgba(245,183,60,.35);
  transition: transform .2s var(--ease);
}
.pa-search button:hover{ transform: translateY(-1px); }

.pa-quick-tags{
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
}
.pa-quick-tags span{ color: rgba(255,255,255,.55); font-weight: 600; }
.pa-quick-tags a{
  padding: 5px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 700;
  transition: all .2s var(--ease);
}
.pa-quick-tags a:hover{
  background: rgba(108,242,191,.16);
  border-color: rgba(108,242,191,.30);
  color: #6cf2bf;
}

.pa-hero-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 42px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px){ .pa-hero-stats{ grid-template-columns: repeat(2, 1fr); } }
.pa-hero-stat{
  padding: 20px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.pa-hero-stat:hover{ transform: translateY(-3px); background: rgba(255,255,255,.10); }
.pa-hero-stat .num{
  font-size: 30px; font-weight: 900;
  color: #fff;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pa-hero-stat .num .accent{
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-hero-stat .lab{
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.65);
  margin-top: 6px;
  letter-spacing: .6px; text-transform: uppercase;
}

/* ---------- PROMO BENTO ---------- */
.pa-bento-section{
  padding: 70px 0 30px;
  background: var(--bg);
}
.pa-bento{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 280px;
  gap: 18px;
}
@media (max-width: 900px){
  .pa-bento{ grid-template-columns: 1fr; grid-template-rows: auto; }
}
.pa-promo{
  position: relative;
  border-radius: 22px;
  padding: 32px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  display: flex; flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
}
.pa-promo::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at top right, #000 30%, transparent 70%);
  z-index: -1;
}
.pa-promo:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(3,6,65,.28);
}
.pa-promo.p1{
  background: linear-gradient(135deg, #030641 0%, #0e3789 60%, #2950bd 100%);
}
.pa-promo.p2{
  background: linear-gradient(135deg, #5d2a64, #c2185b 100%);
}
.pa-promo.p3{
  background: linear-gradient(135deg, #0d8a5f, #1abc88 100%);
}
.pa-promo-icon{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  font-size: 22px;
  backdrop-filter: blur(8px);
}
.pa-promo-body h3{
  margin: 14px 0 8px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.pa-promo-body p{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}
.pa-promo-tag{
  position: absolute; top: 18px; right: 18px;
  padding: 5px 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.pa-promo-tag.hot{
  background: linear-gradient(135deg, rgba(245,183,60,.30), rgba(245,183,60,.18));
  border-color: rgba(245,183,60,.50);
  color: #ffd98a;
}
.pa-promo-cta{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
}
.pa-promo-cta i{ transition: transform .25s var(--ease); }
.pa-promo:hover .pa-promo-cta i{ transform: translateX(4px); }

/* ---------- SECTION HEADERS ---------- */
.pa-section{
  padding: 70px 0;
  background: var(--bg);
}
.pa-section.alt{ background: var(--bg-soft); }
.pa-section-head{
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.pa-section-head-left h2{
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.7px;
  color: var(--text);
}
.pa-section-head-left p{
  margin: 0;
  font-size: 15px;
  color: var(--text-mute);
}
.pa-section-link{
  font-size: 13.5px; font-weight: 800;
  color: var(--brand-2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all .2s var(--ease);
}
.pa-section.alt .pa-section-link{ background: #fff; }
.pa-section-link:hover{
  background: var(--brand-1);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.pa-section-link i{ font-size: 11px; transition: transform .25s var(--ease); }
.pa-section-link:hover i{ transform: translateX(3px); }

/* ---------- CATEGORY EXPLORER ---------- */
.pa-cat-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 900px){ .pa-cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pa-cat-grid{ grid-template-columns: 1fr; } }
.pa-cat-card{
  position: relative;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display: flex; align-items: center; gap: 16px;
  overflow: hidden;
  isolation: isolate;
}
.pa-cat-card::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, var(--accent-bg, rgba(14,55,137,.04)));
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: -1;
}
.pa-cat-card:hover{
  transform: translateY(-5px);
  border-color: rgba(3,6,65,.18);
  box-shadow: 0 16px 36px rgba(3,6,65,.10);
}
.pa-cat-card:hover::before{ opacity: 1; }
.pa-cat-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 22px;
  transition: transform .3s var(--ease);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.pa-cat-card:hover .pa-cat-icon{ transform: scale(1.10) rotate(-5deg); }
.pa-cat-card.c-forex     .pa-cat-icon{ background: linear-gradient(135deg, #030641, #0e3789); }
.pa-cat-card.c-crypto    .pa-cat-icon{ background: linear-gradient(135deg, #d4901c, #f5b73c); }
.pa-cat-card.c-stocks    .pa-cat-icon{ background: linear-gradient(135deg, #0d8a5f, #11998e); }
.pa-cat-card.c-technical .pa-cat-icon{ background: linear-gradient(135deg, #0e3789, #2950bd); }
.pa-cat-card.c-risk      .pa-cat-icon{ background: linear-gradient(135deg, #c2185b, #ef4760); }
.pa-cat-card.c-mindset   .pa-cat-icon{ background: linear-gradient(135deg, #c2185b, #ff6a3d); }
.pa-cat-card.c-algo      .pa-cat-icon{ background: linear-gradient(135deg, #2c3e50, #4a5d72); }
.pa-cat-card.c-commodity .pa-cat-icon{ background: linear-gradient(135deg, #00576b, #0078d4); }

.pa-cat-info{ flex: 1; min-width: 0; }
.pa-cat-title{
  font-size: 15.5px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  margin: 0 0 4px;
}
.pa-cat-count{
  font-size: 12.5px;
  color: var(--text-mute);
  font-weight: 700;
}
.pa-cat-count i{
  font-size: 10px;
  color: var(--brand-2);
  margin-right: 4px;
}
.pa-cat-arrow{
  flex-shrink: 0;
  color: var(--text-soft);
  font-size: 14px;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.pa-cat-card:hover .pa-cat-arrow{ color: var(--brand-2); transform: translateX(4px); }

/* ---------- PATHWAYS ---------- */
.pa-path-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 900px){ .pa-path-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pa-path-grid{ grid-template-columns: 1fr; } }
.pa-path-card{
  position: relative;
  padding: 28px 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display: flex; flex-direction: column;
}
.pa-path-card::after{
  content:""; position:absolute; left:0; top:0; right:0; height: 4px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.pa-path-card:hover{
  transform: translateY(-6px);
  border-color: rgba(3,6,65,.20);
  box-shadow: 0 20px 44px rgba(3,6,65,.12);
}
.pa-path-card:hover::after{ transform: scaleX(1); }
.pa-path-icon{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 14px;
  font-size: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px rgba(3,6,65,.25);
}
.pa-path-card h3{
  margin: 0 0 8px;
  font-size: 17px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.pa-path-card p{
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.55;
  flex: 1;
}
.pa-path-tags{
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.pa-path-tags span{
  font-size: 11px; font-weight: 700;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 999px;
}
.pa-path-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800;
  color: var(--brand-2);
  text-decoration: none;
  margin-top: auto;
}
.pa-path-link i{ transition: transform .25s var(--ease); font-size: 10px; }
.pa-path-card:hover .pa-path-link i{ transform: translateX(4px); }

/* ---------- INSTRUCTORS ---------- */
.pa-instr-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 900px){ .pa-instr-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .pa-instr-grid{ grid-template-columns: 1fr; } }
.pa-instr-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pa-instr-card:hover{
  transform: translateY(-5px);
  border-color: rgba(3,6,65,.20);
  box-shadow: 0 16px 36px rgba(3,6,65,.10);
}
.pa-instr-avatar{
  width: 84px; height: 84px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 28px; font-weight: 800;
  letter-spacing: -.5px;
  position: relative;
  box-shadow: 0 12px 26px rgba(3,6,65,.20);
}
.pa-instr-avatar::after{
  content:""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  z-index: -1;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.pa-instr-card:hover .pa-instr-avatar::after{ opacity: 1; }
.pa-instr-name{
  font-size: 15.5px; font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -.2px;
}
.pa-instr-role{
  font-size: 12.5px; font-weight: 700;
  color: var(--brand-2);
  margin-bottom: 14px;
}
.pa-instr-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pa-instr-stat{ font-size: 11.5px; font-weight: 700; color: var(--text-mute); }
.pa-instr-stat b{
  display: block;
  font-size: 14px; font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
.pa-instr-stat i{ font-size: 10px; color: var(--brand-2); margin-right: 3px; }

/* ---------- OUTCOMES STRIP ---------- */
.pa-outcomes{
  padding: 60px 0;
  background: linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pa-outcomes::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: -1;
}
.pa-outcomes-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 900px){ .pa-outcomes-grid{ grid-template-columns: 1fr; } }
.pa-outcomes-text h2{
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.7px;
  margin: 0 0 14px;
  line-height: 1.2;
}
.pa-outcomes-text h2 .grad{
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-outcomes-text p{
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 520px;
}
.pa-outcomes-numbers{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pa-outcome-num{
  padding: 22px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.pa-outcome-num .big{
  font-size: 36px; font-weight: 900;
  color: #fff;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pa-outcome-num .big .accent{
  background: linear-gradient(135deg, #6cf2bf, #1abc88);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-outcome-num .desc{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- TESTIMONIALS ---------- */
.pa-test-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 900px){ .pa-test-grid{ grid-template-columns: 1fr; } }
.pa-test-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.pa-test-card:hover{
  transform: translateY(-4px);
  border-color: rgba(3,6,65,.20);
  box-shadow: 0 16px 36px rgba(3,6,65,.10);
}
.pa-test-quote-mark{
  position: absolute;
  top: 18px; right: 22px;
  font-size: 38px;
  color: rgba(14,55,137,.10);
  font-weight: 900;
  line-height: 1;
}
.pa-test-stars{
  color: #f5b73c;
  font-size: 13px;
}
.pa-test-stars i{ margin-right: 2px; }
.pa-test-text{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.pa-test-head{
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pa-test-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.pa-test-meta{ flex: 1; min-width: 0; }
.pa-test-name{
  font-size: 14px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}
.pa-test-role{
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 600;
}
.pa-test-badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: rgba(26,188,136,.10);
  color: #0d8a5f;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px;
}
.pa-test-badge i{ font-size: 9px; }

/* ---------- FAQ ---------- */
.pa-faq-wrap{
  max-width: 820px;
  margin: 0 auto;
}
.pa-faq-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pa-faq-item.open{
  border-color: rgba(14,55,137,.30);
  box-shadow: 0 8px 22px rgba(3,6,65,.06);
}
.pa-faq-q{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 22px;
  background: transparent; border: 0;
  font-family: inherit;
  font-size: 14.5px; font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  letter-spacing: -.1px;
  transition: background .2s var(--ease);
}
.pa-faq-q:hover{ background: var(--bg-soft); }
.pa-faq-q i{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.pa-faq-item.open .pa-faq-q i{ transform: rotate(45deg); }
.pa-faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.7;
}
.pa-faq-item.open .pa-faq-a{ max-height: 320px; }
.pa-faq-a-inner{ padding: 0 22px 20px; }

/* ---------- FINAL CTA ---------- */
.pa-final-cta{
  padding: 80px 0 100px;
  background: var(--bg);
}
.pa-cta-card{
  position: relative;
  padding: 60px 50px;
  border-radius: 28px;
  background:
    radial-gradient(640px 360px at 90% 10%, rgba(245,183,60,.18), transparent 60%),
    radial-gradient(540px 360px at 10% 90%, rgba(108,242,191,.16), transparent 60%),
    linear-gradient(135deg, #030641 0%, #0e3789 60%, #030641 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(3,6,65,.30);
}
.pa-cta-card::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: -1;
}
.pa-cta-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245,183,60,.16);
  border: 1px solid rgba(245,183,60,.32);
  color: #f9c660;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 18px;
}
.pa-cta-card h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -.8px;
  margin: 0 0 14px;
  line-height: 1.1;
}
.pa-cta-card h2 .grad{
  background: linear-gradient(135deg, #ffd98a, #f5b73c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-cta-card p{
  font-size: 16px;
  color: rgba(255,255,255,.78);
  margin: 0 auto 28px;
  max-width: 600px;
  line-height: 1.6;
}
.pa-cta-actions{
  display: inline-flex; gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.pa-cta-actions .btn{ min-width: 200px; justify-content: center; }
.pa-cta-actions .btn-glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s var(--ease);
}
.pa-cta-actions .btn-glass:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(108,242,191,.50);
  transform: translateY(-1px);
}
.pa-cta-actions .btn-glass i{ color: #6cf2bf; }

/* ============================================================
   PRIMES ACADEMY — LEARNING FORMATS SHOWCASE
   ============================================================ */
.pa-fmt-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 1024px){ .pa-fmt-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .pa-fmt-grid{ grid-template-columns: 1fr; } }

.pa-fmt-card{
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px 24px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--text);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pa-fmt-card::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transition: height .25s var(--ease);
}
.pa-fmt-card:hover{
  transform: translateY(-6px);
  border-color: rgba(3,6,65,.18);
  box-shadow: 0 20px 44px rgba(3,6,65,.12);
}
.pa-fmt-card:hover::before{ height: 8px; }

.pa-fmt-card.online::before     { background: linear-gradient(90deg, #030641, #2950bd); }
.pa-fmt-card.attendance::before { background: linear-gradient(90deg, #d4901c, #f5b73c); }
.pa-fmt-card.zoom::before       { background: linear-gradient(90deg, #0d8a5f, #1abc88); }
.pa-fmt-card.tutorials::before  { background: linear-gradient(90deg, #c2185b, #ef4760); }

.pa-fmt-icon{
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 24px;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px rgba(3,6,65,.18);
  transition: transform .35s var(--ease);
}
.pa-fmt-card:hover .pa-fmt-icon{ transform: scale(1.10) rotate(-5deg); }
.pa-fmt-card.online    .pa-fmt-icon{ background: linear-gradient(135deg, #030641, #2950bd); box-shadow: 0 10px 22px rgba(14,55,137,.30); }
.pa-fmt-card.attendance .pa-fmt-icon{ background: linear-gradient(135deg, #d4901c, #f5b73c); box-shadow: 0 10px 22px rgba(245,183,60,.30); }
.pa-fmt-card.zoom       .pa-fmt-icon{ background: linear-gradient(135deg, #0d8a5f, #1abc88); box-shadow: 0 10px 22px rgba(26,188,136,.30); }
.pa-fmt-card.tutorials  .pa-fmt-icon{ background: linear-gradient(135deg, #c2185b, #ef4760); box-shadow: 0 10px 22px rgba(239,71,96,.30); }

.pa-fmt-card h3{
  margin: 0 0 8px;
  font-size: 18px; font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}
.pa-fmt-card p{
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.55;
  flex: 1;
}
.pa-fmt-stats{
  display: flex; gap: 14px;
  margin-bottom: 16px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-2);
  flex-wrap: wrap;
}
.pa-fmt-stats span{
  display: inline-flex; align-items: center; gap: 5px;
}
.pa-fmt-stats i{ color: var(--brand-2); font-size: 10px; }

.pa-fmt-cta{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800;
  color: var(--brand-2);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.pa-fmt-cta i{ transition: transform .25s var(--ease); font-size: 10px; }
.pa-fmt-card:hover .pa-fmt-cta i{ transform: translateX(4px); }

.pa-fmt-card.online    .pa-fmt-cta{ color: #0e3789; }
.pa-fmt-card.attendance .pa-fmt-cta{ color: #c0820e; }
.pa-fmt-card.zoom       .pa-fmt-cta{ color: #0d8a5f; }
.pa-fmt-card.tutorials  .pa-fmt-cta{ color: #c2185b; }

/* Soon badge for unreleased pages */
.pa-fmt-badge{
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  background: rgba(245,183,60,.12);
  border: 1px solid rgba(245,183,60,.35);
  color: #8a5a00;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
}

/* ============================================================
   PRIMES ACADEMY — LATEST RELEASES (tabbed)
   ============================================================ */
.pa-latest-tabs{
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.pa-latest-tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  color: var(--text-2);
  cursor: pointer;
  transition: all .25s var(--ease);
  letter-spacing: -.1px;
}
.pa-latest-tab i{ font-size: 12px; color: var(--brand-2); }
.pa-section.alt .pa-latest-tab{ background: #fff; }
.pa-latest-tab:hover{
  border-color: rgba(3,6,65,.30);
  color: var(--brand-1);
  transform: translateY(-1px);
}
.pa-latest-tab.active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(3,6,65,.30);
}
.pa-latest-tab.active i{ color: #6cf2bf; }
.pa-latest-tab .count{
  font-size: 10.5px; font-weight: 800;
  padding: 2px 7px;
  background: var(--bg-soft);
  border-radius: 999px;
  color: var(--text-mute);
  margin-left: 2px;
}
.pa-latest-tab.active .count{
  background: rgba(255,255,255,.18);
  color: #fff;
}

.pa-latest-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 1024px){ .pa-latest-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){  .pa-latest-grid{ grid-template-columns: 1fr; } }

/* Unified card style for all latest formats */
.pa-latest-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--text);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  isolation: isolate;
}
.pa-latest-card:hover{
  transform: translateY(-5px);
  border-color: rgba(3,6,65,.18);
  box-shadow: 0 18px 38px rgba(3,6,65,.12);
}

.pa-latest-cover{
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  color: #fff;
  font-size: 38px;
  overflow: hidden;
}
.pa-latest-cover::before{
  content:""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  opacity: .5;
}
.pa-latest-cover i{ position: relative; z-index: 1; opacity: .8; transition: transform .35s var(--ease); }
.pa-latest-card:hover .pa-latest-cover i{ transform: scale(1.10) rotate(-4deg); }

/* Format badge in top-left */
.pa-latest-fmt-badge{
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px;
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.pa-latest-cover.online    { background: linear-gradient(135deg, #030641, #0e3789); }
.pa-latest-cover.attendance{ background: linear-gradient(135deg, #d4901c, #f5b73c); }
.pa-latest-cover.zoom      { background: linear-gradient(135deg, #0d8a5f, #1abc88); }
.pa-latest-cover.tutorials { background: linear-gradient(135deg, #c2185b, #ef4760); }
.pa-latest-cover.navy      { background: linear-gradient(135deg, #030641, #0e3789); }
.pa-latest-cover.blue      { background: linear-gradient(135deg, #0e3789, #2950bd); }
.pa-latest-cover.gold      { background: linear-gradient(135deg, #d4901c, #f5b73c); }
.pa-latest-cover.teal      { background: linear-gradient(135deg, #0d8a5f, #1abc88); }
.pa-latest-cover.purple    { background: linear-gradient(135deg, #5d2a64, #7e3e87); }
.pa-latest-cover.red       { background: linear-gradient(135deg, #c2185b, #ef4760); }
.pa-latest-cover.slate     { background: linear-gradient(135deg, #2c3e50, #4a5d72); }
.pa-latest-cover.emerald   { background: linear-gradient(135deg, #0d8a5f, #11998e); }
.pa-latest-cover.sunset    { background: linear-gradient(135deg, #c2185b, #ff6a3d); }
.pa-latest-cover.ocean     { background: linear-gradient(135deg, #00576b, #0078d4); }

/* Play overlay for video formats (online + tutorials) */
.pa-latest-cover .play-dot{
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--brand-1);
  display: grid; place-items: center;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
  z-index: 2;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.pa-latest-card:hover .pa-latest-cover .play-dot{
  opacity: 1; transform: scale(1);
}
.pa-latest-cover .play-dot i{ margin-left: 3px; opacity: 1; transform: none; }

.pa-latest-duration{
  position: absolute; bottom: 10px; right: 10px;
  padding: 3px 9px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px; font-weight: 800;
  border-radius: 5px;
  backdrop-filter: blur(8px);
  z-index: 2;
  font-variant-numeric: tabular-nums;
}

.pa-latest-body{
  padding: 16px 16px 14px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pa-latest-title{
  font-size: 14.5px; font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -.2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.pa-latest-instructor{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-mute);
}
.pa-latest-instructor i{ font-size: 10px; color: var(--brand-2); }

.pa-latest-meta{
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-mute);
  flex-wrap: wrap;
  margin-top: 2px;
}
.pa-latest-meta i{ font-size: 10px; color: var(--brand-2); margin-right: 3px; }
.pa-latest-meta .dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

.pa-latest-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  gap: 10px;
}
.pa-latest-price{
  font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
.pa-latest-price.free{
  background: linear-gradient(135deg, #1abc88, #0d8a5f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-latest-action{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pa-latest-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(3,6,65,.30);
  color: #fff;
}
.pa-latest-action i{ font-size: 10px; }

/* Date pill for Zoom & Personal Attendance */
.pa-latest-date{
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,.95);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.pa-latest-date .day{
  display: block;
  font-size: 18px; font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand-1);
}
.pa-latest-date .mon{
  display: block;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 2px;
}

/* Seats remaining chip for attendance */
.pa-latest-seats{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgba(239,71,96,.10);
  color: #c9173a;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px;
}
.pa-latest-seats.green{ background: rgba(26,188,136,.10); color: #0d8a5f; }
.pa-latest-seats i{ font-size: 9px; }

/* Live badge for upcoming sessions */
.pa-latest-live{
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgba(239,71,96,.20);
  border: 1px solid rgba(239,71,96,.50);
  color: #fff;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.pa-latest-live .pulse{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5868;
  box-shadow: 0 0 0 0 rgba(255,88,104,.6);
  animation: paPulse 1.8s infinite;
}
@keyframes paPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,88,104,.7); }
  70%{ box-shadow: 0 0 0 10px rgba(255,88,104,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,88,104,0); }
}

/* =========================================================
   ============= RESPONSIVE OVERFLOW GUARD =================
   Global safety nets so no page can pan horizontally on
   mobile. Anything wider than the viewport is either
   contained or pushed into its own scroll context.
   ========================================================= */

/* 1. Kill page-level horizontal scroll everywhere */
html, body{
  overflow-x: hidden;
  max-width: 100%;
}

/* 2. Force media + iframes + svgs + canvases to never exceed their box */
img, video, iframe, svg, canvas, picture{
  max-width: 100%;
  height: auto;
}
/* Allow svgs/icons that have fixed dimensions (icon buttons) to keep them */
.fa-solid, .fa-regular, .fa-brands, [class*="fa-"]::before{ height: auto !important; }

/* 3. Long unbroken strings (URLs, code, ticker labels) must break */
.compliance,
.warning-block,
.f-links a,
.faq-a-inner,
.section-sub,
p, li, a, span, h1, h2, h3, h4, h5, h6, label{
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 4. (Removed — was overriding the canonical .container/.nav/.statusbar-inner
       max-width: var(--maxw) and making the site feel edge-to-edge.
       The original max-width values already prevent overflow because the
       html/body cap above (#1) is the real safety net.) */

/* 5. Hero / section wrappers must clip decorative floats that use negative offsets */
.hero,
.section,
.contact-hero, .mr-hero, .ar-hero,
.form-section, .mr-form-section, .ar-form-section,
.qc-section, .mt-section, .at-section,
.faq-section, .proc-section,
.cta-strip,
.bonus-band, .bonus-section,
.steps-section, .platforms-section,
.testimonials-section,
.ach-hero, .ach-section,
.pa-hero, .pa-section,
.det-hero, .det-section,
.ch-icons-bg{
  overflow-x: clip;          /* modern browsers */
  overflow-x: hidden;        /* fallback */
}

/* 6. Tables that don't already have a scroll wrapper — give the table a guard */
table{ max-width: 100%; }

/* 7. Form controls fill their column, never exceed it */
input, select, textarea, button{
  max-width: 100%;
}
input, select, textarea{
  width: 100%;
}
/* But preserve auto-width for utility buttons / icon buttons / chips */
.btn, .btn-gold, .btn-cancel, .btn-submit,
.btn-ghost-dark, .btn-secondary,
.icon-btn, .lang-btn,
.cs-trigger, .cs-option,
.gal-chip, .gal-pager-btn, .pc-pager-btn,
.float-btn, .nav-link, .m-link,
.dropdown-item,
button.burger, button.drawer-close{
  width: auto;
}

/* 8. Flex/grid children can shrink past their content size when needed */
.field, .form-card .field, .ar-form-card .field, .mr-form-card .field,
.pc-acc-grid > *, .pc-table-card, .gal-grid > .gal-tile{
  min-width: 0;
}

/* 9. Mobile breakpoint — fine-tune common offenders */
@media (max-width: 760px){
  /* Status bar items wrap cleanly */
  .statusbar-inner{ gap: 8px; }
  .market-ticker{ display: none; }

  /* Reduce side padding on .container so content has breathing room */
  .container{ padding-left: 16px; padding-right: 16px; }

  /* Hero floats never appear at this width — they used to leak via -4% offsets */
  .hero-float, .ar-float-badge, .mr-badge-card,
  .ar-chart-card[style*="position:absolute"]{ display: none !important; }

  /* Footer + compliance side padding tighter */
  .footer-main, .compliance, .sub-footer{ padding-left: 16px !important; padding-right: 16px !important; }

  /* Any decorative grid pattern using fixed background-size shouldn't overflow */
  .ch-icons-bg, .pa-hero-bg, .ar-illu, .mr-illu{ max-width: 100%; }

  /* Chips rows and tab strips — let them scroll inside, not the page */
  .prod-tabs, .cat-row, .mw-tabs, .ss-tabs, .gal-chips,
  .duration-row, .del-row, .style-grid, .slot-grid,
  .inst-chips, .pkg-tabs{
    flex-wrap: wrap;
  }

  /* Homepage product tabs — scroll horizontally on mobile instead of wrapping
     (id overrides the shared .prod-tabs wrap rule above). */
  #prodTabs{ flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #prodTabs::-webkit-scrollbar{ display: none; }
  #prodTabs .prod-tab{ flex: 0 0 auto; }
}

/* 10. Very small phones — extra trims */
@media (max-width: 480px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .nav{ padding-left: 14px; padding-right: 14px; }
  .statusbar-inner{ padding-left: 12px; padding-right: 12px; }

  /* Any element using percentage padding-top for aspect ratio still fits */
  .ar-illu, .mr-illu, .map-card iframe{ max-width: 100%; }

  /* WhatsApp/Telegram floats slightly smaller and closer */
  .float-actions{ right: 12px; bottom: 12px; gap: 8px; }
  html[dir="rtl"] .float-actions{ right: auto; left: 12px; }
}

/* 11. Print — don't carry the overflow-clip into print stylesheets */
@media print{
  html, body{ overflow-x: visible; }
}

/* =========================================================
   ============= PRIMES ACADEMY — EDUCATION HUB ============
   "Your learning toolkit" feature showcase — four cards
   for Weekly Analysis · Short Tutorials · Personal
   Attendance · Zoom Attendance.
   ========================================================= */
.pa-edu-hub{
  position: relative;
  background:
    radial-gradient(900px 540px at 0% -10%, rgba(245,183,60,.12), transparent 60%),
    radial-gradient(900px 540px at 100% 110%, rgba(14,55,137,.10), transparent 55%),
    linear-gradient(180deg, #fafbfd 0%, #f1f4fa 100%);
  padding: 84px 0;
  overflow-x: clip;
  overflow-x: hidden;
}
@media (max-width: 720px){
  .pa-edu-hub{ padding: 56px 0; }
}
.pa-edu-hub::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(3,6,65,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,6,65,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
  pointer-events: none;
}
.pa-edu-hub-inner{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section head */
.pa-edu-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(245,183,60,.18), rgba(245,183,60,.08));
  border: 1px solid rgba(245,183,60,.30);
  color: #b87a16;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pa-edu-eyebrow i{ color: #d4901c; font-size: 11px; }
.pa-edu-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.pa-edu-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  margin: 0;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text);
}
.pa-edu-title .grad{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa-edu-sub{
  margin: 14px auto 0;
  max-width: 620px;
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.65;
}

/* Grid */
.pa-edu-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px){ .pa-edu-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .pa-edu-grid{ grid-template-columns: 1fr; } }

/* Card */
.pa-edu-card{
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 24px 22px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pa-edu-card::before{
  content:"";
  position: absolute; inset: 0;
  background: var(--accent-soft, transparent);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.pa-edu-card > *{ position: relative; z-index: 1; }
.pa-edu-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(3,6,65,.16);
  border-color: rgba(3,6,65,.18);
}
.pa-edu-card:hover::before{ opacity: 1; }

/* Decorative number/icon top-right */
.pa-edu-corner{
  position: absolute;
  top: 18px; right: 18px;
  z-index: 1;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

/* Big icon */
.pa-edu-icon{
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 26px;
  margin-bottom: 20px;
  box-shadow: 0 14px 28px rgba(3,6,65,.18);
  transition: transform .35s var(--ease);
}
.pa-edu-card:hover .pa-edu-icon{ transform: scale(1.08) rotate(-6deg); }

/* Title + body */
.pa-edu-card h3{
  margin: 0 0 8px;
  font-size: 19px; font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}
.pa-edu-card p{
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
  flex: 1;
}

/* Feature pills */
.pa-edu-pills{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pa-edu-pill{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800;
  padding: 4px 9px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  letter-spacing: .3px;
}
.pa-edu-pill i{ font-size: 9px; color: var(--accent, var(--brand-2)); }

/* CTA */
.pa-edu-cta{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
  font-size: 13px; font-weight: 800;
  color: var(--accent, var(--brand-2));
}
.pa-edu-cta i{ font-size: 10px; transition: transform .25s var(--ease); }
.pa-edu-card:hover .pa-edu-cta i{ transform: translateX(4px); }

/* === Per-card color variants === */
/* Weekly Analysis — Indigo/purple */
.pa-edu-card.weekly{ --accent: #6a4eb8; --accent-soft: linear-gradient(180deg, rgba(106,78,184,.06), rgba(106,78,184,0) 80%); }
.pa-edu-card.weekly .pa-edu-icon{
  background: linear-gradient(135deg, #5b3fa8, #8a6ce0);
  box-shadow: 0 14px 28px rgba(106,78,184,.30);
}
.pa-edu-card.weekly .pa-edu-pill i{ color: #6a4eb8; }

/* Short Tutorials — Coral/pink */
.pa-edu-card.tutorials{ --accent: #c2185b; --accent-soft: linear-gradient(180deg, rgba(194,24,91,.05), rgba(194,24,91,0) 80%); }
.pa-edu-card.tutorials .pa-edu-icon{
  background: linear-gradient(135deg, #c2185b, #ef4760);
  box-shadow: 0 14px 28px rgba(239,71,96,.30);
}
.pa-edu-card.tutorials .pa-edu-pill i{ color: #c2185b; }

/* Personal Attendance — Gold */
.pa-edu-card.personal{ --accent: #b87a16; --accent-soft: linear-gradient(180deg, rgba(245,183,60,.10), rgba(245,183,60,0) 80%); }
.pa-edu-card.personal .pa-edu-icon{
  background: linear-gradient(135deg, #d4901c, #f5b73c);
  box-shadow: 0 14px 28px rgba(245,183,60,.32);
}
.pa-edu-card.personal .pa-edu-pill i{ color: #b87a16; }

/* Zoom Attendance — Green/teal */
.pa-edu-card.zoom{ --accent: #0d8a5f; --accent-soft: linear-gradient(180deg, rgba(26,188,136,.07), rgba(26,188,136,0) 80%); }
.pa-edu-card.zoom .pa-edu-icon{
  background: linear-gradient(135deg, #0d8a5f, #1abc88);
  box-shadow: 0 14px 28px rgba(26,188,136,.30);
}
.pa-edu-card.zoom .pa-edu-pill i{ color: #0d8a5f; }

/* "Live now" pulsing dot for the Weekly Analysis card */
.pa-edu-live{
  position: absolute;
  top: 18px; left: 18px;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(26,188,136,.12);
  border: 1px solid rgba(26,188,136,.30);
  border-radius: 999px;
  color: #0d8a5f;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.pa-edu-live::before{
  content:"";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1abc88;
  box-shadow: 0 0 0 0 rgba(26,188,136,.55);
  animation: paEduLivePulse 1.8s ease-out infinite;
}
@keyframes paEduLivePulse{
  0%   { box-shadow: 0 0 0 0 rgba(26,188,136,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(26,188,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,188,136,0); }
}

/* Footer mini-CTA strip */
.pa-edu-foot{
  text-align: center;
  margin-top: 40px;
  font-size: 13.5px;
  color: var(--text-mute);
}
.pa-edu-foot a{
  font-weight: 800;
  color: var(--brand-2);
  text-decoration: none;
  border-bottom: 2px dotted rgba(14,55,137,.30);
}
.pa-edu-foot a:hover{ border-bottom-style: solid; }


/* =========================================================
   CHECKOUT PAGE
   ========================================================= */

/* ---- HERO BANNER ---- */
.ck-hero{
  position: relative;
  isolation: isolate;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(3,6,65,.78) 0%, rgba(14,55,137,.62) 55%, rgba(3,6,65,.85) 100%),
    url("https://images.unsplash.com/photo-1604594849809-dfedbc827105?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat;
  background-color: #060a2a;
  overflow: hidden;
}
.ck-hero::before{
  /* subtle floating glow */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 200px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(500px 240px at 80% 70%, rgba(14,55,137,.35), transparent 65%);
  z-index:-1;
  pointer-events:none;
}
.ck-hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
}
.ck-hero-inner{
  position: relative;
  z-index: 1;
  padding: 56px 24px;
  max-width: 960px;
}
.ck-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform: uppercase;
  color:#fff;
  margin-bottom:18px;
}
.ck-eyebrow i{ color:#ffd86b; }
.ck-title{
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.1;
  text-shadow: 0 4px 22px rgba(0,0,0,.35);
}
.ck-total{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 14px 26px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  font-weight:700;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
.ck-total-label{
  font-size: 15px;
  opacity: .85;
  letter-spacing: .3px;
}
.ck-total-amount{
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffe0a0, #ffba48);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .3px;
}

/* ---- PANEL SHELL ---- */
.ck-shell{
  background: #f4f6fb;
  padding: 56px 20px 80px;
}
.ck-card{
  max-width: 920px;
  margin: -90px auto 0;
  position: relative;
  background:#fff;
  border-radius: 22px;
  box-shadow:
    0 30px 60px -20px rgba(3,6,65,.25),
    0 12px 25px -10px rgba(3,6,65,.15),
    0 0 0 1px rgba(3,6,65,.04);
  padding: 36px 36px 32px;
}

/* ---- SHARED SECTION HEAD ---- */
.ck-section + .ck-section{ margin-top: 18px; }
.ck-section-head{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.ck-section-ic{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(14,55,137,.30);
  flex-shrink: 0;
}
.ck-section-ic-2{
  background: linear-gradient(135deg, #b48518, #f1c34a);
  box-shadow: 0 8px 18px rgba(180,133,24,.35);
}
.ck-section-title{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.2px;
}
.ck-section-sub{
  margin: 0;
  color: var(--text-mute);
  font-size: 13.5px;
}

/* ---- COUPON FORM ---- */
.ck-coupon-row{
  display: flex;
  align-items: stretch;     /* input + button stretch to same height */
  gap: 12px;
  width: 100%;
}
.ck-coupon-row .ck-field-wrap{
  flex: 1 1 auto;
  min-width: 0;
}
.ck-coupon-row .ck-btn{
  flex: 0 0 auto;
  height: 52px;             /* match input height exactly */
}
.ck-field{ min-width: 0; }
.ck-label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-1);
  margin: 0 0 8px;
  letter-spacing: .2px;
}
.ck-req{ color: #d33; font-weight: 900; }
.ck-field-wrap{
  position: relative;
  display: flex;
  align-items: center;
}
.ck-field-ic{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-2);
  font-size: 15px;
  pointer-events: none;
  opacity: .8;
}
.ck-field-wrap input[type="text"]{
  width: 100%;
  height: 52px;
  padding: 0 44px 0 44px;
  border-radius: 12px;
  border: 1.5px solid #e2e5ee;
  background: #f9fafd;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-1);
  font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
}
.ck-field-wrap input[type="text"]::placeholder{
  color: #a8aebd;
  font-weight: 500;
}
.ck-field-wrap input[type="text"]:focus{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}
.ck-clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: #eef0f6;
  color: #6b7388;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.ck-clear:hover{ background:#e0e4ee; color:#1a2245; }
.ck-help{
  display:block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-mute);
  min-height: 18px;
}
.ck-help.ok{ color:#0d9c5b; font-weight:600; }
.ck-help.err{ color:#d23b3b; font-weight:600; }

/* ---- BUTTONS ---- */
.ck-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  height: 52px;
  padding: 0 26px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .25px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.ck-btn i{ font-size: 14px; }
.ck-btn-primary{
  background: linear-gradient(135deg, #0e3789 0%, #030641 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(3,6,65,.30);
}
.ck-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(3,6,65,.40);
}
.ck-btn-primary:disabled{
  background: #c1c6d4;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity:.85;
}
.ck-btn-ghost{
  background: #fff;
  color: var(--brand-1);
  border-color: #d8dce8;
}
.ck-btn-ghost:hover{
  background: #f6f8fd;
  border-color: var(--brand-2);
  color: var(--brand-2);
}
.ck-btn-pay{
  background: linear-gradient(135deg, #0e3789 0%, #030641 60%, #060a2a 100%);
  color: #fff;
  height: 56px;
  padding: 0 38px;
  font-size: 15.5px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(3,6,65,.35);
  position: relative;
  overflow: hidden;
}
.ck-btn-pay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.20) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.ck-btn-pay:hover::before{ transform: translateX(100%); }
.ck-btn-pay:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(3,6,65,.45);
}
.ck-btn-pay:disabled{
  background: #c1c6d4;
  color:#fff;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  opacity:.85;
}
.ck-btn-pay:disabled::before{ display:none; }

/* ---- DIVIDER ---- */
.ck-divider{
  margin: 30px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,55,137,.18), transparent);
}

/* ---- PAYMENT METHOD CARDS ---- */
.ck-methods{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.ck-method{
  position: relative;
  display: block;
  cursor: pointer;
}
.ck-method input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ck-method-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 22px;
  border-radius: 14px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  height: 100%;
}
.ck-method-card:hover{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-1px);
}
.ck-method input[type="radio"]:checked + .ck-method-card{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 10px 24px rgba(14,55,137,.16);
}
.ck-method-text{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ck-method-name{
  font-weight: 800;
  font-size: 15px;
  color: var(--brand-1);
}
.ck-method-desc{
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.4;
}
.ck-radio-dot{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #cdd3e3;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  transition: background .2s, border-color .2s;
}
.ck-radio-dot i{ opacity: 0; transition: opacity .15s; }
.ck-method input[type="radio"]:checked + .ck-method-card .ck-radio-dot{
  background: var(--brand-2);
  border-color: var(--brand-2);
}
.ck-method input[type="radio"]:checked + .ck-method-card .ck-radio-dot i{ opacity: 1; }
.ck-method input[type="radio"]:focus-visible + .ck-method-card{
  outline: 3px solid rgba(14,55,137,.30);
  outline-offset: 2px;
}

/* ---- METHOD LOGOS (CSS only) ---- */
.ck-method-logo{
  flex-shrink: 0;
  width: 64px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e3e7f1;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 13px;
  overflow: hidden;
}
/* KNET style logo */
.ck-logo-knet{
  background: linear-gradient(135deg, #013c8c 0%, #014a9c 50%, #00a651 50%, #00b94d 100%);
  color: #fff;
  border-color: transparent;
  font-size: 12.5px;
  letter-spacing: 0;
  gap: 0;
  padding: 0;
}
.ck-knet-k{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 50%;
  height: 100%;
  font-size: 18px;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ck-knet-net{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 50%;
  height: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Visa + Mastercard mini logos */
.ck-logo-cards{
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}
.ck-card-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  height: 22px;
}
.ck-visa{
  background: #1a1f71;
  color: #fff;
  padding: 0 6px;
  font-size: 10.5px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .5px;
}
.ck-master{
  position: relative;
  width: 26px;
  background: transparent;
  border: none;
}
.mc-dot{
  display:inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.mc-red{
  background:#eb001b;
  margin-right: -6px;
}
.mc-yel{
  background:#f79e1b;
  mix-blend-mode: multiply;
}

/* ---- AGREEMENT CHECKBOX ---- */
.ck-agree{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  cursor: pointer;
  font-size: 14px;
  color: var(--brand-1);
  user-select: none;
  padding: 14px 16px;
  background: #f7f9ff;
  border-radius: 12px;
  border: 1.5px solid #e8ecf6;
  transition: border-color .2s, background .2s;
}
.ck-agree:hover{ border-color: #cfd6ec; }
.ck-agree input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ck-agree-box{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #cdd3e3;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  margin-top: 1px;
  transition: background .2s, border-color .2s;
}
.ck-agree-box i{ opacity: 0; transition: opacity .15s; }
.ck-agree input[type="checkbox"]:checked + .ck-agree-box{
  background: var(--brand-2);
  border-color: var(--brand-2);
}
.ck-agree input[type="checkbox"]:checked + .ck-agree-box i{ opacity: 1; }
.ck-agree-text{ flex: 1 1 auto; font-weight: 600; }
.ck-agree-text a{
  color: var(--brand-2);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ck-agree-text a:hover{ color: var(--brand-1); }

/* ---- ACTIONS ---- */
.ck-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ck-secure{
  margin: 22px 0 0;
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ck-secure i{ color: #0d9c5b; }

/* ---- MODAL ---- */
.ck-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ck-modal[hidden]{ display: none; }
.ck-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(3,6,65,.55);
  backdrop-filter: blur(4px);
  animation: ckFadeIn .25s ease;
}
.ck-modal-panel{
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(3,6,65,.45);
  padding: 28px 28px 22px;
  animation: ckPopIn .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ckFadeIn{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes ckPopIn{
  from{ opacity:0; transform: translateY(20px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.ck-modal-x{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f3f5fa;
  color: var(--brand-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, color .15s, transform .15s;
}
.ck-modal-x:hover{
  background: var(--brand-1);
  color: #fff;
  transform: rotate(90deg);
}
.ck-modal-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef0f6;
  margin-bottom: 18px;
}
.ck-modal-ic{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 6px 14px rgba(14,55,137,.30);
}
.ck-modal-head h3{
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--brand-1);
}
.ck-modal-body{
  font-size: 14px;
  color: #2a3144;
  line-height: 1.6;
}
.ck-modal-body p{ margin: 0 0 14px; }
.ck-modal-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck-modal-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #3a4258;
}
.ck-modal-list i{
  color: var(--brand-2);
  font-size: 14px;
  margin-top: 3px;
}
.ck-modal-agree{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f7f9ff;
  border-radius: 10px;
  border: 1.5px solid #e8ecf6;
  cursor: pointer;
  user-select: none;
}
.ck-modal-agree input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ck-modal-foot{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid #eef0f6;
}
.ck-modal-foot .ck-btn{ height: 46px; padding: 0 22px; }
.ck-modal-deny{
  background: #f3f5fa !important;
  border-color: #e2e6f0 !important;
  color: #5a6378 !important;
}
.ck-modal-deny:hover{
  background: #e8ecf6 !important;
  color: var(--brand-1) !important;
}

/* ---- TOAST ---- */
.ck-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--brand-1);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(3,6,65,.40);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9000;
}
.ck-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ck-toast i{ color: #2ed47a; }
.ck-toast.err{ background:#b02525; }
.ck-toast.err i{ color: #ffd0d0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 760px){
  .ck-hero{ min-height: 240px; }
  .ck-hero-inner{ padding: 44px 18px; }
  .ck-card{
    margin: -70px 14px 0;
    padding: 26px 20px 22px;
    border-radius: 18px;
  }
  .ck-shell{ padding: 50px 0 60px; }
  .ck-section-head{ gap: 12px; margin-bottom: 18px; }
  .ck-section-ic{ width: 42px; height: 42px; font-size: 16px; }
  .ck-section-title{ font-size: 17px; }
  .ck-section-sub{ font-size: 12.5px; }
  .ck-coupon-row{
    flex-direction: column;
    gap: 10px;
  }
  .ck-coupon-row .ck-btn{ width: 100%; }
  .ck-methods{ grid-template-columns: 1fr; }
  .ck-actions{ flex-direction: column-reverse; align-items: stretch; }
  .ck-actions .ck-btn{ width: 100%; }
  .ck-modal-panel{ padding: 22px 18px 18px; }
}

/* RTL adjustments (when dir="rtl") */
[dir="rtl"] .ck-field-ic{ left: auto; right: 16px; }
[dir="rtl"] .ck-field-wrap input[type="text"]{ padding: 0 44px 0 44px; text-align: right; }
[dir="rtl"] .ck-clear{ right: auto; left: 10px; }
[dir="rtl"] .ck-modal-x{ right: auto; left: 14px; }
[dir="rtl"] .ck-modal-x:hover{ transform: rotate(-90deg); }
[dir="rtl"] .ck-actions{ justify-content: flex-start; }
[dir="rtl"] .ck-modal-foot{ justify-content: flex-start; }


/* =========================================================
   COURSE SURVEY PAGE
   ========================================================= */

/* ---- HERO ---- */
.sv-hero{
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #060a2a 0%, #0e3789 55%, #6b3eff 100%);
  overflow: hidden;
}
.sv-hero-bg{
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.sv-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  animation: svFloat 12s ease-in-out infinite;
}
.sv-orb-1{
  width: 360px; height: 360px;
  background: radial-gradient(circle, #6b3eff 0%, transparent 70%);
  top: -100px; left: -120px;
}
.sv-orb-2{
  width: 420px; height: 420px;
  background: radial-gradient(circle, #2ed47a 0%, transparent 70%);
  bottom: -180px; right: -120px;
  animation-delay: -4s;
}
.sv-orb-3{
  width: 300px; height: 300px;
  background: radial-gradient(circle, #ffba48 0%, transparent 70%);
  top: 30%; right: 25%;
  animation-delay: -8s;
}
@keyframes svFloat{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(40px, -30px); }
}
.sv-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.sv-hero-inner{
  position: relative;
  z-index: 1;
  padding: 64px 24px 56px;
  max-width: 880px;
}
.sv-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.sv-eyebrow i{ color: #ffd86b; }
.sv-title{
  margin: 0 0 14px;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 8px 30px rgba(0,0,0,.30);
}
.sv-title-grad{
  background: linear-gradient(135deg, #ffe4a0 0%, #ffba48 50%, #ff7e5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sv-sub{
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 620px;
}
.sv-meta-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.sv-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
}
.sv-pill i{ color: #ffd86b; }

/* ---- PROGRESS BAR (sticky) ---- */
.sv-progress-wrap{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(3,6,65,.08);
  box-shadow: 0 6px 18px rgba(3,6,65,.06);
}
.sv-progress-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 24px;
}
.sv-progress-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-1);
}
.sv-progress-label i{ color: #ffba48; margin-right: 4px; }
.sv-progress-count{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mute);
}
.sv-progress-count span{ color: var(--brand-2); font-weight: 800; }
.sv-progress-track{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e8ebf4;
  overflow: hidden;
}
.sv-progress-fill{
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e3789 0%, #6b3eff 50%, #ff7e5f 100%);
  transition: width .45s cubic-bezier(.2,.9,.3,1.1);
  box-shadow: 0 0 12px rgba(107,62,255,.45);
}

/* ---- SHELL ---- */
.sv-shell{
  background: linear-gradient(180deg, #f6f7fc 0%, #eef1f9 100%);
  padding: 48px 20px 80px;
}
.sv-form{
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- CARD ---- */
.sv-card{
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 26px;
  box-shadow:
    0 18px 40px -22px rgba(3,6,65,.25),
    0 8px 18px -12px rgba(3,6,65,.10),
    0 0 0 1px rgba(3,6,65,.04);
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.sv-card::before{
  /* gradient accent bar on the left */
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0e3789, #6b3eff);
  opacity: .15;
  transition: opacity .25s, width .25s;
}
.sv-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px -22px rgba(3,6,65,.30),
    0 10px 22px -12px rgba(3,6,65,.14),
    0 0 0 1px rgba(3,6,65,.06);
}
.sv-card.answered::before{
  opacity: 1;
  width: 6px;
  background: linear-gradient(180deg, #2ed47a, #0e3789);
}
.sv-card.invalid{
  animation: svShake .35s ease;
  box-shadow:
    0 0 0 3px rgba(210,59,59,.18),
    0 18px 40px -22px rgba(210,59,59,.30);
}
.sv-card.invalid::before{
  background: linear-gradient(180deg, #ff4d4d, #b02525);
  opacity: 1;
  width: 6px;
}
@keyframes svShake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

.sv-q-head{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.sv-q-head > div{ flex: 1 1 auto; min-width: 0; }
.sv-q-num{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 8px 18px rgba(14,55,137,.30);
}
.sv-q-num-pen{
  background: linear-gradient(135deg, #b48518, #f1c34a);
  font-size: 17px;
}
.sv-q-title{
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.2px;
  line-height: 1.35;
}
.sv-q-sub{
  margin: 0;
  color: var(--text-mute);
  font-size: 13px;
}
.sv-q-tag{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: #f1f3fa;
  color: #515a72;
  white-space: nowrap;
}
.sv-q-tag i{ font-size: 11px; }
.sv-tag-rating  { background: #fff4e0; color: #a86a08; }
.sv-tag-tf      { background: #e7f5ff; color: #0c5fa8; }
.sv-tag-choice  { background: #ede9ff; color: #5326c9; }
.sv-tag-multi   { background: #e6fbf1; color: #0d8949; }
.sv-tag-emoji   { background: #ffe7e2; color: #b6422e; }
.sv-tag-text    { background: #f5e6ff; color: #6a1b9a; }

/* ---- STAR RATING ---- */
.sv-stars{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sv-star{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 2px solid #e7eaf3;
  background: #fff;
  color: #d6dae6;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, color .15s, border-color .15s, background .15s, box-shadow .2s;
}
.sv-star:hover{
  transform: translateY(-2px) scale(1.05);
  color: #ffba48;
  border-color: #ffd17a;
}
.sv-star.on{
  color: #ffba48;
  background: linear-gradient(135deg, #fff8e8, #fff);
  border-color: #ffba48;
  box-shadow: 0 8px 18px rgba(255,186,72,.25);
}
.sv-star.peek{ color: #ffba48; border-color: #ffd17a; }
.sv-star-text{
  margin-left: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-1);
  min-width: 80px;
}

/* ---- TRUE/FALSE ---- */
.sv-tf{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sv-tf-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sv-tf-opt{ display: block; cursor: pointer; }
.sv-tf-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  transition: all .2s;
}
.sv-tf-card:hover{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-1px);
}
.sv-tf-ic{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.sv-tf-ic.ok{ background: linear-gradient(135deg, #34d399, #059669); }
.sv-tf-ic.ko{ background: linear-gradient(135deg, #f87171, #b91c1c); }
.sv-tf-ttl{
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: var(--brand-1);
}
.sv-tf-desc{
  display: block;
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 2px;
}
.sv-tf-opt input[type="radio"]:checked + .sv-tf-card{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 10px 24px rgba(14,55,137,.16);
}
.sv-tf-opt input[type="radio"]:checked + .sv-tf-card .sv-tf-ttl{ color: var(--brand-2); }
.sv-tf-opt input[type="radio"]:focus-visible + .sv-tf-card{
  outline: 3px solid rgba(14,55,137,.30);
  outline-offset: 2px;
}

/* ---- CHOICE CARDS (single) ---- */
.sv-choice{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sv-choice.cols-3{ grid-template-columns: repeat(3, 1fr); }
.sv-choice-opt{ display: block; cursor: pointer; }
.sv-choice-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sv-choice-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  transition: all .2s;
  height: 100%;
}
.sv-choice-card:hover{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-1px);
}
.sv-choice-ic{
  width: 38px; height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 15px;
  flex-shrink: 0;
  transition: all .2s;
}
.sv-choice-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-choice-ttl{
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.1px;
}
.sv-choice-desc{
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.4;
}
.sv-choice-dot{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #cdd3e3;
  background: #fff;
  position: relative;
  transition: all .2s;
}
.sv-choice-dot::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--brand-2);
  transform: scale(0);
  transition: transform .15s;
}
.sv-choice-opt input[type="radio"]:checked + .sv-choice-card{
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #fff, #f8faff);
  box-shadow: 0 12px 26px rgba(14,55,137,.16);
}
.sv-choice-opt input[type="radio"]:checked + .sv-choice-card .sv-choice-ic{
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
}
.sv-choice-opt input[type="radio"]:checked + .sv-choice-card .sv-choice-dot{
  border-color: var(--brand-2);
  background: #fff;
}
.sv-choice-opt input[type="radio"]:checked + .sv-choice-card .sv-choice-dot::after{
  transform: scale(1);
}

/* ---- SEGMENT (difficulty) ---- */
.sv-segment{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sv-seg-opt{ display: block; cursor: pointer; }
.sv-seg-opt input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sv-seg-opt > span{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  font-weight: 800;
  font-size: 13.5px;
  color: #3a4258;
  transition: all .2s;
  text-align: center;
}
.sv-seg-opt > span i{ color: var(--brand-2); font-size: 15px; }
.sv-seg-opt:hover > span{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-1px);
}
.sv-seg-opt input[type="radio"]:checked + span{
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  box-shadow: 0 12px 26px rgba(14,55,137,.25);
}
.sv-seg-opt input[type="radio"]:checked + span i{ color: #ffd86b; }

/* ---- MULTI-SELECT ---- */
.sv-multi{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sv-multi-opt{ display: block; cursor: pointer; }
.sv-multi-opt input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sv-multi-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 13px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brand-1);
  transition: all .2s;
}
.sv-multi-card:hover{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-1px);
}
.sv-multi-box{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 2px solid #cdd3e3;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  transition: all .2s;
}
.sv-multi-box i{ opacity: 0; transition: opacity .15s; }
.sv-multi-ic{
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 14px;
  flex-shrink: 0;
  transition: all .2s;
}
.sv-multi-opt input[type="checkbox"]:checked + .sv-multi-card{
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #fff, #f5f8ff);
  box-shadow: 0 10px 22px rgba(14,55,137,.14);
}
.sv-multi-opt input[type="checkbox"]:checked + .sv-multi-card .sv-multi-box{
  background: var(--brand-2);
  border-color: var(--brand-2);
}
.sv-multi-opt input[type="checkbox"]:checked + .sv-multi-card .sv-multi-box i{ opacity: 1; }
.sv-multi-opt input[type="checkbox"]:checked + .sv-multi-card .sv-multi-ic{
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
}

/* ---- EMOJI PICKER ---- */
.sv-emoji{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sv-emoji-btn{
  border: 2px solid #e3e7f1;
  background: #fafbff;
  border-radius: 16px;
  padding: 16px 8px 12px;
  font-size: 36px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all .2s;
  font-family: inherit;
}
.sv-emoji-btn span{
  font-size: 12px;
  font-weight: 800;
  color: #5a6378;
  letter-spacing: .3px;
}
.sv-emoji-btn:hover{
  border-color: #c0caeb;
  background: #fff;
  transform: translateY(-3px) scale(1.04);
}
.sv-emoji-btn.on{
  border-color: var(--brand-2);
  background: linear-gradient(135deg, #fff, #f5f8ff);
  box-shadow: 0 14px 30px rgba(14,55,137,.20);
  transform: translateY(-3px);
}
.sv-emoji-btn.on span{ color: var(--brand-2); }

/* ---- TEXTAREA / COMMENTS ---- */
.sv-card-comments{
  background:
    radial-gradient(circle at top right, rgba(107,62,255,.06), transparent 50%),
    radial-gradient(circle at bottom left, rgba(14,55,137,.06), transparent 50%),
    #fff;
}
.sv-textarea-wrap{
  position: relative;
}
#svDetails{
  width: 100%;
  border-radius: 14px;
  border: 2px solid #e3e7f1;
  background: #fafbff;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--brand-1);
  line-height: 1.6;
  resize: vertical;
  min-height: 140px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
}
#svDetails::placeholder{ color: #a8aebd; }
#svDetails:focus{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}
.sv-textarea-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
}
.sv-textarea-hint i{ color: #ffba48; margin-right: 4px; }
.sv-textarea-count{
  font-weight: 800;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
}

/* ---- BUTTONS ---- */
.sv-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  height: 56px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all .2s;
}
.sv-btn-primary{
  background: linear-gradient(135deg, #0e3789 0%, #030641 60%, #1a2c8f 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(3,6,65,.32);
  position: relative;
  overflow: hidden;
}
.sv-btn-primary::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .7s;
}
.sv-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(3,6,65,.42);
}
.sv-btn-primary:hover::before{ transform: translateX(100%); }
.sv-btn-ghost{
  background: #fff;
  color: var(--brand-1);
  border-color: #d8dce8;
}
.sv-btn-ghost:hover{
  background: #f6f8fd;
  border-color: var(--brand-2);
  color: var(--brand-2);
}

/* ---- ACTIONS BAR ---- */
.sv-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.sv-foot-note{
  text-align: center;
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 6px;
}
.sv-foot-note i{ color: #0d9c5b; margin-right: 4px; }

/* ---- SUCCESS MODAL ---- */
.sv-success{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sv-success[hidden]{ display: none; }
.sv-success-backdrop{
  position: absolute; inset: 0;
  background: rgba(3,6,65,.65);
  backdrop-filter: blur(6px);
  animation: ckFadeIn .25s ease;
}
.sv-success-panel{
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 22px;
  padding: 44px 36px 32px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(3,6,65,.45);
  animation: ckPopIn .35s cubic-bezier(.2,.9,.3,1.25);
  overflow: hidden;
}
.sv-success-ic{
  width: 80px; height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ed47a, #059669);
  color: #fff;
  font-size: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(46,212,122,.40);
  animation: svPop .5s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes svPop{
  0%{ transform: scale(0); opacity: 0; }
  60%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(1); }
}
.sv-success-panel h3{
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  color: var(--brand-1);
}
.sv-success-panel p{
  margin: 0 0 24px;
  font-size: 14.5px;
  color: #5a6378;
  line-height: 1.6;
}
.sv-success-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.sv-success-actions .sv-btn{ height: 48px; padding: 0 22px; font-size: 14px; }

/* confetti pieces */
.sv-confetti{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sv-confetti span{
  position: absolute;
  top: -10px;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: svConfetti 2.2s ease-out forwards;
}
.sv-confetti span:nth-child(1){ left:  8%; background:#ff7e5f; animation-delay:.0s; }
.sv-confetti span:nth-child(2){ left: 18%; background:#ffba48; animation-delay:.1s; }
.sv-confetti span:nth-child(3){ left: 28%; background:#2ed47a; animation-delay:.2s; }
.sv-confetti span:nth-child(4){ left: 38%; background:#6b3eff; animation-delay:.05s; }
.sv-confetti span:nth-child(5){ left: 48%; background:#0e3789; animation-delay:.15s; }
.sv-confetti span:nth-child(6){ left: 58%; background:#ff4d8d; animation-delay:.25s; }
.sv-confetti span:nth-child(7){ left: 68%; background:#48c5ff; animation-delay:.0s; }
.sv-confetti span:nth-child(8){ left: 78%; background:#ffd86b; animation-delay:.1s; }
.sv-confetti span:nth-child(9){ left: 88%; background:#34d399; animation-delay:.2s; }
.sv-confetti span:nth-child(10){ left: 14%; background:#6b3eff; animation-delay:.3s; }
.sv-confetti span:nth-child(11){ left: 32%; background:#ff7e5f; animation-delay:.35s; }
.sv-confetti span:nth-child(12){ left: 52%; background:#ffba48; animation-delay:.4s; }
.sv-confetti span:nth-child(13){ left: 72%; background:#0e3789; animation-delay:.3s; }
.sv-confetti span:nth-child(14){ left: 92%; background:#2ed47a; animation-delay:.45s; }
.sv-confetti span:nth-child(15){ left:  2%; background:#ff4d8d; animation-delay:.5s; }
@keyframes svConfetti{
  0%{ transform: translateY(-20px) rotate(0); opacity: 1; }
  100%{ transform: translateY(420px) rotate(720deg); opacity: 0; }
}

/* ---- TOAST ---- */
.sv-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #b02525;
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(176,37,37,.40);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9000;
}
.sv-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sv-toast i{ color: #ffd0d0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 760px){
  .sv-hero{ min-height: 260px; }
  .sv-hero-inner{ padding: 44px 18px 36px; }
  .sv-shell{ padding: 32px 14px 70px; }
  .sv-card{ padding: 22px 18px; border-radius: 18px; }
  .sv-q-head{ gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
  .sv-q-num{ width: 42px; height: 42px; font-size: 14px; }
  .sv-q-title{ font-size: 16px; }
  .sv-q-tag{ display: none; }
  .sv-stars{ gap: 6px; }
  .sv-star{ width: 44px; height: 44px; font-size: 18px; border-radius: 11px; }
  .sv-star-text{ width: 100%; margin: 6px 0 0; }
  .sv-tf{ grid-template-columns: 1fr; }
  .sv-choice, .sv-choice.cols-3{ grid-template-columns: 1fr; }
  .sv-segment{ grid-template-columns: 1fr 1fr; }
  .sv-multi{ grid-template-columns: 1fr 1fr; }
  .sv-emoji{ grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .sv-emoji-btn{ font-size: 26px; padding: 10px 4px 8px; }
  .sv-emoji-btn span{ font-size: 10px; }
  .sv-actions{ flex-direction: column-reverse; align-items: stretch; }
  .sv-btn{ width: 100%; }
  .sv-progress-inner{ padding: 12px 16px; }
}

@media (max-width: 420px){
  .sv-emoji-btn{ font-size: 22px; }
  .sv-emoji-btn span{ font-size: 9.5px; }
}


/* =========================================================
   ATTENDANCE COURSES PAGE
   ========================================================= */

/* ---- HERO ---- */
.att-hero{
  position: relative;
  display: block;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(560px 360px at 18% 30%, rgba(107,62,255,.45), transparent 60%),
    radial-gradient(620px 420px at 82% 70%, rgba(46,212,122,.30), transparent 60%),
    linear-gradient(135deg, #060a2a 0%, #0e3789 55%, #1a2c8f 100%);
  overflow: hidden;
  z-index: 1;
}
.att-hero *{ box-sizing: border-box; }
/* Decorative dotted-grid overlay applied via ::before, doesn't affect flow */
.att-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
/* Legacy bg/orb wrappers from old version — hide if still present */
.att-hero-bg, .att-orb, .att-grid-bg{ display: none !important; }
.att-hero-inner{
  position: relative;
  padding: 64px 24px 56px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.att-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform: uppercase;
  margin-bottom:18px;
}
.att-eyebrow i{ color: #ffd86b; }
.att-title{
  margin: 0 0 14px;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
  text-shadow: 0 8px 30px rgba(0,0,0,.30);
}
.att-title-grad{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
}
.att-sub{
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 640px;
}
.att-hero-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.att-stat{
  padding: 18px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: transform .2s, background .2s;
}
.att-stat:hover{ background: rgba(255,255,255,.14); transform: translateY(-3px); }
.att-stat-num{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 4px;
}
.att-stat-lbl{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ---- TOOLBAR ---- */
.att-toolbar{
  background: #fff;
  border-bottom: 1px solid rgba(3,6,65,.08);
  box-shadow: 0 8px 22px rgba(3,6,65,.06);
  position: relative;
  z-index: 20;
}
.att-toolbar-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 24px 20px;
  display: grid;
  gap: 14px;
}
.att-search{
  position: relative;
}
.att-search > i{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-2);
  font-size: 16px;
  pointer-events:none;
}
.att-search input{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid #e2e6f0;
  background: #f9fafd;
  padding: 0 18px 0 50px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-1);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.att-search input::placeholder{ color: #a8aebd; font-weight: 500; }
.att-search input:focus{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

.att-filter-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  row-gap: 12px;
}
.att-chip-group{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  background: #f3f5fc;
  border-radius: 14px;
  border: 1px solid #e7eaf3;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.att-chip-group::-webkit-scrollbar{ display: none; }
.att-chip{
  border: none;
  background: transparent;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #5a6378;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
  white-space: nowrap;
}
.att-chip i{ font-size: 12px; }
.att-chip:hover{ color: var(--brand-1); background: rgba(14,55,137,.06); }
.att-chip.is-active{
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  box-shadow: 0 6px 14px rgba(3,6,65,.25);
}
.att-chip.is-active i{ color: #ffd86b; }

.att-sort{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f5fc;
  border: 1px solid #e7eaf3;
  border-radius: 12px;
  padding: 4px 10px 4px 14px;
}
.att-sort label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-1);
  white-space: nowrap;
}
.att-sort label i{ color: var(--brand-2); margin-right: 2px; }
.att-sort select{
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-1);
  cursor: pointer;
  height: 40px;
  padding-right: 22px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e3789' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.att-result-meta{
  font-size: 13px;
  color: var(--text-mute);
  font-weight: 700;
}
.att-result-meta span{ color: var(--brand-2); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- SHELL + GRID ---- */
.att-shell{
  background: linear-gradient(180deg, #f6f7fc 0%, #eef1f9 100%);
  padding: 36px 20px 60px;
}
.att-grid{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---- COURSE CARD ---- */
.att-card{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 18px 40px -22px rgba(3,6,65,.22),
    0 6px 16px -10px rgba(3,6,65,.08),
    0 0 0 1px rgba(3,6,65,.04);
  transition: transform .25s, box-shadow .25s;
  position: relative;
  opacity: 0;
  animation: attFadeUp .45s forwards;
}
@keyframes attFadeUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
.att-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 26px 56px -24px rgba(3,6,65,.32),
    0 10px 22px -10px rgba(3,6,65,.14),
    0 0 0 1px rgba(3,6,65,.06);
}

/* card banner with gradient */
.att-card-banner{
  position: relative;
  height: 130px;
  padding: 14px 16px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.att-card-banner::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,.10), transparent 55%);
  pointer-events: none;
}
.att-card-banner > *{ position: relative; z-index: 1; }
.att-card-banner .att-format-badge{
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
}
.att-card-banner .att-card-ic{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
/* banner color variants */
.att-banner-blue   { background: linear-gradient(135deg, #0e3789, #1a4ccf); }
.att-banner-purple { background: linear-gradient(135deg, #4d2d8e, #8b4dff); }
.att-banner-coral  { background: linear-gradient(135deg, #b6422e, #ff7e5f); }
.att-banner-gold   { background: linear-gradient(135deg, #a86a08, #f1b942); }
.att-banner-green  { background: linear-gradient(135deg, #115a3b, #2ed47a); }
.att-banner-teal   { background: linear-gradient(135deg, #0f5d6b, #14b8a6); }
.att-banner-pink   { background: linear-gradient(135deg, #8a1e6b, #ff4d8d); }
.att-banner-slate  { background: linear-gradient(135deg, #1f2937, #475569); }

.att-format-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px);
}
.att-format-badge i{ font-size: 10px; }
.att-format-badge.is-zoom{ background: rgba(0, 175, 240, .92); border-color: rgba(255,255,255,.50); }
.att-format-badge.is-inperson{ background: rgba(255, 186, 72, .95); color: #3a2400; border-color: rgba(255,255,255,.50); }

/* card body */
.att-card-body{
  padding: 18px 18px 16px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.att-card-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.att-tag{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1fb;
  color: #3a4258;
}
.att-tag.is-level-beginner    { background: #e6fbf1; color: #0d8949; }
.att-tag.is-level-intermediate{ background: #fff4e0; color: #a86a08; }
.att-tag.is-level-advanced    { background: #ffe7e2; color: #b6422e; }
.att-tag.is-language          { background: #ede9ff; color: #5326c9; }

.att-card-title{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-1);
  line-height: 1.35;
  letter-spacing: -.2px;
  /* clamp to 2 lines so all cards align */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(17px * 1.35 * 2);
}
.att-instructor{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  background: #f6f8fd;
  border-radius: 12px;
  border: 1px solid #eef1fa;
}
.att-avatar{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #6b3eff);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .3px;
  box-shadow: 0 4px 10px rgba(14,55,137,.30);
}
.att-instructor-meta{ display: flex; flex-direction: column; min-width: 0; }
.att-instructor-name{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-1);
  line-height: 1.2;
}
.att-instructor-role{
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .2px;
}

.att-card-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
}
.att-info{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #3a4258;
  font-weight: 600;
  min-width: 0;
}
.att-info i{
  color: var(--brand-2);
  font-size: 12px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(14,55,137,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.att-info > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* seats progress */
.att-seats{
  margin-top: auto;
  padding-top: 4px;
}
.att-seats-meta{
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-mute);
  margin-bottom: 6px;
  letter-spacing: .3px;
}
.att-seats-meta strong{ color: var(--brand-1); font-weight: 800; }
.att-seats-track{
  height: 6px;
  border-radius: 999px;
  background: #eef1fa;
  overflow: hidden;
}
.att-seats-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ed47a, #0d8949);
  transition: width .5s;
}
.att-seats-fill.is-low { background: linear-gradient(90deg, #ffba48, #f59e0b); }
.att-seats-fill.is-crit{ background: linear-gradient(90deg, #ff7e5f, #b91c1c); }

/* rating + price footer */
.att-card-foot{
  border-top: 1px solid #eef0f6;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #fafbff, #f4f6fd);
  margin-top: 0;
  min-height: 72px;
}
.att-rating{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--brand-1);
  font-size: 13.5px;
}
.att-rating i{ color: #ffba48; font-size: 13px; }
.att-rating-count{ color: var(--text-mute); font-size: 12px; font-weight: 600; margin-left: 4px; }
.att-price{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.att-price-amount{
  font-size: 20px;
  font-weight: 900;
  color: var(--brand-1);
  line-height: 1;
  letter-spacing: -.3px;
}
.att-price-cur{ font-size: 12px; color: var(--text-mute); font-weight: 700; letter-spacing: .3px; }

/* DISCOUNTED PRICE STATE */
.att-price.has-discount .att-price-amount{
  color: #b6422e;
  font-size: 22px;
}
.att-price-old{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(176,66,46,.6);
  line-height: 1;
  letter-spacing: .2px;
}
.att-price-save{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #0d8949;
  background: #e6fbf1;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
  border: 1px solid #c8f0db;
}
.att-price-save i{ font-size: 9px; }

/* DISCOUNT BADGE ON BANNER */
.att-discount-badge{
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4d, #b91c1c);
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .6px;
  box-shadow: 0 8px 18px rgba(185,28,28,.45), 0 0 0 2px rgba(255,255,255,.30);
  animation: attBadgePulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
.att-discount-badge i{ font-size: 11px; transform: rotate(-12deg); }
@keyframes attBadgePulse{
  0%, 100%{ transform: scale(1);    box-shadow: 0 8px 18px rgba(185,28,28,.45), 0 0 0 2px rgba(255,255,255,.30); }
  50%     { transform: scale(1.06); box-shadow: 0 10px 22px rgba(185,28,28,.55), 0 0 0 4px rgba(255,255,255,.35); }
}

/* Subtle accent border on discounted cards */
.att-card.is-discounted{
  box-shadow:
    0 18px 40px -22px rgba(185,28,28,.25),
    0 6px 16px -10px rgba(3,6,65,.08),
    0 0 0 1.5px rgba(255,77,77,.18);
}
.att-card.is-discounted:hover{
  box-shadow:
    0 26px 56px -24px rgba(185,28,28,.32),
    0 10px 22px -10px rgba(3,6,65,.14),
    0 0 0 1.5px rgba(255,77,77,.32);
}

.att-card-cta{
  padding: 14px 18px 18px;
  display: flex;
  gap: 8px;
  background: linear-gradient(180deg, #f4f6fd, #fff);
}
.att-card-cta .att-btn{ flex: 1 1 auto; height: 44px; }

/* ---- BUTTONS ---- */
.att-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  height: 46px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all .2s;
  white-space: nowrap;
}
.att-btn-primary{
  background: linear-gradient(135deg, #0e3789 0%, #030641 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(3,6,65,.28);
}
.att-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(3,6,65,.38); }
.att-btn-ghost{
  background: #fff;
  color: var(--brand-1);
  border-color: #d8dce8;
}
.att-btn-ghost:hover{
  background: #f5f7fd;
  border-color: var(--brand-2);
  color: var(--brand-2);
}
.att-btn-icon{
  width: 46px;
  padding: 0;
  flex: 0 0 auto;
}

/* ---- PAGINATION ---- */
.att-pager{
  margin: 40px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 1240px;
}
.att-page-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid #e2e6f0;
  background: #fff;
  color: var(--brand-1);
  font-weight: 800;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.att-page-btn:hover:not(:disabled){
  border-color: var(--brand-2);
  background: #f3f5fc;
  color: var(--brand-2);
  transform: translateY(-1px);
}
.att-page-btn:disabled{
  color: #c1c5d2;
  background: #f5f6fa;
  border-color: #ebeef5;
  cursor: not-allowed;
}
.att-page-numbers{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.att-page-num{
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid #e2e6f0;
  background: #fff;
  color: var(--brand-1);
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.att-page-num:hover{
  border-color: var(--brand-2);
  background: #f3f5fc;
  color: var(--brand-2);
}
.att-page-num.is-active{
  background: linear-gradient(135deg, #0e3789, #030641);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(3,6,65,.30);
  cursor: default;
}
.att-page-ellipsis{
  padding: 0 6px;
  color: var(--text-mute);
  font-weight: 800;
}
.att-page-meta{
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 8px;
}
.att-page-meta strong{ color: var(--brand-1); font-weight: 800; }

/* ---- EMPTY STATE ---- */
.att-empty{
  max-width: 460px;
  margin: 40px auto;
  text-align: center;
  padding: 36px 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 32px -16px rgba(3,6,65,.18);
}
.att-empty-ic{
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.att-empty h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--brand-1);
  font-weight: 800;
}
.att-empty p{ margin: 0 0 18px; color: var(--text-mute); font-size: 13.5px; }

/* ---- CTA STRIP ---- */
.att-cta{
  background: linear-gradient(135deg, #060a2a 0%, #0e3789 100%);
  padding: 50px 20px;
  position: relative;
  overflow: hidden;
}
.att-cta::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(400px 200px at 10% 50%, rgba(255,186,72,.18), transparent 60%),
    radial-gradient(500px 250px at 90% 50%, rgba(107,62,255,.20), transparent 60%);
  pointer-events: none;
}
.att-cta-inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  color: #fff;
}
.att-cta-text h3{
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.3px;
}
.att-cta-text p{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  max-width: 540px;
}
.att-cta-actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.att-cta .att-btn-primary{
  background: linear-gradient(135deg, #ffba48 0%, #ff7e5f 100%);
  color: #2a1700;
  box-shadow: 0 14px 30px rgba(255,186,72,.35);
}
.att-cta .att-btn-primary:hover{ box-shadow: 0 18px 38px rgba(255,186,72,.45); }
.att-cta .att-btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.30);
  color: #fff;
}
.att-cta .att-btn-ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: #fff;
  color: #fff;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1080px){
  .att-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px){
  .att-hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .att-toolbar-inner{ padding: 16px 18px 14px; }
  .att-sort{ margin-left: 0; }
  .att-filter-row{ gap: 8px; }
}
@media (max-width: 620px){
  .att-grid{ grid-template-columns: 1fr; gap: 18px; }
  .att-hero{ min-height: 320px; }
  .att-hero-inner{ padding: 48px 18px 36px; }
  .att-shell{ padding: 26px 14px 50px; }
  .att-card-info{ grid-template-columns: 1fr; gap: 6px; }
  .att-cta-inner{ flex-direction: column; align-items: flex-start; text-align: left; }
  .att-cta-actions{ width: 100%; }
  .att-cta-actions .att-btn{ flex: 1 1 auto; }
  .att-pager{ flex-wrap: wrap; }
  .att-page-num{ min-width: 36px; height: 36px; font-size: 13px; }
  .att-page-btn{ width: 36px; height: 36px; }
}


/* =========================================================
   COURSE DETAILS PAGE
   ========================================================= */

/* ---- HERO ---- */
.cd-hero{
  position: relative;
  background:
    radial-gradient(640px 380px at 12% 20%, rgba(107,62,255,.40), transparent 60%),
    radial-gradient(720px 480px at 88% 80%, rgba(46,212,122,.30), transparent 60%),
    linear-gradient(135deg, #060a2a 0%, #0e3789 55%, #1a2c8f 100%);
  color: #fff;
  padding: 36px 24px 48px;
  overflow: hidden;
}
.cd-hero::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
.cd-hero-inner{
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 1;
}

/* breadcrumb */
.cd-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}
.cd-breadcrumb a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .15s;
}
.cd-breadcrumb a:hover{ color: #fff; text-decoration: underline; }
.cd-bc-sep{ color: rgba(255,255,255,.45); font-size: 9px; }
.cd-bc-current{ color: #fff; font-weight: 800; }

.cd-hero-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cd-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  color: #fff;
}
.cd-tag i{ font-size: 11px; }
.cd-tag-format{ background: rgba(0,175,240,.22); border-color: rgba(0,175,240,.45); }
.cd-tag-level{ background: rgba(255,77,77,.22); border-color: rgba(255,77,77,.45); }
.cd-tag-lang{ background: rgba(46,212,122,.20); border-color: rgba(46,212,122,.40); }
.cd-tag-hot{ background: linear-gradient(135deg, rgba(255,186,72,.30), rgba(255,126,95,.30)); border-color: rgba(255,186,72,.55); }
.cd-tag-hot i{ color: #ffd86b; }

.cd-hero-title{
  margin: 0 0 14px;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.6px;
  max-width: 880px;
  text-shadow: 0 8px 22px rgba(0,0,0,.30);
}
.cd-hero-grad{
  background: linear-gradient(135deg, #ffe4a0, #ffba48 50%, #ff7e5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cd-hero-sub{
  margin: 0 0 22px;
  color: rgba(255,255,255,.86);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 780px;
}

.cd-hero-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
}
.cd-hero-rating{ display: inline-flex; align-items: center; gap: 8px; }
.cd-stars i{ color: #ffba48; font-size: 14px; }
.cd-hero-rating strong{ color: #fff; font-size: 15px; font-weight: 800; }
.cd-hero-meta-sep{ opacity: .5; }
.cd-hero-meta-item{ display: inline-flex; align-items: center; gap: 7px; }
.cd-hero-meta-item i{ color: rgba(255,255,255,.65); }
.cd-hero-meta-item strong{ color: #fff; font-weight: 800; }

/* ---- BODY 2-COL ---- */
.cd-shell{
  background: linear-gradient(180deg, #f6f7fc, #eef1f9);
  padding: 36px 20px 60px;
}
.cd-wrap{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
.cd-main{ min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ---- VIDEO / COVER PLAYER ---- */
.cd-player{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 60px -28px rgba(3,6,65,.40), 0 12px 24px -16px rgba(3,6,65,.18);
  background: #060a2a;
  aspect-ratio: 16 / 8.5;
}
.cd-player-cover{
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(107,62,255,.45), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(0,175,240,.40), transparent 55%),
    linear-gradient(135deg, #06082a 0%, #1a2c8f 50%, #4d2d8e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 24px;
  color: #fff;
  cursor: pointer;
}
.cd-player-bg{ position: absolute; inset: 0; overflow: hidden; }
.cd-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: cdFloat 14s ease-in-out infinite;
}
.cd-blob-1{
  width: 320px; height: 320px;
  background: radial-gradient(circle, #6b3eff 0%, transparent 70%);
  top: -100px; left: -80px;
}
.cd-blob-2{
  width: 360px; height: 360px;
  background: radial-gradient(circle, #00afef 0%, transparent 70%);
  bottom: -140px; right: -100px;
  animation-delay: -6s;
}
@keyframes cdFloat{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(40px, -30px); }
}

.cd-player-content{
  position: relative;
  z-index: 1;
  max-width: 480px;
}
.cd-player-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.30);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}
.cd-player-eyebrow i{ color: #ffd86b; }
.cd-player-title{
  margin: 0 0 6px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -.3px;
}
.cd-player-sub{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.cd-play-btn{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffba48, #ff7e5f);
  border: 4px solid rgba(255,255,255,.95);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 18px 40px rgba(0,0,0,.40), 0 0 0 6px rgba(255,255,255,.08);
  transition: transform .2s;
}
.cd-play-btn i{ margin-left: 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.cd-play-btn:hover{ transform: translate(-50%, -50%) scale(1.07); }
.cd-play-pulse{
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgba(255,186,72,.65);
  animation: cdPlayPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes cdPlayPulse{
  0%{ opacity: .9; transform: scale(1); }
  100%{ opacity: 0; transform: scale(1.6); }
}
.cd-player-foot{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: rgba(255,255,255,.85);
  z-index: 2;
}
.cd-player-foot-item i{ color: #ffd86b; margin-right: 4px; }

.cd-player-iframe{ position: absolute; inset: 0; background: #000; }
.cd-iframe-placeholder{
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  gap: 8px;
}
.cd-iframe-placeholder i{ font-size: 58px; color: #ffba48; margin-bottom: 6px; }
.cd-iframe-placeholder p{ margin: 0; font-weight: 700; }
.cd-iframe-placeholder small{ opacity: .55; }

/* ---- QUICK STATS ---- */
.cd-stats{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
}
.cd-stat{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
}
.cd-stat-ic{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 16px;
  flex-shrink: 0;
}
.cd-stat-num{
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.2px;
  line-height: 1.2;
}
.cd-stat-lbl{
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

/* ---- TABS ---- */
.cd-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 22px -14px rgba(3,6,65,.16);
}
.cd-tab{
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #5a6378;
  cursor: pointer;
  letter-spacing: .2px;
  transition: all .2s;
}
.cd-tab:hover{ color: var(--brand-1); background: #f4f6fd; }
.cd-tab.is-active{
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  box-shadow: 0 8px 18px rgba(3,6,65,.30);
}

/* ---- TAB PANELS ---- */
.cd-panel{
  display: none;
  background: #fff;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
  animation: cdPanelIn .35s ease both;
}
.cd-panel.is-active{ display: block; }
@keyframes cdPanelIn{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
.cd-h2{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -.3px;
}
.cd-h3{
  margin: 28px 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.2px;
}
.cd-p{
  margin: 0 0 14px;
  color: #3a4258;
  font-size: 14.5px;
  line-height: 1.7;
}
.cd-ul{ margin: 0 0 12px; padding-left: 22px; color: #3a4258; font-size: 14px; }
.cd-ul li{ line-height: 1.7; margin-bottom: 4px; }

/* what you'll learn grid */
.cd-learn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.cd-learn-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #2a3144;
  line-height: 1.55;
  font-weight: 600;
}
.cd-learn-item i{
  color: #0d8949;
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* who is this for */
.cd-who-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cd-who-card{
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f9ff, #fff);
  border: 1.5px solid #e8ecf6;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cd-who-card:hover{
  transform: translateY(-3px);
  border-color: #c0caeb;
  box-shadow: 0 14px 28px rgba(3,6,65,.10);
}
.cd-who-ic{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #6b3eff);
  color: #fff;
  font-size: 17px;
  margin-bottom: 12px;
  box-shadow: 0 8px 16px rgba(14,55,137,.25);
}
.cd-who-card h4{ margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--brand-1); }
.cd-who-card p{ margin: 0; color: var(--text-mute); font-size: 13px; line-height: 1.55; }

/* ---- MODULES (curriculum) ---- */
.cd-modules{ display: flex; flex-direction: column; gap: 10px; }
.cd-module{
  border: 1.5px solid #e7eaf3;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cd-module[open]{
  border-color: var(--brand-2);
  box-shadow: 0 14px 28px -14px rgba(14,55,137,.20);
}
.cd-module summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fafbff;
  transition: background .15s;
}
.cd-module summary::-webkit-details-marker{ display: none; }
.cd-module summary:hover{ background: #f3f6fd; }
.cd-module[open] summary{ background: linear-gradient(135deg, #f1f5ff, #fff); }
.cd-mod-num{
  width: 38px; height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(14,55,137,.25);
}
.cd-mod-meta{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-mod-title{ font-size: 14.5px; font-weight: 800; color: var(--brand-1); letter-spacing: -.1px; }
.cd-mod-sub{ font-size: 12px; color: var(--text-mute); font-weight: 600; }
.cd-mod-chev{
  color: var(--brand-2);
  font-size: 12px;
  transition: transform .25s;
}
.cd-module[open] .cd-mod-chev{ transform: rotate(180deg); }
.cd-lessons{
  list-style: none;
  margin: 0;
  padding: 6px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cd-lessons li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: #3a4258;
  font-weight: 600;
  transition: background .15s;
}
.cd-lessons li:hover{ background: #f6f8fd; color: var(--brand-2); }
.cd-lessons li i{ color: var(--brand-2); font-size: 13px; }
.cd-lessons li span:first-of-type, .cd-lessons li > span{ flex: 1 1 auto; }
.cd-lesson-dur{
  flex: 0 0 auto !important;
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 700;
}
.cd-modules-more{ text-align: center; margin-top: 6px; }

/* ---- INSTRUCTOR CARD ---- */
.cd-instructor-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 22px;
  background: linear-gradient(135deg, #f7f9ff, #fff);
  border-radius: 16px;
  border: 1.5px solid #e8ecf6;
}
.cd-instr-photo{
  position: relative;
  flex-shrink: 0;
}
.cd-instr-avatar{
  width: 108px; height: 108px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e3789, #6b3eff);
  color: #fff;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 30px rgba(14,55,137,.30);
  border: 4px solid #fff;
}
.cd-instr-online{
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #2ed47a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #c8f0db;
  animation: cdPulse 1.8s infinite;
}
@keyframes cdPulse{
  0%, 100%{ box-shadow: 0 0 0 1px #c8f0db, 0 0 0 4px rgba(46,212,122,.30); }
  50%     { box-shadow: 0 0 0 1px #c8f0db, 0 0 0 8px rgba(46,212,122,.00); }
}
.cd-instr-name{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -.2px;
}
.cd-instr-verified i{ color: var(--brand-2); font-size: 16px; }
.cd-instr-role{ margin: 0 0 14px; color: var(--text-mute); font-size: 13px; font-weight: 600; }
.cd-instr-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: #3a4258;
  margin-bottom: 14px;
}
.cd-instr-stats i{ color: #ffba48; font-size: 12px; margin-right: 4px; }
.cd-instr-stats strong{ color: var(--brand-1); font-weight: 800; }
.cd-instr-bio{ margin: 0 0 14px; color: #3a4258; font-size: 13.5px; line-height: 1.65; }
.cd-instr-social{ display: flex; gap: 8px; }
.cd-instr-social a{
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f5fc;
  color: var(--brand-1);
  font-size: 15px;
  transition: all .2s;
  text-decoration: none;
}
.cd-instr-social a:hover{
  background: var(--brand-1);
  color: #fff;
  transform: translateY(-2px);
}

/* ---- REVIEWS ---- */
.cd-reviews-summary{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px;
  background: linear-gradient(135deg, #fffaf2, #fff);
  border-radius: 16px;
  border: 1.5px solid #ffe8c5;
  margin-bottom: 20px;
}
.cd-rev-score{ text-align: center; padding-right: 22px; border-right: 1px solid #ffe8c5; }
.cd-rev-big{ font-size: 56px; font-weight: 900; line-height: 1; color: var(--brand-1); letter-spacing: -2px; }
.cd-rev-stars i{ color: #ffba48; font-size: 17px; margin: 6px 0 4px; }
.cd-rev-count{ font-size: 12.5px; color: var(--text-mute); font-weight: 700; }
.cd-rev-bars{ display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cd-rev-bar{
  display: grid;
  grid-template-columns: 36px 1fr 42px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-1);
}
.cd-rev-bar-lbl{ color: var(--text-mute); }
.cd-rev-bar-track{
  height: 8px;
  background: #f3eecd;
  border-radius: 999px;
  overflow: hidden;
}
.cd-rev-bar-fill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffba48, #ff7e5f);
  border-radius: 999px;
}
.cd-rev-bar-pct{ text-align: right; color: var(--text-mute); }

.cd-reviews-list{ display: flex; flex-direction: column; gap: 14px; }
.cd-review{
  padding: 18px 20px;
  background: #fafbff;
  border-radius: 14px;
  border: 1.5px solid #e8ecf6;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.cd-review:hover{
  border-color: #c0caeb;
  box-shadow: 0 12px 24px rgba(3,6,65,.06);
}
.cd-review-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cd-review-avatar{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}
.cd-review-name{
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-1);
}
.cd-review-time{
  font-size: 11.5px;
  color: var(--text-mute);
  font-weight: 600;
  margin-left: 6px;
}
.cd-review-stars i{ color: #ffba48; font-size: 12px; margin-top: 2px; }
.cd-review-body{
  margin: 0;
  color: #3a4258;
  font-size: 13.5px;
  line-height: 1.65;
}

/* ---- REGISTRATION FORM ---- */
.cd-reg{
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
}
.cd-reg-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef0f6;
}
.cd-reg-ic{
  width: 50px; height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffba48, #ff7e5f);
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(255,186,72,.30);
}
.cd-reg-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cd-form-row{ display: grid; gap: 14px; }
.cd-form-row.row-2{ grid-template-columns: 1fr 1fr; }
.cd-field label{
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-1);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.cd-req{ color: #d23b3b; font-weight: 900; }
.cd-field-wrap{
  position: relative;
}
.cd-field-ic{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-2);
  font-size: 14px;
  pointer-events: none;
  opacity: .8;
}
.cd-field-wrap input,
.cd-field-wrap select,
.cd-reg-form textarea{
  width: 100%;
  height: 50px;
  padding: 0 16px 0 44px;
  border-radius: 12px;
  border: 1.5px solid #e2e6f0;
  background: #f9fafd;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-1);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cd-reg-form textarea{
  height: auto;
  padding: 14px 16px;
  resize: vertical;
  min-height: 100px;
}
.cd-field-wrap select{ appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e3789' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: #f9fafd;
}
.cd-field-wrap input::placeholder,
.cd-reg-form textarea::placeholder{ color: #a8aebd; font-weight: 500; }
.cd-field-wrap input:focus,
.cd-field-wrap select:focus,
.cd-reg-form textarea:focus{
  border-color: var(--brand-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,55,137,.10);
}

.cd-agree{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--brand-1);
  font-weight: 600;
  user-select: none;
}
.cd-agree input{ position: absolute; opacity: 0; }
.cd-agree-box{
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 2px solid #cdd3e3;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  margin-top: 1px;
  transition: all .2s;
}
.cd-agree-box i{ opacity: 0; transition: opacity .15s; }
.cd-agree input:checked + .cd-agree-box{
  background: var(--brand-2);
  border-color: var(--brand-2);
}
.cd-agree input:checked + .cd-agree-box i{ opacity: 1; }
.cd-agree a{ color: var(--brand-2); font-weight: 800; }

.cd-reg-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---- STICKY SIDEBAR ---- */
.cd-side{
  position: sticky;
  top: 20px;
  align-self: start;
}
.cd-side-inner{ display: flex; flex-direction: column; gap: 16px; }

.cd-price-card{
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow:
    0 24px 56px -20px rgba(3,6,65,.32),
    0 0 0 1px rgba(3,6,65,.04);
  position: relative;
}
.cd-price-badge{
  position: absolute;
  top: -12px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4d, #b91c1c);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(185,28,28,.35);
}
.cd-price-badge i{ font-size: 10px; transform: rotate(-12deg); }

.cd-price-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  margin-top: 6px;
}
.cd-price-old{
  font-size: 18px;
  font-weight: 700;
  color: var(--text-mute);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(176,66,46,.6);
}
.cd-price-now{
  font-size: 36px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -1px;
  line-height: 1;
}
.cd-price-save{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #0d8949;
  font-weight: 700;
  margin-bottom: 18px;
}
.cd-price-save i{ font-size: 10px; }
.cd-price-save strong{ font-weight: 900; }

.cd-enroll-btn{
  width: 100%;
  height: 56px;
  font-size: 15.5px;
  background: linear-gradient(135deg, #ffba48 0%, #ff7e5f 100%);
  color: #2a1700;
  box-shadow: 0 14px 32px rgba(255,186,72,.45);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.cd-enroll-btn::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.40) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.cd-enroll-btn:hover::before{ transform: translateX(100%); }
.cd-enroll-btn:hover{
  box-shadow: 0 18px 40px rgba(255,186,72,.55);
  color: #2a1700;
}
.cd-secondary-btn{ width: 100%; }

.cd-side-divider{
  height: 1px;
  background: #eef0f6;
  margin: 18px 0;
}
.cd-side-h4{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.cd-includes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-includes li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #2a3144;
  font-weight: 600;
}
.cd-includes li i{
  color: #0d8949;
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e6fbf1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-share-row{
  display: flex;
  gap: 8px;
}
.cd-share-btn{
  flex: 1 1 auto;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid #e2e6f0;
  background: #f9fafd;
  color: var(--brand-1);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .2s;
}
.cd-share-btn:hover{
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: #fff;
  transform: translateY(-2px);
}

.cd-guarantee{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(135deg, #f5fef9, #fff);
  border-radius: 16px;
  border: 1.5px solid #c8f0db;
}
.cd-guarantee-ic{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2ed47a, #059669);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(46,212,122,.30);
}
.cd-guarantee h4{ margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--brand-1); }
.cd-guarantee p{ margin: 0; font-size: 12.5px; color: #3a4258; line-height: 1.55; }

/* ---- FAQ ---- */
.cd-faq-section{
  background: #fff;
  padding: 60px 20px 70px;
}
.cd-faq-inner{ max-width: 1100px; margin: 0 auto; }
.cd-faq-head{ text-align: center; margin-bottom: 32px; }
.cd-faq-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cd-faq-title{
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -.5px;
}
.cd-faq-sub{ margin: 0; color: var(--text-mute); font-size: 14.5px; }
.cd-faq-sub a{ color: var(--brand-2); font-weight: 800; }
.cd-faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cd-faq{
  background: #fafbff;
  border: 1.5px solid #e8ecf6;
  border-radius: 14px;
  transition: all .2s;
}
.cd-faq[open]{
  background: #fff;
  border-color: var(--brand-2);
  box-shadow: 0 14px 30px -16px rgba(14,55,137,.20);
}
.cd-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--brand-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cd-faq summary::-webkit-details-marker{ display: none; }
.cd-faq summary i{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #eef1fb;
  color: var(--brand-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s, background .2s;
}
.cd-faq[open] summary i{
  transform: rotate(45deg);
  background: var(--brand-2);
  color: #fff;
}
.cd-faq-body{
  padding: 0 20px 18px;
  font-size: 13.5px;
  color: #3a4258;
  line-height: 1.65;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1080px){
  .cd-wrap{ grid-template-columns: 1fr; }
  .cd-side{ position: static; }
  .cd-stats{ grid-template-columns: repeat(3, 1fr); }
  .cd-faq-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .cd-hero{ padding: 28px 18px 36px; }
  .cd-shell{ padding: 24px 14px 50px; }
  .cd-wrap{ gap: 18px; }
  .cd-main{ gap: 18px; }
  .cd-panel{ padding: 22px 18px; }
  .cd-h2{ font-size: 18px; }
  .cd-stats{ grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .cd-stat{ padding: 2px 4px; }
  .cd-stat-ic{ width: 38px; height: 38px; font-size: 14px; }
  .cd-learn-grid{ grid-template-columns: 1fr; }
  .cd-who-grid{ grid-template-columns: 1fr; }
  .cd-instructor-card{ grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .cd-instr-photo{ margin: 0 auto; }
  .cd-instr-stats{ justify-content: center; }
  .cd-instr-social{ justify-content: center; }
  .cd-reviews-summary{ grid-template-columns: 1fr; gap: 16px; }
  .cd-rev-score{ padding-right: 0; padding-bottom: 16px; border-right: none; border-bottom: 1px solid #ffe8c5; }
  .cd-form-row.row-2{ grid-template-columns: 1fr; }
  .cd-reg-actions{ flex-direction: column-reverse; align-items: stretch; }
  .cd-reg-actions .att-btn{ width: 100%; }
  .cd-faq-title{ font-size: 22px; }
  .cd-player{ aspect-ratio: 16 / 10; }
  .cd-play-btn{ width: 72px; height: 72px; font-size: 22px; border-width: 3px; }
  .cd-tabs{ padding: 4px; }
  .cd-tab{ padding: 10px 12px; font-size: 13px; }
}


/* =========================================================
   LEGAL PAGES (Terms & Conditions, Privacy Policy)
   ========================================================= */

/* ---- HERO ---- */
.lg-hero{
  position: relative;
  background:
    radial-gradient(560px 360px at 18% 30%, rgba(107,62,255,.35), transparent 60%),
    radial-gradient(620px 420px at 82% 70%, rgba(46,212,122,.25), transparent 60%),
    linear-gradient(135deg, #060a2a 0%, #0e3789 55%, #1a2c8f 100%);
  color: #fff;
  padding: 56px 24px 64px;
  text-align: center;
  overflow: hidden;
}
.lg-hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
.lg-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}
.lg-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lg-eyebrow i{ color: #ffd86b; }
.lg-title{
  margin: 0 0 14px;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  letter-spacing: -.8px;
  text-shadow: 0 8px 22px rgba(0,0,0,.30);
}
.lg-title-grad{
  background: linear-gradient(135deg, #ffe4a0, #ffba48 50%, #ff7e5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lg-sub{
  margin: 0 auto 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
  max-width: 640px;
}
.lg-meta{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
}
.lg-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(6px);
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.lg-meta-item i{ color: #ffd86b; font-size: 11px; }

/* ---- BODY: TOC + content ---- */
.lg-shell{
  background: linear-gradient(180deg, #f6f7fc, #eef1f9);
  padding: 40px 20px 70px;
}
.lg-wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* TOC */
.lg-toc{
  position: sticky;
  top: 20px;
  align-self: start;
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.lg-toc-head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-1);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f6;
}
.lg-toc-head i{ color: var(--brand-2); }
.lg-toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lg-toc-list a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5468;
  text-decoration: none;
  transition: all .15s;
  border-left: 3px solid transparent;
  margin-left: -3px;
}
.lg-toc-list a:hover{
  color: var(--brand-1);
  background: #f4f6fd;
}
.lg-toc-list a.is-active{
  color: var(--brand-2);
  background: linear-gradient(90deg, rgba(14,55,137,.10), transparent);
  border-left-color: var(--brand-2);
  font-weight: 800;
}
.lg-toc-list .lg-toc-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #f1f3fa;
  color: var(--brand-2);
  font-size: 10.5px;
  font-weight: 900;
  flex-shrink: 0;
}
.lg-toc-list a.is-active .lg-toc-num{
  background: var(--brand-2);
  color: #fff;
}

/* CONTENT */
.lg-content{
  background: #fff;
  border-radius: 18px;
  padding: 32px 36px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
  font-size: 15px;
  color: #2a3144;
  line-height: 1.75;
}
.lg-section{ margin-bottom: 38px; scroll-margin-top: 80px; }
.lg-section:last-child{ margin-bottom: 0; }
.lg-section h2{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -.3px;
}
.lg-section-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0e3789, #030641);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(14,55,137,.25);
}
.lg-section p{ margin: 0 0 14px; }
.lg-section p:last-child{ margin-bottom: 0; }
.lg-section ul, .lg-section ol{
  margin: 0 0 16px;
  padding-left: 22px;
}
.lg-section li{ margin-bottom: 8px; line-height: 1.7; }
.lg-section strong{ color: var(--brand-1); font-weight: 800; }
.lg-section a{
  color: var(--brand-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Callout boxes */
.lg-callout{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f7f9ff;
  border: 1.5px solid #e8ecf6;
  border-left: 4px solid var(--brand-2);
  margin: 16px 0;
}
.lg-callout i{
  font-size: 18px;
  color: var(--brand-2);
  flex-shrink: 0;
  margin-top: 2px;
}
.lg-callout.is-warn{
  background: #fff8ee;
  border-color: #ffe8c5;
  border-left-color: #ffba48;
}
.lg-callout.is-warn i{ color: #b8740a; }
.lg-callout.is-danger{
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}
.lg-callout.is-danger i{ color: #b91c1c; }
.lg-callout.is-ok{
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #2ed47a;
}
.lg-callout.is-ok i{ color: #0d8949; }
.lg-callout p{ margin: 0; font-size: 14px; line-height: 1.65; }

/* Footer/Top action bar */
.lg-foot-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #eef0f6;
  flex-wrap: wrap;
}
.lg-foot-note{
  font-size: 12.5px;
  color: var(--text-mute);
}
.lg-foot-actions{ display: inline-flex; gap: 10px; }

/* Back to top */
.lg-back-top{
  position: fixed;
  bottom: 100px;
  right: 26px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-1);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 12px 28px rgba(3,6,65,.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, background .15s;
  z-index: 80;
}
.lg-back-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.lg-back-top:hover{ background: var(--brand-2); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1000px){
  .lg-wrap{ grid-template-columns: 1fr; }
  .lg-toc{
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 720px){
  .lg-hero{ padding: 40px 18px 48px; }
  .lg-shell{ padding: 28px 14px 60px; }
  .lg-content{ padding: 24px 18px; }
  .lg-section h2{ font-size: 18px; gap: 10px; }
  .lg-section-num{ width: 32px; height: 32px; font-size: 12px; border-radius: 9px; }
  .lg-foot-bar{ flex-direction: column; align-items: stretch; }
  .lg-foot-actions{ width: 100%; }
  .lg-foot-actions .att-btn{ flex: 1 1 auto; }
}


/* =========================================================
   FAQ PAGE
   ========================================================= */

/* ---- HERO (reuses lg- structure) ---- */
.faq-hero{
  position: relative;
  background:
    radial-gradient(560px 360px at 18% 30%, rgba(0,175,240,.30), transparent 60%),
    radial-gradient(620px 420px at 82% 70%, rgba(255,186,72,.25), transparent 60%),
    linear-gradient(135deg, #060a2a 0%, #1a2c8f 55%, #0e3789 100%);
  color: #fff;
  padding: 56px 24px 68px;
  text-align: center;
  overflow: hidden;
}
.faq-hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
.faq-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Search */
.faq-search{
  position: relative;
  max-width: 600px;
  margin: 8px auto 0;
}
.faq-search > i{
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-2);
  font-size: 17px;
  pointer-events: none;
}
.faq-search input{
  width: 100%;
  height: 60px;
  padding: 0 24px 0 56px;
  border-radius: 16px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-1);
  background: #fff;
  outline: none;
  box-shadow: 0 20px 50px rgba(3,6,65,.35), 0 0 0 4px rgba(255,255,255,.10);
  transition: box-shadow .2s;
}
.faq-search input::placeholder{ color: #a8aebd; font-weight: 500; }
.faq-search input:focus{
  box-shadow: 0 24px 60px rgba(3,6,65,.45), 0 0 0 6px rgba(255,186,72,.30);
}
.faq-search-clear{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #f3f5fa;
  color: #6b7388;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.faq-search-clear:hover{ background: var(--brand-1); color: #fff; }

/* ---- TOOLBAR ---- */
.faq-toolbar{
  background: #fff;
  border-bottom: 1px solid rgba(3,6,65,.08);
  box-shadow: 0 8px 22px rgba(3,6,65,.05);
}
.faq-toolbar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.faq-chips{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.faq-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid #e2e6f0;
  background: #fafbff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #5a6378;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.faq-chip i{ font-size: 12px; color: var(--brand-2); }
.faq-chip:hover{
  border-color: var(--brand-2);
  background: #f3f6fd;
  color: var(--brand-1);
}
.faq-chip.is-active{
  background: linear-gradient(135deg, #0e3789, #030641);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(3,6,65,.25);
}
.faq-chip.is-active i{ color: #ffd86b; }
.faq-result-count{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mute);
}
.faq-result-count span{
  color: var(--brand-2);
  font-weight: 900;
}

/* ---- SHELL ---- */
.faq-shell{
  background: linear-gradient(180deg, #f6f7fc, #eef1f9);
  padding: 36px 20px 60px;
}
.faq-list{
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Category group */
.faq-group{
  background: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 14px 32px -18px rgba(3,6,65,.20), 0 0 0 1px rgba(3,6,65,.04);
}
.faq-group-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef0f6;
}
.faq-group-ic{
  width: 48px; height: 48px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(3,6,65,.20);
}
.faq-group.cat-account .faq-group-ic    { background: linear-gradient(135deg, #0e3789, #6b3eff); }
.faq-group.cat-funds .faq-group-ic      { background: linear-gradient(135deg, #0d8949, #2ed47a); }
.faq-group.cat-trading .faq-group-ic    { background: linear-gradient(135deg, #b6422e, #ff7e5f); }
.faq-group.cat-bonuses .faq-group-ic    { background: linear-gradient(135deg, #a86a08, #f1b942); }
.faq-group.cat-security .faq-group-ic   { background: linear-gradient(135deg, #1f2937, #475569); }
.faq-group.cat-academy .faq-group-ic    { background: linear-gradient(135deg, #4d2d8e, #8b4dff); }
.faq-group.cat-tech .faq-group-ic       { background: linear-gradient(135deg, #0f5d6b, #14b8a6); }
.faq-group-meta h3{
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 900;
  color: var(--brand-1);
  letter-spacing: -.2px;
}
.faq-group-meta p{
  margin: 0;
  font-size: 12.5px;
  color: var(--text-mute);
  font-weight: 600;
}

.faq-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item{
  border: 1.5px solid #e7eaf3;
  border-radius: 13px;
  background: #fafbff;
  transition: all .2s;
}
.faq-item[open]{
  background: #fff;
  border-color: var(--brand-2);
  box-shadow: 0 10px 22px -12px rgba(14,55,137,.20);
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--brand-1);
  letter-spacing: -.1px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-q-text{ flex: 1 1 auto; line-height: 1.5; }
.faq-q-ic{
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #eef1fb;
  color: var(--brand-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s, background .2s;
}
.faq-item[open] .faq-q-ic{
  transform: rotate(45deg);
  background: var(--brand-2);
  color: #fff;
}
.faq-a-body{
  padding: 0 18px 18px;
  color: #3a4258;
  font-size: 14px;
  line-height: 1.7;
}
.faq-a-body p{ margin: 0 0 10px; }
.faq-a-body p:last-child{ margin-bottom: 0; }
.faq-a-body ul, .faq-a-body ol{ margin: 0 0 10px; padding-left: 22px; }
.faq-a-body li{ margin-bottom: 4px; line-height: 1.65; }
.faq-a-body strong{ color: var(--brand-1); font-weight: 800; }
.faq-a-body a{ color: var(--brand-2); font-weight: 700; text-decoration: underline; }
.faq-helpful{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px dashed #e7eaf3;
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 600;
}
.faq-helpful-btn{
  background: #fff;
  border: 1.5px solid #e2e6f0;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.faq-helpful-btn:hover{ border-color: var(--brand-2); color: var(--brand-2); }
.faq-helpful-btn.is-pressed{ background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

/* Empty state */
.faq-empty{
  max-width: 460px;
  margin: 24px auto;
  text-align: center;
  padding: 36px 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 32px -16px rgba(3,6,65,.18);
}
.faq-empty-ic{
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef1ff, #dde3ff);
  color: var(--brand-2);
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faq-empty h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--brand-1);
  font-weight: 800;
}
.faq-empty p{ margin: 0 0 16px; color: var(--text-mute); font-size: 13.5px; }

/* Search highlight */
.faq-mark{
  background: #fff4c8;
  color: var(--brand-1);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 800;
}

/* ---- CONTACT BANNER ---- */
.faq-contact{
  background: linear-gradient(135deg, #060a2a 0%, #0e3789 100%);
  color: #fff;
  padding: 56px 20px;
  position: relative;
  overflow: hidden;
}
.faq-contact::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(400px 200px at 10% 50%, rgba(255,186,72,.20), transparent 60%),
    radial-gradient(500px 250px at 90% 50%, rgba(107,62,255,.22), transparent 60%);
  pointer-events: none;
}
.faq-contact-inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.faq-contact-ic{
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #ffd86b;
}
.faq-contact h2{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.4px;
}
.faq-contact p{
  margin: 0 auto 24px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  max-width: 540px;
}
.faq-contact-actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.faq-contact .att-btn-primary{
  background: linear-gradient(135deg, #ffba48 0%, #ff7e5f 100%);
  color: #2a1700;
  box-shadow: 0 14px 30px rgba(255,186,72,.35);
}
.faq-contact .att-btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.30);
  color: #fff;
}
.faq-contact .att-btn-ghost:hover{ background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }

@media (max-width: 720px){
  .faq-hero{ padding: 40px 18px 48px; }
  .faq-shell{ padding: 28px 14px 60px; }
  .faq-group{ padding: 20px 18px; border-radius: 16px; }
  .faq-group-head{ gap: 12px; }
  .faq-group-ic{ width: 42px; height: 42px; font-size: 16px; }
  .faq-search input{ height: 54px; font-size: 14px; }
  .faq-toolbar-inner{ padding: 14px 16px; }
  .faq-result-count{ width: 100%; }
  .faq-item summary{ padding: 14px 14px; font-size: 13.5px; }
  .faq-contact{ padding: 44px 18px; }
  .faq-contact h2{ font-size: 22px; }
  .faq-contact-actions .att-btn{ flex: 1 1 auto; }
}

/* Selectable country dial-code dropdown for phone fields (universal) */
.phone-code{
  align-self: stretch; flex: 0 0 auto; max-width: 165px; padding: 0 8px;
  font-size: 13px; font-weight: 700; color: var(--text-2);
  border: 0; border-right: 1px solid var(--line);
  background: rgba(14,55,137,.04); cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
}
.phone-code:focus{ color: var(--brand-2); }
.cd-field-wrap:has(.phone-code) .cd-field-ic,
.field-wrap:has(.phone-code) .field-icon{ display:none; }
html[dir="rtl"] .phone-code{ border-right: 0; border-left: 1px solid var(--line); text-align: right; }

/* ---- Checkout: payment-method logos served by MyFatoorah ----------------
   Replaces the CSS-drawn KNET/Visa marks: the method list is now dynamic, so
   each row shows the provider's own image. */
.ck-method-logo.ck-logo-img{
  flex: 0 0 auto;
  width: 58px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e3e7f1;
  overflow: hidden;
}
.ck-method-logo.ck-logo-img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* With many methods, three across reads better than two */
@media (min-width: 861px){
  .ck-methods{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .ck-methods{ grid-template-columns: 1fr; }
}

/* Tighter padding — rows are single-line now that there is no description */
.ck-methods .ck-method-card{ padding: 14px 16px; }

.ck-methods-empty{
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  text-align: center;
  border: 1px dashed #c0caeb;
  border-radius: 12px;
  background: #fafbff;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 600;
}

/* ---- Checkout: applied-coupon panel ------------------------------------ */
.ck-section-ic.ck-section-ic-3{
  background: linear-gradient(135deg, rgba(26,188,136,.16), rgba(26,188,136,.06));
  color: #0f7a55;
}

.ck-applied-card{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(26,188,136,.35);
  background: linear-gradient(135deg, rgba(26,188,136,.09), rgba(26,188,136,.03));
}

.ck-applied-rows{
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck-applied-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
}
.ck-applied-k{ color: var(--text-mute); font-weight: 600; }
.ck-applied-v{ font-weight: 700; color: var(--text); white-space: nowrap; }
.ck-applied-v.is-credit{ color: #0f7a55; }
.ck-applied-v.is-struck{ color: var(--text-soft); text-decoration: line-through; font-weight: 600; }

.ck-applied-code{
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed rgba(26,188,136,.55);
  color: #0f7a55;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-applied-row.is-total{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(26,188,136,.25);
}
.ck-applied-row.is-total .ck-applied-k{ color: var(--text-2); font-weight: 700; }
.ck-applied-row.is-total .ck-applied-v{ font-size: 17px; color: var(--brand-1); }

.ck-applied-actions{ flex: 0 0 auto; margin: 0; }
.ck-btn.ck-remove-coupon{
  border-color: rgba(239,71,96,.40);
  color: #c2185b;
  background: #fff;
  white-space: nowrap;
}
.ck-btn.ck-remove-coupon:hover{
  border-color: #ef4760;
  background: rgba(239,71,96,.06);
}

.ck-applied-note{
  margin: 12px 2px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-soft);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.ck-applied-note i{ margin-top: 2px; color: var(--text-mute); }

@media (max-width: 560px){
  .ck-applied-card{ flex-direction: column; align-items: stretch; }
  .ck-applied-actions .ck-btn{ width: 100%; justify-content: center; }
}


/* =========================================================
   STATUS BAR — mobile (all pages)
   Below 760px: drop the "Markets Open" badge and the dividers, and show the
   phone + email as two centred pills so they read cleanly on a phone.
   !important because index-modern-3d.css / rtl.css load after this file.
   ========================================================= */
@media (max-width: 760px){
  .statusbar{ font-size: 11.5px; }
  .statusbar-inner{
    padding: 8px 12px !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* "Markets Open" + every divider go away on mobile */
  .statusbar .status-left .status-pulse-wrap,
  .statusbar .status-left .status-divider{ display: none !important; }

  .statusbar .status-left{
    width: 100%;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  /* Phone + email as compact pills */
  .statusbar .status-left .status-item{
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .statusbar .status-left .status-item i{ font-size: 11px; flex: 0 0 auto; }
  .statusbar .status-left .status-item bdi{ unicode-bidi: isolate; }
  .statusbar .status-left .status-item:active{ background: rgba(255, 255, 255, .1); }

  /* Social row sits centred under the pills */
  .statusbar .status-right{ width: 100%; justify-content: center !important; }
}

@media (max-width: 400px){
  /* Very small phones — shrink slightly so both pills still fit one line. */
  .statusbar{ font-size: 10.5px !important; }
  .statusbar .status-left{ gap: 6px !important; }
  .statusbar .status-left .status-item{ padding: 5px 9px; gap: 5px; }
  .statusbar .status-left .status-item i{ font-size: 10px; }
}


/* =========================================================
   MOBILE DRAWER — authoritative open/closed state
   Lives in main.css because that file is the one served with a
   ?v=<filemtime> cache-buster, so this always reaches the browser.

   Why !important: index-modern-3d.css (right:-100%) and rtl.css load AFTER
   this file, and main.css's own `html[dir="rtl"] .drawer{transform:translateX(-100%)}`
   is more specific than `.drawer.show`. With a stale cached rtl.css the RTL
   drawer stayed translated off-screen — the backdrop dimmed the page but no
   panel appeared. These rules settle it in one place for both directions.
   ========================================================= */
.drawer{
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
html[dir="rtl"] .drawer{
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
.drawer.show,
html[dir="rtl"] .drawer.show{ transform: translateX(0) !important; }

/* Panel must sit above its own backdrop in every stacking context. */
.drawer{ z-index: 1000 !important; }
.drawer-backdrop{ z-index: 999 !important; }


/* =========================================================
   HOME HERO — ORBIT
   The hero figure: four trading-condition metrics set as type
   around a glowing core. Deliberately no cards, no panels —
   hairlines, rings and numerals only.
   ========================================================= */
.hero-visual{ position: relative; display: flex; align-items: center; justify-content: center; }

.hv-orbit{
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

/* ---- rings ---- */
.hv-rings{ position:absolute; inset:0; width:100%; height:100%; overflow: visible; }
.hv-ring-outer{ transform-origin: 50% 50%; animation: hvSpin 46s linear infinite; }
.hv-ring-arc{
  transform-origin: 50% 50%;
  animation: hvSpin 9s linear infinite reverse;
  filter: drop-shadow(0 0 6px rgba(79,140,255,.35));
}
@keyframes hvSpin{ to{ transform: rotate(360deg); } }
.hv-links line{ stroke-dasharray: 2 6; animation: hvFlow 3.4s linear infinite; }
@keyframes hvFlow{ to{ stroke-dashoffset: -32; } }
.hv-dots circle{ animation: hvTwinkle 3s ease-in-out infinite; }
.hv-dots circle:nth-child(2){ animation-delay:.7s; }
.hv-dots circle:nth-child(3){ animation-delay:1.4s; }
.hv-dots circle:nth-child(4){ animation-delay:2.1s; }
@keyframes hvTwinkle{ 0%,100%{ opacity:.45; r:3; } 50%{ opacity:1; r:4.2; } }

/* ---- core ---- */
.hv-core{
  position: relative;
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #17307e 0%, #0b1c5c 45%, #050c33 100%);
  box-shadow:
    0 24px 60px -18px rgba(6,16,60,.65),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 40px -6px rgba(79,140,255,.5);
}
.hv-core img{ width: 60%; height:auto; opacity:.96; }
.hv-core .hv-ripple{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(79,140,255,.5);
  animation: hvRipple 3.6s ease-out infinite;
}
.hv-core .hv-ripple.d2{ animation-delay: 1.8s; }
@keyframes hvRipple{
  0%{ transform: scale(1); opacity:.65; }
  100%{ transform: scale(2.05); opacity:0; }
}

/* ---- the four figures ---- */
.hv-node{
  position: absolute;
  margin: 0;
  text-align: center;
  min-width: 120px;
  animation: hvFloat 7s ease-in-out infinite;
}
.hv-node.n-end{ animation-delay: -1.7s; }
.hv-node.n-bottom{ animation-delay: -3.4s; }
.hv-node.n-start{ animation-delay: -5.1s; }
@keyframes hvFloat{ 0%,100%{ transform: translate(var(--tx,0), var(--ty,0)); } 50%{ transform: translate(var(--tx,0), calc(var(--ty,0px) - 7px)); } }

.hv-node.n-top{    --tx:-50%; --ty:0px;  top: 2%;  left: 50%; }
.hv-node.n-bottom{ --tx:-50%; --ty:0px;  bottom: 2%; left: 50%; transform: translate(-50%, 0); }
.hv-node.n-end{    --tx:0px;  --ty:-50%; top: 50%; inset-inline-end: 0; }
.hv-node.n-start{  --tx:0px;  --ty:-50%; top: 50%; inset-inline-start: 0; }

.hv-node > i{
  display:block; font-size: 13px; margin-bottom: 8px;
  color: #d9a92c;
  text-shadow: 0 4px 14px rgba(217,169,44,.45);
}
.hv-fig{
  display:block;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -1.6px;
  color: var(--brand-2, #0e3789);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #0e3789 0%, #2950bd 55%, #4f8cff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hv-fig em{
  font-style: normal;
  font-size: .42em;
  font-weight: 800;
  letter-spacing: 0;
  margin-inline-start: 2px;
}
/* a word ("Instant") reads larger than a numeral at the same size — trim it
   so all four figures carry equal weight in the composition. */
.hv-node.n-start .hv-fig{ font-size: clamp(22px, 2.7vw, 30px); letter-spacing: -.8px; }

.hv-node figcaption{
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(20,32,70,.52);
}

/* the hairline under each caption — the only "chrome" in the composition */
.hv-node figcaption::after{
  content:"";
  display:block;
  width: 26px; height:1px; margin: 9px auto 0;
  background: linear-gradient(90deg, transparent, rgba(217,169,44,.85), transparent);
}

/* ---- hover: the core glides toward the figure you approach, then back to centre ---- */
.hv-core{
  z-index: 2;
  will-change: transform;
  transition: transform .75s cubic-bezier(.22,1.25,.36,1), box-shadow .4s ease;
}
.hv-core img{ transform-origin: 50% 50%; }
.hv-core.hv-pop img{ animation: hvLogoPop .65s cubic-bezier(.22,1.3,.36,1); }
@keyframes hvLogoPop{
  0%  { transform: scale(1) rotate(0); }
  40% { transform: scale(1.16) rotate(-10deg); }
  100%{ transform: scale(1) rotate(0); }
}
.hv-orbit.is-seeking .hv-core{
  box-shadow:
    0 24px 60px -18px rgba(6,16,60,.65),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 70px -4px rgba(79,140,255,.8);
}
.hv-node{ transition: opacity .35s ease; }
.hv-node .hv-fig,
.hv-node > i,
.hv-node figcaption{ transition: transform .35s ease, color .35s ease; }
.hv-orbit.is-seeking .hv-node{ opacity: .5; }
.hv-orbit.is-seeking .hv-node.is-active{ opacity: 1; }
.hv-node.is-active .hv-fig{ transform: scale(1.08); }
.hv-node.is-active > i{ transform: translateY(-3px) scale(1.25); }
.hv-node.is-active figcaption{ color: var(--brand-2, #0e3789); }
.hv-links line{ transition: stroke .35s ease, stroke-width .35s ease; }
.hv-links line.is-active{ stroke: rgba(79,140,255,.75); stroke-width: 1.8; }

@media (prefers-reduced-motion: reduce){
  .hv-ring-outer, .hv-ring-arc, .hv-links line, .hv-dots circle, .hv-node, .hv-core .hv-ripple{ animation: none !important; }
}
@media (prefers-reduced-motion: reduce){ .hv-core{ transition: none; } .hv-core.hv-pop img{ animation: none; } }

/* ---- small screens: the orbit becomes a quiet 2x2 spec panel ----
   Same four figures, no cards: a soft wash, hairline cross dividers and a
   single gold pivot where they meet. ------------------------------------ */
@media (max-width: 620px){
  .hv-orbit{
    position: relative;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* the base rule centres grid items, which left each figure at its own
       content width and the hairlines out of line — stretch fixes both. */
    place-items: stretch;
    width: 100%;
    margin-top: 6px;
    padding: 6px 2px;
    border-radius: 24px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(79,140,255,.10), transparent 62%),
      radial-gradient(120% 90% at 50% 100%, rgba(245,215,122,.10), transparent 62%);
  }

  /* the pivot where the two hairlines cross */
  .hv-orbit::after{
    content: "";
    position: absolute; top: 50%; inset-inline-start: 50%;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #f5d77a;
    box-shadow: 0 0 0 5px rgba(245,215,122,.16);
    animation: hvTwinkle 3s ease-in-out infinite;
  }

  .hv-rings, .hv-core{ display: none; }

  .hv-node{
    position: static;
    animation: none;
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    padding: 24px 10px 22px;
  }
  /* the orbit rules position these with inset + translate(-50%) — clear that at
     the same specificity, or a figure hangs half a cell outside its column. */
  .hv-node.n-top, .hv-node.n-end, .hv-node.n-bottom, .hv-node.n-start{
    transform: none;
    top: auto; bottom: auto;
    inset-inline-start: auto; inset-inline-end: auto;
    left: auto; right: auto;
  }

  .hv-orbit > figure:nth-of-type(1),
  .hv-orbit > figure:nth-of-type(2){ border-bottom: 1px solid rgba(14,55,137,.10); }
  .hv-orbit > figure:nth-of-type(1),
  .hv-orbit > figure:nth-of-type(3){ border-inline-end: 1px solid rgba(14,55,137,.10); }

  .hv-node > i{
    font-size: 14px;
    margin-bottom: 11px;
    color: #d9a92c;
    opacity: .95;
  }
  .hv-fig{ font-size: clamp(27px, 8.5vw, 34px); letter-spacing: -1.2px; }
  /* the one word figure — sized to fit its half-width cell on small phones */
  .hv-node.n-start .hv-fig{ font-size: clamp(19px, 6vw, 25px); letter-spacing: -.6px; }
  .hv-node figcaption{
    margin-top: 9px;
    font-size: 10px;
    letter-spacing: 1.1px;
    line-height: 1.35;
    color: rgba(20,32,70,.55);
  }
  .hv-node figcaption::after{ width: 20px; margin-top: 8px; }
}

@media (max-width: 380px){
  .hv-node{ padding: 19px 6px 17px; }
  .hv-node figcaption{ font-size: 9.5px; letter-spacing: .8px; }
}

/* =========================================================
   MOBILE DRAWER — authoritative open/closed state
   Lives in main.css because that file is the one served with a
   ?v=<filemtime> cache-buster, so this always reaches the browser.

   Why !important: index-modern-3d.css (right:-100%) and rtl.css load AFTER
   this file, and main.css's own `html[dir="rtl"] .drawer{transform:translateX(-100%)}`
   is more specific than `.drawer.show`. With a stale cached rtl.css the RTL
   drawer stayed translated off-screen — the backdrop dimmed the page but no
   panel appeared. These rules settle it in one place for both directions.
   ========================================================= */
.drawer{
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
html[dir="rtl"] .drawer{
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
.drawer.show,
html[dir="rtl"] .drawer.show{ transform: translateX(0) !important; }

/* Panel must sit above its own backdrop in every stacking context. */
.drawer{ z-index: 1000 !important; }
.drawer-backdrop{ z-index: 999 !important; }


/* =========================================================
   MOBILE DRAWER — authoritative open/closed state
   Lives in main.css because that file is the one served with a
   ?v=<filemtime> cache-buster, so this always reaches the browser.

   Why !important: index-modern-3d.css (right:-100%) and rtl.css load AFTER
   this file, and main.css's own `html[dir="rtl"] .drawer{transform:translateX(-100%)}`
   is more specific than `.drawer.show`. With a stale cached rtl.css the RTL
   drawer stayed translated off-screen — the backdrop dimmed the page but no
   panel appeared. These rules settle it in one place for both directions.
   ========================================================= */
.drawer{
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
html[dir="rtl"] .drawer{
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
.drawer.show,
html[dir="rtl"] .drawer.show{ transform: translateX(0) !important; }

/* Panel must sit above its own backdrop in every stacking context. */
.drawer{ z-index: 1000 !important; }
.drawer-backdrop{ z-index: 999 !important; }


/* =========================================================
   HOME HERO — LIVE TRADING CONSOLE
   Replaces the old decorative candlestick SVG. A light glass
   panel: live MT5 prices on top, the four house metrics
   (execution, spread, withdrawal fees, deposits) below.
   ========================================================= */
.hero-visual{ position: relative; display: flex; align-items: center; justify-content: center; }

.hv-console{
  position: relative;
  width: min(100%, 520px);
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,247,255,.92));
  border: 1px solid rgba(14,55,137,.10);
  box-shadow:
    0 40px 90px -30px rgba(10,25,70,.35),
    0 12px 30px -12px rgba(10,25,70,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
}

/* soft coloured aura behind the glass */
.hv-console .hv-aura{
  position: absolute; inset: -40% -20% auto -20%; height: 320px; z-index: -1;
  background:
    radial-gradient(closest-side, rgba(79,140,255,.30), transparent 70%) 20% 30%/60% 100% no-repeat,
    radial-gradient(closest-side, rgba(26,188,136,.26), transparent 70%) 85% 10%/55% 100% no-repeat,
    radial-gradient(closest-side, rgba(245,215,122,.28), transparent 70%) 60% 90%/55% 100% no-repeat;
  filter: blur(6px);
  animation: hvDrift 14s ease-in-out infinite alternate;
}
@keyframes hvDrift{ from{ transform: translate3d(-10px,-6px,0) scale(1); } to{ transform: translate3d(14px,10px,0) scale(1.06); } }

/* light sweep across the panel */
.hv-console .hv-scan{
  position: absolute; top: 0; bottom: 0; width: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: hvScan 6.5s ease-in-out infinite;
}
@keyframes hvScan{ 0%{ transform: translateX(-140%);} 55%,100%{ transform: translateX(320%);} }

.hv-console > *:not(.hv-aura):not(.hv-scan){ position: relative; z-index: 1; }

/* ---- header ---- */
.hv-head{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 18px; }
.hv-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12px; font-weight: 700; letter-spacing:.3px;
  color: var(--brand-2, #0e3789);
  background: rgba(26,188,136,.10);
  border: 1px solid rgba(26,188,136,.28);
  padding: 5px 11px; border-radius: 999px;
}
.hv-dot{ width:7px; height:7px; border-radius:50%; background:#1abc88; box-shadow:0 0 0 0 rgba(26,188,136,.55); animation: hvPulse 1.8s infinite; }
@keyframes hvPulse{ 70%{ box-shadow:0 0 0 8px rgba(26,188,136,0);} 100%{ box-shadow:0 0 0 0 rgba(26,188,136,0);} }
.hv-server{ font-size: 11.5px; font-weight:600; color: rgba(20,32,70,.5); display:inline-flex; align-items:center; gap:6px; }
.hv-server i{ font-size: 10px; opacity:.7; }

/* ---- metric tiles (content moved from the old band under Packages) ---- */
.hv-bento{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hv-tile{
  position:relative; overflow:hidden;
  padding: 20px 18px 20px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(14,55,137,.05), rgba(14,55,137,.02));
  border: 1px solid rgba(14,55,137,.09);
  display:flex; flex-direction:column; gap:2px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.hv-tile:hover{ transform: translateY(-3px); border-color: rgba(245,215,122,.5); background: linear-gradient(160deg, rgba(14,55,137,.07), rgba(245,215,122,.06)); }
.hv-ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background: linear-gradient(135deg,#f5d77a,#e0b33f); color:#3a2a00; font-size:15px;
  box-shadow: 0 8px 18px -6px rgba(224,179,63,.8);
}
.hv-v{ font-size: 30px; font-weight: 900; color: var(--brand-2, #0e3789); line-height:1; letter-spacing:-.6px; font-variant-numeric: tabular-nums; }
.hv-v small{ font-size: 15px; font-weight:800; opacity:.75; margin-inline-start:1px; }
.hv-l{ font-size: 12.5px; color: rgba(20,32,70,.62); font-weight:600; margin-top: 4px; }

/* little animated proof-of-life under each metric */
.hv-bar{ margin-top:10px; height:4px; border-radius:99px; background: rgba(14,55,137,.10); overflow:hidden; display:block; }
.hv-bar i{ display:block; height:100%; width:22%; border-radius:99px; background: linear-gradient(90deg,#4f8cff,#1abc88); animation: hvSweep 2.6s ease-in-out infinite; }
.hv-bar.fast i{ animation-duration: 1.4s; background: linear-gradient(90deg,#f5d77a,#1abc88); }
.hv-bar.zero i{ width:100%; animation:none; background: linear-gradient(90deg,#1abc88,#4f8cff); opacity:.75; }
@keyframes hvSweep{ 0%{ transform: translateX(-110%);} 100%{ transform: translateX(460%);} }

/* the spread tile: two bars squeezing toward 0.0 */
.hv-squeeze{ margin-top:10px; height:4px; position:relative; display:block; }
.hv-squeeze i{
  position:absolute; top:0; height:100%; width:44%; border-radius:99px;
  background: linear-gradient(90deg,#4f8cff,#0e3789);
  animation: hvSqueezeL 3s ease-in-out infinite alternate;
}
.hv-squeeze i:last-child{ right:0; background: linear-gradient(90deg,#1abc88,#0a8a5c); animation-name: hvSqueezeR; }
@keyframes hvSqueezeL{ from{ left:0; } to{ left:8%; } }
@keyframes hvSqueezeR{ from{ right:0; } to{ right:8%; } }

@media (prefers-reduced-motion: reduce){
  .hv-aura, .hv-scan, .hv-bar i, .hv-squeeze i, .hv-spark-line, .hv-dot{ animation: none !important; }
  .hv-spark-line{ stroke-dashoffset: 0; }
}

@media (max-width: 980px){
  .hv-console{ width: min(100%, 560px); margin: 0 auto; }
}
@media (max-width: 420px){
  .hv-console{ padding: 16px; border-radius: 20px; }
  .hv-v{ font-size: 24px; }
  .hv-tile{ padding: 16px 14px; }
}

/* =========================================================
   MOBILE DRAWER — authoritative open/closed state
   Lives in main.css because that file is the one served with a
   ?v=<filemtime> cache-buster, so this always reaches the browser.

   Why !important: index-modern-3d.css (right:-100%) and rtl.css load AFTER
   this file, and main.css's own `html[dir="rtl"] .drawer{transform:translateX(-100%)}`
   is more specific than `.drawer.show`. With a stale cached rtl.css the RTL
   drawer stayed translated off-screen — the backdrop dimmed the page but no
   panel appeared. These rules settle it in one place for both directions.
   ========================================================= */
.drawer{
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
}
html[dir="rtl"] .drawer{
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
}
.drawer.show,
html[dir="rtl"] .drawer.show{ transform: translateX(0) !important; }

/* Panel must sit above its own backdrop in every stacking context. */
.drawer{ z-index: 1000 !important; }
.drawer-backdrop{ z-index: 999 !important; }


/* =========================================================
   HOME — QUICK STATS BAND (sits under the Packages section)
   Four glass cards on a navy band: execution, min spread,
   withdrawal fees, deposits.
   ========================================================= */
.hstats-band{
  position: relative;
  padding: 46px 0;
  background: linear-gradient(135deg, #0b1f6b 0%, #0e3789 45%, #061240 100%);
  overflow: hidden;
}
.hstats-band::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.hstats{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hstat{
  text-align: center;
  padding: 24px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), background .3s, border-color .3s;
}
.hstat:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.10);
  border-color: rgba(245,215,122,.35);
}
.hstat-ico{
  width: 40px; height: 40px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(245,215,122,.14);
  border: 1px solid rgba(245,215,122,.30);
  color: #f5d77a;
  font-size: 15px;
}
.hstat-v{
  font-size: 28px; font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.hstat-v .gold{ color: #f5d77a; }
.hstat-l{
  margin-top: 9px;
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
  letter-spacing: .3px;
}

@media (max-width: 900px){
  .hstats{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hstats-band{ padding: 36px 0; }
}
@media (max-width: 420px){
  .hstat{ padding: 18px 12px; }
  .hstat-v{ font-size: 23px; }
  .hstat-ico{ width: 34px; height: 34px; margin-bottom: 10px; }
}


/* =========================================================
   OUR CERTIFICATES — real issuer logos instead of icon seals
   (VerifyMyTrade badge, The Financial Commission wordmark) so
   visitors recognise the bodies at a glance.
   ========================================================= */
.cert-logo{
  height: 112px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.cert-logo img{
  display: block;
  width: auto; height: auto;
  max-height: 112px; max-width: 100%;
  filter: drop-shadow(0 10px 18px rgba(14,55,137,.16));
  transition: transform .35s var(--ease);
}
/* the Financial Commission mark is a wide wordmark — cap its height so it
   carries the same visual weight as the square VMT shield */
.cert-logo.wide img{ max-height: 80px; max-width: 240px; }
.lic-card:hover .cert-logo img{ transform: scale(1.04); }
@media (max-width: 480px){
  .cert-logo{ height: 96px; }
  .cert-logo img{ max-height: 96px; }
  .cert-logo.wide img{ max-height: 68px; max-width: 210px; }
}
@media (prefers-reduced-motion: reduce){ .cert-logo img{ transition: none; } }