/* ============================================================================
   DealRule landing — Hero v1 (2026-10)
   Scoped: does not alter the existing catalogue, pricing, or footer sections.
   Background remains the existing /img/fon.webp.
   ============================================================================ */
.hero-section.dr-hero {
    position: relative;
    min-height: min(920px, 100svh);
    overflow: hidden;
    isolation: isolate;
    color: #f2f7fa;
    background-color: #0d1117;
    background-image: linear-gradient(90deg, rgba(13,17,23,.98) 0%, rgba(13,17,23,.90) 34%, rgba(13,17,23,.47) 73%, rgba(13,17,23,.53) 100%), url('../img/fon.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
html[data-bs-theme="light"] .hero-section.dr-hero,
html[data-bs-theme="dark"] .hero-section.dr-hero {
    background-image: linear-gradient(90deg, rgba(13,17,23,.98) 0%, rgba(13,17,23,.90) 34%, rgba(13,17,23,.47) 73%, rgba(13,17,23,.53) 100%), url('../img/fon.webp');
}
.dr-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 70% 45%, rgba(23,143,98,.10), transparent 48%); pointer-events: none; }
.dr-hero__container { width: min(1480px, calc(100% - 88px)); margin: 0 auto; padding: 64px 0 160px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(30px, 4vw, 76px); }
.dr-hero__content { min-width: 0; position: relative; z-index: 2; }
.dr-hero__brand { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(32px, 4vw, 60px); }
.dr-hero__brand-mark { display: block; width: 54px; height: 54px; object-fit: contain; }
.dr-hero__brand-name { font-size: clamp(25px, 2.2vw, 34px); font-weight: 760; letter-spacing: -.055em; line-height: 1; color: #f7fbff; }
.dr-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; margin-bottom: 25px; border: 1px solid rgba(64,189,134,.3); background: rgba(8,44,48,.48); border-radius: 999px; color: #62d6a4; font-size: 14px; font-weight: 600; }
.dr-hero__headline { margin: 0 0 26px; color: #f7fbff; font-size: clamp(37px, 3.15vw, 60px); font-weight: 770; line-height: 1.13; letter-spacing: -.043em; text-wrap: balance; }
.dr-hero__headline span { display: block; }
.dr-hero__headline-accent { color: #40c77b; }
.dr-hero__lead { max-width: 670px; margin: 0 0 25px; color: #b9c8d7; line-height: 1.58; font-size: clamp(16px, 1.14vw, 19px); }
.dr-hero__benefits { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0 0 26px; }
.dr-hero__benefits li { display: flex; align-items: center; gap: 13px; font-size: clamp(14px, 1vw, 16px); color: #edf5f6; line-height: 1.45; }
.dr-hero__benefit-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; color: #4cdd98; background: rgba(19,75,61,.5); border: 1px solid rgba(78,207,143,.18); border-radius: 10px; font-size: 17px; }
.dr-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dr-hero__button { min-height: 52px; padding: 13px 21px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 9px; text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1.25; transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dr-hero__button:hover { transform: translateY(-2px); }
.dr-hero__button:focus-visible { outline: 3px solid #92f5c2; outline-offset: 3px; }
.dr-hero__button--primary { color: #fff; border: 1px solid #34a853; background: linear-gradient(120deg, #34a853, #149e6b); box-shadow: 0 8px 25px rgba(7,133,83,.18); }
.dr-hero__button--primary:hover { color: #fff; background: linear-gradient(120deg, #2c9949, #078a60); box-shadow: 0 11px 28px rgba(7,133,83,.24); }
.dr-hero__button--secondary { color: #eaf3f5; background: rgba(13,20,28,.68); border: 1px solid rgba(211,228,237,.33); }
.dr-hero__button--secondary:hover { color: #fff; background: rgba(30,48,60,.88); border-color: rgba(211,228,237,.58); }
.dr-hero__demo-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: #9dafbb; font-size: 12px; line-height: 1.5; }
.dr-hero__demo-note i { flex: 0 0 auto; color: #45d590; }

/* CSS-rendered browser/tablet frame + actual DealRule dashboard screenshot. */
.dr-hero__visual { position: relative; min-width: 0; padding: 45px 0 70px; scroll-margin-top: 72px; }
.dr-hero__visual::before { content: ""; position: absolute; z-index: -1; width: 90%; height: 72%; top: 12%; left: 10%; background: radial-gradient(ellipse, rgba(42,153,109,.2), transparent 66%); filter: blur(22px); }
.dr-hero__device { display: block; position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #0d1524; border: 6px solid #26343e; outline: 1px solid rgba(173,206,212,.28); box-shadow: 0 32px 95px rgba(0,0,0,.62), 0 0 34px rgba(36,173,116,.08); transform: perspective(1200px) rotateY(-4deg); transform-origin: 50% 50%; }
.dr-hero__device::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); pointer-events: none; }
.dr-hero__device-topbar { height: 35px; display: flex; align-items: center; gap: 12px; padding: 0 13px; background: #172333; border-bottom: 1px solid #29394b; font-size: 10px; color: #91a8ba; }
.dr-hero__device-topbar > i { margin-left: auto; color: #6a8295; }
.dr-hero__traffic { display: flex; gap: 5px; }
.dr-hero__traffic span { width: 7px; height: 7px; border-radius: 50%; background: #657b8f; }
.dr-hero__traffic span:first-child { background: #bf5362; }
.dr-hero__traffic span:nth-child(2) { background: #c9a34c; }
.dr-hero__traffic span:nth-child(3) { background: #42a47a; }
.dr-hero__device img { display: block; width: 100%; height: auto; aspect-ratio: 1680 / 873; object-fit: cover; }
.dr-hero__stat { position: absolute; width: clamp(186px, 17vw, 250px); padding: 15px 17px; z-index: 2; color: #f1f7f7; border-radius: 15px; background: linear-gradient(135deg, rgba(21,43,49,.97), rgba(15,26,40,.97)); border: 1px solid rgba(56,176,117,.4); box-shadow: 0 18px 44px rgba(0,0,0,.43); backdrop-filter: blur(14px); }
.dr-hero__stat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 11px; font-weight: 700; }
.dr-hero__stat-header i { color: #51d68f; font-size: 15px; }
.dr-hero__stat strong { display: block; font-size: clamp(21px, 2vw, 30px); letter-spacing: -.035em; white-space: nowrap; line-height: 1.2; }
.dr-hero__stat small { display: block; font-size: 10px; margin-top: 5px; color: #bdcbd2; line-height: 1.4; }
.dr-hero__stat--forecast { left: -9%; bottom: -9%; }
.dr-hero__stat--risk { right: -5%; top: -3%; width: clamp(176px, 16vw, 226px); border-color: rgba(217,83,94,.35); }
.dr-hero__stat--risk .dr-hero__stat-header i { color: #f46e76; }
.dr-hero__stat--growth { right: -5%; bottom: -18%; width: clamp(184px, 16vw, 228px); }
.dr-hero__stat-bars { display: flex; height: 31px; margin-top: 13px; align-items: end; gap: 5px; }
.dr-hero__stat-bars i { flex: 1 1 0; height: 40%; background: #20b77e; border-radius: 2px 2px 0 0; }
.dr-hero__stat-bars i:nth-child(2) { height: 48%; } .dr-hero__stat-bars i:nth-child(3) { height: 58%; }
.dr-hero__stat-bars i:nth-child(4) { height: 52%; } .dr-hero__stat-bars i:nth-child(5) { height: 70%; }
.dr-hero__stat-bars i:nth-child(6) { height: 66%; } .dr-hero__stat-bars i:nth-child(7) { height: 78%; }
.dr-hero__stat-bars i:nth-child(8) { height: 88%; } .dr-hero__stat-bars i:nth-child(9) { height: 100%; }
.dr-hero__stat-indicator { height: 4px; margin-top: 13px; background: #213e36; border-radius: 20px; overflow: hidden; }
.dr-hero__stat-indicator::before { content: ""; display: block; height: 100%; width: 78%; background: #44cd8a; }
.dr-hero__stat-indicator--risk { background: #443039; }
.dr-hero__stat-indicator--risk::before { background: #e95f6c; width: 87%; }
.dr-hero__sample-label { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #95a8b1; white-space: nowrap; }

/* Tablet: vertical composition, full-width buttons and dashboard, no overlap. */
@media (max-width: 1199.98px) {
    .hero-section.dr-hero { min-height: 0; background-position: 54% center; }
    .dr-hero__container { width: min(820px, calc(100% - 56px)); padding: 48px 0 72px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .dr-hero__brand { margin-bottom: 34px; }
    .dr-hero__headline { max-width: 820px; font-size: clamp(40px, 5.5vw, 58px); }
    .dr-hero__lead { max-width: 730px; font-size: 17px; }
    .dr-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .dr-hero__visual { padding: 10px 0 0; }
    .dr-hero__device { transform: none; }
    .dr-hero__stat { position: relative; left: auto; right: auto; top: auto; bottom: auto; min-width: 0; width: auto; padding: 13px 15px; }
    .dr-hero__visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
    .dr-hero__device { grid-column: 1 / -1; }
    .dr-hero__stat strong { font-size: clamp(18px, 2.6vw, 24px); }
    .dr-hero__stat--forecast, .dr-hero__stat--risk, .dr-hero__stat--growth { width: auto; }
    .dr-hero__sample-label { position: static; grid-column: 1 / -1; justify-self: center; transform: none; margin-top: 4px; }
}
@media (max-width: 767.98px) {
    .dr-hero__container { width: calc(100% - 36px); padding-top: 35px; }
    .dr-hero__brand-mark { width: 44px; height: 44px; }
    .dr-hero__brand-name { font-size: 26px; }
    .dr-hero__eyebrow { font-size: 12px; }
    .dr-hero__headline { font-size: clamp(34px, 7vw, 50px); }
    .dr-hero__lead { font-size: 16px; }
    .dr-hero__actions { grid-template-columns: 1fr; }
    .dr-hero__button { width: 100%; }
    .dr-hero__visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dr-hero__stat--growth { display: none; }
    .dr-hero__stat strong { font-size: 20px; }
}
@media (max-width: 450px) {
    .dr-hero__headline { font-size: 35px; }
    .dr-hero__brand { margin-bottom: 25px; }
    .dr-hero__visual { grid-template-columns: 1fr; }
    .dr-hero__stat--growth { display: none; }
    .dr-hero__device { border-width: 3px; border-radius: 13px; }
    .dr-hero__device-topbar { height: 25px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .dr-hero__button { transition: none; }
    .dr-hero__button:hover { transform: none; }
}