/* === hero-home === */
.hhero{background:var(--ssla-bg-color, var(--shell-bg-dark, #1a2a45));position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.hhero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0v80M0 40h80' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
.hhero::after{content:"";position:absolute;bottom:-120px;right:-60px;width:500px;height:500px;background:radial-gradient(circle,rgba(226,160,63,0.06) 0%,transparent 70%);pointer-events:none;z-index:0}
.hhero-inner{max-width:1100px;margin:0 auto;padding:60px 48px 120px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;position:relative;z-index:1}
.hhero-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:32px}
.hhero-eyebrow::before{content:"";width:36px;height:2px;background:var(--shell-accent,currentColor)}
.hhero-eyebrow span{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--shell-accent,currentColor)}
.hhero h1{font-size:var(--paint-h1-size, 52px);font-weight:900;color:#fff;line-height:1.08;letter-spacing:-2px;margin:0 0 28px}
.hhero-body{font-size:var(--paint-body-size, 18px);color:rgba(255,255,255,0.6);line-height:var(--paint-body-line-height, 1.75);margin:0 0 40px;max-width:480px}
.hhero-body p{margin:0}
.hhero-body strong{color:rgba(255,255,255,0.85)}
.hhero-actions{display:flex;gap:20px;flex-wrap:wrap}
.hhero-btn-primary{display:inline-block;background:var(--shell-accent,currentColor);color:#fff!important;padding:16px 38px;font-size:13px;font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .hhero-btn-primary:hover{filter:brightness(.9);transform:translateY(-2px);box-shadow:0 8px 25px rgba(226,160,63,.3)}
 */
.hhero-btn-primary:hover{/* paint retired; global rule provides lift */}
.hhero-btn-primary:empty{display:none}
.hhero-btn-outline{display:inline-block;border:2px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8)!important;padding:14px 36px;font-size:13px;font-weight:700;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .hhero-btn-outline:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)!important}
 */
.hhero-btn-outline:hover{/* paint retired; global rule provides lift */}
.hhero-btn-outline:empty{display:none}
.hhero-domains{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hhero-dcard{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:32px 24px;transition:all .4s}
.hhero-dcard:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);border-color:rgba(255,255,255,.14)}
.hhero-dbar{width:24px;height:3px;background:var(--dc);margin-bottom:16px}
.hhero-dlabel{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--dc);margin:0 0 8px}
.hhero-dcard h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px}
.hhero-dcard p{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.6;margin:0}
@media(max-width:960px){.hhero-inner{grid-template-columns:1fr;gap:48px}.hhero-domains{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hhero-inner{padding:120px 24px 80px}.hhero h1{font-size:36px}.hhero-domains{grid-template-columns:1fr}}

/* === variant: mode=light ===
   Selector scope: .ssla-hero-home--mode-light (emitted by SSLA_Block_Bridge::build_classes).
   Per contract §7.6: class-modifier convention is .ssla-{slug}--{dim}-{value}.
   Base .hhero styles target the dark look; light variant overrides color-sensitive props. */
.ssla-hero-home--mode-light .hhero{background:var(--ssla-bg-color, var(--shell-bg-warm,#f7f5f0))!important}
.ssla-hero-home--mode-light .hhero::before{background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0v80M0 40h80' stroke='rgba(0,0,0,0.03)' stroke-width='1'/%3E%3C/svg%3E")}
.ssla-hero-home--mode-light .hhero::after{background:radial-gradient(circle,rgba(226,160,63,0.12) 0%,transparent 70%)}
.ssla-hero-home--mode-light .hhero h1{color:var(--shell-h,#1a2a45)}
.ssla-hero-home--mode-light .hhero-body{color:rgba(26,42,69,0.68)}
.ssla-hero-home--mode-light .hhero-body strong{color:var(--shell-h,#1a2a45)}
.ssla-hero-home--mode-light .hhero-btn-outline{border-color:rgba(26,42,69,0.2);color:rgba(26,42,69,0.75)!important}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-hero-home--mode-light .hhero-btn-outline:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)!important}
 */
.ssla-hero-home--mode-light .hhero-btn-outline:hover{/* paint retired; global rule provides lift */}
.ssla-hero-home--mode-light .hhero-dcard{border-color:rgba(26,42,69,0.08);background:rgba(255,255,255,0.5)}
.ssla-hero-home--mode-light .hhero-dcard:hover{background:#fff;border-color:rgba(26,42,69,0.14)}
.ssla-hero-home--mode-light .hhero-dcard h4{color:var(--shell-h,#1a2a45)}
.ssla-hero-home--mode-light .hhero-dcard p{color:rgba(26,42,69,0.55)}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .hhero h1{color: #ffffff}
.ssla-tone-dark .hhero-body{color: rgba(255, 255, 255, 0.6)}
.ssla-tone-light .hhero h1{color: var(--shell-h, #1a2a45)}
.ssla-tone-light .hhero-body{color: rgba(26, 42, 69, 0.68)}