:root {
--navy: #071426;
--blue: #1264e8;
--cyan: #25b9ff;
--text: #142033;
--muted: #64748b;
--light: #f5f8fc;
--white: #fff;
--green: #18b96b
}

* {
box-sizing: border-box;
margin: 0;
padding: 0
}

body {
font-family: Inter, Arial, sans-serif;
color: var(--text);
background: #fff;
line-height: 1.6
}

a {
text-decoration: none;
color: inherit
}

.container {
width: min(1120px, 92%);
margin: auto
}

nav {
height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8edf4;
background: #fff
}

.logo {
font-size: 22px;
font-weight: 800;
color: var(--navy)
}

.logo span {
color: var(--blue)
}

.navlinks {
display: flex;
gap: 28px;
font-size: 14px;
font-weight: 600;
color: #475569
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 21px;
border-radius: 9px;
font-weight: 700;
border: 0;
cursor: pointer
}

.btn-primary {
background: var(--blue);
color: #fff;
box-shadow: 0 8px 24px #1264e82b
}

.btn-whatsapp {
background: var(--green);
color: #fff
}

.hero {
background: linear-gradient(135deg, #071426 0%, #0b2342 55%, #0b4f86 100%);
color: #fff;
padding: 82px 0 88px;
overflow: hidden
}

.hero-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 50px;
align-items: center
}

.badge {
display: inline-block;
padding: 7px 12px;
border: 1px solid #ffffff33;
background: #ffffff0d;
border-radius: 30px;
color: #b9e9ff;
font-size: 13px;
font-weight: 700;
margin-bottom: 18px
}

h1 {
font-size: clamp(38px, 5vw, 62px);
line-height: 1.05;
letter-spacing: -1.8px;
margin-bottom: 20px
}

.hero p {
font-size: 18px;
color: #d7e5f4;
max-width: 650px;
margin-bottom: 30px
}

.actions {
display: flex;
gap: 12px;
flex-wrap: wrap
}

.hero-card {
background: #fff;
border-radius: 18px;
padding: 18px;
box-shadow: 0 25px 70px #0005;
color: var(--text)
}

.score-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e9eef5;
padding-bottom: 14px
}

.live {
color: #e11d48;
font-size: 12px;
font-weight: 800
}

.score-row {
padding: 20px 4px
}

.team {
display: flex;
justify-content: space-between;
font-weight: 700;
margin: 12px 0
}

.runs {
font-size: 20px
}

.mini-tabs {
display: flex;
gap: 8px;
margin-top: 14px
}

.mini-tabs span {
padding: 6px 10px;
background: #eef4fb;
border-radius: 6px;
font-size: 11px
}

section {
padding: 78px 0
}

.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 44px
}

.section-head h2 {
font-size: 38px;
line-height: 1.15;
margin-bottom: 12px
}

.section-head p {
color: var(--muted)
}

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}

.card {
padding: 28px;
border: 1px solid #e6ebf2;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 30px #0b1d3310
}

.icon {
width: 45px;
height: 45px;
border-radius: 11px;
background: #eaf3ff;
color: var(--blue);
display: grid;
place-items: center;
font-size: 21px;
margin-bottom: 18px
}

.card h3 {
margin-bottom: 8px
}

.card p {
color: var(--muted);
font-size: 14px
}

.light {
background: var(--light)
}

.features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}

.feature {
background: #fff;
border-radius: 14px;
padding: 20px;
border: 1px solid #e5ebf3
}

.feature strong {
display: block;
margin-bottom: 5px
}

.feature span {
color: var(--muted);
font-size: 14px
}

.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px
}

.step {
text-align: center
}

.num {
width: 44px;
height: 44px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: grid;
place-items: center;
font-weight: 800
}

.step p {
color: var(--muted);
font-size: 14px
}

.cta {
background: linear-gradient(135deg, #0b4f86, #1264e8);
color: #fff;
border-radius: 24px;
padding: 55px;
text-align: center
}

.cta h2 {
font-size: 38px;
margin-bottom: 10px
}

.cta p {
color: #dceeff;
margin-bottom: 24px
}

.footer {
padding: 28px 0;
color: #64748b;
font-size: 13px;
text-align: center;
border-top: 1px solid #e8edf4
}

.whatsapp {
position: fixed;
right: 20px;
bottom: 20px;
background: #18b96b;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 28px;
box-shadow: 0 10px 28px #18b96b55;
z-index: 99
}

@media(max-width:800px) {
.navlinks {
display: none
}

.hero-grid,
.features {
grid-template-columns: 1fr
}

.cards {
grid-template-columns: 1fr
}

.process {
grid-template-columns: 1fr 1fr
}

.hero {
padding: 60px 0
}

.cta {
padding: 38px 22px
}

.section-head h2 {
font-size: 31px
}
}

@media(max-width:500px) {
.process {
grid-template-columns: 1fr
}

.hero p {
font-size: 16px
}

h1 {
font-size: 40px
}
}