.eby-features {
      --bg: #eeeaea;
      --text: #0f172a;
      --muted: #52606d;
      --yellow: #facd08;
      --orange: #ff7a00;
      --shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
      --shadow-hover: 0 28px 70px rgba(15, 23, 42, 0.09);
    }

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

    .eby-features {
      background: var(--bg);
      color: var(--text);
    }

    .eby-features {
      padding: 90px 0;
    }

    .eby-container {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .features-header {
      max-width: 760px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .features-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border: none;
      border-radius: 10px;
      background: rgba(250, 205, 8, 0.12);
      color: #855900;
      font-size: 13px;
      font-weight: 700;
    }

    .features-label::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--yellow), var(--orange));
    }

    .features-header h2 {
      font-size: clamp(34px, 5vw, 58px);
      line-height: 0.98;
      letter-spacing: -0.055em;
      font-weight: 760;
      margin-bottom: 18px;
    }

    .features-header p {
      max-width: 700px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.7;
    }

    .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 112px;
      gap: 16px;
    }

    .bento-card {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      border: none;
      background: #d9d9d9;
      box-shadow: var(--shadow);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .bento-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .bento-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top right, rgba(250, 205, 8, 0.12), transparent 36%),
        radial-gradient(circle at bottom left, rgba(255, 122, 0, 0.07), transparent 38%);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .bento-card:hover::before {
      opacity: 1;
    }

    .card-inner {
      position: relative;
      z-index: 2;
      height: 100%;
      padding: 18px;
      display: flex;
      flex-direction: column;
    }

    .bento-card h3 {
      font-size: 18px;
      line-height: 1.15;
      letter-spacing: -0.035em;
      font-weight: 730;
      margin-bottom: 6px;
    }

    .bento-card p {
      color: #555555;
      font-size: 13.5px;
      line-height: 1.45;
      max-width: 96%;
    }

    .card-visual {
      position: relative;
      flex: 1;
      min-height: 0;
      margin-top: 12px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      overflow: hidden;
    }

    .feature-ai {
      grid-column: 1 / span 7;
      grid-row: 1 / span 2;
    }

    .feature-compare {
      grid-column: 8 / span 5;
      grid-row: 1 / span 2;
    }

    .feature-compare p {
      white-space: nowrap;
      max-width: 100%;
      font-size: 13px;
    }

    .feature-portfolio {
      grid-column: 1 / span 6;
      grid-row: 3 / span 2;
    }

    .feature-indicators {
      grid-column: 7 / span 6;
      grid-row: 3 / span 2;
    }

    .feature-converter {
      grid-column: 1 / span 4;
      grid-row: 5 / span 2;
    }

    .feature-alerts {
      grid-column: 5 / span 4;
      grid-row: 5 / span 2;
    }

    .feature-favorites {
      grid-column: 9 / span 4;
      grid-row: 5 / span 2;
    }

    .feature-ai .card-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
    }

    .bw-shell {
      position: relative;
      width: min(330px, 100%);
      height: 100%;
      margin: 0 auto;
      font-family: inherit;
      transition: width .45s cubic-bezier(.2,.9,.25,1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bw-shell.is-panel-mode {
      width: min(450px, 100%);
    }

    .bw-choice-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      text-align: center;
    }

    .bw-choice-grid.is-hidden {
      display: none !important;
    }

    .bw-choice-grid.is-exiting {
      animation: bwZoomFadeOut .34s cubic-bezier(.4,0,.2,1) forwards;
      pointer-events: none;
    }

    .bw-choice-grid.is-entering {
      animation: bwZoomFadeIn .35s cubic-bezier(.4,0,.2,1) both;
    }

    .bw-greeting {
      margin: 0 0 3px;
      text-align: center;
      line-height: 1.25;
      width: 100%;
    }

    .bw-greeting-prefix {
      font-size: 14px;
      font-weight: 500;
      color: #555;
    }

    .bw-greeting-name {
      display: inline-block;
      font-size: 17px;
      font-weight: 700;
      background: linear-gradient(110deg,#ff5c00,#f59500,#facd08,#f59500,#ff5c00);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: bw-name-shimmer 3s ease-in-out infinite;
    }

    @keyframes bw-name-shimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .bw-morph-line {
      margin: 0 0 12px;
      font-size: 13px;
      font-weight: 500;
      color: #555;
      line-height: 1.35;
      width: 100%;
      display: flex;
      justify-content: center;
      text-align: center;
    }

    .bw-morph-wrap {
      display: block;
      position: relative;
      width: 100%;
      height: 1.35em;
    }

    .bw-morph-span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      color: #555;
    }

    @media (max-width: 640px) {
      .bw-morph-line {
        font-size: 12px;
      }

      .bw-morph-wrap {
        height: 2.7em;
      }

      .bw-morph-span {
        width: 100%;
        white-space: normal;
        text-wrap: balance;
      }
    }

    .bw-cards {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .bw-poda {
      position: relative;
      z-index: 0;
      width: 100%;
      max-width: 300px;
      height: 46px;
      margin: 0 auto;
      display: block;
      border-radius: 10px;
    }

    .bw-poda * {
      box-sizing: border-box;
    }

    .bw-poda .bw-white,
    .bw-poda .bw-border,
    .bw-poda .bw-darkBorderBg,
    .bw-poda .bw-glow {
      position: absolute;
      inset: 0;
      margin: auto;
      overflow: hidden;
      border-radius: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .bw-poda:hover .bw-white,
    .bw-poda:hover .bw-border,
    .bw-poda:hover .bw-darkBorderBg,
    .bw-poda:hover .bw-glow,
    .bw-poda.is-demo-hover .bw-white,
    .bw-poda.is-demo-hover .bw-border,
    .bw-poda.is-demo-hover .bw-darkBorderBg,
    .bw-poda.is-demo-hover .bw-glow,
    .bw-poda:has(.bw-button.is-active) .bw-white,
    .bw-poda:has(.bw-button.is-active) .bw-border,
    .bw-poda:has(.bw-button.is-active) .bw-darkBorderBg,
    .bw-poda:has(.bw-button.is-active) .bw-glow {
      opacity: 1;
    }

    .bw-poda .bw-glow {
      z-index: -4;
      width: 330px;
      height: 78px;
      filter: blur(17px);
    }

    .bw-poda .bw-darkBorderBg {
      z-index: -3;
      width: 298px;
      height: 44px;
      filter: blur(1.5px);
    }

    .bw-poda .bw-white {
      z-index: -2;
      width: 294px;
      height: 42px;
      filter: blur(1.2px);
    }

    .bw-poda .bw-border {
      z-index: -1;
      width: 290px;
      height: 39px;
      filter: blur(.35px);
    }

    .bw-poda .bw-glow::before,
    .bw-poda .bw-darkBorderBg::before,
    .bw-poda .bw-white::before,
    .bw-poda .bw-border::before {
      content: "";
      position: absolute;
      z-index: -2;
      top: 50%;
      left: 50%;
      width: 640px;
      height: 640px;
      transform: translate(-50%,-50%) rotate(60deg);
      background-repeat: no-repeat;
      background-position: 0 0;
    }

    .bw-poda:hover .bw-glow::before,
    .bw-poda:hover .bw-darkBorderBg::before,
    .bw-poda:hover .bw-white::before,
    .bw-poda:hover .bw-border::before,
    .bw-poda.is-demo-hover .bw-glow::before,
    .bw-poda.is-demo-hover .bw-darkBorderBg::before,
    .bw-poda.is-demo-hover .bw-white::before,
    .bw-poda.is-demo-hover .bw-border::before,
    .bw-poda:has(.bw-button.is-active) .bw-glow::before,
    .bw-poda:has(.bw-button.is-active) .bw-darkBorderBg::before,
    .bw-poda:has(.bw-button.is-active) .bw-white::before,
    .bw-poda:has(.bw-button.is-active) .bw-border::before {
      animation: bwPodaRotate 4s linear infinite;
    }

    .bw-poda .bw-glow::before {
      background-image: conic-gradient(rgba(255,255,255,0),#ffb703 5%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 50%,#fb8500 60%,rgba(255,255,255,0) 87%);
    }

    .bw-poda .bw-darkBorderBg::before {
      background-image: conic-gradient(rgba(255,255,255,0),#ffb703,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 50%,#fb8500,rgba(255,255,255,0) 60%);
    }

    .bw-poda .bw-white::before {
      filter: brightness(1.25);
      background-image: conic-gradient(rgba(255,255,255,0) 0%,#ffe08a,rgba(255,255,255,0) 8%,rgba(255,255,255,0) 50%,#ff9f1c,rgba(255,255,255,0) 58%);
    }

    .bw-poda .bw-border::before {
      filter: brightness(1.35);
      background-image: conic-gradient(#f4f4f4,#ffb703 5%,#f4f4f4 14%,#f4f4f4 50%,#fb8500 60%,#f4f4f4 64%);
    }

    .bw-main {
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 2;
      width: 286px;
      max-width: 100%;
      height: 36px;
    }

    .bw-button {
      width: 100%;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: #d9d9d9;
      color: #1f1f1f;
      padding-left: 50px;
      padding-right: 14px;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: inherit;
      transition: transform .2s ease, background .2s ease;
    }

    .bw-button:hover,
    .bw-poda.is-demo-hover .bw-button {
      background: linear-gradient(180deg,#e4e4e4,#d2d2d2);
    }

    .bw-button:active,
    .bw-poda.is-demo-click .bw-button {
      transform: scale(.985);
    }

    .bw-button:focus {
      outline: none;
    }

    .bw-button.is-active {
      background: linear-gradient(180deg,#fff3de,#ffe0a8);
      color: #7a4500;
    }

    .bw-pink-mask {
      pointer-events: none;
      width: 18px;
      height: 11px;
      position: absolute;
      background: #ff9f1c;
      top: 8px;
      left: 6px;
      filter: blur(11px);
      opacity: 0;
      transition: opacity .35s ease;
    }

    .bw-poda:hover .bw-pink-mask,
    .bw-poda.is-demo-hover .bw-pink-mask {
      opacity: .75;
    }

    .bw-left-box {
      position: absolute;
      top: 5px;
      left: 6px;
      z-index: 3;
      width: 26px;
      height: 26px;
      border-radius: 10px;
      background: linear-gradient(180deg,#fff,#eee,#d8d8d8);
      border: none;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.95), 0 1px 4px rgba(0,0,0,.1);
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .bw-left-box i {
      background: linear-gradient(135deg,#ff5c00,#f59500,#facd08);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .bw-filterBorder {
      position: absolute;
      top: 4px;
      left: 5px;
      z-index: 2;
      width: 28px;
      height: 28px;
      overflow: hidden;
      border-radius: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .bw-poda:hover .bw-filterBorder,
    .bw-poda.is-demo-hover .bw-filterBorder {
      opacity: 1;
    }

    .bw-filterBorder::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 340px;
      height: 340px;
      transform: translate(-50%,-50%) rotate(90deg);
      filter: brightness(1.25);
      background-image: conic-gradient(rgba(255,255,255,0),#ffb703,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 50%,#fb8500,rgba(255,255,255,0) 100%);
    }

    .bw-poda:hover .bw-filterBorder::before,
    .bw-poda.is-demo-hover .bw-filterBorder::before {
      animation: bwPodaRotate 4s linear infinite;
    }

    @keyframes bwPodaRotate {
      100% { transform: translate(-50%,-50%) rotate(450deg); }
    }

    .bw-tab-panel {
      width: 100%;
      min-height: 100%;
    }

    .bw-tab-panel[hidden] {
      display: none !important;
    }

    .bw-tab-panel:not([hidden]) {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .bw-tab-panel.is-entering {
      animation: bwZoomFadeIn .35s cubic-bezier(.4,0,.2,1) both;
    }

    .bw-tab-panel.is-exiting {
      animation: bwZoomFadeOut .3s cubic-bezier(.4,0,.2,1) forwards;
      pointer-events: none;
    }

    .bw-panel-card {
      width: 100%;
      max-width: 450px;
      min-height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      padding: 6px;
    }

    .bw-panel-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 9px;
    }

    .bw-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border: none;
      background: transparent;
      color: #888;
      font-weight: 500;
      font-size: 10px;
      cursor: pointer;
      padding: 2px 0;
      margin: 0 auto;
      text-align: center;
    }

    .bw-back:hover {
      color: #333;
    }

    .bw-panel-title {
      width: 100%;
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #222;
      text-align: center;
    }

    .bw-chat-bar-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: min(430px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    .bw-chat-bar {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      background: #e8e8e8;
      border: none;
      border-radius: 10px;
      padding: 5px 5px 5px 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,.055);
      text-align: center;
    }

    .bw-chat-search-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      min-width: 0;
    }

    .bw-chat-search {
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px 0;
      font-size: 11px;
      color: #555;
      text-align: left;
      font-family: inherit;
    }

    .bw-chat-search i {
      color: #aaa;
      font-size: 11px;
      flex-shrink: 0;
    }

    .bw-chat-search span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    .bw-chat-right {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      flex: 0 0 auto;
      text-align: center;
      white-space: nowrap;
    }

    .bw-chat-ctrl {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 5px 7px;
      border-radius: 10px;
      border: none;
      background: transparent;
      font-size: 9.5px;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      white-space: nowrap;
      transition: background .12s, color .12s, transform .15s ease;
      font-family: inherit;
      text-align: center;
    }

    .bw-chat-ctrl:hover {
      background: #cfcfcf;
      color: #333;
    }

    .bw-chat-ctrl.is-on,
    .bw-chat-macro.is-on {
      color: #F7931A;
      background: rgba(247,147,26,.1);
    }

    .bw-chat-macro.is-demo-hover {
      background: #cfcfcf;
      color: #333;
    }

    .bw-chat-macro.is-demo-click {
      transform: scale(.96);
    }

    .bw-chat-sep {
      width: 1px;
      height: 17px;
      background: rgba(108,101,90,.15);
      flex-shrink: 0;
      margin: 0 1px;
    }

    .bw-chat-submit {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(135deg,#ff5c00,#facd08);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      flex-shrink: 0;
      padding: 0;
      transition: opacity .15s, transform .15s ease, box-shadow .15s ease;
    }

    .bw-chat-submit:hover,
    .bw-chat-submit.is-demo-hover {
      opacity: .9;
      transform: scale(1.05);
      box-shadow: 0 8px 18px rgba(247,147,26,.25);
    }

    .bw-chat-submit.is-demo-click {
      transform: scale(.92);
    }

    .bw-chat-cost {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 9.5px;
      color: #aaa;
      text-align: center;
      margin: 0 auto;
    }

    .bw-chat-cost i {
      color: #f59e0b;
      font-size: 10px;
    }

    .auto-cursor {
      position: absolute;
      z-index: 80;
      left: 18%;
      top: 18%;
      width: 26px;
      height: 26px;
      pointer-events: none;
      opacity: 0;
      transform: translate(-6px, -3px);
      filter: drop-shadow(0 8px 12px rgba(15,23,42,.20));
      will-change: left, top, transform, opacity;
    }

    .auto-cursor svg {
      width: 100%;
      height: 100%;
      color: #111827;
    }

    .auto-cursor.is-visible {
      opacity: 1;
      transition: opacity .28s ease;
    }

    .auto-cursor.is-clicking {
      transform: translate(-6px, -3px) scale(.82);
    }

    .bw-demo-loader {
      position: absolute;
      inset: 0;
      z-index: 60;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      animation: bwZoomFadeIn .35s ease both;
    }

    .bw-demo-loader[hidden] {
      display: none !important;
    }

    .bw-loader-inner {
      width: min(260px, 100%);
      display: grid;
      place-items: center;
      gap: 7px;
      padding: 10px;
    }

    .bw-loader-title {
      font-size: 12px;
      font-weight: 500;
      color: #555555;
      margin-top: -7px;
    }

    .bw-loader-text {
      font-size: 10.5px;
      color: #777;
      max-width: 230px;
      line-height: 1.35;
    }

    .diag-preloader-symbol {
      width: 82px;
      height: 82px;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 12px 20px rgba(247, 147, 26, 0.15));
    }

    @keyframes diagPreloaderDrawFill {
      0%   { stroke-dashoffset: var(--len); fill-opacity: 0; stroke-opacity: 1; }
      55%  { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; }
      80%  { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
      92%  { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
      100% { stroke-dashoffset: var(--len); fill-opacity: 0; stroke-opacity: 0; }
    }

    .diag-preloader-path {
      fill: url(#diagPreloaderGradient);
      fill-opacity: 0;
      stroke: url(#diagPreloaderGradient);
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: var(--len);
      stroke-dashoffset: var(--len);
      animation: diagPreloaderDrawFill 2.8s ease-in-out infinite;
    }

    .diag-preloader-path.p0 { --len: 140; animation-delay: 0s; }
    .diag-preloader-path.p1 { --len: 175; animation-delay: 0.22s; }
    .diag-preloader-path.p2 { --len: 175; animation-delay: 0.44s; }
    .diag-preloader-path.p3 { --len: 120; animation-delay: 0.66s; }
    .diag-preloader-path.p4 { --len: 120; animation-delay: 0.88s; }
    .diag-preloader-path.p5 { --len: 155; animation-delay: 1.1s; }
    .diag-preloader-path.p6 { --len: 180; animation-delay: 1.32s; }

    @keyframes bwZoomFadeOut {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(.92); }
    }

    @keyframes bwZoomFadeIn {
      from { opacity: 0; transform: scale(.94); }
      to { opacity: 1; transform: scale(1); }
    }

    .visual-compare {
      padding: 14px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      background: transparent;
    }

    .compare-stage {
      position: relative;
      width: 100%;
      height: 82%;
      min-height: 138px;
      max-height: 150px;
      border-radius: 10px;
      border: none;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(238,234,234,1) 0%, rgba(238,234,234,0.95) 18%, rgba(238,234,234,0.76) 42%, rgba(238,234,234,0.34) 70%, rgba(217,217,217,1) 100%),
        linear-gradient(180deg, #f9f6f6 0%, #d9d9d9 100%);
    }

    .compare-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(238,234,234,0.88) 0%, rgba(238,234,234,0.34) 45%, rgba(217,217,217,0.82) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .compare-data-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      grid-template-rows: repeat(11, 1fr);
      padding: 6px 6px 5px;
      column-gap: 1px;
      row-gap: 1px;
      pointer-events: none;
      opacity: 0.98;
      -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.97) 26%,
        rgba(0,0,0,0.80) 52%,
        rgba(0,0,0,0.46) 76%,
        rgba(0,0,0,0) 100%
      );
      mask-image: linear-gradient(
        180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.97) 26%,
        rgba(0,0,0,0.80) 52%,
        rgba(0,0,0,0.46) 76%,
        rgba(0,0,0,0) 100%
      );
    }

    .compare-data-cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      font-size: 5.4px;
      line-height: 1;
      font-weight: 650;
      letter-spacing: -0.05em;
      color: rgba(85, 85, 85, 0.72);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        filter 0.55s ease,
        color 0.55s ease;
    }

    .compare-data-cell:nth-child(2n) {
      color: rgba(102, 102, 102, 0.58);
      font-size: 5.2px;
    }

    .compare-data-cell:nth-child(3n) {
      color: rgba(120, 120, 120, 0.48);
      font-size: 5px;
    }

    .compare-data-cell:nth-child(4n) {
      color: rgba(75, 75, 75, 0.43);
      font-size: 4.9px;
    }

    .compare-data-cell:nth-child(5n) {
      color: rgba(92, 92, 92, 0.38);
      font-size: 4.8px;
    }

    .compare-data-cell:nth-child(7n) {
      color: rgba(108, 108, 108, 0.34);
      font-size: 4.7px;
    }

    .compare-data-cell.is-changing {
      opacity: 0;
      transform: translateY(-2px) scale(0.95);
      filter: blur(1.6px);
    }

    .compare-data-cell.is-positive {
      color: rgba(0, 148, 96, 0.72);
    }

    .compare-data-cell.is-negative {
      color: rgba(186, 0, 0, 0.66);
    }

    .compare-data-cell.is-accent {
      color: rgba(247, 147, 26, 0.70);
    }

    .compare-coin {
      position: absolute;
      z-index: 2;
      width: 34px;
      height: 34px;
      left: 50%;
      top: 50%;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      box-shadow: none;
      animation: compareFloat 5.8s ease-in-out infinite;
      transition:
        opacity 0.65s ease,
        left 0.65s cubic-bezier(.22,.9,.28,1),
        top 0.65s cubic-bezier(.22,.9,.28,1),
        filter 0.65s ease,
        scale 0.65s ease;
    }

    .compare-coin.is-fading {
      opacity: 0;
      scale: 0.78;
      filter: blur(3px);
    }

    .compare-coin-inner {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
    }

    .compare-coin img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: 999px;
      filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.15));
    }

    @keyframes compareFloat {
      0%, 100% {
        translate: 0 0;
      }

      50% {
        translate: 0 -5px;
      }
    }

    .portfolio-visual {
      position: relative;
      padding: 9px 10px 7px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background:
        linear-gradient(
          180deg,
          rgba(238, 234, 234, 1) 0%,
          rgba(238, 234, 234, 0.86) 34%,
          rgba(217, 217, 217, 1) 100%
        );
    }

    .portfolio-growth-head {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 2px;
      flex: 0 0 auto;
    }

    .portfolio-growth-label {
      color: #555555;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .portfolio-growth-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      font-size: 10px;
      font-weight: 760;
      white-space: nowrap;
    }

    .portfolio-growth-chip-text {
      background: linear-gradient(
        110deg,
        rgba(255, 92, 0, 0.42) 0%,
        #ff5c00 18%,
        #ffffff 32%,
        #facd08 46%,
        #fc9904 64%,
        rgba(255, 92, 0, 0.42) 100%
      );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 16px rgba(252, 153, 4, 0.18);
      animation: portfolioGrowthShimmer 3.8s linear infinite;
    }

    .portfolio-growth-plot {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: visible;
    }

    .portfolio-growth-axis-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .portfolio-growth-axis-label {
      position: absolute;
      left: 3px;
      transform: translateY(-50%);
      color: rgba(100, 100, 100, 0.58);
      font-size: 7px;
      font-weight: 800;
      line-height: 1;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
    }

    .portfolio-growth-chart {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 96px;
      overflow: visible;
    }

    .portfolio-growth-grid line {
      stroke: rgba(132, 144, 179, 0.18);
      stroke-width: 1;
      stroke-dasharray: 5 4;
    }

    .portfolio-growth-area {
      fill: url(#portfolioGrowthAreaGradient);
    }

    .portfolio-growth-line,
    .portfolio-growth-line-glow {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: none;
      stroke-dashoffset: 0;
      animation: none;
    }

    .portfolio-growth-line {
      stroke: #F7931A;
      stroke-width: 3;
    }

    .portfolio-growth-line-glow {
      stroke: rgba(247, 147, 26, 0.22);
      stroke-width: 7;
      filter: blur(3px);
    }

    .portfolio-growth-current-glow {
      fill: rgba(255, 92, 0, 0.14);
    }

    .portfolio-growth-current-dot {
      fill: #ffffff;
      stroke: #ff5c00;
      stroke-width: 3;
    }

    @keyframes portfolioGrowthShimmer {
      0% {
        background-position: 200% 50%;
      }

      100% {
        background-position: -20% 50%;
      }
    }

    .visual-indicators {
      position: relative;
      padding: 12px;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
    }

    .visual-indicators::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 42%;
      z-index: 20;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(217, 217, 217, 0) 0%,
        rgba(217, 217, 217, 1) 100%
      );
      border-radius: inherit;
    }

    .indicator-box {
      border-radius: 10px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      border: none;
    }

    .indicator-box:first-child {
      grid-row: span 2;
    }

    .visual-alerts {
      padding: 12px;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .alert-row {
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      border: none;
    }

    .alert-row:nth-child(2) {
      width: 78%;
    }

    .visual-converter {
      padding: 12px;
      display: grid;
      gap: 9px;
      align-content: start;
    }

    .converter-line {
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      border: none;
    }

    .converter-line:nth-child(2) {
      height: 32px;
      width: 76%;
    }

    .visual-favorites {
      padding: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-content: flex-start;
    }

    .favorite-pill {
      height: 28px;
      border-radius: 10px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      border: none;
    }

    .favorite-pill:nth-child(1) { width: 86px; }
    .favorite-pill:nth-child(2) { width: 66px; }
    .favorite-pill:nth-child(3) { width: 96px; }
    .favorite-pill:nth-child(4) { width: 74px; }
    .favorite-pill:nth-child(5) { width: 108px; }


    /* Converter card integration */
    .feature-converter {
      --cv-inner: #cfcfcf;
      --cv-black: #000000;
      --cv-muted: #6D6D6D;
      --cv-orange: #F7931A;
      --cv-orange-dark: #e27800;
      --eby-preload-surface: #d9d9d9;
    }

    .feature-converter .card-visual.visual-converter {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      overflow: visible;
      background: transparent;
    }

    .cvw-wrap {
      width: min(420px, 100%);
      margin: 0 auto;
    }

    .cvw-wrap * {
      box-sizing: border-box;
    }

    .cv-card {
      position: relative;
      background: transparent;
      border-radius: 0;
      padding: 0;
      overflow: visible;
      min-width: 0;
      color: var(--cv-black);
      box-shadow: none;
    }

    .cv-stack {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .cv-asset {
      min-height: 64px;
      border-radius: 6px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      overflow: hidden;
      transform: translateY(0);
      opacity: 1;
      transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .28s ease, filter .28s ease;
    }

    .cv-card.is-changing .cv-asset.top {
      transform: translateY(-9px);
      opacity: .15;
      filter: blur(3px);
    }

    .cv-card.is-changing .cv-asset.bottom {
      transform: translateY(9px);
      opacity: .15;
      filter: blur(3px);
    }

    .cv-card.is-entering .cv-asset.top {
      animation: cvAssetInTop .42s cubic-bezier(.22,1,.36,1) both;
    }

    .cv-card.is-entering .cv-asset.bottom {
      animation: cvAssetInBottom .42s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes cvAssetInTop {
      0% { transform: translateY(12px); opacity: 0; filter: blur(3px); }
      100% { transform: translateY(0); opacity: 1; filter: blur(0); }
    }

    @keyframes cvAssetInBottom {
      0% { transform: translateY(-12px); opacity: 0; filter: blur(3px); }
      100% { transform: translateY(0); opacity: 1; filter: blur(0); }
    }

    .cv-asset-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .cv-icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,.10);
      background: transparent;
    }

    .cv-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cv-asset-name {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .cv-asset-name strong {
      font-size: 12px;
      line-height: 1;
      font-weight: 750;
      color: var(--cv-black);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cv-asset-name span {
      font-size: 10px;
      line-height: 1;
      font-weight: 500;
      color: var(--cv-muted);
      white-space: nowrap;
    }

    .cv-asset-value {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .cv-price {
      font-size: 13px;
      line-height: 1;
      font-weight: 850;
      color: #1d1d1d;
      letter-spacing: -.02em;
      min-width: 66px;
      text-align: right;
    }

    .cv-price-label {
      font-size: 8.5px;
      line-height: 1;
      font-weight: 600;
      color: var(--cv-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .cv-switch-wrap {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
    }

    .cv-switch {
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: var(--cv-orange);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
      box-shadow: 0 5px 12px rgba(247,147,26,.22);
    }

    .cv-switch:hover {
      background: var(--cv-orange-dark);
      transform: translateY(-1px);
      box-shadow: 0 8px 16px rgba(247,147,26,.28);
    }

    .cv-switch svg {
      width: 16px;
      height: 16px;
      display: block;
      transform: rotate(90deg);
    }

    .cv-card.is-pulsing .cv-switch {
      animation: cvSwitchPulse .42s cubic-bezier(.22,1,.36,1);
    }

    .cv-card.is-pulsing .cv-switch svg {
      animation: cvSwitchRotate .42s cubic-bezier(.22,1,.36,1);
    }

    @keyframes cvSwitchPulse {
      0% { transform: scale(1); }
      42% { transform: scale(.88); }
      100% { transform: scale(1); }
    }

    @keyframes cvSwitchRotate {
      0% { transform: rotate(90deg); }
      100% { transform: rotate(270deg); }
    }

    .cv-dots {
      position: absolute;
      right: 8px;
      bottom: -16px;
      display: flex;
      align-items: center;
      gap: 4px;
      pointer-events: none;
    }

    .cv-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #c7c7c7;
      transition: width .24s ease, background .24s ease, opacity .24s ease;
      opacity: .7;
    }

    .cv-dot.is-active {
      width: 12px;
      background: var(--cv-orange);
      opacity: 1;
    }

    .cv-card.eby-preload-host {
      position: relative;
      isolation: isolate;
    }

    .cv-card .eby-preload {
      position: absolute;
      inset: 0;
      z-index: 35;
      pointer-events: none;
      border-radius: 6px;
      overflow: hidden;
      background: var(--eby-preload-surface);
      opacity: 1;
      transition: opacity .22s ease;
    }

    .cv-card.eby-preload-host.eby-preload-ready .eby-preload {
      opacity: 0;
    }

    .cv-card.eby-preload-host.eby-preload-done .eby-preload {
      display: none;
    }

    .cv-card .eby-preload__shimmer {
      position: absolute;
      inset: -35%;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 90%);
      transform: translateX(-45%);
      animation: ebyPreloadShimmer 1.45s ease-in-out infinite;
      opacity: 1;
    }



    /* Alerts card integration */
    .feature-alerts {
      --al-yellow:#FACD08;
      --al-orange:#FF5C00;
      --al-green:#009460;
      --al-red:#BA0000;
      --al-white:#ffffff;
    }


.alert-card{
      width:min(420px,100%);
      min-height:280px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:visible;
      background:transparent;
    }

    .alert-visual{
      position:relative;
      width:260px;
      height:260px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:visible;
    }

    .alert-wave{
      position:absolute;
      left:50%;
      top:50%;
      border-radius:999px;
      border:1px solid rgba(255,92,0,.34);
      transform:translate(-50%, -50%) scale(.72) rotate(0deg);
      opacity:0;
      pointer-events:none;
      animation:alertWaveMorph 2.6s cubic-bezier(.22,1,.36,1) infinite;
      will-change:transform, opacity, border-radius;
    }

    .alert-wave.wave1{
      width:92px;
      height:92px;
      animation-delay:0s;
      border-color:rgba(255,92,0,.38);
      animation-name:alertWaveMorph1;
    }

    .alert-wave.wave2{
      width:122px;
      height:122px;
      animation-delay:.18s;
      border-color:rgba(255,92,0,.30);
      animation-name:alertWaveMorph2;
    }

    .alert-wave.wave3{
      width:152px;
      height:152px;
      animation-delay:.36s;
      border-color:rgba(250,205,8,.32);
      animation-name:alertWaveMorph3;
    }

    .alert-wave.wave4{
      width:184px;
      height:184px;
      animation-delay:.54s;
      border-color:rgba(255,92,0,.24);
      animation-name:alertWaveMorph4;
    }

    .alert-wave.wave5{
      width:216px;
      height:216px;
      animation-delay:.72s;
      border-color:rgba(250,205,8,.22);
      animation-name:alertWaveMorph5;
    }

    @keyframes alertWaveMorph1{
      0%{
        transform:translate(-50%, -50%) scale(.72) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(255,92,0,0);
      }

      18%{
        opacity:.78;
        border-radius:47% 53% 51% 49% / 44% 48% 52% 56%;
      }

      44%{
        opacity:.46;
        border-radius:58% 42% 46% 54% / 51% 59% 41% 49%;
        transform:translate(-50%, -50%) scale(.97) rotate(13deg);
        box-shadow:0 0 22px 3px rgba(255,92,0,.14);
      }

      72%{
        opacity:.18;
        border-radius:43% 57% 61% 39% / 58% 44% 56% 42%;
        transform:translate(-50%, -50%) scale(1.12) rotate(-9deg);
      }

      100%{
        transform:translate(-50%, -50%) scale(1.24) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 42px 6px rgba(250,205,8,0);
      }
    }

    @keyframes alertWaveMorph2{
      0%{
        transform:translate(-50%, -50%) scale(.72) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(255,92,0,0);
      }

      18%{
        opacity:.70;
        border-radius:55% 45% 50% 50% / 46% 55% 45% 54%;
      }

      42%{
        opacity:.42;
        border-radius:41% 59% 55% 45% / 57% 40% 60% 43%;
        transform:translate(-50%, -50%) scale(.98) rotate(-15deg);
        box-shadow:0 0 26px 4px rgba(255,92,0,.12);
      }

      68%{
        opacity:.16;
        border-radius:62% 38% 44% 56% / 42% 61% 39% 58%;
        transform:translate(-50%, -50%) scale(1.13) rotate(10deg);
      }

      100%{
        transform:translate(-50%, -50%) scale(1.22) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 42px 6px rgba(250,205,8,0);
      }
    }

    @keyframes alertWaveMorph3{
      0%{
        transform:translate(-50%, -50%) scale(.72) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(250,205,8,0);
      }

      18%{
        opacity:.64;
        border-radius:48% 52% 42% 58% / 60% 45% 55% 40%;
      }

      46%{
        opacity:.38;
        border-radius:60% 40% 57% 43% / 44% 56% 41% 59%;
        transform:translate(-50%, -50%) scale(1) rotate(18deg);
        box-shadow:0 0 30px 4px rgba(250,205,8,.13);
      }

      74%{
        opacity:.14;
        border-radius:39% 61% 47% 53% / 52% 39% 61% 48%;
        transform:translate(-50%, -50%) scale(1.14) rotate(-11deg);
      }

      100%{
        transform:translate(-50%, -50%) scale(1.20) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 42px 6px rgba(250,205,8,0);
      }
    }

    @keyframes alertWaveMorph4{
      0%{
        transform:translate(-50%, -50%) scale(.72) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(255,92,0,0);
      }

      18%{
        opacity:.52;
        border-radius:57% 43% 48% 52% / 41% 59% 45% 55%;
      }

      44%{
        opacity:.30;
        border-radius:44% 56% 63% 37% / 55% 43% 57% 45%;
        transform:translate(-50%, -50%) scale(1.02) rotate(-20deg);
        box-shadow:0 0 34px 4px rgba(255,92,0,.10);
      }

      70%{
        opacity:.12;
        border-radius:64% 36% 41% 59% / 47% 63% 37% 53%;
        transform:translate(-50%, -50%) scale(1.15) rotate(12deg);
      }

      100%{
        transform:translate(-50%, -50%) scale(1.19) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 42px 6px rgba(250,205,8,0);
      }
    }

    @keyframes alertWaveMorph5{
      0%{
        transform:translate(-50%, -50%) scale(.72) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(250,205,8,0);
      }

      18%{
        opacity:.44;
        border-radius:42% 58% 54% 46% / 56% 42% 58% 44%;
      }

      48%{
        opacity:.26;
        border-radius:61% 39% 45% 55% / 39% 57% 43% 61%;
        transform:translate(-50%, -50%) scale(1.04) rotate(22deg);
        box-shadow:0 0 38px 5px rgba(250,205,8,.09);
      }

      76%{
        opacity:.10;
        border-radius:47% 53% 64% 36% / 62% 44% 56% 38%;
        transform:translate(-50%, -50%) scale(1.16) rotate(-14deg);
      }

      100%{
        transform:translate(-50%, -50%) scale(1.18) rotate(0deg);
        opacity:0;
        border-radius:50%;
        box-shadow:0 0 42px 6px rgba(250,205,8,0);
      }
    }

    .alert-values-layer,
    .alert-click-layer{
      position:absolute;
      inset:0;
      z-index:8;
      pointer-events:none;
      overflow:visible;
    }

    .alert-click-layer{
      z-index:4;
    }

    .alert-click-wave{
      position:absolute;
      left:50%;
      top:50%;
      width:96px;
      height:96px;
      border-radius:999px;
      border:2px solid rgba(255,92,0,.62);
      transform:translate(-50%, -50%) scale(.72);
      opacity:0;
      pointer-events:none;
      box-shadow:
        0 0 22px rgba(255,92,0,.18),
        0 0 36px rgba(250,205,8,.16);
      animation:alertClickWave .95s cubic-bezier(.22,1,.36,1) forwards;
    }

    .alert-click-wave.is-second{
      width:122px;
      height:122px;
      border-color:rgba(250,205,8,.58);
      animation-delay:.13s;
      animation-duration:1.05s;
    }

    @keyframes alertClickWave{
      0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.58) rotate(0deg);
        border-radius:50%;
      }

      16%{
        opacity:.95;
        border-radius:43% 57% 51% 49% / 58% 44% 56% 42%;
      }

      52%{
        opacity:.48;
        transform:translate(-50%, -50%) scale(1.35) rotate(18deg);
        border-radius:61% 39% 47% 53% / 42% 59% 41% 58%;
      }

      100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.9) rotate(-8deg);
        border-radius:50%;
      }
    }

    .alert-value{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%) scale(.9);
      opacity:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:17px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.04em;
      text-shadow:0 3px 10px rgba(0,0,0,.12);
      animation:alertValuePop 1.45s cubic-bezier(.22,1,.36,1) forwards;
      will-change:transform, opacity;
      white-space:nowrap;
    }

    .alert-value.is-click{
      font-size:23px;
      text-shadow:0 5px 14px rgba(0,0,0,.16);
      animation-duration:1.75s;
    }

    .alert-value.is-up{
      color:var(--al-green);
    }

    .alert-value.is-down{
      color:var(--al-red);
    }

    @keyframes alertValuePop{
      0%{
        opacity:0;
        transform:
          translate(-50%, -50%)
          rotate(var(--angle))
          translateX(38px)
          rotate(calc(var(--angle) * -1))
          scale(.8);
      }

      16%{
        opacity:1;
        transform:
          translate(-50%, -50%)
          rotate(var(--angle))
          translateX(var(--distance-mid))
          rotate(calc(var(--angle) * -1))
          scale(1.05);
      }

      62%{
        opacity:1;
      }

      100%{
        opacity:0;
        transform:
          translate(-50%, -50%)
          rotate(var(--angle))
          translateX(var(--distance-end))
          rotate(calc(var(--angle) * -1))
          scale(.9);
      }
    }

    .button{
      background:none;
      border:none;
      cursor:pointer;
      padding:0;
      display:block;
      position:relative;
      z-index:5;
    }

    .button .bloom-container{
      position:relative;
      transition:all 0.2s ease-in-out;
      border:none;
      background:none;
      animation:alertButtonPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
    }

    @keyframes alertButtonPulse{
      0%{
        transform:scale(1);
      }

      18%{
        transform:scale(1.045);
      }

      36%{
        transform:scale(1);
      }

      100%{
        transform:scale(1);
      }
    }

    .button.is-clicking .bloom-container{
      animation:alertButtonClick .55s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes alertButtonClick{
      0%{
        transform:scale(1);
      }

      22%{
        transform:scale(.78);
      }

      48%{
        transform:scale(1.24);
      }

      72%{
        transform:scale(.94);
      }

      100%{
        transform:scale(1);
      }
    }

    .button .bloom-container .button-container-main{
      width:110px;
      aspect-ratio:1;
      border-radius:50%;
      overflow:hidden;
      position:relative;
      display:grid;
      place-content:center;
      border-right:5px solid rgba(255,255,255,.92);
      border-left:5px solid rgba(128,128,128,0.147);
      transform:rotate(-45deg);
      transition:all 0.5s ease-in-out;
    }

    .button.is-clicking .button-container-main{
      animation:alertButtonMainClick .75s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes alertButtonMainClick{
      0%{
        transform:rotate(-45deg) scale(1);
      }

      34%{
        transform:rotate(-45deg) scale(1.08);
      }

      62%{
        transform:rotate(-45deg) scale(.96);
      }

      100%{
        transform:rotate(-45deg) scale(1);
      }
    }

    .button .bloom-container .button-container-main .button-inner{
      height:60px;
      aspect-ratio:1;
      border-radius:50%;
      position:relative;
      box-shadow:rgba(100,100,111,0.34) -10px 5px 10px 0px;
      transition:all 0.5s ease-in-out;
    }

    .button .bloom-container .button-container-main .button-inner .back{
      position:absolute;
      inset:0;
      border-radius:50%;
      background:linear-gradient(
        60deg,
        var(--al-yellow) 0%,
        var(--al-orange) 100%
      );
    }

    .button .bloom-container .button-container-main .button-inner .front{
      position:absolute;
      inset:5px;
      border-radius:50%;
      background:linear-gradient(
        60deg,
        #FACD08 0%,
        #FF5C00 100%
      );
      display:grid;
      place-content:center;
    }

    .button .bloom-container .button-container-main .button-inner .front .svg{
      fill:#ffffff;
      opacity:.82;
      width:31px;
      aspect-ratio:1;
      transform:rotate(45deg);
      transition:all 0.2s ease-in;
      animation:bellPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
    }

    .button.is-clicking .front .svg{
      animation:bellClick .58s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes bellPulse{
      0%{
        opacity:.74;
        filter:drop-shadow(0 0 0 rgba(255,255,255,0));
      }

      16%{
        opacity:1;
        filter:drop-shadow(0 0 10px rgba(255,255,255,.95));
      }

      34%{
        opacity:.84;
        filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
      }

      100%{
        opacity:.82;
        filter:drop-shadow(0 0 0 rgba(255,255,255,0));
      }
    }

    @keyframes bellClick{
      0%{
        transform:rotate(45deg) scale(1);
        opacity:.86;
        filter:drop-shadow(0 0 0 rgba(255,255,255,0));
      }

      28%{
        transform:rotate(32deg) scale(1.18);
        opacity:1;
        filter:drop-shadow(0 0 16px rgba(255,255,255,1));
      }

      52%{
        transform:rotate(58deg) scale(1.05);
      }

      76%{
        transform:rotate(40deg) scale(1.1);
      }

      100%{
        transform:rotate(45deg) scale(1);
        opacity:.9;
        filter:drop-shadow(0 0 4px rgba(255,255,255,.32));
      }
    }

    .button .bloom-container .button-container-main .button-glass{
      position:absolute;
      inset:0;
      background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.86) 100%
      );
      transform:translate(0%, -50%) rotate(0deg);
      transform-origin:bottom center;
      transition:all 0.5s ease-in-out;
      pointer-events:none;
      animation:glassPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
    }

    .button.is-clicking .button-glass{
      animation:glassClick .55s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes glassPulse{
      0%{
        transform:translate(0%, -50%) rotate(0deg);
      }

      18%{
        transform:translate(0%, -40%) rotate(0deg);
      }

      38%{
        transform:translate(0%, -50%) rotate(0deg);
      }

      100%{
        transform:translate(0%, -50%) rotate(0deg);
      }
    }

    @keyframes glassClick{
      0%{
        transform:translate(0%, -50%) rotate(0deg);
      }

      38%{
        transform:translate(0%, -25%) rotate(0deg);
      }

      100%{
        transform:translate(0%, -50%) rotate(0deg);
      }
    }

    .button .bloom-container .button-glass .back,
    .button .bloom-container .button-glass .front{
      display:none;
    }

    .button .bloom-container .bloom{
      height:1px;
      width:1px;
      position:absolute;
      background:white;
      pointer-events:none;
    }

    .button .bloom-container .bloom1{
      top:10px;
      right:20px;
      box-shadow:
        rgba(255,255,255,0.85) 0px 0px 10px 10px,
        rgba(250,205,8,0.34) 0px 0px 20px 20px;
      animation:bloomPulse1 2.6s cubic-bezier(.22,1,.36,1) infinite;
    }

    .button .bloom-container .bloom2{
      bottom:10px;
      left:20px;
      box-shadow:
        rgba(255,255,255,0.5) 0px 0px 10px 10px,
        rgba(255,92,0,0.32) 0px 0px 30px 20px;
      animation:bloomPulse2 2.6s cubic-bezier(.22,1,.36,1) infinite;
    }

    .button.is-clicking .bloom1{
      animation:bloomClick1 .62s cubic-bezier(.22,1,.36,1) both;
    }

    .button.is-clicking .bloom2{
      animation:bloomClick2 .62s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes bloomPulse1{
      0%, 100%{
        opacity:.58;
        transform:scale(1);
      }

      18%{
        opacity:1;
        transform:scale(1.16);
      }
    }

    @keyframes bloomPulse2{
      0%, 100%{
        opacity:.42;
        transform:scale(1);
      }

      18%{
        opacity:.86;
        transform:scale(1.22);
      }
    }

    @keyframes bloomClick1{
      0%{
        opacity:.58;
        transform:scale(1);
      }

      38%{
        opacity:1;
        transform:scale(1.75);
      }

      100%{
        opacity:.58;
        transform:scale(1);
      }
    }

    @keyframes bloomClick2{
      0%{
        opacity:.42;
        transform:scale(1);
      }

      38%{
        opacity:1;
        transform:scale(1.85);
      }

      100%{
        opacity:.42;
        transform:scale(1);
      }
    }

    .button .bloom-container:hover{
      transform:scale(1.1);
      animation-play-state:paused;
    }

    .button .bloom-container:hover .button-container-main .button-glass{
      transform:translate(0%, -40%);
      animation-play-state:paused;
    }

    .button .bloom-container:hover .button-container-main .button-inner .front .svg{
      opacity:1;
      filter:drop-shadow(0 0 10px white);
      animation-play-state:paused;
    }

    .button .bloom-container:active{
      transform:scale(.78);
    }

    .button .bloom-container:active .button-container-main .button-inner{
      transform:scale(1.2);
    }

    @media (max-width:520px){
      .alert-card{
        min-height:250px;
      }

      .alert-visual{
        width:235px;
        height:235px;
      }

      .button .bloom-container .button-container-main{
        width:104px;
      }

      .alert-wave.wave1{
        width:86px;
        height:86px;
      }

      .alert-wave.wave2{
        width:114px;
        height:114px;
      }

      .alert-wave.wave3{
        width:142px;
        height:142px;
      }

      .alert-wave.wave4{
        width:170px;
        height:170px;
      }

      .alert-wave.wave5{
        width:198px;
        height:198px;
      }

      .alert-value{
        font-size:15px;
      }

      .alert-value.is-click{
        font-size:20px;
      }
    }

    @media (prefers-reduced-motion:reduce){
      .button .bloom-container,
      .button .bloom-container .button-container-main,
      .button .bloom-container .button-container-main .button-inner,
      .button .bloom-container .button-container-main .button-glass,
      .button .bloom-container .button-container-main .button-inner .front .svg,
      .button .bloom-container .bloom1,
      .button .bloom-container .bloom2,
      .alert-wave,
      .alert-click-wave{
        animation:none;
        transition:none;
      }

      .alert-value{
        display:none;
      }
    }
  

    .feature-alerts .card-visual.visual-alerts {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      overflow: visible;
      background: linear-gradient(
        180deg,
        rgba(238, 234, 234, 1) 0%,
        rgba(217, 217, 217, 0.25) 100%
      );
    }

    .feature-alerts .alert-card {
      width: 100%;
      min-height: 132px;
      background: transparent;
    }

    .feature-alerts .alert-visual {
      width: 170px;
      height: 170px;
      transform: scale(.88);
      transform-origin: center center;
    }

    .feature-alerts .button .bloom-container .button-container-main {
      width: 78px;
      border-right-width: 4px;
      border-left-width: 4px;
    }

    .feature-alerts .button .bloom-container .button-container-main .button-inner {
      height: 42px;
      box-shadow: rgba(100,100,111,0.34) -8px 4px 9px 0px;
    }

    .feature-alerts .button .bloom-container .button-container-main .button-inner .front {
      inset: 4px;
    }

    .feature-alerts .button .bloom-container .button-container-main .button-inner .front .svg {
      width: 22px;
    }

    .feature-alerts .alert-wave.wave1 { width: 60px; height: 60px; }
    .feature-alerts .alert-wave.wave2 { width: 80px; height: 80px; }
    .feature-alerts .alert-wave.wave3 { width: 100px; height: 100px; }
    .feature-alerts .alert-wave.wave4 { width: 122px; height: 122px; }
    .feature-alerts .alert-wave.wave5 { width: 144px; height: 144px; }

    .feature-alerts .alert-click-wave { width: 66px; height: 66px; }
    .feature-alerts .alert-click-wave.is-second { width: 86px; height: 86px; }
    .feature-alerts .alert-value { font-size: 12px; }
    .feature-alerts .alert-value.is-click { font-size: 16px; }

      /* Compact responsive variant */

      .feature-portfolio {
        grid-column: 1 / span 4;
        grid-row: span 2;
      }

      .feature-alerts {
        grid-column: 1 / span 2;
        grid-row: span 2;
      }

      .feature-converter {
        grid-column: 3 / span 2;
        grid-row: span 2;
      }

      .feature-indicators,
      .feature-favorites {
        display: none !important;
      }

    }

    @media (max-width: 640px) {
      .feature-alerts .alert-card { min-height: 190px; }
      .feature-alerts .alert-visual { width: 220px; height: 220px; transform: scale(1); }
      .feature-alerts .button .bloom-container .button-container-main { width: 104px; }
      .feature-alerts .button .bloom-container .button-container-main .button-inner { height: 60px; }
      .feature-alerts .button .bloom-container .button-container-main .button-inner .front .svg { width: 31px; }
      .feature-alerts .alert-wave.wave1 { width: 86px; height: 86px; }
      .feature-alerts .alert-wave.wave2 { width: 114px; height: 114px; }
      .feature-alerts .alert-wave.wave3 { width: 142px; height: 142px; }
      .feature-alerts .alert-wave.wave4 { width: 170px; height: 170px; }
      .feature-alerts .alert-wave.wave5 { width: 198px; height: 198px; }
    }



    /* Compact variant: portfolio with alerts and converter on the right */
    .feature-portfolio {
      grid-column: 1 / span 5;
      grid-row: 3 / span 2;
    }

    .feature-alerts {
      grid-column: 6 / span 3;
      grid-row: 3 / span 2;
    }

    .feature-converter {
      grid-column: 9 / span 4;
      grid-row: 3 / span 2;
    }

    .feature-indicators,
    .feature-favorites {
      display: none !important;
    }


    /* Portfolio compact responsive chart fix */
    .feature-portfolio .portfolio-visual {
      padding: 8px 0 6px;
      gap: 5px;
      overflow: hidden;
    }

    .feature-portfolio .portfolio-growth-head {
      flex: 0 0 auto;
      padding: 0 10px;
    }

    .feature-portfolio .portfolio-growth-plot {
      position: relative;
      flex: 0 0 auto;
      width: 100%;
      aspect-ratio: 500 / 188;
      min-height: 0;
      height: auto;
      overflow: visible;
    }

    .feature-portfolio .portfolio-growth-chart,
    .feature-portfolio .portfolio-growth-axis-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .feature-portfolio .portfolio-growth-chart {
      min-height: 0;
      display: block;
      overflow: visible;
    }

    .feature-portfolio .portfolio-growth-axis-overlay {
      pointer-events: none;
    }



    /* Portfolio compact height, full-width chart, no bottom clipping */
    .feature-portfolio .portfolio-visual {
      padding: 8px 0 8px;
      gap: 5px;
      overflow: hidden;
    }

    .feature-portfolio .portfolio-growth-head {
      flex: 0 0 auto;
      padding: 0 10px;
    }

    .feature-portfolio .portfolio-growth-plot {
      position: relative;
      flex: 1 1 auto;
      width: 100%;
      height: clamp(96px, 8.8vw, 122px);
      min-height: 96px;
      max-height: 122px;
      overflow: visible;
    }

    .feature-portfolio .portfolio-growth-chart,
    .feature-portfolio .portfolio-growth-axis-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .feature-portfolio .portfolio-growth-chart {
      min-height: 0;
      display: block;
      overflow: visible;
    }


    .feature-portfolio .portfolio-growth-area,
    .feature-portfolio .portfolio-growth-line,
    .feature-portfolio .portfolio-growth-line-glow {
      transform: translateY(-4px) scaleY(0.94);
      transform-origin: center center;
      transform-box: fill-box;
    }

    .feature-portfolio .portfolio-growth-current-glow,
    .feature-portfolio .portfolio-growth-current-dot {
      transform: translateY(-4px);
    }

    @media (max-width: 980px) {
      .feature-portfolio {
        grid-row: span 2;
      }

      .feature-alerts,
      .feature-converter {
        grid-row: span 2;
      }

      .feature-portfolio .portfolio-growth-plot {
        height: clamp(110px, 22vw, 145px);
        min-height: 110px;
        max-height: 145px;
      }
    }

    @media (max-width: 640px) {
      .feature-portfolio .portfolio-growth-plot {
        height: clamp(120px, 34vw, 160px);
        min-height: 120px;
        max-height: 160px;
      }
    }

    @media (max-width: 980px) {
      .feature-portfolio .portfolio-visual {
        padding: 8px 0 8px;
      }

      .feature-portfolio .portfolio-growth-head {
        padding: 0 10px;
      }

      .feature-portfolio .portfolio-growth-plot {
        width: 100%;
        aspect-ratio: 500 / 188;
      }
    }

    @media (max-width: 640px) {
      .feature-portfolio .portfolio-growth-plot {
        width: 100%;
        aspect-ratio: 500 / 188;
      }
    }

    @media (max-width: 980px) {
      .bento-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 120px;
      }

      .feature-ai {
        grid-column: 1 / span 4;
        grid-row: span 3;
      }

      .feature-compare {
        grid-column: 1 / span 4;
        grid-row: span 2;
      }

      .feature-portfolio {
        grid-column: 1 / span 2;
        grid-row: span 2;
      }

      .feature-indicators {
        grid-column: 3 / span 2;
        grid-row: span 2;
      }

      .feature-alerts {
        grid-column: 1 / span 2;
        grid-row: span 2;
      }

      .feature-converter {
        grid-column: 3 / span 2;
        grid-row: span 2;
      }

      .feature-favorites {
        grid-column: 1 / span 4;
        grid-row: span 2;
      }

      .feature-compare p {
        white-space: normal;
      }
    }

    @media (max-width: 640px) {
      .eby-features {
        padding: 60px 0;
      }

      .eby-container {
        width: calc(100% - 32px);
      }

      .features-header {
        text-align: left;
      }

      .features-header p {
        margin: 0;
      }

      .bento-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .bento-card {
        min-height: 260px;
      }

      .feature-ai {
        /* min-height: 500px; */
      }

      .card-inner {
        padding: 16px;
      }

      .bw-shell,
      .bw-shell.is-panel-mode {
        width: 100%;
      }

      .bw-chat-bar-wrap {
        width: min(430px, 100%);
      }

      .bw-chat-right {
        justify-content: center;
        flex-wrap: nowrap;
      }

      .bw-chat-sep {
        display: none;
      }

      .compare-stage {
        height: 84%;
        min-height: 145px;
      }

      .compare-data-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
      }

      .portfolio-growth-chart {
        min-height: 112px;
      }
    }


    /* Integrated marquee indicators card */

    .eby-features {
      --eby-preload-surface: #d9d9d9;

      --mg-card: #d9d9d9;
      --mg-black: #000000;
      --mg-muted: #6D6D6D;
      --mg-axis: #9F9F9F;

      --fg-extreme-fear: #ff8b8b;
      --fg-fear: #f59e0b;
      --fg-neutral: #9ca3af;
      --fg-greed: #22c55e;
      --fg-extreme-greed: #16a34a;

      --as-orange: #f59e0b;
      --as-orange-soft: #f6d9a6;
      --as-blue-soft: #b8c4ff;
      --as-blue: #2563eb;
      --as-gap: 7px;

      --hm-light: #FACD08;
      --hm-mid: #FC9904;
      --hm-strong: #FF5C00;

      --cu-range-bg: #bababa;
      --cu-range-active: #d9d9d9;

      --mc-orange: #ff8a00;
      --mc-bar: #cecece;
    }

    .marquee-demo {
      position: relative;
      width: 100%;
      height: 390px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
    }

    .marquee-demo::before,
    .marquee-demo::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
    }

    .marquee-demo::before {
      background:
        linear-gradient(
          to right,
          #ffffff 0%,
          rgba(255,255,255,0.98) 5%,
          rgba(255,255,255,0.78) 13%,
          rgba(255,255,255,0.18) 25%,
          rgba(255,255,255,0) 38%,
          rgba(255,255,255,0) 62%,
          rgba(255,255,255,0.18) 75%,
          rgba(255,255,255,0.78) 87%,
          rgba(255,255,255,0.98) 95%,
          #ffffff 100%
        );
    }

    .marquee-demo::after {
      background:
        linear-gradient(
          to bottom,
          #ffffff 0%,
          rgba(255,255,255,0.88) 10%,
          rgba(255,255,255,0.24) 27%,
          rgba(255,255,255,0) 42%,
          rgba(255,255,255,0) 58%,
          rgba(255,255,255,0.24) 73%,
          rgba(255,255,255,0.88) 90%,
          #ffffff 100%
        );
    }

    .marquee-perspective {
      position: absolute;
      top: -150px;
      left: 50%;
      width: 960px;
      height: 820px;
      transform:
        translateX(-50%)
        perspective(900px)
        rotateX(58deg)
        rotateZ(-17deg)
        scale(1.16)
        translate3d(0, 0, 0);
      transform-origin: center center;
    }

    .marquee-grid {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      opacity: 0.96;
      padding: 0 18px;
    }

    .marquee-column {
      --duration: 34s;
      --gap: 18px;

      width: 188px;
      flex-shrink: 0;
      overflow: visible;
      will-change: transform;
    }

    .marquee-loop {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      animation: marqueeVertical var(--duration) linear infinite;
      will-change: transform;
    }

    .marquee-column.reverse .marquee-loop {
      animation-direction: reverse;
    }

    .marquee-set {
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      flex-shrink: 0;
    }

    .marquee-column:nth-child(1) {
      margin-top: 70px;
      --duration: 68s;
    }

    .marquee-column:nth-child(2) {
      margin-top: -28px;
      --duration: 58s;
    }

    .marquee-column:nth-child(3) {
      margin-top: 44px;
      --duration: 64s;
    }

    .marquee-column:nth-child(4) {
      margin-top: -82px;
      --duration: 54s;
    }

    @keyframes marqueeVertical {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(calc(-50% - (var(--gap) / 2)));
      }
    }

    .fgw-wrap,
    .asw-wrap,
    .ashw-wrap,
    .hmw-wrap,
    .cuw-wrap,
    .cudw-wrap,
    .mcw-wrap {
      width: 100%;
      margin: 0 auto;
      flex-shrink: 0;
    }

    .fgw-wrap *,
    .asw-wrap *,
    .ashw-wrap *,
    .hmw-wrap *,
    .cuw-wrap *,
    .cudw-wrap *,
    .mcw-wrap * {
      box-sizing: border-box;
    }

    .fg-card,
    .as-card,
    .ash-card,
    .hm-card,
    .cu-card-mini,
    .cud-card-mini,
    .mc-card-mini {
      width: 188px;
      min-height: 124px;
      border-radius: 9px;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--mg-card);
      border: 1px solid rgba(0,0,0,0.04);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.05);
    }

    .fg-card,
    .as-card,
    .ash-card,
    .cu-card-mini,
    .cud-card-mini,
    .mc-card-mini {
      padding: 13px;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .fg-head,
    .as-head,
    .ash-head,
    .cu-head,
    .cud-head,
    .mc-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .fg-title,
    .fg-subtitle,
    .as-label,
    .as-window,
    .ash-section,
    .cu-title,
    .cud-title,
    .mc-title {
      margin: 0;
      font-size: 9px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1.1;
      white-space: nowrap;
    }

    .fg-title,
    .as-label,
    .ash-section,
    .cu-title,
    .cud-title,
    .mc-title {
      text-transform: uppercase;
      letter-spacing: .06em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fg-subtitle {
      text-align: right;
      font-size: 8.5px;
    }

    .fg-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 9px 0;
      min-width: 0;
    }

    .fg-indicator {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .fg-score {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .fg-trend {
      width: 13px;
      height: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: currentColor;
      flex: 0 0 auto;
    }

    .fg-trend svg {
      width: 13px;
      height: 13px;
      display: block;
      fill: currentColor;
    }

    .fg-classif {
      font-size: 10px;
      font-weight: 600;
      color: var(--mg-black);
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .fg-rail {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .fg-badge,
    .fg-track {
      height: 30px;
      border-radius: 5px;
      min-width: 0;
    }

    .fg-track {
      position: relative;
      overflow: hidden;
      background:
        repeating-linear-gradient(
          115deg,
          rgba(0,0,0,0.12) 0px,
          rgba(0,0,0,0.12) 7px,
          rgba(0,0,0,0.00) 7px,
          rgba(0,0,0,0.00) 15px
        );
      opacity: .40;
    }

    .fg-scale {
      margin-top: 8px;
    }

    .fg-ticks {
      position: relative;
      display: flex;
      gap: 0;
      height: 15px;
      align-items: flex-end;
      user-select: none;
      min-width: 0;
    }

    .fg-ticks .t {
      flex: 1 1 0;
      border-left: 1px solid rgba(159,159,159,0.55);
      height: 8px;
    }

    .fg-ticks .t.major {
      height: 12px;
      border-left-color: rgba(159,159,159,0.75);
    }

    .fg-ticks .t.is-cur {
      border-left-color: rgba(0,0,0,0.55);
      height: 15px;
    }

    .fg-labels {
      position: relative;
      height: 12px;
      margin-top: 4px;
      font-size: 8.5px;
      font-weight: 500;
      color: var(--mg-axis);
      line-height: 1;
    }

    .fg-labels .l0 { position: absolute; left: 0; bottom: 0; }
    .fg-labels .l50 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
    .fg-labels .l100 { position: absolute; right: 0; bottom: 0; }

    .fg-labels .lcur {
      position: absolute;
      bottom: 0;
      transform: translateX(-50%);
      color: var(--mg-axis);
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
    }

    .as-main {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-top: 9px;
      min-width: 0;
    }

    .as-val {
      font-size: 22px;
      font-weight: 800;
      color: var(--mg-black);
      letter-spacing: -0.02em;
      line-height: 1.05;
      white-space: nowrap;
    }

    .as-den {
      font-size: 12px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1;
      white-space: nowrap;
    }

    .as-toplabels {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 9px;
      gap: 8px;
      min-width: 0;
    }

    .as-toplabels span {
      font-size: 8.5px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .as-bar {
      margin-top: 8px;
      height: 32px;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .as-track {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 15px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: var(--as-gap);
      align-items: center;
    }

    .as-seg {
      height: 100%;
      border-radius: 4px;
    }

    .as-seg.s1 { background: var(--as-orange); }
    .as-seg.s2 { background: var(--as-orange-soft); }
    .as-seg.s3 { background: var(--as-blue-soft); }
    .as-seg.s4 { background: var(--as-blue); }

    .as-pointer {
      position: absolute;
      left: 0%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 34px;
      border-radius: 9999px;
      background: #ffffff;
      border: 4px solid var(--mg-card);
      transition: left .35s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }

    .as-sub {
      margin-top: 8px;
      font-size: 8.8px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1.2;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .ash-rows {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 11px;
    }

    .ash-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      min-width: 0;
    }

    .ash-row-left {
      font-size: 8.8px;
      font-weight: 500;
      color: var(--mg-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .ash-row-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    .ash-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 7px;
      border-radius: 3px;
      font-size: 8.8px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .ash-tag.tag-btc {
      background: var(--as-orange);
      color: #ffffff;
    }

    .ash-tag.tag-mixed {
      background: #cfcfcf;
      color: #000000;
    }

    .ash-tag.tag-alt {
      background: var(--as-blue);
      color: #ffffff;
    }

    .ash-score {
      display: flex;
      align-items: baseline;
      gap: 3px;
      white-space: nowrap;
    }

    .ash-score-val {
      font-size: 16px;
      font-weight: 800;
      color: var(--mg-black);
      line-height: 1.05;
    }

    .ash-score-den {
      font-size: 9px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1;
    }

    .hm-card {
      background: var(--mg-card);
      padding: 8px;
      border: 1px solid rgba(0,0,0,0.04);
    }

    .hm-toolbar {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 6px;
    }

    .hm-search {
      flex: 1 1 auto;
      height: 18px;
      border-radius: 4px;
      background: #c2c2c2;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 6px;
      min-width: 0;
    }

    .hm-search-icon {
      font-size: 8px;
      color: #4b5563;
      line-height: 1;
      opacity: .75;
      flex: 0 0 auto;
    }

    .hm-search-text {
      font-size: 7.5px;
      font-weight: 600;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hm-seg {
      display: inline-flex;
      align-items: center;
      background: #bcbcbc;
      border-radius: 4px;
      padding: 1px;
      flex: 0 0 auto;
    }

    .hm-seg span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 16px;
      padding: 0 4px;
      border-radius: 3px;
      font-size: 7px;
      font-weight: 800;
      color: #666;
      line-height: 1;
    }

    .hm-seg span.is-active {
      background: #d9d9d9;
      color: #333;
    }

    .hm-frame {
      border-radius: 6px;
      overflow: hidden;
      background: var(--mg-card);
    }

    .hm-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(6, 15px);
      gap: 2px;
      width: 100%;
      height: 100px;
    }

    .hm-block {
      border: none;
      border-radius: 2px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      padding: 0;
      min-width: 0;
      min-height: 0;
    }

    .hm-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      padding: 1px;
      overflow: hidden;
    }

    .hm-symbol {
      text-transform: uppercase;
      font-weight: 850;
      letter-spacing: .015em;
      line-height: 1;
      font-size: 5.5px;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hm-change {
      font-weight: 750;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      opacity: .92;
      font-size: 4.8px;
      white-space: nowrap;
    }

    .hm-block[data-rank="1"] .hm-symbol { font-size: 11px; }
    .hm-block[data-rank="1"] .hm-change { font-size: 7px; }
    .hm-block[data-rank="2"] .hm-symbol { font-size: 9px; }
    .hm-block[data-rank="2"] .hm-change { font-size: 6.2px; }

    .hm-block[data-rank="3"] .hm-symbol,
    .hm-block[data-rank="4"] .hm-symbol,
    .hm-block[data-rank="5"] .hm-symbol {
      font-size: 7px;
    }

    .hm-block[data-rank="3"] .hm-change,
    .hm-block[data-rank="4"] .hm-change,
    .hm-block[data-rank="5"] .hm-change {
      font-size: 5.4px;
    }

    .cu-sub,
    .cud-sub {
      margin-top: 3px;
      font-size: 8.5px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1.25;
    }

    .cu-mini-range,
    .mc-range-wrap {
      display: inline-flex;
      align-items: center;
      gap: 0;
      background: var(--cu-range-bg);
      border-radius: 4px;
      padding: 1px;
      flex: 0 0 auto;
    }

    .cu-mini-range span,
    .mc-range-wrap span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 16px;
      min-width: 22px;
      padding: 0 5px;
      border-radius: 3px;
      font-size: 7.5px;
      font-weight: 800;
      color: #6d6d6d;
      white-space: nowrap;
      line-height: 1;
    }

    .cu-mini-range span.is-active,
    .mc-range-wrap span.is-active {
      background: var(--cu-range-active);
      color: #333;
    }

    .cu-chart-mini,
    .cud-chart-mini,
    .mc-chart-mini {
      position: relative;
      margin-top: 9px;
      height: 70px;
      min-width: 0;
      overflow: hidden;
      border-radius: 6px;
    }

    .cud-chart-mini {
      height: 63px;
    }

    .cu-chart-mini svg,
    .cud-chart-mini svg,
    .mc-chart-mini svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .cu-legend {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 3px 6px;
      z-index: 2;
      pointer-events: none;
    }

    .cu-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 6.8px;
      color: #6D6D6D;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .cu-dot {
      width: 6px;
      height: 6px;
      border-radius: 2px;
      flex: 0 0 auto;
    }

    .cu-axis-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      color: #6D6D6D;
      font-size: 7.5px;
      font-weight: 600;
      line-height: 1;
    }

    .cud-icons-rail {
      margin-top: 8px;
      background: rgba(255,255,255,0.18);
      border-radius: 10px;
      padding: 6px 5px;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .cud-icons-grid {
      display: grid;
      grid-template-columns: repeat(10, minmax(0,1fr));
      align-items: center;
      justify-items: center;
      gap: 2px;
    }

    .cud-ic {
      width: 13px;
      height: 13px;
      border-radius: 999px;
      background: #ececec;
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 1px 4px rgba(0,0,0,0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-size: 6px;
      font-weight: 900;
      color: #6D6D6D;
      line-height: 1;
    }

    .mc-kpis {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
    }

    .mc-kpi {
      min-width: 0;
    }

    .mc-kpi-label {
      font-size: 8px;
      font-weight: 500;
      color: var(--mg-muted);
      line-height: 1.1;
      white-space: nowrap;
    }

    .mc-kpi-value {
      margin-top: 4px;
      font-size: 15px;
      font-weight: 800;
      color: var(--mg-black);
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
    }

    .mc-watermark {
      position: absolute;
      right: 10px;
      top: 18px;
      font-size: 6.5px;
      font-weight: 900;
      letter-spacing: .04em;
      color: rgba(255,138,0,.20);
      pointer-events: none;
      user-select: none;
    }

    .eby-preload-host {
      position: relative;
      isolation: isolate;
    }

    .eby-preload {
      position: absolute;
      inset: 0;
      z-index: 35;
      pointer-events: none;
      border-radius: inherit;
      overflow: hidden;
      background: var(--eby-preload-surface);
      opacity: 1;
      transition: opacity .22s ease;
    }

    .eby-preload-host.eby-preload-ready .eby-preload {
      opacity: 0;
    }

    .eby-preload-host.eby-preload-done .eby-preload {
      display: none;
    }

    .eby-preload__shimmer {
      position: absolute;
      inset: -35%;
      background:
        linear-gradient(
          90deg,
          rgba(255,255,255,0.00) 0%,
          rgba(255,255,255,0.28) 48%,
          rgba(255,255,255,0.00) 90%
        );
      transform: translateX(-45%);
      animation: ebyPreloadShimmer 1.45s ease-in-out infinite;
      opacity: 1;
    }

    @keyframes ebyPreloadShimmer {
      0% { transform: translateX(-45%); }
      100% { transform: translateX(45%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .eby-preload__shimmer {
        animation: none;
      }

      .marquee-loop {
        animation-play-state: paused;
      }
    }

    @media (max-width: 900px) {
      .marquee-perspective {
        top: -145px;
        width: 900px;
        transform:
          translateX(-50%)
          perspective(800px)
          rotateX(58deg)
          rotateZ(-17deg)
          scale(1.04);
      }

      .marquee-grid {
        gap: 20px;
        padding: 0 16px;
      }

      .marquee-column,
      .hm-card,
      .fg-card,
      .as-card,
      .ash-card,
      .cu-card-mini,
      .cud-card-mini,
      .mc-card-mini {
        width: 180px;
      }
    }

    @media (max-width: 600px) {
      .marquee-demo {
        height: 360px;
      }

      .marquee-perspective {
        top: -132px;
        width: 780px;
        transform:
          translateX(-50%)
          perspective(760px)
          rotateX(58deg)
          rotateZ(-17deg)
          scale(0.95);
      }

      .marquee-grid {
        gap: 18px;
        padding: 0 12px;
      }

      .marquee-column,
      .hm-card,
      .fg-card,
      .as-card,
      .ash-card,
      .cu-card-mini,
      .cud-card-mini,
      .mc-card-mini {
        width: 164px;
      }

      .hm-grid {
        grid-template-rows: repeat(6, 14px);
        height: 92px;
      }
    }
  


    .feature-indicators .card-visual.visual-indicators {
      display: block;
      padding: 0;
      gap: 0;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
    }

    .feature-indicators .marquee-demo {
      width: 100%;
      height: 100%;
      min-height: 0;
      border: none;
      border-radius: 10px;
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
    }

    .feature-indicators .marquee-demo::before,
    .feature-indicators .marquee-demo::after {
      display: none;
    }

    .feature-indicators .marquee-perspective {
      top: -222px;
      width: 840px;
      height: 760px;
      transform:
        translateX(-50%)
        perspective(780px)
        rotateX(58deg)
        rotateZ(-17deg)
        scale(0.78)
        translate3d(0, 0, 0);
    }

    .feature-indicators .marquee-grid {
      gap: 20px;
      padding: 0 14px;
    }

    .feature-indicators .marquee-column,
    .feature-indicators .hm-card,
    .feature-indicators .fg-card,
    .feature-indicators .as-card,
    .feature-indicators .ash-card,
    .feature-indicators .cu-card-mini,
    .feature-indicators .cud-card-mini,
    .feature-indicators .mc-card-mini {
      width: 174px;
    }


    .feature-indicators .marquee-grid {
      opacity: 1;
    }

    .feature-indicators .fg-card,
    .feature-indicators .as-card,
    .feature-indicators .ash-card,
    .feature-indicators .hm-card,
    .feature-indicators .cu-card-mini,
    .feature-indicators .cud-card-mini,
    .feature-indicators .mc-card-mini,
    .feature-indicators .hm-frame {
      background: linear-gradient(180deg, #eeeaea 0%, #d9d9d9 100%);
    }

    .feature-indicators .marquee-column:nth-child(1) { margin-top: 78px; }
    .feature-indicators .marquee-column:nth-child(2) { margin-top: -18px; }
    .feature-indicators .marquee-column:nth-child(3) { margin-top: 52px; }
    .feature-indicators .marquee-column:nth-child(4) { margin-top: -72px; }

    @media (max-width: 980px) {
      .feature-indicators .marquee-perspective {
        top: -210px;
        width: 800px;
        transform:
          translateX(-50%)
          perspective(760px)
          rotateX(58deg)
          rotateZ(-17deg)
          scale(0.72);
      }
    }

    @media (max-width: 640px) {
      .feature-indicators .marquee-demo {
        height: 100%;
      }

      .feature-indicators .marquee-perspective {
        top: -188px;
        width: 760px;
        transform:
          translateX(-50%)
          perspective(720px)
          rotateX(58deg)
          rotateZ(-17deg)
          scale(0.66);
      }
    }



    /* Portfolio chart - responsive sans etirement */
    .feature-portfolio .portfolio-visual {
      padding: 8px 0 8px !important;
      gap: 5px !important;
      overflow: hidden !important;
    }

    .feature-portfolio .portfolio-growth-head {
      flex: 0 0 auto !important;
      padding: 0 10px !important;
    }

    .feature-portfolio .portfolio-growth-plot {
      position: relative !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      height: auto !important;
      min-height: 92px !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      overflow: hidden !important;
    }

    .feature-portfolio .portfolio-growth-chart,
    .feature-portfolio .portfolio-growth-axis-overlay {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .feature-portfolio .portfolio-growth-chart {
      display: block !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .feature-portfolio .portfolio-growth-area,
    .feature-portfolio .portfolio-growth-line,
    .feature-portfolio .portfolio-growth-line-glow,
    .feature-portfolio .portfolio-growth-current-glow,
    .feature-portfolio .portfolio-growth-current-dot {
      transform: none !important;
    }