:root { color-scheme: light; --ink:#0d202b; --muted:#51616a; --paper:#fff; --wash:#f2f6f5; --line:#d3dfe0; --brand:#16705d; --brand-dark:#0d4e43; --signal:#d6f36a; --night:#102a34; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; }
.shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(211,223,224,.9); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.site-nav { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:850; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:var(--brand); border-radius:6px; font-size:12px; }
.nav-links { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }
.nav-links a { text-decoration:none; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 18px; border:1px solid transparent; border-radius:6px; background:var(--brand); color:#fff; font-weight:800; text-decoration:none; }
.button.secondary { border-color:rgba(255,255,255,.55); background:rgba(10,29,38,.38); }
.button.light { border-color:var(--line); background:#fff; color:var(--ink); }
.hero { position:relative; min-height:min(690px,82vh); display:grid; align-items:end; overflow:hidden; color:#fff; background:#142c35 url('/offerta/assets/sports-feed-hero.webp') center/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,23,31,.94) 0%,rgba(7,23,31,.72) 48%,rgba(7,23,31,.2) 100%); }
.hero-inner { position:relative; z-index:1; padding:92px 0 74px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--signal); font-size:13px; font-weight:850; text-transform:uppercase; }
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; }
h1 { max-width:820px; margin:14px 0 18px; font-size:clamp(42px,7vw,78px); line-height:1; letter-spacing:0; }
.hero p { max-width:690px; margin:0; color:#e0e9eb; font-size:clamp(17px,2vw,21px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.proof-strip { background:var(--night); color:#fff; }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.proof { min-height:112px; padding:25px 24px; border-left:1px solid rgba(255,255,255,.12); }
.proof:last-child { border-right:1px solid rgba(255,255,255,.12); }
.proof strong { display:block; font-size:19px; }
.proof span { color:#afc3c9; font-size:14px; }
.section { padding:82px 0; }
.section.alt { background:var(--wash); }
.section-head { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; margin-bottom:42px; }
.section h2 { margin:0; font-size:clamp(32px,4vw,50px); line-height:1.05; letter-spacing:0; }
.section-head p,.lead { margin:5px 0 0; color:var(--muted); font-size:18px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature { min-height:220px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.feature-index { color:var(--brand); font-size:13px; font-weight:850; }
.feature h3 { margin:36px 0 9px; font-size:21px; }
.feature p { margin:0; color:var(--muted); }
.flow { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
.code-panel { overflow:auto; padding:28px; border-radius:8px; background:#0c222b; color:#d8f3ec; box-shadow:0 24px 60px rgba(7,28,34,.18); }
pre { margin:0; font:14px/1.7 "SFMono-Regular",Consolas,monospace; white-space:pre-wrap; }
.steps { display:grid; gap:0; }
.step { display:grid; grid-template-columns:46px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.step b { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--brand); color:#fff; }
.step h3 { margin:0 0 5px; font-size:19px; }
.step p { margin:0; color:var(--muted); }
.matrix-link { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px; border:1px solid var(--line); background:#fff; }
.matrix-link h3 { margin:0 0 6px; font-size:23px; }
.matrix-link p { margin:0; color:var(--muted); }
.cta { background:var(--brand-dark); color:#fff; }
.cta-inner { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; padding:68px 0; }
.cta h2 { margin:0 0 10px; font-size:clamp(32px,4vw,50px); }
.cta p { margin:0; color:#c9dcda; }
.footer { padding:34px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.fineprint { margin-top:24px; color:var(--muted); font-size:13px; }
@media(max-width:820px){.nav-links a:not(.button){display:none}.proof-grid,.feature-grid{grid-template-columns:1fr 1fr}.section-head,.flow{grid-template-columns:1fr;gap:28px}.cta-inner{grid-template-columns:1fr}}
@media(max-width:560px){.shell{width:min(100% - 28px,1160px)}.site-nav{min-height:62px}.brand span:last-child{display:none}.hero{min-height:650px}.hero-inner{padding:76px 0 56px}.hero-actions .button{width:100%}.proof-grid,.feature-grid{grid-template-columns:1fr}.proof{min-height:auto;border-right:1px solid rgba(255,255,255,.12)}.section{padding:58px 0}.matrix-link{align-items:flex-start;flex-direction:column;padding:24px}}