/* ============================================================
   index.css — Stylesheet for index.php (DXB Option Homepage)
   Full styles copied from sample3_theme/theme.css.
   Add index-page-specific overrides at the bottom.
   ============================================================ */
/* ==========================================================
   DXB Option - Sample 3 Light Theme Stylesheet
   ========================================================== */

/* 1. VARIABLES (Strictly Light Theme) */
:root,
[data-theme="light"] {
   --bg: #FFFFFF;
   --surface: #F6F7FB;
   --text: #0B1020;
   --muted: #5B6478;
   --border: #E6E8F0;
   --accent: #4F46E5;
   --accent-2: #4338CA;
   --ph: #E2E5EE;
   --nav-bg: rgba(255, 255, 255, .74);
   --green: #16A34A;
   --red: #DC2626;
   --frame: #15171D;
   --frame-edge: #2A2E38;
   --shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 10px 30px -14px rgba(11, 16, 32, .10);
   --radius: 20px;
   --section: 120px;
   --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
   color-scheme: light;
}

/* 2. BASE */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

html,
body,
* {
   scrollbar-width: none;
   -ms-overflow-style: none;
}

*::-webkit-scrollbar {
   display: none;
}

html.modal-open {
   overflow: hidden;
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font: 400 17px/1.6 var(--font-body);
   overflow-x: clip;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
   margin: 0;
   font-family: var(--font-head);
   font-weight: 800;
   letter-spacing: -.03em;
   line-height: 1.1;
}

h3 {
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: -.02em;
   line-height: 1.3;
}

p {
   margin: 0;
}

a {
   color: inherit;
   text-decoration: none;
}

button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   padding: 0;
   cursor: pointer;
}

img,
svg {
   display: block;
   max-width: 100%;
}

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

.container {
   width: 100%;
   max-width: 1248px;
   margin-inline: auto;
   padding-inline: 24px;
}

.section {
   padding-block: var(--section);
   scroll-margin-top: 80px;
}

.grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 24px;
   align-items: center;
}

.col-l {
   grid-column: 1 / 7;
}

.col-r {
   grid-column: 7 / 13;
}

.col-l5 {
   grid-column: 1 / 6;
}

.col-r6 {
   grid-column: 7 / 13;
}

.i {
   width: 20px;
   height: 20px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none;
}

.i-google {
   stroke: none;
}

/* 3. COMPONENTS */
.eyebrow {
   display: inline-block;
   margin-bottom: 16px;
   color: var(--accent);
   font: 600 13px/1 var(--font-body);
   letter-spacing: .08em;
   text-transform: uppercase;
}

.h2 {
   font-size: clamp(2rem, 3.6vw, 3rem);
}

.lead {
   color: var(--muted);
   font-size: 18px;
}

.section-head {
   max-width: 640px;
   margin-bottom: 56px;
}

.section-head .lead {
   margin-top: 16px;
}

.center {
   text-align: center;
   margin-inline: auto;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 48px;
   padding: 0 24px;
   border-radius: 999px;
   border: 1px solid transparent;
   font: 600 15px/1 var(--font-body);
   white-space: nowrap;
   transition: transform .2s ease-out, background-color .2s, border-color .2s, color .2s;
}

.btn:hover {
   transform: translateY(-1px);
}

.btn-primary {
   background: linear-gradient(180deg, var(--accent), var(--accent-2));
   color: #fff;
}

.btn-secondary {
   background: var(--bg);
   border-color: var(--border);
   color: var(--text);
}

.btn-secondary:hover {
   border-color: var(--muted);
}

.btn-ghost:hover {
   background: var(--surface);
}

.btn-white {
   background: #fff;
   color: #1E1B4B;
}

.btn-sm {
   height: 44px;
   padding: 0 18px;
   font-size: 14px;
}

.btn-lg {
   height: 56px;
   padding: 0 32px;
   font-size: 16px;
}

.btn-block {
   width: 100%;
}

.icon-btn {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   border-radius: 999px;
   transition: background-color .2s;
}

.icon-btn:hover {
   background: var(--surface);
}

.link-btn {
   color: var(--accent);
   font-weight: 600;
}

.link-btn:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
}

.card {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 28px;
   transition: transform .25s ease-out, border-color .25s;
}

.card:hover {
   transform: translateY(-4px);
   border-color: color-mix(in srgb, var(--muted) 45%, var(--border));
}

.card h3 {
   margin-bottom: 8px;
}

.card p {
   color: var(--muted);
   font-size: 16px;
}

.card-icon {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin-bottom: 20px;
   border-radius: 12px;
   background: color-mix(in srgb, var(--accent) 10%, transparent);
   color: var(--accent);
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
   padding: 0 12px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--surface);
   font: 600 13px/1 var(--font-body);
}

.chip-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
}

.checklist {
   display: grid;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.checklist li {
   display: flex;
   align-items: center;
   gap: 10px;
}

.checklist .i {
   width: 18px;
   height: 18px;
   color: var(--accent);
   stroke-width: 2.25;
}

.ph {
   display: block;
   flex: none;
   width: var(--w, 100%);
   height: 8px;
   border-radius: 99px;
   background: var(--ph);
}

.toast {
   position: fixed;
   left: 50%;
   bottom: 24px;
   z-index: 200;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   border-radius: 999px;
   background: var(--text);
   color: var(--bg);
   font-size: 15px;
   font-weight: 600;
   opacity: 0;
   transform: translate(-50%, 16px);
   transition: opacity .2s, transform .2s ease-out;
   pointer-events: none;
}

.toast.is-show {
   opacity: 1;
   transform: translate(-50%, 0);
}

/* Modals */
.modal {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: grid;
   place-items: center;
   padding: 16px;
   opacity: 0;
   visibility: hidden;
   transition: opacity .2s ease-out, visibility .2s;
}

.modal.is-open {
   opacity: 1;
   visibility: visible;
}

.modal-overlay {
   position: absolute;
   inset: 0;
   background: rgba(8, 10, 20, .55);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}

.modal-card {
   position: relative;
   width: 100%;
   max-width: 420px;
   max-height: calc(100dvh - 32px);
   overflow: auto;
   padding: 40px 28px 28px;
   border: 1px solid var(--border);
   border-radius: 24px;
   background: var(--bg);
   box-shadow: 0 30px 80px -20px rgba(11, 16, 32, .4);
   text-align: center;
   transform: scale(.96);
   transition: transform .2s ease-out;
}

.modal.is-open .modal-card {
   transform: none;
}

.modal-close {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 1;
}

.modal-card h2 {
   margin-bottom: 8px;
   font-size: 26px;
}

.modal-sub {
   margin-bottom: 28px;
   color: var(--muted);
   font-size: 16px;
}

.modal-meta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin: 18px 0 8px;
   color: var(--muted);
   font-size: 14px;
}

.modal-meta .i {
   width: 16px;
   height: 16px;
   color: var(--accent);
}

.modal-switch {
   font-size: 15px;
   color: var(--muted);
}

.modal-switch .link-btn {
   min-height: 44px;
}

.offer-card {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   max-width: 820px;
   padding: 0;
   text-align: left;
}

.offer-body {
   padding: 44px 36px 32px;
}

.offer-body h2 {
   margin: 16px 0 12px;
   font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.offer-body .checklist {
   margin: 24px 0 28px;
}

.offer-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 20px;
}

.offer-actions .link-btn {
   color: var(--muted);
   min-height: 44px;
}

.fine-print {
   margin-top: 20px;
   color: var(--muted);
   font-size: 13px;
}

.badge {
   display: inline-flex;
   align-items: center;
   height: 28px;
   padding: 0 12px;
   border-radius: 99px;
   background: color-mix(in srgb, var(--accent) 12%, transparent);
   color: var(--accent);
   font-size: 13px;
   font-weight: 600;
}

.offer-art {
   display: grid;
   place-items: center;
   padding: 32px;
   background: var(--accent);
}

.offer-art svg {
   width: 100%;
   max-width: 260px;
}

/* 4. DEVICE MOCKUPS */
.hero-visual {
   position: relative;
}

.stage-fit {
   position: relative;
   height: calc(470px * var(--s, 1));
}

.stage {
   position: absolute;
   top: 0;
   left: 50%;
   width: 640px;
   height: 470px;
   transform: translateX(-50%) scale(var(--s, 1));
   transform-origin: top center;
}

.laptop {
   position: absolute;
   top: 6px;
   left: 12px;
   width: 552px;
   animation: float 7s ease-in-out infinite;
}

.lid {
   position: relative;
   padding: 16px 12px 12px;
   border: 1px solid var(--frame-edge);
   border-radius: 18px 18px 8px 8px;
   background: var(--frame);
   box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .45);
}

.lid::before {
   content: "";
   position: absolute;
   top: 6px;
   left: 50%;
   width: 5px;
   height: 5px;
   margin-left: -2.5px;
   border-radius: 50%;
   background: #3A3F4B;
}

.base {
   position: relative;
   height: 14px;
   margin: 0 -12px;
   border: 1px solid var(--frame-edge);
   border-top: 0;
   border-radius: 2px 2px 14px 14px;
   background: #23262E;
}

.base::before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   width: 84px;
   height: 5px;
   margin-left: -42px;
   border-radius: 0 0 6px 6px;
   background: var(--frame);
}

.phone {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 2;
   width: 168px;
   height: 336px;
   padding: 8px;
   border: 1px solid var(--frame-edge);
   border-radius: 36px;
   background: var(--frame);
   box-shadow: 0 30px 60px -20px rgba(11, 16, 32, .5);
   animation: float 7s ease-in-out -3.5s infinite;
}

.notch {
   position: absolute;
   top: 14px;
   left: 50%;
   z-index: 3;
   width: 46px;
   height: 13px;
   margin-left: -23px;
   border-radius: 99px;
   background: #000;
}

.home-bar {
   position: absolute;
   bottom: 14px;
   left: 50%;
   z-index: 3;
   width: 52px;
   height: 4px;
   margin-left: -26px;
   border-radius: 99px;
   background: var(--text);
   opacity: .3;
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-3px);
   }
}

.screen {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--bg);
   color: var(--text);
}

.lid .screen {
   aspect-ratio: 16 / 10;
   border-radius: 6px;
}

.phone .screen {
   height: 100%;
   padding-top: 24px;
   border-radius: 28px;
}

.slides {
   position: relative;
   flex: 1;
   min-height: 0;
}

.slide {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 0;
   opacity: 0;
   transform: translateX(12px);
   transition: opacity .5s ease-out, transform .5s ease-out;
}

.slide.is-active {
   opacity: 1;
   transform: none;
}

/* ==========================================================
   4B. REAL TRADING.PHP & HOMEPAGE MINIATURE SCREENS
   ========================================================== */
.tp-shell {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   background: #ffffff;
   color: #0f172a;
   overflow: hidden;
   font-family: var(--font-body);
}

/* ── Top Bar: mirrors real trading.php #top-bar ── */
.tp-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 3px 8px;
   background: #ffffff;
   border-bottom: 1px solid #e2e8f0;
   height: 30px;
   flex: none;
   gap: 6px;
}

.tp-topbar-left {
   display: flex;
   align-items: center;
   gap: 4px;
   flex: 1;
   overflow: hidden;
}

.tp-topbar-right {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-shrink: 0;
}

/* Balance group in topbar */
.tp-bal-group {
   display: flex;
   align-items: stretch;
   height: 24px;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 5px;
   overflow: hidden;
}

.tp-bal-inner {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 0 8px;
   border-right: 1px solid #e2e8f0;
}

.tp-bal-num {
   font-size: 9px;
   font-weight: 800;
   color: #0f172a;
   font-variant-numeric: tabular-nums;
}

/* ── Payout badge: inside trade-bar, mirrors real trading.php payout-badge-desktop ── */
.tp-payout-badge {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: rgba(79, 110, 247, 0.08);
   border: 1px solid rgba(79, 110, 247, 0.22);
   border-radius: 4px;
   padding: 2px 7px;
   height: 25px;
   box-sizing: border-box;
   flex-shrink: 0;
}

.tp-payout-label {
   font-size: 5px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   line-height: 1;
}

.tp-payout-val {
   font-size: 9.5px;
   font-weight: 800;
   color: #4f6ef7;
   line-height: 1.1;
}

/* ── Countdown track in trade-bar ── */
.tp-countdown-track {
   width: 50px;
   height: 3px;
   background: #e2e8f0;
   border-radius: 99px;
   overflow: hidden;
   margin-top: 2px;
}

.tp-countdown-fill {
   height: 100%;
   width: 60%;
   background: #4f6ef7;
   border-radius: 99px;
   transition: width 1s linear;
}

/* ── Monospace font for timer ── */
.tp-mono {
   font-family: 'DM Mono', monospace;
   letter-spacing: -0.01em;
}

/* ── History Table: mirrors real hist-table ── */
.tp-hist {
   border-top: 1px solid #e2e8f0;
   padding: 4px 8px;
   flex: none;
   background: #fafbff;
}

.tp-hist-row {
   display: grid;
   grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
   gap: 3px;
   padding: 3.5px 0;
   border-bottom: 1px solid #f1f5f9;
   font-size: 7px;
   font-weight: 600;
   color: #475569;
   align-items: center;
}

.tp-hist-row:last-child {
   border-bottom: none;
}

.tp-hist-head {
   font-size: 6.5px;
   font-weight: 700;
   color: #94a3b8;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   border-bottom: 1px solid #e2e8f0;
}

.call-lbl {
   color: #00C48C;
   font-weight: 800;
}

.put-lbl {
   color: #FF4D67;
   font-weight: 800;
}

.tp-green {
   color: #00C48C;
   font-weight: 800;
}

.tp-red {
   color: #FF4D67;
   font-weight: 800;
}

.tp-win-badge {
   display: inline-block;
   background: rgba(0, 196, 140, 0.12);
   color: #00C48C;
   font-size: 6px;
   font-weight: 800;
   padding: 1px 4px;
   border-radius: 3px;
   text-align: center;
}

.tp-lose-badge {
   display: inline-block;
   background: rgba(255, 77, 103, 0.10);
   color: #FF4D67;
   font-size: 6px;
   font-weight: 800;
   padding: 1px 4px;
   border-radius: 3px;
   text-align: center;
}

/* ── HP enhanced: nav buttons, pairs ── */
.hp-nav-btns {
   display: flex;
   align-items: center;
   gap: 4px;
}

.hp-btn-ghost {
   font-size: 7.5px;
   font-weight: 700;
   color: #475569;
   padding: 2px 8px;
   border-radius: 99px;
   border: 1px solid #cbd5e1;
   cursor: pointer;
}

.hp-link {
   color: #64748b;
   font-size: 7.5px;
   font-weight: 600;
}

.hp-link.active {
   color: var(--accent);
   font-weight: 700;
}

.hp-pairs {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 8px;
}

.hp-pair-chip {
   font-size: 7px;
   font-weight: 700;
   color: #475569;
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
   padding: 2px 6px;
   border-radius: 4px;
}

.hp-trust {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* ==========================================================
   MOBILE PHONE — m-tp-shell (trading.php layout, compact)
   ========================================================== */
.m-tp-shell {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   background: #ffffff;
   overflow: hidden;
   font-family: var(--font-body);
}

/* Navbar */
.m-tp-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 4px;
   height: 20px;
   background: #ffffff;
   border-bottom: 1px solid #e2e8f0;
   flex: none;
   gap: 2px;
   white-space: nowrap;
   overflow: hidden;
   box-sizing: border-box;
}

.m-tp-logo {
   font-size: 6.5px;
   font-weight: 800;
   color: #0f172a;
   letter-spacing: -0.02em;
   white-space: nowrap;
   flex-shrink: 0;
   line-height: 1;
}

.m-tp-nav-right {
   display: flex;
   align-items: center;
   gap: 2px;
   flex-shrink: 0;
}

.m-tp-bal {
   font-size: 5.8px;
   font-weight: 800;
   color: #0f172a;
   white-space: nowrap;
   line-height: 1;
}

.m-tp-demo {
   font-size: 4.8px;
   font-weight: 800;
   color: #d97706;
   background: rgba(245, 166, 35, 0.14);
   padding: 1px 2.5px;
   border-radius: 2px;
   white-space: nowrap;
   line-height: 1;
}

.m-tp-dep {
   font-size: 5.2px;
   font-weight: 700;
   color: #fff;
   background: #00C48C;
   border: none;
   border-radius: 2.5px;
   padding: 1.5px 3.5px;
   cursor: pointer;
   white-space: nowrap;
   line-height: 1;
}

.m-tp-avatar {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: linear-gradient(135deg, #4f6ef7, #7b8ff8);
   color: #fff;
   font-size: 4.5px;
   font-weight: 800;
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

/* Pair selector row */
.m-tp-pair-row {
   display: flex;
   align-items: center;
   gap: 3px;
   padding: 3px 6px;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
   flex: none;
   overflow: hidden;
}

.m-tp-pair-active {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   background: #eff6ff;
   border: 1px solid #3b82f6;
   color: #1d4ed8;
   font-size: 6.5px;
   font-weight: 700;
   padding: 1px 5px;
   border-radius: 3px;
   white-space: nowrap;
}

.m-pct {
   color: #00C48C;
   font-size: 6px;
   font-weight: 800;
}

.m-tp-pair {
   font-size: 6px;
   font-weight: 600;
   color: #64748b;
   padding: 1px 4px;
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
   border-radius: 3px;
   white-space: nowrap;
}

/* Chart area */
.m-tp-chart-area {
   position: relative;
   flex: 1;
   display: flex;
   min-height: 0;
   background: #ffffff;
   overflow: hidden;
}

.m-tp-y-axis {
   position: absolute;
   right: 3px;
   top: 4px;
   bottom: 4px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-size: 5.5px;
   font-weight: 600;
   color: #94a3b8;
   font-family: monospace;
   pointer-events: none;
   z-index: 2;
}

/* Trade action bar — all elements strictly on one single line */
.m-tp-trade-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
   gap: 2px;
   padding: 2px 4px;
   background: #ffffff;
   border-top: 1px solid #e2e8f0;
   height: 25px;
   flex: none;
   box-sizing: border-box;
   overflow: hidden;
}

.m-tp-timer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   flex-shrink: 0;
   min-width: 17px;
}

.m-tp-timer-label {
   font-size: 4px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   line-height: 1;
}

.m-tp-timer-val {
   font-size: 7px;
   font-weight: 800;
   color: #0284c7;
   font-family: monospace;
   line-height: 1.1;
   white-space: nowrap;
}

.m-tp-btn-call,
.m-tp-btn-put {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 17px;
   padding: 0 4px;
   border-radius: 3px;
   border: none;
   font-size: 5.5px;
   font-weight: 800;
   cursor: pointer;
   white-space: nowrap;
   letter-spacing: 0.02em;
   flex-shrink: 0;
   line-height: 1;
   text-decoration: none;
   transition: transform 0.15s, filter 0.15s;
   box-sizing: border-box;
}

.m-tp-btn-call:hover,
.m-tp-btn-put:hover {
   filter: brightness(1.08);
}

.m-tp-btn-call:active,
.m-tp-btn-put:active {
   transform: scale(0.97);
}

.m-tp-btn-call {
   background: #00C48C;
   color: #fff;
   box-shadow: 0 1px 3px rgba(0, 196, 140, 0.25);
}

.m-tp-btn-put {
   background: #FF4D67;
   color: #fff;
   box-shadow: 0 1px 3px rgba(255, 77, 103, 0.25);
}

.m-tp-invest-labeled {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5px;
   flex-shrink: 0;
}

.m-tp-invest-label {
   font-size: 4px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   line-height: 1;
}

.m-tp-invest-row,
.m-tp-invest {
   display: flex;
   align-items: center;
   gap: 1px;
   background: #f8fafc;
   border: 1px solid #cbd5e1;
   border-radius: 3px;
   padding: 0 2px;
   height: 16px;
   box-sizing: border-box;
   flex-shrink: 0;
}

.m-tp-adj {
   font-size: 7px;
   font-weight: 800;
   color: #475569;
   line-height: 1;
   cursor: pointer;
   padding: 0 1px;
   user-select: none;
}

.m-tp-adj:hover {
   color: #0284c7;
}

.m-tp-amt-input {
   width: 18px;
   height: 100%;
   border: none;
   background: transparent;
   font-family: inherit;
   font-size: 6px;
   font-weight: 800;
   color: #0f172a;
   text-align: center;
   outline: none;
   padding: 0;
}

.m-tp-amt {
   font-size: 6px;
   font-weight: 800;
   color: #0f172a;
   min-width: 16px;
   text-align: center;
   white-space: nowrap;
}

/* Mini history */
.m-tp-hist {
   border-top: 1px solid #e2e8f0;
   background: #fafbff;
   padding: 3px 6px;
   flex: none;
}

.m-tp-hist-head {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   gap: 2px;
   font-size: 5.5px;
   font-weight: 700;
   color: #94a3b8;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding-bottom: 2px;
   border-bottom: 1px solid #e2e8f0;
   margin-bottom: 1px;
}

.m-tp-hist-row {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   gap: 2px;
   padding: 2.5px 0;
   border-bottom: 1px solid #f1f5f9;
   font-size: 6px;
   font-weight: 600;
   color: #475569;
   align-items: center;
}

.m-tp-hist-row:last-child {
   border-bottom: none;
}

/* Desktop Trading Header (Pure White Theme) */
.tp-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px;
   background: #ffffff;
   border-bottom: 1px solid #e2e8f0;
   height: 30px;
   flex: none;
}

.tp-pairs {
   display: flex;
   align-items: center;
   gap: 4px;
}

.tp-pair-tab {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 8px;
   border-radius: 4px;
   background: #f8fafc;
   border: 1px solid #cbd5e1;
   font-size: 8.5px;
   font-weight: 700;
   color: #475569;
   letter-spacing: 0.02em;
}

.tp-pair-tab.is-active {
   background: #eff6ff;
   border-color: #3b82f6;
   color: #1d4ed8;
}

.tp-pair-tab .tp-pct {
   color: #00C48C;
   font-size: 7.5px;
   font-weight: 800;
}

.tp-user-info {
   display: flex;
   align-items: center;
   gap: 6px;
}

.tp-bal-box {
   display: flex;
   align-items: center;
   gap: 4px;
   background: #f8fafc;
   padding: 2px 7px;
   border-radius: 4px;
   border: 1px solid #e2e8f0;
   font-size: 9px;
   font-weight: 700;
   color: #0f172a;
}

.tp-badge-demo {
   background: rgba(245, 166, 35, 0.16);
   color: #d97706;
   font-size: 7px;
   font-weight: 800;
   padding: 1px 4px;
   border-radius: 3px;
}

.tp-btn-dep {
   background: #00C48C;
   color: #fff;
   font-size: 8px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 4px;
   border: none;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0, 196, 140, 0.25);
}

.tp-avatar {
   width: 19px;
   height: 19px;
   border-radius: 50%;
   background: linear-gradient(135deg, #4f6ef7 0%, #7b8ff8 100%);
   color: #fff;
   font-size: 8px;
   font-weight: 800;
   display: grid;
   place-items: center;
}

/* Trading Chart Body (Pure White Background) */
.tp-body {
   position: relative;
   display: flex;
   flex: 1;
   min-height: 0;
   background: #ffffff !important;
}

.tp-chart-wrap {
   position: relative;
   flex: 1;
   padding: 8px 36px 8px 10px;
   display: flex;
   flex-direction: column;
   background: transparent;
   overflow: hidden;
}

.tp-chart-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
      linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
   background-size: 26px 18px;
   pointer-events: none;
   z-index: 0;
}

.phone .tp-chart-grid {
   background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
      linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
   background-size: 13px 11px;
}

.tp-chart-y-axis {
   position: absolute;
   right: 4px;
   top: 6px;
   bottom: 6px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-size: 6.5px;
   font-weight: 600;
   color: #94a3b8;
   font-family: monospace;
   pointer-events: none;
   z-index: 2;
   user-select: none;
}

.tp-price-line {
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   border-top: 1.5px dashed #4F6EF7;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   pointer-events: none;
   z-index: 3;
   transition: top 0.4s ease;
}

.tp-price-tag {
   background: #4F6EF7;
   color: #ffffff;
   font-size: 7.5px;
   font-weight: 800;
   padding: 1.5px 5px;
   border-radius: 3px;
   transform: translateY(-50%);
   margin-right: 32px;
   box-shadow: 0 2px 6px rgba(79, 110, 247, 0.35);
   font-family: monospace;
   transition: background 0.3s ease;
}

/* Candlesticks (Bigger & Prominent) */
.candles {
   position: relative;
   display: flex;
   flex: 1;
   gap: 7px;
   min-height: 0;
   align-items: stretch;
   padding: 4px 0;
}

.cdl {
   position: relative;
   flex: 1;
   min-width: 9px;
}

.cdl::before,
.cdl::after {
   content: "";
   position: absolute;
   background: var(--c);
   transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
}

.cdl::before {
   left: 0;
   right: 0;
   bottom: var(--b);
   height: var(--h);
   border-radius: 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cdl::after {
   left: 50%;
   width: 2px;
   margin-left: -1px;
   bottom: calc(var(--b) - var(--wd));
   height: calc(var(--h) + var(--wu) + var(--wd));
   border-radius: 1px;
}

.cdl.up {
   --c: #00C48C;
}

.cdl.dn {
   --c: #FF4D67;
}

/* Trading Bottom Action Bar (Pure White Theme) */
.tp-trade-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 10px;
   background: #ffffff;
   border-top: 1px solid #e2e8f0;
   height: 50px;
   flex: none;
   gap: 8px;
}

.tp-timer-block {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.tp-timer-label {
   font-size: 6.5px;
   color: #64748b;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.05em;
}

.tp-timer-val {
   font-size: 11px;
   font-weight: 800;
   color: #0284c7;
   font-family: monospace;
   line-height: 1;
}

.tp-invest-block {
   display: flex;
   align-items: center;
   gap: 3px;
   background: #f8fafc;
   border: 1px solid #cbd5e1;
   border-radius: 4px;
   padding: 2px 5px;
}

.tp-invest-btn {
   color: #64748b;
   font-size: 10px;
   font-weight: bold;
   padding: 0 4px;
   cursor: pointer;
   user-select: none;
}

.tp-invest-val {
   font-size: 9.5px;
   font-weight: 800;
   color: #0f172a;
   min-width: 28px;
   text-align: center;
}

.tp-actions {
   display: flex;
   align-items: center;
   gap: 6px;
}

.tp-btn-trade {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   height: 30px;
   padding: 0 13px;
   border-radius: 5px;
   font-size: 9.5px;
   font-weight: 800;
   color: #fff;
   cursor: pointer;
   border: none;
   text-decoration: none;
   letter-spacing: 0.02em;
   transition: transform 0.15s, filter 0.15s;
   white-space: nowrap;
}

.tp-btn-trade:hover {
   filter: brightness(1.08);
}

.tp-btn-trade:active {
   transform: scale(0.97);
}

.tp-btn-trade.call {
   background: #00C48C;
   box-shadow: 0 2px 6px rgba(0, 196, 140, 0.3);
}

.tp-btn-trade.put {
   background: #FF4D67;
   box-shadow: 0 2px 6px rgba(255, 77, 103, 0.3);
}

.tp-btn-trade svg {
   width: 11px;
   height: 11px;
   stroke-width: 2.5;
}

/* Labeled investment box */
.tp-invest-labeled {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

.tp-invest-label {
   font-size: 6px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   line-height: 1;
}

.tp-invest-row {
   display: flex;
   align-items: center;
   gap: 2px;
   background: #f8fafc;
   border: 1px solid #cbd5e1;
   border-radius: 4px;
   padding: 2px 4px;
   height: 24px;
}

.tp-invest-input {
   width: 42px;
   height: 100%;
   border: none;
   background: transparent;
   font-family: inherit;
   font-size: 9.5px;
   font-weight: 800;
   color: #0f172a;
   text-align: center;
   outline: none;
   padding: 0;
}

.laptop .tp-trade-bar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   padding: 4px 10px;
   height: 42px;
   box-sizing: border-box;
}

.laptop .tp-trade-bar .tp-btn-trade {
   height: 27px;
   padding: 0 11px;
   font-size: 8.5px;
}

.laptop .tp-hist {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   padding-right: 96px;
}

/* Mobile Trading Layout */
.phone .tp-header {
   height: 26px;
   padding: 3px 6px;
}

.phone .tp-pair-tab {
   font-size: 7.5px;
   padding: 2px 5px;
}

.phone .tp-bal-box {
   font-size: 7.5px;
   padding: 2px 5px;
}

.phone .tp-btn-dep {
   font-size: 7px;
   padding: 2px 5px;
}

.phone .tp-chart-wrap {
   padding: 6px 26px 6px 6px;
}

.phone .candles {
   gap: 5px;
}

.phone .cdl {
   min-width: 8px;
}

.phone .cdl::after {
   width: 1.5px;
   margin-left: -0.75px;
}

.phone .tp-price-tag {
   margin-right: 22px;
   font-size: 6.5px;
   padding: 1px 3px;
}

.phone .tp-chart-y-axis {
   font-size: 5.5px;
}

.phone .tp-trade-bar {
   height: 38px;
   padding: 3px 6px 6px;
}

.phone .tp-btn-trade {
   height: 24px;
   padding: 0 8px;
   font-size: 8px;
}

.phone .tp-invest-block {
   padding: 1px 3px;
}

.phone .tp-invest-val {
   font-size: 8px;
   min-width: 20px;
}

/* Miniature Real Website Homepage (Slide 2) */
.hp-shell {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   background: #ffffff;
   color: #0b1020;
   overflow: hidden;
   font-family: var(--font-body);
}

.hp-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px;
   border-bottom: 1px solid #e2e8f0;
   background: rgba(255, 255, 255, 0.95);
   height: 26px;
   flex: none;
}

.hp-logo {
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: var(--font-head);
   font-size: 9px;
   font-weight: 800;
   color: #0b1020;
}

.hp-logo-dot {
   width: 8px;
   height: 8px;
   border-radius: 2px;
   background: var(--accent);
}

.hp-links {
   display: flex;
   gap: 8px;
   font-size: 7.5px;
   font-weight: 600;
   color: #64748b;
}

.hp-btn {
   background: var(--accent);
   color: #fff;
   font-size: 7.5px;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 99px;
}

.hp-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 8px 14px;
   background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.hp-chip {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-size: 7px;
   font-weight: 700;
   color: var(--accent);
   background: #eef2ff;
   padding: 1px 6px;
   border-radius: 99px;
   margin-bottom: 4px;
}

.hp-title {
   font-family: var(--font-head);
   font-size: 13px;
   font-weight: 800;
   line-height: 1.15;
   color: #0b1020;
   margin-bottom: 3px;
}

.hp-sub {
   font-size: 8px;
   color: #64748b;
   max-width: 220px;
   margin-bottom: 8px;
   line-height: 1.25;
}

.hp-ctas {
   display: flex;
   gap: 5px;
}

.hp-cta-primary {
   background: var(--accent);
   color: #fff;
   font-size: 8px;
   font-weight: 700;
   padding: 3px 9px;
   border-radius: 99px;
}

.hp-cta-secondary {
   border: 1px solid #cbd5e1;
   color: #334155;
   font-size: 8px;
   font-weight: 600;
   padding: 3px 8px;
   border-radius: 99px;
}

.hp-trust {
   display: flex;
   gap: 8px;
   margin-top: 8px;
   font-size: 6.5px;
   color: #64748b;
   font-weight: 600;
}

.hp-trust span {
   display: flex;
   align-items: center;
   gap: 2px;
}

/* Mobile Homepage Layout */
.phone .hp-nav {
   height: 24px;
   padding: 2px 6px;
}

.phone .hp-title {
   font-size: 10px;
   margin-bottom: 2px;
}

.phone .hp-sub {
   font-size: 7px;
   margin-bottom: 6px;
}

.phone .hp-cta-primary {
   font-size: 7.5px;
   padding: 2px 7px;
}

.phone .hp-trust {
   flex-direction: column;
   gap: 3px;
   font-size: 6px;
}

/* Slide 3: Real Deposit & Funding Screen (.dp-shell) */
.dp-shell {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   background: #ffffff;
   color: #0f172a;
   overflow: hidden;
   font-family: var(--font-body);
}

.dp-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 12px;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
   height: 28px;
   flex: none;
}

.dp-title-row {
   display: flex;
   align-items: center;
   gap: 6px;
}

.dp-title {
   font-family: var(--font-head);
   font-size: 9.5px;
   font-weight: 800;
   color: #0f172a;
}

.dp-curr-badge {
   background: #eff6ff;
   color: #2563eb;
   font-size: 7px;
   font-weight: 700;
   padding: 1px 5px;
   border-radius: 3px;
   border: 1px solid #bfdbfe;
}

.dp-bal {
   font-size: 8px;
   color: #64748b;
}

.dp-bal strong {
   color: #0f172a;
}

.dp-body {
   flex: 1;
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   gap: 8px;
   padding: 8px 12px;
   background: #ffffff;
   min-height: 0;
}

.dp-methods {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.dp-method {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 4px 6px;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   background: #ffffff;
   transition: border-color 0.2s;
}

.dp-method.is-active {
   border-color: #3b82f6;
   background: #eff6ff;
}

.dp-method-icon {
   width: 18px;
   height: 18px;
   border-radius: 4px;
   display: grid;
   place-items: center;
   font-size: 10px;
   font-weight: 800;
}

.dp-method-icon.crypto {
   background: #26a17b;
   color: #fff;
}

.dp-method-icon.btc {
   background: #f7931a;
   color: #fff;
}

.dp-method-icon.local {
   background: #e11d48;
   color: #fff;
   font-size: 9px;
}

.dp-method-icon.bank {
   background: #475569;
   color: #fff;
   font-size: 9px;
}

.dp-method-info {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
}

.dp-method-name {
   font-size: 8px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.1;
}

.dp-method-sub {
   font-size: 6.5px;
   color: #64748b;
}

.dp-check {
   font-size: 8px;
   font-weight: 800;
   color: #2563eb;
}

.dp-side {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 4px;
}

.dp-amounts-label {
   font-size: 7px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.dp-amounts {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px;
}

.dp-amt {
   padding: 3px 0;
   text-align: center;
   border: 1px solid #e2e8f0;
   border-radius: 4px;
   font-size: 8px;
   font-weight: 700;
   color: #334155;
   background: #f8fafc;
}

.dp-amt.is-active {
   border-color: #3b82f6;
   background: #3b82f6;
   color: #ffffff;
}

.dp-bonus-box {
   background: #fef3c7;
   border: 1px solid #fde68a;
   padding: 3px 6px;
   border-radius: 5px;
   font-size: 7px;
   color: #92400e;
   line-height: 1.2;
}

.dp-bonus-badge {
   font-weight: 800;
   display: block;
}

.dp-btn-submit {
   background: #00C48C;
   color: #ffffff;
   border: none;
   border-radius: 5px;
   padding: 5px;
   font-size: 8.5px;
   font-weight: 800;
   cursor: pointer;
   width: 100%;
   box-shadow: 0 1px 4px rgba(0, 196, 140, 0.3);
}

/* Mobile Deposit */
.phone .dp-header {
   height: 24px;
   padding: 3px 8px;
}

.phone .dp-body {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 6px 8px;
}

.phone .dp-methods.mobile {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
}

.phone .dp-methods.mobile .dp-method {
   padding: 3px 5px;
   gap: 4px;
}

.phone .dp-amounts.mobile {
   display: flex;
   justify-content: space-between;
   gap: 4px;
}

.phone .dp-amounts.mobile .dp-amt {
   flex: 1;
   padding: 3px 0;
}

.phone .dp-bonus-box.mobile {
   font-size: 6.5px;
   padding: 3px 5px;
}

.phone .dp-btn-submit {
   padding: 4px;
   font-size: 8px;
}

/* Legacy / Fallback Payments */
.pay-d {
   display: grid;
   grid-template-columns: 1.25fr 1fr;
   height: 100%;
   padding: 10px;
}

.tiles {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
}

.phone .pay-d {
   grid-template-columns: 1fr;
   gap: 8px;
   padding: 8px;
}

.phone .tiles {
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
}

.m-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   padding: 9px 4px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg);
   color: var(--muted);
}

.m-tile .i {
   width: 16px;
   height: 16px;
}

.m-tile .ph {
   height: 5px;
}

.m-tile.is-sel {
   border-color: var(--accent);
   color: var(--accent);
}

.phone .m-tile {
   padding: 7px 3px;
}

.phone .m-tile .i {
   width: 13px;
   height: 13px;
}

.m-card {
   padding: 8px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface);
}

.m-title {
   font: 700 11px/1.2 var(--font-head);
   letter-spacing: -.01em;
}

.phone .m-title {
   font-size: 10px;
}

.m-label {
   color: var(--muted);
   font: 600 7px/1 var(--font-body);
   letter-spacing: .06em;
   text-transform: uppercase;
}

.stack {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.phone .stack {
   gap: 6px;
}

.field {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
   height: 28px;
   padding: 0 8px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg);
   color: var(--muted);
}

.field .i {
   width: 12px;
   height: 12px;
}

.m-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   height: 30px;
   padding: 0 10px;
   border-radius: 8px;
   color: #fff;
   font: 700 10px/1 var(--font-body);
   letter-spacing: .02em;
}

.m-accent {
   background: var(--accent);
}

/* Slider Controller */
.slider-ctrl {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-top: 16px;
}

.dots {
   display: flex;
}

.dot {
   display: grid;
   place-items: center;
   width: 36px;
   height: 44px;
}

.dot::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 99px;
   background: color-mix(in srgb, var(--muted) 40%, transparent);
   transition: width .25s ease-out, background-color .25s;
}

.dot.is-active::before {
   width: 22px;
   background: var(--accent);
}

/* 5. SECTIONS */
/* Hero */
.hero {
   padding: 156px 0 96px;
   background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 78%);
   scroll-margin-top: 0;
}

.hero-grid {
   gap: 48px 24px;
}

.hero h1 {
   margin: 24px 0 20px;
   font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.hero-sub {
   max-width: 520px;
   color: var(--muted);
   font-size: 18px;
}

.hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 36px 0 32px;
}

.trust {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 24px;
   margin: 0;
   padding: 0;
   list-style: none;
   color: var(--muted);
   font-size: 15px;
}

.trust li {
   display: flex;
   align-items: center;
   gap: 8px;
}

.trust .i {
   width: 18px;
   height: 18px;
   color: var(--accent);
   stroke-width: 2.25;
}

/* Pairs marquee */
.pairs {
   overflow: hidden;
   padding: 22px 0;
   border-block: 1px solid var(--border);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
   display: flex;
   width: max-content;
   margin: 0;
   padding: 0;
   list-style: none;
   animation: marquee 48s linear infinite;
}

.pairs:hover .marquee-track {
   animation-play-state: paused;
}

.pair {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 40px;
   font: 700 18px/1 var(--font-head);
   letter-spacing: -.01em;
}

.mini {
   display: flex;
   align-items: flex-end;
   gap: 3px;
   height: 22px;
}

.mini i {
   width: 5px;
   height: 40%;
   border-radius: 1.5px;
   background: var(--green);
   animation: mini 1.8s ease-in-out infinite alternate;
}

.mini i:nth-child(2) {
   background: var(--red);
   animation-delay: -.6s;
}

.mini i:nth-child(3) {
   animation-delay: -1.2s;
}

@keyframes marquee {
   to {
      transform: translateX(-50%);
   }
}

@keyframes mini {
   from {
      height: 30%;
   }

   to {
      height: 100%;
   }
}

/* How it works */
.steps {
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.steps::before {
   content: "";
   position: absolute;
   top: 22px;
   left: 16.66%;
   right: 16.66%;
   border-top: 1.5px dashed color-mix(in srgb, var(--muted) 40%, transparent);
}

.step {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   text-align: center;
}

.step-num {
   position: relative;
   z-index: 1;
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   font: 700 16px/1 var(--font-head);
   box-shadow: 0 0 0 6px var(--bg);
}

.step .card {
   width: 100%;
}

.step .card-icon {
   margin-inline: auto;
}

/* Bento */
.bento {
   display: grid;
   grid-auto-flow: dense;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 20px;
}

.bento>* {
   grid-column: span 3;
}

.bento .b-lg-a {
   grid-column: 1 / 7;
   grid-row: 1 / 3;
}

.bento .b-lg-b {
   grid-column: 7 / 13;
   grid-row: 3 / 5;
}

.bento .b-wide {
   grid-column: span 6;
}

.b-lg {
   display: flex;
   flex-direction: column;
}

.b-lg h3 {
   font-size: 1.5rem;
}

.b-visual {
   display: grid;
   flex: 1;
   place-items: center;
   min-height: 170px;
   margin-top: 28px;
   padding: 20px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface);
   color: var(--accent);
}

.b-visual svg {
   width: 100%;
   max-width: 280px;
}

.pair-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
}

/* Payments */
.pay-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.pay-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   padding: 28px 16px;
   text-align: center;
   font-weight: 600;
   font-size: 15px;
}

.pay-tile .card-icon {
   margin: 0;
}

.payments .lead {
   margin: 16px 0 28px;
}

/* Bonuses */
.bonus-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
}

.bonus {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 40px;
}

.bonus h3 {
   font-size: 1.6rem;
}

.bonus p {
   margin: 4px 0 32px;
   font-size: 17px;
}

.bonus .btn {
   margin-top: auto;
}

.bonus.is-accent,
.bonus.is-accent:hover {
   border-color: var(--accent);
   background: var(--accent);
   color: #fff;
}

.bonus.is-accent p {
   color: rgba(255, 255, 255, .86);
}

.bonus.is-accent .card-icon {
   background: rgba(255, 255, 255, .16);
   color: #fff;
}

/* FAQ */
.faq-grid {
   align-items: start;
}

.faq-intro .lead {
   margin: 16px 0 20px;
}

.faq-list {
   border-top: 1px solid var(--border);
}

.faq-item {
   border-bottom: 1px solid var(--border);
}

.faq-q {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   min-height: 44px;
   padding: 22px 0;
   text-align: left;
   font: 600 17px/1.4 var(--font-head);
   letter-spacing: -.01em;
}

.faq-icon {
   position: relative;
   flex: none;
   width: 30px;
   height: 30px;
   border: 1px solid var(--border);
   border-radius: 50%;
}

.faq-icon::before,
.faq-icon::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 12px;
   height: 1.75px;
   border-radius: 2px;
   background: currentColor;
   transform: translate(-50%, -50%);
   transition: transform .22s ease-out;
}

.faq-icon::after {
   transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-icon::after {
   transform: translate(-50%, -50%) rotate(0);
}

.faq-panel {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .22s ease-out;
}

.faq-item.is-open .faq-panel {
   grid-template-rows: 1fr;
}

.faq-panel>div {
   overflow: hidden;
   visibility: hidden;
   transition: visibility .22s;
}

.faq-item.is-open .faq-panel>div {
   visibility: visible;
}

.faq-panel p {
   max-width: 60ch;
   padding-bottom: 22px;
   color: var(--muted);
}

/* Final CTA */
.cta-card {
   padding: 96px 32px;
   border-radius: 32px;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   color: #fff;
   text-align: center;
}

.cta-card p {
   max-width: 480px;
   margin: 16px auto 36px;
   color: rgba(255, 255, 255, .86);
   font-size: 18px;
}

/* About */
.about-copy p {
   margin-top: 20px;
   color: var(--muted);
   font-size: 18px;
}

.about-media {
   overflow: hidden;
   aspect-ratio: 4 / 3;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
}

.about-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Contact */
.contact-grid {
   align-items: start;
}

.contact-lines {
   display: grid;
   gap: 16px;
   margin-top: 32px;
}

.contact-line {
   display: flex;
   align-items: center;
   gap: 14px;
   font-weight: 600;
}

.contact-line .card-icon {
   margin: 0;
}

.contact-line a:hover {
   color: var(--accent);
}

.form {
   display: grid;
   gap: 16px;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.field-group {
   display: grid;
   gap: 8px;
}

.field-group label {
   font-size: 14px;
   font-weight: 600;
}

.input {
   width: 100%;
   height: 48px;
   padding: 0 16px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--bg);
   color: var(--text);
   font: inherit;
   font-size: 16px;
   transition: border-color .2s;
}

.input:focus {
   border-color: var(--accent);
}

textarea.input {
   height: auto;
   min-height: 140px;
   padding: 14px 16px;
   resize: vertical;
}

.form-status {
   min-height: 1.6em;
   color: var(--accent);
   font-weight: 600;
   font-size: 15px;
}

/* Reveal */
.js .reveal {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity .6s ease-out, transform .6s ease-out;
}

.js .reveal.is-in {
   opacity: 1;
   transform: none;
}

/* 6. RESPONSIVE */
@media (max-width: 1024px) {
   .grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 48px;
   }

   .grid>* {
      grid-column: 1 / -1;
   }

   .hero-copy {
      max-width: 640px;
      margin-inline: auto;
      text-align: center;
   }

   .hero-sub {
      margin-inline: auto;
   }

   .hero-ctas,
   .trust {
      justify-content: center;
   }

   .hero-visual {
      width: 100%;
      max-width: 640px;
      margin-inline: auto;
   }

   .bento>* {
      grid-column: span 6;
   }

   .bento .b-lg-a,
   .bento .b-lg-b,
   .bento .b-wide {
      grid-column: 1 / -1;
      grid-row: auto;
   }
}

@media (max-width: 768px) {
   :root {
      --section: 64px;
   }

   .hero {
      padding: 120px 0 64px;
   }

   .steps,
   .bonus-grid,
   .offer-card {
      grid-template-columns: 1fr;
   }

   .steps::before {
      display: none;
   }

   .section-head {
      margin-bottom: 40px;
   }

   .bonus {
      padding: 32px 24px;
   }

   .cta-card {
      padding: 64px 24px;
      border-radius: 24px;
   }

   .offer-art {
      order: -1;
      padding: 24px;
   }

   .offer-art svg {
      max-width: 160px;
   }

   .offer-body {
      padding: 28px 24px 24px;
   }
}

@media (max-width: 640px) {
   .container {
      padding-inline: 20px;
   }

   .bento {
      grid-template-columns: 1fr;
   }

   .bento>*,
   .bento .b-lg-a,
   .bento .b-lg-b,
   .bento .b-wide {
      grid-column: 1 / -1;
      grid-row: auto;
   }

   .pay-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .form-row {
      grid-template-columns: 1fr;
   }

   .hero-ctas .btn {
      flex: 1 1 100%;
   }

   .card {
      padding: 24px;
   }
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation: none !important;
      transition-duration: .01ms !important;
   }

   .js .reveal {
      opacity: 1;
      transform: none;
   }
}

/* -- Index-page-specific overrides go below this line -- */

/* ==========================================================================
   DXB OPTION - DARK MODERN LANDING PAGE STYLES (MATCHES LANDINGPAGE FOLDER)
   ========================================================================== */

:root {
  --lp-bg: #ffffff;
  --lp-fg: #0b1020;
  --lp-card: #ffffff;
  --lp-card-fg: #0b1020;
  --lp-primary: #4f46e5;
  --lp-primary-fg: #ffffff;
  --lp-secondary: #f4f5fb;
  --lp-secondary-fg: #0b1020;
  --lp-muted: #f4f5fb;
  --lp-muted-fg: #5b6478;
  --lp-accent: #eef0ff;
  --lp-accent-fg: #3730a3;
  --lp-border: #e6e8f0;
  --lp-bull: #10b981;
  --lp-bear: #f43f5e;
  --lp-ink: #070b1a;
  --lp-ink-fg: #e7e9f5;
  --lp-radius: 0.875rem;
  --lp-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --lp-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --lp-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.lp-body {
  font-family: var(--lp-font-sans);
  color: var(--lp-fg);
  background-color: var(--lp-bg);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   TRANSPARENT GLASSY NAVBAR FOR LANDING PAGE
   ========================================================================== */
body.page-home .nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 24px));
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-home .nav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 12px 0 20px;
  border-radius: 999px;
  background: rgba(12, 17, 36, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.page-home .nav-bar.nav-scrolled {
  background: rgba(7, 11, 26, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

body.page-home .logo {
  color: #ffffff !important;
  font-family: var(--lp-font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
}

body.page-home .nav-links a {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}

body.page-home .nav-links a:hover,
body.page-home .nav-links a.is-active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.page-home .btn-ghost {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
}

body.page-home .btn-ghost:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.page-home .btn-primary {
  background: var(--lp-bull) !important;
  color: var(--lp-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px -3px var(--lp-bull) !important;
  border: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-home .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px -2px var(--lp-bull) !important;
}

body.page-home .icon-btn {
  color: #ffffff !important;
}

body.page-home .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Glassy Mobile Dropdown */
body.page-home .nav-panel {
  background: rgba(12, 17, 36, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
}

body.page-home .nav-panel > a {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.page-home .nav-panel > a:hover,
body.page-home .nav-panel > a.is-active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.page-home .panel-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Container */
.lp-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Gradients and Text Utilities */
.lp-grad-brand {
  background: linear-gradient(100deg, #4f46e5, #7c3aed 45%, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-grad-bull {
  background: linear-gradient(100deg, #34d399, #10b981 40%, #a7f3d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-grad-bear {
  background: linear-gradient(100deg, #fb7185, #f43f5e 40%, #fecdd3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-txt-bull { color: var(--lp-bull) !important; }
.lp-txt-bear { color: var(--lp-bear) !important; }
.lp-bg-bull { background-color: var(--lp-bull) !important; }
.lp-bg-bear { background-color: var(--lp-bear) !important; }

/* Buttons */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lp-font-heading);
  font-weight: 600;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
}

.lp-btn:hover {
  transform: translateY(-2px);
}

.lp-btn-lg {
  height: 54px;
  padding: 0 32px;
  font-size: 16px;
}

.lp-btn-bull {
  background-color: var(--lp-bull);
  color: var(--lp-ink);
  box-shadow: 0 0 35px -6px var(--lp-bull);
  border: none;
}

.lp-btn-bull:hover {
  box-shadow: 0 0 45px -4px var(--lp-bull);
}

.lp-btn-glass {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

.lp-btn-glass:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.lp-btn-outline {
  border: 1px solid var(--lp-border);
  background-color: var(--lp-bg);
  color: var(--lp-fg);
  height: 48px;
  padding: 0 24px;
  font-size: 14px;
}

.lp-btn-outline:hover {
  border-color: rgba(11, 16, 32, 0.3);
}

.lp-btn-white-solid {
  background-color: #ffffff;
  color: #065f46;
  height: 48px;
  padding: 0 24px;
  font-size: 14px;
  border: none;
}

.lp-btn-primary {
  background-color: var(--lp-primary);
  color: #ffffff;
  border: none;
  height: 48px;
  font-size: 15px;
}

.lp-btn-block {
  width: 100%;
}

.lp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lp-icon-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lp-icon-xs {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.lp-icon-lg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.lp-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--lp-ink);
  color: var(--lp-ink-fg);
  padding-top: 130px;
  padding-bottom: 0;
  isolation: isolate;
}

.lp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lp-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.lp-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
}

.lp-blob-primary {
  top: 40px;
  left: -160px;
  width: 520px;
  height: 520px;
  background-color: rgba(79, 70, 229, 0.3);
}

.lp-blob-bull {
  bottom: 0;
  right: -120px;
  width: 480px;
  height: 480px;
  background-color: rgba(16, 185, 129, 0.2);
}

.lp-blob-bear {
  top: 0;
  right: 30%;
  width: 300px;
  height: 300px;
  background-color: rgba(244, 63, 94, 0.15);
}

.lp-hero-candles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  opacity: 0.38;
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
}

.lp-candle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lp-cbdl {
  animation: lp-candle-rise 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.55;
}

@keyframes lp-candle-rise {
  0%, 100% { transform: scaleY(1); opacity: 0.55; }
  50% { transform: scaleY(1.18); opacity: 0.9; }
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 40px;
  padding-bottom: 90px;
}

@media (max-width: 1024px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 60px;
  }
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}

.lp-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--lp-bull);
  animation: lp-pulse-ring 2s ease-out infinite;
}

@keyframes lp-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.lp-hero-h1 {
  margin-top: 24px;
  margin-bottom: 0;
  font-family: var(--lp-font-heading);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.lp-hero-h1-sub {
  display: block;
  margin-top: 8px;
}

.lp-dir-word-wrap {
  display: inline-flex;
  perspective: 600px;
}

.lp-dir-word {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  animation: lp-word-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes lp-word-in {
  from { opacity: 0; transform: translateY(40%) rotateX(-60deg); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

.lp-dir-up {
  background: linear-gradient(100deg, #34d399, #10b981 40%, #a7f3d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-dir-up svg { color: var(--lp-bull); }

.lp-dir-down {
  background: linear-gradient(100deg, #fb7185, #f43f5e 40%, #fecdd3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-dir-down svg { color: var(--lp-bear); }

.lp-hero-desc {
  margin-top: 22px;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

.lp-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.lp-trust-list {
  margin-top: 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.lp-trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   TERMINAL WITH 5-MINUTE COUNTDOWN
   ========================================================================== */
.lp-terminal-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.lp-terminal-glow {
  position: absolute;
  inset: -14px;
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.4), rgba(16, 185, 129, 0.2) 50%, rgba(244, 63, 94, 0.25));
  filter: blur(40px);
  opacity: 0.75;
}

.lp-terminal {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(12, 17, 36, 0.92);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
}

.lp-term-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 18px;
}

.lp-term-asset-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-term-asset-badge {
  font-family: var(--lp-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-term-price {
  font-family: var(--lp-font-mono);
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lp-term-header-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-tag-timeframe {
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(79, 70, 229, 0.25);
  padding: 3px 8px;
  border-radius: 9999px;
}

.lp-tag-payout {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 9999px;
}

.lp-tag-demo {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 9999px;
}

.lp-chart-container {
  position: relative;
  display: flex;
  height: 220px;
  margin: 10px 10px 0 10px;
  background: rgba(6, 10, 22, 0.45);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-chart-viewport {
  flex: 1;
  position: relative;
  height: 100%;
  min-width: 0;
}

.lp-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Virtual Price Bar (Right-side scale axis) */
.lp-price-bar {
  width: 66px;
  flex-shrink: 0;
  position: relative;
  height: 100%;
  background: rgba(9, 13, 26, 0.85);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  overflow: visible;
}

.lp-price-scale-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lp-price-tick {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lp-tick-line {
  width: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.lp-tick-val {
  font-family: var(--lp-font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-price-bar-current {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 3px 5px 3px 8px;
  font-family: var(--lp-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: top 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}

.lp-price-bar-current::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.lp-price-bar-current.lp-bg-bull::before {
  border-right: 5px solid var(--lp-bull);
}

.lp-price-bar-current.lp-bg-bear::before {
  border-right: 5px solid var(--lp-bear);
}

.lp-price-bar-entry {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 2px 4px 2px 7px;
  font-family: var(--lp-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  z-index: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lp-entry-up {
  background: rgba(16, 185, 129, 0.85);
  border-left: 2px solid #a7f3d0;
}

.lp-entry-down {
  background: rgba(244, 63, 94, 0.85);
  border-left: 2px solid #fecdd3;
}

.lp-result-banner {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  backdrop-filter: blur(12px);
  z-index: 10;
  animation: lp-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lp-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.lp-result-win {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--lp-bull);
}

.lp-result-lose {
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: var(--lp-bear);
}

.lp-result-title {
  font-family: var(--lp-font-heading);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}

.lp-result-sub {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.lp-term-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-term-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
}

.lp-timer-num {
  font-family: var(--lp-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}

.lp-trade-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border-radius: 8px;
  font-family: var(--lp-font-heading);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lp-trade-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.lp-btn-up {
  background-color: var(--lp-bull);
  color: var(--lp-ink);
  box-shadow: 0 4px 15px -3px var(--lp-bull);
}

.lp-btn-down {
  background-color: var(--lp-bear);
  color: #ffffff;
  box-shadow: 0 4px 15px -3px var(--lp-bear);
}

.lp-dimmed {
  opacity: 0.35;
  cursor: not-allowed;
}

.lp-trade-btn:disabled {
  cursor: not-allowed;
}

.lp-term-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.lp-term-progress-fill {
  height: 100%;
  background-color: var(--lp-primary);
  transition: width 1s linear;
}

.lp-term-hint {
  margin: 0;
  padding: 9px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Stats Bar */
.lp-stats-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (max-width: 640px) {
  .lp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.lp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-stat-val {
  font-family: var(--lp-font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #ffffff;
}

.lp-stat-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   TRADABLE ASSETS SHOWCASE (NO FAKE LIVE DATA / NO RATIOS)
   ========================================================================== */
.lp-ticker-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--lp-border);
  background-color: var(--lp-bg);
  padding: 16px 0;
}

.lp-ticker-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 10;
  pointer-events: none;
}

.lp-ticker-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--lp-bg), transparent);
}

.lp-ticker-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--lp-bg), transparent);
}

.lp-ticker-track {
  display: flex;
  width: max-content;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: lp-marquee 35s linear infinite;
}

.lp-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes lp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.lp-ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(11, 16, 32, 0.04);
}

.lp-asset-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}

.lp-asset-fx {
  background: rgba(79, 70, 229, 0.1);
  color: var(--lp-primary);
}

.lp-asset-crypto {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.lp-asset-metals {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}

.lp-ticker-name {
  font-family: var(--lp-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-fg);
}

.lp-ticker-sub {
  font-family: var(--lp-font-mono);
  font-size: 12px;
  color: var(--lp-muted-fg);
}

/* ==========================================================================
   SECTIONS GENERAL
   ========================================================================== */
.lp-section {
  padding-top: 96px;
  padding-bottom: 96px;
  scroll-margin-top: 80px;
}

.lp-bg-secondary {
  background-color: var(--lp-secondary);
}

.lp-section-head {
  margin-bottom: 50px;
}

.lp-center {
  text-align: center;
}

.lp-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lp-primary);
  margin-bottom: 12px;
}

.lp-h2 {
  font-family: var(--lp-font-heading);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lp-fg);
  margin: 0;
}

.lp-section-lead {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-muted-fg);
  max-width: 600px;
}

.lp-center .lp-section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.lp-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .lp-steps-grid {
    grid-template-columns: 1fr;
  }
}

.lp-steps-line {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 56px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(79, 70, 229, 0.4), var(--lp-bull), transparent);
  pointer-events: none;
}

@media (max-width: 860px) {
  .lp-steps-line { display: none; }
}

.lp-step-card {
  position: relative;
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  padding: 36px 30px;
  box-shadow: 0 2px 8px rgba(11, 16, 32, 0.03);
  transition: transform 0.25s ease;
}

.lp-step-card:hover {
  transform: translateY(-4px);
}

.lp-step-card-featured {
  border: 2px solid rgba(79, 70, 229, 0.3);
  box-shadow: 0 12px 30px -10px rgba(79, 70, 229, 0.15);
}

.lp-step-num {
  position: absolute;
  right: 24px;
  top: 16px;
  font-family: var(--lp-font-heading);
  font-size: 72px;
  font-weight: 800;
  color: rgba(11, 16, 32, 0.05);
  pointer-events: none;
  line-height: 1;
}

.lp-step-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.lp-step-icon-accent {
  background-color: var(--lp-accent);
  color: var(--lp-primary);
}

.lp-step-icon-bull {
  background-color: rgba(16, 185, 129, 0.12);
  color: var(--lp-bull);
}

.lp-step-icon-bear {
  background-color: rgba(244, 63, 94, 0.12);
  color: var(--lp-bear);
}

.lp-step-icons-pair {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.lp-h3 {
  font-family: var(--lp-font-heading);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--lp-fg);
}

.lp-muted-desc {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 15px;
  color: var(--lp-muted-fg);
  line-height: 1.6;
}

/* ==========================================================================
   FEATURES (BENTO GRID)
   ========================================================================== */
.lp-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .lp-bento-grid {
    grid-template-columns: 1fr;
  }
}

.lp-bento-hero {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  background-color: var(--lp-ink);
  color: #ffffff;
  border-radius: 28px;
  padding: 40px;
  isolation: isolate;
}

@media (max-width: 900px) {
  .lp-bento-hero {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.lp-bento-candles {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.45;
  mask-image: linear-gradient(to top, #000 10%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 80%);
}

.lp-bento-glow {
  position: absolute;
  right: -80px;
  top: -80px;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.4);
  filter: blur(60px);
}

.lp-feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

.lp-feat-icon-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-feat-icon-accent {
  background-color: var(--lp-accent);
  color: var(--lp-primary);
}

.lp-feat-icon-glass-green {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.lp-bento-h3 {
  font-family: var(--lp-font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 24px;
  margin-bottom: 0;
  max-width: 440px;
}

.lp-bento-desc {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  max-width: 440px;
}

.lp-bento-chips {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-chip {
  padding: 8px 16px;
  border-radius: 9999px;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  font-weight: 500;
}

.lp-chip-bull {
  background: rgba(16, 185, 129, 0.15);
  color: var(--lp-bull);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.lp-chip-glass {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-bento-grad {
  background: linear-gradient(135deg, var(--lp-primary), #7c3aed);
  color: #ffffff;
  border-radius: 28px;
  padding: 32px;
}

.lp-bento-dollar {
  font-family: var(--lp-font-heading);
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  margin: 18px 0 0 0;
}

.lp-bento-card-title {
  font-family: var(--lp-font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 0;
}

.lp-bento-card-sub {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.lp-bento-white {
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  padding: 32px;
}

.lp-txt-dark {
  color: var(--lp-fg);
}

.lp-chips-list {
  list-style: none;
  margin: 18px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-chips-list li {
  padding: 6px 12px;
  border-radius: 9999px;
  background-color: var(--lp-secondary);
  border: 1px solid var(--lp-border);
  font-size: 12px;
  font-weight: 600;
}

.lp-bento-mini {
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  padding: 28px;
  transition: all 0.2s ease;
}

.lp-bento-mini:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.08);
}

.lp-mini-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-color: var(--lp-accent);
  color: var(--lp-primary);
  display: grid;
  place-items: center;
}

.lp-bento-mini:hover .lp-mini-icon {
  background-color: var(--lp-primary);
  color: #ffffff;
}

.lp-mini-title {
  font-family: var(--lp-font-heading);
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 0 0;
  color: var(--lp-fg);
}

.lp-mini-desc {
  margin: 6px 0 0 0;
  font-size: 14px;
  color: var(--lp-muted-fg);
}

/* ==========================================================================
   PAYMENTS SECTION
   ========================================================================== */
.lp-payments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

@media (max-width: 900px) {
  .lp-payments-grid {
    grid-template-columns: 1fr;
  }
}

.lp-check-list {
  list-style: none;
  margin: 28px 0 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lp-check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
}

.lp-check-icon {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--lp-bull);
  display: grid;
  place-items: center;
}

.lp-check-icon svg {
  width: 14px;
  height: 14px;
}

.lp-payments-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 540px) {
  .lp-payments-methods {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp-pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 24px;
  padding: 24px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(11, 16, 32, 0.03);
}

.lp-pay-offset {
  transform: translateY(16px);
}

@media (max-width: 540px) {
  .lp-pay-offset { transform: none; }
}

.lp-pay-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: var(--lp-accent);
  color: var(--lp-primary);
  display: grid;
  place-items: center;
}

.lp-pay-icon svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   BONUSES SECTION
   ========================================================================== */
.lp-bonuses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .lp-bonuses-grid {
    grid-template-columns: 1fr;
  }
}

.lp-bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  padding: 36px;
  overflow: hidden;
}

.lp-bonus-card-green {
  background: linear-gradient(135deg, var(--lp-bull), #047857);
  border: none;
  color: #ffffff;
}

.lp-bonus-watermark {
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-family: var(--lp-font-heading);
  font-size: 170px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
  pointer-events: none;
}

.lp-bonus-title {
  font-family: var(--lp-font-heading);
  font-size: 26px;
  font-weight: 800;
  margin: 24px 0 0 0;
}

.lp-bonus-desc {
  margin-top: 10px;
  margin-bottom: 28px;
  font-size: 16px;
  color: var(--lp-muted-fg);
  flex-grow: 1;
}

.text-white { color: #ffffff !important; }
.text-white-opacity { color: rgba(255, 255, 255, 0.85) !important; }

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.lp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}

@media (max-width: 900px) {
  .lp-faq-grid {
    grid-template-columns: 1fr;
  }
}

.lp-link-sub {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  color: var(--lp-primary);
  text-decoration: none;
}

.lp-link-sub:hover {
  text-decoration: underline;
}

.lp-faq-list {
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  overflow: hidden;
}

.lp-faq-item {
  border-bottom: 1px solid var(--lp-border);
  padding: 0 28px;
}

.lp-faq-item:last-child {
  border-bottom: none;
}

.lp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--lp-font-heading);
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}

.lp-faq-q::-webkit-details-marker {
  display: none;
}

.lp-faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--lp-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.lp-faq-icon svg {
  width: 16px;
  height: 16px;
}

.lp-faq-item[open] .lp-faq-icon {
  transform: rotate(45deg);
  background-color: var(--lp-primary);
  color: #ffffff;
}

.lp-faq-a {
  margin: 0;
  padding-bottom: 22px;
  padding-right: 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-muted-fg);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.lp-final-cta-section {
  padding: 20px 0;
}

.lp-final-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background-color: var(--lp-ink);
  color: #ffffff;
  padding: 80px 24px;
  text-align: center;
  isolation: isolate;
}

.lp-cta-candles {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

.lp-cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 460px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.4);
  filter: blur(120px);
  z-index: -1;
}

.lp-cta-badge {
  font-family: var(--lp-font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--lp-bull);
  margin: 0;
}

.lp-cta-h2 {
  font-family: var(--lp-font-heading);
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  margin: 20px auto 0 auto;
  max-width: 760px;
}

.lp-cta-sub {
  margin: 20px auto 0 auto;
  max-width: 460px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
}

.lp-final-cta-card .lp-btn {
  margin-top: 36px;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.lp-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

@media (max-width: 900px) {
  .lp-about-grid {
    grid-template-columns: 1fr;
  }
}

.lp-about-text p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--lp-muted-fg);
  margin-top: 18px;
  margin-bottom: 0;
}

.lp-about-media {
  position: relative;
}

.lp-about-glow {
  position: absolute;
  inset: -16px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(16, 185, 129, 0.25));
  filter: blur(35px);
  z-index: -1;
}

.lp-about-img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 1px solid var(--lp-border);
  box-shadow: 0 20px 45px rgba(11, 16, 32, 0.08);
  display: block;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.lp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
}

@media (max-width: 900px) {
  .lp-contact-grid {
    grid-template-columns: 1fr;
  }
}

.lp-contact-meta {
  list-style: none;
  margin: 32px 0 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  font-weight: 600;
  font-size: 16px;
}

.lp-contact-meta li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-contact-meta a {
  color: var(--lp-fg);
  text-decoration: none;
}

.lp-contact-meta a:hover {
  color: var(--lp-primary);
}

.lp-meta-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-color: var(--lp-accent);
  color: var(--lp-primary);
  display: grid;
  place-items: center;
}

.lp-meta-icon svg {
  width: 20px;
  height: 20px;
}

.lp-contact-card {
  background-color: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 4px 14px rgba(11, 16, 32, 0.03);
}

.lp-contact-form {
  display: grid;
  gap: 20px;
}

.lp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 600px) {
  .lp-form-row {
    grid-template-columns: 1fr;
  }
}

.lp-form-field {
  display: grid;
  gap: 8px;
}

.lp-form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-fg);
}

.lp-form-field input,
.lp-form-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background-color: var(--lp-bg);
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--lp-fg);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.lp-form-field input:focus,
.lp-form-field textarea:focus {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.lp-form-status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.lp-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--lp-ink);
  color: var(--lp-ink-fg);
  margin-top: 96px;
  padding-top: 80px;
  box-sizing: border-box;
}

.lp-footer-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.2);
  filter: blur(120px);
  pointer-events: none;
}

.lp-footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: 48px;
}

@media (max-width: 900px) {
  .lp-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .lp-footer-top {
    grid-template-columns: 1fr;
  }
}

.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lp-logo-mark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px;
  box-sizing: border-box;
}

.lp-logo-bar {
  width: 5px;
  border-radius: 2px;
}

.lp-logo-text {
  font-family: var(--lp-font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.lp-footer-desc {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 300px;
  line-height: 1.6;
}

.lp-footer-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.lp-footer-email:hover {
  color: #ffffff;
}

.lp-footer-head {
  margin: 0 0 20px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
}

.lp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lp-footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.lp-footer-links a:hover {
  color: var(--lp-bull);
}

.lp-footer-watermark {
  margin-top: 60px;
  user-select: none;
  text-align: center;
  font-family: var(--lp-font-heading);
  font-size: clamp(60px, 17vw, 200px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.04);
}

.lp-slash {
  color: rgba(16, 185, 129, 0.2);
}

.lp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 30px 0;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.lp-footer-risk {
  max-width: 600px;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .lp-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}