/* ===================== PLATFORM-SPECIFIC STYLES ===================== */

    /* Gradient-bordered card (modern trend: 1px gradient ring) */
    .gring {
      position: relative;
      border-radius: 20px;
      background:
        linear-gradient(var(--bg-1, #0a0c14), var(--bg-1, #0a0c14)) padding-box,
        linear-gradient(135deg, rgba(123,140,255,.55), rgba(178,123,255,.25) 40%, rgba(255,255,255,0.04) 70%) border-box;
      border: 1px solid transparent;
    }
    [data-theme="light"] .gring {
      background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(135deg, rgba(123,140,255,.55), rgba(178,123,255,.35) 40%, rgba(0,0,0,0.05) 70%) border-box;
    }

    /* Bento grid */
    .bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .bento-card {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      padding: 22px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(to bottom, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
      backdrop-filter: blur(14px);
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .bento-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.20);
      box-shadow: 0 30px 60px -28px rgba(0,0,0,.55);
    }
    .bento-card::before {
      content: '';
      position: absolute;
      width: 240px; height: 240px;
      top: -120px; right: -120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(123,140,255,0.32), transparent 70%);
      pointer-events: none;
      opacity: .55;
    }
    .bento-card .iconwrap {
      width: 44px; height: 44px; display: grid; place-items: center;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.16);
      background: linear-gradient(135deg, rgba(123,140,255,.22), rgba(178,123,255,.15));
      color: var(--accent);
      margin-bottom: 14px;
    }
    .bento-card h3 {
      font-size: 18px; font-weight: 600; color: var(--text-0);
      line-height: 1.3; margin-bottom: 8px;
    }
    .bento-card p {
      font-size: 13.5px; line-height: 1.6; color: var(--text-1);
    }
    .bento-card .tag {
      position: absolute; top: 22px; right: 22px;
      font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-2);
    }
    @media (max-width: 1024px) {
      .bento { grid-template-columns: repeat(6, 1fr); }
      .bento-card.span-6, .bento-card.span-7, .bento-card.span-8, .bento-card.span-12 { grid-column: span 6 !important; }
      .bento-card.span-4, .bento-card.span-5 { grid-column: span 3 !important; }
    }
    @media (max-width: 640px) {
      .bento { grid-template-columns: 1fr; }
      .bento-card { grid-column: 1 / -1 !important; }
    }

    /* Feature explorer tabs (horizontal pill-tabs) */
    .pf-tabs {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(10px);
    }
    .pf-tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13px; font-weight: 500;
      color: var(--text-1);
      cursor: pointer;
      transition: color .25s, background .25s, transform .15s;
      white-space: nowrap;
    }
    .pf-tab:hover { color: var(--text-0); }
    .pf-tab.active {
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      color: white;
      box-shadow: 0 8px 22px -10px rgba(123,140,255,.55);
    }
    .pf-tab .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; opacity: .7;
    }
    .pf-panel { display: none !important; }
    .pf-panel.active { display: grid !important; animation: pfFade .45s ease both; }
    @keyframes pfFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Module mockup window */
    .mod-window {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
      background:
        radial-gradient(800px 300px at 70% -10%, rgba(123,140,255,.22), transparent 60%),
        linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
      backdrop-filter: blur(20px);
      box-shadow: 0 30px 80px -30px rgba(0,0,0,.55);
    }
    .mod-window .winhead {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text-2);
    }
    .mod-window .winhead .d { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
    .mod-window .winhead .d:nth-child(1) { background: #ff6b6b; }
    .mod-window .winhead .d:nth-child(2) { background: #ffd166; }
    .mod-window .winhead .d:nth-child(3) { background: #06d6a0; }

    .feat-list { display: grid; gap: 10px; margin-top: 26px; }
    .feat-list .item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,0.018);
      border: 1px solid rgba(255,255,255,0.06);
      transition: border-color .25s, background .25s, transform .2s;
    }
    .feat-list .item:hover {
      border-color: rgba(123,140,255,0.4);
      background: rgba(123,140,255,0.05);
      transform: translateX(4px);
    }
    .feat-list .item .badge {
      width: 28px; height: 28px; flex-shrink: 0;
      display: grid; place-items: center;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(123,140,255,.22), rgba(178,123,255,.15));
      border: 1px solid rgba(255,255,255,0.10);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; color: var(--accent);
    }
    .feat-list .item .body .name {
      font-size: 14px; font-weight: 600; color: var(--text-0); margin-bottom: 2px;
    }
    .feat-list .item .body .desc {
      font-size: 13px; color: var(--text-1); line-height: 1.55;
    }

    /* Marquee chip strip */
    .chip-strip {
      display: flex; gap: 10px; flex-wrap: nowrap;
      animation: chipScroll 30s linear infinite;
    }
    @keyframes chipScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .chip-mask {
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      overflow: hidden;
    }
    .chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.025);
      font-size: 13px; color: var(--text-1); white-space: nowrap;
      flex-shrink: 0;
    }
    .chip .led {
      width: 6px; height: 6px; border-radius: 999px;
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      box-shadow: 0 0 8px rgba(123,140,255,.7);
    }

    /* Dashboard widgets */
    .dash-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 14px;
    }
    @media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } }
    .dash-card {
      border-radius: 16px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    }
    .dash-bar-row {
      display: flex; align-items: center; gap: 10px;
      margin: 10px 0;
    }
    .dash-bar-row .lbl { font-size: 12px; color: var(--text-1); width: 110px; }
    .dash-bar-row .track {
      flex: 1; height: 7px; border-radius: 999px;
      background: rgba(255,255,255,0.06); overflow: hidden;
    }
    .dash-bar-row .fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #7b8cff, #b27bff);
      width: 0;
      animation: barIn 1.4s ease forwards;
    }
    @keyframes barIn { to { width: var(--w); } }
    .dash-bar-row .val { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-1); width: 38px; text-align: right; }

    .dash-stat .num {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 30px; font-weight: 700;
      color: var(--text-0);
      letter-spacing: -0.5px;
    }
    .dash-stat .lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-2);
      margin-top: 4px;
    }

    /* Clarification chat preview */
    .chat-box .msg {
      display: flex; gap: 10px; margin-bottom: 10px;
      animation: msgIn .6s ease both;
    }
    .chat-box .msg.you { flex-direction: row-reverse; }
    .chat-box .msg .av {
      width: 30px; height: 30px; border-radius: 999px;
      display: grid; place-items: center; flex-shrink: 0;
      font-size: 11px; font-weight: 700; color: white;
      font-family: 'JetBrains Mono', monospace;
    }
    .chat-box .msg .bub {
      max-width: 78%;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      font-size: 13px; color: var(--text-0); line-height: 1.5;
    }
    .chat-box .msg.you .bub {
      background: linear-gradient(135deg, rgba(123,140,255,.18), rgba(178,123,255,.12));
      border-color: rgba(123,140,255,.32);
    }
    .chat-box .msg .meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; color: var(--text-2);
      margin-bottom: 4px;
    }
    @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .chat-box .msg:nth-child(1) { animation-delay: .1s; }
    .chat-box .msg:nth-child(2) { animation-delay: .35s; }
    .chat-box .msg:nth-child(3) { animation-delay: .6s; }
    .chat-box .msg:nth-child(4) { animation-delay: .85s; }

    /* Kanban award flow */
    .kanban {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    @media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
    .kcol {
      border-radius: 14px;
      padding: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      min-height: 130px;
      position: relative;
    }
    .kcol .ktitle {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-2);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 6px;
    }
    .kcol .ktitle .ddot { width: 6px; height: 6px; border-radius: 999px; }
    .kcol .kcard {
      padding: 9px 11px; border-radius: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      font-size: 12.5px; color: var(--text-0);
      margin-bottom: 6px;
    }
    .kcol.active {
      background: rgba(123,140,255,0.06);
      border-color: rgba(123,140,255,0.35);
    }
    .kcol.active .ktitle .ddot {
      background: #7b8cff;
      box-shadow: 0 0 0 4px rgba(123,140,255,0.18), 0 0 12px rgba(123,140,255,.8);
    }
    .kcol.done .ktitle .ddot { background: #34d399; box-shadow: 0 0 10px #34d399; }

    /* Big animated counter strip */
    .stat-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    @media (max-width: 768px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
    .stat-cell {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    }
    .stat-cell .big {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 34px; font-weight: 700;
      background: linear-gradient(135deg, #7b8cff, #b27bff);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      letter-spacing: -0.8px;
      text-align: center;
    }
    .stat-cell .sub {
      font-size: 12px; color: var(--text-1); margin-top: 6px;
    }

    /* ============== LIGHT-MODE OVERRIDES ============== */
    [data-theme="light"] .bento-card {
      background: linear-gradient(to bottom, rgba(15,18,32,0.035), rgba(15,18,32,0.015));
      border-color: rgba(15,18,32,0.10);
    }
    [data-theme="light"] .bento-card:hover {
      border-color: rgba(15,18,32,0.22);
      box-shadow: 0 30px 60px -28px rgba(15,18,32,.25);
    }
    [data-theme="light"] .bento-card::before {
      background: radial-gradient(circle, rgba(123,140,255,0.22), transparent 70%);
    }
    [data-theme="light"] .bento-card .iconwrap {
      border-color: rgba(15,18,32,0.10);
      background: linear-gradient(135deg, rgba(79,95,229,.14), rgba(138,82,232,.10));
    }

    [data-theme="light"] .pf-tabs {
      border-color: rgba(15,18,32,0.10);
      background: rgba(15,18,32,0.02);
    }
    [data-theme="light"] .pf-tab { color: var(--text-1); }
    [data-theme="light"] .pf-tab.active { color: white; }

    [data-theme="light"] .mod-window {
      border-color: rgba(15,18,32,0.10);
      background:
        radial-gradient(800px 300px at 70% -10%, rgba(123,140,255,.14), transparent 60%),
        linear-gradient(to bottom, rgba(15,18,32,0.025), rgba(15,18,32,0.008));
      box-shadow: 0 30px 80px -30px rgba(15,18,32,.18);
    }
    [data-theme="light"] .mod-window .winhead {
      border-bottom-color: rgba(15,18,32,0.08);
    }
    [data-theme="light"] .mod-window .winhead .d:not(:nth-child(-n+3)) { background: rgba(15,18,32,.18); }

    [data-theme="light"] .feat-list .item {
      background: rgba(15,18,32,0.022);
      border-color: rgba(15,18,32,0.08);
    }
    [data-theme="light"] .feat-list .item:hover {
      border-color: rgba(79,95,229,0.4);
      background: rgba(79,95,229,0.06);
    }
    [data-theme="light"] .feat-list .item .badge {
      border-color: rgba(15,18,32,0.10);
      background: linear-gradient(135deg, rgba(79,95,229,.14), rgba(138,82,232,.10));
    }

    [data-theme="light"] .chip {
      border-color: rgba(15,18,32,0.10);
      background: rgba(15,18,32,0.028);
    }

    [data-theme="light"] .dash-card {
      border-color: rgba(15,18,32,0.10);
      background: linear-gradient(to bottom, rgba(15,18,32,0.025), rgba(15,18,32,0.006));
    }
    [data-theme="light"] .dash-bar-row .track {
      background: rgba(15,18,32,0.08);
    }

    [data-theme="light"] .stat-cell {
      border-color: rgba(15,18,32,0.10);
      background: linear-gradient(to bottom, rgba(15,18,32,0.025), rgba(15,18,32,0.006));
    }

    [data-theme="light"] .chat-box .msg .bub {
      border-color: rgba(15,18,32,0.10);
      background: rgba(15,18,32,0.025);
      color: var(--text-0);
    }
    [data-theme="light"] .chat-box .msg.you .bub {
      background: linear-gradient(135deg, rgba(79,95,229,.12), rgba(138,82,232,.08));
      border-color: rgba(79,95,229,.32);
    }

    [data-theme="light"] .kcol {
      background: rgba(15,18,32,0.025);
      border-color: rgba(15,18,32,0.08);
    }
    [data-theme="light"] .kcol .kcard {
      background: rgba(15,18,32,0.04);
      border-color: rgba(15,18,32,0.08);
      color: var(--text-0);
    }
    [data-theme="light"] .kcol.active {
      background: rgba(79,95,229,0.07);
      border-color: rgba(79,95,229,0.32);
    }

    /* Force readable text on inner mockup elements (Tailwind text-white was used) */
    [data-theme="light"] .mod-window .text-white,
    [data-theme="light"] .bento-card .text-white,
    [data-theme="light"] .dash-card .text-white,
    [data-theme="light"] .stat-cell .text-white,
    [data-theme="light"] tr.text-white {
      color: var(--text-0) !important;
    }
    /* Inline grid cells inside the RFQ mock (white/[0.x] backgrounds) */
    [data-theme="light"] .mod-window .bg-white\/\[0\.02\],
    [data-theme="light"] .mod-window .bg-white\/\[0\.025\],
    [data-theme="light"] .mod-window .bg-white\/\[0\.035\] {
      background: rgba(15,18,32,0.03) !important;
    }
    [data-theme="light"] .mod-window .border-white\/\[0\.06\],
    [data-theme="light"] .mod-window .border-white\/\[0\.08\] {
      border-color: rgba(15,18,32,0.10) !important;
    }

    /* Stat-strip "big" text that isn't a gradient (RFQ · BOQ · RFI and AI) */
    [data-theme="light"] .stat-cell .big { /* gradient still works in both themes via -webkit-background-clip */ }