/* =========================================================
   STOCKS PAGE CSS
   File: /css/investment_service/stocks.css
========================================================= */
:root{
  --stk-bg:#070312;
  --stk-bg-2:#0b0417;
  --stk-card:#120824;
  --stk-card-2:#0d061c;
  --stk-border:rgba(255,255,255,.08);
  --stk-text:#f6f2ff;
  --stk-muted:#b9afd3;
  --stk-p1:#7C4FFF;
  --stk-p2:#9B7BFF;
  --stk-p3:#D6C8FF;
  --stk-green:#4ADE80;
  --stk-green-2:#22c55e;
  --stk-red:#FB7185;
  --stk-gold:#F4C15D;
  --stk-blue:#53b7ff;
  --stk-shadow:0 20px 60px rgba(0,0,0,.35);
  --stk-radius:28px;
}

/* =========================================================
   GLOBAL RESET / SAFETY
========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  max-width:100%;
 
}

body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(124,79,255,.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(83,183,255,.05), transparent 25%),
    linear-gradient(180deg,#070312 0%,#0a0417 100%);
  color:var(--stk-text);
}

img,
svg,
canvas,
video,
iframe{
  max-width:100%;
  height:auto;
  display:block;
}

.stk-hero,
.stk-why,
.stk-how,
.stk-risk{
  position:relative;
  overflow:hidden;
}

.stk-services{
  position:relative;
  overflow:hidden;
}

.stk-hero__inner,
.stk-why__inner,
.stk-how__inner,
.stk-services__inner,
.stk-risk__inner{
  width:min(1280px, calc(100% - 40px));
  margin:auto;
  position:relative;
  z-index:2;
  max-width:100%;
}

.stk-hero__bg,
.stk-why__bg,
.stk-how__bg,
.stk-services__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.stk-hero__grid,
.stk-why__grid,
.stk-how__grid,
.stk-services__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 95%);
  opacity:.22;
}

.stk-hero__blob,
.stk-why__blob,
.stk-how__blob,
.stk-services__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.18;
  max-width:100%;
}

.stk-line-green{
  color:var(--stk-green);
}

.up{ color:var(--stk-green); }
.down{ color:var(--stk-red); }

/* =========================================================
   HERO SECTION
========================================================= */
.stk-hero{
  padding:30px 0 80px;
  background:
    radial-gradient(circle at left top, rgba(124,79,255,.1), transparent 34%),
    radial-gradient(circle at right bottom, rgba(74,222,128,.05), transparent 28%),
    linear-gradient(180deg,#070312 0%,#0a0417 100%);
}

.stk-hero__blob--1{
  width:430px;
  height:430px;
  top:-130px;
  left:-90px;
  background:var(--stk-p1);
}
.stk-hero__blob--2{
  width:360px;
  height:360px;
  top:120px;
  right:-70px;
  background:var(--stk-blue);
}
.stk-hero__blob--3{
  width:290px;
  height:290px;
  bottom:-80px;
  left:42%;
  background:var(--stk-gold);
}

.stk-hero__candles{
  position:absolute;
  right:4%;
  top:18%;
  width:280px;
  max-width:100%;
  height:220px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  opacity:.18;
}

.stk-c{
  position:relative;
  width:10px;
  height:var(--h);
  border-radius:999px;
  margin-bottom:var(--b);
}
.stk-c::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:-18px;
  bottom:-18px;
  width:2px;
  opacity:.9;
}
.stk-c--g{
  background:var(--stk-green);
}
.stk-c--g::before{
  background:rgba(74,222,128,.9);
}
.stk-c--r{
  background:var(--stk-red);
}
.stk-c--r::before{
  background:rgba(251,113,133,.9);
}

.stk-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:48px;
  align-items:center;
}

.stk-hero__left,
.stk-hero__right{
  min-width:0;
}

.stk-hero__breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
  font-size:13px;
  color:var(--stk-muted);
}
.stk-hero__breadcrumb a{
  color:var(--stk-muted);
  text-decoration:none;
}
.stk-hero__breadcrumb span{
  color:var(--stk-p3);
}

.stk-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(124,79,255,.25);
  background:rgba(124,79,255,.12);
  color:#ebe4ff;
  font-size:13px;
  font-weight:800;
  margin-bottom:22px;
  max-width:100%;
}

.stk-hero__badge-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.stk-hero__badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--stk-green);
  box-shadow:0 0 0 6px rgba(74,222,128,.12);
}
.stk-hero__badge-sep{
  width:1px;
  height:14px;
  background:rgba(255,255,255,.16);
}

.stk-hero__heading{
  margin:0 0 18px;
  font-size:62px;
  line-height:1.03;
  font-weight:900;
  letter-spacing:-1.6px;
  word-break:break-word;
}
.stk-hero__heading em{
  font-style:normal;
  color:var(--stk-gold);
}

.stk-hero__sub{
  max-width:680px;
  color:var(--stk-muted);
  font-size:18px;
  line-height:1.78;
  margin:0 0 24px;
}

.stk-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}

.stk-hero__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:13px;
  font-weight:700;
  color:#f0eaff;
  max-width:100%;
}
.stk-hero__chip.green{ color:#dfffe9; }
.stk-hero__chip.purple{ color:#e8deff; }

.stk-hero__cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:28px;
}

.stk-hero__btn-primary,
.stk-hero__btn-secondary,
.stk-how__btn-primary,
.stk-how__btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 22px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
  transition:.28s ease;
  max-width:100%;
  text-align:center;
}

.stk-hero__btn-primary,
.stk-how__btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--stk-p1),#5c2dff);
  box-shadow:0 16px 40px rgba(92,45,255,.35);
}
.stk-hero__btn-primary:hover,
.stk-how__btn-primary:hover{
  transform:translateY(-2px);
}
.stk-hero__btn-secondary,
.stk-how__btn-secondary{
  color:#ede7ff;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
}
.stk-hero__btn-secondary:hover,
.stk-how__btn-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
}

.stk-hero__indices{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--stk-shadow);
  max-width:100%;
}

.stk-hero__index{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.stk-hero__index-name{
  font-size:12px;
  color:var(--stk-muted);
  font-weight:700;
  letter-spacing:.08em;
}
.stk-hero__index-val{
  font-size:18px;
  font-weight:900;
}
.stk-hero__index-chg{
  font-size:13px;
  font-weight:700;
}
.stk-hero__index-sep{
  width:1px;
  height:42px;
  background:rgba(255,255,255,.1);
}

/* right dashboard */
.stk-hero__right{
  position:relative;
  min-width:0;
}

.stk-hero__float{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,6,22,.82);
  backdrop-filter:blur(14px);
  box-shadow:var(--stk-shadow);
  max-width:calc(100% - 24px);
}
.stk-hero__float--tl{
  top:-12px;
  left:-18px;
}
.stk-hero__float--br{
  right:-12px;
  bottom:-16px;
}
.stk-hero__float-ico{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:18px;
  flex:0 0 46px;
}
.stk-hero__float-ico.green{
  color:var(--stk-green);
  background:rgba(74,222,128,.12);
}
.stk-hero__float-ico.purple{
  color:var(--stk-p3);
  background:rgba(124,79,255,.14);
}
.stk-hero__float-val{
  font-size:15px;
  font-weight:800;
}
.stk-hero__float-chg,
.stk-hero__float-sub{
  font-size:12px;
  color:var(--stk-muted);
  font-weight:700;
}

.stk-hero__dashboard{
  position:relative;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  padding:24px;
  box-shadow:var(--stk-shadow);
  width:100%;
  max-width:100%;
}

.stk-hero__dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.stk-hero__dash-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:800;
  color:#f3eeff;
}
.stk-hero__dash-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:#dfffe9;
}
.stk-hero__dash-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--stk-green);
}

.stk-hero__port{
  margin-bottom:22px;
}
.stk-hero__port-lbl{
  font-size:13px;
  color:var(--stk-muted);
  margin-bottom:8px;
}
.stk-hero__port-val{
  font-size:40px;
  font-weight:900;
  line-height:1;
  margin-bottom:10px;
  word-break:break-word;
}
.stk-hero__port-change{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  flex-wrap:wrap;
}
.stk-hero__port-change span{
  color:var(--stk-muted);
  font-weight:700;
}

.stk-hero__chart-wrap{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  margin-bottom:22px;
}
.stk-hero__chart-label-y{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:11px;
  color:var(--stk-muted);
  padding:8px 0;
}
.stk-hero__chart-area{
  border-radius:24px;
  padding:14px 14px 8px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
  min-width:0;
}
.stk-hero__svg{
  width:100%;
  height:190px;
  display:block;
}
.stk-hero__chart-x{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:var(--stk-muted);
  margin-top:8px;
  flex-wrap:wrap;
}

.stk-hero__holdings{
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:18px;
  width:100%;
  max-width:100%;
}
.stk-hero__hold-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.stk-hero__hold-head span:first-child{
  font-weight:800;
}
.stk-hero__hold-count{
  font-size:12px;
  color:var(--stk-muted);
}
.stk-hero__hold-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.05);
}
.stk-hero__hold-row:first-of-type{
  border-top:none;
}
.stk-hero__hold-ico{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 42px;
}
.stk-hero__hold-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.stk-hero__hold-name{
  font-size:14px;
  font-weight:800;
}
.stk-hero__hold-sector{
  font-size:12px;
  color:var(--stk-muted);
}
.stk-hero__hold-right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.stk-hero__hold-price{
  font-weight:800;
  font-size:14px;
}
.stk-hero__hold-chg{
  font-size:12px;
  font-weight:800;
}

.stk-hero__dash-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:20px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg, rgba(124,79,255,.18), rgba(74,222,128,.08));
  border:1px solid rgba(255,255,255,.08);
  width:100%;
  max-width:100%;
}
.stk-hero__dash-cta-main{
  font-size:15px;
  font-weight:900;
  margin-bottom:4px;
}
.stk-hero__dash-cta-sub{
  font-size:12px;
  color:var(--stk-muted);
}
.stk-hero__dash-cta-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  flex:0 0 42px;
}

/* =========================================================
   WHY SECTION
========================================================= */
.stk-why{
  padding:60px 0;
  background:
    radial-gradient(circle at right top, rgba(124,79,255,.07), transparent 32%),
    linear-gradient(180deg,#0a0417 0%,#090315 100%);
}

.stk-why__blob--1{
  width:420px;
  height:420px;
  top:-120px;
  right:-60px;
  background:var(--stk-p1);
}
.stk-why__blob--2{
  width:320px;
  height:320px;
  left:-70px;
  bottom:-80px;
  background:var(--stk-gold);
}

.stk-why__head,
.stk-how__head{
  text-align:center;
  max-width:900px;
  margin:0 auto 42px;
}

.stk-why__badge,
.stk-how__badge,
.stk-services__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(124,79,255,.12);
  border:1px solid rgba(124,79,255,.22);
  font-size:13px;
  font-weight:800;
  color:#e8ddff;
  margin-bottom:18px;
  max-width:100%;
}

.stk-why__title,
.stk-how__title,
.stk-services__title{
  font-size:46px;
  line-height:1.1;
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-1px;
  word-break:break-word;
}
.stk-why__title span,
.stk-how__title span,
.stk-services__title span{
  color:var(--stk-gold);
}
.stk-why__sub,
.stk-how__sub,
.stk-services__sub{
  color:var(--stk-muted);
  font-size:17px;
  line-height:1.8;
}

.stk-why__cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.stk-why__card{
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  box-shadow:var(--stk-shadow);
  width:100%;
  max-width:100%;
}

.stk-why__card-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.stk-why__icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:22px;
}
.stk-why__icon.green{
  background:rgba(74,222,128,.12);
  color:var(--stk-green);
}
.stk-why__icon.purple{
  background:rgba(124,79,255,.14);
  color:var(--stk-p3);
}
.stk-why__icon.gold{
  background:rgba(244,193,93,.14);
  color:var(--stk-gold);
}
.stk-why__icon.blue{
  background:rgba(83,183,255,.14);
  color:var(--stk-blue);
}

.stk-why__stat{
  text-align:right;
}
.stk-why__stat-val{
  display:block;
  font-size:24px;
  font-weight:900;
}
.stk-why__stat-lbl{
  display:block;
  font-size:12px;
  color:var(--stk-muted);
}

.stk-why__card-title{
  margin:0 0 10px;
  font-size:24px;
  font-weight:800;
}
.stk-why__card-text{
  margin:0 0 16px;
  color:var(--stk-muted);
  line-height:1.75;
  font-size:15px;
}

.stk-why__bar-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.stk-why__bar-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 46px;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:700;
}
.stk-why__bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.stk-why__bar-fill{
  height:100%;
  border-radius:999px;
}
.stk-why__bar-fill.green{ background:linear-gradient(90deg,var(--stk-green),#1fb868); }
.stk-why__bar-fill.gold{ background:linear-gradient(90deg,var(--stk-gold),#e6a828); }
.stk-why__bar-fill.purple{ background:linear-gradient(90deg,var(--stk-p1),#a280ff); }
.stk-why__bar-pct.green{ color:var(--stk-green); }
.stk-why__bar-pct.gold{ color:var(--stk-gold); }
.stk-why__bar-pct.purple{ color:var(--stk-p3); }

.stk-why__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.stk-why__tag{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px;
  font-weight:700;
  color:#f0eaff;
  max-width:100%;
}
.stk-why__tag.gold{ color:#ffeab8; }
.stk-why__tag.blue{ color:#d8efff; }

/* =========================================================
   HOW SECTION
========================================================= */
.stk-how{
  padding:60px 0;
  background:
    radial-gradient(circle at left top, rgba(83,183,255,.06), transparent 28%),
    linear-gradient(180deg,#090315 0%,#080313 100%);
}

.stk-how__blob--1{
  width:380px;
  height:380px;
  top:-100px;
  left:-60px;
  background:var(--stk-blue);
}
.stk-how__blob--2{
  width:360px;
  height:360px;
  bottom:-80px;
  right:-40px;
  background:var(--stk-p1);
}

.stk-how__steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  padding-top:36px;
}

.stk-how__connector{
  position:absolute;
  top:64px;
  left:10%;
  right:10%;
  height:2px;
  background:linear-gradient(90deg,rgba(124,79,255,.0),rgba(124,79,255,.28),rgba(74,222,128,.28),rgba(124,79,255,.0));
  z-index:0;
}

.stk-how__step{
  position:relative;
  z-index:1;
  padding-top:0;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.stk-how__step-num{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 0;
  font-size:15px;
  font-weight:900;
  background:linear-gradient(135deg,var(--stk-p1),#6032ff);
  box-shadow:0 10px 30px rgba(92,45,255,.28);
  position:relative;
  z-index:2;
  transform:translateY(-50%);
  margin-bottom:-28px;
}

.stk-how__step-card{
  flex:1;
  padding:52px 22px 24px;
  border-radius:28px;
  text-align:center;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  box-shadow:var(--stk-shadow);
  margin:0;
  width:100%;
  max-width:100%;
}

.stk-how__step-icon{
  width:70px;
  height:70px;
  border-radius:22px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  font-size:24px;
}
.stk-how__step-icon.purple{
  background:rgba(124,79,255,.14);
  color:var(--stk-p3);
}
.stk-how__step-icon.green{
  background:rgba(74,222,128,.12);
  color:var(--stk-green);
}
.stk-how__step-icon.gold{
  background:rgba(244,193,93,.14);
  color:var(--stk-gold);
}
.stk-how__step-icon.blue{
  background:rgba(83,183,255,.14);
  color:var(--stk-blue);
}
.stk-how__step-title{
  font-size:21px;
  font-weight:800;
  margin:0 0 10px;
}
.stk-how__step-text{
  font-size:15px;
  color:var(--stk-muted);
  line-height:1.75;
  margin:0 0 14px;
}
.stk-how__step-detail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:12px;
  color:#ede6ff;
  font-weight:700;
  max-width:100%;
}

.stk-how__bottom{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:50px;
  position:relative;
  z-index:3;
}

/* =========================================================
   SERVICES
========================================================= */
.stk-services{
  padding:60px 0;
  background:
    radial-gradient(circle at right top, rgba(124,79,255,.07), transparent 32%),
    radial-gradient(circle at left bottom, rgba(244,193,93,.05), transparent 28%),
    linear-gradient(180deg,#080313 0%,#090315 100%);
}

.stk-services__blob--1{
  width:420px;
  height:420px;
  top:-120px;
  right:-70px;
  background:var(--stk-p1);
}
.stk-services__blob--2{
  width:300px;
  height:300px;
  bottom:-80px;
  left:-60px;
  background:var(--stk-green);
}

.stk-services__inner{
  display:grid;
  grid-template-columns:minmax(340px,.92fr) minmax(0,1.08fr);
  gap:34px;
  align-items:start;
}

.stk-services__left,
.stk-services__right{
  min-width:0;
}

.stk-services__left{
  position:sticky;
  top:90px;
  align-self:start;
}

.stk-services__right{
  position:sticky;
  top:90px;
  height:calc(100vh - 120px);
  min-height:620px;
  align-self:start;
  min-width:0;
}

.stk-services__sub{
  margin-bottom:24px;
}

.stk-services__highlight{
  padding:24px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  box-shadow:var(--stk-shadow);
  width:100%;
  max-width:100%;
}

.stk-services__hl-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.stk-services__hl-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:rgba(124,79,255,.14);
  color:var(--stk-p3);
}
.stk-services__hl-title{
  font-size:22px;
  font-weight:800;
}
.stk-services__hl-sub{
  font-size:13px;
  color:var(--stk-muted);
}
.stk-services__hl-text{
  color:var(--stk-muted);
  line-height:1.8;
  font-size:15px;
  margin:0 0 18px;
}
.stk-services__hl-stats{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.stk-services__hl-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stk-services__hl-val{
  font-size:24px;
  font-weight:900;
}
.stk-services__hl-val.green{ color:var(--stk-green); }
.stk-services__hl-val.purple{ color:var(--stk-p3); }
.stk-services__hl-val.gold{ color:var(--stk-gold); }
.stk-services__hl-lbl{
  font-size:12px;
  color:var(--stk-muted);
}
.stk-services__hl-sep{
  width:1px;
  height:40px;
  background:rgba(255,255,255,.08);
}
.stk-services__hl-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  max-width:100%;
}

.stk-services__grid-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  padding-right:10px;
  padding-bottom:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(124,79,255,.55) rgba(255,255,255,.06);
  width:100%;
  max-width:100%;
}

.stk-services__grid-cards::-webkit-scrollbar{
  width:8px;
}
.stk-services__grid-cards::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}
.stk-services__grid-cards::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,79,255,.95), rgba(83,183,255,.9));
  border-radius:999px;
}
.stk-services__grid-cards::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(155,123,255,1), rgba(83,183,255,1));
}

.stk-services__card{
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  box-shadow:var(--stk-shadow);
  transition:.28s ease;
  height:fit-content;
  width:100%;
  max-width:100%;
}
.stk-services__card:hover{
  transform:translateY(-5px);
}
.stk-services__card-icon{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:22px;
  margin-bottom:16px;
}
.stk-services__card-icon.green{
  background:rgba(74,222,128,.12);
  color:var(--stk-green);
}
.stk-services__card-icon.purple{
  background:rgba(124,79,255,.14);
  color:var(--stk-p3);
}
.stk-services__card-icon.gold{
  background:rgba(244,193,93,.14);
  color:var(--stk-gold);
}
.stk-services__card-icon.blue{
  background:rgba(83,183,255,.14);
  color:var(--stk-blue);
}
.stk-services__card-title{
  font-size:21px;
  font-weight:800;
  margin:0 0 10px;
}
.stk-services__card-text{
  color:var(--stk-muted);
  font-size:15px;
  line-height:1.75;
  margin:0;
}

/* =========================================================
   RISK DISCLAIMER
========================================================= */
.stk-risk{
  padding:60px 0 80px;
  background:
    radial-gradient(circle at top left, rgba(244,193,93,.06), transparent 28%),
    linear-gradient(180deg,#090315 0%,#070312 100%);
}

.stk-risk__inner{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:26px;
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(180deg,#120824 0%,#0d061c 100%);
  box-shadow:var(--stk-shadow);
  width:100%;
  max-width:100%;
}

.stk-risk__icon-wrap{
  width:86px;
  height:86px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:rgba(244,193,93,.14);
  color:var(--stk-gold);
  font-size:34px;
}

.stk-risk__title{
  margin:0 0 12px;
  font-size:32px;
  font-weight:900;
}
.stk-risk__para{
  color:var(--stk-muted);
  line-height:1.85;
  font-size:15px;
  margin:0 0 18px;
}
.stk-risk__points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.stk-risk__point{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
}
.stk-risk__point i{
  color:var(--stk-gold);
  margin-top:3px;
  font-size:12px;
}
.stk-risk__point p{
  margin:0;
  color:var(--stk-muted);
  line-height:1.75;
  font-size:14px;
}
.stk-risk__badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.stk-risk__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  max-width:100%;
}
.stk-risk__badge.purple{ color:#eadfff; }
.stk-risk__badge.gold{ color:#ffe8b6; }
.stk-risk__badge.green{ color:#ddffea; }

/* =========================================================
   RESPONSIVE — 1180px
========================================================= */
@media (max-width:1180px){
  .stk-how__steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:36px;
  }

  .stk-how__connector{
    display:none;
  }

  .stk-risk__points{
    grid-template-columns:1fr;
  }

  .stk-services__inner{
    grid-template-columns:minmax(290px,.95fr) minmax(0,1.05fr);
    gap:24px;
  }

  .stk-services__left{
    top:70px;
  }

  .stk-services__right{
    top:70px;
    height:calc(100vh - 100px);
    min-height:560px;
  }

  .stk-services__grid-cards{
    gap:18px;
  }

  .stk-services__card{
    padding:22px;
  }
}

/* =========================================================
   RESPONSIVE — 1024px
========================================================= */
@media (max-width:1024px){
  .stk-hero__inner{
    gap:28px;
  }

  .stk-services__inner{
    grid-template-columns:1fr;
    gap:20px;
  }

  .stk-services__title{
    font-size:38px;
  }

  .stk-services__left,
  .stk-services__right{
    position:static;
    top:auto;
    height:auto;
    min-height:auto;
  }

  .stk-services__grid-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    height:auto;
    overflow:visible;
    padding-right:0;
  }
}

/* =========================================================
   RESPONSIVE — 860px
========================================================= */
@media (max-width:860px){
  .stk-hero,
  .stk-why,
  .stk-how,
  .stk-services,
  .stk-risk{
    padding:40px 0;
  }

  .stk-hero__inner,
  .stk-why__cards,
  .stk-services__inner,
  .stk-risk__inner{
    grid-template-columns:1fr;
  }

  .stk-how__steps{
    grid-template-columns:1fr;
    padding-top:36px;
    gap:32px;
  }

  .stk-hero__left,
  .stk-hero__right,
  .stk-why__head,
  .stk-how__head,
  .stk-services__left,
  .stk-services__right{
    text-align:center;
  }

  .stk-hero__badge,
  .stk-hero__chips,
  .stk-hero__cta-row,
  .stk-hero__indices,
  .stk-how__bottom,
  .stk-risk__badges,
  .stk-why__tags{
    justify-content:center;
  }

  .stk-hero__sub{
    margin-left:auto;
    margin-right:auto;
  }

  .stk-hero__heading{
    font-size:42px;
    letter-spacing:-1px;
  }

  .stk-why__title,
  .stk-how__title,
  .stk-services__title{
    font-size:34px;
  }

  .stk-hero__indices{
    align-items:center;
  }

  .stk-hero__index-sep{
    display:none;
  }

  .stk-hero__float{
    position:static;
    margin:0 auto 14px;
    width:100%;
    max-width:360px;
    justify-content:center;
    text-align:left;
  }

  .stk-hero__float--br{
    margin-top:14px;
  }

  .stk-hero__dashboard{
    margin-top:10px;
  }

  .stk-hero__dash-head,
  .stk-hero__hold-head,
  .stk-hero__dash-cta{
    justify-content:center;
    text-align:center;
  }

  .stk-hero__hold-row{
    grid-template-columns:1fr;
    text-align:center;
  }

  .stk-hero__hold-ico{
    margin:0 auto;
  }

  .stk-hero__hold-right{
    text-align:center;
  }

  .stk-how__step-num{
    margin:0 auto 0;
  }

  .stk-how__bottom{
    margin-top:40px;
  }

  .stk-services__grid-cards{
    grid-template-columns:1fr;
  }

  .stk-services__highlight,
  .stk-services__card,
  .stk-why__card,
  .stk-how__step-card{
    text-align:center;
  }

  .stk-services__hl-head,
  .stk-why__card-top{
    justify-content:center;
  }

  .stk-services__hl-stats{
    justify-content:center;
  }

  .stk-risk__inner{
    text-align:center;
  }

  .stk-risk__icon-wrap{
    margin:0 auto;
  }

  .stk-risk__point{
    text-align:left;
  }
}

/* =========================================================
   RESPONSIVE — 560px
========================================================= */
@media (max-width:560px){
  .stk-hero__inner,
  .stk-why__inner,
  .stk-how__inner,
  .stk-services__inner,
  .stk-risk__inner{
    width:min(100% - 24px, 1280px);
    grid-template-columns:1fr;
  }

  .stk-hero__heading{
    font-size:34px;
    line-height:1.12;
  }

  .stk-hero__sub,
  .stk-why__sub,
  .stk-how__sub,
  .stk-services__sub{
    font-size:15px;
  }

  .stk-hero__badge{
    width:100%;
    justify-content:center;
    text-align:center;
    flex-wrap:wrap;
  }

  .stk-hero__chips{
    gap:10px;
  }

  .stk-hero__chip{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .stk-hero__cta-row,
  .stk-how__bottom{
    flex-direction:column;
    margin-top:32px;
  }

  .stk-hero__btn-primary,
  .stk-hero__btn-secondary,
  .stk-how__btn-primary,
  .stk-how__btn-secondary{
    width:100%;
  }

  .stk-hero__indices{
    padding:16px;
  }

  .stk-hero__index{
    width:100%;
    align-items:center;
    text-align:center;
  }

  .stk-hero__port-val{
    font-size:32px;
  }

  .stk-hero__chart-wrap{
    grid-template-columns:1fr;
  }

  .stk-hero__chart-label-y{
    display:none;
  }

  .stk-hero__chart-area{
    padding:12px;
  }

  .stk-hero__svg{
    height:170px;
  }

  .stk-hero__dash-cta{
    flex-direction:column;
  }

  .stk-services__left,
  .stk-services__right{
    position:static;
    top:auto;
    height:auto;
    min-height:auto;
  }

  .stk-services__grid-cards{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
    padding-right:0;
  }

  .stk-services__highlight{
    padding:20px 16px;
  }

  .stk-services__card,
  .stk-why__card,
  .stk-how__step-card,
  .stk-risk__inner,
  .stk-hero__dashboard{
    padding-left:16px;
    padding-right:16px;
  }

  .stk-services__hl-stats{
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .stk-services__hl-sep{
    display:none;
  }

  .stk-risk__title{
    font-size:26px;
  }

  .stk-risk__points{
    grid-template-columns:1fr;
  }

  .stk-how__steps{
    gap:28px;
    padding-top:36px;
  }

  .stk-how__step-card{
    padding:52px 18px 22px;
  }

  .stk-how__btn-primary,
  .stk-how__btn-secondary{
    width:100%;
    justify-content:center;
  }

  .stk-why__bar-row{
    grid-template-columns:42px minmax(0,1fr) 38px;
    gap:8px;
  }
}

/* =========================================================
   EXTRA SMALL DEVICES — 420px
========================================================= */
@media (max-width:420px){
  .stk-hero{
    padding:24px 0 36px;
  }

  .stk-hero__heading{
    font-size:30px;
  }

  .stk-why__title,
  .stk-how__title,
  .stk-services__title{
    font-size:28px;
  }

  .stk-hero__dashboard,
  .stk-why__card,
  .stk-how__step-card,
  .stk-services__card,
  .stk-services__highlight,
  .stk-risk__inner{
    border-radius:22px;
  }

  .stk-hero__float{
    max-width:100%;
    padding:12px 14px;
  }

  .stk-hero__hold-row{
    gap:8px;
  }

  .stk-hero__dash-cta-main{
    font-size:14px;
  }

  .stk-hero__dash-cta-sub{
    font-size:11px;
  }
}