/* Critical CSS — Woozoo Fans | Above-the-fold only. */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans','Outfit',system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;color:#0F172A;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:#2563EB;text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:'Outfit','DM Sans',system-ui,-apple-system,sans-serif;font-weight:700;line-height:1.2;color:#0F172A}
p{color:#475569}
.skip-link{position:absolute;top:-100%;left:1rem;background:#2563EB;color:#fff;padding:.5rem 1rem;border-radius:.375rem;z-index:500;font-weight:600;transition:top 150ms ease}
.skip-link:focus{top:1rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #2563EB;outline-offset:3px;border-radius:.375rem}
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1.25rem;font-family:'Outfit','DM Sans',system-ui,-apple-system,sans-serif;font-size:.9375rem;font-weight:600;line-height:1.4;border-radius:.75rem;border:2px solid transparent;cursor:pointer;transition:all 250ms ease;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn--primary{background:#2563EB;color:#fff;border-color:#2563EB}
.btn--primary:hover{background:#1D4ED8;border-color:#1D4ED8;color:#fff;transform:translateY(-1px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}
.btn--outline{background:transparent;color:#2563EB;border-color:#2563EB}
.btn--outline:hover{background:#2563EB;color:#fff;transform:translateY(-1px)}
.btn--white{background:#fff;color:#2563EB;border-color:#fff}
.btn--lg{padding:.875rem 2rem;font-size:1.0625rem}
.btn--sm{padding:.5rem 1rem;font-size:.875rem}
.btn--block{width:100%;justify-content:center}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:transparent;border:none;border-radius:.75rem;color:#0F172A;transition:all 150ms ease}
.btn-icon:hover{background:#F8FAFC;color:#2563EB}
.topbar{background:#2563EB;color:#fff;font-size:.8125rem;padding:.5rem 0;line-height:1.4}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar__offers{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.topbar__item{display:flex;align-items:center;gap:.375rem;opacity:.95}
.topbar__item svg{flex-shrink:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #F1F5F9;transition:box-shadow 250ms ease}
.site-header.is-scrolled{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:2rem}
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo-text{font-family:'Outfit','DM Sans',system-ui,-apple-system,sans-serif;font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.logo-text__woozoo{color:#2563EB}
.logo-text__fans{color:#0F172A}
.site-nav{flex:1;display:flex;justify-content:center}
.nav__menu{display:flex;align-items:center;gap:.25rem;list-style:none}
.nav__menu .menu-item{position:relative}
.nav__link{display:flex;align-items:center;gap:.25rem;padding:.5rem .875rem;font-size:.9375rem;font-weight:500;color:#0F172A;border-radius:.375rem;transition:all 150ms ease;text-decoration:none}
.nav__link:hover{background:#EFF6FF;color:#2563EB;text-decoration:none}
.site-header__actions{display:flex;align-items:center;gap:.5rem}
.hamburger{display:flex;flex-direction:column;gap:5px;width:20px}
.hamburger span{display:block;height:2px;background:#0F172A;border-radius:2px;transition:all 250ms ease}
.nav-toggle{display:none}
.hero{background:#0B1120;padding:8rem 0 6rem;overflow:hidden;position:relative}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.hero__badge{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero__rating{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:rgba(255,255,255,.75)}
.hero__title{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:900;line-height:1.04;color:#fff;margin-bottom:1.5rem;letter-spacing:-.04em}
.hero__title-accent{color:#60A5FA}
.hero__desc{font-size:1.125rem;line-height:1.8;color:rgba(255,255,255,.72);max-width:520px;margin-bottom:2rem}
.hero__trust{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.hero__trust-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.88);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9999px;padding:.375rem .875rem}
.hero__trust-item svg{color:#60A5FA;flex-shrink:0}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero__visual{position:relative;display:flex;justify-content:center}
.hero__image-wrap{position:relative;width:100%}
.hero__image{width:100%;border-radius:1.5rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}
.hero__image-placeholder{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:1.5rem;padding:3.5rem;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.fan-icon-hero{width:260px;height:260px;animation:spin 8s linear infinite;position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__floating-badge{position:absolute;display:flex;align-items:center;gap:.625rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:1rem;padding:.75rem 1rem}
.hero__float-icon{font-size:1.5rem}
.hero__floating-badge strong{display:block;font-size:.875rem;font-weight:700;color:#fff}
.hero__floating-badge span{display:block;font-size:.75rem;color:rgba(255,255,255,.75)}
.hero__floating-badge--1{bottom:10%;left:-1rem}
.hero__floating-badge--2{top:10%;right:-1rem}
@media(max-width:768px){.site-nav{display:none}.nav-toggle{display:flex}.hero__inner{grid-template-columns:1fr}.hero__visual{display:none}.hero__badge{justify-content:center}}