:root {
  --bg: #04040b;
  --bg-soft: #080713;
  --text: #f8f7ff;
  --muted: #9f9aac;
  --line: rgba(140, 95, 255, .22);
  --purple: #7b2cff;
  --purple-2: #a84dff;
  --pink: #f265cd;
  --green: #22efaa;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 86% 13%, rgba(89, 18, 219, .36), transparent 25%),
    radial-gradient(circle at 75% 36%, rgba(83, 26, 210, .18), transparent 30%),
    linear-gradient(180deg, #03030a 0%, #05050d 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(var(--container), calc(100% - 56px)); margin: 0 auto; }
.page-shell { min-height: 100vh; position: relative; }

.site-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 30;
}

.brand { display: inline-flex; align-items: center; gap: 14px; min-width: max-content; }
.brand-mark {
  font-size: 28px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -2px;
  background: linear-gradient(100deg, #7447ff, #c657ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(139, 72, 255, .28);
}
.brand-divider { width: 1px; height: 22px; background: rgba(255,255,255,.38); }
.brand-sub { font-size: 11px; font-weight: 750; letter-spacing: 1.7px; color: #d6d2e4; }

.desktop-nav { display: flex; gap: 36px; align-items: center; margin-left: auto; }
.desktop-nav a { font-size: 13px; font-weight: 650; color: #c7c1d4; position: relative; transition: .25s ease; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transition: .25s ease;
}
.desktop-nav a:hover, .desktop-nav a.active { color: #f28fe2; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.language-switcher { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #7f7a91; }
.lang-btn { border: 0; padding: 4px; background: none; color: #777085; cursor: pointer; font-weight: 800; }
.lang-btn.active { color: #f0eaff; }
.login-btn {
  border: 1px solid rgba(122, 75, 255, .43);
  border-radius: 18px;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 800;
  color: #ded8e9;
  transition: .25s ease;
}
.login-btn:hover { border-color: #9d61ff; box-shadow: 0 0 22px rgba(122, 44, 255, .18); }
.menu-toggle { display: none; width: 42px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.menu-toggle span { width: 18px; height: 2px; background: white; display: block; margin: 4px auto; }
.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 620px;
  padding-top: 88px;
  padding-bottom: 34px;
  display: grid;
  grid-template-columns: .92fr 1.25fr;
  grid-template-rows: 1fr auto;
  column-gap: 48px;
}

.hero-copy { position: relative; z-index: 8; padding-top: 8px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(147, 89, 255, .22);
  border-radius: 999px;
  background: rgba(86, 44, 142, .08);
  color: #c3bbd2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: inset 0 0 20px rgba(128, 72, 255, .04);
}
.spark { color: #e5d7ff; }

h1 { margin: 20px 0 14px; font-size: clamp(50px, 4.2vw, 72px); line-height: .98; letter-spacing: -3.2px; font-weight: 950; }
h1 span { display: block; }
.gradient-text {
  margin-top: 8px;
  background: linear-gradient(93deg, #7541ff 0%, #bd54ee 54%, #f479c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 15px rgba(154, 67, 255, .18));
}
.hero-description { max-width: 485px; margin: 0; font-size: 14px; line-height: 1.65; color: #a39dad; }
.hero-cta { margin-top: 26px; display: flex; gap: 16px; flex-wrap: wrap; }
.primary-btn, .secondary-btn {
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .15px;
  transition: .25s ease;
}
.primary-btn { min-width: 208px; background: linear-gradient(105deg, #b14cff, #6e23ff); box-shadow: 0 0 26px rgba(117, 45, 255, .30); }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(117, 45, 255, .38); }
.arrow { font-size: 19px; }
.secondary-btn { min-width: 170px; color: #d4d0dd; border: 1px solid rgba(128, 84, 255, .33); background: rgba(9,8,19,.55); }
.secondary-btn:hover { border-color: rgba(172, 113, 255, .72); transform: translateY(-2px); }
.play-icon { font-size: 16px; }

.hero-visual { min-height: 380px; position: relative; z-index: 5; }
.planet-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  right: -210px;
  top: 26px;
  border: 1px solid rgba(131, 70, 255, .24);
  background:
    radial-gradient(circle at 36% 38%, rgba(116,44,255,.24), transparent 35%),
    repeating-linear-gradient(174deg, transparent 0 10px, rgba(144, 93, 255, .08) 11px 12px),
    radial-gradient(circle at 35% 45%, rgba(112, 32, 255, .22), rgba(18, 9, 55, .22) 45%, transparent 72%);
  box-shadow: -22px 0 70px rgba(112, 45, 255, .20);
  opacity: .85;
}
.orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb-one { width: 160px; height: 160px; right: -15px; bottom: 70px; background: rgba(125, 47, 255, .07); box-shadow: 0 0 70px rgba(119,47,255,.28); }
.orb-two { width: 80px; height: 80px; right: 138px; top: 5px; background: rgba(207,64,255,.06); box-shadow: 0 0 55px rgba(178,54,255,.18); }

.chart-card {
  position: absolute;
  width: min(590px, 85%);
  height: 315px;
  right: 78px;
  top: 10px;
  border: 1px solid rgba(139, 79, 255, .30);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(8,9,18,.97), rgba(8,4,22,.95));
  box-shadow: 0 22px 60px rgba(0,0,0,.38), inset 0 0 45px rgba(100,40,190,.035);
  transform: perspective(1200px) rotateY(-7deg) rotateZ(-2.2deg);
  transform-origin: center;
  padding: 17px 20px 13px;
  overflow: hidden;
}
.chart-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 55%, rgba(120, 48, 255, .04) 70%, transparent 100%); pointer-events: none; }
.chart-topbar, .symbol-row, .time-row, .period-row { position: relative; z-index: 2; display: flex; align-items: center; }
.chart-topbar { justify-content: space-between; }
.exness-wordmark { color: #dbf000; font-size: 24px; font-weight: 850; font-style: italic; }
.balance { margin-left: auto; margin-right: 25px; display: grid; }
.balance small { font-size: 8px; color: #5e586a; }
.balance strong { color: #59e26f; font-size: 13px; }
.real-pill { border-radius: 8px; padding: 6px 11px; font-size: 9px; color: #9b93ad; background: rgba(130, 100, 160, .12); }
.symbol-row { margin-top: 18px; gap: 8px; font-size: 15px; }
.gold-chip { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #fff3a2; background: linear-gradient(145deg, #d7a100, #a87500); box-shadow: 0 0 14px rgba(255,185,0,.16); }

.chart-area { height: 185px; margin-top: 6px; position: relative; overflow: hidden; border-radius: 10px; }
.grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 100% 42px, 70px 100%; }
.chart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.price-line { fill: none; stroke: url(#lineGradient); stroke-width: 5; filter: url(#glow); stroke-linecap: round; }
.trade-tag { position: absolute; left: 24px; top: 93px; padding: 5px 8px; border-radius: 5px; font-size: 9px; font-weight: 800; transform: rotate(-1deg); }
.buy { color: #ceffe8; background: #16ad63; }
.price-tag { position: absolute; right: 12px; top: 55px; font-size: 8px; color: #eee6ff; padding: 4px 7px; background: #7f35ff; }
.candle { position: absolute; width: 4px; background: #c258ff; border-radius: 2px; box-shadow: 0 0 8px rgba(188,80,255,.38); }
.candle::before { content: ""; position: absolute; width: 1px; background: inherit; left: 50%; top: -8px; bottom: -9px; }
.c1{left:55%;top:90px;height:35px}.c2{left:59%;top:76px;height:48px}.c3{left:63%;top:86px;height:27px}.c4{left:68%;top:68px;height:41px}.c5{left:72%;top:78px;height:26px}.c6{left:77%;top:62px;height:37px}.c7{left:82%;top:43px;height:48px}.c8{left:87%;top:57px;height:23px}.c9{left:91%;top:25px;height:54px}
.time-row { justify-content: space-between; color: #4e495b; font-size: 8px; }
.period-row { gap: 20px; margin-top: 10px; color: #625a73; font-size: 8px; }

.cashback-card {
  position: absolute;
  right: 2px;
  top: 105px;
  width: 158px;
  height: 215px;
  z-index: 8;
  border: 1px solid rgba(166, 80, 255, .48);
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(57, 18, 115, .88), rgba(17, 8, 53, .96));
  box-shadow: 0 0 38px rgba(109, 45, 255, .25), inset 0 0 45px rgba(145, 48, 255, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(1deg);
}
.cash-icon {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  border: 6px solid #b84aff; color: #ffd7ff; font-size: 37px; font-weight: 700;
  box-shadow: 0 0 22px rgba(184,74,255,.75), inset 0 0 22px rgba(170,64,255,.30);
  position: relative;
}
.cash-icon::before, .cash-icon::after { content: "↻"; position: absolute; color: #8245ff; font-size: 27px; font-weight: 900; }
.cash-icon::before { left: -21px; top: 8px; transform: rotate(15deg); }
.cash-icon::after { right: -21px; bottom: 8px; transform: rotate(195deg); }
.cash-label { margin-top: 21px; font-size: 9px; font-weight: 850; color: #c8bddb; }
.cash-value { margin-top: 6px; color: #37f0ad; font-size: 25px; font-weight: 900; text-shadow: 0 0 16px rgba(55,240,173,.2); }
.cash-unit { margin-top: 5px; font-size: 10px; color: #d8d1e5; }
.light-trail { position: absolute; left: 10%; right: 3%; bottom: 80px; height: 3px; z-index: 7; transform: rotate(-6deg); background: linear-gradient(90deg, transparent, #7b2cff 30%, #e25aff 70%, transparent); border-radius: 50%; filter: blur(.2px); box-shadow: 0 0 16px #b447ff, 0 0 38px rgba(133,53,255,.6); }

.stats-panel {
  grid-column: 1 / -1;
  margin-top: 34px;
  border: 1px solid rgba(102, 63, 223, .25);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(27, 12, 67, .34), rgba(7, 7, 19, .74), rgba(31, 13, 71, .25));
  box-shadow: inset 0 0 45px rgba(87, 32, 182, .03);
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 8px;
}
.stat-item { display: flex; align-items: center; gap: 15px; padding: 0 28px; border-right: 1px solid rgba(133, 75, 255, .12); }
.stat-item:last-child { border-right: 0; }
.stat-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; display: grid; place-items: center; color: #c271ff; font-size: 23px; background: radial-gradient(circle, rgba(135,53,255,.22), rgba(81,37,166,.10)); box-shadow: 0 0 20px rgba(117,45,255,.12); }
.stat-item strong { display: block; font-size: 17px; letter-spacing: -.3px; }
.stat-item span { display: block; margin-top: 5px; color: #8f899d; font-size: 10px; }

@media (max-width: 1050px) {
  .desktop-nav { gap: 20px; }
  .desktop-nav a { font-size: 12px; }
  .hero { grid-template-columns: 1fr 1fr; column-gap: 22px; }
  h1 { font-size: 52px; }
  .chart-card { right: 42px; width: 94%; }
  .cashback-card { right: -10px; }
  .stat-item { padding: 0 17px; }
}

@media (max-width: 900px) {
  .desktop-nav, .login-btn { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu {
    position: fixed;
    z-index: 25;
    top: 72px;
    left: 22px;
    right: 22px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(135, 75, 255, .25);
    background: rgba(7, 6, 18, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0,0,0,.4);
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu a { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.06); color: #d4cede; }
  .mobile-menu a:last-child { border-bottom: 0; }
  .hero { grid-template-columns: 1fr; padding-top: 50px; }
  .hero-copy { text-align: center; }
  .hero-description { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-visual { min-height: 430px; margin-top: 44px; }
  .chart-card { left: 50%; right: auto; transform: translateX(-50%) perspective(1200px) rotateY(-5deg) rotateZ(-1.5deg); width: min(650px, 92%); }
  .cashback-card { right: 5%; }
  .stats-panel { grid-template-columns: 1fr 1fr; }
  .stat-item { min-height: 72px; border-bottom: 1px solid rgba(133, 75, 255, .12); }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: 0; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 30px, var(--container)); }
  .site-header { min-height: 68px; }
  .brand-sub, .brand-divider { display: none; }
  .brand-mark { font-size: 25px; }
  .hero { padding-top: 34px; }
  h1 { font-size: clamp(39px, 12.5vw, 52px); letter-spacing: -2.4px; }
  .hero-description { font-size: 13px; }
  .primary-btn, .secondary-btn { width: 100%; }
  .hero-visual { min-height: 360px; margin-top: 28px; }
  .chart-card { height: 255px; padding: 13px; top: 18px; }
  .chart-area { height: 140px; }
  .exness-wordmark { font-size: 18px; }
  .balance { margin-right: 8px; }
  .symbol-row { margin-top: 10px; }
  .cashback-card { width: 118px; height: 172px; right: 0; top: 110px; }
  .cash-icon { width: 58px; height: 58px; font-size: 27px; border-width: 4px; }
  .cash-icon::before, .cash-icon::after { font-size: 19px; }
  .cash-label { font-size: 7px; margin-top: 12px; }
  .cash-value { font-size: 19px; }
  .cash-unit { font-size: 8px; }
  .light-trail { bottom: 72px; }
  .stats-panel { grid-template-columns: 1fr; margin-top: 18px; }
  .stat-item { border-right: 0; border-bottom: 1px solid rgba(133,75,255,.12) !important; padding: 16px 18px; }
  .stat-item:last-child { border-bottom: 0 !important; }
}

/* =========================================================
   SECTION 2–4
   Same dark purple visual language as Section 1
   ========================================================= */
.landing-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 28%, rgba(94, 25, 217, .16), transparent 29%),
    radial-gradient(circle at 88% 68%, rgba(125, 38, 255, .15), transparent 31%),
    linear-gradient(180deg, rgba(3,3,10,.98), rgba(5,4,14,.98));
  border-top: 1px solid rgba(124, 75, 255, .07);
}
.section-inner { position: relative; z-index: 2; padding: 35px 0; }
.section-glow { position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; filter: blur(70px); opacity: .22; pointer-events: none; }
.section-glow-left { left: -260px; top: 20%; background: #6a20ff; }
.section-glow-right { right: -280px; bottom: 5%; background: #a629ff; }
.calculator-glow { left: 42%; top: 15%; transform: translateX(-50%); background: #5421ff; opacity: .16; }
.section-heading { max-width: 820px; margin: 0 auto 35px; text-align: center; }
.section-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #bb89ff; font-size: 12px; font-weight: 850; letter-spacing: 1.7px; }
.section-kicker::before, .section-kicker::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #9b51ff); }
.section-kicker::after { transform: rotate(180deg); }
.section-heading h2 { margin: 0; color: #fff; font-size: clamp(36px, 5vw, 66px); line-height: .98; letter-spacing: -3px; font-weight: 950; text-transform: uppercase; }
.section-heading .block { display: block; margin-top: 9px; }
.section-heading p { max-width: 660px; margin: 20px auto 0; color: #9690a5; font-size: 15px; line-height: 1.7; }
.accent-text { color: #d178ff; }

/* Section 2 */
.cashback-flow-section { min-height: 900px; }
.flow-heading { margin-bottom: 48px; }
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.flow-card {
  position: relative;
  min-height: 410px;
  padding: 31px 25px 25px 25px;
  border: 1px solid rgba(133, 76, 255, .24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20, 13, 44, .74), rgba(7, 7, 18, .78));
  box-shadow: inset 0 0 42px rgba(121, 52, 255, .025), 0 15px 45px rgba(0,0,0,.14);
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.flow-card:hover { transform: translateY(-7px); border-color: rgba(184, 93, 255, .55); box-shadow: 0 18px 55px rgba(82, 24, 174, .18); }
.featured-flow-card { background: linear-gradient(180deg, rgba(51, 19, 91, .7), rgba(10, 7, 25, .84)); }
.step-number { position: absolute; left: 50%; top: -23px; transform: translateX(-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(196, 104, 255, .58); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bc63ff, #7029e7 65%, #351171); color: white; font-size: 16px; font-weight: 950; box-shadow: 0 0 24px rgba(152, 68, 255, .35); }
.flow-card h3 { margin: 23px 0 10px; color: #fff; font-size: 17px; line-height: 1.25; letter-spacing: -.4px; }
.flow-card p { margin: 0 auto; color: #9690a3; font-size: 13px; line-height: 1.65; }
.flow-icon { height: 235px; display: grid; place-items: center; position: relative; }
.flow-arrow { position: absolute; z-index: 5; right: -31px; top: 46%; color: #a84dff; font-size: 34px; font-weight: 300; text-shadow: 0 0 18px rgba(168,77,255,.65); }

.trade-screen { width: 100%; max-width: 205px; margin: 0 auto; height: 182px; margin-top: 35px; padding: 15px; border: 1px solid rgba(157, 93, 255, .35); border-radius: 13px; background: #080712; box-shadow: 0 12px 35px rgba(0,0,0,.38), 0 0 24px rgba(116,49,255,.08); }
.mini-screen-head { display: flex; justify-content: space-between; align-items: center; color: #dfd9ec; font-size: 11px; font-weight: 800; }
.mini-screen-head i { width: 7px; height: 7px; border-radius: 50%; background: #36e3aa; box-shadow: 0 0 9px #36e3aa; }
.mini-chart { height: 92px; margin: 13px 0 9px; display: flex; align-items: end; justify-content: space-around; border-bottom: 1px solid rgba(255,255,255,.06); background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.025) 23px); }
.mini-chart .bar { width: 7px; border-radius: 3px 3px 0 0; background: linear-gradient(#ef6bd9, #7f36ff); box-shadow: 0 0 8px rgba(167,63,255,.23); }
.mini-chart .b1{height:22%}.mini-chart .b2{height:34%}.mini-chart .b3{height:29%}.mini-chart .b4{height:53%}.mini-chart .b5{height:46%}.mini-chart .b6{height:72%}.mini-chart .b7{height:88%}
.mini-trade-actions { display: flex; gap: 7px; }
.mini-trade-actions b { flex: 1; padding: 5px 0; border-radius: 5px; font-size: 8px; background: rgba(29,181,116,.18); color: #45e6a8; border: 1px solid rgba(69,230,168,.14); }
.mini-trade-actions b:last-child { color: #f2689b; background: rgba(242,104,155,.12); border-color: rgba(242,104,155,.15); }

.receipt-icon { height: 235px; }
.receipt-paper { width: 144px; height: 190px; position: relative; padding: 23px 14px; background: linear-gradient(180deg,#f5f2ff,#d9d4e3); color: #1b1720; clip-path: polygon(0 0,100% 0,100% 94%,91% 100%,82% 94%,72% 100%,62% 94%,52% 100%,42% 94%,32% 100%,22% 94%,11% 100%,0 94%); box-shadow: 0 15px 30px rgba(0,0,0,.25); }
.receipt-paper strong, .receipt-paper span { display: block; }
.receipt-paper strong { font-size: 19px; margin-bottom: 8px; }
.receipt-paper span { font-size: 11px; font-weight: 800; border-top: 1px solid #bbb6c4; padding-top: 8px; }
.receipt-paper b { display: block; margin: 18px 0 17px; color: #a93ce8; font-size: 41px; }
.receipt-paper i { display: block; width: 75%; height: 4px; margin: 8px auto; border-radius: 4px; background: #bcb7c5; }

.rebate-icon { height: 235px; }
.rebate-ring { width: 154px; height: 154px; position: relative; border: 10px solid #a949ff; border-right-color: transparent; border-radius: 50%; display: grid; place-items: center; transform: rotate(-28deg); box-shadow: 0 0 26px rgba(169,73,255,.25), inset 0 0 22px rgba(169,73,255,.07); }
.rebate-ring::after { content: "➤"; position: absolute; right: -16px; top: 15px; color: #cc76ff; font-size: 30px; transform: rotate(36deg); }
.rebate-ring span { transform: rotate(28deg); color: #e097ff; font-size: 68px; font-weight: 900; text-shadow: 0 0 24px rgba(212,114,255,.35); }

.phone-icon { height: 235px; }
.phone-shell { width: 132px; height: 218px; padding: 27px 13px 14px; border: 2px solid #2d2935; border-radius: 24px; background: linear-gradient(#12111a,#07070c); box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 24px rgba(109,53,255,.08); text-align: left; }
.phone-notch { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); width: 44px; height: 6px; border-radius: 10px; background: #28252f; }
.phone-shell small { display: block; color: #c7c0d2; font-size: 9px; margin-bottom: 18px; }
.phone-shell span { display: block; color: #777080; font-size: 9px; }
.phone-shell strong { display: block; color: #34efa9; font-size: 22px; margin: 5px 0 18px; }
.phone-shell em { display: block; font-size: 8px; color: #8e8797; font-style: normal; }
.phone-check { width: 37px; height: 37px; margin: 15px auto 0; display: grid; place-items: center; border-radius: 50%; background: rgba(52,239,169,.13); border: 1px solid rgba(52,239,169,.22); color: #34efa9; font-size: 20px; }
.flow-bottom { margin-top: 22px; text-align: center; }
.flow-up-to { display: block; margin-bottom: -5px; color: #dfd9ea; font-size: 19px; font-weight: 900; font-style: italic; }
.flow-bottom > strong { display: block; font-size: clamp(72px, 10vw, 132px); line-height: .95; letter-spacing: -7px; background: linear-gradient(95deg,#7e31ff,#cf5ff2 55%,#f270c6); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 44px rgba(143,54,255,.12); }
.flow-bottom > strong span { font-size: .64em; letter-spacing: -4px; }
.flow-bottom p { display: inline-block; margin: 24px 0 0; padding: 12px 28px; border: 1px solid rgba(132,73,255,.3); border-radius: 12px; color: #ddd6e9; font-weight: 750; font-size: 14px; }
.flow-bottom p b { margin: 0 7px; color: #6e667a; }

/* Section 3 */
.calculator-section { background: radial-gradient(circle at 50% 44%, rgba(84,27,175,.13), transparent 39%), linear-gradient(180deg,#04040b,#060510); }
.calculator-heading h2 { font-size: clamp(34px, 4.2vw, 45px); }
.cashback-calculator { display: grid; grid-template-columns: 1.02fr .98fr; border: 1px solid rgba(126, 70, 255, .32); border-radius: 26px; overflow: hidden; background: rgba(9,7,22,.82); box-shadow: 0 28px 90px rgba(0,0,0,.28), inset 0 0 55px rgba(108,42,222,.025); }
.calculator-controls, .calculator-results { padding: 42px 40px; }
.calculator-controls { border-right: 1px solid rgba(133,78,255,.16); }
.field-label { display: block; margin-bottom: 11px; color: #d5cede; font-size: 13px; font-weight: 800; }
.broker-select { width: 100%; min-height: 70px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 13px; padding: 10px 16px; border: 1px solid rgba(156,95,255,.32); border-radius: 14px; background: #070711; color: #fff; text-align: left; cursor: default; }
.broker-logo { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#fff000,#f1bd00); color: #1d1b04; font-weight: 950; letter-spacing: -1px; }
.broker-select strong { font-size: 15px; }
.broker-rate { color: #a65cff; font-size: 11px; font-weight: 800; }
.chevron { color: #716b7a; font-size: 18px; }
.calculator-controls .field-label:nth-of-type(2) { margin-top: 26px; }
.lot-display { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border: 1px solid rgba(145,90,255,.22); border-radius: 14px; background: #070710; }
.lot-display strong { font-size: 23px; }
.lot-display span { color: #87818f; font-size: 13px; font-weight: 800; }
.range-wrap { margin-top: 27px; }
#lotRange { width: 100%; height: 7px; appearance: none; border-radius: 999px; outline: none; background: linear-gradient(90deg,#792eff 0%,#bf55ff 55%,#f168c6 100%); cursor: pointer; }
#lotRange::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #d87aff; border: 4px solid #130a22; box-shadow: 0 0 0 3px rgba(205,104,255,.4), 0 0 22px rgba(200,82,255,.55); }
#lotRange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d87aff; border: 4px solid #130a22; box-shadow: 0 0 0 3px rgba(205,104,255,.4); }
.range-labels { display: flex; justify-content: space-between; margin-top: 12px; color: #615c69; font-size: 10px; }
.quick-lots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 22px; }
.quick-lots button { min-height: 42px; border: 1px solid rgba(139,81,255,.22); border-radius: 10px; background: rgba(255,255,255,.025); color: #b8b1c2; font-size: 12px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.quick-lots button:hover, .quick-lots button.active { color: #fff; border-color: rgba(192,94,255,.55); background: rgba(139,54,255,.13); box-shadow: 0 0 18px rgba(116,43,255,.08); }
.calculator-note { margin: 20px 0 0; color: #625c6b; font-size: 10px; line-height: 1.6; }
.rebate-progress-head { display: flex; align-items: center; justify-content: space-between; color: #9b94a6; font-size: 12px; font-weight: 750; }
.rebate-progress-head strong { color: #d276ff; font-size: 16px; }
.rebate-progress { height: 10px; margin: 16px 0 28px; border-radius: 999px; background: #17121f; overflow: hidden; }
.rebate-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#742cff,#b54fff,#f267c5); box-shadow: 0 0 20px rgba(189,72,255,.25); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.result-card { min-height: 108px; padding: 20px; border: 1px solid rgba(135,79,255,.17); border-radius: 15px; background: rgba(255,255,255,.025); }
.result-card span { display: block; min-height: 31px; color: #8a8494; font-size: 10px; line-height: 1.45; }
.result-card strong { display: block; margin-top: 7px; color: #f4f1f8; font-size: clamp(16px, 1.8vw, 23px); }
.accent-result { border-color: rgba(187,80,255,.34); background: linear-gradient(135deg, rgba(113,38,213,.15), rgba(239,94,200,.055)); }
.accent-result strong { color: #d878ff; }
.missed-card { min-height: 190px; margin-top: 18px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(229,94,194,.27); border-radius: 17px; background: radial-gradient(circle at 50% 35%, rgba(114,37,196,.14), transparent 56%), rgba(18,7,26,.52); }
.period-toggle { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.period-toggle button { border: 0; padding: 8px 23px; border-radius: 8px; background: transparent; color: #817a87; font-size: 11px; font-weight: 800; cursor: pointer; }
.period-toggle button.active { color: #fff; background: linear-gradient(135deg, rgba(129,46,255,.55), rgba(222,83,194,.45)); box-shadow: 0 0 16px rgba(147,48,255,.13); }
.missed-caption { margin-top: 18px; color: #b4acbb; font-size: 11px; }
.missed-card > strong { margin-top: 6px; color: #ef76cf; font-size: clamp(36px,4vw,55px); letter-spacing: -2px; }
.calculator-cta { width: 100%; margin-top: 18px; min-height: 58px; }

/* Section 4 */
.process-heading h2 { font-size: clamp(38px, 4.7vw, 60px); }
.account-tabs { width: min(620px, 100%); margin: 0 auto 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 7px; border: 1px solid rgba(133,78,255,.25); border-radius: 14px; background: rgba(6,5,16,.86); }
.account-tab { min-height: 49px; border: 0; border-radius: 10px; background: transparent; color: #afa8b9; font-weight: 800; font-size: 12px; cursor: pointer; transition: .2s ease; }
.account-tab.active { color: white; background: linear-gradient(135deg, rgba(104,49,224,.72), rgba(130,52,230,.45)); box-shadow: inset 0 0 0 1px rgba(197,131,255,.11), 0 0 22px rgba(102,46,219,.14); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.process-card { min-height: 270px; position: relative; padding: 20px 27px 31px; border: 1px solid rgba(130,76,255,.22); border-radius: 20px; background: linear-gradient(145deg,rgba(19,13,41,.75),rgba(7,7,17,.79)); overflow: visible; }
.process-number { position: absolute; top: 25px; right: 16px; font-size: 35px; line-height: 1; font-weight: 950; letter-spacing: 1px; color: rgba(162,67,255); }
.process-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(177,101,255,.25); border-radius: 13px; background: rgba(149,72,255,.08); color: #be75ff; font-size: 22px; }
.process-card h3 { margin: 20px 0 10px; color: white; font-size: 18px; }
.process-card p { margin: 0; color: #938d9c; font-size: 13px; line-height: 1.7; }
.process-connector { position: absolute; z-index: 4; right: -35px; top: 44%; color: #ae5eff; font-size: 31px; text-shadow: 0 0 16px rgba(174,94,255,.5); }
.process-action { display: flex; justify-content: center; margin-top: 25px; margin-bottom: 10px;}
.process-action .primary-btn { min-width: 230px; }
.process-grid.p-2{
  display:none
}

@media (max-width: 980px) {
  .section-inner { padding: 88px 0; }
  .flow-grid { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
  .flow-arrow { display: none; }
  .cashback-calculator { grid-template-columns: 1fr; }
  .calculator-controls { border-right: 0; border-bottom: 1px solid rgba(133,78,255,.16); }
  .process-grid { grid-template-columns: 1fr; gap: 18px; }
  .process-card { min-height: auto; }
  .process-connector { display: none; }
}

@media (max-width: 620px) {
  .section-inner { padding: 72px 0; }
  .section-heading { margin-bottom: 42px; }
  .section-heading h2 { letter-spacing: -2px; }
  .section-heading p { font-size: 13px; }
  .flow-grid { grid-template-columns: 1fr; gap: 38px; }
  .flow-card { min-height: 405px; }
  .flow-bottom > strong { font-size: 67px; letter-spacing: -4px; }
  .flow-bottom p { width: 100%; padding: 12px 15px; font-size: 11px; line-height: 1.55; }
  .calculator-controls, .calculator-results { padding: 28px 19px; }
  .broker-select { grid-template-columns: auto 1fr auto; }
  .broker-rate { grid-column: 2; grid-row: 2; }
  .chevron { grid-row: 1 / span 2; grid-column: 3; }
  .quick-lots { grid-template-columns: repeat(3, 1fr); }
  .result-grid { grid-template-columns: 1fr; }
  .account-tabs { grid-template-columns: 1fr; }
  .account-tab { min-height: 45px; }
  .process-card { padding: 30px 21px; }
}

/* =========================================================
   SECTION 5: RESOURCES + FOOTER
   Continues Section 1 dark / purple visual language
   ========================================================= */
.resources-section {
  background:
    radial-gradient(circle at 4% 38%, rgba(91, 26, 212, .18), transparent 28%),
    radial-gradient(circle at 92% 64%, rgba(126, 38, 255, .13), transparent 29%),
    linear-gradient(180deg, #04040b 0%, #060510 100%);
}
.resources-inner { padding-bottom: 112px; }
.resources-heading { margin-bottom: 46px; }
.resources-heading h2 { font-size: clamp(36px, 4.7vw, 58px); }
.resource-list { display: grid; gap: 38px; position: relative; }
.section-anchor { position: absolute; left: 0; top: calc(50% - 80px); width: 1px; height: 1px; pointer-events: none; }
.resource-card {
  position: relative;
  min-height: 320px;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  border: 1px solid rgba(119, 76, 255, .38);
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 45%, rgba(102, 38, 255, .09), transparent 35%),
    linear-gradient(135deg, rgba(12, 10, 28, .94), rgba(5, 5, 14, .94));
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 0 35px rgba(128, 54, 255, .025);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.resource-card:hover {
  transform: translateY(-5px);
  border-color: rgba(205, 83, 255, .68);
  box-shadow: 0 30px 82px rgba(0,0,0,.34), 0 0 38px rgba(114, 43, 255, .12);
}
.resource-media { min-height: 320px; position: relative; overflow: hidden; background: #07070e; }
.resource-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 72%, rgba(5, 5, 14, .42) 100%);
}
.resource-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .45s ease; }
.resource-card:hover .resource-media img { transform: scale(1.025); }
.resource-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 58px;
}
.resource-meta { display: flex; align-items: center; gap: 14px; color: #c8c2d5; font-size: clamp(15px, 1.6vw, 22px); line-height: 1.4; }
.pin-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: #dcd4ff; font-size: 25px; text-shadow: 0 0 14px rgba(167, 89, 255, .28); }
.resource-content h3 {
  max-width: 610px;
  margin: 26px 0 22px;
  color: #f253cd;
  font-size: clamp(27px, 3.2vw, 43px);
  line-height: 1.08;
  letter-spacing: -1.6px;
  font-weight: 900;
}
.resource-line { width: 100%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #f048d0, #6f2eff 87%, transparent 100%); opacity: .88; box-shadow: 0 0 16px rgba(222, 58, 213, .17); }
.resource-link { margin-top: 21px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: #bdb5ca; font-size: 13px; font-weight: 800; opacity: .82; transition: color .2s ease, gap .2s ease, opacity .2s ease; }
.resource-link b { color: #e45bd4; font-size: 18px; }
.resource-card:hover .resource-link { color: white; gap: 15px; opacity: 1; }

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 10%, rgba(88, 28, 204, .13), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(126, 33, 224, .11), transparent 29%),
    linear-gradient(180deg, #05040d 0%, #04030a 100%);
  border-top: 1px solid rgba(123, 71, 255, .1);
}
.footer-glow { position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); opacity: .17; pointer-events: none; }
.footer-glow-left { left: -180px; top: -190px; background: #6f2cff; }
.footer-glow-right { right: -170px; top: -190px; background: #d147df; }
.footer-main {
  min-height: 250px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
  padding-top: 38px;
  padding-bottom: 38px;
}
.footer-main h3 { margin: 0 0 28px; color: #beb7cd; font-size: 17px; letter-spacing: .2px; font-weight: 850; }
.footer-community { justify-self: center; min-width: 320px; }
.footer-support { justify-self: center; min-width: 300px; }
.social-links { display: flex; gap: 15px; align-items: center; }
.social-btn {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221, 42, 214, .8);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(45, 22, 82, .65), rgba(10, 8, 23, .94));
  box-shadow: inset 0 0 24px rgba(121, 52, 255, .08), 0 0 22px rgba(145, 39, 235, .06);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.social-btn:hover { transform: translateY(-4px); border-color: #f45edc; box-shadow: 0 9px 28px rgba(127, 44, 235, .18); }
.social-btn svg { width: 27px; height: 27px; fill: #f4f1ff; filter: drop-shadow(0 0 7px rgba(139, 98, 255, .24)); }
.zalo-btn span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #f1f1ff; color: #4775e8; font-size: 8px; font-weight: 900; box-shadow: 0 0 10px rgba(108, 102, 255, .28); }
.support-btn {
  min-width: 192px;
  min-height: 62px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(233, 55, 217, .76);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(50, 17, 78, .4), rgba(9, 7, 20, .72));
  color: #f44ad8;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 0 26px rgba(144, 39, 222, .08);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.support-btn:hover { transform: translateY(-3px); border-color: #ff77e9; box-shadow: 0 10px 30px rgba(151, 44, 236, .16); }
.footer-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(112, 76, 255, .42) 8%, rgba(112, 76, 255, .42) 92%, transparent); }
.footer-bottom { min-height: 104px; display: flex; align-items: center; }
.footer-bottom p { margin: 0; color: #7667dc; font-size: 14px; line-height: 1.65; }

@media (max-width: 980px) {
  .resource-card { grid-template-columns: 1fr; }
  .resource-media { min-height: 330px; max-height: 460px; }
  .resource-content { padding: 38px 34px 42px; }
  .resource-media::after { background: linear-gradient(180deg, transparent 76%, rgba(5, 5, 14, .52) 100%); }
  .footer-main { gap: 36px; }
  .footer-community, .footer-support { min-width: 0; justify-self: start; }
}

@media (max-width: 620px) {
  .resources-inner { padding-bottom: 76px; }
  .resources-heading { margin-bottom: 36px; }
  .resource-list { gap: 24px; }
  .resource-card { border-radius: 20px; }
  .resource-media { min-height: 225px; }
  .resource-content { padding: 28px 22px 31px; }
  .resource-meta { gap: 9px; font-size: 13px; }
  .pin-icon { width: 23px; height: 23px; flex-basis: 23px; font-size: 20px; }
  .resource-content h3 { margin: 17px 0 17px; font-size: 27px; letter-spacing: -1px; }
  .resource-line { height: 2px; }
  .resource-link { margin-top: 16px; }
  .footer-main { grid-template-columns: 1fr; min-height: 0; gap: 44px; padding-top: 62px; padding-bottom: 58px; }
  .footer-community, .footer-support { justify-self: center; text-align: center; }
  .social-links { justify-content: center; }
  .social-btn { width: 62px; height: 62px; }
  .support-btn { min-width: 210px; }
  .footer-bottom { min-height: 125px; text-align: center; justify-content: center; }
  .footer-bottom p { font-size: 12px; }
}