.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 160px 5% 90px }
.hero-bg { position: absolute; inset: 0; z-index: 0 }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: brightness(.35) saturate(.8) }
.hero-glow { position: absolute; top: 20%; right: 10%; width: 600px; height: 600px; background: radial-gradient(circle,rgba(42,157,117,.18) 0%,transparent 65%); z-index: 1; pointer-events: none }
.hero-in { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 420px; gap: 5rem; align-items: center }
.hero-chip { margin-bottom: 1.8rem }
.hero h1 { font-size: clamp(2.5rem,4.5vw,4.2rem); font-weight: 900; line-height: 1.05; letter-spacing: -.045em; margin-bottom: 1.5rem }
.hero h1 .hl { color: var(--mint); position: relative }
.hero-desc { font-size: 1rem; color: var(--t2); line-height: 1.9; margin-bottom: 2.2rem; max-width: 500px }
.hero-desc strong { color: var(--t1); font-weight: 600 }
.hero-btns { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.5rem }
.hero-social { display: flex; align-items: center; gap: 1rem }
.hero-social-line { height: 1px; width: 30px; background: var(--border2) }
.hero-social-text { font-size: .76rem; color: var(--t3) }

/* Hero card */
.hero-card { background: rgba(255,255,255,.05); border: 1px solid var(--border2); border-radius: 20px; padding: 1.8rem; backdrop-filter: blur(20px); position: relative; overflow: hidden }
.hero-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 280px; height: 280px; background: radial-gradient(circle,rgba(42,157,117,.15) 0%,transparent 65%); pointer-events: none }
.hc-label { font-size: .66rem; color: var(--t3); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem }
.hc-stats { display: flex; flex-direction: column; gap: .65rem }
.hc-stat { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; display: flex; align-items: center; gap: .85rem; transition: background .2s }
.hc-stat:hover { background: rgba(255,255,255,.07) }
.hc-ico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ico-g { background: rgba(42,157,117,.2); color: var(--mint) }
.ico-a { background: rgba(234,163,35,.15); color: #FCD34D }
.ico-b { background: rgba(99,102,241,.15); color: #A5B4FC }
.hc-val { font-size: 1.15rem; font-weight: 700; line-height: 1; letter-spacing: -.02em }
.hc-sub { font-size: .72rem; color: var(--t3); margin-top: 2px }
.hc-div { height: 1px; background: var(--border); margin: 1.1rem 0 }
.hc-spots { display: flex; justify-content: space-between; align-items: center }
.hc-spots-left { font-size: .8rem; color: var(--t2); font-weight: 500 }
.hc-spots-left small { display: block; font-size: .7rem; color: var(--t3); font-weight: 400; margin-top: 1px }
.spots-row { display: flex; gap: 5px }
.sp { width: 11px; height: 11px; border-radius: 50% }
.sp.on  { background: var(--green) }
.sp.off { background: rgba(255,255,255,.1); border: 1.5px solid rgba(110,219,176,.25) }