.hero { min-height: 820px; padding: 150px 0 90px; position: relative; overflow: hidden; background: radial-gradient(circle at 85% 15%, rgba(17,197,191,.22), transparent 28%), radial-gradient(circle at 10% 10%, rgba(15,76,129,.12), transparent 25%), linear-gradient(180deg,#fff 0%,#f6f8fc 100%); }
.hero::after { content:""; position:absolute; width:540px; height:540px; border-radius:50%; background:linear-gradient(135deg,rgba(15,76,129,.12),rgba(17,197,191,.14)); right:-260px; bottom:-260px; filter:blur(8px); }
.hero-grid { display:grid; grid-template-columns: 1fr 1.06fr; align-items:center; gap:68px; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid #d8e7f3; background:rgba(255,255,255,.72); border-radius:999px; color:var(--primary); font-size:.9rem; font-weight:800; }
.hero-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(17,197,191,.14); }
.hero h1 { margin-top:26px; font-size:clamp(3rem,6.2vw,5.4rem); line-height:1.04; letter-spacing:-.065em; }
.hero h1 span { color:var(--primary); }
.hero p { margin-top:24px; max-width:610px; color:var(--muted); font-size:1.16rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-meta { margin-top:28px; display:flex; flex-wrap:wrap; gap:18px; color:#475467; font-size:.9rem; font-weight:700; }
.hero-meta span::before { content:"✓"; color:var(--accent); margin-right:7px; }
.product-window { background:#fff; border:1px solid rgba(220,227,237,.9); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; transform:perspective(1100px) rotateY(-4deg) rotateX(2deg); }
.window-top { height:48px; display:flex; align-items:center; gap:7px; padding:0 18px; background:#f9fbfd; border-bottom:1px solid var(--line); }
.window-top i { width:9px; height:9px; border-radius:50%; background:#d0d5dd; }
.window-body { display:grid; grid-template-columns:150px 1fr; min-height:420px; }
.mock-sidebar { padding:20px 14px; background:#0d2742; color:#bfd0e3; }
.mock-logo { color:#fff; font-weight:900; margin-bottom:26px; }
.mock-nav { display:grid; gap:8px; font-size:.78rem; }
.mock-nav span { padding:9px 10px; border-radius:9px; }
.mock-nav span.active { color:#fff; background:rgba(17,197,191,.2); }
.mock-main { padding:24px; background:#f7f9fc; }
.mock-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mock-title h3 { font-size:1rem; }
.status-pill { padding:6px 9px; border-radius:999px; background:#dcfbf8; color:#08746f; font-size:.7rem; font-weight:800; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:13px; padding:14px; }
.stat strong { display:block; font-size:1.35rem; }
.stat span { color:var(--muted); font-size:.7rem; }
.court-grid { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.court { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.court h4 { color:var(--primary); font-size:.78rem; margin-bottom:10px; }
.player { padding:7px 9px; border-radius:8px; background:#f2f5f9; font-size:.68rem; margin-top:6px; }
.logo-strip { padding:28px 0; background:#fff; border-block:1px solid var(--line); }
.logo-strip-inner { display:flex; justify-content:center; flex-wrap:wrap; gap:34px; color:#667085; font-weight:800; font-size:.9rem; }
.feature-grid { margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); transition:.25s ease; }
.feature-card:hover { transform:translateY(-7px); border-color:#b9d9e9; }
.feature-icon { width:52px; aspect-ratio:1; display:grid; place-items:center; border-radius:16px; background:linear-gradient(135deg,#e5f1fa,#dcfbf8); color:var(--primary); font-size:1.35rem; }
.feature-card h3 { margin-top:20px; font-size:1.24rem; }
.feature-card p { margin-top:10px; color:var(--muted); }
.about-panel { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.court-visual { min-height:470px; position:relative; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(145deg,#0e355b,#0a6d71); box-shadow:var(--shadow); }
.court-lines { position:absolute; inset:34px; border:3px solid rgba(255,255,255,.75); }
.court-lines::before,.court-lines::after { content:""; position:absolute; background:rgba(255,255,255,.75); }
.court-lines::before { width:3px; height:100%; left:50%; }
.court-lines::after { height:3px; width:100%; top:50%; }
.shuttle { position:absolute; top:62px; right:54px; font-size:5rem; transform:rotate(22deg); filter:drop-shadow(0 16px 20px rgba(0,0,0,.25)); }
.metric-card { position:absolute; left:28px; bottom:28px; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-soft); }
.metric-card strong { display:block; color:var(--primary); font-size:2rem; }
.check-list { margin-top:28px; display:grid; gap:16px; }
.check-item { display:flex; gap:14px; align-items:flex-start; }
.check-mark { flex:0 0 30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:#08746f; font-weight:900; }
.steps { margin-top:56px; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.step { position:relative; padding:24px 16px; background:#fff; border:1px solid var(--line); border-radius:18px; text-align:center; }
.step:not(:last-child)::after { content:"→"; position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:#98a2b3; z-index:2; }
.step-num { width:38px; height:38px; margin:0 auto 14px; display:grid; place-items:center; border-radius:12px; background:var(--primary); color:#fff; font-weight:900; }
.step h3 { font-size:.98rem; }
.step p { margin-top:7px; color:var(--muted); font-size:.84rem; }
.cta { padding:0 0 112px; }
.cta-box { padding:72px; border-radius:32px; color:#fff; text-align:center; background:radial-gradient(circle at 80% 0,rgba(17,197,191,.35),transparent 35%),linear-gradient(135deg,#0c3154,#0d5c72); box-shadow:var(--shadow); }
.cta-box h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.045em; }
.cta-box p { color:#cae1ed; margin:16px auto 28px; max-width:650px; }