:root {
      --ink: #0A1628;
      --ink2: #0F2138;
      --ink3: #1A2D47;
      --paper: #FFFFFF;
      --paper2: #F7F9FC;
      --line: #E1E7F0;
      --line2: #CCD5E2;
      --muted: #5E6E85;
      --muted2: #8FA0B8;
      --blue: #3B9BE5;
      --blue-d: #2A7BC4;
      --blue-l: #5DB3F0;
      --green: #5DC158;
      --green-d: #46A444;
      --green-l: #7FD073;
      --buy: #10B981;
      --sell: #EF4444;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    *::selection {
      background: var(--ink);
      color: var(--paper)
    }

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

    body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--paper);
      color: var(--ink);
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

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

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

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none
    }

    .serif {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      letter-spacing: -.025em
    }

    .ticker {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 34px;
      background: var(--ink);
      color: var(--paper);
      z-index: 950;
      overflow: hidden;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .ticker-track {
      display: flex;
      gap: 48px;
      animation: tk 60s linear infinite;
      white-space: nowrap;
      padding-left: 100%;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .04em
    }

    .tk-item {
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .tk-pair {
      opacity: .5;
      text-transform: uppercase
    }

    .tk-price {
      font-weight: 600
    }

    .tk-up {
      color: #5DC158
    }

    .tk-down {
      color: #EF6F6F
    }

    .tk-dot {
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, .3);
      border-radius: 50%
    }

    @keyframes tk {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    nav {
      position: fixed;
      top: 34px;
      left: 0;
      right: 0;
      z-index: 900;
      transition: all .35s cubic-bezier(.16, 1, .3, 1);
      padding: 18px 0
    }

    nav.stuck {
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(20px) saturate(1.5);
      box-shadow: 0 1px 0 var(--line);
      padding: 12px 0
    }

    .nav-wrap {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px
    }

    .nav-logo {
      display: flex;
      align-items: center;
      transition: transform .3s
    }

    .nav-logo:hover {
      transform: scale(1.03)
    }

    .nav-logo img {
      height: 44px;
      width: auto
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none
    }

    .nav-link {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      padding: 10px 18px;
      border-radius: 8px;
      transition: color .25s;
      display: inline-block
    }

    .nav-link::before {
      content: '';
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 6px;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1)
    }

    .nav-link:hover::before,
    .nav-link.active::before {
      transform: scaleX(1)
    }

    .nav-link.active {
      color: var(--blue-d)
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .btn-login {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      background: transparent;
      padding: 11px 20px;
      border-radius: 8px;
      border: 1px solid var(--line);
      transition: all .25s
    }

    .btn-login:hover {
      border-color: var(--ink);
      background: var(--paper2)
    }

    .btn-cta-nav {
      position: relative;
      font-size: 13px;
      font-weight: 700;
      color: var(--paper);
      background: var(--ink);
      padding: 12px 22px;
      border-radius: 8px;
      transition: all .3s cubic-bezier(.16, 1, .3, 1);
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .btn-cta-nav::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1)
    }

    .btn-cta-nav:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -8px rgba(59, 155, 229, .5)
    }

    .btn-cta-nav:hover::before {
      transform: translateY(0)
    }

    .btn-cta-nav span {
      position: relative;
      z-index: 1
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px
    }

    .mob-nav {
      display: none;
      position: fixed;
      inset: 34px 0 0 0;
      background: var(--paper);
      z-index: 850;
      padding: 96px 32px 32px;
      flex-direction: column;
      overflow-y: auto
    }

    .mob-nav.open {
      display: flex
    }

    .mob-nav a {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 28px;
      font-weight: 600;
      color: var(--ink);
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
      letter-spacing: -.02em
    }

    .mob-btns {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 32px
    }

    .mob-btns button {
      width: 100%;
      padding: 16px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 140px 32px 80px;
      position: relative;
      background: var(--paper);
      overflow: hidden
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 20% 30%, rgba(59, 155, 229, .07), transparent 50%), radial-gradient(circle at 80% 70%, rgba(93, 193, 88, .05), transparent 50%);
      pointer-events: none
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(var(--paper2) 1px, transparent 1px), linear-gradient(90deg, var(--paper2) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity: .5;
      pointer-events: none;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%)
    }

    .hero-in {
      max-width: 1300px;
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 64px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(59, 155, 229, .08);
      border: 1px solid rgba(59, 155, 229, .18);
      padding: 7px 14px 7px 10px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      color: var(--blue-d);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 28px;
      font-family: 'JetBrains Mono', monospace
    }

    .hero-badge::before {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .hero h1 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(44px, 5.5vw, 80px);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -.04em;
      color: var(--ink);
      margin-bottom: 24px
    }

    .hero h1 .grad {
      background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block
    }

    .hero-sub {
      font-size: 19px;
      line-height: 1.55;
      color: var(--muted);
      margin-bottom: 38px;
      max-width: 520px;
      font-weight: 400
    }

    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 56px
    }

    .btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: var(--paper);
      background: var(--ink);
      padding: 16px 30px;
      border-radius: 10px;
      transition: all .35s cubic-bezier(.16, 1, .3, 1);
      overflow: hidden
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(.16, 1, .3, 1)
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 40px -10px rgba(59, 155, 229, .5)
    }

    .btn-primary:hover::before {
      transform: translateY(0)
    }

    .btn-primary span,
    .btn-primary svg {
      position: relative;
      z-index: 1
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      background: transparent;
      border: 1.5px solid var(--line2);
      padding: 14.5px 28px;
      border-radius: 10px;
      transition: all .3s
    }

    .btn-secondary:hover {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--paper);
      transform: translateY(-2px)
    }

    .hero-stats {
      display: flex;
      gap: 48px;
      flex-wrap: wrap;
      padding-top: 36px;
      border-top: 1px solid var(--line)
    }

    .hst-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 38px;
      font-weight: 700;
      letter-spacing: -.04em;
      color: var(--ink);
      line-height: 1;
      font-feature-settings: 'tnum'
    }

    .hst-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 10px
    }

    .hero-right {
      position: relative
    }

    .term {
      position: relative;
      background: var(--ink);
      border-radius: 18px;
      padding: 30px;
      box-shadow: 0 40px 80px -30px rgba(10, 22, 40, .35), 0 0 0 1px rgba(59, 155, 229, .1);
      overflow: hidden
    }

    .term::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .term-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .term-ttl {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      font-weight: 500
    }

    .term-dot {
      width: 8px;
      height: 8px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(93, 193, 88, .15)
    }

    .term-live {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .term-live::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 1.5s infinite
    }

    .term-pair-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 22px
    }

    .term-pair {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--paper);
      margin-bottom: 4px
    }

    .term-pair-sub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255, 255, 255, .4)
    }

    .term-price {
      text-align: right
    }

    .term-price-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px;
      font-weight: 600;
      color: var(--paper);
      letter-spacing: -.02em
    }

    .term-price-c {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--green);
      margin-top: 4px;
      font-weight: 500
    }

    .term-chart {
      height: 140px;
      margin: 0 -30px 22px;
      padding: 0 30px
    }

    .term-chart svg {
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .tc-line {
      fill: none;
      stroke: url(#cg);
      stroke-width: 1.8;
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: dc 2.4s .6s cubic-bezier(.4, 0, .2, 1) forwards
    }

    .tc-fill {
      fill: url(#cf);
      opacity: 0;
      animation: fi 1s 2.5s forwards
    }

    @keyframes dc {
      to {
        stroke-dashoffset: 0
      }
    }

    @keyframes fi {
      to {
        opacity: 1
      }
    }

    .term-sigs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(255, 255, 255, .06);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 20px
    }

    .term-sig {
      background: var(--ink);
      padding: 14px 16px
    }

    .term-sig-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 6px;
      font-weight: 500
    }

    .term-sig-v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--green)
    }

    .term-feed {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: rgba(255, 255, 255, .04);
      border-radius: 8px;
      overflow: hidden
    }

    .term-feed-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 14px;
      background: var(--ink);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255, 255, 255, .6)
    }

    .term-feed-tag {
      font-size: 9px;
      padding: 3px 9px;
      border-radius: 4px;
      font-weight: 700;
      letter-spacing: .08em
    }

    .term-feed-tag.buy {
      background: rgba(93, 193, 88, .15);
      color: var(--green)
    }

    .term-feed-tag.sell {
      background: rgba(239, 111, 111, .15);
      color: #EF6F6F
    }

    .flt-card {
      position: absolute;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px 18px;
      box-shadow: 0 20px 40px -12px rgba(10, 22, 40, .15);
      z-index: 10
    }

    .flt-top {
      top: -18px;
      right: -18px
    }

    .flt-bot {
      bottom: -18px;
      left: -18px
    }

    .fc-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--green-d);
      letter-spacing: -.03em;
      line-height: 1
    }

    .fc-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 6px
    }

    .fc-n2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em
    }

    .sec {
      padding: 120px 32px
    }

    .sec-paper2 {
      background: var(--paper2)
    }

    .sec-dark {
      background: var(--ink);
      color: var(--paper);
      position: relative;
      overflow: hidden
    }

    .sec-in {
      max-width: 1300px;
      margin: 0 auto
    }

    .sec-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--blue-d);
      margin-bottom: 24px
    }

    .sec-label::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }
.title-wrap{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.subscribe-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border-radius:50px;
    background:#000;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    transition:0.3s ease;
}

.subscribe-btn:hover{
    background:#333;
    transform:translateY(-2px);
}
    .sec-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(36px, 4.2vw, 56px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.04em;
      color: var(--ink);
      margin-bottom: 20px
    }

    .sec-title .grad {
      background: linear-gradient(135deg, var(--blue), var(--green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .sec-sub {
      font-size: 18px;
      color: var(--muted);
      line-height: 1.55;
      max-width: 560px
    }

    .lead-sec {
      background: var(--ink);
      color: var(--paper);
      padding: 80px 32px;
      position: relative;
      overflow: hidden
    }

    .lead-sec::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%;
      height: 200%;
      background: radial-gradient(ellipse, rgba(59, 155, 229, .07), transparent 50%);
      transform: translate(-50%, -50%);
      pointer-events: none
    }

    .lead-in {
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1
    }

    .lead-in h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(32px, 3.8vw, 44px);
      font-weight: 700;
      letter-spacing: -.035em;
      line-height: 1.05;
      margin-bottom: 14px
    }

    .lead-in h2 .grad {
      background: linear-gradient(135deg, var(--blue-l), var(--green-l));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .lead-in>p {
      font-size: 16px;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 36px
    }

    .lead-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .lf-input,
    .lf-select {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 14px 16px;
      color: var(--paper);
      font-family: inherit;
      font-size: 14px;
      outline: none;
      transition: all .25s
    }

    .lf-input::placeholder {
      color: rgba(255, 255, 255, .35)
    }

    .lf-input:focus,
    .lf-select:focus {
      border-color: var(--blue);
      background: rgba(255, 255, 255, .08)
    }

    .lf-select {
      color: rgba(255, 255, 255, .6);
      -webkit-appearance: none;
      cursor: pointer
    }

    .lf-select option {
      background: var(--ink);
      color: var(--paper)
    }

    .lf-wide {
      grid-column: 1/-1
    }

    .phone-row {
      grid-column: 1/-1;
      display: flex;
      gap: 8px
    }

    .phone-code {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 14px;
      color: rgba(255, 255, 255, .7);
      font-size: 14px;
      display: flex;
      align-items: center;
      font-family: 'JetBrains Mono', monospace
    }

    .btn-lead-submit {
      grid-column: 1/-1;
      position: relative;
      font-family: inherit;
      font-weight: 700;
      font-size: 15px;
      color: var(--paper);
      background: var(--ink);
      padding: 16px;
      border-radius: 10px;
      margin-top: 8px;
      transition: all .3s;
      overflow: hidden
    }

    .btn-lead-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .btn-lead-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 40px -10px rgba(59, 155, 229, .5)
    }

    .btn-lead-submit:hover::before {
      transform: translateY(0)
    }

    .btn-lead-submit span {
      position: relative;
      z-index: 1
    }

    .lead-trust {
      margin-top: 20px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35)
    }

    .hl-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 56px
    }

    .hl-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 32px;
      transition: all .4s cubic-bezier(.16, 1, .3, 1);
      position: relative;
      overflow: hidden
    }

    .hl-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1)
    }

    .hl-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px -20px rgba(10, 22, 40, .15);
      border-color: rgba(59, 155, 229, .25)
    }

    .hl-card:hover::before {
      transform: scaleX(1)
    }

    .hl-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(59, 155, 229, .12), rgba(93, 193, 88, .08));
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      color: var(--blue-d);
      transition: all .3s
    }

    .hl-card:hover .hl-icon {
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: var(--paper)
    }

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

    .hl-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 21px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 12px;
      letter-spacing: -.025em;
      line-height: 1.2
    }

    .hl-desc {
      font-size: 14.5px;
      color: var(--muted);
      line-height: 1.65
    }

    .sub-banner {
      margin-top: 56px;
      background: var(--ink);
      border-radius: 20px;
      padding: 48px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 36px;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    .sub-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(93, 193, 88, .1), transparent 60%);
      pointer-events: none
    }

    .sub-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 10px 30px -8px rgba(59, 155, 229, .5);
      position: relative;
      z-index: 1;
      color: var(--paper)
    }

    .sub-icon svg {
      width: 30px;
      height: 30px
    }

    .sub-banner-l {
      position: relative;
      z-index: 1
    }

    .sub-tag {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--green-l);
      margin-bottom: 8px
    }

    .sub-banner h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--paper);
      margin-bottom: 6px;
      letter-spacing: -.025em
    }

    .sub-banner p {
      font-size: 15px;
      color: rgba(255, 255, 255, .55);
      line-height: 1.55;
      max-width: 480px
    }

    .sub-cta {
      text-align: right;
      position: relative;
      z-index: 1;
      flex-shrink: 0
    }

    .sub-price {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 48px;
      font-weight: 700;
      color: var(--paper);
      letter-spacing: -.04em;
      line-height: 1
    }

    .sub-price span {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, .5);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .sub-price-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-top: 8px
    }

    .btn-subscribe {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
      font-weight: 700;
      font-size: 14px;
      color: var(--ink);
      background: var(--paper);
      padding: 13px 24px;
      border-radius: 9px;
      margin-top: 14px;
      transition: all .3s;
      overflow: hidden
    }

    .btn-subscribe::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .btn-subscribe:hover {
      transform: translateY(-2px);
      color: var(--paper)
    }

    .btn-subscribe:hover::before {
      transform: translateY(0)
    }

    .btn-subscribe span {
      position: relative;
      z-index: 1
    }

    .dpt-row {
      display: inline-flex;
      gap: 2px;
      background: var(--paper2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 4px;
      margin-top: 48px
    }

    .dpt {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      padding: 10px 18px;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      transition: all .25s
    }

    .dpt.on {
      background: var(--ink);
      color: var(--paper);
      box-shadow: 0 4px 12px -4px rgba(10, 22, 40, .2)
    }

    .dpf {
      margin-top: 24px;
      background: var(--ink);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 40px 80px -30px rgba(10, 22, 40, .25)
    }

    .dpf-hdr {
      padding: 18px 28px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px
    }

    .dpf-ttl {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .dpf-ttl::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(93, 193, 88, .15)
    }

    .dpf-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      display: flex;
      gap: 18px;
      flex-wrap: wrap
    }

    .dpf-meta .live::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 1.5s infinite;
      margin-right: 6px;
      vertical-align: middle
    }

    .dash-c {
      display: none;
      padding: 28px;
      color: var(--paper)
    }

    .dash-c.on {
      display: block;
      animation: fu .5s cubic-bezier(.16, 1, .3, 1)
    }

    .fd-grid {
      display: grid;
      grid-template-columns: 240px 1fr 240px;
      gap: 16px
    }

    .fd-side,
    .fd-main,
    .fd-sum {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
      padding: 20px
    }

    .fd-side h4,
    .fd-sum h4 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .fd-side h4::before,
    .fd-sum h4::before {
      content: '';
      width: 16px;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .algo-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 14px
    }

    .algo-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .algo-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--paper)
    }

    .algo-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(245, 158, 11, .15);
      color: #FCD34D
    }

    .algo-scores {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 12px
    }

    .algo-score {
      text-align: center;
      padding: 10px 6px;
      border-radius: 6px
    }

    .algo-score.buy {
      background: rgba(16, 185, 129, .1);
      color: var(--buy)
    }

    .algo-score.sell {
      background: rgba(239, 68, 68, .1);
      color: var(--sell)
    }

    .algo-score-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      font-weight: 700
    }

    .algo-score-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: .7;
      margin-top: 3px;
      font-weight: 500
    }

    .algo-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .05)
    }

    .algo-stat-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      color: var(--paper)
    }

    .algo-stat-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      margin-top: 2px
    }

    .fd-pair {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .fd-pn {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--paper)
    }

    .fd-pm {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: rgba(255, 255, 255, .4);
      letter-spacing: .06em;
      text-transform: uppercase;
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 6px
    }

    .fd-pm .dot {
      width: 2px;
      height: 2px;
      background: rgba(255, 255, 255, .4);
      border-radius: 50%
    }

    .fd-tags {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      flex-wrap: wrap
    }

    .fd-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px
    }

    .fd-tag.bull {
      background: rgba(244, 114, 182, .15);
      color: #F472B6
    }

    .fd-tag.weak {
      background: rgba(245, 158, 11, .15);
      color: #FCD34D
    }

    .fd-tag.green {
      background: rgba(93, 193, 88, .15);
      color: var(--green-l)
    }

    .fd-price {
      text-align: right
    }

    .fd-price-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px;
      font-weight: 700;
      color: var(--paper);
      letter-spacing: -.02em
    }

    .fd-price-c {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--green);
      margin-top: 4px;
      font-weight: 500
    }

    .fd-buy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(93, 193, 88, .12);
      border: 1px solid rgba(93, 193, 88, .25);
      color: var(--green);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      padding: 6px 12px;
      border-radius: 5px;
      margin-top: 10px
    }

    .score-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px
    }

    .score-c {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-top: 2px solid var(--green);
      border-radius: 6px;
      padding: 12px
    }

    .score-c-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 6px
    }

    .score-c-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between
    }

    .score-c-n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      font-weight: 700;
      color: var(--paper)
    }

    .score-c-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--green)
    }

    .fd-overall {
      background: linear-gradient(135deg, var(--blue), var(--green));
      border-radius: 10px;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--paper)
    }

    .fd-overall-l {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .fd-overall-sub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .85;
      margin-top: 2px
    }

    .fd-overall-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -.03em
    }

    .fd-sum-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px
    }

    .fd-sum-row:last-child {
      border-bottom: none
    }

    .fd-sum-k {
      color: rgba(255, 255, 255, .5);
      letter-spacing: .04em
    }

    .fd-sum-v {
      color: var(--paper);
      font-weight: 600
    }

    .fd-sum-v.green {
      color: var(--green)
    }

    .fd-sum-v.gold {
      color: #FCD34D
    }

    .entry-box {
      margin-top: 14px;
      padding: 12px;
      background: rgba(93, 193, 88, .06);
      border: 1px solid rgba(93, 193, 88, .15);
      border-radius: 6px
    }

    .entry-row {
      display: flex;
      justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      padding: 4px 0
    }

    .entry-k {
      color: rgba(255, 255, 255, .55);
      letter-spacing: .04em
    }

    .entry-v {
      color: var(--paper);
      font-weight: 700
    }

    .mt-tbl {
      width: 100%;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      border-collapse: collapse;
      color: var(--paper)
    }

    .mt-tbl th {
      text-align: left;
      padding: 12px 14px;
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      font-weight: 500;
      background: rgba(255, 255, 255, .02);
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .mt-tbl td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      font-size: 11px
    }

    .mt-tbl tr:hover td {
      background: rgba(255, 255, 255, .02)
    }

    .mt-asset {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .mt-sym {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .04em;
      flex-shrink: 0
    }

    .mt-name {
      font-weight: 700;
      color: var(--paper)
    }

    .mt-sub {
      font-size: 9px;
      color: rgba(255, 255, 255, .4);
      margin-top: 2px
    }

    .mt-class {
      font-size: 8px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
      font-weight: 700
    }

    .mt-class.forex {
      background: rgba(59, 155, 229, .15);
      color: var(--blue-l)
    }

    .mt-class.crypto {
      background: rgba(245, 158, 11, .15);
      color: #FCD34D
    }

    .mt-class.commodity {
      background: rgba(192, 132, 252, .15);
      color: #C084FC
    }

    .mt-class.index {
      background: rgba(244, 114, 182, .15);
      color: #F472B6
    }

    .mt-sig {
      font-size: 9px;
      letter-spacing: .1em;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 4px;
      text-transform: uppercase
    }

    .mt-sig.buy {
      background: rgba(93, 193, 88, .12);
      color: var(--green)
    }

    .mt-sig.sell {
      background: rgba(239, 68, 68, .12);
      color: var(--sell)
    }

    .mt-sig.hold {
      background: rgba(245, 158, 11, .12);
      color: #FCD34D
    }

    .mt-conf {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mt-conf-bar {
      width: 60px;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 2px;
      overflow: hidden
    }

    .mt-conf-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .mt-conf-fill.low {
      background: #FBBF24
    }

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

    .tr-card {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
      overflow: hidden
    }

    .tr-head {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .tr-head-t {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--paper);
      letter-spacing: -.02em
    }

    .tr-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 100px;
      background: rgba(93, 193, 88, .15);
      color: var(--green);
      font-weight: 700
    }

    .tr-tag.live {
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .tr-tag.live::before {
      content: '';
      width: 5px;
      height: 5px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 1.5s infinite
    }

    .tr-table {
      width: 100%;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px
    }

    .tr-table th {
      padding: 10px 16px;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      text-align: left;
      font-weight: 500;
      background: rgba(255, 255, 255, .02);
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .tr-table td {
      padding: 12px 16px;
      color: var(--paper);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      font-size: 11px
    }

    .tr-table tr:last-child td {
      border-bottom: none
    }

    .tr-pair {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      letter-spacing: -.01em
    }

    .hiw-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 64px;
      position: relative
    }

    .hiw-row::before {
      content: '';
      position: absolute;
      top: 36px;
      left: 10%;
      right: 10%;
      height: 1.5px;
      background: var(--line);
      z-index: 0
    }

    .hiw-row::after {
      content: '';
      position: absolute;
      top: 36px;
      left: 10%;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      z-index: 1;
      width: 0;
      transition: width .8s cubic-bezier(.4, 0, .2, 1)
    }

    .hiw-row.s0::after {
      width: 0
    }

    .hiw-row.s1::after {
      width: 20%
    }

    .hiw-row.s2::after {
      width: 40%
    }

    .hiw-row.s3::after {
      width: 60%
    }

    .hiw-row.s4::after {
      width: 80%
    }

    .hiw-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 14px;
      cursor: pointer;
      position: relative;
      z-index: 2
    }

    .hiw-dot {
      width: 14px;
      height: 14px;
      background: var(--paper);
      border: 1.5px solid var(--line2);
      border-radius: 50%;
      margin-top: 29px;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      position: relative
    }

    .hiw-step.active .hiw-dot {
      background: var(--ink);
      border-color: var(--ink);
      transform: scale(1.4)
    }

    .hiw-step.active .hiw-dot::after {
      content: '';
      position: absolute;
      inset: -8px;
      border: 1.5px solid var(--blue);
      border-radius: 50%;
      opacity: .3;
      animation: dr 2s ease-out infinite
    }

    @keyframes dr {
      0% {
        transform: scale(.8);
        opacity: .6
      }

      100% {
        transform: scale(1.8);
        opacity: 0
      }
    }

    .hiw-step.done .hiw-dot {
      background: linear-gradient(135deg, var(--blue), var(--green));
      border-color: transparent
    }

    .hiw-step-t {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--muted2);
      margin: 22px 0 6px;
      letter-spacing: -.02em;
      transition: color .3s
    }

    .hiw-step-d {
      font-size: 13px;
      color: var(--muted2);
      line-height: 1.55;
      transition: color .3s
    }

    .hiw-step.active .hiw-step-t,
    .hiw-step.done .hiw-step-t {
      color: var(--ink)
    }

    .hiw-step.active .hiw-step-d {
      color: var(--muted)
    }

    .hiw-panel {
      margin-top: 56px;
      background: var(--ink);
      border-radius: 20px;
      padding: 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      min-height: 300px;
      position: relative;
      overflow: hidden
    }

    .hiw-panel::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(93, 193, 88, .1), transparent 60%);
      pointer-events: none
    }

    .hiw-panel-l {
      position: relative;
      z-index: 1
    }

    .hiw-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .hiw-meta::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .hiw-panel h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 40px;
      font-weight: 700;
      color: var(--paper);
      margin-bottom: 18px;
      letter-spacing: -.035em;
      line-height: 1.05
    }

    .hiw-panel p {
      color: rgba(255, 255, 255, .65);
      line-height: 1.65;
      margin-bottom: 24px;
      font-size: 16px;
      max-width: 440px
    }

    .hiw-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      color: var(--paper);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 9px 16px;
      border-radius: 100px
    }

    .hiw-vis {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px
    }

    .hiw-vis-n {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 120px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--blue), var(--green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -.06em;
      line-height: 1
    }

    .pg-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 48px;
      flex-wrap: wrap;
      gap: 24px
    }

    .ftabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .ftab {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 8px 16px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--muted);
      border-radius: 100px;
      transition: all .25s
    }

    .ftab.on {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink)
    }

    .ftab:hover:not(.on) {
      border-color: var(--ink);
      color: var(--ink)
    }

    .pgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px
    }

    .pcard {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: all .4s cubic-bezier(.16, 1, .3, 1);
      display: flex;
      flex-direction: column
    }

    .pcard:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px -20px rgba(10, 22, 40, .18);
      border-color: rgba(59, 155, 229, .25)
    }

    .pimg {
      aspect-ratio: 16/10;
      position: relative;
      overflow: hidden;
      background: var(--ink)
    }

    .pimg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .6s cubic-bezier(.16, 1, .3, 1);
      filter: saturate(.95)
    }

    .pcard:hover .pimg img {
      transform: scale(1.06);
      filter: saturate(1.1)
    }

    .pcat-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--paper);
      background: rgba(10, 22, 40, .75);
      backdrop-filter: blur(10px);
      padding: 5px 11px;
      border-radius: 5px;
      z-index: 2
    }

    .pcat-badge.ea {
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: var(--paper)
    }

    .pbody {
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--line)
    }

    .pname {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 19px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      letter-spacing: -.025em;
      line-height: 1.2
    }

    .pdesc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 22px;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .pfoot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--line)
    }

    .pprice {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.03em;
      font-feature-settings: 'tnum'
    }

    .btn-buy {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink);
      background: transparent;
      border: 1.5px solid var(--ink);
      padding: 10px 16px;
      border-radius: 100px;
      transition: all .25s
    }

    .btn-buy:hover {
      background: var(--ink);
      color: var(--paper)
    }

    .tgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 56px
    }

    .tcard {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 36px;
      display: flex;
      flex-direction: column;
      transition: all .4s;
      position: relative
    }

    .tcard::before {
      content: '"';
      position: absolute;
      top: 24px;
      right: 32px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 64px;
      color: var(--blue);
      opacity: .15;
      line-height: 1;
      font-weight: 700
    }

    .tcard:hover {
      transform: translateY(-4px);
      border-color: rgba(59, 155, 229, .25);
      box-shadow: 0 20px 40px -16px rgba(10, 22, 40, .15)
    }

    .tstars {
      display: flex;
      gap: 1px;
      margin-bottom: 18px;
      font-size: 14px
    }

    .tstars span {
      color: var(--green)
    }

    .ttext {
      font-size: 15.5px;
      color: var(--ink);
      line-height: 1.65;
      margin-bottom: 28px;
      flex: 1
    }

    .tauth {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 20px;
      border-top: 1px solid var(--line)
    }

    .tav {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 700;
      flex-shrink: 0
    }

    .tname {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em
    }

    .tsub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 2px
    }

    .cta-sec {
      padding: 120px 32px;
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .cta-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1000px;
      height: 600px;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse, rgba(59, 155, 229, .12), rgba(93, 193, 88, .06), transparent 60%);
      pointer-events: none
    }

    .cta-in {
      max-width: 720px;
      margin: 0 auto;
      position: relative;
      z-index: 1
    }

    .cta-in h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(40px, 5vw, 64px);
      font-weight: 700;
      color: var(--paper);
      margin-bottom: 20px;
      letter-spacing: -.04em;
      line-height: 1
    }

    .cta-in h2 .grad {
      background: linear-gradient(135deg, var(--blue-l), var(--green-l));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .cta-in p {
      color: rgba(255, 255, 255, .55);
      margin-bottom: 36px;
      font-size: 17px;
      line-height: 1.55
    }

    .cta-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap
    }

    .btn-cta1 {
      position: relative;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      background: var(--paper);
      padding: 18px 32px;
      border-radius: 10px;
      transition: all .3s;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .btn-cta1::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .btn-cta1:hover {
      color: var(--paper);
      transform: translateY(-2px)
    }

    .btn-cta1:hover::before {
      transform: translateY(0)
    }

    .btn-cta1 span {
      position: relative;
      z-index: 1
    }

    .btn-cta2 {
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      color: var(--paper);
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, .2);
      padding: 16.5px 30px;
      border-radius: 10px;
      transition: all .3s
    }

    .btn-cta2:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .4)
    }

    footer {
      background: var(--paper);
      padding: 80px 32px 36px;
      border-top: 1px solid var(--line)
    }

    .foot-in {
      max-width: 1300px;
      margin: 0 auto
    }

    .foot-disc {
      background: var(--paper2);
      border-radius: 12px;
      padding: 18px 22px;
      margin-bottom: 56px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.65
    }

    .foot-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 28px
    }

    .foot-brand img {
      height: 38px;
      margin-bottom: 16px
    }

    .foot-brand-d {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.65;
      max-width: 320px
    }

    .foot-col-t {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px
    }

    .foot-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .foot-links a {
      font-size: 14px;
      color: var(--ink);
      transition: color .2s
    }

    .foot-links a:hover {
      color: var(--blue-d)
    }

    .foot-bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 22, 40, .55);
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s;
      backdrop-filter: blur(12px)
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    .modal-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(680px, 100%);
      background: var(--paper);
      z-index: 2001;
      transform: translateX(100%);
      transition: transform .45s cubic-bezier(.16, 1, .3, 1);
      overflow-y: auto;
      box-shadow: -20px 0 60px rgba(10, 22, 40, .18)
    }

    .modal-panel.open {
      transform: translateX(0)
    }

    .modal-head {
      padding: 24px 32px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--paper);
      z-index: 10
    }

    .modal-back {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .modal-hero {
      width: 100%;
      aspect-ratio: 16/9;
      position: relative;
      background: var(--ink);
      overflow: hidden
    }

    .modal-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0
    }

    .modal-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--ink) 0%, rgba(10, 22, 40, .3) 60%, transparent 100%);
      z-index: 1
    }

    .modal-hero-c {
      position: absolute;
      bottom: 28px;
      left: 32px;
      right: 32px;
      z-index: 2
    }

    .modal-cat {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--green-l);
      margin-bottom: 8px
    }

    .modal-pname {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 30px;
      font-weight: 700;
      color: var(--paper);
      letter-spacing: -.03em;
      line-height: 1.05
    }

    .modal-info {
      padding: 32px
    }

    .modal-price-row {
      display: flex;
      align-items: end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      padding-bottom: 28px;
      margin-bottom: 28px;
      border-bottom: 1px solid var(--line)
    }

    .modal-price-l {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px
    }

    .modal-price {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 48px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.04em;
      line-height: 1;
      font-feature-settings: 'tnum'
    }

    .modal-price span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-left: 8px
    }

    .btn-modal-buy {
      position: relative;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--paper);
      background: var(--ink);
      padding: 16px 28px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all .3s;
      overflow: hidden
    }

    .btn-modal-buy::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .btn-modal-buy:hover {
      transform: translateY(-2px)
    }

    .btn-modal-buy:hover::before {
      transform: translateY(0)
    }

    .btn-modal-buy span,
    .btn-modal-buy svg {
      position: relative;
      z-index: 1
    }

    .modal-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 28px
    }

    .mfeat {
      background: var(--paper2);
      border-radius: 12px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .mfeat svg {
      width: 22px;
      height: 22px;
      color: var(--blue-d);
      margin-bottom: 4px
    }

    .mfeat-t {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.015em
    }

    .mfeat-d {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.55
    }

    .modal-desc-title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .modal-desc-title::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .modal-desc {
      font-size: 16px;
      color: var(--ink);
      line-height: 1.65;
      margin-bottom: 28px
    }

    .modal-specs {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 28px
    }

    .mspec {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
      font-size: 14px
    }

    .mspec:last-child {
      border: none
    }

    .mspec-k {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .08em;
      color: var(--muted)
    }

    .mspec-v {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink)
    }

    .modal-guarantee {
      background: linear-gradient(135deg, rgba(59, 155, 229, .06), rgba(93, 193, 88, .04));
      border: 1px solid rgba(59, 155, 229, .15);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      align-items: flex-start;
      gap: 16px
    }

    .modal-g-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--paper)
    }

    .modal-guarantee strong {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em;
      display: block;
      margin-bottom: 4px
    }

    .modal-guarantee p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55
    }

    .trial-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 22, 40, .6);
      z-index: 2100;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .trial-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    .trial-modal {
      background: var(--paper);
      border-radius: 16px;
      padding: 36px;
      max-width: 440px;
      width: 100%;
      transform: scale(.95) translateY(10px);
      transition: transform .4s cubic-bezier(.16, 1, .3, 1);
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 30px 70px -20px rgba(10, 22, 40, .3)
    }

    .trial-overlay.open .trial-modal {
      transform: scale(1) translateY(0)
    }

    .trial-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line)
    }

    .trial-head h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.03em
    }

    .trial-close {
      background: none;
      color: var(--muted);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all .2s;
      font-size: 22px;
      flex-shrink: 0
    }

    .trial-close:hover {
      background: var(--paper2);
      color: var(--ink)
    }

    .tf-group {
      margin-bottom: 20px
    }

    .tf-label {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 10px
    }

    .tf-input,
    .tf-select {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
      font-family: inherit;
      font-size: 14px;
      color: var(--ink);
      outline: none;
      transition: border-color .25s
    }

    .tf-input:focus,
    .tf-select:focus {
      border-color: var(--blue)
    }

    .tf-select {
      -webkit-appearance: none;
      color: var(--muted);
      cursor: pointer
    }

    .tf-radios {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .tf-radio {
      position: relative;
      cursor: pointer
    }

    .tf-radio input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    .tf-radio-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      transition: all .25s;
      background: var(--paper)
    }

    .tf-radio-circle {
      width: 18px;
      height: 18px;
      border: 1.5px solid var(--line2);
      border-radius: 50%;
      background: var(--paper);
      position: relative;
      transition: all .2s
    }

    .tf-radio-circle::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 8px;
      height: 8px;
      background: var(--paper);
      border-radius: 50%;
      transition: transform .2s
    }

    .tf-radio-text {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: var(--ink)
    }

    .tf-radio input:checked+.tf-radio-label {
      background: var(--blue);
      border-color: var(--blue)
    }

    .tf-radio input:checked+.tf-radio-label .tf-radio-circle {
      border-color: var(--paper);
      background: var(--blue)
    }

    .tf-radio input:checked+.tf-radio-label .tf-radio-circle::after {
      transform: translate(-50%, -50%) scale(1)
    }

    .tf-radio input:checked+.tf-radio-label .tf-radio-text {
      color: var(--paper)
    }

    .btn-trial-submit {
      position: relative;
      width: 100%;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--paper);
      background: var(--ink);
      padding: 16px;
      border-radius: 10px;
      margin-top: 8px;
      transition: all .3s;
      overflow: hidden
    }

    .btn-trial-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .btn-trial-submit:hover {
      transform: translateY(-2px)
    }

    .btn-trial-submit:hover::before {
      transform: translateY(0)
    }

    .btn-trial-submit span {
      position: relative;
      z-index: 1
    }

    .trial-success {
      display: none;
      text-align: center;
      padding: 24px 0
    }

    .trial-success svg {
      width: 56px;
      height: 56px;
      color: var(--green);
      margin: 0 auto 20px
    }

    .trial-success h4 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
      letter-spacing: -.025em
    }

    .trial-success p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55
    }

    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .rev {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)
    }

    .rev.vis {
      opacity: 1;
      transform: translateY(0)
    }

    .rd1 {
      transition-delay: .08s
    }

    .rd2 {
      transition-delay: .16s
    }

    .rd3 {
      transition-delay: .24s
    }

    .count-up {
      display: inline-block;
      font-feature-settings: 'tnum'
    }

    @media(max-width:1100px) {
      .hero-in {
        grid-template-columns: 1fr;
        gap: 64px
      }

      .hero-right {
        max-width: 560px;
        margin: 0 auto;
        width: 100%
      }

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

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

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

      .fd-grid {
        grid-template-columns: 1fr
      }

      .tr-grid {
        grid-template-columns: 1fr
      }

      .sub-banner {
        grid-template-columns: auto 1fr;
        gap: 24px
      }

      .sub-banner .sub-cta {
        grid-column: 1/-1;
        text-align: left;
        margin-top: 12px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .08)
      }

      .hiw-panel {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 32px
      }

      .foot-top {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {

      .nav-links,
      .nav-right {
        display: none
      }

      .hamburger {
        display: flex
      }

      .nav-wrap {
        padding: 0 24px;
        height: 60px
      }

      .hero {
        padding: 120px 24px 64px
      }

      .sec {
        padding: 80px 24px
      }

      .hero-stats {
        gap: 32px
      }

      .hl-grid {
        grid-template-columns: 1fr
      }

      .pgrid {
        grid-template-columns: 1fr
      }

      .tgrid {
        grid-template-columns: 1fr
      }

      .lead-form {
        grid-template-columns: 1fr
      }

      .lf-wide,
      .phone-row {
        grid-column: 1
      }

      .btn-lead-submit {
        grid-column: 1
      }

      .hiw-row {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .hiw-row::before,
      .hiw-row::after {
        display: none
      }

      .hiw-step {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 0;
        align-items: center;
        gap: 18px
      }

      .hiw-dot {
        margin: 0;
        flex-shrink: 0
      }

      .hiw-step-t {
        margin: 0
      }

      .hiw-step-d {
        display: none
      }

      .foot-top {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .modal-info,
      .modal-head {
        padding: 24px
      }

      .modal-features {
        grid-template-columns: 1fr
      }

      .trial-modal {
        padding: 28px
      }

      .ticker {
        height: 30px
      }

      .ticker-track {
        font-size: 10px
      }

      .mt-tbl {
        font-size: 10px
      }

      .mt-tbl th,
      .mt-tbl td {
        padding: 9px 10px
      }

      .mt-tbl th:nth-child(n+6),
      .mt-tbl td:nth-child(n+6) {
        display: none
      }

      .dpt-row {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap
      }

      .dpt {
        flex-shrink: 0
      }

      .flt-card.flt-top {
        top: -12px;
        right: 8px;
        padding: 10px 14px
      }

      .flt-card.flt-bot {
        bottom: -12px;
        left: 8px;
        padding: 10px 14px
      }

      .fc-n {
        font-size: 18px
      }

      .fc-l {
        font-size: 8px
      }

      .fc-n2 {
        font-size: 13px
      }

      .sub-banner {
        padding: 32px
      }

      .hiw-panel {
        padding: 32px 24px
      }

      .hiw-panel h3 {
        font-size: 28px
      }
    }
  </style>

  <style>
    /* === INTRO ANIMATIONS === */
    @keyframes intro {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes introScale {
      from {
        opacity: 0;
        transform: translateY(32px) scale(.97)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .in-1,
    .in-2,
    .in-3,
    .in-4,
    .in-5 {
      opacity: 0;
      animation: intro .9s cubic-bezier(.16, 1, .3, 1) forwards
    }

    .in-1 {
      animation-delay: .3s
    }

    .in-2 {
      animation-delay: .5s
    }

    .in-3 {
      animation-delay: .75s
    }

    .in-4 {
      animation-delay: .95s
    }

    .in-5 {
      animation-delay: 1.15s
    }

    .in-6 {
      opacity: 0;
      animation: introScale 1s 1.3s cubic-bezier(.16, 1, .3, 1) forwards
    }

    body {
      opacity: 0;
      animation: bf .5s ease-out forwards
    }

    @keyframes bf {
      to {
        opacity: 1
      }
    }

    /* === VIDEO CARD === */
    .vid-card {
      position: relative;
      background: #0A1628;
      border-radius: 18px;
      aspect-ratio: 16/11;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 40px 80px -30px rgba(10, 22, 40, .35), 0 0 0 1px rgba(59, 155, 229, .1);
      transition: transform .4s cubic-bezier(.16, 1, .3, 1)
    }

    .vid-card:hover {
      transform: translateY(-4px)
    }

    .vid-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #3B9BE5, #5DC158);
      z-index: 5
    }

    .vid-bg-chart {
      position: absolute;
      inset: 0;
      opacity: .3;
      pointer-events: none
    }

    .vid-bg-chart svg {
      width: 100%;
      height: 100%
    }

    .vid-bg-chart .bg-line {
      fill: none;
      stroke: #3B9BE5;
      stroke-width: 1.5
    }

    .vid-bg-chart .bg-fill {
      fill: url(#vbg)
    }

    .vid-live {
      position: absolute;
      top: 24px;
      left: 24px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(239, 68, 68, .95);
      padding: 5px 11px 5px 9px;
      border-radius: 5px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      color: #fff;
      z-index: 3
    }

    .vid-live::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      animation: pulse 1.5s infinite
    }

    .vid-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 88px;
      height: 88px;
      background: linear-gradient(135deg, #5DC158, #46A444);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 16px 40px rgba(93, 193, 88, .4);
      transition: transform .3s;
      z-index: 4
    }

    .vid-card:hover .vid-play {
      transform: translate(-50%, -50%) scale(1.08)
    }

    .vid-play::after {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 50%;
      background: rgba(93, 193, 88, .2);
      z-index: -1;
      animation: ringPulse 2s ease-out infinite
    }

    @keyframes ringPulse {
      0% {
        transform: scale(1);
        opacity: .6
      }

      100% {
        transform: scale(1.5);
        opacity: 0
      }
    }

    .vid-play svg {
      width: 30px;
      height: 30px;
      color: #fff;
      margin-left: 4px
    }

    .vid-text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 88px;
      padding: 0 28px;
      text-align: center;
      z-index: 3
    }

    .vid-text h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.02em;
      margin-bottom: 6px
    }

    .vid-text p {
      font-size: 13px;
      color: rgba(255, 255, 255, .6)
    }

    .vid-founder {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, .08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .1);
      padding: 10px 14px;
      border-radius: 10px;
      z-index: 3
    }

    .vid-fa {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3B9BE5, #5DC158);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0
    }

    .vid-fl strong {
      display: block;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.015em
    }

    .vid-fl span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
      letter-spacing: .04em
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    /* === LEARN SECTION === */
    .learn-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
      margin-top: 0
    }

    .learn-items {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 32px
    }

    .learn-item {
      background: #fff;
      border: 1px solid #E1E7F0;
      border-radius: 14px;
      padding: 24px;
      display: flex;
      gap: 18px;
      transition: all .3s
    }

    .learn-item:hover {
      transform: translateX(4px);
      border-color: rgba(59, 155, 229, .25);
      box-shadow: 0 10px 30px -10px rgba(10, 22, 40, .1)
    }

    .learn-num {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, #3B9BE5, #5DC158);
      color: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0
    }

    .learn-c strong {
      display: block;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: #0A1628;
      letter-spacing: -.02em;
      margin-bottom: 6px
    }

    .learn-c p {
      font-size: 13.5px;
      color: #5E6E85;
      line-height: 1.55
    }

    .asc-card {
      background: #0A1628;
      border-radius: 18px;
      padding: 32px;
      color: #fff;
      position: sticky;
      top: 120px
    }

    .asc-head {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .asc-head::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: linear-gradient(90deg, #3B9BE5, #5DC158)
    }

    .asc-bars {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 32px
    }

    .asc-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 6px
    }

    .asc-bar-l {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #fff
    }

    .asc-bar-pct {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      color: #5DC158
    }

    .asc-bar-track {
      grid-column: 1/-1;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 2px;
      overflow: hidden
    }

    .asc-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #3B9BE5, #5DC158);
      border-radius: 2px;
      width: 0;
      transition: width 1.5s cubic-bezier(.4, 0, .2, 1)
    }

    .asc-bar.vis .asc-bar-fill {
      width: var(--w)
    }

    .asc-divider {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin: 32px 0 16px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .asc-divider::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background: linear-gradient(90deg, #3B9BE5, #5DC158)
    }

    .asc-sigs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 18px
    }

    .asc-sig {
      padding: 18px;
      border-radius: 10px;
      text-align: center
    }

    .asc-sig.buy {
      background: rgba(93, 193, 88, .12);
      border: 1px solid rgba(93, 193, 88, .25)
    }

    .asc-sig.sell {
      background: rgba(239, 68, 68, .12);
      border: 1px solid rgba(239, 68, 68, .25)
    }

    .asc-sig-l {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: .04em
    }

    .asc-sig.buy .asc-sig-l {
      color: #5DC158
    }

    .asc-sig.sell .asc-sig-l {
      color: #EF6F6F
    }

    .asc-sig-s {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: rgba(255, 255, 255, .55);
      margin-top: 6px;
      letter-spacing: .06em
    }

    .asc-foot {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      padding: 14px 16px;
      background: rgba(255, 255, 255, .04);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .asc-foot::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #5DC158;
      border-radius: 50%;
      animation: pulse 2s infinite;
      flex-shrink: 0
    }

    /* === DASHBOARD LIGHT THEME OVERRIDE === */
    #dashboard .dpf {
      background: #fff !important;
      border: 1px solid #E1E7F0 !important;
      box-shadow: 0 30px 60px -30px rgba(10, 22, 40, .12)
    }

    #dashboard .dpf-hdr {
      background: #F7F9FC !important;
      border-bottom: 1px solid #E1E7F0 !important;
      color: #5E6E85
    }

    #dashboard .dpf-ttl,
    #dashboard .dpf-meta,
    #dashboard .dpf-meta span {
      color: #5E6E85 !important
    }

    #dashboard .dash-c {
      color: #0A1628 !important
    }

    #dashboard .fdash-side,
    #dashboard .fdash-main,
    #dashboard .fdash-summary,
    #dashboard .fd-side,
    #dashboard .fd-main,
    #dashboard .fd-sum {
      background: #F7F9FC !important;
      border: 1px solid #E1E7F0 !important
    }

    #dashboard .fdash-side h4,
    #dashboard .fdash-summary h4,
    #dashboard .fd-side h4,
    #dashboard .fd-sum h4 {
      color: #5E6E85 !important
    }

    #dashboard .algo-card,
    #dashboard .vindi-card {
      background: #fff !important;
      border: 1px solid #E1E7F0 !important
    }

    #dashboard .algo-stats,
    #dashboard .fdash-pair,
    #dashboard .fd-pair {
      border-color: #E1E7F0 !important
    }

    #dashboard .algo-stat-n,
    #dashboard .fdash-pair-name,
    #dashboard .fd-pn,
    #dashboard .fdash-price-n,
    #dashboard .fd-price-n,
    #dashboard .score-cell-n,
    #dashboard .score-c-n,
    #dashboard .fdash-sum-v,
    #dashboard .fd-sum-v,
    #dashboard .matrix-name,
    #dashboard .mt-name,
    #dashboard .matrix-table td,
    #dashboard .mt-tbl td,
    #dashboard .tr-table td,
    #dashboard .tr-head-t {
      color: #0A1628 !important
    }

    #dashboard .algo-stat-l,
    #dashboard .fdash-pair-meta,
    #dashboard .fd-pm,
    #dashboard .score-cell-name,
    #dashboard .score-c-name,
    #dashboard .fdash-sum-k,
    #dashboard .fd-sum-k,
    #dashboard .matrix-sub,
    #dashboard .mt-sub,
    #dashboard .matrix-table th,
    #dashboard .mt-tbl th,
    #dashboard .tr-table th,
    #dashboard .dpf-meta {
      color: #5E6E85 !important
    }

    #dashboard .score-cell,
    #dashboard .score-c {
      background: #fff !important;
      border: 1px solid #E1E7F0 !important;
      border-top: 2px solid #5DC158 !important
    }

    #dashboard .matrix-table tr:hover td,
    #dashboard .mt-tbl tr:hover td {
      background: #F7F9FC !important
    }

    #dashboard .matrix-table th,
    #dashboard .mt-tbl th,
    #dashboard .tr-table th {
      background: #F7F9FC !important;
      border-bottom-color: #E1E7F0 !important
    }

    #dashboard .matrix-table td,
    #dashboard .mt-tbl td,
    #dashboard .tr-table td {
      border-color: #E1E7F0 !important
    }

    #dashboard .trades-card,
    #dashboard .tr-card {
      background: #F7F9FC !important;
      border: 1px solid #E1E7F0 !important
    }

    #dashboard .trades-head,
    #dashboard .tr-head {
      border-bottom-color: #E1E7F0 !important
    }

    #dashboard .fdash-sum-row,
    #dashboard .fd-sum-row {
      border-color: #E1E7F0 !important
    }

    #dashboard .matrix-class.forex,
    #dashboard .mt-class.forex {
      background: rgba(59, 155, 229, .12);
      color: #2A7BC4
    }

    #dashboard .matrix-class.crypto,
    #dashboard .mt-class.crypto {
      background: rgba(245, 158, 11, .12);
      color: #B45309
    }

    #dashboard .matrix-class.commodity,
    #dashboard .mt-class.commodity {
      background: rgba(168, 85, 247, .12);
      color: #7E22CE
    }

    #dashboard .matrix-class.index,
    #dashboard .mt-class.index {
      background: rgba(236, 72, 153, .12);
      color: #BE185D
    }

    #dashboard .matrix-vindi.bull,
    #dashboard .matrix-vindi.bear,
    #dashboard .matrix-vindi.neutral {
      color: #0A1628
    }

    /* === REAL TRADES SECTION === */
    .rt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 48px
    }

    .rt-card {
      background: #fff;
      border: 1px solid #E1E7F0;
      border-radius: 14px;
      overflow: hidden
    }

    .rt-head {
      padding: 18px 24px;
      border-bottom: 1px solid #E1E7F0;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .rt-head-t {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: #0A1628;
      letter-spacing: -.02em
    }

    .rt-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: 100px;
      font-weight: 700
    }

    .rt-tag.live {
      background: rgba(93, 193, 88, .12);
      color: #46A444;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .rt-tag.live::before {
      content: '';
      width: 5px;
      height: 5px;
      background: #5DC158;
      border-radius: 50%;
      animation: pulse 1.5s infinite
    }

    .rt-tag.wins {
      background: rgba(93, 193, 88, .12);
      color: #46A444
    }

    .rt-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'JetBrains Mono', monospace
    }

    .rt-table th {
      padding: 11px 24px;
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #5E6E85;
      font-weight: 600;
      background: #F7F9FC;
      text-align: left;
      border-bottom: 1px solid #E1E7F0
    }

    .rt-table td {
      padding: 14px 24px;
      border-bottom: 1px solid #F0F3F8;
      font-size: 12px;
      color: #0A1628
    }

    .rt-table tr:last-child td {
      border-bottom: none
    }

    .rt-pair {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      letter-spacing: -.01em;
      color: #0A1628
    }

    .rt-buy {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      background: rgba(93, 193, 88, .12);
      color: #46A444;
      padding: 4px 10px;
      border-radius: 4px
    }

    .rt-sell {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      background: rgba(239, 68, 68, .12);
      color: #EF4444;
      padding: 4px 10px;
      border-radius: 4px
    }

    .rt-active {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: #46A444;
      font-weight: 600
    }

    .rt-profit {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #46A444;
      font-weight: 700
    }

    /* === HIW MOCKUPS === */
    .hiw-vis {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      padding: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 280px
    }

    .hiw-vis::before {
      display: none !important
    }

    .hiw-vis .mock {
      display: none;
      width: 100%;
      max-width: 360px
    }

    .hiw-vis .mock.on {
      display: block;
      animation: fu .5s cubic-bezier(.16, 1, .3, 1)
    }

    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .mock-1 {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 12px;
      padding: 14px
    }

    .mock-1 .m1-img {
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, rgba(59, 155, 229, .25), rgba(93, 193, 88, .18));
      border-radius: 8px;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden
    }

    .mock-1 .m1-img::before {
      content: '';
      position: absolute;
      left: 10%;
      right: 10%;
      top: 30%;
      bottom: 20%;
      background: linear-gradient(135deg, transparent 30%, rgba(93, 193, 88, .6));
      clip-path: polygon(0% 80%, 15% 60%, 30% 70%, 45% 40%, 60% 55%, 75% 20%, 100% 10%, 100% 100%, 0% 100%)
    }

    .mock-1 .m1-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: .12em;
      color: #5DB3F0;
      text-transform: uppercase;
      margin-bottom: 6px;
      font-weight: 600
    }

    .mock-1 .m1-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px
    }

    .mock-1 .m1-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .mock-1 .m1-price {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      color: #fff;
      font-weight: 700
    }

    .mock-1 .m1-btn {
      background: linear-gradient(135deg, #3B9BE5, #5DC158);
      color: #fff;
      padding: 7px 13px;
      border-radius: 6px;
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      letter-spacing: .08em
    }

    .mock-2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px
    }

    .mock-2-check {
      width: 84px;
      height: 84px;
      background: linear-gradient(135deg, #5DC158, #46A444);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 32px rgba(93, 193, 88, .4)
    }

    .mock-2-check svg {
      width: 38px;
      height: 38px;
      color: #fff
    }

    .mock-2-rec {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 16px 18px;
      width: 100%
    }

    .mock-2-rec .m2-row {
      display: flex;
      justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      padding: 5px 0;
      color: rgba(255, 255, 255, .7)
    }

    .mock-2-rec .m2-row strong {
      color: #fff;
      font-weight: 700
    }

    .mock-2-rec .m2-row.tot {
      border-top: 1px solid rgba(255, 255, 255, .1);
      margin-top: 6px;
      padding-top: 10px;
      font-size: 13px
    }

    .mock-3-fld {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 16px;
      width: 100%
    }

    .mock-3-fld-head {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(255, 255, 255, .7);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mock-3-fld-head svg {
      width: 16px;
      height: 16px;
      color: #5DB3F0;
      flex-shrink: 0
    }

    .mock-3-fld-files {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .mock-3-file {
      padding: 9px 11px;
      background: rgba(255, 255, 255, .04);
      border-radius: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #fff
    }

    .mock-3-file.new {
      background: linear-gradient(90deg, rgba(93, 193, 88, .15), rgba(59, 155, 229, .15));
      border: 1px solid rgba(93, 193, 88, .3);
      color: #7FD073;
      animation: dropIn .6s cubic-bezier(.16, 1, .3, 1)
    }

    @keyframes dropIn {
      from {
        opacity: 0;
        transform: translateY(-10px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .mock-4 {
      position: relative;
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      padding: 14px;
      aspect-ratio: 16/9;
      overflow: hidden
    }

    .mock-4 svg {
      width: 100%;
      height: 100%
    }

    .mock-4-cursor {
      position: absolute;
      top: 30%;
      right: 20%;
      width: 22px;
      height: 22px;
      color: #fff;
      animation: cursorMove 3s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5))
    }

    @keyframes cursorMove {

      0%,
      100% {
        transform: translate(0, 0)
      }

      50% {
        transform: translate(-40px, 30px)
      }
    }

    .mock-5 {
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      padding: 14px;
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden
    }

    .mock-5 svg {
      width: 100%;
      height: 100%
    }

    .mock-5-tag {
      position: absolute;
      top: 14px;
      right: 14px;
      background: linear-gradient(135deg, #5DC158, #46A444);
      color: #fff;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 5px;
      letter-spacing: .08em;
      z-index: 2;
      animation: pulse 2s infinite
    }

    .mock-5 .arr {
      animation: bounce 1.5s ease-in-out infinite;
      transform-origin: center
    }

    @keyframes bounce {

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

      50% {
        transform: translateY(-4px)
      }
    }

    /* === FAQ === */
    .faq-list {
      margin-top: 48px;
      border-top: 1px solid #E1E7F0
    }

    .faq-item {
      border-bottom: 1px solid #E1E7F0;
      transition: background .25s;
      cursor: pointer
    }

    .faq-item:hover {
      background: rgba(255, 255, 255, .5)
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 0;
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: #0A1628;
      letter-spacing: -.02em;
      line-height: 1.3;
      gap: 24px;
      transition: color .25s
    }

    .faq-item:hover .faq-q,
    .faq-item.open .faq-q {
      color: #2A7BC4
    }

    .faq-plus {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #E1E7F0;
      flex-shrink: 0;
      position: relative;
      transition: all .3s
    }

    .faq-item.open .faq-plus {
      background: linear-gradient(135deg, #3B9BE5, #5DC158);
      border-color: transparent
    }

    .faq-plus::before,
    .faq-plus::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background: #0A1628;
      transition: all .3s
    }

    .faq-plus::before {
      width: 12px;
      height: 1.5px;
      transform: translate(-50%, -50%)
    }

    .faq-plus::after {
      width: 1.5px;
      height: 12px;
      transform: translate(-50%, -50%)
    }

    .faq-item.open .faq-plus::before,
    .faq-item.open .faq-plus::after {
      background: #fff
    }

    .faq-item.open .faq-plus::after {
      transform: translate(-50%, -50%) scaleY(0)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(.16, 1, .3, 1)
    }

    .faq-item.open .faq-a {
      max-height: 400px
    }

    .faq-a-inner {
      padding: 0 0 26px;
      color: #5E6E85;
      font-size: 15px;
      line-height: 1.65;
      max-width: 760px
    }

    /* === MODAL: full image visible === */
    .modal-hero {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 32px !important;
      background: #0A1628 !important;
      min-height: 280px !important;
      aspect-ratio: auto !important
    }

    .modal-hero img {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 380px !important;
      object-fit: contain !important;
      border-radius: 6px;
      box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .4) !important;
      position: static !important;
      inset: auto !important
    }

    .modal-hero::after {
      display: none !important
    }

    .modal-hero-c,
    .modal-hero-content {
      position: relative !important;
      inset: auto !important;
      padding: 24px 32px 0 !important;
      background: #fff !important;
      text-align: left
    }

    .modal-hero-c .modal-cat,
    .modal-hero-content .modal-cat {
      color: #2A7BC4 !important
    }

    .modal-hero-c .modal-pname,
    .modal-hero-content .modal-pname {
      color: #0A1628 !important
    }

    /* === MOBILE HEADLINE FIX === */
    @media(max-width:768px) {
      .hero h1 {
        font-size: 42px !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important
      }

      .hero h1 br {
        display: none
      }

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

      .learn-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important
      }

      .asc-card {
        position: static !important
      }

      .rt-grid {
        grid-template-columns: 1fr !important
      }

      .faq-q {
        font-size: 16px !important;
        padding: 20px 0 !important
      }
    }

    @media(max-width:480px) {
      .hero h1 {
        font-size: 36px !important
      }
    }
  </style>

  <style>
    /* ===== REFINEMENT PASS v2 ===== */

    /* HERO POLISH — tighter rhythm, larger video card, raised position */
    .hero {
      padding: 120px 32px 72px !important
    }

    .hero-in {
      gap: 56px !important;
      align-items: center
    }

    .hero h1 {
      margin-bottom: 22px !important;
      line-height: 1.04 !important
    }

    .hero-sub {
      margin-bottom: 32px !important;
      font-size: 18px !important;
      max-width: 540px !important
    }

    .hero-ctas {
      margin-bottom: 48px !important;
      gap: 10px !important
    }

    .hero-stats {
      padding-top: 30px !important;
      gap: 42px !important
    }

    .hero-right {
      margin-top: -20px
    }

    .vid-card {
      aspect-ratio: 16/12 !important;
      border-radius: 20px !important;
      box-shadow: 0 50px 100px -40px rgba(10, 22, 40, .4), 0 0 0 1px rgba(59, 155, 229, .08) !important
    }

    .flt-card {
      border-radius: 10px !important;
      padding: 13px 17px !important;
      box-shadow: 0 12px 28px -8px rgba(10, 22, 40, .12), 0 0 0 1px rgba(10, 22, 40, .04) !important;
      border: 1px solid #EBF0F7 !important
    }

    .flt-top {
      top: -14px !important;
      right: -14px !important
    }

    .flt-bot {
      bottom: -14px !important;
      left: -14px !important
    }

    .fc-n {
      font-size: 20px !important
    }

    .fc-n2 {
      font-size: 15px !important;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .fc-l {
      font-size: 9px !important;
      margin-top: 4px !important;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .fc-l::before {
      content: '';
      width: 5px;
      height: 5px;
      background: #5DC158;
      border-radius: 50%;
      animation: pulse 1.8s infinite;
      flex-shrink: 0
    }

    .flt-top .fc-l::before {
      display: none
    }

    /* PRODUCT GRID — uniform 4:3 cards, framed navy thumbnails */
    .pgrid {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
      align-items: stretch !important
    }

    .pcard {
      border-radius: 14px !important;
      border: 1px solid #E8ECF3 !important;
      background: #fff !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      box-shadow: 0 1px 2px rgba(10, 22, 40, .02);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s !important
    }

    .pcard:hover {
      transform: translateY(-4px) !important;
      border-color: #D5DEEA !important;
      box-shadow: 0 24px 48px -20px rgba(10, 22, 40, .18) !important
    }

    .pimg {
      aspect-ratio: 4/3 !important;
      padding: 18px !important;
      background: linear-gradient(135deg, #0A1628 0%, #0F2138 100%) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border-radius: 14px 14px 0 0 !important
    }

    .pimg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59, 155, 229, .4), transparent);
      opacity: .6
    }

    .pimg img {
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
      filter: none !important;
      border-radius: 4px;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important;
      box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .4)
    }

    .pcard:hover .pimg img {
      transform: scale(1.02) !important;
      filter: none !important
    }

    .pcat-badge {
      top: 12px !important;
      left: 12px !important;
      font-size: 8.5px !important;
      padding: 4px 9px !important;
      border-radius: 4px !important;
      letter-spacing: .14em !important;
      background: rgba(10, 22, 40, .85) !important;
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .pcat-badge.ea {
      background: linear-gradient(135deg, #3B9BE5, #5DC158) !important;
      border-color: transparent
    }

    .pbody {
      padding: 22px !important;
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      border-top: 1px solid #EFF2F7 !important;
      background: #fff
    }

    .pname {
      font-size: 17px !important;
      margin-bottom: 8px !important;
      letter-spacing: -.02em !important;
      min-height: 42px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .pdesc {
      font-size: 13.5px !important;
      line-height: 1.55 !important;
      margin-bottom: 18px !important;
      -webkit-line-clamp: 3 !important;
      min-height: 64px;
      color: #5E6E85 !important
    }

    .pfoot {
      padding-top: 18px !important;
      border-top: 1px solid #EFF2F7 !important;
      margin-top: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px
    }

    .pprice {
      font-size: 22px !important;
      letter-spacing: -.025em !important
    }

    .btn-buy {
      font-size: 10px !important;
      padding: 9px 14px !important;
      border-width: 1.5px !important;
      letter-spacing: .14em !important;
      font-weight: 700 !important;
      transition: all .25s ease !important
    }

    .btn-buy:hover {
      background: #0A1628 !important;
      color: #fff !important;
      border-color: #0A1628 !important;
      transform: translateX(2px)
    }

    /* MODAL HERO — integrated SaaS-style */
    .modal-hero {
      padding: 48px 40px !important;
      min-height: 340px !important;
      background: linear-gradient(135deg, #0A1628 0%, #0F2138 100%) !important;
      position: relative !important;
      overflow: hidden !important
    }

    .modal-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 155, 229, .4), rgba(93, 193, 88, .4), transparent)
    }

    .modal-hero::after {
      display: none !important
    }

    .modal-hero img {
      width: auto !important;
      max-width: 100% !important;
      max-height: 280px !important;
      height: auto !important;
      object-fit: contain !important;
      border-radius: 6px !important;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(59, 155, 229, .15) !important;
      position: static !important
    }

    .modal-hero-c {
      padding: 28px 32px 8px !important;
      background: #fff !important;
      border-bottom: 1px solid #EFF2F7;
      position: relative !important
    }

    .modal-cat {
      font-size: 10px !important;
      letter-spacing: .18em !important;
      color: #2A7BC4 !important;
      font-weight: 700 !important;
      margin-bottom: 10px !important
    }

    .modal-pname {
      font-size: 28px !important;
      letter-spacing: -.03em !important;
      color: #0A1628 !important;
      line-height: 1.1 !important
    }

    .modal-info {
      padding-top: 24px !important
    }

    .modal-price-row {
      padding-bottom: 24px !important;
      margin-bottom: 24px !important;
      align-items: flex-end !important
    }

    .modal-price-l {
      font-size: 9.5px !important;
      letter-spacing: .18em !important
    }

    .modal-price {
      font-size: 42px !important;
      letter-spacing: -.035em !important
    }

    .modal-price span {
      font-size: 10px !important;
      letter-spacing: .14em !important;
      margin-left: 6px !important
    }

    .btn-modal-buy {
      padding: 14px 24px !important;
      border-radius: 9px !important;
      font-size: 13.5px !important;
      box-shadow: 0 8px 20px -6px rgba(10, 22, 40, .25)
    }

    .btn-modal-buy:hover {
      box-shadow: 0 14px 28px -8px rgba(59, 155, 229, .4) !important
    }

    .modal-features {
      gap: 10px !important;
      margin-bottom: 24px !important
    }

    .mfeat {
      padding: 16px !important;
      border-radius: 10px !important;
      background: #F7F9FC !important;
      border: 1px solid #EFF2F7 !important;
      transition: all .25s
    }

    .mfeat:hover {
      background: #fff !important;
      border-color: #D5DEEA;
      transform: translateY(-1px);
      box-shadow: 0 6px 12px -4px rgba(10, 22, 40, .06)
    }

    .mfeat svg {
      width: 20px !important;
      height: 20px !important;
      color: #2A7BC4 !important
    }

    .mfeat-t {
      font-size: 14px !important;
      letter-spacing: -.015em !important
    }

    .mfeat-d {
      font-size: 12px !important;
      line-height: 1.5 !important
    }

    .modal-desc-title {
      font-size: 9.5px !important;
      letter-spacing: .18em !important;
      margin-bottom: 12px !important
    }

    .modal-desc {
      font-size: 15.5px !important;
      line-height: 1.65 !important;
      margin-bottom: 24px !important
    }

    .modal-specs {
      border-radius: 10px !important;
      border-color: #EFF2F7 !important
    }

    .mspec {
      padding: 12px 18px !important;
      border-color: #EFF2F7 !important
    }

    .mspec-k {
      font-size: 10.5px !important;
      letter-spacing: .1em !important
    }

    .mspec-v {
      font-size: 14px !important
    }

    .modal-guarantee {
      padding: 20px !important;
      border-radius: 10px !important;
      background: linear-gradient(135deg, rgba(59, 155, 229, .04), rgba(93, 193, 88, .03)) !important;
      border-color: rgba(59, 155, 229, .15) !important
    }

    .modal-g-icon {
      width: 34px !important;
      height: 34px !important
    }

    .modal-guarantee strong {
      font-size: 15px !important;
      margin-bottom: 3px !important
    }

    .modal-guarantee p {
      font-size: 12.5px !important;
      line-height: 1.55 !important
    }

    /* TIMELINE / HIW — tightened, with feature bullets */
    #hiw {
      padding-bottom: 100px !important
    }

    .hiw-row {
      margin-top: 48px !important
    }

    .hiw-step {
      padding: 0 10px !important
    }

    .hiw-dot {
      width: 12px !important;
      height: 12px !important;
      border-width: 1.5px !important;
      margin-top: 30px !important
    }

    .hiw-step.active .hiw-dot {
      background: #0A1628 !important;
      border-color: #0A1628 !important;
      box-shadow: 0 0 0 4px rgba(10, 22, 40, .08), 0 0 16px rgba(59, 155, 229, .3) !important;
      transform: scale(1.5) !important
    }

    .hiw-step.active .hiw-dot::after {
      display: none !important
    }

    .hiw-step.done .hiw-dot {
      background: linear-gradient(135deg, #3B9BE5, #5DC158) !important;
      border-color: transparent !important;
      box-shadow: 0 0 0 3px rgba(93, 193, 88, .12) !important
    }

    .hiw-step-t {
      font-size: 16px !important;
      margin-top: 18px !important;
      margin-bottom: 4px !important
    }

    .hiw-step-d {
      font-size: 12.5px !important;
      line-height: 1.5 !important;
      max-width: 160px;
      margin: 0 auto
    }

    .hiw-panel {
      margin-top: 40px !important;
      padding: 48px !important;
      border-radius: 18px !important;
      min-height: 340px !important;
      gap: 48px !important;
      background: #0A1628 !important;
      box-shadow: 0 40px 80px -30px rgba(10, 22, 40, .3), inset 0 1px 0 rgba(255, 255, 255, .04) !important
    }

    .hiw-panel::before {
      background: radial-gradient(circle, rgba(93, 193, 88, .08), transparent 60%) !important
    }

    .hiw-meta {
      font-size: 10.5px !important;
      letter-spacing: .18em !important;
      margin-bottom: 16px !important
    }

    .hiw-panel h3 {
      font-size: 34px !important;
      margin-bottom: 16px !important;
      letter-spacing: -.035em !important
    }

    .hiw-panel p {
      margin-bottom: 20px !important;
      font-size: 15.5px !important;
      max-width: 420px !important;
      line-height: 1.6 !important
    }

    .hiw-tag {
      padding: 8px 14px !important;
      font-size: 10.5px !important
    }

    /* Feature bullets in left panel */
    .hiw-feats {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
      margin-bottom: 24px
    }

    .hiw-feat {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255, 255, 255, .75);
      font-size: 13px;
      line-height: 1.5
    }

    .hiw-feat svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 1px;
      color: #5DC158
    }

    /* DISCLAIMER — RED COMPLIANCE WARNING */
    .foot-disc {
      background: linear-gradient(135deg, rgba(220, 38, 38, .06), rgba(220, 38, 38, .03)) !important;
      border: 1px solid rgba(220, 38, 38, .18) !important;
      color: #991B1B !important;
      padding: 18px 22px 18px 52px !important;
      position: relative;
      border-radius: 10px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 13px !important;
      letter-spacing: 0 !important;
      line-height: 1.6 !important;
      text-transform: none !important;
      transition: all .25s !important
    }

    .foot-disc:hover {
      background: linear-gradient(135deg, rgba(220, 38, 38, .08), rgba(220, 38, 38, .04)) !important;
      border-color: rgba(220, 38, 38, .28) !important;
      color: #7F1D1D !important
    }

    .foot-disc::before {
      content: '';
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center
    }

    .foot-disc strong,
    .foot-disc b {
      color: #7F1D1D;
      font-weight: 700
    }

    /* FOOTER POLISH */
    footer {
      padding-top: 72px !important;
      padding-bottom: 32px !important
    }

    .foot-top {
      padding-bottom: 40px !important;
      gap: 56px !important;
      margin-bottom: 24px !important;
      border-color: #EFF2F7 !important
    }

    .foot-brand img {
      height: 36px !important;
      margin-bottom: 14px !important;
      opacity: .95
    }

    .foot-brand-d {
      font-size: 13.5px !important;
      line-height: 1.65 !important
    }

    .foot-col-t {
      font-size: 10px !important;
      letter-spacing: .18em !important;
      margin-bottom: 18px !important;
      color: #8FA0B8 !important
    }

    .foot-links a {
      font-size: 13.5px !important;
      transition: color .2s, padding-left .2s !important
    }

    .foot-links a:hover {
      padding-left: 4px;
      color: #2A7BC4 !important
    }

    .foot-bot {
      padding-top: 8px;
      font-size: 10.5px !important
    }

    /* REVIEW CARDS POLISH */
    .tcard {
      padding: 32px !important;
      border-radius: 14px !important;
      border-color: #E8ECF3 !important;
      transition: all .35s cubic-bezier(.16, 1, .3, 1) !important
    }

    .tcard:hover {
      transform: translateY(-3px) !important;
      border-color: #D5DEEA !important;
      box-shadow: 0 18px 36px -16px rgba(10, 22, 40, .12) !important
    }

    .tcard::before {
      font-size: 56px !important;
      top: 20px !important;
      right: 28px !important;
      opacity: .12 !important
    }

    .tstars {
      font-size: 13px !important;
      margin-bottom: 16px !important;
      gap: 2px !important
    }

    .ttext {
      font-size: 15px !important;
      line-height: 1.7 !important;
      margin-bottom: 24px !important;
      color: #1A2D47 !important
    }

    .tauth {
      padding-top: 18px !important;
      gap: 12px !important
    }

    .tav {
      width: 42px !important;
      height: 42px !important;
      font-size: 14px !important
    }

    .tname {
      font-size: 14.5px !important
    }

    .tsub {
      font-size: 10px !important;
      letter-spacing: .12em !important
    }

    /* SECTION TITLES — slightly tighter */
    .sec-title {
      margin-bottom: 16px !important
    }

    .sec-sub {
      font-size: 17px !important;
      line-height: 1.6 !important
    }

    .sec-label {
      margin-bottom: 20px !important;
      font-size: 10.5px !important;
      letter-spacing: .18em !important
    }

    /* SUB BANNER POLISH */
    .sub-banner {
      padding: 40px !important;
      border-radius: 18px !important;
      margin-top: 48px !important
    }

    .sub-banner h3 {
      font-size: 24px !important;
      margin-bottom: 4px !important
    }

    .sub-banner p {
      font-size: 14.5px !important;
      line-height: 1.55 !important
    }

    .sub-price {
      font-size: 42px !important;
      letter-spacing: -.035em !important
    }

    .btn-subscribe {
      padding: 12px 22px !important;
      font-size: 13.5px !important
    }

    /* PLATFORM CARDS POLISH */
    .hl-card {
      padding: 28px !important;
      border-radius: 14px !important;
      border-color: #E8ECF3 !important
    }

    .hl-icon {
      width: 44px !important;
      height: 44px !important;
      border-radius: 10px !important;
      margin-bottom: 20px !important
    }

    .hl-icon svg {
      width: 22px !important;
      height: 22px !important
    }

    .hl-title {
      font-size: 19px !important;
      margin-bottom: 10px !important
    }

    .hl-desc {
      font-size: 14px !important;
      line-height: 1.65 !important
    }

    /* SECTION RHYTHM — slightly tighter */
    .sec {
      padding: 96px 32px !important
    }

    @media(max-width:768px) {
      .sec {
        padding: 64px 20px !important
      }
    }

    /* CTA SECTION */
    .cta-sec {
      padding: 96px 32px !important
    }

    .cta-in h2 {
      margin-bottom: 18px !important
    }

    .cta-in p {
      margin-bottom: 32px !important;
      font-size: 16px !important
    }

    /* RESPONSIVE — fix product grid + hero on mobile */
    @media(max-width:1100px) {
      .pgrid {
        grid-template-columns: repeat(2, 1fr) !important
      }

      .hero-right {
        margin-top: 0 !important
      }

      .flt-top {
        top: -10px !important;
        right: -10px !important
      }

      .flt-bot {
        bottom: -10px !important;
        left: -10px !important
      }
    }

    @media(max-width:680px) {
      .pgrid {
        grid-template-columns: 1fr !important;
        gap: 16px !important
      }

      .pimg {
        aspect-ratio: 16/12 !important;
        padding: 14px !important
      }

      .pname {
        min-height: auto !important;
        -webkit-line-clamp: unset !important
      }

      .pdesc {
        min-height: auto !important
      }

      .hero {
        padding: 96px 20px 56px !important
      }

      .hero h1 {
        font-size: 38px !important;
        line-height: 1.06 !important
      }

      .hero-sub {
        font-size: 16px !important;
        margin-bottom: 24px !important
      }

      .hero-ctas {
        margin-bottom: 36px !important
      }

      .hero-stats {
        gap: 24px !important
      }

      .hst-n {
        font-size: 30px !important
      }

      .vid-card {
        aspect-ratio: 16/12 !important
      }

      .flt-card {
        padding: 10px 14px !important
      }

      .fc-n {
        font-size: 17px !important
      }

      .modal-hero {
        padding: 32px 24px !important;
        min-height: 220px !important
      }

      .modal-hero img {
        max-height: 200px !important
      }

      .modal-hero-c {
        padding: 20px 24px 6px !important
      }

      .modal-pname {
        font-size: 22px !important
      }

      .modal-price {
        font-size: 32px !important
      }

      .hiw-panel {
        padding: 32px 24px !important;
        min-height: auto !important
      }

      .hiw-panel h3 {
        font-size: 24px !important
      }

      .tcard {
        padding: 24px !important
      }

      .foot-disc {
        padding-left: 46px !important;
        font-size: 12px !important
      }

      .foot-disc::before {
        left: 14px;
        width: 20px;
        height: 20px
      }
    }
  </style>


  <style>
    /* =========================================================
   FIX PASS — Hero / Dashboard / Timeline / Mobile / Badges
   ========================================================= */

    /* ---- HERO: bigger video card, slight rebalance ---- */
    .hero-in {
      grid-template-columns: 1fr 1.05fr !important;
      gap: 48px !important
    }

    .hero-right {
      margin-top: -32px !important
    }

    .vid-card {
      aspect-ratio: 16/11.2 !important;
      max-width: none !important;
      border-radius: 22px !important;
      box-shadow: 0 60px 120px -45px rgba(10, 22, 40, .45), 0 0 0 1px rgba(59, 155, 229, .1) !important
    }

    .vid-text h3 {
      font-size: 24px !important
    }

    .vid-play {
      width: 96px !important;
      height: 96px !important
    }

    .vid-play svg {
      width: 34px !important;
      height: 34px !important
    }

    .flt-card {
      padding: 13px 18px !important
    }

    .fc-n {
      font-size: 21px !important
    }

    @media(max-width:1100px) {
      .hero-in {
        grid-template-columns: 1fr !important
      }

      .hero-right {
        margin-top: 0 !important;
        max-width: 600px
      }
    }

    /* ---- DASHBOARD: more interactive ---- */
    #dashboard .score-c {
      transition: all .25s cubic-bezier(.16, 1, .3, 1) !important;
      cursor: default
    }

    #dashboard .score-c:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -6px rgba(59, 155, 229, .18) !important;
      border-top-width: 3px !important;
      background: linear-gradient(180deg, rgba(93, 193, 88, .04), #fff) !important
    }

    #dashboard .algo-card {
      transition: all .25s !important
    }

    #dashboard .algo-card:hover {
      border-color: rgba(59, 155, 229, .25) !important;
      box-shadow: 0 6px 16px -6px rgba(59, 155, 229, .15) !important
    }

    #dashboard .fd-price-n {
      transition: color .3s, transform .3s
    }

    #dashboard .fd-price-n.flash {
      color: #5DC158;
      transform: scale(1.02)
    }

    #dashboard .mt-tbl tbody tr {
      transition: background .2s, transform .2s
    }

    #dashboard .mt-tbl tbody tr:hover {
      background: rgba(59, 155, 229, .04) !important;
      cursor: pointer
    }

    #dashboard .mt-tbl tbody tr:hover .mt-name {
      color: #2A7BC4
    }

    #dashboard .mt-conf-fill {
      transition: width .5s ease-out
    }

    #dashboard .fd-overall {
      transition: transform .3s, box-shadow .3s;
      cursor: default
    }

    #dashboard .fd-overall:hover {
      transform: scale(1.005);
      box-shadow: 0 16px 36px -12px rgba(59, 155, 229, .4)
    }

    #dashboard .dpf-meta .live {
      transition: opacity .3s
    }

    #dashboard .fd-overall-n {
      display: inline-block;
      transition: transform .3s
    }

    /* Fix Analysis Summary entry/TP box low-contrast */
    #dashboard .entry-box {
      background: rgba(93, 193, 88, .08) !important;
      border: 1px solid rgba(93, 193, 88, .28) !important
    }

    #dashboard .entry-k {
      color: #46A444 !important;
      font-weight: 600 !important;
      letter-spacing: .04em
    }

    #dashboard .entry-v {
      color: #0A1628 !important;
      font-weight: 700 !important
    }

    /* ---- HIW TIMELINE: cleaner, premium ---- */
    .hiw-row {
      position: relative
    }

    .hiw-row::before {
      height: 2px !important;
      background: #E1E7F0 !important;
      left: 8% !important;
      right: 8% !important;
      top: 32px !important
    }

    .hiw-row::after {
      height: 2px !important;
      background: linear-gradient(90deg, #3B9BE5, #5DC158) !important;
      top: 32px !important;
      left: 8% !important;
      border-radius: 2px;
      box-shadow: 0 0 12px rgba(93, 193, 88, .3)
    }

    .hiw-step {
      padding: 0 8px !important
    }

    .hiw-dot {
      width: 16px !important;
      height: 16px !important;
      margin-top: 24px !important;
      border-width: 2px !important;
      border-color: #CCD5E2 !important;
      background: #fff !important;
      transition: all .35s cubic-bezier(.16, 1, .3, 1) !important;
      position: relative
    }

    .hiw-step.done .hiw-dot {
      background: linear-gradient(135deg, #3B9BE5, #5DC158) !important;
      border-color: transparent !important;
      box-shadow: 0 0 0 4px rgba(93, 193, 88, .15)
    }

    .hiw-step.done .hiw-dot::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 7px;
      height: 4px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: translate(-55%, -65%) rotate(-45deg)
    }

    .hiw-step.active .hiw-dot {
      background: #0A1628 !important;
      border-color: #0A1628 !important;
      box-shadow: 0 0 0 6px rgba(10, 22, 40, .06), 0 0 24px rgba(59, 155, 229, .35) !important;
      transform: scale(1.35) !important
    }

    .hiw-step.active .hiw-dot::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      background: #5DC158;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 8px rgba(93, 193, 88, .6)
    }

    .hiw-step-t {
      font-size: 15.5px !important;
      margin-top: 18px !important;
      color: #8FA0B8 !important;
      font-weight: 700 !important;
      transition: color .3s
    }

    .hiw-step.active .hiw-step-t,
    .hiw-step.done .hiw-step-t {
      color: #0A1628 !important
    }

    .hiw-step-d {
      font-size: 12.5px !important;
      color: #8FA0B8 !important;
      line-height: 1.5 !important;
      max-width: 160px;
      margin: 6px auto 0 !important
    }

    .hiw-step.active .hiw-step-d {
      color: #5E6E85 !important
    }

    /* HIW dark panel - cleaner premium */
    .hiw-panel {
      padding: 56px 56px !important;
      border-radius: 20px !important;
      min-height: 380px !important;
      background: linear-gradient(135deg, #0A1628 0%, #0F2138 100%) !important;
      position: relative;
      overflow: hidden;
      box-shadow: 0 50px 100px -40px rgba(10, 22, 40, .4), inset 0 1px 0 rgba(255, 255, 255, .05) !important
    }

    .hiw-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 155, 229, .5), rgba(93, 193, 88, .5), transparent);
      z-index: 2
    }

    .hiw-meta {
      font-family: 'JetBrains Mono', monospace !important;
      font-size: 11px !important;
      letter-spacing: .18em !important;
      color: #5DC158 !important;
      font-weight: 700 !important;
      margin-bottom: 20px !important;
      display: inline-flex !important;
      align-items: center;
      gap: 12px !important
    }

    .hiw-meta::before {
      content: '';
      width: 32px;
      height: 2px;
      background: linear-gradient(90deg, #3B9BE5, #5DC158);
      border-radius: 2px
    }

    .hiw-panel h3 {
      font-size: 36px !important;
      line-height: 1.05 !important;
      color: #fff !important;
      margin-bottom: 18px !important;
      letter-spacing: -.035em !important
    }

    .hiw-panel p {
      font-size: 15.5px !important;
      color: rgba(255, 255, 255, .7) !important;
      line-height: 1.65 !important;
      margin-bottom: 24px !important;
      max-width: 440px !important
    }

    .hiw-feats {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .hiw-feat {
      color: rgba(255, 255, 255, .85) !important;
      font-size: 13.5px !important;
      font-weight: 500;
      font-family: 'Inter', sans-serif !important
    }

    .hiw-feat svg {
      color: #5DC158 !important;
      background: rgba(93, 193, 88, .12);
      border-radius: 50%;
      padding: 3px;
      box-sizing: content-box;
      width: 14px !important;
      height: 14px !important
    }

    .hiw-tag {
      display: none !important
    }

    /* HIW vis container polish */
    .hiw-vis {
      background: rgba(255, 255, 255, .04) !important;
      border: 1px solid rgba(255, 255, 255, .08) !important;
      padding: 36px !important;
      border-radius: 16px !important;
      min-height: 280px !important;
      backdrop-filter: blur(8px)
    }

    /* ---- BADGES: bright + contrasted ---- */
    .pcat-badge {
      background: rgba(59, 155, 229, .95) !important;
      color: #fff !important;
      border: 1px solid rgba(255, 255, 255, .2);
      font-weight: 800 !important;
      text-shadow: 0 1px 0 rgba(10, 22, 40, .2);
      box-shadow: 0 4px 10px -2px rgba(59, 155, 229, .4)
    }

    .pcard[data-cat="mt4-ind"] .pcat-badge {
      background: rgba(93, 193, 88, .95) !important;
      box-shadow: 0 4px 10px -2px rgba(93, 193, 88, .4) !important
    }

    .pcard[data-cat="mt5-ind"] .pcat-badge {
      background: rgba(59, 155, 229, .95) !important;
      box-shadow: 0 4px 10px -2px rgba(59, 155, 229, .4) !important
    }

    .pcat-badge.ea,
    .pcard[data-cat$="-ea"] .pcat-badge {
      background: linear-gradient(135deg, #3B9BE5, #5DC158) !important;
      color: #fff !important;
      box-shadow: 0 4px 12px -2px rgba(93, 193, 88, .45) !important
    }

    /* ---- PRODUCT GRID: STRICT symmetry, no card grows ---- */
    .pgrid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 24px !important;
      align-items: stretch !important
    }

    .pcard {
      width: 100% !important;
      min-width: 0 !important;
      grid-column: span 1 !important;
      max-width: none !important;
      overflow: hidden !important
    }

    .pimg {
      aspect-ratio: 4/3 !important;
      padding: 14px !important;
      width: 100% !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: center;
      justify-content: center
    }

    .pimg img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center center !important;
      image-rendering: auto;
      display: block
    }

    /* Pixelation reduction */
    .pimg img {
      filter: contrast(1.02) saturate(1.05);
      transition: filter .3s, transform .5s cubic-bezier(.16, 1, .3, 1) !important
    }

    /* ---- MOBILE: products 2 cols, hero polish, HIW compact ---- */
    @media(max-width:980px) {
      .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important
      }
    }

    @media(max-width:768px) {
      .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important
      }

      .pcard {
        border-radius: 10px !important
      }

      .pimg {
        padding: 10px !important;
        border-radius: 10px 10px 0 0 !important
      }

      .pbody {
        padding: 14px !important
      }

      .pname {
        font-size: 14px !important;
        min-height: 38px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        -webkit-line-clamp: 2 !important
      }

      .pdesc {
        display: none !important
      }

      .pfoot {
        padding-top: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px
      }

      .pprice {
        font-size: 17px !important
      }

      .btn-buy {
        padding: 7px 11px !important;
        font-size: 9px !important;
        width: 100%;
        text-align: center
      }

      .pcat-badge {
        font-size: 7.5px !important;
        padding: 3px 6px !important;
        letter-spacing: .1em !important;
        top: 8px !important;
        left: 8px !important
      }

      .hero h1 {
        font-size: 38px !important;
        line-height: 1.05 !important
      }

      .hero-stats {
        gap: 20px !important
      }

      .hst-n {
        font-size: 24px !important
      }

      .hst-l {
        font-size: 9px !important
      }

      .hero-ctas {
        flex-direction: column;
        width: 100%
      }

      .hero-ctas .btn-primary,
      .hero-ctas .btn-secondary {
        width: 100%;
        justify-content: center
      }

      .hiw-panel {
        padding: 32px 24px !important;
        min-height: auto !important
      }

      .hiw-panel h3 {
        font-size: 24px !important
      }

      .hiw-panel p {
        font-size: 14px !important;
        margin-bottom: 18px !important
      }

      .hiw-vis {
        padding: 22px !important;
        min-height: 200px !important
      }

      .hiw-feats {
        padding-top: 16px;
        gap: 8px !important
      }

      .hiw-feat {
        font-size: 12.5px !important
      }

      .hiw-row {
        gap: 8px !important
      }

      .hiw-step {
        padding: 8px 0 !important;
        gap: 14px !important
      }

      .hiw-dot {
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important
      }

      .hiw-step-t {
        font-size: 14px !important;
        margin-top: 0 !important
      }

      .sec-title {
        font-size: 30px !important;
        line-height: 1.05 !important
      }

      .dpf-hdr {
        padding: 14px 18px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px
      }

      .dash-c {
        padding: 16px !important
      }

      .fd-grid {
        gap: 12px !important
      }

      .fd-side,
      .fd-main,
      .fd-sum {
        padding: 14px !important
      }

      .fd-pn {
        font-size: 22px !important
      }

      .fd-price-n {
        font-size: 20px !important
      }

      .score-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important
      }

      .tcard {
        padding: 24px !important
      }

      .ttext {
        font-size: 14px !important
      }

      .foot-top {
        gap: 32px !important
      }

      .cta-in h2 {
        font-size: 34px !important
      }

      .cta-btns {
        flex-direction: column;
        width: 100%
      }

      .cta-btns button {
        width: 100%
      }
    }

    @media(max-width:420px) {
      .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important
      }

      .hero h1 {
        font-size: 32px !important
      }

      .sec-title {
        font-size: 26px !important
      }
    }

    /* ---- TICKER mobile fix ---- */
    @media(max-width:768px) {
      .ticker-track {
        font-size: 9.5px !important;
        gap: 24px !important
      }

      .tk-item {
        gap: 5px !important
      }
    }

    /* ---- Modal mobile ---- */
    @media(max-width:768px) {
      .modal-panel {
        width: 100% !important;
        max-width: 100% !important
      }

      .modal-hero {
        padding: 24px 18px !important;
        min-height: 200px !important
      }

      .modal-hero img {
        max-height: 200px !important
      }

      .modal-hero-c {
        padding: 18px 20px 4px !important
      }

      .modal-pname {
        font-size: 22px !important
      }

      .modal-price {
        font-size: 30px !important
      }
    }
  </style>


  <style>
    .tgrid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 20px !important
    }

    .tgrid .tcard:nth-child(4),
    .tgrid .tcard:nth-child(5) {
      grid-column: span 1
    }

    @media(max-width:980px) {
      .tgrid {
        grid-template-columns: repeat(2, 1fr) !important
      }
    }

    @media(max-width:600px) {
      .tgrid {
        grid-template-columns: 1fr !important
      }
    }
  </style>





  <style>
    /* CLEAN FIX PASS — no display:contents, no flex reorder hacks */

    /* HERO HEADLINE: ensure space between words on mobile */
    @media(max-width:1100px) {
      .hero h1 {
        font-size: 42px !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important
      }

      .hero h1 .grad {
        display: inline !important;
        margin-top: 0 !important
      }

      .hero h1 br {
        display: none
      }
    }

    @media(max-width:480px) {
      .hero h1 {
        font-size: 34px !important
      }
    }

    /* HERO MOBILE REORDER: use grid order only (no display:contents) */
    @media(max-width:1100px) {
      .hero-in {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        align-items: start !important
      }

      .hero-right {
        order: 0 !important;
        max-width: 560px;
        width: 100%;
        margin: 0 !important
      }

      .hero-badge,
      .hero h1,
      .hero-sub,
      .hero-ctas,
      .hero-stats {
        order: 0
      }
    }

    /* On mobile only, put video AFTER subtitle but BEFORE buttons via flex grid reorder */
    @media(max-width:768px) {
      .hero {
        padding: 96px 22px 56px !important
      }

      .hero-ctas {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important
      }

      .hero-ctas button {
        width: 100% !important;
        justify-content: center !important
      }

      .hero-stats {
        gap: 18px !important
      }

      .hst-n {
        font-size: 22px !important
      }

      .hst-l {
        font-size: 9px !important
      }
    }

    /* HIW PANEL: kill empty top gap */
    .hiw-panel {
      padding: 36px 48px 40px !important;
      min-height: auto !important
    }

    .hiw-meta {
      margin-bottom: 14px !important
    }

    .hiw-panel h3 {
      margin-bottom: 14px !important
    }

    .hiw-panel p {
      margin-bottom: 18px !important
    }

    @media(max-width:768px) {
      .hiw-panel {
        padding: 28px 22px 32px !important
      }

      .hiw-panel h3 {
        font-size: 22px !important;
        margin-bottom: 12px !important
      }

      .hiw-panel p {
        font-size: 13.5px !important;
        margin-bottom: 14px !important
      }
    }

    /* PRODUCT GRID: strict integrity */
    .pgrid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 22px !important;
      align-items: stretch !important;
      width: 100% !important
    }

    .pgrid>.pcard {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      grid-column: auto !important;
      overflow: hidden !important;
      box-sizing: border-box !important
    }

    .pgrid>.pcard .pimg {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box !important
    }

    .pgrid>.pcard .pimg img {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      object-fit: contain !important;
      display: block !important;
      box-sizing: border-box !important
    }

    /* PRODUCT FILTER: class-based hide */
    .pcard.filter-hidden {
      display: none !important
    }

    /* MOBILE PRODUCTS: 2 cols, descriptions visible */
    @media(max-width:980px) {
      .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important
      }
    }

    @media(max-width:768px) {
      .pgrid>.pcard {
        border-radius: 11px !important
      }

      .pgrid>.pcard .pimg {
        padding: 10px !important
      }

      .pbody {
        padding: 14px !important
      }

      .pname {
        font-size: 13.5px !important;
        -webkit-line-clamp: 2 !important;
        letter-spacing: -.015em !important
      }

      .pdesc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important
      }

      .pfoot {
        padding-top: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important
      }

      .pprice {
        font-size: 16px !important
      }

      .btn-buy {
        padding: 7px 0 !important;
        font-size: 9px !important;
        width: 100% !important;
        text-align: center !important
      }

      .pcat-badge {
        font-size: 7.5px !important;
        padding: 3px 7px !important;
        letter-spacing: .1em !important
      }

      .ftabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important
      }

      .ftab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        padding: 7px 13px !important
      }
    }

    /* FOOTER DISCLAIMER: proper block flow */
    footer .foot-disc {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 0 56px 0 !important;
      padding: 18px 22px 18px 56px !important;
      background: linear-gradient(135deg, rgba(220, 38, 38, .06), rgba(220, 38, 38, .03)) !important;
      border: 1px solid rgba(220, 38, 38, .18) !important;
      color: #991B1B !important;
      border-radius: 12px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 13px !important;
      line-height: 1.6 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      text-decoration: none !important;
      position: relative !important
    }

    footer .foot-disc strong {
      color: #7F1D1D !important;
      font-weight: 700 !important
    }

    footer .foot-disc::before {
      content: '';
      position: absolute !important;
      left: 20px !important;
      top: 20px !important;
      width: 20px !important;
      height: 20px !important;
      transform: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-size: contain !important
    }

    @media(max-width:768px) {
      footer .foot-disc {
        padding: 16px 18px 16px 46px !important;
        font-size: 12px !important;
        margin-bottom: 36px !important
      }

      footer .foot-disc::before {
        left: 16px !important;
        top: 18px !important;
        width: 18px !important;
        height: 18px !important
      }
    }

    /* DASHBOARD MOBILE */
    @media(max-width:768px) {
      #dashboard .dpf-hdr {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 14px 18px !important
      }

      #dashboard .fd-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important
      }

      #dashboard .score-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important
      }

      #dashboard .fd-overall {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important
      }

      #dashboard #dash-matrix {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important
      }

      #dashboard .mt-tbl {
        min-width: 680px
      }

      #dashboard .tr-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important
      }

      #dashboard .dpt-row {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        width: 100%
      }

      #dashboard .dpt {
        flex-shrink: 0 !important
      }
    }

    /* LEARN + PLATFORM MOBILE */
    @media(max-width:1100px) {
      .learn-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important
      }

      .asc-card {
        position: static !important
      }
    }

    @media(max-width:768px) {
      .hl-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important
      }
    }

    /* LEAD FORM MOBILE */
    @media(max-width:768px) {
      .lead-sec {
        padding: 56px 22px !important
      }

      .lead-form {
        grid-template-columns: 1fr !important;
        gap: 10px !important
      }

      .lf-wide,
      .phone-row,
      .btn-lead-submit {
        grid-column: 1 !important
      }

      .phone-row {
        flex-wrap: wrap !important
      }
    }

    /* iPAD TWEAKS */
    @media(min-width:769px) and (max-width:1024px) {
      .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important
      }
    }

    section#products .pgrid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 22px !important;
      grid-auto-flow: row !important;
      grid-auto-rows: auto !important;
      align-items: stretch !important;
      width: 100% !important
    }

    section#products .pgrid>.pcard {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      grid-column: span 1 !important;
      grid-row: span 1 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      height: 100% !important
    }

    section#products .pgrid>.pcard>* {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important
    }

    section#products .pgrid>.pcard .pimg {
      aspect-ratio: 4/3 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 14px !important;
      overflow: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important
    }

    section#products .pgrid>.pcard .pimg img {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      min-width: 0 !important;
      object-fit: contain !important;
      object-position: center !important;
      display: block !important;
      box-sizing: border-box !important
    }

    @media(max-width:980px) {
      section#products .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important
      }
    }

    @media(max-width:480px) {
      section#products .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important
      }
    }

    /* === MODAL VISIBILITY (override failsafe) === */
    .modal-overlay {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .35s !important
    }

    .modal-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    .modal-panel {
      transform: translateX(100%) !important;
      transition: transform .45s cubic-bezier(.16, 1, .3, 1) !important
    }

    .modal-panel.open {
      transform: translateX(0) !important
    }

    .trial-overlay {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .3s !important
    }

    .trial-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    .vl-overlay {
      opacity: 0 !important;
      pointer-events: none !important
    }

    .vl-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    /* === NAV: ensure solid background when scrolled === */
    nav#mainNav {
      background: transparent;
      transition: all .3s ease
    }

    nav#mainNav.stuck {
      background: rgba(255, 255, 255, .96) !important;
      backdrop-filter: blur(20px) saturate(1.5) !important;
      box-shadow: 0 1px 0 #E1E7F0 !important
    }
  </style>

  <style>
    /* === FINAL CLEAN OVERRIDES (highest priority) === */
    /* Always show all entrance-animation elements */
    .in-1,
    .in-2,
    .in-3,
    .in-4,
    .in-5,
    .in-6 {
      opacity: 1 !important;
      animation: none !important;
      transform: none !important
    }

    .rev {
      opacity: 1 !important;
      transform: none !important
    }

    body {
      opacity: 1 !important;
      animation: none !important
    }

    /* Modal/overlay visibility (preserve toggle behavior) */
    .modal-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s
    }

    .modal-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    .modal-panel {
      transform: translateX(100%);
      transition: transform .45s cubic-bezier(.16, 1, .3, 1)
    }

    .modal-panel.open {
      transform: translateX(0) !important
    }

    .trial-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s
    }

    .trial-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    .trial-overlay.open .trial-modal {
      transform: scale(1) translateY(0) !important
    }

    .vl-overlay {
      opacity: 0;
      pointer-events: none
    }

    .vl-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important
    }

    /* Mobile nav drawer */
    .mob-nav {
      display: none
    }

    .mob-nav.open {
      display: flex !important
    }

    /* Nav stuck state */
    nav#mainNav.stuck {
      background: rgba(255, 255, 255, .96) !important;
      backdrop-filter: blur(20px) saturate(1.5) !important;
      box-shadow: 0 1px 0 #E1E7F0 !important
    }

    /* === BULLETPROOF PRODUCT GRID (max specificity) === */
    section#products .pgrid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 22px !important;
      grid-auto-flow: row !important;
      align-items: stretch !important;
      width: 100% !important
    }

    section#products .pgrid>.pcard {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      grid-column: span 1 !important;
      grid-row: span 1 !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      height: 100% !important
    }

    section#products .pgrid>.pcard>* {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      flex-shrink: 0
    }

    section#products .pgrid>.pcard .pbody {
      flex: 1 !important
    }

    section#products .pgrid>.pcard .pimg {
      aspect-ratio: 4/3 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 14px !important;
      overflow: hidden !important;
      background: linear-gradient(135deg, #0A1628, #0F2138) !important;
      border-radius: 14px 14px 0 0 !important
    }

    section#products .pgrid>.pcard .pimg img {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 100% !important;
      min-width: 0 !important;
      object-fit: contain !important;
      object-position: center !important;
      display: block !important
    }

    .pcard.filter-hidden {
      display: none !important
    }

    @media(max-width:980px) {
      section#products .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important
      }
    }

    @media(max-width:480px) {
      section#products .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important
      }
    }
  </style>

  <style id="catalogue-final-v2">
    /* ============================================================
   PRODUCT CATALOGUE - ABSOLUTE FINAL (one component for ALL cards)
   Maps user's spec onto existing markup classes
   ============================================================ */

    /* Grid */
    html body section#products div.pgrid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: 520px !important;
      grid-auto-flow: row !important;
      gap: 24px !important;
      align-items: stretch !important;
      width: 100% !important;
    }

    /* Every card - same component, no exceptions */
    html body section#products div.pgrid>div.pcard,
    html body section#products div.pgrid>div.pcard.rev,
    html body section#products div.pgrid>div.pcard[data-cat] {
      height: 520px !important;
      min-height: 520px !important;
      max-height: 520px !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      grid-column: span 1 / span 1 !important;
      grid-row: span 1 / span 1 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      background: #fff !important;
      border: 1px solid #E8ECF3 !important;
      border-radius: 14px !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
      position: relative !important;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s !important;
    }

    html body section#products div.pgrid>div.pcard:hover {
      transform: translateY(-4px) !important;
      border-color: #D5DEEA !important;
      box-shadow: 0 24px 48px -20px rgba(10, 22, 40, .18) !important;
    }

    /* Thumbnail - fixed 250px height, never image-driven */
    html body section#products div.pgrid>div.pcard>div.pimg {
      height: 250px !important;
      min-height: 250px !important;
      max-height: 250px !important;
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 250px !important;
      aspect-ratio: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 14px !important;
      background: #071525 !important;
      background: linear-gradient(135deg, #071525 0%, #0F2138 100%) !important;
      border-radius: 14px 14px 0 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
      overflow: hidden !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    /* Image - contain, never controls card size */
    html body section#products div.pgrid>div.pcard>div.pimg>img {
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      object-fit: contain !important;
      object-position: center !important;
      display: block !important;
      border-radius: 4px !important;
      box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4) !important;
      flex: 0 0 auto !important;
    }

    /* Badge */
    html body section#products div.pgrid>div.pcard span.pcat-badge {
      position: absolute !important;
      top: 12px !important;
      left: 12px !important;
      font-family: 'JetBrains Mono', monospace !important;
      font-size: 9px !important;
      font-weight: 800 !important;
      letter-spacing: .14em !important;
      text-transform: uppercase !important;
      color: #fff !important;
      padding: 4px 9px !important;
      border-radius: 5px !important;
      z-index: 2 !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
      backdrop-filter: blur(8px) !important;
    }

    html body section#products div.pgrid>div.pcard[data-cat="mt5-ind"] span.pcat-badge {
      background: rgba(59, 155, 229, .95) !important
    }

    html body section#products div.pgrid>div.pcard[data-cat="mt4-ind"] span.pcat-badge {
      background: rgba(93, 193, 88, .95) !important
    }

    html body section#products div.pgrid>div.pcard[data-cat$="-ea"] span.pcat-badge {
      background: linear-gradient(135deg, #3B9BE5, #5DC158) !important;
      border-color: transparent !important;
    }

    /* Content area - 270px (520 - 250) */
    html body section#products div.pgrid>div.pcard>div.pbody {
      height: 270px !important;
      max-height: 270px !important;
      flex: 1 1 270px !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 20px !important;
      width: 100% !important;
      background: #fff !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    /* Title */
    html body section#products div.pgrid>div.pcard div.pname {
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      flex: 0 0 48px !important;
      font-family: 'Bricolage Grotesque', sans-serif !important;
      font-size: 17px !important;
      font-weight: 700 !important;
      letter-spacing: -.02em !important;
      line-height: 1.3 !important;
      color: #0A1628 !important;
      margin: 0 0 8px 0 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    /* Description */
    html body section#products div.pgrid>div.pcard div.pdesc {
      height: 63px !important;
      min-height: 63px !important;
      max-height: 63px !important;
      flex: 0 0 63px !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 13.5px !important;
      font-weight: 400 !important;
      line-height: 1.55 !important;
      color: #5E6E85 !important;
      margin: 0 0 16px 0 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    /* Footer pinned bottom */
    html body section#products div.pgrid>div.pcard div.pfoot {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      padding: 16px 0 0 0 !important;
      margin-top: auto !important;
      border-top: 1px solid #EFF2F7 !important;
      width: 100% !important;
      flex: 0 0 auto !important;
    }

    html body section#products div.pgrid>div.pcard div.pprice {
      font-family: 'Bricolage Grotesque', sans-serif !important;
      font-size: 22px !important;
      font-weight: 700 !important;
      letter-spacing: -.025em !important;
      color: #0A1628 !important;
      margin: 0 !important;
    }

    html body section#products div.pgrid>div.pcard button.btn-buy {
      font-family: 'JetBrains Mono', monospace !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .14em !important;
      text-transform: uppercase !important;
      color: #0A1628 !important;
      background: transparent !important;
      border: 1.5px solid #0A1628 !important;
      padding: 9px 14px !important;
      border-radius: 100px !important;
      cursor: pointer !important;
      transition: all .25s ease !important;
      white-space: nowrap !important;
    }

    html body section#products div.pgrid>div.pcard button.btn-buy:hover {
      background: #0A1628 !important;
      color: #fff !important;
      transform: translateX(2px) !important;
    }

    /* Filter hidden */
    html body section#products div.pgrid>div.pcard.filter-hidden {
      display: none !important
    }

    /* Tablet 2-col */
    @media (max-width: 1100px) {
      html body section#products div.pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 500px !important;
        gap: 18px !important;
      }

      html body section#products div.pgrid>div.pcard {
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
      }

      html body section#products div.pgrid>div.pcard>div.pimg {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        flex: 0 0 230px !important;
      }

      html body section#products div.pgrid>div.pcard>div.pbody {
        height: 270px !important;
        max-height: 270px !important;
      }
    }

    /* Mobile 1-col */
    @media (max-width: 560px) {
      html body section#products div.pgrid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 14px !important;
      }

      html body section#products div.pgrid>div.pcard {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
      }

      html body section#products div.pgrid>div.pcard>div.pimg {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        aspect-ratio: 4 / 3 !important;
      }

      html body section#products div.pgrid>div.pcard>div.pbody {
        height: auto !important;
        max-height: none !important;
        padding: 18px !important;
      }
    }

    /* Filter tabs */
    html body section#products div.ftabs {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important
    }

    html body section#products button.ftab {
      font-family: 'JetBrains Mono', monospace !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
      padding: 9px 18px !important;
      border: 1px solid #E1E7F0 !important;
      background: #fff !important;
      color: #5E6E85 !important;
      border-radius: 100px !important;
      cursor: pointer !important;
      transition: all .25s ease !important;
      white-space: nowrap !important;
    }

    html body section#products button.ftab:hover:not(.on) {
      border-color: #0A1628 !important;
      color: #0A1628 !important
    }

    html body section#products button.ftab.on {
      background: #0A1628 !important;
      color: #fff !important;
      border-color: #0A1628 !important
    }


    @media (max-width: 768px) {
      #testimonials .tgrid {
        grid-template-columns: 1fr !important;
        gap: 14px !important
      }

      #testimonials .tcard {
        padding: 24px !important
      }

      #testimonials .ttext {
        font-size: 14px !important;
        line-height: 1.7 !important
      }
    }
  </style>

  <style id="trade-signal-blog-styles">
    /* === TRADE SIGNAL SECTION === */
    #signals {
      background: #fff;
      position: relative;
      overflow: hidden
    }

    #signals::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(59, 155, 229, .04), transparent 60%);
      pointer-events: none
    }

    .signals-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 64px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .signals-left .sec-title {
      margin-bottom: 18px
    }

    .sig-features {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 32px;
      border-top: 1px solid #EFF2F7;
      padding-top: 32px
    }

    .sig-feat {
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .sig-feat-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, rgba(59, 155, 229, .12), rgba(93, 193, 88, .08));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-d);
      flex-shrink: 0;
      transition: all .3s
    }

    .sig-feat:hover .sig-feat-icon {
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      transform: scale(1.05)
    }

    .sig-feat-icon svg {
      width: 20px;
      height: 20px
    }

    .sig-feat-c strong {
      display: block;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em;
      margin-bottom: 4px
    }

    .sig-feat-c p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0
    }

    /* Signal card stage */
    .signal-card-stage {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px
    }

    .signal-bg-glow {
      position: absolute;
      width: 120%;
      height: 120%;
      background: radial-gradient(circle, rgba(59, 155, 229, .12), rgba(93, 193, 88, .06), transparent 60%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0
    }

    .signal-card {
      position: relative;
      z-index: 2;
      background: #fff;
      border: 1px solid #E1E7F0;
      border-radius: 16px;
      width: 100%;
      max-width: 440px;
      box-shadow: 0 30px 60px -20px rgba(10, 22, 40, .18);
      overflow: hidden;
      animation: cardFloat 6s ease-in-out infinite
    }

    @keyframes cardFloat {

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

      50% {
        transform: translateY(-8px)
      }
    }

    .signal-card-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid #EFF2F7;
      background: #F7F9FC
    }

    .signal-from {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .signal-from-av {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 13px
    }

    .signal-from-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em
    }

    .signal-from-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--muted);
      letter-spacing: .04em
    }

    .signal-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .04em
    }

    .signal-card-banner {
      margin: 18px 18px 0;
      background: linear-gradient(135deg, #1E5BC6, #3B9BE5);
      color: #fff;
      text-align: center;
      padding: 14px;
      border-radius: 10px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -.01em;
      box-shadow: 0 8px 20px -8px rgba(59, 155, 229, .4);
      position: relative;
      overflow: hidden
    }

    .signal-card-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
      animation: shimmer 3.5s infinite
    }

    @keyframes shimmer {
      0% {
        left: -100%
      }

      50%,
      100% {
        left: 200%
      }
    }

    .signal-card-body {
      padding: 18px
    }

    .signal-greet {
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 10px;
      font-weight: 600
    }

    .signal-intro {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 16px;
      line-height: 1.55
    }

    .signal-detail-box {
      background: #0A1628;
      border-radius: 10px;
      padding: 16px;
      color: #fff;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      line-height: 1.7;
      margin-bottom: 16px;
      border: 1px solid rgba(255, 255, 255, .05)
    }

    .signal-row {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .signal-row:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      padding-bottom: 5px;
      margin-bottom: 5px
    }

    .signal-k {
      font-weight: 700;
      color: rgba(255, 255, 255, .9)
    }

    .signal-v {
      color: rgba(255, 255, 255, .7);
      font-weight: 500
    }

    .signal-buy {
      color: #5DC158 !important;
      font-weight: 700;
      letter-spacing: .06em
    }

    .signal-view-btn {
      width: 100%;
      background: linear-gradient(135deg, #1E5BC6, #3B9BE5);
      color: #fff;
      border: none;
      padding: 13px;
      border-radius: 10px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s;
      box-shadow: 0 4px 12px -4px rgba(59, 155, 229, .4)
    }

    .signal-view-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -6px rgba(59, 155, 229, .5)
    }

    /* Ping rings */
    .signal-ping {
      position: absolute;
      border: 2px solid rgba(59, 155, 229, .3);
      border-radius: 50%;
      pointer-events: none;
      animation: pingExpand 3.5s ease-out infinite
    }

    .signal-ping-1 {
      top: 20%;
      left: 10%;
      width: 50px;
      height: 50px;
      animation-delay: 0s
    }

    .signal-ping-2 {
      bottom: 25%;
      right: 8%;
      width: 40px;
      height: 40px;
      animation-delay: 1.2s;
      border-color: rgba(93, 193, 88, .3)
    }

    .signal-ping-3 {
      top: 55%;
      left: 5%;
      width: 30px;
      height: 30px;
      animation-delay: 2.4s;
      border-color: rgba(59, 155, 229, .25)
    }

    @keyframes pingExpand {
      0% {
        transform: scale(.5);
        opacity: 1
      }

      100% {
        transform: scale(2);
        opacity: 0
      }
    }

    @media(max-width:980px) {
      .signals-grid {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .signal-card {
        max-width: 400px;
        margin: 0 auto
      }

      .signal-ping {
        display: none
      }
    }

    @media(max-width:560px) {
      .signal-card {
        max-width: 100%
      }

      .signal-card-hdr {
        padding: 12px 14px
      }

      .signal-card-body {
        padding: 14px
      }

      .signal-detail-box {
        padding: 12px;
        font-size: 11.5px
      }
    }

    /* === BLOG SECTION === */
    #blog {
      background: var(--paper2);
      position: relative;
      overflow: hidden
    }

    #blog::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(93, 193, 88, .05), transparent 60%);
      pointer-events: none
    }

    .blog-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 48px;
      flex-wrap: wrap;
      gap: 24px
    }

    .blog-view-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink);
      background: transparent;
      border: 1.5px solid var(--ink);
      padding: 11px 18px;
      border-radius: 100px;
      transition: all .25s
    }

    .blog-view-all:hover {
      background: var(--ink);
      color: #fff;
      transform: translateX(2px)
    }

    .blog-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 24px;
      position: relative;
      z-index: 1
    }

    .blog-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #E8ECF3;
      border-radius: 16px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s;
      cursor: pointer
    }

    .blog-card:hover {
      transform: translateY(-6px);
      border-color: #D5DEEA;
      box-shadow: 0 24px 48px -20px rgba(10, 22, 40, .16)
    }

    .blog-card-img {
      position: relative;
      aspect-ratio: 5/3;
      background: #0A1628;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #EFF2F7
    }

    .blog-card-img-gold {
      background: linear-gradient(135deg, #1A1208 0%, #2D1F0A 100%)
    }

    .blog-card-img-blue {
      background: linear-gradient(135deg, #071525 0%, #0F2138 100%)
    }

    .blog-card-img-green {
      background: linear-gradient(135deg, #0A1F12 0%, #102D1C 100%)
    }

    .blog-chart-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0
    }

    .blog-chart-line {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: drawLine 2.5s cubic-bezier(.4, 0, .2, 1) forwards
    }

    .blog-card:hover .blog-chart-line {
      animation: drawLine 1.5s cubic-bezier(.4, 0, .2, 1) forwards
    }

    @keyframes drawLine {
      to {
        stroke-dashoffset: 0
      }
    }

    .blog-chart-fill {
      opacity: 0;
      animation: fadeFill 1.5s 1s ease forwards
    }

    @keyframes fadeFill {
      to {
        opacity: 1
      }
    }

    .blog-pulse-dot {
      filter: drop-shadow(0 0 6px currentColor);
      animation: dotPulse 1.8s ease-in-out infinite
    }

    @keyframes dotPulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
        transform-origin: center
      }

      50% {
        opacity: .5;
        transform: scale(1.6);
        transform-origin: center
      }
    }

    .blog-card-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(10, 22, 40, .7);
      backdrop-filter: blur(10px);
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, .1);
      z-index: 2
    }

    .blog-card-pin {
      position: absolute;
      top: 14px;
      right: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #0A1628;
      background: linear-gradient(135deg, #F5A623, #FFCB52);
      padding: 5px 11px;
      border-radius: 5px;
      z-index: 2;
      box-shadow: 0 4px 12px -2px rgba(245, 166, 35, .4)
    }

    .blog-card-body {
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .blog-card-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 12px
    }

    .blog-card-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em;
      line-height: 1.3;
      margin-bottom: 12px
    }

    .blog-card-featured .blog-card-title {
      font-size: 22px
    }

    .blog-card-excerpt {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 18px;
      flex: 1
    }

    .blog-card-cta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--blue-d);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;
      transition: gap .25s
    }

    .blog-card:hover .blog-card-cta {
      gap: 10px
    }

    .blog-card-cta span {
      transition: transform .25s
    }

    .blog-card:hover .blog-card-cta span {
      transform: translateX(2px)
    }

    @media(max-width:1100px) {
      .blog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px
      }

      .blog-card-featured {
        grid-column: 1/-1
      }

      .blog-card-featured .blog-card-img {
        aspect-ratio: 18/7
      }
    }

    @media(max-width:680px) {
      .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px
      }

      .blog-card-featured {
        grid-column: 1
      }

      .blog-card-featured .blog-card-img {
        aspect-ratio: 5/3
      }

      .blog-card-title {
        font-size: 17px
      }

      .blog-card-featured .blog-card-title {
        font-size: 19px
      }

      .blog-card-body {
        padding: 20px
      }

      .blog-header {
        margin-bottom: 36px
      }
    }

    /* === MODAL SUPPORT LINE === */
    .modal-support-line {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(59, 155, 229, .06), rgba(93, 193, 88, .04));
      border: 1px solid rgba(59, 155, 229, .18);
      border-radius: 10px;
      margin-bottom: 24px;
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.55
    }

    .modal-support-line svg {
      color: var(--blue-d);
      flex-shrink: 0;
      margin-top: 2px
    }

    .modal-support-line a {
      color: var(--blue-d);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid rgba(59, 155, 229, .3);
      transition: border-color .2s
    }

    .modal-support-line a:hover {
      border-bottom-color: var(--blue-d)
    }

    /* === FOOTER 5-COL UPDATE === */
    @media(min-width:1101px) {
      .foot-top {
        grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr !important
      }
    }

    @media(max-width:1100px) and (min-width:769px) {
      .foot-top {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 32px !important
      }

      .foot-top>div:first-child {
        grid-column: 1/-1
      }
    }
 
  
    .blog-grid-single {
      display: grid !important;
      grid-template-columns: 1fr !important;
      max-width: 980px;
      margin: 0 auto !important
    }

    .blog-grid-single .blog-card-featured {
      grid-column: 1 !important;
      display: grid !important;
      grid-template-columns: 1.1fr 1fr !important;
      align-items: stretch !important
    }

    .blog-grid-single .blog-card-featured .blog-card-img {
      aspect-ratio: auto !important;
      height: 100% !important;
      min-height: 340px !important
    }

    .blog-grid-single .blog-card-featured .blog-card-body {
      padding: 40px !important
    }

    .blog-grid-single .blog-card-featured .blog-card-title {
      font-size: 26px !important;
      line-height: 1.2 !important
    }

    .blog-grid-single .blog-card-featured .blog-card-excerpt {
      font-size: 15px !important;
      line-height: 1.65 !important;
      margin-bottom: 24px !important
    }

    @media(max-width:880px) {
      .blog-grid-single .blog-card-featured {
        grid-template-columns: 1fr !important
      }

      .blog-grid-single .blog-card-featured .blog-card-img {
        aspect-ratio: 5/3 !important;
        min-height: 0 !important;
        height: auto !important
      }

      .blog-grid-single .blog-card-featured .blog-card-body {
        padding: 28px !important
      }

      .blog-grid-single .blog-card-featured .blog-card-title {
        font-size: 22px !important
      }

      .blog-grid-single .blog-card-featured .blog-card-excerpt {
        font-size: 14px !important
      }
    }