.sport-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
.sport-chip{font-family:var(--font-meta);font-size:.8rem;padding:.45rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-elevated);backdrop-filter:blur(12px);color:var(--text);cursor:pointer;transition:all .18s ease}
.sport-chip:hover{border-color:var(--accent)}
.sport-chip.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.card-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:2rem}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.card-grid--4{grid-template-columns:repeat(4,1fr)}.card-grid--3{grid-template-columns:repeat(3,1fr)}}
.glass-card{background:var(--bg-elevated);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.glass-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,26,40,.14);border-color:var(--accent)}
.hub-card{display:block;text-decoration:none;color:var(--text)}
.hub-card h3{font-family:var(--font-display);margin:0 0 .5rem}
.hub-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.panel-card{transition:transform .18s ease,box-shadow .18s ease}
.panel-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(15,26,40,.14)}
.feature-card{cursor:pointer}
.feature-card:active{transform:scale(.98)}
.tab-bar,.seg-control{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tab-btn{font-family:var(--font-display);font-size:.95rem;background:none;border:none;border-bottom:2px solid transparent;padding:.7rem 1rem;cursor:pointer;color:var(--muted);transition:color .18s ease}
.tab-btn:hover{color:var(--text)}
.tab-btn.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.seg-control{border-bottom:none;background:var(--bg-elevated);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:999px;padding:.3rem;width:fit-content}
.seg-btn,.device-btn,.docstep-btn,.pc-btn{font-family:var(--font-meta);font-size:.8rem;border:none;background:none;padding:.5rem 1rem;border-radius:999px;cursor:pointer;color:var(--muted);transition:all .18s ease}
.seg-btn.is-active,.device-btn.is-active,.docstep-btn.is-active,.pc-btn.is-active{background:var(--accent);color:var(--on-accent)}
.seg-panel,.device-panel,.docstep-panel,.pc-panel{display:none}
.seg-panel.is-active,.device-panel.is-active,.docstep-panel.is-active,.pc-panel.is-active{display:block}
.device-toggle,.docstep-nav,.pc-toggle{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.faq-item{background:var(--bg-elevated);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-trigger,.accordion-trigger,.checklist-trigger,.disclosure-trigger{width:100%;text-align:left;background:none;border:none;padding:1.1rem 1.25rem;font-family:var(--font-display);font-size:1rem;cursor:pointer;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc-icon{font-family:var(--font-meta);color:var(--accent);transition:transform .18s ease;flex-shrink:0}
.faq-body,.accordion-body,.checklist-body{display:none;padding:0 1.25rem 1.25rem;color:var(--muted);word-break:break-word;overflow-wrap:break-word}
.faq-item.is-open .faq-body{display:block}
.faq-item.is-open .faq-trigger .acc-icon{transform:rotate(45deg)}
.accordion-item{background:var(--bg-elevated);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.accordion-item.is-open .accordion-body{display:block}
.accordion-item.is-open .acc-icon{transform:rotate(45deg)}
.checklist-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;background:var(--bg-elevated)}
.checklist-item.is-expanded .checklist-body{display:block}
.checklist-item.is-expanded .acc-icon{transform:rotate(45deg)}
.faq-search{width:100%;padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font);margin-bottom:1.5rem;background:var(--bg-elevated)}
.table-wrap{overflow-x:auto;margin-bottom:2rem;border:1px solid var(--border);border-radius:var(--radius);position:relative}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.data-table th,.data-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.data-table th{font-family:var(--font-meta);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:rgba(232,242,255,.5)}
.data-table tbody tr:nth-child(even){background:rgba(232,242,255,.35)}
.data-table tbody tr:hover{background:rgba(0,201,167,.08)}
.data-table--sticky th:first-child,.data-table--sticky td:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
.ticker{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated);backdrop-filter:blur(12px);margin-bottom:2rem}
.live-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;font-family:var(--font-meta);font-size:.85rem;border-bottom:1px solid var(--border);transition:background .3s ease}
.live-row:last-child{border-bottom:none}
.live-row.is-hot{background:rgba(0,201,167,.12)}
.live-row .live-badge{color:var(--accent-strong);font-weight:500}
.ticker:hover .live-row{animation-play-state:paused}
.timeline{position:relative;padding-left:2.5rem;margin-bottom:2rem}
.timeline::before{content:"";position:absolute;left:.75rem;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-fill{position:absolute;left:.75rem;top:0;width:2px;background:var(--accent);height:0}
.timeline-item{position:relative;margin-bottom:1.5rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;transition:transform .18s ease,box-shadow .18s ease,opacity .5s ease}
.timeline-item::before{content:"";position:absolute;left:-2.05rem;top:1.2rem;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.timeline-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.step-num{font-family:var(--font-display);font-size:1.6rem;color:var(--accent);display:inline-block}
.step-num.is-counted{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.step-carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;margin-bottom:2rem}
.step-carousel>*{scroll-snap-align:start;flex:0 0 80%}
@media(min-width:640px){.step-carousel>*{flex:0 0 40%}}
.flip-card{height:280px;perspective:1200px;margin-bottom:1.5rem}
.flip-card__inner{position:relative;width:100%;height:100%;transition:transform .6s ease;transform-style:preserve-3d}
.flip-card:hover .flip-card__inner{transform:rotateY(180deg)}
.flip-card__front,.flip-card__back{position:absolute;inset:0;overflow-y:auto;backface-visibility:hidden;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;background:var(--bg-elevated);backdrop-filter:blur(12px)}
.flip-card__back{transform:rotateY(180deg);background:var(--pitch);color:var(--text-light)}
.flip-card__back *{color:inherit}
.device-frame{max-width:300px;margin:0 auto;border:10px solid var(--pitch);border-radius:32px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow)}
.device-frame img{width:100%;display:block;opacity:0;transition:opacity .6s ease}
.device-frame img.loaded,.lazy-fade.loaded{opacity:1}
.lazy-fade{opacity:0;transition:opacity .6s ease}
.icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}
@media(min-width:640px){.icon-grid{grid-template-columns:repeat(4,1fr)}}
.method-icon{font-size:1.6rem;transition:transform .18s ease}
.method-icon:hover{transform:scale(1.2)}
.security-icon{transition:filter .18s ease}
.security-icon:hover{filter:drop-shadow(0 0 6px var(--accent))}
.tier-card{position:relative;overflow:hidden}
.promo-tag{font-family:var(--font-meta);font-size:.78rem;padding:.4rem .8rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-elevated);cursor:pointer;transition:all .18s ease}
.promo-tag.is-active{background:var(--gold);color:var(--on-accent);border-color:var(--gold)}
.promo-card{transition:transform .18s ease,box-shadow .18s ease}
.promo-card:hover{transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);box-shadow:0 16px 44px rgba(15,26,40,.18)}
.tilt{scroll-margin-top:80px}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--muted);transition:border-color .18s ease,background .18s ease}
.dropzone:hover{border-color:var(--accent);background:rgba(0,201,167,.05)}
.docstep-panel{border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;background:var(--bg-elevated)}
.progress-steps{display:flex;gap:.5rem;margin-bottom:1.5rem}
.progress-steps .pstep{flex:1;height:6px;border-radius:999px;background:var(--border)}
.progress-steps .pstep.is-done{background:var(--accent)}
.demo-badge{position:relative;display:inline-block;padding:.4rem .9rem;border-radius:999px;background:var(--gold);color:var(--on-accent);font-family:var(--font-meta);font-size:.78rem;overflow:hidden}
.demo-badge::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 2.4s infinite}
@keyframes shine{to{left:120%}}
.disclosure-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;background:var(--bg-elevated)}
.disclosure-item .disclosure-body{display:none;padding:0 1.25rem 1.25rem;color:var(--muted)}
.disclosure-item.is-open .disclosure-body{display:block}
.disclosure-item.is-open .acc-icon{transform:rotate(45deg)}
.shimmer-border{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;overflow:hidden;background:var(--bg-elevated)}
.shimmer-border::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(0,201,167,.15),transparent);transform:translateX(-100%);animation:shimmer 3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.stagger-row{transition:opacity .5s ease,transform .5s ease}
.toc{font-size:.9rem}
.toc ul{list-style:none;padding:0;margin:0}
.toc li{margin-bottom:.5rem}
.toc a{text-decoration:none;color:var(--muted);border-left:2px solid transparent;padding-left:.75rem;display:block}
.toc a:hover,.toc a.is-active{color:var(--accent);border-left-color:var(--accent)}
@media(min-width:780px){.toc--sticky{position:sticky;top:80px}.layout-toc{display:grid;grid-template-columns:220px 1fr;gap:2.5rem}}
.pros-cons{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.pros-cons{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.flip-card__inner,.demo-badge::after,.shimmer-border::before,.live-row{animation:none!important;transition:none!important}}