:root { --ink: #07131e; --ink-soft: #102333; --lime: #c8f35a; --paper: #f1f5f1; --muted: #a9b7be; --line: rgba(255,255,255,.14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { width: min(1160px, calc(100% - 48px)); height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-size: 25px; font-weight: 800; letter-spacing: .08em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand > span > span { color: var(--lime); }
.header-cta { padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 800; transition: .2s ease; }
.header-cta:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.hero { min-height: 650px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 36px; padding: 62px 0 92px; }
.hero-copy { max-width: 600px; }
.eyebrow { margin: 0 0 18px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(200,243,90,.12); vertical-align: 1px; }
h1, h2, h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.02em; line-height: .94; }
h1 { max-width: 650px; font-size: clamp(62px, 8vw, 112px); font-weight: 800; }
.hero-text { max-width: 500px; margin: 28px 0 0; color: #c1ced0; font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.primary-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 21px; color: var(--ink); background: var(--lime); border: 1px solid var(--lime); border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: 0 12px 30px rgba(200,243,90,.14); transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(200,243,90,.24); }
.play-icon { font-size: 11px; }
.text-link { color: #dce7df; font-size: 14px; font-weight: 700; }
.text-link span { display: inline-block; margin-left: 7px; color: var(--lime); font-size: 18px; }
.microcopy { margin: 20px 0 0; color: var(--muted); font-size: 12px; }
.hero-visual { min-height: 520px; position: relative; display: grid; place-items: center; isolation: isolate; }
.visual-glow { width: 340px; height: 340px; position: absolute; border-radius: 50%; background: rgba(59, 147, 91, .23); filter: blur(70px); z-index: -1; }
.phone-frame { width: min(278px, 56vw); margin: 0; padding: 9px; background: #0d2028; border: 1px solid rgba(255,255,255,.25); border-radius: 35px; box-shadow: 24px 35px 60px rgba(0,0,0,.42); transform: rotate(4deg); overflow: hidden; z-index: 2; }
.phone-frame img { display: block; width: 100%; height: 490px; border-radius: 27px; object-fit: cover; object-position: top; }
.score-card { position: absolute; width: 230px; padding: 19px; display: flex; flex-direction: column; background: rgba(20,42,53,.95); border: 1px solid rgba(255,255,255,.16); border-radius: 17px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.score-card span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.score-card strong { margin-top: 8px; font-family: 'Barlow Condensed'; font-size: 24px; text-transform: uppercase; }
.score-card-back { top: 47px; left: 2px; transform: rotate(-8deg); opacity: .85; }
.score-card-front { right: 0; bottom: 50px; transform: rotate(-5deg); z-index: 3; }
.teams { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; font-family: 'Barlow Condensed'; font-size: 25px; }
.teams em { color: var(--lime); font-size: 12px; font-style: normal; }
.card-label { color: var(--lime) !important; }
.card-label i { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--lime); }
.mini-score { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 2px; font-family: 'Barlow Condensed'; font-size: 38px; line-height: 1; }
.mini-score small { color: var(--muted); font-size: 14px; }
.score-card-front > small { color: var(--muted); font-size: 10px; }
.proof-strip { background: var(--lime); color: var(--ink); }
.proof-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px 0; }
.proof-items div { display: flex; align-items: center; gap: 14px; font-family: 'Barlow Condensed'; text-transform: uppercase; }
.proof-items strong { font-size: 31px; font-weight: 800; }
.proof-items span { font-size: 17px; font-weight: 700; line-height: .95; }
.features { padding: 125px 0 115px; }
.section-intro { max-width: 560px; }
h2 { font-size: clamp(48px, 6vw, 79px); font-weight: 800; }
.section-intro > p:last-child, .gallery-heading > p:last-child { margin: 23px 0 0; color: var(--muted); font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 57px; }
.feature-card { min-height: 260px; padding: 27px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.feature-card-highlight { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.feature-number { font-family: 'Barlow Condensed'; font-size: 14px; font-weight: 800; }
.feature-card h3 { max-width: 230px; margin-top: 62px; font-size: 35px; }
.feature-card p { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.feature-card-highlight p { color: #31471f; }
.gallery { padding: 15px 0 125px; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.gallery-heading > p { max-width: 300px; margin-bottom: 4px !important; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 54px; }
.gallery-card { margin: 0; padding: 11px; background: var(--ink-soft); border: 1px solid var(--line); border-radius: 15px; }
.gallery-card-wide { grid-row: span 2; }
.gallery-card img { display: block; width: 100%; height: 280px; border-radius: 9px; object-fit: cover; object-position: top; }
.gallery-card-wide img { height: 585px; object-fit: contain; background: #081820; }
.gallery-card figcaption { display: flex; align-items: center; gap: 10px; padding: 16px 5px 4px; font-family: 'Barlow Condensed'; font-size: 20px; font-weight: 700; text-transform: uppercase; }
.gallery-card figcaption span { color: var(--lime); font-size: 13px; }
.download-section { padding-bottom: 106px; }
.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 52px 58px; color: var(--ink); background: var(--lime); border-radius: 20px; }
.download-panel .eyebrow { color: #46621e; margin-bottom: 12px; }
.download-panel h2 { max-width: 500px; }
.download-panel p:last-child { max-width: 520px; margin: 17px 0 0; color: #34481f; }
.light-button { color: var(--paper); background: var(--ink); border-color: var(--ink); box-shadow: none; white-space: nowrap; }
.light-button:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.site-footer { display: flex; align-items: center; gap: 25px; padding: 25px 0 40px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-brand { color: var(--paper); }
.site-footer p { margin: 0; font-size: 13px; }
.site-footer small { margin-left: auto; font-size: 11px; text-align: right; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 52px; } .hero-visual { min-height: 480px; margin-top: 10px; } .phone-frame img { height: 450px; } .feature-grid { grid-template-columns: 1fr; } .feature-card { min-height: 205px; } .feature-card h3 { margin-top: 38px; } .gallery-heading, .download-panel { align-items: flex-start; flex-direction: column; } .gallery-grid { grid-template-columns: 1fr; } .gallery-card-wide { grid-row: auto; } .gallery-card-wide img { height: 430px; } .gallery-card-last { grid-row: auto; } .site-footer { align-items: flex-start; flex-wrap: wrap; } .site-footer small { width: 100%; margin-left: 0; text-align: left; } }
@media (max-width: 520px) { .section-shell, .site-header { width: min(100% - 32px, 1160px); } .site-header { height: 72px; } .header-cta { padding: 9px 13px; font-size: 12px; } h1 { font-size: 64px; } .hero-text { font-size: 16px; } .hero-visual { min-height: 425px; } .phone-frame { width: 220px; } .phone-frame img { height: 370px; } .score-card { width: 175px; padding: 14px; } .score-card strong { font-size: 19px; } .score-card-back { top: 30px; left: -3px; } .score-card-front { bottom: 26px; right: -3px; } .proof-items { grid-template-columns: 1fr; gap: 13px; } .proof-items div { gap: 10px; } .features, .gallery { padding-top: 85px; padding-bottom: 85px; } .gallery-card img, .gallery-card-wide img { height: 360px; } .download-panel { padding: 32px 25px; } .download-panel h2 { font-size: 53px; } .site-footer { padding-bottom: 30px; } }