/* Page styles for products/dataharmony.html — extracted by design system refactor */
/* All tokens from /assets/css/styles.css apply. */

/* DataHarmony Specific Styles */
    :root {
      --dh-red: #dc2626;
      --dh-red-soft: rgba(220,38,38,0.15);
    }

    /* Hero */
    .dc-hero--dh,
.dh-hero { margin-top:0; background:var(--c-dark); position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; }
    .dh-hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse at 65% 40%, rgba(220,38,38,0.15) 0%, transparent 55%), radial-gradient(ellipse at 10% 70%, rgba(248,113,113,0.08) 0%, transparent 45%), var(--c-dark); }
    #radarCanvas { position:absolute; right:5%; top:50%; transform:translateY(-50%); width:380px; height:380px; display:block; z-index:1; }
    .dh-hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--cw); margin: 0 auto; padding: calc(var(--nav-h) + 5rem) var(--cp) 4rem; }
    .product-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .9rem; background:rgba(220,38,38,0.15); border:1px solid rgba(220,38,38,0.35); border-radius: var(--r-full); font-size:.72rem; font-weight: var(--fw-semibold); color:#f87171; letter-spacing: var(--ls-wide); text-transform:uppercase; margin-bottom:1.5rem; }
    .dh-hero h1 { font-family:'Google Sans Display',sans-serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight: var(--fw-normal); line-height:1.1; color:#fff; margin-bottom:1.25rem; max-width: 700px; }
    .dh-hero h1 strong { font-weight: var(--fw-bold); color:#f87171; }
    .dh-hero-sub { font-size:1rem; color:rgba(255,255,255,.65); line-height: var(--lh-relaxed); max-width:650px; margin-bottom:2.5rem; }
    .dh-ctas { display:flex; gap:.75rem; flex-wrap:wrap; }
    .btn-dh { padding:.8rem 1.8rem; background:#dc2626; color:#fff; font-size:.9rem; font-weight: var(--fw-semibold); text-decoration:none; border-radius: var(--r-full); transition: background var(--t-fast); display:inline-flex; align-items:center; gap:.4rem; }
    .btn-dh:hover { background:#b91c1c; }

    /* Trust Bar */
    .dh-trust { background:#111827; border-bottom:1px solid rgba(255,255,255,.06); padding:1.25rem 0; }
    .dh-trust-inner { max-width:var(--cw); margin:0 auto; padding:0 var(--cp); display:flex; gap:4rem; flex-wrap:wrap; align-items:center; }
    .dh-trust-item { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:rgba(255,255,255,.6); }
    .dh-trust-dot { width:6px; height:6px; border-radius:50%; background:#dc2626; }

    /* Base Section Classes */
    .pd-section { padding: var(--sv) 0; }
    .pd-section.gray { background:#f8f9fa; }
    .pd-section.dark { background:var(--c-dark); color:white; }
    .pd-section.dark2 { background:#111827; color:white; }
    .section-eyebrow { font-size:.7rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform:uppercase; margin-bottom:.75rem; color:#dc2626; }
    .pd-section.dark .section-eyebrow, .pd-section.dark2 .section-eyebrow { color:#f87171; }
    .pd-h2 { font-family:'Google Sans Display',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight: var(--fw-normal); color:#202124; line-height:1.15; margin-bottom:1rem; }
    .pd-section.dark .pd-h2, .pd-section.dark2 .pd-h2 { color:#fff; }
    .pd-lead { font-size:1rem; color:#3c4043; line-height: var(--lh-relaxed); max-width:680px; margin-bottom:2rem; }
    .pd-section.dark .pd-lead, .pd-section.dark2 .pd-lead { color:rgba(255,255,255,.65); }

    /* Problem Section */
    .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .threat-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
    .threat-stat-card { padding: 1.5rem; background: #fff; border: 1px solid #e8eaed; border-radius: var(--r-md); border-top: 3px solid #dc2626; }
    .threat-stat-num { font-family: 'Google Sans Display', sans-serif; font-size: 2rem; font-weight: var(--fw-bold); color: #dc2626; line-height: 1; margin-bottom: .5rem; }
    .threat-stat-label { font-size: .75rem; color: #5f6368; line-height: var(--lh-snug); }

    /* Live Feed Animation Box */
    .problem-visual { background: var(--c-dark); border-radius: var(--r-lg); padding: 2rem; border: 1px solid rgba(220,38,38,.2); display: flex; flex-direction: column; gap: .75rem; }
    .attack-type { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--r-md); }
    .attack-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .attack-icon.red { background: rgba(220,38,38,.15); color: #f87171; }
    .attack-icon.orange { background: rgba(249,115,22,.15); color: #fb923c; }
    .attack-icon.yellow { background: rgba(234,179,8,.15); color: #facc15; }
    .attack-name { font-size: .85rem; font-weight: var(--fw-semibold); color: #fff; margin-bottom: .2rem; }
    .attack-status { font-size: .7rem; color: rgba(255,255,255,.5); }
    .attack-badge { margin-left: auto; font-size: .65rem; font-weight: var(--fw-bold); padding: .25rem .6rem; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: var(--ls-tight); }
    .badge-blocked { background: rgba(220,38,38,.15); color: #f87171; }
    .badge-detected { background: rgba(249,115,22,.15); color: #fb923c; }
    .badge-mitigated { background: rgba(234,179,8,.15); color: #facc15; }

    /* Capabilities Grid */
    .caps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); margin-top: 3rem; }
    .cap-card { background: #111827; padding: 2rem; position: relative; overflow: hidden; transition: background var(--t-base); }
    .cap-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #dc2626; transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); }
    .cap-card:hover { background: #1a1f2e; }
    .cap-card:hover::after { transform: scaleX(1); }
    .cap-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(220,38,38,.15); color: #f87171; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .cap-title { font-size: .95rem; font-weight: var(--fw-semibold); color: #fff; margin-bottom: .75rem; }
    .cap-use-cases { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
    .cap-use-cases li { font-size: .78rem; color: rgba(255,255,255,.5); padding-left: 1rem; position: relative; line-height: var(--lh-snug); }
    .cap-use-cases li::before { content: ''; position: absolute; left: 0; top: .45rem; width: 4px; height: 4px; border-radius: 50%; background: #dc2626; }

    /* Benefits Grid */
    .dh-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
    .dh-benefit-card { background: #fff; border: 1px solid #e8eaed; border-radius: var(--r-md); padding: 1.75rem; display: flex; flex-direction: column; transition: box-shadow var(--t-base), transform .2s; }
    .dh-benefit-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
    .dh-benefit-icon { width: 46px; height: 46px; border-radius: var(--r-md); background: rgba(220,38,38,.08); color: #dc2626; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .dh-benefit-num { font-family: 'Google Sans Display', sans-serif; font-size: 1.5rem; font-weight: var(--fw-bold); color: #202124; margin-bottom: .25rem; line-height: 1; }
    .dh-benefit-title { font-size: .82rem; font-weight: var(--fw-semibold); color: #5f6368; text-transform: uppercase; letter-spacing: var(--ls-tight); margin-bottom: .6rem; }
    .dh-benefit-body { font-size: .82rem; color: #5f6368; line-height: var(--lh-normal); }

    /* CTA */
    .dh-cta { text-align: center; padding: var(--sv) 0; background: var(--c-dark); position: relative; overflow: hidden; }
    .dh-cta h2 { font-family: 'Google Sans Display', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: var(--fw-bold); color: #fff; margin-bottom: 1rem; }
    .dh-cta p { font-size: 1rem; color: rgba(255,255,255,.6); max-width: 520px; margin: 0 auto 2.25rem; line-height: 1.7; }
    .dh-cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .dh-cta-note { font-size: .8rem; color: rgba(255,255,255,.3); display: flex; gap: .35rem; justify-content: center; align-items: center; flex-wrap: wrap; }
    .dh-cta-note .sep { color: rgba(255,255,255,.15); }

    /* Responsive Overrides */
    @media (max-width: 992px) {
      .caps-grid { grid-template-columns: 1fr 1fr; }
      .dh-benefit-grid { grid-template-columns: 1fr 1fr; }
      .problem-grid { grid-template-columns: 1fr; }
      #radarCanvas { display: none; }
    }
    @media (max-width: 768px) {
      .dh-hero { min-height: auto; }
      .dh-hero-content { padding-top: calc(var(--nav-h) + 2.75rem); padding-bottom: 3rem; }
    }
    @media (max-width: 600px) {
      .dh-hero-content h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); line-height: 1.15; }
      .caps-grid { grid-template-columns: 1fr !important; gap: .75rem; }
      .cap-card { padding: 1.1rem; border-radius: var(--r-md); }
      .dh-benefit-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
      .dh-benefit-card { padding: 1.1rem; border-radius: var(--r-md); }
      .dh-benefit-num { font-size: 1.3rem; }
      .threat-stat { grid-template-columns: 1fr; }
      .dh-cta { text-align: center; }
      .dh-cta-btns { flex-wrap: wrap !important; gap: .5rem !important; justify-content: center !important; }
      .dh-cta-btns a { flex: 1; min-width: 140px; text-align: center !important; justify-content: center !important; }
    }
    @media (max-width: 390px) {
      .dh-benefit-grid { grid-template-columns: 1fr !important; }
      .cap-card { padding: .9rem; }
    }