/* index.html only. Shared rules live in /assets/site.css. */
        .om-splash { position:fixed; inset:0; z-index:2147483000; background:#0A0A14; display:flex; align-items:center; justify-content:center; transition:opacity .3s ease-out; }
        .om-splash.om-splash-out { opacity:0; pointer-events:none; }
        .om-no-splash .om-splash { display:none; }
        body.om-splashing { overflow:hidden; }
        .om-splash .om-splash-inner { display: flex; flex-direction: column; align-items: center; }
        .om-splash svg { width: 340px; height: 280px; overflow: visible; }
        @media (max-width: 480px) {
            .om-splash svg { width: 260px; height: 215px; }
        }
        .om-splash .line-middle { transform-box: fill-box; transform-origin: center center; opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 0, 0.4, 1), opacity 0.35s cubic-bezier(0.2, 0, 0.4, 1); transform: scale(0.05); }
        .om-splash .line-middle.show { transform: scale(1); opacity: 0.5; }
        .om-splash .line-top { transform-box: fill-box; transform-origin: center center; opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0, 0.4, 1), opacity 0.3s cubic-bezier(0.2, 0, 0.4, 1); transform: scale(0.05); }
        .om-splash .line-top.show { transform: scale(1); opacity: 0.25; }
        .om-splash .wordmark { opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; font-family: 'Inter', sans-serif; font-weight: 900; font-size:var(--fs-8); letter-spacing: -1px; color: #F0F0F8; margin-top: 1.2rem; }
        .om-splash .wordmark em { font-style: normal; color: #E94560; }
        .btn-sm { padding:0.55rem 1.2rem; font-size:var(--fs-2); border-radius:var(--r-sm); }
        .btn-ig { display:inline-flex; align-items:center; gap:0; }
        .btn-ig svg { flex-shrink:0; }
        .hero-ig-link { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem; font-size:var(--fs-2); color:var(--t3); text-decoration:none; transition:color .25s; justify-content:center; }
        .hero-ig-link:hover { color:var(--t1); }
        .hero-ig-link svg { flex-shrink:0; opacity:.7; }
        .hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:9rem 1.5rem 6rem; position:relative; overflow:hidden; }
        .venue-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.22; pointer-events:none; }
        .hero-mesh { position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(233,69,96,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 20% 60%, rgba(139,92,246,0.05) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 80% 50%, rgba(59,130,246,0.04) 0%, transparent 50%); animation: meshShift 20s infinite ease-in-out alternate; }
        @keyframes meshShift {
            0% { filter:hue-rotate(0deg); }
            100% { filter:hue-rotate(15deg); }
        }
        .hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size:72px 72px; mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black, transparent); }
        .float-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
        .float-icon { position:absolute; opacity:0; filter: blur(0.8px); animation: iconRise linear infinite; }
        .float-icon svg { width:100%; height:100%; }
        @keyframes iconRise {
            0%   { transform:translateY(100vh) rotate(0deg) scale(0.8); opacity:0; }
            4%   { opacity:0.06; }
            96%  { opacity:0.06; }
            100% { transform:translateY(-100px) rotate(120deg) scale(1); opacity:0; }
        }
        .racket-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
        .float-racket { position:absolute; opacity:0; filter: blur(0.6px); animation: racketDrift linear infinite; }
        .float-racket svg { width:100%; height:100%; }
        @keyframes racketDrift {
            0%   { transform:translateY(110%) rotate(-15deg) scale(0.85); opacity:0; }
            5%   { opacity:0.07; }
            95%  { opacity:0.07; }
            100% { transform:translateY(-120%) rotate(25deg) scale(1.05); opacity:0; }
        }
        .how-ball-canvas { position:absolute; inset:0; pointer-events:none; z-index:2; }
        #howBallCanvas { width:100%; height:100%; display:block; }
        .pp-radar-wrap { position:absolute; inset:0; pointer-events:none; z-index:0; display:flex; align-items:center; justify-content:center; }
        .pp-radar-wrap svg { width:380px; height:380px; opacity:0.045; animation: radarSpin 45s linear infinite; }
        @keyframes radarSpin {
            0%   { transform:rotate(0deg); }
            100% { transform:rotate(360deg); }
        }
        .hero-content { position:relative; z-index:2; max-width:800px; }
        .hero-badge { display:inline-flex; align-items:center; gap:0.75rem; padding:0.7rem 1.6rem 0.7rem 1.1rem; background: var(--glass); border:1px solid var(--b2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius:var(--r-full); font-size:var(--fs-4); font-weight:500; color:var(--t2); margin-bottom:2rem; animation: fadeUp 0.8s var(--ease) both; text-align:center; line-height:1.45; }
        .badge-dot { width:10px; height:10px; background:var(--green); border-radius:50%; position:relative; }
        .badge-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--green); animation: ping 2s infinite; }
        .hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight:900; line-height:1.08; letter-spacing:-2.5px; animation: fadeUp 0.8s var(--ease) 0.1s both; }
        .h1-phrase { display:inline; }
        .hero h1 .grad { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-l) 40%, #FFB3C6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
        .hero h1 .shimmer { position:relative; display:inline-block; }
        .hero h1 .shimmer::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%); background-size: 200% 100%; animation: textShimmer 4s infinite; pointer-events:none; }
        @keyframes textShimmer {
            0%{background-position:200% 0} 100%{background-position:-200% 0}
        }
        .hero-slogan { font-size:clamp(2.8rem, 5.5vw, 4.2rem); font-weight:900; text-transform:none; letter-spacing:-1.5px; color:var(--t1); margin-bottom:1.4rem; line-height:1.15; text-align:center; animation: fadeUp 0.8s var(--ease) 0.05s both; }
        .hero-slogan .brand-accent { color:var(--accent); }
        .hero-slogan .slogan-tagline { display:block; font-size:clamp(0.8rem, 1.1vw, 0.95rem); font-weight:500; letter-spacing:1.5px; color:var(--t2); margin-top:0.15rem; }
        .slogan-phrase { display:inline-block; opacity:0; animation: sloganFadeIn 0.7s var(--ease) forwards; }
        .slogan-phrase:nth-child(1) { animation-delay: 0.3s; }
        .slogan-phrase:nth-child(2) { animation-delay: 1.0s; }
        .slogan-phrase:nth-child(3) { animation-delay: 1.7s; }
        @keyframes sloganFadeIn {
            0%   { opacity:0; transform:translateY(12px) scale(0.96); filter:blur(4px); }
            100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
        }
        .hero-sub { font-size:clamp(1.1rem, 1.8vw, 1.3rem); color:var(--t1); max-width:560px; margin:1.8rem auto 0; line-height:1.6; font-weight:500; animation: fadeUp 0.8s var(--ease) 0.18s both; }
        .hero-buttons { display:flex; gap:0.7rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap; animation: fadeUp 0.8s var(--ease) 0.26s both; }
        .hero-mockup { margin: 3.5rem auto 0; max-width:260px; animation: fadeUp 0.8s var(--ease) 0.34s both; }
        .phone-frame { background:var(--bg-card); border:1px solid var(--b2); border-radius:28px; padding:0.65rem; position:relative; overflow:hidden; box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--b1); }
        .phone-notch { width:90px; height:22px; background:var(--bg); border-radius:0 0 14px 14px; margin:0 auto 0.6rem; }
        .phone-screen { background:var(--bg-3); border-radius:18px; padding:1rem; min-height:240px; }
        .phone-booking { background: var(--green-s); border:1px solid var(--green-b); border-radius:var(--r-md); padding:0.8rem; text-align:center; margin-bottom:0.75rem; }
        .phone-booking-check { width:32px; height:32px; border-radius:50%; background: var(--green); margin:0 auto 0.5rem; display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff; animation: popIn 0.5s var(--bounce) 1.5s both; }
        @keyframes popIn {
            from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1}
        }
        .phone-booking .phone-status { font-size:0.72rem; font-weight:700; color:var(--green); letter-spacing:0.5px; }
        .phone-booking p { font-size:0.62rem; color:var(--t2); margin-top:0.15rem; }
        .phone-slot { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0.6rem; background:var(--b1); border-radius:var(--r-sm); margin-bottom:0.4rem; font-size:0.6rem; color:var(--t2); }
        .phone-slot-right { font-weight:600; color:var(--t1); }
        .phone-slot-l { display:inline-flex; align-items:center; gap:0.35rem; }
        .phone-slot-l img { width:18px; height:18px; display:block; }
        .ps-card h3 img { width:32px; height:32px; display:block; flex-shrink:0; }
        .om-notif img { width:18px; height:18px; display:block; margin-right:0.35rem; flex-shrink:0; }
        .wl-success img { width:26px; height:26px; display:inline-block; vertical-align:-4px; margin-right:0.4rem; }
        .step-icon-wrap img { width:48px; height:48px; display:block; }
        .om-fi img, .pp-fi img, .v-fi img { width:40px; height:40px; display:block; }
        .phone-bar { height:3px; background:var(--b1); border-radius:2px; margin-top:0.75rem; }
        .phone-bar-fill { height:100%; width:65%; background:var(--accent); border-radius:2px; }
        .phone-mock-note { margin-top:0.7rem; text-align:center; font-size:0.5rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--t3); }
        .hero-proof { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top:2rem; animation: fadeUp 0.8s var(--ease) 0.42s both; }
        .proof-item { display:flex; align-items:center; gap:0.4rem; font-size:var(--fs-2); color:var(--t2); }
        .proof-check { color:var(--green); font-size:var(--fs-2); }
        .proof-div { width:1px; height:14px; background:var(--b2); }
        .backed-strip { padding:2.5rem 0; border-top:1px solid var(--b1); border-bottom:1px solid var(--b1); background: var(--bg-2); }
        .backed-inner { text-align:center; }
        .backed-label { font-family:var(--mono); font-size:var(--fs-1); font-weight:500; text-transform:uppercase; letter-spacing:3px; color:var(--t3); margin-bottom:1.25rem; }
        .backed-row { display:flex; justify-content:center; align-items:center; gap:0.75rem; flex-wrap:wrap; }
        .backed-pill { padding:0.45rem 1.1rem; background:var(--b1); border:1px solid var(--b1); border-radius:var(--r-full); font-size:var(--fs-1); font-weight:500; color:var(--t3); transition:all 0.25s; white-space:nowrap; }
        .backed-pill:hover { border-color:var(--b2); color:var(--t2); }
        .backed-pill-sep { width:3px; height:3px; border-radius:50%; background:var(--t3); opacity:0.4; }
        .backed-link { display:inline-block; margin-top:1rem; font-size:var(--fs-1); color:var(--t3); transition:color 0.25s; border-bottom:1px dashed var(--b2); }
        .backed-link:hover { color:var(--accent-l); border-color:var(--accent-l); }
        .stats-bar { padding:3.5rem 0; }
        .stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; max-width:560px; margin:0 auto; }
        .stat-item { text-align:center; }
        .stat-value { font-size:var(--fs-7); font-weight:900; letter-spacing:-1.5px; background: linear-gradient(135deg, var(--t1) 30%, var(--accent-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
        .stat-label { font-size:var(--fs-1); color:var(--t3); margin-top:0.3rem; text-transform:uppercase; letter-spacing:2px; font-weight:500; }
        .s-pad-lg { padding:9rem 0; }
        .ps-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
        .ps-card { padding:2.5rem; border-radius:var(--r-xl); border:1px solid var(--b1); position:relative; overflow:hidden; }
        .ps-card.bad { background: rgba(239,68,68,0.02); border-color: rgba(239,68,68,0.08); }
        .ps-card.bad::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(239,68,68,0.4), transparent); }
        .ps-card.good { background: rgba(34,197,94,0.02); border-color: rgba(34,197,94,0.08); }
        .ps-card.good::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(34,197,94,0.4), transparent); }
        .ps-card h3 { font-size:var(--fs-4); font-weight:700; margin-bottom:1.25rem; display:flex; align-items:center; gap:0.6rem; }
        .ps-list { list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
        .ps-list li { display:flex; align-items:flex-start; gap:0.55rem; font-size:var(--fs-3); color:var(--t2); line-height:1.55; }
        .ps-icon { flex-shrink:0; margin-top:3px; font-size:var(--fs-1); }
        .ps-icon.red { color:#EF4444; }
        .ps-icon.grn { color:var(--green); }
        .ps-stat { text-align:center; margin-top:2.5rem; padding:1.5rem; background:var(--b1); border-radius:var(--r-lg); border:1px solid var(--b1); }
        .ps-stat-val { font-size:var(--fs-6); font-weight:800; color:var(--accent); }
        .ps-stat-label { font-size:var(--fs-2); color:var(--t2); margin-top:0.15rem; }
        .steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; position:relative; }
        .steps-line { position:absolute; top:72px; left:16.66%; right:16.66%; height:1px; background: linear-gradient(90deg, transparent, var(--accent-b), var(--accent-b), transparent); z-index:0; }
        .step { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-xl); padding:2.5rem 1.8rem; text-align:center; transition: all 0.45s var(--ease); position:relative; overflow:hidden; z-index:1; }
        .step::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transition:opacity 0.4s; }
        .step:hover { border-color:var(--accent-b); transform:translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .step:hover::before { opacity:1; }
        .step-num { font-family:var(--mono); font-size:var(--fs-2); font-weight:700; color:var(--accent); letter-spacing:2px; text-transform:uppercase; }
        .step-icon-wrap { width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-6); margin:1.2rem auto; }
        .step h3 { font-size:var(--fs-5); font-weight:700; margin-bottom:0.5rem; }
        .step p { color:var(--t2); font-size:var(--fs-3); line-height:1.7; font-weight:300; }
        .act-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:0.6rem; }
        .act { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-lg); padding:1.3rem 0.6rem; text-align:center; transition:all 0.35s var(--ease); cursor:default; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
        .act:hover { border-color:var(--accent-b); background:var(--bg-card-h); transform:translateY(-5px) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-b); }
        /* OM icons (assets/icons, @openmatch/icons) on a transparent slot: no tile, no border (founder call, 17 Sep). The 56px box keeps the tile grid rhythm; the icon is 36px like the old 1.75rem emoji. */
        .act-emoji { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:1.75rem; line-height:1; margin:0 auto 0.6rem; transition:transform 0.35s var(--ease); }
        .act-emoji img { width:48px; height:48px; display:block; }
        .act:hover .act-emoji { transform:translateY(-2px) scale(1.06); }
        .squash-glyph { width:1.55rem; height:1.55rem; border-radius:50%; background: radial-gradient(circle at 32% 28%, #6a6a75 0%, #1a1a22 60%, #050508 100%); box-shadow: inset -2px -2px 4px rgba(0,0,0,0.55), 0 0 6px rgba(255,255,255,0.04); transition: all 0.35s var(--ease); }
        .act:hover .squash-glyph { box-shadow: inset -2px -2px 4px rgba(0,0,0,0.55), 0 0 12px rgba(233,69,96,0.18); }
        .act-name { font-size:var(--fs-1); font-weight:600; color:var(--t2); }
        .act-badge { display:inline-block; margin-top:0.25rem; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; max-width:100%; color:var(--green); background:var(--green-s); padding:0.12rem 0.45rem; border-radius:var(--r-full); animation: badgePulse 3s infinite; }
        /* .act-badge is a micro-label, kept off the page scale like the mockup pills: on the scale its one unbreakable word out-grows the tile at 390px */
        @keyframes badgePulse {
            0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
            50% { box-shadow:0 0 0 4px rgba(34,197,94,0.08); }
        }
        .act-more { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--t3); border-style:dashed; }
        .act-more .act-emoji { animation: ellipsisPulse 2s infinite; }
        @keyframes ellipsisPulse {
            0%,100%{opacity:0.5} 50%{opacity:1}
        }
        .om-section { position:relative; overflow:hidden; }
        .om-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:900px; background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 60%); pointer-events:none; }
        .om-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
        .om-feature-list { display:flex; flex-direction:column; gap:1.4rem; }
        .om-feature { display:flex; gap:1rem; align-items:flex-start; }
        .om-fi { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-4); }
        .om-feature h3 { font-size:var(--fs-3); font-weight:600; margin-bottom:0.15rem; }
        .om-feature p { font-size:var(--fs-3); color:var(--t2); line-height:1.6; font-weight:300; }
        /* The openmatches card owns its CTA: a quiet purple block inset from the card edge.
           The shared .btn is a page-level control and breaks out of this card. */
        .om-cta-btn { display:block; width:calc(100% - 2.6rem); margin:0.5rem 1.3rem 1rem; padding:0.6rem; background:var(--purple-s); border:1px solid var(--purple-b); border-radius:var(--r-sm); color:#A78BFA; font-weight:600; font-size:var(--fs-2); text-align:center; font-family:inherit; text-decoration:none; transition: all 0.25s; }
        .om-cta-btn:hover { background:rgba(139,92,246,0.12); }
        .om-mockup { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-xl); overflow:hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.3); }
        .om-mh { padding:1rem 1.3rem; border-bottom:1px solid var(--b1); display:flex; justify-content:space-between; align-items:center; }
        .om-mh-title { font-family:var(--mono); font-size:0.65rem; color:var(--t3); letter-spacing:1.5px; text-transform:uppercase; }
        .om-live { display:flex; align-items:center; gap:0.35rem; font-size:0.65rem; font-weight:600; color:var(--green); }
        .om-live-dot { width:5px; height:5px; background:var(--green); border-radius:50%; animation:ping 2s infinite; }
        .om-list { padding:0.8rem 1.3rem; display:flex; flex-direction:column; gap:0.6rem; }
        .om-match { background:var(--b1); border:1px solid var(--b1); border-radius:var(--r-md); padding:0.85rem 1rem; display:grid; grid-template-columns:auto 1fr auto; gap:0.8rem; align-items:center; transition:all 0.25s; }
        .om-match:hover { border-color:var(--b3); background:var(--b2); }
        .om-match-emoji { font-size:1.3rem; display:flex; align-items:center; flex-shrink:0; }
        .om-match-emoji img { width:32px; height:32px; display:block; }
        .om-match-info h4 { font-size:0.82rem; font-weight:600; }
        .om-match-meta { font-size:0.68rem; color:var(--t3); margin-top:0.1rem; }
        .om-spots { text-align:right; }
        .om-bar { width:54px; height:3px; background:var(--b2); border-radius:2px; overflow:hidden; margin-bottom:0.25rem; }
        .om-bar-fill { height:100%; border-radius:2px; transition:width 0.3s; }
        .om-bar-fill.g { background:var(--green); }
        .om-bar-fill.y { background:var(--amber); }
        .om-spots-t { font-size:0.62rem; color:var(--t3); font-weight:500; }
        .om-mock-note { margin:0 1.3rem 0.6rem; text-align:center; font-size:0.58rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--t3); }
        .om-notif { margin:0 1.3rem 0.5rem; padding:0.5rem 0.8rem; background: rgba(34,197,94,0.06); border:1px solid var(--green-b); border-radius:var(--r-sm); font-size:0.65rem; color:var(--green); font-weight:500; display:flex; align-items:center; gap:0.4rem; animation: slideInNotif 0.5s var(--ease) 2s both; }
        @keyframes slideInNotif {
            from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1}
        }
        .v-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
        .v-features { display:flex; flex-direction:column; gap:1.4rem; }
        .v-feat { display:flex; gap:1rem; align-items:flex-start; }
        .v-fi { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-4); }
        .v-feat h4 { font-size:var(--fs-3); font-weight:600; margin-bottom:0.15rem; }
        .v-feat p { font-size:var(--fs-3); color:var(--t2); line-height:1.6; font-weight:300; }
        .tv-mock { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-xl); overflow:hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.3); }
        .tv-h { padding:1rem 1.3rem; border-bottom:1px solid var(--b1); display:flex; justify-content:space-between; align-items:center; }
        .tv-dots { display:flex; gap:5px; }
        .tv-dot { width:9px; height:9px; border-radius:50%; }
        .tv-title { font-family:var(--mono); font-size:0.65rem; letter-spacing:1.5px; color:var(--t3); text-transform:uppercase; }
        .tv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:1rem 1.3rem; }
        .tv-slot { aspect-ratio:1; border-radius:var(--r-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:0.68rem; font-weight:600; gap:1px; transition:all 0.2s; }
        .tv-slot-sub { font-size:0.5rem; opacity:0.6; font-weight:400; }
        .tv-slot.bk { background:var(--accent-soft); border:1px solid var(--accent-b); color:var(--accent-l); }
        .tv-slot.op { background:var(--green-s); border:1px solid var(--green-b); color:var(--green); }
        .tv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; padding:1rem 1.3rem; border-top:1px solid var(--b1); }
        .tv-stat { text-align:center; }
        .tv-stat-v { font-size:1.3rem; font-weight:800; color:var(--accent); }
        .tv-stat-l { font-size:0.58rem; color:var(--t3); text-transform:uppercase; letter-spacing:1px; margin-top:0.1rem; }
        .v-revenue-stat { margin-top:1.5rem; padding:1rem; text-align:center; background:var(--b1); border-radius:var(--r-md); border:1px solid var(--b1); font-size:var(--fs-2); color:var(--t2); }
        .v-revenue-stat strong { color:var(--accent); font-weight:700; }
        .pr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
        .pr-grid-2 { grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto; }
        .pr-feats { list-style:none; display:flex; flex-direction:column; gap:0.55rem; margin-bottom:1rem; flex:1; }
        .pr-promo-note { font-size:var(--fs-1); color:var(--t3); line-height:1.5; margin:0 0 0.4rem; text-align:left; }
        .pr-terms { font-size:var(--fs-1); color:var(--t3); line-height:1.55; margin:1rem 0 0; text-align:left; }
        .pr-terms a { color:var(--t2); text-decoration:underline; }
        .pr-terms a:hover { color:var(--accent); }
        .pr-fee-note { font-size:var(--fs-1); color:var(--t2); letter-spacing:0.2px; margin:0.6rem 0 1.4rem; padding-top:0.75rem; border-top:1px solid var(--b1); text-align:left; }
        .cta-section { padding:9rem 0; text-align:center; position:relative; overflow:hidden; }
        .cta-section::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(233,69,96,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 30% 60%, rgba(139,92,246,0.04) 0%, transparent 50%); pointer-events:none; }
        .cta-inner { position:relative; z-index:1; max-width:560px; margin:0 auto; }
        .wl-tabs { display:flex; justify-content:center; gap:0.4rem; margin-bottom:2rem; }
        .wl-tab { padding:0.5rem 1.3rem; border-radius:var(--r-full); font-size:var(--fs-2); font-weight:500; border:1px solid var(--b2); background:transparent; color:var(--t2); font-family:inherit; transition:all 0.25s; }
        .wl-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 16px var(--accent-glow); }
        .wl-tab:not(.active):hover { border-color:var(--b3); color:var(--t1); }
        .wl-tab:focus-visible { outline:2px solid var(--accent-l); outline-offset:3px; }
        .wl-count { margin-bottom:2rem; font-size:var(--fs-2); color:var(--t3); }
        .wl-count strong { color:var(--t1); font-weight:700; font-size:var(--fs-4); }
        .wl-form { display:flex; gap:0.5rem; max-width:460px; margin:0 auto; }
        .wl-form input { flex:1; padding:0.85rem 1.1rem; background:var(--bg-card); border:1px solid var(--b2); border-radius:var(--r-md); color:var(--t1); font-family:inherit; font-size:var(--fs-3); outline:none; transition:all 0.25s; }
        .wl-form input::placeholder { color:var(--t3); }
        .wl-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
        .wl-form input:focus-visible { outline:none; }
        .wl-form button { white-space:nowrap; }
        .wl-success { display:none; padding:1.2rem; margin-top:1rem; background:var(--green-s); border:1px solid var(--green-b); border-radius:var(--r-md); color:var(--green); font-weight:600; font-size:var(--fs-3); }
        .wl-note { font-size:var(--fs-1); color:var(--t3); margin-top:0.8rem; }
        .confetti-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9998; }
        .confetti-piece { position:absolute; width:8px; height:8px; border-radius:1px; animation: confettiFall linear forwards; }
        @keyframes confettiFall {
            0% { transform:translateY(-20px) rotate(0deg); opacity:1; }
            100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
        }
        .inv-section { padding:5rem 0; border-top:1px solid var(--b1); background:var(--bg-2); }
        .inv-card { max-width:600px; margin:0 auto; text-align:center; padding:3rem; background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-2xl); position:relative; overflow:hidden; }
        .inv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), var(--purple), transparent); }
        .inv-label { font-family:var(--mono); font-size:var(--fs-1); font-weight:500; text-transform:uppercase; letter-spacing:3px; color:var(--accent); margin-bottom:0.75rem; }
        .inv-title { font-size:var(--fs-6); font-weight:800; letter-spacing:-0.5px; line-height:1.3; }
        .inv-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:540px; margin:2rem auto; }
        .inv-stat {  }
        .inv-stat-v { font-size:var(--fs-5); font-weight:800; background:linear-gradient(135deg, var(--t1), var(--accent-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
        .inv-stat-l { font-size:var(--fs-1); color:var(--t3); text-transform:uppercase; letter-spacing:1px; margin-top:0.1rem; }
        .inv-desc { font-size:var(--fs-3); color:var(--t2); line-height:1.7; margin-bottom:1.5rem; font-weight:300; }
        .modal-field input, .modal-field select, .modal-field textarea { width:100%; padding:0.7rem 0.9rem; background:var(--bg); border:1px solid var(--b2); border-radius:var(--r-sm); color:var(--t1); font-size:var(--fs-3); font-family:var(--body); transition:border-color 0.2s; outline:none; }
        @media(max-width:1024px) {
            .stats-grid { grid-template-columns:repeat(2,1fr); }
            .pr-grid { grid-template-columns:1fr; max-width:380px; margin-left:auto; margin-right:auto; }
            .pr-grid-2 { grid-template-columns:1fr; max-width:380px; }
        }
        @media(max-width:900px) {
            .steps-row { grid-template-columns:1fr; }
            .steps-line { display:none; }
            .ps-grid, .om-layout, .v-layout { grid-template-columns:1fr; gap:2rem; }
            .om-mockup, .tv-mock { order:-1; }
            .inv-stats { grid-template-columns:1fr; gap:0.5rem; }
        }
        @media(max-width:680px) {
            .container { padding:0 1.25rem; }
            .hero { padding:7rem 1.25rem 3.5rem; min-height:auto; }
            .hero h1 { letter-spacing:-1.8px; }
            .h1-phrase { display:block; }
            .hero-proof { flex-direction:column; gap:0.5rem; }
            .proof-div { display:none; }
            .hero-buttons { flex-direction:column; width:100%; max-width:300px; margin-left:auto; margin-right:auto; }
            .hero-mockup { max-width:220px; }
            .s-pad { padding:4rem 0; }
            .s-pad-lg { padding:5rem 0; }
            .s-head { margin-bottom:2.5rem; }
            .stats-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
            .act-grid { grid-template-columns:repeat(3,1fr); gap:0.5rem; }
            .wl-form { flex-direction:column; }
            .tv-grid { grid-template-columns:repeat(2,1fr); }
            .backed-row { gap:0.5rem; }
            .cta-section { padding:6rem 0; }
        }
        @media(max-width:375px) {
            .hero h1 { font-size:var(--fs-7); letter-spacing:-1.2px; }
            .act-grid { grid-template-columns:repeat(2,1fr); }
        }
        .pp-section { position:relative; overflow:hidden; }
        .pp-section::before { content:''; position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); width:1000px; height:1000px; background: radial-gradient(circle, rgba(233,69,96,0.05) 0%, transparent 55%); pointer-events:none; }
        .pp-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
        .pp-features { display:flex; flex-direction:column; gap:1.4rem; }
        .pp-feat { display:flex; gap:1rem; align-items:flex-start; }
        .pp-fi { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-4); }
        .pp-feat h3 { font-size:var(--fs-3); font-weight:600; margin-bottom:0.15rem; }
        .pp-feat p { font-size:var(--fs-3); color:var(--t2); line-height:1.6; font-weight:300; }
        .pp-card-wrap { perspective:1200px; }
        .pp-card { background:var(--bg-card); border:1px solid var(--b1); border-radius:var(--r-xl); overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,0.35); transition:transform 0.6s var(--ease); }
        .pp-card:hover { transform:rotateY(-2deg) rotateX(1deg) translateY(-8px); }
        .pp-card-header { padding:1.5rem 1.5rem 1.2rem; background:linear-gradient(135deg, rgba(233,69,96,0.08) 0%, rgba(139,92,246,0.05) 100%); border-bottom:1px solid var(--b1); display:flex; align-items:center; gap:1rem; }
        .pp-avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--purple)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; color:#fff; position:relative; flex-shrink:0; }
        .pp-avatar-ring { position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent); opacity:0.4; animation:ppRingPulse 3s infinite; }
        @keyframes ppRingPulse {
            0%,100% { opacity:0.4; transform:scale(1); }
            50% { opacity:0.15; transform:scale(1.08); }
        }
        .pp-user-info { flex:1; }
        .pp-user-name { font-size:var(--fs-4); font-weight:700; }
        .pp-user-meta { font-size:var(--fs-1); color:var(--t3); margin-top:0.15rem; display:flex; align-items:center; gap:0.5rem; }
        .pp-style-tag { display:inline-block; padding:0.1rem 0.5rem; background:var(--accent-soft); border:1px solid var(--accent-b); border-radius:var(--r-full); font-size:var(--fs-1); font-weight:600; color:var(--accent-l); letter-spacing:0.5px; text-transform:uppercase; }
        .pp-opr { text-align:center; flex-shrink:0; }
        .pp-opr-value { font-size:1.8rem; font-weight:900; letter-spacing:-1px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-l) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
        .pp-opr-label { font-family:var(--mono); font-size:0.5rem; color:var(--t3); letter-spacing:1.5px; text-transform:uppercase; margin-top:0.2rem; }
        .pp-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:1px solid var(--b1); }
        .pp-stat-cell { text-align:center; padding:0.85rem 0.5rem; border-right:1px solid var(--b1); }
        .pp-stat-cell:last-child { border-right:none; }
        .pp-stat-num { font-size:1.05rem; font-weight:800; color:var(--t1); }
        .pp-stat-lbl { font-size:0.55rem; color:var(--t3); text-transform:uppercase; letter-spacing:1px; margin-top:0.1rem; }
        .pp-ratings { padding:1.2rem 1.5rem; }
        .pp-ratings-title { font-family:var(--mono); font-size:0.6rem; color:var(--t3); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:0.9rem; }
        .pp-rating-row { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.55rem; }
        .pp-rating-emoji { font-size:1rem; width:26px; display:flex; justify-content:center; flex-shrink:0; }
        .pp-rating-emoji img { width:26px; height:26px; display:block; }
        .pp-rating-name { font-size:0.75rem; font-weight:500; color:var(--t2); width:70px; flex-shrink:0; }
        .pp-rating-bar { flex:1; height:6px; background:var(--b1); border-radius:3px; overflow:hidden; position:relative; }
        .pp-rating-fill { height:100%; border-radius:3px; transition:width 1.5s var(--ease); position:relative; }
        .pp-rating-fill::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:inherit; box-shadow:0 0 8px currentColor; opacity:0.6; }
        .pp-rating-fill.r-high { background:linear-gradient(90deg, var(--accent), var(--accent-l)); }
        .pp-rating-fill.r-mid { background:linear-gradient(90deg, var(--amber), #FBBF24); }
        .pp-rating-fill.r-low { background:linear-gradient(90deg, var(--blue), #60A5FA); }
        .pp-rating-val { font-size:0.72rem; font-weight:700; color:var(--t1); width:28px; text-align:right; flex-shrink:0; }
        .pp-badges { padding:0 1.5rem 0.85rem; display:flex; gap:0.4rem; flex-wrap:wrap; }
        .pp-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.55rem; background:var(--b1); border:1px solid var(--b1); border-radius:var(--r-full); font-size:0.6rem; font-weight:600; color:var(--t2); transition:all 0.25s; }
        .pp-badge:hover { border-color:var(--b3); background:var(--b2); }
        .pp-badge-icon { font-size:0.7rem; display:inline-flex; vertical-align:middle; }
        .pp-badge-icon img { width:18px; height:18px; display:block; }
        .pp-feedback { margin:0 1.5rem 1.2rem; padding:0.7rem 0.9rem; background:var(--b1); border-radius:var(--r-sm); border-left:2px solid var(--accent); }
        .pp-feedback-text { font-size:0.72rem; color:var(--t2); font-style:italic; line-height:1.5; }
        .pp-feedback-author { font-size:0.6rem; color:var(--t3); margin-top:0.25rem; }
        .pp-card-bottom { padding:0.65rem 1.5rem; background:rgba(34,197,94,0.04); border-top:1px solid var(--green-b); display:flex; align-items:center; justify-content:center; gap:0.4rem; font-size:0.68rem; color:var(--green); font-weight:500; }
        .pp-card .pp-rating-fill { width:0; }
        .pp-card.revealed .pp-rating-fill { transition:width 1.2s var(--ease); }
        @media(max-width:768px) {
            .pp-layout { grid-template-columns:1fr; gap:2.5rem; }
            .pp-card-wrap { order:-1; }
        }
        .hero-microcopy { font-size:var(--fs-2); color:var(--t2); margin-top:0.5rem; text-align:center; letter-spacing:0.3px; }
        .wl-progress { width:100%; max-width:460px; margin:0.6rem auto 0; }
        .wl-progress-bar { height:5px; background:var(--b2); border-radius:3px; overflow:hidden; margin-bottom:0.4rem; }
        .wl-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--accent), var(--accent-l)); transition:width 1.8s var(--ease); }
        .wl-progress-info { display:flex; justify-content:space-between; align-items:center; }
        .wl-progress-taken { font-size:var(--fs-1); color:var(--t2); font-weight:600; }
        .wl-progress-total { font-size:var(--fs-1); color:var(--t3); font-family:var(--mono); letter-spacing:0.5px; text-transform:uppercase; }
        .pr-vat { color: var(--t3); font-size:var(--fs-1); margin-left: 0.4rem; font-weight: 500; letter-spacing: 0; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
            .reveal { opacity:1 !important; transform:none !important; }
        }
        .pp-card-bottom.mock-note { color:var(--t3); background:transparent; border-top:1px solid var(--b2); font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase; }