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

    :root {
      /* Soft lavender canvas — Nexi-style */
      --bg:           #F5F1FF;
      --card:         #FFFFFF;
      --card-2:       #EDE6FF;

      /* Ink */
      --ink:          #0F0826;
      --ink-2:        #3D3258;
      --ink-3:        #6B6088;
      --ink-4:        #A89DC2;

      /* Purple accent system — saturated */
      --purple:       #6E4BFF;
      --purple-2:     #8A6CFF;
      --purple-3:     #B79EFF;
      --purple-soft:  #E8DEFF;
      --lilac:        #D9C9FF;

      /* Gradient stops */
      --grad-1:       #C9B8FF;
      --grad-2:       #E0D2FF;
      --grad-3:       #F5EDFF;

      /* Dark "space" section */
      --space:        #0B0420;
      --space-2:      #1A0B3E;

      /* Restrained semantic */
      --pos:          #2DBE85;
      --neg:          #E5556B;
      --warn:         #F7B538;

      /* Hairlines */
      --line:         rgba(15, 8, 38, 0.08);
      --line-2:       rgba(15, 8, 38, 0.14);

      --font-body:    'Space Grotesk', -apple-system, system-ui, sans-serif;
      --font-mono:    'JetBrains Mono', ui-monospace, monospace;

      --radius-sm:    10px;
      --radius:       16px;
      --radius-lg:    24px;
      --radius-pill:  999px;

      --shadow-sm:    0 1px 2px rgba(15,8,38,0.04), 0 4px 14px -6px rgba(110,75,255,0.12);
      --shadow-md:    0 2px 4px rgba(15,8,38,0.04), 0 14px 36px -16px rgba(110,75,255,0.22);
      --shadow-lg:    0 4px 12px rgba(15,8,38,0.06), 0 30px 80px -30px rgba(110,75,255,0.32);
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      letter-spacing: -0.01em;
    }

    /* ── Animations ── */
    .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .fade-up-d1 { transition-delay: 0.08s; }
    .fade-up-d2 { transition-delay: 0.16s; }
    .fade-up-d3 { transition-delay: 0.24s; }
    .fade-up-d4 { transition-delay: 0.32s; }

    @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes orbFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
    @keyframes orbFloat2 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-3deg); } }
    @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
    @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

    /* ── LAYOUT ── */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; }

    /* ── NAV ── */
    nav.site {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      z-index: 100;
      width: calc(100% - 32px); max-width: 1180px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: saturate(160%) blur(18px);
      -webkit-backdrop-filter: saturate(160%) blur(18px);
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      padding: 8px 12px 8px 24px;
      box-shadow: var(--shadow-sm);
      display: flex; align-items: center; gap: 32px;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 10px;
      font-size: 18px; font-weight: 700;
      color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
    }
    .nav-logo-mark {
      width: 30px; height: 30px; border-radius: 9px;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      display: flex; align-items: center; justify-content: center;
      color: white;
      font-weight: 700; font-size: 15px;
      box-shadow: 0 2px 8px -2px rgba(124,92,255,0.5);
    }
    .nav-links { display: flex; gap: 22px; flex: 1; margin-left: 8px; }
    .nav-links a {
      font-size: 14px; color: var(--ink-2); text-decoration: none; font-weight: 500;
      transition: color 0.15s;
    }
    .nav-links a:hover { color: var(--purple); }
    .nav-dropdown {
      position: relative;
      display: flex;
      align-items: center;
    }
    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .nav-dropdown-trigger::after {
      content: '';
      width: 6px;
      height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform 0.18s ease;
    }
    .nav-dropdown-menu {
      position: absolute;
      top: calc(100% + 16px);
      left: -18px;
      min-width: 240px;
      padding: 10px;
      background: rgba(255,255,255,0.96);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      display: grid;
      gap: 2px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    }
    .nav-dropdown-menu::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -18px;
      height: 18px;
    }
    .nav-dropdown-menu a {
      display: block;
      padding: 11px 12px;
      border-radius: 10px;
      color: var(--ink-2);
      font-size: 14px;
      white-space: nowrap;
    }
    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus {
      background: var(--purple-soft);
      color: var(--purple);
      outline: none;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .nav-dropdown:hover .nav-dropdown-trigger::after,
    .nav-dropdown:focus-within .nav-dropdown-trigger::after {
      transform: translateY(1px) rotate(225deg);
    }

    .nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .nav-account-dropdown { margin-left: 4px; }
    .nav-account-trigger {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px 6px 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      box-shadow: var(--shadow-sm);
    }
    .nav-account-avatar {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      color: white;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.02em;
      flex: 0 0 auto;
    }
    .nav-account-copy {
      display: grid;
      gap: 1px;
      align-items: center;
      text-align: left;
      min-width: 0;
    }
    .nav-account-name {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 190px;
    }
    .nav-account-role {
      font-size: 11px;
      line-height: 1.1;
      color: var(--ink-3);
      white-space: nowrap;
    }
    .nav-account-menu {
      left: auto;
      right: 0;
      min-width: 220px;
    }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      font-family: var(--font-body); font-size: 14px; font-weight: 600;
      padding: 10px 20px; border-radius: var(--radius-pill);
      cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
      text-decoration: none; border: 1px solid transparent;
      letter-spacing: -0.01em; white-space: nowrap;
    }
    .btn-primary {
      background: var(--ink); color: white;
    }
    .btn-primary:hover { background: var(--purple); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(124,92,255,0.5); }

    .btn-ghost { background: transparent; color: var(--ink-2); }
    .btn-ghost:hover { color: var(--purple); }

    .btn-light { background: white; color: var(--ink); border-color: var(--line-2); }
    .btn-light:hover { border-color: var(--purple); color: var(--purple); }

    .btn-lg { padding: 14px 26px; font-size: 15px; }

    .btn-arrow svg { transition: transform 0.2s; }
    .btn-arrow:hover svg { transform: translateX(3px); }

    /* ── HERO ── */
    .hero {
      position: relative;
      padding: 120px 0 80px;
      background:
        radial-gradient(ellipse 900px 600px at 75% 30%, rgba(110,75,255,0.22), transparent 60%),
        radial-gradient(ellipse 700px 400px at 20% 80%, rgba(217,201,255,0.55), transparent 60%),
        linear-gradient(180deg, #EDE3FF 0%, var(--bg) 75%);
      overflow: hidden;
    }
    .hero-grid {
      display: grid; grid-template-columns: 1.05fr 1fr;
      gap: 60px; align-items: center;
    }

    .hero-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 6px 6px 6px 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      font-size: 13px; font-weight: 500; color: var(--ink-2);
      margin-bottom: 28px;
      box-shadow: var(--shadow-sm);
    }
    .hero-pill-tag {
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      color: white; font-size: 11px; font-weight: 700;
      padding: 3px 10px; border-radius: var(--radius-pill);
      letter-spacing: 0.04em;
    }
    .hero-h1 {
      font-size: clamp(46px, 5.6vw, 78px);
      font-weight: 600;
      line-height: 1.02;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin-bottom: 28px;
      text-wrap: balance;
    }
    .hero-h1 .grad {
      background: linear-gradient(135deg, var(--purple) 0%, #B080FF 50%, #E5A0FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }
    .hero-sub {
      font-size: 18px;
      color: var(--ink-2);
      line-height: 1.6;
      max-width: 480px;
      margin-bottom: 36px;
      font-weight: 400;
    }
    .hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

    .hero-meta {
      display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap;
    }
    .hero-meta-item {
      font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; font-weight: 500;
    }
    .hero-meta-item svg { color: var(--purple); flex-shrink: 0; }

    /* ── HERO VISUAL ── */
    .hero-visual {
      position: relative;
      height: 560px;
    }
    /* Iridescent glass orb (placeholder for 3D render) */
    .orb {
      position: absolute;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 40%, transparent 70%),
        conic-gradient(from 200deg at 50% 50%, #C7B8FF, #FFD0F0, #B8E0FF, #D8C7FF, #C7B8FF);
      filter: blur(0.4px);
      box-shadow:
        inset 0 0 60px rgba(255,255,255,0.4),
        inset -20px -30px 60px rgba(124,92,255,0.3),
        0 30px 80px -20px rgba(124,92,255,0.4);
      animation: orbFloat 7s ease-in-out infinite;
    }
    .orb-big {
      width: 320px; height: 320px;
      left: 120px; top: 20px;
      z-index: 1;
    }
    .orb-small {
      width: 90px; height: 90px;
      right: 60%; bottom: 30px;
      z-index: 0;
      animation: orbFloat2 5.5s ease-in-out infinite;
    }
    .orb-tiny {
      width: 60px; height: 60px;
      right: 60%; top: 30px;
      z-index: 0;
      opacity: 0.7;
    }

    /* Floating display card */
    .hero-card {
      position: absolute;
      background: white;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255,255,255,0.8);
    }
    .hero-card-main {
      width: 360px;
      right: 0; top: 20px;
      z-index: 2;
      padding: 18px;
      animation: orbFloat 8s ease-in-out infinite;
    }
    .hero-card-main .hcm-head {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 14px; border-bottom: 1px solid var(--line);
      margin-bottom: 12px;
    }
    .hero-card-main .hcm-title {
      font-size: 14px; font-weight: 700; color: var(--ink);
    }
    .hero-card-main .hcm-tag {
      font-family: var(--font-mono); font-size: 10px; color: var(--pos);
      background: rgba(45,190,133,0.1); padding: 3px 8px; border-radius: var(--radius-pill);
      display: flex; align-items: center; gap: 6px;
    }
    .hero-card-main .hcm-tag::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pos);
      animation: pulseDot 2s ease-in-out infinite;
    }
    .rate-row {
      display: grid; grid-template-columns: 28px 1fr 1fr 1fr; gap: 8px;
      align-items: center; padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }
    .rate-row:last-child { border-bottom: none; }
    .rate-flag {
      width: 22px; height: 22px; border-radius: 50%; background: var(--card-2);
      display: flex; align-items: center; justify-content: center; font-size: 13px;
    }
    .rate-code { font-size: 13px; font-weight: 700; color: var(--ink); }
    .rate-val { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
    .rate-val.buy { color: var(--ink); font-weight: 500; }

    /* Booking widget card (left, lower) */
    .hero-card-widget {
      width: 280px;
      left: 0; top: 220px;
      z-index: 4;
      padding: 16px 18px;
      display: flex; flex-direction: column;
      gap: 10px;
      animation: orbFloat2 7.5s ease-in-out infinite;
    }
    .hcw-head {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
    .hcw-title {
      font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em;
      display: flex; align-items: center; gap: 8px;
    }
    .hcw-title-badge {
      font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
      padding: 2px 7px; border-radius: var(--radius-pill);
      background: var(--purple); color: white;
    }
    .hcw-tag {
      font-family: var(--font-mono); font-size: 9px;
      color: var(--pos); font-weight: 600;
      display: flex; align-items: center; gap: 5px;
    }
    .hcw-tag::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pos);
      animation: pulseDot 2s ease-in-out infinite;
    }
    .hcw-row {
      display: grid; grid-template-columns: auto 1fr;
      align-items: center; gap: 10px;
      padding: 8px 10px;
      background: #F9F6FF;
      border-radius: 8px;
    }
    .hcw-row.from { background: linear-gradient(135deg, #F1E9FF 0%, #E8DEFF 100%); }
    .hcw-cur {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; color: var(--ink);
    }
    .hcw-amt {
      font-family: var(--font-mono); font-size: 14px; font-weight: 700;
      color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
    }
    .hcw-arrow {
      align-self: center; justify-self: center;
      width: 24px; height: 24px; border-radius: 50%;
      background: white; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      color: var(--purple);
      margin: -4px auto;
      position: relative; z-index: 1;
    }
    .hcw-rate {
      font-size: 10px; color: var(--ink-3);
      display: flex; justify-content: space-between;
      padding: 0 4px;
      font-weight: 500;
    }
    .hcw-rate b { color: var(--purple); font-weight: 700; font-variant-numeric: tabular-nums; }
    .hcw-btn {
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      font-size: 11px; font-weight: 700;
      padding: 11px; border-radius: 10px;
      text-align: center;
      letter-spacing: 0.03em;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 8px 22px -8px rgba(110,75,255,0.6);
    }

    .hero-card-mini {
      bottom: 0; right: 30px; left: auto;
      z-index: 3;
      padding: 14px 18px;
      display: flex; align-items: center; gap: 14px;
      animation: orbFloat2 6.5s ease-in-out infinite;
    }
    .mini-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(135deg, #B8E0FF, #DAC7FF);
      display: flex; align-items: center; justify-content: center;
      color: var(--purple);
    }
    .mini-num { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
    .mini-label { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-weight: 500; }

    /* Decorative twinkles */
    .twinkle {
      position: absolute; pointer-events: none;
      animation: twinkle 3s ease-in-out infinite;
    }
    .twinkle svg { color: var(--purple-2); }
    .twinkle.t1 { top: 10%; right: 30%; animation-delay: 0s; }
    .twinkle.t2 { bottom: 20%; left: 30%; animation-delay: 0.8s; }
    .twinkle.t3 { top: 60%; right: 6%; animation-delay: 1.6s; }

    /* ── TICKER ── */
    .ticker-bar {
      margin-top: 60px;
      padding: 14px 0;
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      max-width: 1136px;
      margin-left: auto; margin-right: auto;
      overflow: hidden; position: relative;
      box-shadow: var(--shadow-sm);
    }
    .ticker-fade-l, .ticker-fade-r {
      position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
    }
    .ticker-fade-l { left: 0; background: linear-gradient(90deg, white, transparent); border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
    .ticker-fade-r { right: 0; background: linear-gradient(-90deg, white, transparent); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
    .ticker-track {
      display: flex; gap: 36px; white-space: nowrap;
      animation: tickerScroll 60s linear infinite;
      font-family: var(--font-mono); font-size: 12px; font-weight: 500;
      color: var(--ink-2);
      font-variant-numeric: tabular-nums;
    }
    .tick-up { color: var(--pos); }
    .tick-dn { color: var(--neg); }
    .tick-pair { color: var(--ink); font-weight: 600; }

    /* ── SECTIONS ── */
    .section { padding: 120px 0; }
    .section-eyebrow {
      display: inline-block;
      padding: 6px 14px;
      background: var(--purple-soft);
      color: var(--purple);
      border-radius: var(--radius-pill);
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
    }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
    .section-h2 {
      font-size: clamp(36px, 4.4vw, 58px);
      font-weight: 600; line-height: 1.04; letter-spacing: -0.035em;
      color: var(--ink); text-wrap: balance;
      margin-bottom: 20px;
    }
    .section-h2 .grad {
      background: linear-gradient(135deg, var(--purple), #C8A0FF);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .section-sub {
      font-size: 17px; color: var(--ink-2); line-height: 1.6;
      max-width: 580px; margin: 0 auto;
    }

    /* ── METRICS ── */
    .metrics-band {
      padding: 60px 0;
    }
    .metrics-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .metric {
      background: white;
      border-radius: var(--radius);
      padding: 28px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .metric-num {
      font-size: 44px; font-weight: 700;
      letter-spacing: -0.04em; color: var(--ink); line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .metric-num .grad {
      background: linear-gradient(135deg, var(--purple), #C8A0FF);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .metric-label {
      font-size: 13px; color: var(--ink-3);
      margin-top: 12px; line-height: 1.5; font-weight: 500;
    }

    /* ── MODULES (3 product cards) ── */
    .modules-section {
      padding: 120px 0;
      background:
        radial-gradient(ellipse 700px 400px at 20% 0%, rgba(217,201,255,0.4), transparent 65%),
        radial-gradient(ellipse 600px 400px at 90% 100%, rgba(232,223,255,0.45), transparent 70%),
        var(--bg);
    }
    .modules-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 64px;
    }
    .modules-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }
    .module-card {
      background: white;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-lg);
      padding: 28px 28px 32px;
      display: flex; flex-direction: column;
      gap: 0;
      min-width: 0;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
    }
    .module-card:hover {
      border-color: var(--purple-3);
      transform: translateY(-4px);
      box-shadow: 0 22px 45px -22px rgba(110,75,255,0.28);
    }
    .module-mock {
      position: relative;
      height: 200px;
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 26px;
      background:
        radial-gradient(ellipse 70% 80% at 25% 18%, rgba(110,75,255,0.22), transparent 65%),
        linear-gradient(160deg, #E8DCFF 0%, #F4ECFF 60%, #FAF6FF 100%);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .module-tag {
      position: absolute;
      top: 14px; left: 14px;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em;
      padding: 4px 9px;
      background: white;
      color: var(--purple);
      border-radius: var(--radius-pill);
      text-transform: uppercase;
    }
    .module-tag.new { background: var(--purple); color: white; }
    .module-num {
      position: absolute;
      bottom: 12px; right: 16px;
      font-size: 72px; font-weight: 600;
      letter-spacing: -0.05em;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.4px rgba(110,75,255,0.35);
      pointer-events: none;
    }
    .module-h3 {
      font-size: 22px; font-weight: 600;
      letter-spacing: -0.025em; color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .module-p {
      font-size: 14.5px; color: var(--ink-3); line-height: 1.55;
      margin-bottom: 22px;
      flex: 1;
    }
    .module-bullets {
      display: flex; flex-direction: column; gap: 10px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }
    .module-bullet {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
    }
    .module-bullet-dot {
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--purple-soft); color: var(--purple);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 2px;
    }
    .module-card-actions {
      margin-top: auto;
      padding-top: 26px;
    }
    .module-link {
      display: inline-flex;
      align-items: center;
      color: var(--purple);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }
    .module-link:hover { color: var(--ink); }

    /* === MOCK: display board (module 1) === */
    .mod-display {
      width: 100%;
      background: linear-gradient(135deg, #0F0524, #1A0B3E);
      border-radius: 10px;
      padding: 10px 12px;
      display: grid; grid-template-columns: 1.5fr 1fr;
      gap: 6px;
      box-shadow: 0 14px 30px -14px rgba(15,5,36,0.5);
    }
    .mod-display-rates { display: flex; flex-direction: column; gap: 4px; }
    .mod-display-row {
      display: grid; grid-template-columns: 14px 1fr 1fr 1fr;
      align-items: center; gap: 5px;
    }
    .mod-display-row.head { color: rgba(255,255,255,0.4); font-size: 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .mod-display-flag { font-size: 9px; }
    .mod-display-code { font-size: 9px; font-weight: 700; color: white; letter-spacing: -0.01em; }
    .mod-display-val { font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,0.85); text-align: right; }
    .mod-display-side {
      background: rgba(110,75,255,0.15);
      border-radius: 6px;
      padding: 8px;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      gap: 2px;
    }
    .mod-display-clock { font-size: 14px; font-weight: 700; color: white; }
    .mod-display-date { font-size: 6px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }

    /* === MOCK: widget (module 2) === */
    .mod-widget {
      width: 100%;
      background: white;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 14px 30px -14px rgba(110,75,255,0.3);
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .mod-widget-head {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
    }
    .mod-widget-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); animation: pulseDot 2s ease-in-out infinite; }
    .mod-widget-row {
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center; gap: 6px;
      padding: 6px 8px;
      background: var(--bg);
      border-radius: 6px;
    }
    .mod-widget-curr {
      display: flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700; color: var(--ink);
    }
    .mod-widget-amt {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); text-align: right;
    }
    .mod-widget-swap {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--purple-soft); color: var(--purple);
      display: flex; align-items: center; justify-content: center;
    }
    .mod-widget-rate {
      font-size: 8px; color: var(--ink-3);
      display: flex; justify-content: space-between;
      padding: 0 2px;
    }
    .mod-widget-rate b { color: var(--purple); font-weight: 700; }
    .mod-widget-btn {
      background: var(--ink); color: white;
      font-size: 9px; font-weight: 700;
      padding: 7px; border-radius: 6px;
      text-align: center;
      letter-spacing: 0.02em;
    }

    /* === MOCK: trader panel (module 3) === */
    .mod-trader {
      width: 100%;
      background: white;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      display: flex; flex-direction: column;
      gap: 4px;
      box-shadow: 0 14px 30px -14px rgba(110,75,255,0.3);
    }
    .mod-trader-tabs {
      display: flex; gap: 4px;
      margin-bottom: 4px;
    }
    .mod-trader-tab {
      font-size: 7px; font-weight: 700;
      padding: 3px 7px; border-radius: 4px;
      letter-spacing: 0.04em;
    }
    .mod-trader-tab.active { background: var(--ink); color: white; }
    .mod-trader-tab.ghost { background: var(--bg); color: var(--ink-3); }
    .mod-trader-row {
      display: grid; grid-template-columns: 14px 1fr 1fr 1fr 1fr;
      align-items: center; gap: 4px;
      padding: 3px 0;
      font-size: 8px;
    }
    .mod-trader-row.head { color: var(--ink-4); font-size: 6.5px; padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 1px; }
    .mod-trader-flag { font-size: 9px; }
    .mod-trader-pair { font-weight: 700; color: var(--ink); }
    .mod-trader-val { font-family: var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
    .mod-trader-chg.up { color: var(--pos); font-weight: 700; }
    .mod-trader-chg.dn { color: var(--neg); font-weight: 700; }
    .mod-trader-spark {
      display: inline-block; height: 8px; width: 100%;
    }

    @media (max-width: 920px) {
      .modules-grid { grid-template-columns: 1fr; }
    }

    /* ── FEATURES (split layout, hairline dividers) ── */
    .features-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 56px;
    }
    .features-eyebrow {
      display: inline-block;
      padding: 9px 18px;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-pill);
      font-size: 13px; color: var(--ink);
      font-weight: 500; letter-spacing: -0.005em;
      margin-bottom: 28px;
      background: white;
    }
    .features-h2 {
      font-size: clamp(38px, 4.8vw, 64px);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.035em;
      color: var(--ink);
      text-wrap: balance;
      margin-bottom: 16px;
    }
    .features-h2 .soft { color: var(--purple-3); font-weight: 500; }
    .features-sub {
      font-size: 16px; color: var(--ink-3); line-height: 1.6;
      max-width: 560px; margin: 0 auto;
    }

    .features-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
    }
    .feature {
      position: relative;
      padding: 48px 36px 44px;
      background: transparent;
      border: none;
      border-radius: var(--radius-lg);
      min-width: 0;
      min-height: 360px;
      display: flex; flex-direction: column;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.4s ease;
    }
    /* hairline divider between cards in the same row */
    .feature::before {
      content: '';
      position: absolute;
      left: 0; top: 28px; bottom: 28px;
      width: 1px; background: var(--line-2);
      opacity: 1;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .feature:nth-child(3n+1)::before { display: none; }
    .feature.is-active::before,
    .feature.is-active + .feature::before { opacity: 0; }
    .feature.is-active {
      background:
        radial-gradient(ellipse 70% 80% at 28% 22%, rgba(110,75,255,0.16), transparent 65%),
        linear-gradient(155deg, #E8DBFF 0%, #F2EAFF 55%, #F9F4FF 100%);
    }

    .feature-p {
      font-size: 14.5px; color: var(--ink-3); line-height: 1.55;
      font-weight: 400;
      max-width: 280px;
    }
    .feature-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: white;
      border: 1.5px solid var(--purple);
      color: var(--purple);
      margin: 64px 0 48px;
      transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s;
      flex-shrink: 0;
    }
    .feature.is-active .feature-icon {
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      border-color: transparent;
      color: white;
      box-shadow: 0 12px 26px -10px rgba(110,75,255,0.55);
    }
    .feature-h3 {
      font-size: clamp(22px, 1.9vw, 28px);
      font-weight: 500;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1.15;
      margin-top: auto;
      text-wrap: balance;
    }

    @media (max-width: 920px) {
      .features-grid { grid-template-columns: 1fr; }
      .feature { min-height: auto; padding: 36px 0; }
      .feature::before { display: none !important; }
      .feature + .feature { border-top: 1px solid var(--line-2); }
      .feature.is-active { background: transparent; }
      .feature .feature-icon {
        background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
        border-color: transparent;
        color: white;
        margin: 28px 0 24px;
      }
    }

    /* ── HOW IT WORKS (expanding cards) ── */
    .hiw {
      position: relative;
      padding: 120px 0;
      background: white;
    }
    .hiw-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 64px;
    }
    .hiw-eyebrow {
      display: inline-block;
      padding: 9px 18px;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-pill);
      font-size: 13px; color: var(--ink);
      font-weight: 500; letter-spacing: -0.005em;
      margin-bottom: 28px;
      background: white;
    }
    .hiw-h2 {
      font-size: clamp(38px, 4.8vw, 64px);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.035em;
      color: var(--ink);
      text-wrap: balance;
      margin-bottom: 16px;
    }
    .hiw-h2 .soft { color: var(--purple-3); font-weight: 500; }
    .hiw-sub {
      font-size: 16px; color: var(--ink-3); line-height: 1.6;
      max-width: 540px; margin: 0 auto;
    }

    .hiw-grid {
      display: flex;
      gap: 18px;
      align-items: stretch;
    }
    .hiw-grid::before { display: none; }

    .hiw-step {
      flex: 1;
      min-width: 0;
      position: relative;
      background: var(--purple-soft);
      border-radius: var(--radius-lg);
      padding: 36px 36px 40px;
      cursor: pointer;
      overflow: hidden;
      min-height: 480px;
      display: flex; flex-direction: column;
      transition:
        flex 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s ease;
    }
    .hiw-step:hover { background: #E1D2FF; }
    .hiw-step.is-active {
      flex: 2.4;
      background:
        radial-gradient(ellipse 70% 80% at 25% 18%, rgba(110,75,255,0.55), transparent 65%),
        linear-gradient(155deg, #CFBEFF 0%, #E8DCFF 40%, #F4ECFF 85%);
    }
    .hiw-step.is-active:hover { background:
      radial-gradient(ellipse 70% 80% at 25% 18%, rgba(110,75,255,0.55), transparent 65%),
      linear-gradient(155deg, #CFBEFF 0%, #E8DCFF 40%, #F4ECFF 85%);
    }

    .hiw-num {
      position: absolute;
      top: 22px; right: 30px;
      font-size: clamp(80px, 9vw, 130px);
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.05em;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(110,75,255,0.45);
      font-variant-numeric: tabular-nums;
      pointer-events: none;
      background: none;
      width: auto; height: auto;
      border-radius: 0; margin: 0;
      box-shadow: none;
      display: block;
    }
    .hiw-step.is-active .hiw-num {
      -webkit-text-stroke: 1.5px rgba(255,255,255,0.7);
    }

    .hiw-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      display: flex; align-items: center; justify-content: center;
      color: white;
      box-shadow: 0 8px 20px -8px rgba(110,75,255,0.5);
      flex-shrink: 0;
      position: relative; z-index: 2;
    }

    .hiw-bottom {
      margin-top: auto;
      position: relative; z-index: 2;
    }
    .hiw-h3 {
      font-size: clamp(24px, 2.4vw, 32px);
      font-weight: 500;
      letter-spacing: -0.025em;
      color: var(--ink);
      line-height: 1.1;
      margin-top: 24px;
      text-wrap: balance;
      transition: color 0.3s;
    }
    .hiw-p {
      font-size: 15px; color: var(--ink-2); line-height: 1.55;
      margin-top: 16px;
      max-width: 440px;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.35s ease, max-height 0.45s ease, margin-top 0.3s ease;
    }
    .hiw-step.is-active .hiw-p {
      opacity: 1;
      max-height: 200px;
      margin-top: 16px;
    }

    @media (max-width: 920px) {
      .hiw-grid { flex-direction: column; }
      .hiw-step, .hiw-step.is-active { flex: 1; min-height: 280px; }
      .hiw-step .hiw-p { opacity: 1; max-height: 200px; margin-top: 16px; }
    }

    /* ── SHOWCASE (Nexi-style alternating split rows) ── */
    .showcase-wrap {
      padding: 120px 0;
      background:
        radial-gradient(ellipse 700px 500px at 90% 30%, rgba(217,201,255,0.4), transparent 65%),
        radial-gradient(ellipse 600px 400px at 10% 80%, rgba(232,223,255,0.45), transparent 70%),
        var(--bg);
    }
    .showcase-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .showcase-row + .showcase-row { margin-top: 140px; }
    .showcase-row.reverse > .showcase-text { order: 2; }
    .showcase-row.reverse > .showcase-visual { order: 1; }

    /* Stacked feature list (row 1 left) */
    .sc-features { display: flex; flex-direction: column; gap: 44px; }
    .sc-feat {
      display: grid; grid-template-columns: 60px 1fr;
      gap: 22px;
      align-items: start;
    }
    .sc-feat-icon {
      width: 60px; height: 60px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      display: flex; align-items: center; justify-content: center;
      color: white;
      box-shadow: 0 12px 26px -10px rgba(110,75,255,0.45);
      flex-shrink: 0;
    }
    .sc-feat-icon.outline {
      background: white;
      border: 1.5px solid var(--purple);
      color: var(--purple);
      box-shadow: none;
    }
    .sc-feat-h {
      font-size: clamp(22px, 2.1vw, 28px);
      font-weight: 500;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .sc-feat-h.accent { color: var(--purple); }
    .sc-feat-p {
      font-size: 15.5px; color: var(--ink-3); line-height: 1.6;
      max-width: 440px;
    }

    /* Big text block (row 2 right) */
    .sc-pitch-h {
      font-size: clamp(34px, 4.2vw, 56px);
      font-weight: 500;
      letter-spacing: -0.035em;
      line-height: 1.06;
      color: var(--ink);
      margin-bottom: 28px;
      text-wrap: balance;
    }
    .sc-pitch-p {
      font-size: 16px;
      color: var(--ink-3);
      line-height: 1.6;
      margin-bottom: 36px;
      max-width: 520px;
    }
    .sc-pitch-actions {
      display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    }
    .btn-cta-purple {
      display: inline-flex; align-items: center; gap: 14px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      border: none;
      padding: 16px 24px 16px 28px;
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-size: 15px; font-weight: 500;
      cursor: pointer; text-decoration: none;
      letter-spacing: -0.005em;
      box-shadow: 0 16px 30px -14px rgba(110,75,255,0.55);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-cta-purple:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 40px -16px rgba(110,75,255,0.65);
    }
    .btn-cta-purple-icon {
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,0.18);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .sc-watch {
      display: inline-flex; align-items: center; gap: 12px;
      color: var(--ink);
      text-decoration: none;
      font-size: 15px; font-weight: 500;
      letter-spacing: -0.005em;
      transition: color 0.2s;
    }
    .sc-watch:hover { color: var(--purple); }
    .sc-watch-icon {
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--ink);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--ink);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .sc-watch:hover .sc-watch-icon {
      background: var(--purple); border-color: var(--purple); color: white;
    }

    /* === ROW 1 VISUAL: Panel mockup === */
    .sc-panel {
      background: white;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-lg);
      padding: 22px;
      display: grid; grid-template-columns: 168px 1fr;
      gap: 18px;
      box-shadow: 0 30px 80px -30px rgba(110,75,255,0.28);
      min-height: 460px;
    }
    .sc-panel-side {
      background: var(--purple-soft);
      border-radius: var(--radius);
      padding: 18px 14px;
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .sc-panel-logo {
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700; color: var(--ink);
      letter-spacing: -0.02em;
      padding: 6px 8px 14px;
    }
    .sc-panel-logo-mark {
      width: 24px; height: 24px; border-radius: 7px;
      background: var(--purple); color: white;
      font-size: 12px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .sc-menu-item {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 10px; border-radius: 8px;
      font-size: 12px; color: var(--ink-2); font-weight: 500;
      transition: background 0.15s, color 0.15s;
      cursor: pointer;
    }
    .sc-menu-item:hover { background: rgba(255,255,255,0.5); color: var(--ink); }
    .sc-menu-item.active {
      background: white;
      color: var(--purple);
      font-weight: 600;
      box-shadow: 0 2px 8px -4px rgba(110,75,255,0.4);
    }
    .sc-menu-arrow {
      margin-left: auto; color: var(--ink-4); font-size: 10px;
    }
    .sc-panel-user {
      margin-top: auto;
      display: flex; align-items: center; gap: 10px;
      padding: 10px;
      background: white;
      border-radius: 10px;
    }
    .sc-user-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      flex-shrink: 0;
    }
    .sc-user-info { line-height: 1.2; min-width: 0; }
    .sc-user-name { font-size: 11px; font-weight: 600; color: var(--ink); }
    .sc-user-mail { font-size: 9px; color: var(--ink-3); }

    .sc-panel-main {
      display: flex; flex-direction: column;
      gap: 14px;
      min-width: 0;
    }
    .sc-panel-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
    }
    .sc-panel-title { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; }
    .sc-panel-search {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 12px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      font-size: 11px;
      color: var(--ink-4);
      flex: 1; max-width: 200px;
    }
    .sc-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
    .sc-panel-header-left { display: flex; align-items: center; gap: 10px; }
    .sc-panel-header-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: linear-gradient(135deg, #FFC78A, #FF9FCF);
    }
    .sc-panel-header-name { font-size: 11px; font-weight: 600; color: var(--ink); }
    .sc-panel-header-role { font-size: 9px; color: var(--ink-3); }
    .sc-panel-tabs { display: flex; gap: 6px; }
    .sc-tab {
      padding: 6px 12px; border-radius: var(--radius-pill);
      font-size: 10px; font-weight: 600;
      letter-spacing: -0.005em;
    }
    .sc-tab.active { background: var(--purple); color: white; }
    .sc-tab.ghost { background: white; color: var(--ink-2); border: 1px solid var(--line-2); }

    .sc-panel-section-h {
      font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
    }
    .sc-card-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .sc-proj-card {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      display: flex; flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .sc-proj-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .sc-proj-icon {
      width: 22px; height: 22px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: white;
      flex-shrink: 0;
    }
    .sc-proj-icon.i-1 { background: #E5556B; }
    .sc-proj-icon.i-2 { background: #4A6FE5; }
    .sc-proj-icon.i-3 { background: #2DBE85; }
    .sc-proj-icon.i-4 { background: #5B4FCF; }
    .sc-proj-icon.i-5 { background: #FFB35A; }
    .sc-proj-name { font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
    .sc-proj-avatars {
      display: flex; align-items: center;
    }
    .sc-proj-avatars span {
      width: 12px; height: 12px; border-radius: 50%;
      border: 1.5px solid white;
      margin-left: -3px;
      background: linear-gradient(135deg, #FFB89A, #FF7AB8);
    }
    .sc-proj-avatars span:nth-child(2) { background: linear-gradient(135deg, #97B8FF, #5C8AFF); }
    .sc-proj-avatars span:nth-child(3) { background: linear-gradient(135deg, #B5F0DD, #2DBE85); }
    .sc-proj-avatars span:first-child { margin-left: 0; }
    .sc-proj-p {
      font-size: 8px; color: var(--ink-3); line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sc-proj-meta {
      display: flex; justify-content: space-between;
      padding-top: 6px;
      border-top: 1px solid var(--line);
      font-size: 8px; color: var(--ink-3);
    }
    .sc-proj-meta b { color: var(--ink); font-weight: 600; }

    /* === ROW 2 VISUAL: Floating cards over orb === */
    .sc-stack {
      position: relative;
      min-height: 460px;
    }
    .sc-stack-orb {
      position: absolute;
      width: 240px; height: 240px;
      left: -60px; bottom: -40px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 40%, transparent 70%),
        conic-gradient(from 200deg at 50% 50%, #C7B8FF, #FFD0F0, #B8E0FF, #D8C7FF, #C7B8FF);
      box-shadow:
        inset 0 0 60px rgba(255,255,255,0.4),
        inset -25px -35px 60px rgba(110,75,255,0.35),
        0 30px 80px -20px rgba(110,75,255,0.35);
      animation: orbFloat 7s ease-in-out infinite;
      z-index: 0;
    }
    .sc-tasks-card {
      position: absolute;
      left: 20px; top: 30px;
      width: 320px;
      background: white;
      border-radius: var(--radius);
      border: 1px solid var(--line-2);
      padding: 18px 20px;
      box-shadow: var(--shadow-md);
      z-index: 2;
    }
    .sc-tasks-head {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 12px;
    }
    .sc-tasks-head-left { display: flex; align-items: center; gap: 10px; }
    .sc-task-check-box {
      width: 18px; height: 18px;
      border-radius: 5px;
      background: var(--purple);
      display: flex; align-items: center; justify-content: center;
      color: white;
    }
    .sc-tasks-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
    .sc-tasks-dots { color: var(--ink-3); }
    .sc-task-list { display: flex; flex-direction: column; gap: 10px; }
    .sc-task-item {
      display: flex; align-items: center; gap: 12px;
      font-size: 13px;
    }
    .sc-task-item.done { color: var(--ink); font-weight: 600; }
    .sc-task-item.todo { color: var(--ink-4); font-weight: 400; }
    .sc-task-check {
      width: 16px; height: 16px;
      border-radius: 4px;
      border: 1.5px solid var(--line-2);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: transparent;
    }
    .sc-task-item.done .sc-task-check {
      background: var(--purple);
      border-color: var(--purple);
      color: white;
    }
    .sc-task-drag {
      margin-left: auto;
      color: var(--ink-4);
      letter-spacing: -2px;
      font-size: 14px;
    }

    .sc-trusted-pill {
      position: absolute;
      left: 280px; top: -10px;
      display: flex; align-items: center; gap: 12px;
      background: white;
      padding: 10px 18px 10px 12px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-md);
      z-index: 3;
      animation: orbFloat2 6s ease-in-out infinite;
    }
    .sc-trusted-avatars { display: flex; }
    .sc-trusted-avatars span {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2px solid white;
      margin-left: -6px;
      background: linear-gradient(135deg, #FFB89A, #FF7AB8);
    }
    .sc-trusted-avatars span:nth-child(2) { background: linear-gradient(135deg, #97B8FF, #5C8AFF); }
    .sc-trusted-avatars span:nth-child(3) { background: linear-gradient(135deg, #B5F0DD, #2DBE85); }
    .sc-trusted-avatars span:first-child { margin-left: 0; }
    .sc-trusted-text {
      font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
      line-height: 1.25;
    }

    .sc-chart-card {
      position: absolute;
      right: -10px; bottom: 20px;
      width: 380px;
      background: white;
      border-radius: var(--radius);
      border: 1px solid var(--line-2);
      padding: 18px 20px;
      box-shadow: var(--shadow-md);
      z-index: 2;
      animation: orbFloat 7.5s ease-in-out infinite;
    }
    .sc-chart-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .sc-chart-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
    .sc-chart-period {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: var(--purple-soft);
      color: var(--purple);
      font-size: 10px; font-weight: 600;
      border-radius: var(--radius-pill);
      letter-spacing: -0.005em;
    }
    .sc-chart-svg { display: block; width: 100%; height: 120px; }
    .sc-chart-tag {
      background: var(--purple);
      color: white;
      font-size: 10px; font-weight: 600;
      padding: 3px 8px; border-radius: 6px;
      letter-spacing: 0;
    }
    .sc-chart-axis {
      display: flex; justify-content: space-between;
      font-size: 9px; color: var(--ink-4);
      margin-top: 4px;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 920px) {
      .showcase-row { grid-template-columns: 1fr; gap: 56px; }
      .showcase-row + .showcase-row { margin-top: 80px; }
      .showcase-row.reverse > .showcase-text { order: 1; }
      .showcase-row.reverse > .showcase-visual { order: 2; }
      .sc-panel { grid-template-columns: 1fr; }
      .sc-panel-side { flex-direction: row; flex-wrap: wrap; gap: 6px; }
      .sc-panel-user { width: 100%; }
      .sc-card-grid { grid-template-columns: 1fr 1fr; }
      .sc-stack { min-height: 540px; }
      .sc-tasks-card, .sc-trusted-pill, .sc-chart-card { left: 0; right: 0; width: calc(100% - 30px); margin: 0 auto; position: relative; }
      .sc-trusted-pill { width: max-content; margin: 16px auto; }
    }
    .showcase-screen {
      background: linear-gradient(135deg, var(--space) 0%, var(--space-2) 100%);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden; aspect-ratio: 16/10;
      padding: 18px;
      display: grid; grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr auto;
      gap: 10px;
      position: relative;
    }
    .showcase-screen::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(124,92,255,0.3), transparent 50%);
      pointer-events: none;
    }
    .ss-rates {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .ss-rates-head {
      display: grid; grid-template-columns: 22px 1fr 1fr 1fr;
      font-family: var(--font-mono); font-size: 8px; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 4px;
    }
    .ss-rate {
      display: grid; grid-template-columns: 22px 1fr 1fr 1fr;
      align-items: center; gap: 6px;
    }
    .ss-flag { font-size: 12px; }
    .ss-code { font-size: 11px; font-weight: 700; color: white; letter-spacing: -0.01em; }
    .ss-val { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.85); text-align: right; font-variant-numeric: tabular-nums; }

    .ss-side { display: flex; flex-direction: column; gap: 8px; }
    .ss-clock-card {
      background: rgba(124,92,255,0.18);
      border: 1px solid rgba(124,92,255,0.3);
      border-radius: 12px;
      padding: 12px 14px;
      flex: 0 0 50%;
      display: flex; flex-direction: column; justify-content: center;
    }
    .ss-clock-label {
      font-family: var(--font-mono); font-size: 7px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); margin-bottom: 4px;
    }
    .ss-clock-time {
      font-size: 22px; font-weight: 700;
      color: white; letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .ss-news-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 12px 14px;
      flex: 1;
    }
    .ss-news-tag {
      font-family: var(--font-mono); font-size: 7px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--purple-3); margin-bottom: 6px;
    }
    .ss-news-text {
      font-size: 10px; line-height: 1.45;
      color: rgba(255,255,255,0.85); font-weight: 500;
    }

    .ss-ticker {
      grid-column: 1/-1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 8px 12px;
      font-family: var(--font-mono); font-size: 9px;
      color: rgba(255,255,255,0.7); letter-spacing: 0.04em;
      overflow: hidden; display: flex; align-items: center;
    }
    .ss-ticker-track { white-space: nowrap; animation: tickerScroll 25s linear infinite; }

    .showcase-list { display: flex; flex-direction: column; gap: 16px; }
    .showcase-item {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 18px;
      background: white;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .showcase-item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
    .showcase-item-icon {
      width: 40px; height: 40px; border-radius: 12px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px; color: white;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
    }
    .showcase-item-h {
      font-size: 17px; font-weight: 700;
      letter-spacing: -0.02em; color: var(--ink);
      margin-bottom: 4px;
    }
    .showcase-item-p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

    /* ── BLOG / LATEST NEWS ── */
    .blog-page {
      padding: 140px 32px 100px;
    }
    .blog-page-header {
      max-width: 900px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .blog-page-h1 {
      margin-bottom: 16px;
      color: var(--ink);
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 700;
      letter-spacing: -0.03em;
    }
    .blog-page-lead {
      color: var(--ink-3);
      font-size: 18px;
    }
    .blog-section {
      padding: 120px 0;
      background:
        radial-gradient(ellipse 600px 400px at 80% 50%, rgba(217,201,255,0.4), transparent 70%),
        var(--bg);
    }
    .blog-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .blog-card {
      background: white;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex; flex-direction: column;
    }
    .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .blog-thumb {
      aspect-ratio: 16/10;
      position: relative;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .blog-thumb-1 { background: linear-gradient(135deg, #DAC7FF 0%, #B79EFF 60%, #FFC7E5 100%); }
    .blog-thumb-2 { background: linear-gradient(135deg, #C7E0FF 0%, #97B8FF 60%, #DAC7FF 100%); }
    .blog-thumb-3 { background: linear-gradient(135deg, #FFE0BF 0%, #FFC78A 50%, #FF9FCF 100%); }
    .blog-thumb-4 { background: linear-gradient(135deg, #E8DEFF 0%, #C7B8FF 60%, #B79EFF 100%); }
    .blog-thumb-icon {
      width: 96px; height: 96px; border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 50%, transparent 80%),
        conic-gradient(from 200deg at 50% 50%, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
      box-shadow: inset 0 0 30px rgba(255,255,255,0.5), 0 12px 32px -8px rgba(15,8,38,0.3);
    }
    .blog-tag {
      position: absolute; top: 18px; left: 18px;
      background: rgba(255,255,255,0.95);
      color: var(--purple);
      font-size: 11px; font-weight: 600;
      padding: 5px 12px; border-radius: var(--radius-pill);
      letter-spacing: 0;
    }
    .blog-body { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
    .blog-meta {
      font-size: 12px; color: var(--ink-3); font-weight: 500;
      margin-bottom: 12px;
    }
    .blog-meta span { color: var(--ink-4); margin: 0 8px; }
    .blog-h3 {
      font-size: 18px; font-weight: 600;
      letter-spacing: -0.02em; color: var(--ink);
      line-height: 1.3; margin-bottom: 10px;
      flex: 1;
    }
    .blog-p {
      font-size: 14px; color: var(--ink-2); line-height: 1.55;
      margin-bottom: 16px;
    }
    .blog-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--purple); font-weight: 600;
      text-decoration: none;
    }
    .blog-link svg { transition: transform 0.2s; }
    .blog-link:hover svg { transform: translateX(3px); }
    .blog-cta-row {
      margin-top: 40px; text-align: center;
    }
    @media (max-width: 640px) {
      .blog-page {
        padding: 120px 20px 80px;
      }
    }

    /* ── PRICING (light, minimal) ── */
    .pricing-section {
      padding: 120px 0;
      background: var(--bg);
    }
    .pricing-head {
      display: grid; grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: end;
      margin-bottom: 64px;
    }
    .pricing-eyebrow {
      display: inline-block;
      padding: 9px 18px;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-pill);
      font-size: 13px; color: var(--ink);
      font-weight: 500; letter-spacing: -0.005em;
      margin-bottom: 28px;
      background: white;
    }
    .pricing-h2 {
      font-size: clamp(40px, 5.2vw, 72px);
      font-weight: 500;
      line-height: 1.04;
      letter-spacing: -0.035em;
      color: var(--ink);
      text-wrap: balance;
    }
    .pricing-h2 .soft { color: var(--purple-3); font-weight: 500; }

    .billing-toggle {
      display: inline-flex;
      background: var(--purple-soft);
      border-radius: var(--radius-pill);
      padding: 5px;
      align-self: end;
    }
    .billing-toggle button {
      border: none;
      background: transparent;
      padding: 12px 26px;
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.12em;
      color: var(--ink);
      cursor: pointer;
      transition: background 0.25s, color 0.25s;
    }
    .billing-toggle button.active {
      background: var(--purple);
      color: white;
    }

    .pricing-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
    .price-card {
      position: relative;
      background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(110,75,255,0.05), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, #FAF7FF 100%);
      border: 1px solid var(--line-2);
      border-radius: var(--radius-lg);
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      min-width: 0;
      box-shadow: none;
      overflow: hidden;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .price-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--purple-3) 35%, var(--purple) 50%, var(--purple-3) 65%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .price-card:hover {
      border-color: var(--purple-3);
      transform: translateY(-3px);
      box-shadow: 0 22px 50px -22px rgba(110,75,255,0.22);
    }
    .price-card:hover::before { opacity: 1; }

    /* Featured (Standard) plan gets a richer gradient + always-on top accent */
    .price-card.featured {
      background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(110,75,255,0.16), transparent 65%),
        linear-gradient(180deg, #F5EFFF 0%, #FFFFFF 60%, #FAF6FF 100%);
      border-color: var(--purple-3);
      box-shadow: 0 18px 50px -22px rgba(110,75,255,0.25);
    }
    .price-card.featured::before { opacity: 1; }
    .price-name {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .price-tagline {
      font-size: 15px;
      color: var(--ink-3);
      line-height: 1.55;
      font-weight: 400;
      min-height: 48px;
    }
    .price-amount-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding-top: 6px;
    }
    .price-period {
      font-size: 11px;
      color: var(--ink);
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .price-num {
      font-size: 56px;
      font-weight: 600;
      letter-spacing: -0.04em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      background: linear-gradient(135deg, var(--purple) 0%, #9B7BFF 60%, #C8A0FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .price-num-suffix {
      font-size: 18px; color: var(--purple-3); font-weight: 500; margin-left: 2px;
    }
    .price-features {
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(110,75,255,0.06), transparent 70%),
        linear-gradient(180deg, #F1E9FF 0%, #E8DEFF 100%);
      border-radius: var(--radius);
      padding: 26px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .price-feat {
      display: flex; align-items: flex-start; gap: 14px;
      font-size: 14.5px; color: var(--ink); font-weight: 400;
      line-height: 1.45;
    }
    .price-feat-check {
      width: 22px; height: 22px; border-radius: 50%;
      background: linear-gradient(135deg, var(--ink) 0%, #2A1B5C 100%);
      color: white;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
      box-shadow: 0 2px 6px -1px rgba(15,8,38,0.25);
    }
    .price-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 17px 24px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--purple);
      background: transparent;
      color: var(--ink);
      font-family: inherit;
      font-size: 15px; font-weight: 500;
      cursor: pointer;
      letter-spacing: -0.005em;
      transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
    }
    .price-btn:hover {
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      border-color: transparent;
      box-shadow: 0 14px 30px -12px rgba(110,75,255,0.55);
      transform: translateY(-1px);
    }
    .price-card.featured .price-btn {
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      border-color: transparent;
      box-shadow: 0 14px 30px -12px rgba(110,75,255,0.45);
    }
    .price-card.featured .price-btn:hover {
      box-shadow: 0 18px 36px -12px rgba(110,75,255,0.65);
      transform: translateY(-2px);
    }
    .price-btn svg { transition: transform 0.2s; }
    .price-btn:hover svg { transform: translateX(3px); }

    @media (max-width: 720px) {
      .pricing-head { grid-template-columns: 1fr; }
      .billing-toggle { justify-self: start; }
    }

    /* Soft shadows globally tuned down */
    .feature, .metric, .blog-card { box-shadow: 0 1px 2px rgba(15,8,38,0.03); }
    .feature:hover, .metric:hover, .blog-card:hover { box-shadow: 0 12px 28px -16px rgba(15,8,38,0.18); }

    /* legacy — used elsewhere, keep harmless */

    /* ── DARK SPACE SECTION (Quote + CTA + FAQ) ── */
    .space-section {
      position: relative;
      background: radial-gradient(ellipse at center, var(--space-2) 0%, var(--space) 80%);
      color: white;
      padding: 120px 0;
      overflow: hidden;
    }
    .stars {
      position: absolute; inset: 0; pointer-events: none;
    }
    .star {
      position: absolute;
      width: 2px; height: 2px; background: white;
      border-radius: 50%;
      animation: twinkle 4s ease-in-out infinite;
    }

    .space-section .section-eyebrow {
      background: rgba(124,92,255,0.2);
      color: var(--purple-3);
    }
    .space-section .section-h2 { color: white; }
    .space-section .section-h2 .grad {
      background: linear-gradient(135deg, #FFFFFF, #C8A0FF);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .space-section .section-sub { color: rgba(255,255,255,0.7); }

    .quote-block {
      max-width: 880px; margin: 0 auto 100px;
      text-align: center;
    }
    .quote-text {
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 600; line-height: 1.35; letter-spacing: -0.025em;
      color: white; margin-bottom: 28px;
      text-wrap: pretty;
    }
    .quote-text .grad {
      background: linear-gradient(135deg, var(--purple-2), #E5B0FF);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .quote-author {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 8px 20px 8px 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-pill);
    }
    .quote-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; color: white; font-weight: 700;
    }
    .quote-name { font-size: 13px; color: white; font-weight: 600; }
    .quote-role { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 1px; }

    /* FAQ */
    .faq-grid {
      max-width: 760px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 12px;
    }
    .faq-item {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      transition: background 0.2s;
    }
    .faq-item[open] { background: rgba(255,255,255,0.06); }
    .faq-item summary {
      list-style: none; cursor: pointer;
      padding: 22px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      font-size: 16px; font-weight: 600; color: white;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-icon {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(124,92,255,0.25);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: transform 0.25s; color: var(--purple-3);
    }
    .faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--purple); color: white; }
    .faq-body {
      padding: 0 24px 24px;
      font-size: 15px; line-height: 1.6;
      color: rgba(255,255,255,0.7);
    }

    /* ── CTA BAND (above footer) ── */
    .cta-band {
      padding: 96px 0 120px;
      background: var(--space);
    }
    .cta-card {
      max-width: 1136px; margin: 0 auto;
      background: linear-gradient(135deg, #2A1B5C 0%, #4A2BA0 60%, #7C5CFF 120%);
      border-radius: var(--radius-lg);
      padding: 72px 60px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .cta-card::before {
      content: ''; position: absolute;
      width: 280px; height: 280px;
      right: -60px; top: -100px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(255,255,255,0.1) 40%, transparent 70%),
        conic-gradient(from 200deg at 50% 50%, #C7B8FF, #FFD0F0, #B8E0FF, #D8C7FF);
      filter: blur(0.5px);
      opacity: 0.7;
    }
    .cta-card::after {
      content: ''; position: absolute;
      width: 120px; height: 120px;
      left: -40px; bottom: -40px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 70%),
        conic-gradient(from 200deg at 50% 50%, #FFD0F0, #B8E0FF, #C7B8FF);
      opacity: 0.5;
    }
    .cta-inner {
      position: relative; z-index: 2;
      max-width: 600px;
    }
    .cta-h2 {
      font-size: clamp(34px, 4vw, 50px);
      font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
      color: white; margin-bottom: 18px;
      text-wrap: balance;
    }
    .cta-sub { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 28px; }
    .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .cta-actions .btn-primary {
      background: white; color: var(--ink);
    }
    .cta-actions .btn-primary:hover { background: var(--ink); color: white; }
    .cta-actions .btn-light {
      background: transparent; color: white; border-color: rgba(255,255,255,0.3);
    }
    .cta-actions .btn-light:hover { border-color: white; color: white; background: rgba(255,255,255,0.06); }

    /* ── FOOTER (Nexi-style: deep purple, radial glow top) ── */
    footer {
      position: relative;
      background: #0F0524;
      color: rgba(255,255,255,0.55);
      padding: 120px 0 0;
      overflow: hidden;
      border-top: none;
    }
    footer::before {
      content: '';
      position: absolute;
      top: -180px; left: 50%; transform: translateX(-50%);
      width: 900px; height: 500px;
      background: radial-gradient(ellipse, rgba(138,108,255,0.5) 0%, rgba(110,75,255,0.18) 35%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      filter: blur(20px);
    }
    .footer-inner { position: relative; z-index: 1; }
    .footer-grid {
      display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
      gap: 12px;
      padding-bottom: 80px;
    }
    .footer-brand .nav-logo {
      color: white;
      font-size: 24px; gap: 12px;
    }
    .footer-brand .nav-logo-mark {
      width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
    }
    .footer-tagline {
      font-size: clamp(22px, 1.9vw, 28px);
      font-weight: 500;
      letter-spacing: -0.022em;
      line-height: 1.25;
      color: white;
      margin-top: 36px;
      max-width: 280px;
      text-wrap: balance;
    }
    .footer-col {
      min-width: 0;
    }
    .footer-col-h {
      font-size: 20px; color: white; font-weight: 500;
      letter-spacing: -0.02em; margin-bottom: 30px;
    }
    .footer-col ul {
      list-style: none;
      display: flex; flex-direction: column;
      gap: 18px;
    }
    .footer-col a {
      font-size: 15px;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      font-weight: 400;
      letter-spacing: -0.005em;
      transition: color 0.15s;
    }
    .footer-col a:hover { color: white; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 28px 0;
      display: grid; grid-template-columns: 1.4fr 1fr 1fr;
      gap: 80px;
      align-items: center;
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      font-weight: 400;
    }
    .footer-bottom a {
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      transition: color 0.15s;
    }
    .footer-bottom a:hover { color: white; }
    .footer-copyright .accent { color: white; }

    /* ── Utility classes extracted from inline HTML ── */
    .text-right { text-align: right; }
    .text-left { text-align: left; }
    .mod-widget-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 8px;
      color: var(--ink-3);
      font-weight: 600;
    }
    .sc-menu-item-nested { padding-left: 24px; }
    .sc-proj-more {
      color: var(--ink-4);
      font-size: 10px;
    }
    .sc-proj-icon-add { background: var(--purple); }
    .sc-proj-p-accent {
      color: var(--purple);
      font-weight: 600;
    }
    .sc-chart-tag-wrap {
      display: flex;
      justify-content: center;
      margin-top: -100px;
      margin-bottom: 6px;
      position: relative;
      left: 5%;
      pointer-events: none;
    }
    .price-num-custom {
      font-size: 30px;
      letter-spacing: -0.025em;
    }
    .section-head-faq { margin-bottom: 48px; }
    .footer-logo-link { text-decoration: none; }

    /* ── Demo overlay ── */
    .demo-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(15,8,38,0.65);
      backdrop-filter: blur(8px);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .demo-overlay.is-open { display: flex; }
    .demo-overlay-bar {
      width: 100%;
      max-width: 1300px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px 12px;
      background: #FFFFFF;
      border: 1px solid var(--line-2);
      border-bottom: none;
      border-radius: 16px 16px 0 0;
    }
    .demo-overlay-brand,
    .demo-overlay-actions {
      display: flex;
      align-items: center;
    }
    .demo-overlay-brand { gap: 12px; }
    .demo-overlay-actions { gap: 8px; }
    .demo-overlay-logo {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg,#7C5CFF,#9B85FF);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 13px;
    }
    .demo-overlay-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .demo-overlay-note {
      font-size: 12px;
      color: var(--ink-3);
      font-weight: 500;
    }
    .demo-overlay-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line-2);
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .demo-frame {
      width: 100%;
      max-width: 1300px;
      height: 75vh;
      border: 1px solid var(--line-2);
      border-top: none;
      border-radius: 0 0 16px 16px;
      background: #FFFFFF;
    }
    .demo-overlay-help {
      margin-top: 14px;
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      font-weight: 500;
    }

    /* ── Dedicated module pages ── */
    .module-page-hero {
      padding: 150px 0 96px;
      background:
        radial-gradient(ellipse 760px 460px at 72% 28%, rgba(110,75,255,0.22), transparent 62%),
        radial-gradient(ellipse 620px 360px at 18% 82%, rgba(217,201,255,0.5), transparent 62%),
        linear-gradient(180deg, #EDE3FF 0%, var(--bg) 76%);
      overflow: hidden;
    }
    .module-page-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
      gap: 72px;
      align-items: center;
    }
    .module-page-copy {
      max-width: 560px;
    }
    .module-page-h1 {
      font-size: clamp(44px, 5.2vw, 72px);
      font-weight: 650;
      line-height: 1.02;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin: 18px 0 24px;
      text-wrap: balance;
    }
    .module-page-lead {
      font-size: 18px;
      line-height: 1.62;
      color: var(--ink-2);
      margin-bottom: 34px;
    }
    .module-page-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .module-page-visual {
      min-height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .module-page-mock {
      width: min(100%, 560px);
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 56px;
      transform: rotate(-1deg);
    }
    .module-page-mock .mod-display,
    .module-page-mock .mod-widget,
    .module-page-mock .mod-trader {
      transform: scale(1.2);
      transform-origin: center;
    }
    .module-page-section {
      padding: 104px 0 124px;
      background: var(--bg);
    }
    .module-page-content {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      gap: 64px;
      align-items: start;
    }
    .module-page-h2 {
      font-size: clamp(34px, 3.8vw, 52px);
      font-weight: 620;
      line-height: 1.06;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin-top: 16px;
      text-wrap: balance;
    }
    .module-page-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .module-page-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: var(--shadow-sm);
    }
    .module-page-card h3 {
      font-size: 18px;
      font-weight: 650;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 10px;
    }
    .module-page-card p {
      font-size: 14px;
      line-height: 1.58;
      color: var(--ink-2);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 920px) {
      .hero-grid, .showcase-grid { grid-template-columns: 1fr; gap: 60px; }
      .features-grid, .hiw-grid, .pricing-grid, .metrics-grid, .blog-grid { grid-template-columns: 1fr; }
      .module-page-grid, .module-page-content, .module-page-cards { grid-template-columns: 1fr; }
      .module-page-visual { min-height: 360px; }
      .module-page-mock { min-height: 300px; padding: 36px; }
      .module-page-mock .mod-display,
      .module-page-mock .mod-widget,
      .module-page-mock .mod-trader { transform: none; }
      .nav-links { display: none; }
      .footer-grid { grid-template-columns: 1fr; gap: 48px; padding-bottom: 56px; }
      .footer-col { white-space: normal; }
      .footer-bottom { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
      .hero-visual { height: 460px; }
      .hero-card-main { width: 300px; right: 0; }
      .hero-card-widget { width: 240px; top: 220px; }
      .cta-card { padding: 48px 32px; }
      .price-card.featured { transform: none; }
      .hiw-grid::before { display: none; }
    }

    /* ── AUTH PAGE ── */
    .auth-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(ellipse 600px 400px at 80% 20%, rgba(217,201,255,0.5), transparent 65%),
        radial-gradient(ellipse 500px 350px at 20% 80%, rgba(232,223,255,0.55), transparent 65%),
        linear-gradient(180deg, var(--purple-soft) 0%, var(--bg) 50%);
    }

    .auth-card {
      width: 100%;
      max-width: 420px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 40px 36px 36px;
      animation: fadeUp 0.5s ease;
    }

    @media (max-width: 480px) {
      .auth-card {
        padding: 32px 24px 28px;
        max-width: 100%;
      }
    }

    .auth-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 32px;
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.02em;
    }

    .auth-home-link {
      margin-top: 24px;
      font-size: 14px;
      color: var(--ink-3);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.15s;
    }
    .auth-home-link:hover { color: var(--purple); }

    /* Tabs */
    .auth-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--line);
      margin-bottom: 28px;
    }

    .auth-tab {
      flex: 1;
      padding: 12px 8px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-3);
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
      letter-spacing: -0.01em;
    }

    .auth-tab:hover { color: var(--ink-2); }
    .auth-tab-active {
      color: var(--purple);
      border-bottom-color: var(--purple);
    }

    /* Forms */
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .auth-field label {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
      letter-spacing: 0.01em;
    }

    .auth-input {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--line-2);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 15px;
      color: var(--ink);
      outline: none;
      font-family: var(--font-body);
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .auth-input::placeholder { color: var(--ink-4); }
    .auth-input:focus {
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.08);
    }

    .auth-input-error {
      border-color: var(--neg) !important;
      box-shadow: 0 0 0 3px rgba(229,85,107,0.08) !important;
    }

    .auth-error-text {
      font-size: 12px;
      color: var(--neg);
      margin-top: 2px;
      line-height: 1.4;
    }

    .auth-checkbox-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--ink-2);
    }

    .auth-checkbox-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--purple);
      cursor: pointer;
    }

    .auth-link {
      font-size: 13px;
      color: var(--purple);
      text-decoration: none;
      font-weight: 500;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      padding: 0;
    }
    .auth-link:hover { text-decoration: underline; }

    .auth-forgot-row {
      display: flex;
      justify-content: flex-end;
      margin-top: -10px;
    }

    /* Divider */
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--ink-4);
      font-size: 13px;
      font-weight: 500;
    }
    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    /* Social buttons */
    .auth-social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line-2);
      background: var(--card);
      color: var(--ink-2);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      font-family: var(--font-body);
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .auth-social-btn:hover {
      border-color: var(--purple-3);
      color: var(--purple);
      background: var(--purple-soft);
    }

    /* Submit button (extends .btn pattern) */
    .auth-submit {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: none;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-body);
      letter-spacing: -0.005em;
      box-shadow: 0 8px 22px -8px rgba(110,75,255,0.5);
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .auth-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px -8px rgba(110,75,255,0.6);
    }

    /* Footer inside card */
    .auth-form-footer {
      font-size: 13px;
      color: var(--ink-3);
      text-align: center;
      line-height: 1.5;
    }

    .auth-terms {
      font-size: 12px;
      color: var(--ink-4);
      line-height: 1.6;
      text-align: center;
    }
    .auth-terms a {
      color: var(--ink-3);
      text-decoration: underline;
    }

    /* Tab content transition */
    .auth-tab-panel {
      animation: fadeUp 0.3s ease;
    }

    /* ── 404 ERROR PAGE ── */
    .error-404-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(ellipse 600px 400px at 20% 20%, rgba(217,201,255,0.5), transparent 65%),
        radial-gradient(ellipse 500px 350px at 80% 80%, rgba(232,223,255,0.55), transparent 65%),
        linear-gradient(180deg, var(--purple-soft) 0%, var(--bg) 50%);
    }

    .error-404-content {
      text-align: center;
      max-width: 480px;
      animation: fadeUp 0.6s ease;
    }

    .error-404-number {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
      font-family: var(--font-mono);
      font-weight: 700;
      line-height: 1;
    }

    .error-404-digit {
      font-size: 120px;
      color: var(--purple);
      text-shadow: 0 4px 24px rgba(110,75,255,0.3);
      letter-spacing: -0.04em;
    }

    .error-404-zero {
      font-size: 120px;
      color: var(--purple-2);
      text-shadow: 0 4px 24px rgba(110,75,255,0.3);
      position: relative;
    }

    .error-404-zero::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 60%;
      border: 4px solid var(--purple-3);
      border-radius: 50%;
      opacity: 0.4;
    }

    .error-404-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .error-404-desc {
      font-size: 16px;
      color: var(--ink-3);
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .error-404-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      font-size: 15px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      text-decoration: none;
      box-shadow: 0 8px 22px -8px rgba(110,75,255,0.5);
      transition: transform 0.15s, box-shadow 0.2s;
      font-family: var(--font-body);
    }

    .error-404-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px -8px rgba(110,75,255,0.6);
    }

    @media (max-width: 480px) {
      .error-404-digit,
      .error-404-zero {
        font-size: 80px;
      }
      .error-404-title {
        font-size: 20px;
      }
    }

    /* ── DASHBOARD ── */
    .dashboard-layout {
      display: flex;
      min-height: 100vh;
      background: var(--bg);
    }

    .dashboard-sidebar {
      width: 232px;
      background: var(--card);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      padding: 22px 16px;
      position: fixed;
      height: 100vh;
      z-index: 50;
      transition: width 0.18s ease, padding 0.18s ease;
    }

    .dashboard-sidebar.collapsed {
      width: 72px;
      padding: 24px 12px;
    }

    .dashboard-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 8px 18px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: -0.02em;
    }

    .dashboard-sidebar.collapsed .dashboard-logo {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }

    .dashboard-nav {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
    }

    .dashboard-nav-section {
      display: grid;
      gap: 4px;
    }

    .dashboard-nav-section-label {
      margin: 0 8px 2px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
    }

    .dashboard-nav-item {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 40px;
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      color: var(--ink-3);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      cursor: pointer;
      border: none;
      background: none;
      font-family: var(--font-body);
      text-align: left;
    }

    .dashboard-sidebar.collapsed .dashboard-nav-item {
      justify-content: center;
      gap: 0;
      padding-left: 10px;
      padding-right: 10px;
    }

    .dashboard-nav-item:hover {
      background: var(--purple-soft);
      color: var(--purple);
    }

    .dashboard-nav-item.active {
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      box-shadow: 0 4px 14px -4px rgba(110,75,255,0.4);
    }

    .dashboard-nav-icon {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dashboard-sidebar-footer {
      position: relative;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .dashboard-user-trigger {
      width: 100%;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 16px;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 16px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .dashboard-user-trigger:hover,
    .dashboard-user-trigger[aria-expanded="true"] {
      border-color: rgba(110,75,255,0.14);
      background: #FBF9FF;
    }

    .dashboard-sidebar.collapsed .dashboard-user-trigger {
      grid-template-columns: 38px;
      justify-content: center;
      padding: 8px 5px;
    }

    .dashboard-user-avatar {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      flex-shrink: 0;
    }

    .dashboard-user-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .dashboard-user-name,
    .dashboard-user-role {
      overflow: hidden;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dashboard-user-name {
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
    }

    .dashboard-user-role {
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 700;
    }

    .dashboard-user-chevron {
      color: var(--ink-3);
      transition: transform 0.15s;
    }

    .dashboard-user-chevron.open {
      transform: rotate(180deg);
    }

    .dashboard-user-menu {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 10px);
      display: grid;
      gap: 4px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      box-shadow: var(--shadow-lg);
      z-index: 10;
    }

    .dashboard-sidebar.collapsed .dashboard-user-menu {
      left: 58px;
      right: auto;
      bottom: 0;
      width: 180px;
    }

    .dashboard-user-menu-item {
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 10px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    .dashboard-user-menu-item:hover {
      background: var(--purple-soft);
      color: var(--purple);
    }

    .dashboard-user-menu-item.danger {
      color: #DC2626;
    }

    .dashboard-user-menu-item.danger:hover {
      background: #FEF2F2;
      color: #DC2626;
    }

    .dashboard-main {
      flex: 1;
      margin-left: 232px;
      padding: 32px;
      max-width: calc(100% - 232px);
      transition: margin-left 0.18s ease, max-width 0.18s ease;
    }

    .dashboard-layout.sidebar-hidden .dashboard-main {
      margin-left: 72px;
      max-width: calc(100% - 72px);
    }

    .dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }

    .dashboard-header-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .sidebar-toggle-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      color: var(--ink-3);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.2s;
    }

    .sidebar-toggle-btn:hover {
      border-color: var(--purple-3);
      background: #FBF9FF;
      color: var(--purple);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .dashboard-layout.sidebar-hidden .sidebar-toggle-btn {
      border-color: rgba(110,75,255,0.18);
      background: var(--purple-soft);
      color: var(--purple);
    }

    .dashboard-title-icon {
      color: var(--purple);
      flex-shrink: 0;
    }

    .dashboard-header-subtitle {
      font-size: 14px;
      color: var(--ink-3);
    }

    .dashboard-header-user {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dashboard-header-right {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-left: 20px;
    }

    .dashboard-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dashboard-add-btn {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      border: 1px solid transparent;
      border-radius: var(--radius-pill);
      background: var(--ink);
      color: white;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 10px 24px -16px rgba(15,8,38,0.55);
      transition: background 0.15s, box-shadow 0.2s, transform 0.15s;
      white-space: nowrap;
    }

    .dashboard-add-btn:disabled,
    .dashboard-add-btn[aria-disabled="true"] {
      cursor: not-allowed;
    }

    .dashboard-add-btn:hover {
      background: var(--purple);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -14px rgba(110,75,255,0.65);
    }

    .dashboard-header-info {
      text-align: right;
    }

    .dashboard-header-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
    }

    .dashboard-header-role {
      font-size: 12px;
      color: var(--ink-3);
    }

    .dashboard-header-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s;
      flex-shrink: 0;
    }

    .dashboard-header-avatar:hover,
    .dashboard-header-avatar:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -14px rgba(110,75,255,0.7);
      outline: none;
    }

    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    .dashboard-stat-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.15s, box-shadow 0.2s;
    }

    .dashboard-stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .dashboard-stat-value {
      font-size: 32px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.03em;
      margin-bottom: 4px;
    }

    .dashboard-stat-label {
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 8px;
    }

    .dashboard-stat-change {
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      display: inline-block;
    }

    .dashboard-stat-change.positive {
      background: rgba(45, 190, 133, 0.1);
      color: var(--pos);
    }

    .dashboard-stat-change.negative {
      background: rgba(229, 85, 107, 0.1);
      color: var(--neg);
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }

    .dashboard-content {
      display: grid;
      gap: 32px;
    }

    .branch-scope {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow-sm);
    }

    .branch-scope-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .branch-scope-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .branch-scope-label svg,
    .branch-badge svg {
      color: var(--purple);
      flex-shrink: 0;
    }

    .branch-scope-helper {
      color: var(--ink-3);
      font-size: 12px;
      line-height: 1.4;
    }

    .branch-scope-select {
      width: min(320px, 100%);
      min-height: 42px;
      padding: 9px 38px 9px 13px;
      border: 1.5px solid var(--line-2);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--ink);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
    }

    .branch-scope-select:focus {
      outline: none;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12);
    }

    .dashboard-sidebar-branch {
      display: grid;
      gap: 10px;
      margin: 0 0 18px;
      padding: 12px;
      border-radius: 18px;
      background: #FBF9FF;
    }

    .dashboard-sidebar-branch .branch-scope-copy {
      gap: 0;
    }

    .dashboard-sidebar-branch .branch-scope-label {
      font-size: 12px;
      line-height: 1.25;
      white-space: nowrap;
    }

    .dashboard-sidebar-branch .branch-scope-select {
      width: 100%;
      min-height: 38px;
      padding: 8px 34px 8px 11px;
      border-radius: 12px;
      background: white;
      font-size: 13px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .branch-badge {
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border: 1px solid rgba(110,75,255,0.14);
      border-radius: 999px;
      background: var(--purple-soft);
      color: var(--ink-2);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
    }

    .dashboard-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }

    .dashboard-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .dashboard-card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
    }

    .dashboard-card-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      color: var(--purple);
      text-decoration: none;
      font-weight: 500;
    }

    .dashboard-card-link:hover {
      text-decoration: underline;
    }

    .reservations-trend-card,
    .dashboard-screens-card {
      position: relative;
      min-height: 320px;
      overflow: hidden;
    }

    .dashboard-screens-card.has-empty-overlay .dashboard-card-header,
    .dashboard-screens-card.has-empty-overlay .dashboard-screens-list {
      opacity: 0.36;
    }

    .reservations-trend-subtitle {
      margin-top: 4px;
      color: var(--ink-3);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
    }

    .reservations-trend-chart {
      position: relative;
      display: grid;
      gap: 14px;
    }

    .reservations-trend-chart svg {
      width: 100%;
      height: 180px;
      overflow: visible;
    }

    .reservations-trend-grid-line {
      stroke: rgba(110,75,255,0.12);
      stroke-width: 1;
    }

    .reservations-trend-area {
      fill: url(#reservationsTrendFill);
    }

    .reservations-trend-line {
      fill: none;
      stroke: var(--purple);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .reservations-trend-points {
      position: absolute;
      left: 18px;
      right: 18px;
      top: 18px;
      height: 144px;
      pointer-events: none;
    }

    .reservations-trend-point {
      position: absolute;
      width: 14px;
      height: 14px;
      border: 4px solid var(--purple);
      border-radius: 999px;
      background: var(--card);
      transform: translate(-50%, 50%);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.08);
    }

    .reservations-trend-bars {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 7px;
    }

    .reservations-trend-day {
      min-width: 0;
      display: grid;
      gap: 3px;
      justify-items: center;
      padding: 8px 4px;
      border: 1px solid rgba(110,75,255,0.12);
      border-radius: 10px;
      background: var(--purple-soft);
    }

    .reservations-trend-day span {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
    }

    .reservations-trend-day small {
      color: var(--ink-3);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .reservations-trend-overlay,
    .dashboard-card-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(255,255,255,0.78);
      backdrop-filter: blur(3px);
      z-index: 3;
    }

    .reservations-trend-overlay-content,
    .dashboard-card-overlay-content {
      width: min(420px, 100%);
      display: grid;
      justify-items: center;
      gap: 12px;
      text-align: center;
    }

    .reservations-trend-overlay-content h3,
    .dashboard-card-overlay-content h3 {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
    }

    .reservations-trend-overlay-content p,
    .dashboard-card-overlay-content p {
      color: var(--ink-3);
      font-size: 13px;
      line-height: 1.55;
    }

    .dashboard-screens-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dashboard-screen-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: var(--bg);
      transition: border-color 0.15s;
    }

    .dashboard-screen-add-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px dashed var(--line-2);
      background: rgba(255,255,255,0.55);
      color: var(--ink);
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }

    .dashboard-screen-add-row:hover {
      background: var(--card);
      border-color: var(--purple-3);
      transform: translateY(-1px);
    }

    .dashboard-screen-add-icon {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      background: var(--purple-soft);
      color: var(--purple);
    }

    .dashboard-screen-item:hover {
      border-color: var(--purple-3);
    }

    .dashboard-screen-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dashboard-screen-info {
      flex: 1;
      min-width: 0;
    }

    .dashboard-screen-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .dashboard-screen-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 12px;
      color: var(--ink-3);
    }

    .dashboard-screen-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .dashboard-screen-status {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .dashboard-screen-status.online {
      background: rgba(45, 190, 133, 0.1);
      color: var(--pos);
    }

    .dashboard-actions-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dashboard-action-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: var(--ink);
      transition: background 0.15s;
    }

    .dashboard-action-item:hover {
      background: var(--purple-soft);
    }

    .dashboard-action-icon {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--purple);
      flex-shrink: 0;
    }

    .dashboard-action-info {
      min-width: 0;
    }

    .dashboard-action-label {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .dashboard-action-desc {
      font-size: 12px;
      color: var(--ink-3);
    }

    @media (max-width: 1024px) {
      .dashboard-sidebar {
        width: 212px;
      }
      .dashboard-main {
        margin-left: 212px;
        max-width: calc(100% - 212px);
      }
      .dashboard-sidebar.collapsed {
        width: 72px;
      }
      .dashboard-layout.sidebar-hidden .dashboard-main {
        margin-left: 72px;
        max-width: calc(100% - 72px);
      }
      .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
      }
      .dashboard-grid {
        grid-template-columns: 1fr;
      }
      .trader-workspace.has-details {
        grid-template-columns: 1fr;
      }
      .trader-pair-panel {
        position: static;
      }
      .trader-sortable-card {
        grid-column: span 6;
      }
      .trader-sortable-card-trader-table,
      .trader-sortable-card-market-summary,
      .trader-sortable-card-chart {
        grid-column: 1 / -1;
      }
      .trader-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 768px) {
      .dashboard-sidebar {
        display: none;
      }
      .dashboard-main {
        margin-left: 0;
        max-width: 100%;
        padding: 20px;
      }
      .dashboard-layout.sidebar-hidden .dashboard-main {
        margin-left: 0;
        max-width: 100%;
      }
      .dashboard-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
      }
      .dashboard-header-right {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
      }
      .dashboard-stats {
        grid-template-columns: 1fr;
      }
      .dashboard-grid {
        grid-template-columns: 1fr;
      }
      .branch-scope {
        align-items: stretch;
        flex-direction: column;
      }
      .branch-scope-select {
        width: 100%;
      }
    }

    /* ── DASHBOARD: EKRANY ── */

    /* ── DASHBOARD: PLACOWKI ── */
    .branch-management-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .branch-feedback {
      margin-bottom: 20px;
      padding: 13px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--card);
      color: var(--ink-2);
      font-size: 14px;
    }

    .branch-feedback.success {
      border-color: rgba(45,190,133,0.24);
      background: rgba(45,190,133,0.1);
    }

    .branch-feedback.error {
      border-color: rgba(229,85,107,0.24);
      background: rgba(229,85,107,0.1);
      color: var(--neg);
    }

    .branch-feedback.warning {
      border-color: rgba(245,158,11,0.24);
      background: rgba(245,158,11,0.1);
      color: #b45309;
    }

    .branch-create-form {
      display: grid;
      gap: 18px;
      margin-bottom: 20px;
    }

    .branch-create-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .branch-create-grid .dashboard-settings-field span {
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 600;
    }

    .dashboard-select-trigger {
      width: 100%;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--ink);
      font: inherit;
      font-size: 14px;
      line-height: 1.3;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .dashboard-select-trigger:hover {
      border-color: var(--line-2);
      background: var(--card);
    }

    .dashboard-select-trigger:focus,
    .dashboard-select-trigger[data-state="open"] {
      outline: none;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110, 75, 255, 0.12);
    }

    .dashboard-select-trigger svg {
      flex: 0 0 auto;
      color: var(--ink-3);
    }

    .dashboard-select-content {
      z-index: 1001;
      min-width: var(--radix-select-trigger-width);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--card);
      color: var(--ink);
      box-shadow: var(--shadow-md);
    }

    .dashboard-select-viewport {
      padding: 6px;
    }

    .dashboard-select-item {
      position: relative;
      min-height: 36px;
      display: flex;
      align-items: center;
      padding: 8px 10px 8px 32px;
      border-radius: 8px;
      color: var(--ink-2);
      font-size: 14px;
      line-height: 1.3;
      cursor: pointer;
      outline: none;
      user-select: none;
    }

    .dashboard-select-item[data-highlighted] {
      background: var(--purple-soft);
      color: var(--ink);
    }

    .dashboard-select-item-indicator {
      position: absolute;
      left: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--purple);
    }

    .branch-create-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .branch-secondary-btn {
      min-height: 40px;
      padding: 9px 14px;
      border: 1px solid var(--line-2);
      border-radius: var(--radius-pill);
      background: var(--card);
      color: var(--ink-2);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .branch-empty {
      margin-bottom: 20px;
      color: var(--ink-3);
      font-size: 14px;
    }

    .reservation-empty-setup {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-bottom: 20px;
      padding: 42px 24px;
      text-align: center;
    }

    .reservation-empty-icon {
      width: 64px;
      height: 64px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--purple-soft);
      color: var(--purple);
      box-shadow: var(--shadow-sm);
    }

    .reservation-empty-copy {
      max-width: 560px;
      display: grid;
      gap: 8px;
    }

    .reservation-empty-copy h2 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.25;
      font-weight: 800;
    }

    .reservation-empty-copy p {
      margin: 0;
      color: var(--ink-3);
      font-size: 14px;
      line-height: 1.7;
    }

    .reservation-empty-action {
      min-width: 190px;
      justify-content: center;
      text-decoration: none;
    }

    .employee-form {
      overflow: hidden;
    }

    .employee-form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .employee-form-header h3 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 800;
    }

    .employee-icon-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--card);
      color: var(--ink-3);
      cursor: pointer;
    }

    .employee-icon-btn:hover {
      color: var(--ink);
      border-color: var(--line-2);
    }

    .employee-form-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .employee-branch-fieldset {
      margin: 0;
      padding: 0;
      border: 0;
      min-inline-size: 0;
    }

    .employee-branch-fieldset legend {
      margin-bottom: 10px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }

    .employee-permissions-matrix {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
    }

    .employee-permissions-row {
      min-width: 780px;
      display: grid;
      grid-template-columns: minmax(190px, 1.5fr) repeat(6, minmax(86px, 1fr));
      align-items: center;
      border-top: 1px solid var(--line);
    }

    .employee-permissions-row:first-child {
      border-top: 0;
    }

    .employee-permissions-row > div,
    .employee-permission-cell {
      min-height: 52px;
      display: flex;
      align-items: center;
      padding: 10px 12px;
    }

    .employee-permissions-head {
      background: var(--card);
      color: var(--ink-2);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .employee-permissions-head > div:not(:first-child),
    .employee-permission-cell {
      justify-content: center;
      text-align: center;
    }

    .employee-permissions-branch {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .employee-permissions-branch strong {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .employee-permissions-branch span {
      color: var(--ink-3);
      font-size: 12px;
      font-weight: 600;
    }

    .employee-permission-cell {
      cursor: pointer;
    }

    .employee-permission-cell input {
      appearance: none;
      width: 22px;
      height: 22px;
      margin: 0;
      border: 1.5px solid var(--line-2);
      border-radius: 7px;
      background: var(--card);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .employee-permission-cell input:checked {
      border-color: var(--purple);
      background: var(--purple);
      box-shadow: inset 0 0 0 5px var(--card);
    }

    .employee-permission-cell input:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(110, 75, 255, 0.14);
    }

    .employee-list {
      display: grid;
      gap: 14px;
    }

    .employee-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px 24px;
    }

    .employee-card-main {
      min-width: 0;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
    }

    .employee-card-main .branch-card-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
    }

    .employee-card-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .employee-card-copy .dashboard-card-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .employee-card-copy p {
      margin: 0;
      color: var(--ink-3);
      font-size: 13px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .employee-card-copy p:first-of-type {
      color: var(--ink-2);
      font-weight: 700;
    }

    .employee-branch-tags {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-left: 68px;
    }

    .branch-card-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .employee-action-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 13px;
      border: 1px solid rgba(110,75,255,0.18);
      border-radius: var(--radius-pill);
      background: var(--card);
      color: var(--purple);
      text-decoration: none;
      font-weight: 800;
    }

    .employee-action-btn:hover {
      text-decoration: none;
      border-color: var(--purple-3);
      background: var(--purple-soft);
    }

    .employee-delete-action {
      border-color: rgba(220,38,38,0.18);
      background: #FFF7F7;
      color: #E24A62;
    }

    .employee-delete-action:hover {
      border-color: rgba(220,38,38,0.28);
      background: #FEF2F2;
      color: #DC2626;
    }

    .employee-status-btn {
      border: 0;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    }

    .employee-status-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px -14px rgba(15,8,38,0.45);
    }

    .employee-status-btn:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    .branch-card {
      display: grid;
      gap: 20px;
    }

    .branch-card-header {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
    }

    .branch-card-icon {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--purple-soft);
      color: var(--purple);
    }

    .branch-card-address {
      margin-top: 3px;
      color: var(--ink-3);
      font-size: 12px;
    }

    .branch-card-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .branch-card-metric {
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--ink-3);
      font-size: 12px;
    }

    .branch-card-metric span {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 21px;
      font-weight: 700;
      line-height: 1;
    }

    .branch-rate-profile {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(110,75,255,0.14);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 600;
    }

    .branch-rate-profile svg {
      color: var(--purple);
      flex-shrink: 0;
    }

    .branch-pairs-box {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
    }

    .branch-pairs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .branch-pairs-header > div {
      display: grid;
      gap: 3px;
    }

    .branch-pairs-header strong {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }

    .branch-pairs-header span {
      color: var(--ink-3);
      font-size: 12px;
      font-weight: 600;
    }

    .branch-pairs-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .branch-pairs-list > span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 11px;
      border: 1px solid rgba(110, 75, 255, 0.18);
      border-radius: var(--radius-pill);
      background: var(--card);
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
    }

    .branch-pair-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      white-space: nowrap;
    }

    .branch-pair-currency {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .branch-pair-currency strong {
      font-size: inherit;
      font-weight: 800;
      letter-spacing: 0;
    }

    .branch-pair-separator {
      color: var(--ink-3);
      font-weight: 700;
    }

    .branch-pairs-list em {
      width: 100%;
      padding: 14px;
      border: 1px dashed var(--line-2);
      border-radius: var(--radius-sm);
      color: var(--ink-3);
      font-size: 13px;
      font-style: normal;
      font-weight: 600;
      text-align: center;
    }

    .branch-pairs-editor {
      display: grid;
      gap: 14px;
    }

    .branch-pairs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
      gap: 10px;
    }

    .branch-pair-toggle {
      min-height: 44px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--card);
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    .branch-pair-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .branch-pair-toggle:hover {
      border-color: var(--purple-3);
      color: var(--ink);
    }

    .branch-pair-toggle.active {
      border-color: rgba(110, 75, 255, 0.35);
      background: var(--purple-soft);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px rgba(110, 75, 255, 0.08);
    }

    .branch-pair-check {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1.5px solid var(--line-2);
      border-radius: 7px;
      color: transparent;
      background: var(--bg);
    }

    .branch-pair-toggle.active .branch-pair-check {
      border-color: var(--purple);
      background: var(--purple);
      color: white;
    }

    .branch-pairs-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .branch-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .employee-action-btn {
      min-height: 36px;
      padding: 8px 12px;
      border: 1px solid rgba(110,75,255,0.16);
      border-radius: var(--radius-pill);
      background: #FBF9FF;
      color: var(--purple);
      font-family: var(--font-body);
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.2s;
    }

    .employee-action-btn:hover {
      border-color: var(--purple-3);
      background: var(--purple-soft);
      color: var(--purple);
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .employee-delete-action {
      border-color: rgba(229,85,107,0.18);
      background: rgba(229,85,107,0.08);
      color: var(--neg);
    }

    .employee-delete-action:hover {
      border-color: rgba(229,85,107,0.28);
      background: rgba(229,85,107,0.12);
      color: var(--neg);
    }

    .dashboard-add-btn.danger {
      background: var(--neg);
      box-shadow: 0 10px 24px -16px rgba(229,85,107,0.65);
    }

    .dashboard-add-btn.danger:hover {
      background: #d63f57;
      box-shadow: 0 12px 24px -14px rgba(229,85,107,0.7);
    }

    /* ── DASHBOARD: WALUTY ── */
    .dashboard-currencies-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .dashboard-currency-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.15s, box-shadow 0.2s;
    }

    .dashboard-currency-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .dashboard-currency-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .dashboard-currency-code {
      font-size: 13px;
      font-weight: 700;
      color: var(--purple);
      background: var(--purple-soft);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }

    .dashboard-currency-trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 600;
    }

    .dashboard-currency-trend.up {
      color: var(--pos);
    }

    .dashboard-currency-trend.down {
      color: var(--neg);
    }

    .dashboard-currency-trend.flat {
      color: var(--ink-3);
    }

    .dashboard-currency-rate {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }

    .dashboard-currency-name {
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 12px;
    }

    /* ── DASHBOARD: REZERWACJE ── */
    .dashboard-table-container {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      overflow-x: auto;
      overflow-y: hidden;
    }

    .dashboard-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .dashboard-table th {
      background: var(--bg);
      padding: 14px 20px;
      text-align: left;
      font-weight: 600;
      color: var(--ink-3);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--line);
    }

    .dashboard-table td {
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
    }

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

    .dashboard-table tr:hover td {
      background: var(--purple-soft);
    }

    .dashboard-table-id {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--purple);
      font-weight: 500;
    }

    .dashboard-table-amount {
      font-weight: 600;
      color: var(--ink);
    }

    .dashboard-screen-status.pending {
      background: rgba(247, 181, 56, 0.1);
      color: #f7b538;
    }

    .dashboard-screen-status.negative {
      background: rgba(229, 85, 107, 0.1);
      color: var(--neg);
    }

    /* ── DASHBOARD: USTAWIENIA KURSÓW ── */
    .rate-settings-mode-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      padding: 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }

    .rate-settings-mode-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-2);
      white-space: nowrap;
    }

    .rate-settings-mode-options {
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 4px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
    }

    .rate-settings-mode-btn {
      min-height: 36px;
      padding: 8px 14px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink-3);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, box-shadow 0.2s;
      white-space: nowrap;
    }

    .rate-settings-mode-btn:hover {
      color: var(--purple);
    }

    .rate-settings-mode-btn.active {
      background: var(--card);
      color: var(--ink);
      box-shadow: 0 1px 2px rgba(15,8,38,0.06), 0 8px 18px -12px rgba(110,75,255,0.32);
    }

    .rate-settings-grid {
      align-items: start;
      grid-template-columns: minmax(0, 2fr) minmax(280px, 0.75fr);
    }

    .rate-settings-table-wrap,
    .rate-settings-summary-wrap {
      min-width: 0;
    }

    .rate-settings-table-card {
      border-color: rgba(110,75,255,0.14);
    }

    .rate-settings-table-card .dashboard-table {
      min-width: 860px;
    }

    .rate-settings-table-card .dashboard-table th {
      background: #FBF9FF;
    }

    .rate-settings-table-card .dashboard-table td {
      vertical-align: top;
    }

    .rate-settings-currency-name {
      margin-top: 3px;
      font-size: 12px;
      color: var(--ink-3);
      white-space: nowrap;
    }

    .rate-settings-input {
      width: 132px;
      min-height: 38px;
      padding: 8px 10px;
      border: 1.5px solid var(--line-2);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .rate-settings-input:focus {
      outline: none;
      background: white;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12);
    }

    .rate-settings-input.error {
      border-color: var(--neg);
      box-shadow: 0 0 0 3px rgba(229,85,107,0.1);
    }

    .rate-settings-spread-control {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 190px;
    }

    .rate-settings-spread-input {
      width: 104px;
      flex: 1;
    }

    .rate-settings-unit-select {
      width: 72px;
      min-height: 38px;
      padding: 8px 9px;
      border: 1.5px solid var(--line-2);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink-2);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .rate-settings-unit-select:focus {
      outline: none;
      background: white;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12);
    }

    .rate-settings-error-text {
      max-width: 180px;
      margin-top: 6px;
      color: var(--neg);
      font-size: 11px;
      line-height: 1.35;
    }

    .rate-settings-computed {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .rate-settings-buy {
      color: var(--pos);
    }

    .rate-settings-sell {
      color: var(--neg);
    }

    .rate-preview-card {
      position: sticky;
      top: 24px;
    }

    .rate-preview-stats {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

    .rate-preview-stat {
      padding: 14px;
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
    }

    .rate-preview-stat-value {
      color: var(--ink);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .rate-preview-branch-name {
      font-size: 16px;
      line-height: 1.3;
    }

    .rate-preview-stat-label {
      margin-top: 5px;
      color: var(--ink-3);
      font-size: 12px;
      line-height: 1.35;
    }

    .rate-save-btn {
      width: 100%;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 16px;
      border: 0;
      border-radius: var(--radius-pill);
      background: var(--ink);
      color: white;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
    }

    .rate-save-btn:hover {
      background: var(--purple);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -14px rgba(110,75,255,0.65);
    }

    .rate-save-btn.saved {
      background: var(--pos);
      box-shadow: 0 12px 24px -14px rgba(45,190,133,0.65);
    }

    /* ── DASHBOARD: PANEL TRADERA ── */
    .trader-live-status {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid rgba(45,190,133,0.18);
      border-radius: var(--radius-pill);
      background: rgba(45,190,133,0.09);
      color: var(--pos);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .trader-header-btn {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      background: var(--card);
      color: var(--ink-2);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.2s;
      white-space: nowrap;
    }

    .trader-header-btn:hover {
      border-color: var(--purple-3);
      background: #FBF9FF;
      color: var(--purple);
      transform: translateY(-1px);
    }

    .trader-header-btn.active {
      border-color: rgba(45,190,133,0.22);
      background: rgba(45,190,133,0.1);
      color: var(--pos);
    }

    .trader-header-btn.primary {
      border-color: transparent;
      background: var(--ink);
      color: white;
      box-shadow: 0 10px 24px -16px rgba(15,8,38,0.55);
    }

    .trader-header-btn.primary:hover {
      background: var(--purple);
      color: white;
      box-shadow: 0 12px 24px -14px rgba(110,75,255,0.65);
    }

    .trader-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      padding: 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }

    .trader-toolbar-actions,
    .trader-toolbar-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .trader-toolbar-meta {
      justify-content: flex-end;
    }

    .trader-toolbar-btn,
    .trader-modal-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 13px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink-2);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.2s;
      white-space: nowrap;
    }

    .trader-toolbar-btn:hover,
    .trader-modal-btn:hover {
      border-color: var(--purple-3);
      color: var(--purple);
      transform: translateY(-1px);
    }

    .trader-toolbar-btn.active {
      border-color: rgba(45,190,133,0.22);
      background: rgba(45,190,133,0.1);
      color: var(--pos);
    }

    .trader-toolbar-btn.primary,
    .trader-modal-btn.primary {
      border-color: transparent;
      background: var(--ink);
      color: white;
      box-shadow: 0 10px 24px -16px rgba(15,8,38,0.55);
    }

    .trader-toolbar-btn.primary:hover,
    .trader-modal-btn.primary:hover {
      background: var(--purple);
      color: white;
      box-shadow: 0 12px 24px -14px rgba(110,75,255,0.65);
    }

    .trader-modal-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .trader-card-count {
      color: var(--ink-3);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .trader-panel-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 64px;
      gap: 16px;
      align-items: stretch;
    }

    .trader-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .trader-workspace.has-details {
      grid-template-columns: minmax(0, 1fr) 320px;
    }

    .trader-workspace-main {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .trader-sortable-card {
      min-width: 0;
      position: relative;
      grid-column: span 4;
      min-height: 0;
    }

    .trader-sortable-card-trader-table,
    .trader-sortable-card-market-summary,
    .trader-sortable-card-chart {
      grid-column: 1 / -1;
    }

    .trader-card-width-third {
      grid-column: span 4;
    }

    .trader-card-width-half {
      grid-column: span 6;
    }

    .trader-card-width-two-thirds {
      grid-column: span 8;
    }

    .trader-card-width-full {
      grid-column: 1 / -1;
    }

    .trader-sortable-card.dragging {
      z-index: 50;
      border-radius: var(--radius);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.18), var(--shadow-md);
    }

    .trader-sortable-card .trader-card,
    .trader-sortable-card .dashboard-card,
    .trader-sortable-card .trader-ticker {
      height: 100%;
    }

    .trader-sortable-card-content {
      height: 100%;
      min-height: 0;
    }

    .trader-sortable-card-content > * {
      height: 100%;
    }

    .trader-card-edit-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: grid;
      grid-template-columns: 32px 1fr 32px;
      grid-template-rows: 32px 1fr 32px;
      gap: 8px;
      padding: 8px;
      border-radius: var(--radius);
      background: rgba(15,8,38,0.04);
      pointer-events: none;
    }

    .trader-card-config-floating-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 9;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.94);
      color: var(--ink-3);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s, color 0.15s, border-color 0.15s;
    }

    .trader-sortable-card:hover .trader-card-config-floating-btn,
    .trader-card-config-floating-btn:focus-visible {
      opacity: 1;
    }

    .trader-card-config-floating-btn:hover {
      border-color: var(--purple-3);
      color: var(--purple);
    }

    .trader-card-edit-btn {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.94);
      color: var(--ink-3);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      pointer-events: auto;
      transition: color 0.15s, background 0.15s, border-color 0.15s;
    }

    .trader-card-drag-btn {
      cursor: grab;
    }

    .trader-card-remove-btn {
      grid-column: 3;
      justify-self: end;
    }

    .trader-card-drag-btn:active {
      cursor: grabbing;
    }

    .trader-card-edit-btn:hover {
      background: white;
      border-color: var(--purple-3);
      color: var(--purple);
    }

    .trader-card-remove-btn:hover {
      border-color: rgba(229,85,107,0.22);
      background: rgba(229,85,107,0.08);
      color: var(--neg);
    }

    .trader-card-edit-content {
      height: 100%;
      pointer-events: none;
    }

    .trader-card-resize-handle {
      grid-column: 3;
      grid-row: 3;
      justify-self: end;
      align-self: end;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.96);
      color: var(--ink-3);
      box-shadow: var(--shadow-sm);
      pointer-events: auto;
      cursor: nwse-resize;
      transition: color 0.15s, background 0.15s, border-color 0.15s;
    }

    .trader-card-resize-handle:hover {
      background: white;
      border-color: var(--purple-3);
      color: var(--purple);
    }

    .trader-ticker {
      display: flex;
      gap: 8px;
      margin-bottom: 0;
      overflow-x: auto;
      scrollbar-width: thin;
      min-height: 0;
    }

    .trader-ticker-item {
      min-width: 0;
      width: 174px;
      flex: 0 0 174px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 5px 10px;
      padding: 9px 12px;
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .trader-ticker-pair {
      display: block;
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 800;
    }

    .trader-pair-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

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

    .trader-pair-label.compact {
      gap: 6px;
    }

    .trader-pair-flags {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      font-size: 15px;
      letter-spacing: -5px;
      padding-right: 5px;
      filter: saturate(1.05);
    }

    .trader-pair-label.compact .trader-pair-flags {
      font-size: 13px;
      letter-spacing: -4px;
      padding-right: 4px;
    }

    .trader-pair-code {
      display: inline-flex;
      align-items: baseline;
      gap: 1px;
      min-width: 0;
      color: inherit;
      font-weight: 800;
    }

    .trader-pair-code span {
      color: var(--ink-4);
      font-weight: 700;
    }

    .trader-ticker-rate {
      display: block;
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .trader-ticker-change,
    .trader-card-trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-top: 0;
      font-size: 11px;
      font-weight: 700;
    }

    .trader-ticker-change.up,
    .trader-card-trend.up,
    .trader-summary-stat-value.up {
      color: var(--pos);
    }

    .trader-ticker-change.down,
    .trader-card-trend.down,
    .trader-summary-stat-value.down {
      color: var(--neg);
    }

    .trader-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .trader-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 18px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s;
    }

    .trader-card:hover {
      border-color: var(--purple-3);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .trader-card.selected {
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12), var(--shadow-md);
    }

    .trader-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .trader-card-pair {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .trader-card-rates {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .trader-card-bid {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }

    .price-change-value {
      display: inline-flex;
      align-items: baseline;
      color: inherit;
      font-family: inherit;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .price-change-fragment {
      color: inherit;
      border-radius: 4px;
      padding: 0 1px;
      margin-left: -1px;
      transition: color 0.18s ease, background-color 0.18s ease;
    }

    .price-change-fragment.up {
      color: var(--pos);
      background: rgba(45, 190, 133, 0.12);
    }

    .price-change-fragment.down {
      color: var(--neg);
      background: rgba(229, 85, 107, 0.12);
    }

    .trader-card-ask {
      display: grid;
      gap: 3px;
      color: var(--ink-2);
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .trader-card-ask-label {
      color: var(--ink-4);
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .trader-sparkline {
      height: 62px;
      margin-top: auto;
      overflow: hidden;
      border-radius: var(--radius-sm);
      background:
        linear-gradient(180deg, rgba(250, 249, 255, 0.96), rgba(255, 255, 255, 0.98));
      border: 1px solid rgba(116, 94, 173, 0.08);
    }

    .trader-sparkline svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .trader-sparkline-baseline {
      stroke: rgba(116, 94, 173, 0.14);
      stroke-width: 1;
      stroke-dasharray: 4 5;
      vector-effect: non-scaling-stroke;
    }

    .trader-sparkline-line-shadow {
      stroke-width: 5;
      stroke-linejoin: round;
      stroke-linecap: round;
      opacity: 0.12;
      vector-effect: non-scaling-stroke;
    }

    .trader-sparkline-line {
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .trader-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .trader-summary-stat {
      padding: 14px;
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
    }

    .trader-summary-stat-value {
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .trader-summary-stat-label {
      margin-top: 5px;
      color: var(--ink-3);
      font-size: 12px;
      line-height: 1.35;
    }

    .trader-timestamp {
      color: var(--ink-3);
      font-size: 12px;
      text-align: right;
    }

    .trader-table-card {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-color: rgba(110,75,255,0.13);
    }

    .trader-table-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 9px 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(251, 249, 255, 0.62);
    }

    .trader-table-title {
      min-width: 0;
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
    }

    .trader-table-subtitle {
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .trader-table-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;
    }

    .trader-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 13px;
    }

    .trader-table th,
    .trader-table td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
    }

    .trader-table th:not(:first-child),
    .trader-table td:not(:first-child) {
      text-align: right;
    }

    .trader-table-card.compact .trader-table th,
    .trader-table-card.compact .trader-table td {
      padding-top: 9px;
      padding-bottom: 9px;
    }

    .trader-nbp-table {
      min-width: 980px;
    }

    .trader-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #FBF9FF;
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .trader-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .trader-table tbody tr:hover td {
      background: rgba(232,222,255,0.32);
    }

    .trader-table tbody tr {
      cursor: pointer;
    }

    .trader-table tbody tr.selected td {
      background: rgba(110,75,255,0.1);
    }

    .trader-nbp-table th:first-child,
    .trader-nbp-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      background: #FBF9FF;
    }

    .trader-nbp-table th:first-child {
      z-index: 3;
    }

    .trader-table-pair {
      color: var(--ink);
      font-weight: 800;
    }

    .trader-nbp-currency {
      min-width: 220px;
      text-align: left;
      white-space: normal;
    }

    .trader-nbp-currency-code {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--ink);
      font-weight: 800;
    }

    .trader-nbp-currency-name {
      display: block;
      margin-top: 4px;
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 700;
    }

    .trader-table-rate {
      color: var(--ink);
      font-family: var(--font-mono);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .trader-table td:nth-child(2) {
      color: var(--ink);
    }

    .trader-table td:nth-child(3) {
      color: var(--ink);
    }

    .trader-table-change {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 800;
    }

    .trader-table-change.up {
      color: var(--pos);
    }

    .trader-table-change.down {
      color: var(--neg);
    }

    .trader-nbp-rate {
      color: var(--ink);
      font-family: var(--font-mono);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .trader-nbp-rate-latest {
      font-weight: 800;
    }

    .trader-nbp-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      padding: 24px;
      color: var(--ink-3);
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }

    .trader-nbp-state-error {
      color: var(--neg);
    }

    .trader-nbp-chip {
      display: grid;
      gap: 2px;
      min-width: 0;
      text-align: left;
      line-height: 1.1;
    }

    .trader-nbp-chip strong {
      font-size: 12px;
      font-weight: 800;
    }

    .trader-nbp-chip span {
      color: var(--ink-3);
      font-size: 10px;
      font-weight: 600;
    }

    .trader-config-chip-grid-nbp .trader-config-chip {
      align-items: flex-start;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .trader-table-updated,
    .trader-table-empty {
      color: var(--ink-3);
    }

    .trader-pair-panel {
      position: sticky;
      top: 24px;
      display: grid;
      gap: 18px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow-sm);
    }

    .trader-pair-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .trader-pair-panel-kicker {
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .trader-pair-panel h3 {
      margin-top: 3px;
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
    }

    .trader-pair-panel-rate {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .trader-pair-panel-rate span {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 30px;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .trader-pair-panel-rate strong {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 800;
    }

    .trader-pair-panel-rate strong.up {
      color: var(--pos);
    }

    .trader-pair-panel-rate strong.down {
      color: var(--neg);
    }

    .trader-pair-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .trader-pair-metrics div {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
    }

    .trader-pair-metrics span {
      display: block;
      margin-bottom: 5px;
      color: var(--ink-3);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .trader-pair-metrics strong {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .trader-pair-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .trader-pair-actions button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid rgba(110,75,255,0.16);
      border-radius: var(--radius-pill);
      background: #FBF9FF;
      color: var(--purple);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .trader-pair-footnote {
      color: var(--ink-3);
      font-size: 12px;
      text-align: right;
    }

    .trader-config-drawer {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 90;
      width: min(420px, 100vw);
      height: 100vh;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--line);
      background: var(--card);
      box-shadow: -24px 0 80px -54px rgba(15,8,38,0.42);
    }

    .trader-config-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 22px;
      border-bottom: 1px solid var(--line);
    }

    .trader-config-header h3 {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
    }

    .trader-config-header p {
      margin-top: 4px;
      color: var(--ink-3);
      font-size: 12px;
    }

    .trader-config-body {
      display: grid;
      gap: 20px;
      padding: 22px;
      overflow-y: auto;
    }

    .trader-config-field {
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }

    .trader-config-field input,
    .trader-config-field select {
      min-height: 40px;
      padding: 9px 11px;
      border: 1.5px solid var(--line-2);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
    }

    .trader-config-field input:focus,
    .trader-config-field select:focus {
      outline: none;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12);
    }

    .trader-config-chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .trader-config-chip {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      background: #FBF9FF;
      color: var(--ink-3);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .trader-config-chip input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .trader-config-chip.active {
      border-color: rgba(110,75,255,0.22);
      background: var(--purple-soft);
      color: var(--purple);
    }

    .trader-config-segment {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg);
    }

    .trader-config-segment-four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .trader-config-segment button {
      min-height: 34px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink-3);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .trader-config-segment button.active {
      background: var(--card);
      color: var(--ink);
      box-shadow: var(--shadow-sm);
    }

    .trader-config-switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .trader-config-switch input {
      width: 18px;
      height: 18px;
      accent-color: var(--purple);
      flex-shrink: 0;
    }

    .trader-config-empty {
      padding: 22px;
      color: var(--ink-3);
      font-size: 14px;
      line-height: 1.45;
    }

    .trader-empty-state {
      display: grid;
      justify-items: center;
      gap: 16px;
      padding: 56px 20px;
      border: 1px dashed var(--line-2);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--ink-3);
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .trader-chart-placeholder {
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-3);
      text-align: center;
    }

    .trader-chart-title {
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15,8,38,0.38);
      backdrop-filter: blur(6px);
    }

    .modal-content {
      width: min(520px, 100%);
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow-lg);
    }

    .modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .modal-header h2,
    .modal-header h3 {
      margin: 0;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.25;
      font-weight: 800;
    }

    .modal-close {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: var(--card);
      color: var(--ink-2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

    .modal-close:hover,
    .modal-close:focus-visible {
      border-color: var(--purple-3);
      background: var(--purple-soft);
      color: var(--purple);
      outline: none;
    }

    .modal-body {
      display: grid;
      gap: 0;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }

    .trader-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .trader-modal-header h3 {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .trader-modal-close {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
    }

    .trader-modal-close:hover {
      background: #FBF9FF;
      border-color: var(--line);
      color: var(--ink);
    }

    .trader-card-type-list {
      display: grid;
      gap: 10px;
    }

    .trader-card-type-option {
      width: 100%;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: white;
      color: var(--ink);
      font-family: var(--font-body);
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }

    .trader-card-type-option:hover {
      border-color: var(--purple-3);
      background: #FBF9FF;
      transform: translateY(-1px);
    }

    .trader-card-type-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--purple-soft);
      color: var(--purple);
    }

    .trader-card-type-label {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .trader-card-type-desc {
      margin-top: 2px;
      color: var(--ink-3);
      font-size: 12px;
      line-height: 1.35;
    }

    .trader-modal-type {
      margin-bottom: 16px;
      color: var(--ink-3);
      font-size: 13px;
    }

    .trader-modal-type strong {
      color: var(--ink);
    }

    .trader-modal-field {
      display: grid;
      gap: 7px;
      margin-bottom: 18px;
    }

    .trader-modal-field label {
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }

    .trader-modal-select {
      width: 100%;
      min-height: 42px;
      padding: 9px 12px;
      border: 1.5px solid var(--line-2);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
    }

    .trader-modal-select:focus {
      outline: none;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(110,75,255,0.12);
    }

    .trader-modal-error {
      color: var(--neg);
      font-size: 12px;
      line-height: 1.35;
    }

    /* ── DASHBOARD: USTAWIENIA ── */
    .dashboard-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .dashboard-settings-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .dashboard-settings-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .dashboard-settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .dashboard-settings-field label {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
    }

    .dashboard-settings-field > span {
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .dashboard-settings-field input,
    .dashboard-settings-field select {
      padding: 10px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      transition: border-color 0.15s;
    }

    .dashboard-settings-field input:focus,
    .dashboard-settings-field select:focus {
      outline: none;
      border-color: var(--purple);
    }

    .account-profile-card {
      grid-column: 1 / -1;
      padding: 28px;
    }

    .account-profile-sections {
      display: grid;
      gap: 18px;
    }

    .account-profile-section {
      display: grid;
      gap: 16px;
      padding: 18px;
      border: 1px solid rgba(110,75,255,0.12);
      border-radius: var(--radius-sm);
      background: #FBF9FF;
    }

    .account-profile-section h4 {
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.01em;
    }

    .account-profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
    }

    .account-profile-email,
    .account-profile-language,
    .account-profile-company,
    .account-profile-address {
      grid-column: 1 / -1;
    }

    .account-language-select {
      width: min(320px, 100%);
      min-height: 42px;
    }

    .account-nip-row {
      display: grid;
      grid-template-columns: minmax(220px, 360px) max-content;
      align-items: end;
      gap: 12px;
      justify-content: start;
    }

    .account-ceidg-btn {
      min-height: 42px;
      padding-inline: 18px;
      justify-content: center;
      white-space: nowrap;
    }

    .account-profile-actions {
      justify-content: flex-end;
      margin-top: 20px;
    }

    .account-profile-actions .dashboard-add-btn {
      min-width: 170px;
      justify-content: center;
    }

    .dashboard-settings-options {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .dashboard-settings-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .dashboard-settings-option-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .dashboard-settings-option-desc {
      font-size: 12px;
      color: var(--ink-3);
    }

    .dashboard-toggle {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      background: var(--line);
      border: none;
      cursor: pointer;
      position: relative;
      transition: background 0.2s;
      padding: 0;
    }

    .dashboard-toggle.active {
      background: var(--purple);
    }

    .dashboard-toggle-knob {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: white;
      position: absolute;
      top: 2px;
      left: 2px;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
      display: block;
    }

    .dashboard-toggle.active .dashboard-toggle-knob {
      transform: translateX(20px);
    }

    .dashboard-select {
      padding: 8px 12px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      cursor: pointer;
      min-width: 180px;
    }

    .dashboard-select:focus {
      outline: none;
      border-color: var(--purple);
    }

    .dashboard-settings-info {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .dashboard-settings-info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .dashboard-settings-info-row span {
      color: var(--ink-3);
    }

    .dashboard-settings-info-row strong {
      color: var(--ink);
      font-weight: 600;
    }

    .subscription-card .subscription-section {
      margin-bottom: 20px;
    }

    .subscription-card .subscription-section h4 {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-2);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .subscription-plan-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .subscription-plan-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
    }

    .subscription-card .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 0;
      text-transform: none;
      letter-spacing: 0;
    }

    .subscription-card .status-badge::before {
      width: 6px;
      height: 6px;
      animation: none;
    }

    .subscription-card .status-badge.active {
      background: rgba(45, 190, 133, 0.1);
      color: var(--pos);
    }

    .subscription-card .status-badge.active::before {
      background: var(--pos);
    }

    .subscription-card .status-badge.cancelled {
      background: rgba(239, 68, 68, 0.1);
      color: var(--neg);
    }

    .subscription-card .status-badge.cancelled::before {
      background: var(--neg);
    }

    .subscription-card .status-badge.past-due {
      background: rgba(245, 158, 11, 0.1);
      color: #d97706;
    }

    .subscription-card .status-badge.past-due::before {
      background: #d97706;
    }

    .subscription-meta {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.5;
    }

    .subscription-cancel-warning {
      color: var(--neg);
      font-size: 13px;
      font-weight: 500;
      margin-top: 4px;
    }

    .subscription-payment-method {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 12px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--ink-2);
    }

    .subscription-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .subscription-invoices {
      margin-top: 4px;
    }

    .subscription-invoices h4 {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-2);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .subscription-invoice-table {
      width: 100%;
    }

    .subscription-invoice-link {
      color: var(--purple);
      display: inline-flex;
      align-items: center;
    }

    .subscription-invoice-link:hover {
      color: var(--purple-2);
    }

    @media (max-width: 1024px) {
      .dashboard-currencies-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .dashboard-settings-grid {
        grid-template-columns: 1fr;
      }
      .account-profile-grid,
      .account-nip-row {
        grid-template-columns: 1fr;
      }
      .account-ceidg-btn,
      .account-profile-actions .dashboard-add-btn {
        width: 100%;
      }
      .branch-management-grid {
        grid-template-columns: 1fr;
      }
      .branch-create-grid {
        grid-template-columns: 1fr;
      }
      .rate-preview-card {
        position: static;
      }
    }

    @media (max-width: 768px) {
      .dashboard-currencies-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .dashboard-table {
        font-size: 12px;
      }
      .dashboard-table th,
      .dashboard-table td {
        padding: 10px 12px;
      }
      .rate-settings-mode-bar {
        align-items: stretch;
        flex-direction: column;
      }
      .rate-settings-mode-options {
        width: 100%;
      }
      .rate-settings-mode-btn {
        white-space: normal;
      }
      .trader-grid,
      .trader-summary-grid {
        grid-template-columns: 1fr;
      }
      .trader-ticker-item {
        min-width: 160px;
      }
      .trader-toolbar {
        align-items: stretch;
        flex-direction: column;
      }
      .trader-toolbar-actions,
      .trader-toolbar-meta {
        justify-content: flex-start;
      }
      .trader-panel-grid {
        grid-template-columns: 1fr;
      }
      .trader-workspace.has-details {
        grid-template-columns: 1fr;
      }
      .trader-pair-panel {
        position: static;
      }
      .employee-card {
        grid-template-columns: 1fr;
      }
      .employee-branch-tags {
        padding-left: 0;
      }
      .branch-card-actions {
        justify-content: flex-start;
      }
      .trader-sortable-card {
        grid-column: 1 / -1;
      }
      .trader-card-rates {
        align-items: flex-start;
        flex-direction: column;
      }
      .trader-card-ask {
        text-align: left;
      }
    }

    @media (max-width: 560px) {
      .dashboard-header-right {
        align-items: stretch;
        flex-direction: column;
      }
      .dashboard-header-actions,
      .dashboard-add-btn {
        width: 100%;
      }
      .dashboard-screen-add-row,
      .dashboard-screen-item {
        align-items: flex-start;
      }
      .dashboard-screen-status {
        margin-left: auto;
      }
      .employee-card-main {
        grid-template-columns: 44px minmax(0, 1fr);
      }
      .employee-card-main .branch-card-icon {
        width: 44px;
        height: 44px;
      }
      .employee-card-main .dashboard-screen-status {
        grid-column: 2;
        justify-self: flex-start;
        margin-left: 0;
      }
      .branch-card-actions {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 480px) {
      .dashboard-currencies-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── BLOG POST DETAIL ── */
    .post-page { padding: 140px 0 0; background: var(--bg); }
    .post-article { max-width: 900px; margin: 0 auto; padding: 0 32px; }
    .post-header { max-width: 720px; margin: 0 auto 48px; text-align: center; }
    .post-tag {
      display: inline-block;
      padding: 6px 14px;
      background: var(--purple-soft);
      color: var(--purple);
      border-radius: var(--radius-pill);
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
    }
    .post-title {
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 20px;
      text-wrap: balance;
    }
    .post-meta {
      font-size: 14px;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 500;
    }
    .post-meta span { color: var(--ink-4); }

    .post-hero {
      aspect-ratio: 21/9;
      border-radius: var(--radius-lg);
      margin: 0 auto 48px;
      max-width: 900px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .post-hero .blog-thumb-icon {
      width: 120px; height: 120px;
    }

    .post-content {
      max-width: 680px;
      margin: 0 auto;
      padding-bottom: 80px;
    }
    .post-lead {
      font-size: 20px;
      color: var(--ink-2);
      line-height: 1.7;
      margin-bottom: 32px;
      font-weight: 400;
    }
    .post-content h2 {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink);
      margin-top: 48px;
      margin-bottom: 20px;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .post-content p {
      font-size: 16px;
      color: var(--ink-2);
      line-height: 1.75;
      margin-bottom: 20px;
    }
    .post-content blockquote {
      border-left: 3px solid var(--purple);
      padding-left: 24px;
      margin: 32px 0;
      font-style: italic;
      color: var(--ink-3);
      font-size: 18px;
      line-height: 1.6;
    }
    .post-content ul {
      list-style: disc;
      padding-left: 24px;
      margin-bottom: 24px;
    }
    .post-content ul li {
      margin-bottom: 10px;
      font-size: 16px;
      color: var(--ink-2);
      line-height: 1.6;
    }
    .post-content ul li::marker { color: var(--purple); }
    .post-content strong { color: var(--ink); font-weight: 600; }
    .post-content a {
      color: var(--purple);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .post-content a:hover { text-decoration: none; }

    .post-related {
      padding: 80px 0;
      background:
        radial-gradient(ellipse 600px 400px at 80% 50%, rgba(217,201,255,0.4), transparent 70%),
        var(--bg);
    }
    .post-related-h2 {
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 600;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 48px;
      text-align: center;
    }

    .post-cta {
      padding: 100px 0;
      background: radial-gradient(ellipse at center, var(--space-2) 0%, var(--space) 80%);
      color: white;
      text-align: center;
    }
    .post-cta-inner {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .post-cta-h2 {
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: white;
      margin-bottom: 16px;
    }
    .post-cta-p {
      font-size: 17px;
      color: rgba(255,255,255,0.75);
      line-height: 1.6;
      margin-bottom: 32px;
    }

    @media (max-width: 920px) {
      .post-article { padding: 0 24px; }
      .post-hero { aspect-ratio: 16/9; }
      .post-related { padding: 60px 0; }
      .post-cta { padding: 80px 0; }
    }

    @media (max-width: 640px) {
      .post-page { padding-top: 120px; }
      .post-article { padding: 0 20px; }
      .post-header { margin-bottom: 32px; }
      .post-hero { margin-bottom: 32px; }
      .post-content { padding-bottom: 60px; }
      .post-content h2 { font-size: 24px; margin-top: 36px; }
      .post-lead { font-size: 18px; }
      .post-related { padding: 48px 0; }
      .post-cta { padding: 64px 0; }
    }

/* ── EMBEDDED STATIC PAGES: /regulamin, /status, /nowosci ── */

/* ---- Regulamin (terms-page) ---- */
.terms-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}

.terms-page h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 48px;
  text-align: center;
}

.terms-page h2 {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 56px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.terms-page h2:first-of-type {
  margin-top: 0;
}

.terms-page p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 12px;
}

.terms-page ul {
  margin-bottom: 20px;
  padding-left: 28px;
}

.terms-page ul li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 6px;
  padding-left: 8px;
}

.terms-page ul li::marker {
  color: var(--purple);
  font-weight: 500;
}

.terms-page a {
  color: var(--purple);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.terms-page a:hover {
  border-bottom-color: var(--purple-2);
}

@media (max-width: 640px) {
  .terms-page {
    padding: 120px 20px 80px;
  }
  .terms-page h1 {
    margin-bottom: 36px;
  }
  .terms-page h2 {
    margin-top: 44px;
  }
  .terms-page ul {
    padding-left: 22px;
  }
}

/* ---- Static resource pages ---- */
.static-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}

.static-page h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.static-page .lead {
  font-size: 18px;
  color: var(--ink-3);
  margin-bottom: 64px;
}

/* ---- Nowosci (changelog-page, changelog-*) ---- */
.changelog-page {
  max-width: 800px;
}

.changelog-item {
  position: relative;
  padding-left: 32px;
  padding-bottom: 48px;
  border-left: 2px solid var(--line);
}

.changelog-item:last-child {
  border-left-color: transparent;
}

.changelog-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--purple);
}

.changelog-date {
  margin-bottom: 8px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
}

.changelog-title {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.changelog-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

.changelog-entry-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-new { background: rgba(45, 190, 133, 0.1); color: var(--pos); }
.badge-fix { background: rgba(110, 75, 255, 0.1); color: var(--purple); }
.badge-impr { background: rgba(247, 181, 56, 0.1); color: #c77e00; }

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

/* ---- Status (status-*, incident-*) ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 190, 133, 0.1);
  color: var(--pos);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 48px;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.status-metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.status-metric-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.status-metric-label {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}

.status-section {
  margin-bottom: 48px;
}

.status-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.status-item-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--ink);
}

.status-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-item-dot.ok { background: var(--pos); }
.status-item-dot.warn { background: var(--warn); }
.status-item-dot.err { background: var(--neg); }

.status-item-uptime {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}

.incident-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.incident-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg);
  font-weight: 600;
  color: var(--ink-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}

.incident-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.incident-table tr:hover td {
  background: var(--purple-soft);
}

.incident-resolved {
  color: var(--pos);
  font-weight: 600;
  font-size: 12px;
  background: rgba(45, 190, 133, 0.1);
  padding: 2px 10px;
  border-radius: 999px;
}

.incident-minor {
  color: var(--warn);
  font-weight: 600;
  font-size: 12px;
  background: rgba(247, 181, 56, 0.1);
  padding: 2px 10px;
  border-radius: 999px;
}

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

/* Trial Banner */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin: 0 0 20px 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
}

.trial-banner--expired {
  background: rgba(229, 85, 107, 0.1);
  border: 1px solid rgba(229, 85, 107, 0.24);
  color: var(--neg);
}

.trial-banner--warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.24);
  color: #b45309;
}

.trial-banner__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.trial-banner__content strong {
  font-weight: 600;
}

.trial-banner__content span {
  opacity: 0.9;
}

.trial-banner__cta {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.trial-banner--expired .trial-banner__cta {
  background: var(--neg);
  color: #fff;
}

.trial-banner--warning .trial-banner__cta {
  background: #f59e0b;
  color: #fff;
}

.trial-banner__cta:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .trial-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Trial Blocker */
.trial-blocker {
  position: relative;
}

.trial-blocker__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
  z-index: 10;
  padding: 24px;
}

.trial-blocker__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 400px;
  color: var(--neg);
  background: rgba(229, 85, 107, 0.08);
  border: 1px solid rgba(229, 85, 107, 0.2);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}

.trial-blocker__content strong {
  font-weight: 600;
  font-size: 15px;
}

.trial-blocker__content span {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.5;
}

.trial-blocker__cta {
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--neg);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.trial-blocker__cta:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .trial-blocker__overlay {
    padding: 16px;
  }

  .trial-blocker__content {
    padding: 16px;
  }
}

/* Trial Overlay Containers */
.trader-panel-body,
.trial-overlay-container {
  position: relative;
  min-height: 400px;
}

.trader-trial-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  z-index: 30;
  padding: 24px;
  pointer-events: auto;
}

.trader-trial-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 380px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(229, 85, 107, 0.2);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  color: var(--neg);
}

.trader-trial-overlay__content strong {
  font-weight: 600;
  font-size: 16px;
}

.trader-trial-overlay__content span {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.5;
  color: #4b5563;
}

.trader-trial-overlay__cta {
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--neg);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.trader-trial-overlay__cta:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .trader-trial-overlay {
    padding: 16px;
  }

  .trader-trial-overlay__content {
    padding: 20px 24px;
  }
}
  .static-page { padding: 120px 20px 80px; }
}