/* DATAQ promo: the one DATAQ section on the landing, Why HOAPOST and demo
   pages, always the last thing before the footer. One file so the three
   pages can't drift. Every selector is under .dq-promo so the pages' own
   h2/p/ul/a rules can't reach in, and nothing here reaches out. */

.dq-promo {
    position: relative;
    overflow: hidden;
    padding: 96px 24px;
    background:
        radial-gradient(1100px 520px at 88% -10%, rgba(99, 102, 241, 0.38), transparent 60%),
        radial-gradient(900px 520px at -5% 110%, rgba(14, 165, 233, 0.24), transparent 60%),
        #0b1220;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
}
.dq-promo *,
.dq-promo *::before,
.dq-promo *::after { box-sizing: border-box; }

.dq-promo .dq-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

/* ── Words ── */
.dq-promo .dq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #c7d2fe;
}
.dq-promo .dq-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
}
.dq-promo .dq-brand {
    display: block;
    margin: 26px 0 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: #a5b4fc;
}
.dq-promo .dq-title {
    margin: 0 0 20px;
    font-size: clamp(2.3rem, 4.8vw, 3.75rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #ffffff;
}
.dq-promo .dq-title span {
    background: linear-gradient(90deg, #818cf8 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dq-promo .dq-lead {
    margin: 0 0 32px;
    max-width: 560px;
    font-size: 1.18rem;
    line-height: 1.65;
    color: #cbd5e1;
}

.dq-promo .dq-points {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    gap: 18px;
}
.dq-promo .dq-points li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0;
}
.dq-promo .dq-ico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.28), rgba(56, 189, 248, 0.18));
    border: 1px solid rgba(165, 180, 252, 0.32);
    color: #c7d2fe;
}
.dq-promo .dq-ico svg { width: 21px; height: 21px; }
.dq-promo .dq-points strong {
    display: block;
    margin-bottom: 2px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}
.dq-promo .dq-points span {
    font-size: 0.97rem;
    line-height: 1.5;
    color: #94a3b8;
}

.dq-promo .dq-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.dq-promo .dq-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(99, 102, 241, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dq-promo .dq-btn svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.dq-promo .dq-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(99, 102, 241, 0.55);
}
.dq-promo .dq-btn:hover svg { transform: translateX(3px); }
.dq-promo .dq-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.dq-promo .dq-url {
    font-size: 0.95rem;
    font-weight: 500;
    color: #94a3b8;
}

/* ── Picture: an example of the board books ── */
.dq-promo .dq-card {
    position: relative;
    padding: 28px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 34px 90px rgba(2, 6, 23, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.dq-promo .dq-card::before {
    /* soft glow behind the card */
    content: "";
    position: absolute;
    inset: -40px -30px auto auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.35), transparent 70%);
    z-index: -1;
}
.dq-promo .dq-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.dq-promo .dq-card-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
}
.dq-promo .dq-card-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #94a3b8;
}
.dq-promo .dq-tag {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #94a3b8;
}

.dq-promo .dq-row { margin-bottom: 20px; }
.dq-promo .dq-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 9px;
    font-size: 0.92rem;
    color: #cbd5e1;
}
.dq-promo .dq-row-top b { font-weight: 600; color: #ffffff; }
.dq-promo .dq-row-top em { font-style: normal; color: #94a3b8; }
.dq-promo .dq-delta { font-weight: 700; white-space: nowrap; }
.dq-promo .dq-over { color: #fda4af; }
.dq-promo .dq-under { color: #6ee7b7; }
.dq-promo .dq-even { color: #cbd5e1; }

.dq-promo .dq-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
}
.dq-promo .dq-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #38bdf8);
}
.dq-promo .dq-bar i.dq-bar-over { background: linear-gradient(90deg, #6366f1, #f43f5e); }
/* The budget line: everything past it is over */
.dq-promo .dq-bar b {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 87%;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
}

.dq-promo .dq-flag {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 26px;
    padding: 15px 17px;
    border-radius: 15px;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.32);
}
.dq-promo .dq-flag-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.22);
}
.dq-promo .dq-flag strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 700;
    color: #fecdd3;
}
.dq-promo .dq-flag span {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #cbd5e1;
}

/* ── Phones and tablets: words first, picture under ── */
@media (max-width: 900px) {
    .dq-promo { padding: 64px 20px; }
    .dq-promo .dq-inner { grid-template-columns: 1fr; gap: 44px; }
    .dq-promo .dq-lead { font-size: 1.06rem; }
}
@media (max-width: 480px) {
    .dq-promo { padding: 56px 16px; }
    .dq-promo .dq-card { padding: 22px 18px; }
    /* Name and change on one line, the amounts under them */
    .dq-promo .dq-row-top { flex-wrap: wrap; row-gap: 2px; }
    .dq-promo .dq-row-top em { order: 3; flex-basis: 100%; font-size: 0.85rem; }
    .dq-promo .dq-btn { width: 100%; justify-content: center; }
    .dq-promo .dq-url { width: 100%; text-align: center; }
}