/* Product-specific styles for AI Competitor Price Intelligence */
      :root {
        --bg: #07111f;
        --bg2: #0b1728;
        --panel: #0e1c30;
        --panel2: #12233b;
        --line: rgba(8, 180, 217, 0.2);
        --text: #f6f8fb;
        --muted: #9fb0c8;
        --cyan: #51d6ff;
        --green: #61e7a6;
        --amber: #ffc76b;
        --red: #ff7c8d;
        --purple: #a98bff;
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
        --radius: 24px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--cyan), var(--purple));
        color: #06101c;
        font-weight: 950;
        box-shadow: 0 10px 30px rgba(81, 214, 255, 0.18);
      }
      .brand small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .nav-links {
        display: flex;
        gap: 22px;
        color: #c6d1e0;
        font-size: 14px;
      }
      .nav-links a:hover {
        color: #fff;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1.04fr 0.96fr;
        gap: 48px;
        align-items: center;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        color: var(--primary);
        background: var(--primary-glow);
        border: 1px solid var(--line2);
        font-size: 12px;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 14px var(--accent);
      }
      h1 {
        font-size: clamp(43px, 6vw, 76px);
        line-height: 1.02;
        letter-spacing: -0.055em;
        margin: 20px 0 20px;
      }
      .gradient {
        /* background: var(--accent); */
        -webkit-background-clip: text;
        background-clip: text;
        /* color: transparent; */
      }
      .hero p {
        font-size: 18px;
        color: #b9c7d9;
        max-width: 720px;
        margin: 0 0 28px;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 28px;
      }
      
      .trust {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        color: #93a7c0;
        font-size: 13px;
      }
      .trust span::before {
        content: "✓";
        color: var(--green);
        font-weight: 900;
        margin-right: 7px;
      }

      .dashboard {
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 18px;
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
      }
      .dashboard::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: rgba(81, 214, 255, 0.08);
        filter: blur(35px);
        right: -95px;
        top: -90px;
      }
      .dash-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 5px 14px;
      }
      .dash-title {
        font-weight: 850;
      }
      .live {
        font-size: 11px;
        color: #b9f8d8;
        border: 1px solid rgba(97, 231, 166, 0.25);
        background: rgba(97, 231, 166, 0.08);
        padding: 5px 8px;
        border-radius: 999px;
      }
      .mini-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .stat {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.025);
      }
      .stat small {
        color: var(--muted);
        font-size: 11px;
      }
      .stat strong {
        font-size: 23px;
        display: block;
        margin-top: 3px;
      }
      .stat em {
        font-style: normal;
        font-size: 11px;
      }
      .bad {
        color: var(--red);
      }
      .good {
        color: var(--green);
      }
      .warn {
        color: var(--amber);
      }
      .product-card {
        margin-top: 10px;
        padding: 16px;
        border-radius: 20px;
        border: 1px solid var(--line);
        background: #0a1728;
      }
      .product-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
      }
      .product-head h3 {
        font-size: 15px;
        margin: 0;
      }
      .product-head p {
        font-size: 12px;
        margin: 2px 0 0;
        color: var(--muted);
      }
      .tag {
        font-size: 10px;
        padding: 5px 7px;
        border-radius: 999px;
        background: rgba(255, 199, 107, 0.1);
        color: #ffdca3;
        border: 1px solid rgba(255, 199, 107, 0.22);
        white-space: nowrap;
      }
      .price-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
      }
      .price-box {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 10px;
      }
      .price-box small {
        font-size: 10px;
        color: var(--muted);
      }
      .price-box b {
        display: block;
        font-size: 19px;
      }
      .ai-box {
        margin-top: 12px;
        border-left: 3px solid var(--cyan);
        background: rgba(81, 214, 255, 0.06);
        padding: 12px 13px;
        border-radius: 0 13px 13px 0;
        font-size: 12px;
        color: #d8e9f5;
      }
      .spark {
        height: 92px;
        margin-top: 14px;
        position: relative;
        border-radius: 15px;
        border: 1px solid var(--line);
        overflow: hidden;
        background: linear-gradient(
          180deg,
          rgba(81, 214, 255, 0.03),
          transparent
        );
      }
      .spark svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .spark-label {
        position: absolute;
        left: 11px;
        top: 8px;
        color: var(--muted);
        font-size: 10px;
      }

      section {
        padding: 88px 0;
      }
      .section-kicker {
        color: var(--primary);
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 10px;
      }
      h2 {
        font-size: clamp(32px, 4vw, 49px);
        letter-spacing: -0.035em;
        line-height: 1.08;
        margin: 0 0 13px;
      }
      .lead {
        color: var(--muted);
        font-size: 17px;
        max-width: 780px;
      }

      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 28px;
      }
      .card {
        padding: 22px;
        border-radius: var(--radius);
        /* border: 1px solid var(--line); */
        /* background: rgba(255, 255, 255, 0.028); */
      }
      .icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        margin-bottom: 16px;
        background: linear-gradient(
          135deg,
          rgba(81, 214, 255, 0.14),
          rgba(169, 139, 255, 0.14)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 20px;
      }
      .card h3 {
        margin: 0 0 8px;
        font-size: 18px;
      }
      .card p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .how {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 28px;
        align-items: start;
        margin-top: 30px;
      }
      .steps {
        display: grid;
        gap: 12px;
      }
      .step {
        display: grid;
        grid-template-columns: 45px 1fr;
        gap: 13px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 18px;
        /* background: rgba(255, 255, 255, 0.025); */
      }
      .step-no {
        width: 45px;
        height: 45px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: #132945;
        color: #8deaff;
        font-weight: 900;
      }
      .step h4 {
        margin: 0 0 4px;
      }
      .step p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
      }

      .logic {
        border-radius: 26px;
        padding: 24px;
        border: 1px solid var(--line);
        /* background: linear-gradient(145deg, #0e2036, #0b1829); */
      }
      .logic h3 {
        margin: 0 0 18px;
      }
      .logic-row {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
      }
      .logic-row:last-child {
        border-bottom: 0;
      }
      .logic-row span {
        color: var(--muted);
      }
      .logic-row b {
        text-align: right;
      }
      .formula {
        margin-top: 17px;
        padding: 15px;
        border-radius: 15px;
        background: #071522;
        border: 1px dashed rgba(81, 214, 255, 0.23);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        color: #c6f3ff;
      }

      .examples {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 28px;
      }
      .example {
        padding: 24px;
        border-radius: 24px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.027);
      }
      .example .label {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 850;
      }
      .compare {
        display: flex;
        align-items: flex-end;
        gap: 23px;
        margin: 18px 0;
      }
      .compare div small {
        color: var(--muted);
        display: block;
        font-size: 11px;
      }
      .compare strong {
        font-size: 38px;
        letter-spacing: -0.04em;
      }
      .arrow {
        font-size: 20px;
        color: #59708e;
        padding-bottom: 8px;
      }
      .insight {
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 13px;
      }
      .risk {
        background: rgba(255, 124, 141, 0.07);
        border: 1px solid rgba(255, 124, 141, 0.19);
        color: #ffd0d6;
      }
      .opp {
        background: rgba(97, 231, 166, 0.07);
        border: 1px solid rgba(97, 231, 166, 0.19);
        color: #cbf7df;
      }

      .alert-shell {
        margin-top: 28px;
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 18px;
      }
      .alerts {
        display: grid;
        gap: 10px;
      }
      .alert {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 17px;
        /* background: rgba(255, 255, 255, 0.025); */
      }
      .alert-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      .alert strong {
        font-size: 13px;
        display: block;
      }
      .alert p {
        margin: 2px 0 0;
        color: var(--muted);
        font-size: 12px;
      }
      .time {
        font-size: 10px;
        color: #6f86a5;
      }
      .side-panel {
        padding: 22px;
        border-radius: 24px;
        border: 1px solid var(--line);
      }
      .side-panel ul {
        padding-left: 18px;
        color: #c5d1e0;
        font-size: 14px;
      }
      .side-panel li {
        margin: 8px 0;
      }
      .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }
      .badge {
        font-size: 11px;
        padding: 7px 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: #c9d5e5;
      }

      .matrix {
        overflow-x: auto;
        margin-top: 28px;
        border: 1px solid var(--line);
        border-radius: 22px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        min-width: 760px;
      }
      th,
      td {
        padding: 15px 16px;
        text-align: left;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
      }
      th {
        color: #a8bad1;
        background: rgba(255, 255, 255, 0.03);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      td {
        color: #dfe7f1;
      }
      tr:last-child td {
        border-bottom: none;
      }
      .pill {
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 850;
      }
      .pill-green {
        background: rgba(97, 231, 166, 0.1);
        color: #9af1c5;
      }
      .pill-amber {
        background: rgba(255, 199, 107, 0.1);
        color: #ffdc9f;
      }
      .pill-red {
        background: rgba(255, 124, 141, 0.1);
        color: #ffbbc4;
      }

      .faq {
        margin-top: 28px;
      }
      details {
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.025);
        padding: 0 17px;
        margin: 10px 0;
      }
      summary {
        cursor: pointer;
        list-style: none;
        font-weight: 800;
        padding: 17px 2px;
      }
      summary::-webkit-details-marker {
        display: none;
      }
      summary::after {
        content: "+";
        float: right;
        color: #7fdfff;
        font-size: 20px;
      }
      details[open] summary::after {
        content: "–";
      }
      details p {
        color: var(--muted);
        font-size: 14px;
        margin: 0;
        padding: 0 2px 17px;
      }

      .cta {
        margin: 34px 0 74px;
        padding: 34px;
        border-radius: 28px;
        border: 1px solid rgba(81, 214, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
      }
      .cta h2 {
        font-size: 34px;
      }
      .cta p {
        color: var(--muted);
        margin: 8px 0 0;
        max-width: 700px;
      }
      footer {
        border-top: 1px solid var(--line);
        padding: 26px 0 44px;
        color: #7289a8;
        font-size: 12px;
      }
      .footer-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
      }
      .compliance {
        margin-top: 16px;
        font-size: 11px;
        color: #657d9b;
      }

      @media (max-width: 900px) {
        .nav-links {
          display: none;
        }
        .hero-grid,
        .how,
        .alert-shell {
          grid-template-columns: 1fr;
        }
        .cards {
          grid-template-columns: 1fr 1fr;
        }
        .examples {
          grid-template-columns: 1fr;
        }
        .hero {
          padding-top: 55px;
        }
      }
      @media (max-width: 620px) {
        /* .wrap {
          width: min(100% - 24px, 1180px);
        } */
        .cards,
        .mini-grid,
        .price-row {
          grid-template-columns: 1fr;
        }
        .cta {
          align-items: flex-start;
          flex-direction: column;
        }
        .hero h1 {
          font-size: 44px;
        }
        .compare strong {
          font-size: 31px;
        }
      }