/* hero.css — v3 light hero: warm ivory with festive colour pools, suit confetti, operator logo strip */

.hero { position: relative; overflow: hidden; background: #FFFDF9; border-bottom: 1px solid #ECE7DD; padding: 50px 0 42px; }
.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(720px 420px at 8% -15%, rgba(224, 49, 49, 0.09) 0%, rgba(224, 49, 49, 0) 60%), radial-gradient(640px 400px at 98% 0%, rgba(242, 164, 19, 0.12) 0%, rgba(242, 164, 19, 0) 58%), radial-gradient(560px 360px at 75% 115%, rgba(22, 138, 80, 0.08) 0%, rgba(22, 138, 80, 0) 60%), radial-gradient(420px 300px at 30% 120%, rgba(124, 58, 237, 0.06) 0%, rgba(124, 58, 237, 0) 60%); }
.hero::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg opacity='0.07'%3E%3Cpath fill='%23E03131' d='M36 22c-3 0-5 2.4-5 5.2 0 4.6 5 8.2 5 8.2s5-3.6 5-8.2c0-2.8-2-5.2-5-5.2z'/%3E%3Cpath fill='%23E03131' d='M150 80l5.5 9.5-5.5 9.5-5.5-9.5z'/%3E%3Cpath fill='%231A2332' d='M84 160c0-3 2.4-5.4 5.2-5.4 1.6 0 3 .8 3.8 2 .8-1.2 2.2-2 3.8-2 2.8 0 5.2 2.4 5.2 5.4 0 4.8-9 9.6-9 9.6s-9-4.8-9-9.6z'/%3E%3Cpath fill='%231A2332' d='M196 168a5 5 0 015 5c0 1.4-.6 2.6-1.5 3.5a5 5 0 01-3.5 8.5 5 5 0 01-3.5-8.5 5 5 0 01-1.5-3.5 5 5 0 015-5z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 240px; }
.hero .container { position: relative; z-index: 1; }
.hero .hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.4px; color: #C42525; border: 1px solid rgba(224, 49, 49, 0.3); border-radius: 40px; padding: 7px 16px; background: rgba(224, 49, 49, 0.06); margin: 0 0 20px; animation: heroRise 0.6s ease both; }
.hero .hero-eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 40px; background: #E03131; margin-right: 9px; animation: heroPulse 2.4s ease-in-out infinite; }
.hero .hero-title { font-size: 38px; line-height: 42px; font-weight: 800; letter-spacing: -1.4px; margin: 0 0 16px; max-width: 880px; color: #1A2332; animation: heroRise 0.6s 0.08s ease both; }
.hero .hero-title strong { font-weight: 800; background: linear-gradient(100deg, #E03131 0%, #F2A413 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .hero-sub { font-size: 17px; line-height: 28px; color: #5B6573; max-width: 680px; margin: 0 0 24px; animation: heroRise 0.6s 0.16s ease both; }
.hero .hero-sub strong { color: #168A50; }
.hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 30px; animation: heroRise 0.6s 0.24s ease both; }
.hero .hero-logostrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; animation: heroRise 0.6s 0.32s ease both; }
.hero .hero-logostrip .hero-logostrip-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: #8B94A3; margin-right: 4px; }
.hero .hero-logostrip .oplogo { width: 44px; height: 44px; border-radius: 10px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.hero .hero-logostrip .oplogo:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(26, 35, 50, 0.14); }
.hero .hero-logostrip .hero-logostrip-more { font-size: 12px; font-weight: 800; color: #C42525; }
.hero .hero-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; animation: heroRise 0.6s 0.4s ease both; }
.hero .hero-board .hero-board-cell { background: #FFFFFF; border: 1px solid #ECE7DD; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(26, 35, 50, 0.05); }
.hero .hero-board .hero-board-value { display: block; font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; color: #1A2332; }
.hero .hero-board .hero-board-label { display: block; font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #8B94A3; margin-top: 4px; }

@media (min-width: 768px) {
  .hero { padding: 70px 0 56px; }
  .hero .hero-title { font-size: 56px; line-height: 60px; letter-spacing: -2px; }
  .hero .hero-board { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .hero .hero-logostrip .oplogo { width: 50px; height: 50px; }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-actions, .hero .hero-board, .hero .hero-logostrip { animation: none; }
  .hero .hero-eyebrow::before { animation: none; }
}
.hero .hero-board a.hero-board-cell { display: block; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.hero .hero-board a.hero-board-cell:hover { transform: translateY(-2px); border-color: rgba(224, 49, 49, 0.45); box-shadow: 0 10px 24px rgba(26, 35, 50, 0.1); text-decoration: none; }