/* ===== HUNNU 2027 hero: cover style (#333333, mixer on route, ISO badge) ===== */
.hero.hero-2027 { background: #333333; color: #fff; min-height: 650px; }
.hero.hero-2027 > img, .hero.hero-2027 .hero-shade { display: none; }
.hero-2027 .hero-content { padding: 70px 6% 120px; max-width: 760px; box-sizing: content-box; }
.hero-2027 .eyebrow { color: #F2F2F2; letter-spacing: .2em; }
.hero-2027 .eyebrow span { background: #FCC828; width: 28px; height: 3px; margin-right: 14px; } /* only yellow accent */
.hero-2027 h1 { color: #fff; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 28px; }
.hero-2027 .intro { color: #E6E6E6; }
.hero-2027 .hero-art { position: absolute; right: 5%; bottom: 96px; width: min(46vw, 660px); height: auto; pointer-events: none; }
.hero-2027 .hero-foot { border-top-color: #5A5A5A; color: #E6E6E6; align-items: center; }
.hero-2027 .hero-iso { display: inline-block; background: #E6E6E6; color: #333333; font-weight: 600; letter-spacing: .12em; padding: 6px 10px; border-radius: 4px; line-height: 1.2; }
/* map-grid texture (Tigo chose option A, 2026-10-30) */
.hero-2027::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 .5H160M.5 0V160' stroke='%23fff' stroke-opacity='.09' stroke-width='1'/%3E%3Cpath d='M0 32.5H160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M0 64.5H160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M0 96.5H160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M0 128.5H160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M32.5 0V160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M64.5 0V160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M96.5 0V160' stroke='%23fff' stroke-opacity='.035'/%3E%3Cpath d='M128.5 0V160' stroke='%23fff' stroke-opacity='.035'/%3E%3C/svg%3E") 0 0 / 160px 160px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 45%, #000 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 45%, #000 100%); }
@media (max-width: 1180px) {
  .hero.hero-2027 { flex-direction: column; align-items: stretch; }
  .hero-2027 .hero-content { padding-bottom: 0; max-width: none; box-sizing: border-box; }
  .hero-2027 .hero-art { position: relative; right: auto; bottom: auto; width: min(100%, 560px); align-self: flex-end; margin: 8px 4% 104px auto; }
}
@media (max-width: 700px) {
  .hero-2027 .hero-art { width: 100%; margin: 4px 0 96px; padding: 0 3%; box-sizing: border-box; }
  .hero-2027 .hero-foot { flex-wrap: wrap; gap: 12px; }
  .hero-2027 .hero-foot span:last-child { display: inline-block; } /* keep ISO badge on mobile */
}

/* ===== Light variant: <section class="hero hero-2027 hero-light"> ===== */
.hero.hero-2027.hero-light { background: #F5F5F5; color: #333333; }
.hero-light::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 .5H160M.5 0V160' stroke='%23333' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M0 32.5H160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M0 64.5H160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M0 96.5H160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M0 128.5H160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M32.5 0V160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M64.5 0V160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M96.5 0V160' stroke='%23333' stroke-opacity='.045'/%3E%3Cpath d='M128.5 0V160' stroke='%23333' stroke-opacity='.045'/%3E%3C/svg%3E"); }
.hero-light .eyebrow { color: #333333; }
.hero-light h1 { color: #333333; }
.hero-light .intro { color: #5A5A5A; }
.hero-light .actions { background: #FFFFFF; box-shadow: 0 0 0 1px #E0E0E0; }
.hero-light .button:not(.ghost) { background: #333333; border-color: #333333; color: #FFFFFF; }
.hero-light .button:not(.ghost):hover { background: #4A4A4A; }
.hero-light .button.ghost { background: transparent; color: #333333; }
.hero-light .hero-foot { border-top-color: #D6D6D6; color: #5A5A5A; }
.hero-light .hero-iso { background: #333333; color: #FFFFFF; }
.hero-light .r-base { stroke: #C4C4C4; }
.hero-light .r-dash { stroke: #8C8C8C; }
.hero-light .r-origin { fill: #F5F5F5; stroke: #8C8C8C; }
.hero-light .r-pin { fill: #333333; }
/* Optional: follow the site theme toggle (light hero by default, dark hero in dark mode) */
[data-theme="dark"] .hero.hero-2027.hero-light { background: #333333; color: #fff; }
[data-theme="dark"] .hero-light::before { background-image: none; }

/* ===== Map hero (v2): city map + route on streets, replaces .hero-art and ::before grid ===== */
.hero-2027 { --map-street: #393939; --map-road: #404040; --map-casing: #2F2F2F; --map-park: #373737; --map-river: #2D2D2D;
  --route: #E6E6E6; --route-glow: rgba(255,255,255,.07); --route-base: #6A6A6A; --pin: #FFFFFF; --pin-fill: #333333; --origin-fill: #333333; --origin: #8C8C8C; }
.hero-2027.hero-light { --map-street: #EAEAEA; --map-road: #FFFFFF; --map-casing: #E0E0E0; --map-park: #EDEDED; --map-river: #E6E6E6;
  --route: #333333; --route-glow: rgba(51,51,51,.06); --route-base: #C4C4C4; --pin: #333333; --pin-fill: #F5F5F5; --origin-fill: #F5F5F5; --origin: #8C8C8C; }
[data-theme="dark"] .hero-2027.hero-light { --map-street: #393939; --map-road: #404040; --map-casing: #2F2F2F; --map-park: #373737; --map-river: #2D2D2D;
  --route: #E6E6E6; --route-glow: rgba(255,255,255,.07); --route-base: #6A6A6A; --pin: #FFFFFF; --pin-fill: #333333; --origin-fill: #333333; }
.hero-2027::before { display: none; }
.hero-2027 .hero-content, .hero-2027 .hero-foot { z-index: 2; }
.hero-2027 .hero-art { display: none; }
.hero-2027 .hero-map { position: absolute; top: 0; right: 0; height: 100%; width: 72%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 30%); }
.hero-map .m-street { stroke: var(--map-street); stroke-width: 1.5; }
.hero-map .m-road-casing { stroke: var(--map-casing); stroke-width: 12; stroke-linecap: round; }
.hero-map .m-road { stroke: var(--map-road); stroke-width: 8; stroke-linecap: round; }
.hero-map .m-park { fill: var(--map-park); }
.hero-map .m-river { fill: var(--map-river); }
.hero-map .r-base { stroke: var(--route-base); }
.hero-map .r-glow { stroke: var(--route-glow); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.hero-map .r-dash { stroke: var(--route); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .5 14; animation: hm-move 1.6s linear infinite; }
.hero-map .r-origin { fill: var(--origin-fill); stroke: var(--origin); }
.hero-map .r-pin { fill: var(--pin-fill); stroke: var(--pin); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hero-map .r-pin-dot { fill: var(--pin); }
.hero-map .r-pin-solid { fill: var(--pin); }
.hero-map .m-flagpole { stroke: var(--pin); stroke-width: 2; }
.hero-map .r-B { fill: var(--pin-fill); font: 600 17px 'JetBrains Mono', ui-monospace, monospace; }
.hero-map .r-ico { fill: none; stroke: var(--pin-fill); stroke-width: 2; stroke-linejoin: round; }

.hero-map .r-shadow { fill: rgba(0,0,0,.25); }
.hero-map .r-pulse { fill: none; stroke: var(--route); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hm-pulse 2.4s ease-out infinite; }
.hero-map .r-pulse2 { animation-delay: 1.2s; }
@keyframes hm-move { to { stroke-dashoffset: 29; } }
@keyframes hm-pulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-map .r-dash, .hero-map .r-pulse { animation: none; } }

/* REPORT360 info chips on the map. Font: JetBrains Mono (Cyrillic) —
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400&display=swap" rel="stylesheet"> */
.hero-2027 { --chip-bg: rgba(58,58,58,.92); --chip-stroke: #4E4E4E; --chip-label: #A6A6A6; --chip-value: #FFFFFF; }
.hero-2027.hero-light { --chip-bg: rgba(255,255,255,.95); --chip-stroke: #E0E0E0; --chip-label: #8C8C8C; --chip-value: #333333; }
[data-theme="dark"] .hero-2027.hero-light { --chip-bg: rgba(58,58,58,.92); --chip-stroke: #4E4E4E; --chip-label: #A6A6A6; --chip-value: #FFFFFF; }
.hero-map .c-bg { fill: var(--chip-bg); stroke: var(--chip-stroke); stroke-width: 1; }
.hero-map .c-label { fill: var(--chip-label); font: 400 10.5px 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.hero-map .c-value { fill: var(--chip-value); font: 200 16px 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: -.01em; }
.hero-map .c-tick { stroke: var(--chip-stroke); stroke-width: 1.5; stroke-dasharray: 2 4; }
.hero-map .c-live { fill: #FCC828; }
.hero-map .c-live-ring { fill: none; stroke: #FCC828; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hm-pulse 2s ease-out infinite; }
@media (max-width: 700px) { .hero-map .chip, .hero-map .c-tick { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-map .c-live-ring { animation: none; } }
@media (max-width: 1180px) {
  .hero-2027 .hero-map { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 8px 0 96px; align-self: stretch;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
}

/* ===== Animated hero (optional): add hero-anim.js; SVG must have data-anim ===== */
.hero-map .r-done { stroke: var(--route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 1; fill: none; }
.hero-map .r-gps { fill: var(--pin); }
.hero-map .r-gps-ring { fill: none; stroke: var(--pin); stroke-width: 1.5; opacity: .35; }
.hero-map .r-b-pulse { fill: none; stroke: var(--pin); stroke-width: 1.5; opacity: 0; }
.hero-map[data-anim] .r-dash { animation: none; }