:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1f1f1f;--bg-overlay:rgba(10, 10, 10, 0.95);--text-primary:#ffffff;--text-secondary:#a3a3a3;--text-tertiary:#737373;--text-disabled:#525252;--accent-primary:#3b82f6;--accent-primary-hover:#2563eb;--accent-secondary:#8b5cf6;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--border-primary:#262626;--border-secondary:#171717;--border-focus:#3b82f6;--rank-gold:#ffd700;--rank-silver:#c0c0c0;--rank-bronze:#cd7f32;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--transition-fast:150ms ease-in-out;--transition-base:200ms ease-in-out;--transition-slow:300ms ease-in-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:inter,-apple-system,BlinkMacSystemFont,segoe ui,sans-serif;font-size:16px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;margin-bottom:var(--spacing-md)}h1{font-size:3rem;letter-spacing:-.02em;font-weight:700}h2{font-size:2.25rem;letter-spacing:-.01em;font-weight:600}h3{font-size:1.5rem;font-weight:500}h4{font-size:1.25rem;font-weight:500}h5{font-size:1rem;font-weight:600}p{margin-bottom:var(--spacing-md)}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary-hover)}.btn{display:inline-block;padding:12px 24px;border-radius:var(--radius-md);font-weight:500;font-size:1rem;text-align:center;cursor:pointer;border:none;transition:all var(--transition-base);text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--text-primary);position:relative;overflow:hidden}.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-primary:hover::before{left:100%}.btn-primary:hover{background:linear-gradient(135deg,var(--accent-primary-hover),#7c3aed);transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.4),0 8px 24px rgba(139,92,246,.3)}.btn-secondary{background-color:transparent;color:var(--accent-primary);border:1px solid var(--accent-primary);position:relative;overflow:hidden}.btn-secondary::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--accent-primary);transform:translate(-50%,-50%);transition:width .3s,height .3s;z-index:-1}.btn-secondary:hover::before{width:300%;height:300%}.btn-secondary:hover{color:var(--text-primary);transform:translateY(-2px);box-shadow:0 4px 16px rgba(59,130,246,.3)}.btn-affiliate{background:linear-gradient(135deg,var(--color-success),#059669);color:var(--text-primary);font-weight:600;box-shadow:0 2px 8px rgba(16,185,129,.2);position:relative;overflow:hidden}.btn-affiliate::after{content:'→';position:absolute;right:20px;opacity:0;transition:all var(--transition-base)}.btn-affiliate:hover::after{opacity:1;right:16px}.btn-affiliate:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px)scale(1.02);box-shadow:0 6px 16px rgba(16,185,129,.4),0 0 32px rgba(16,185,129,.2);padding-right:40px}.site-header{background:rgba(20,20,20,.8);border-bottom:1px solid var(--border-primary);padding:var(--spacing-lg)0;position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.site-header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-primary),transparent);opacity:.5}.nav-wrapper{display:flex;justify-content:space-between;align-items:center}.logo h1{font-size:1.5rem;font-weight:700;margin:0}.logo h1 a{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-nav{display:flex;gap:var(--spacing-xl)}.nav-link{color:var(--text-secondary);font-weight:500;transition:color var(--transition-fast)}.nav-link:hover{color:var(--text-primary)}.hamburger{display:none;flex-direction:column;gap:4px;background:0 0;border:none;cursor:pointer;padding:8px}.hamburger span{width:24px;height:2px;background-color:var(--text-primary);transition:all var(--transition-fast)}.hero{padding:120px 0;text-align:center;position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center}.hero-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/images/hero-bg.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat;background-color:#1a1a2e;z-index:0;animation:subtle-zoom 20s ease-in-out infinite alternate;filter:brightness(1.15)contrast(1.1)}@keyframes subtle-zoom{0%{transform:scale(1)}100%{transform:scale(1.05)}}.hero-background::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);opacity:.5;z-index:-1}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 800px 600px at 50% 50%,rgba(59,130,246,.2),transparent),linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,.6) 100%);z-index:1}.hero::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient( 0,transparent,transparent 2px,rgba(59,130,246,3%) 2px,rgba(59,130,246,3%) 4px );animation:grid-flow 20s linear infinite;pointer-events:none;z-index:2}@keyframes grid-flow{0%{transform:translateY(0)}100%{transform:translateY(50px)}}.hero .container{position:relative;z-index:3}.hero-content{max-width:800px;margin:0 auto;position:relative}.hero-title{font-size:3rem;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,#ffffff 0%,#3b82f6 50%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 8s ease infinite;background-size:200% 200%;filter:drop-shadow(0 2px 12px rgba(0,0,0,.9))drop-shadow(0 4px 24px rgba(0,0,0,.7))}@keyframes gradient-shift{0%,100%{background-position:0}50%{background-position:100%}}.hero-subtitle{font-size:1.25rem;color:var(--text-primary);margin-bottom:var(--spacing-xl);text-shadow:0 2px 8px rgba(0,0,0,.95),0 4px 16px rgba(0,0,0,.8),0 0 40px rgba(0,0,0,.6);font-weight:400}.listicles-section{padding:var(--spacing-3xl)0}.section-title{font-size:2rem;margin-bottom:var(--spacing-xl);text-align:center;position:relative;padding-bottom:var(--spacing-md)}.section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:2px;box-shadow:0 2px 8px rgba(59,130,246,.4)}.listicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}.listicle-card{background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(20,20,20,.8) 100%);border-radius:var(--radius-md);border:1px solid var(--border-primary);overflow:hidden;transition:all var(--transition-base);position:relative}.listicle-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));opacity:0;transition:opacity var(--transition-base);pointer-events:none;z-index:1}.listicle-card:hover::before{opacity:1}.listicle-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 40px rgba(59,130,246,.2),inset 0 1px rgba(255,255,255,.1);border-color:var(--accent-primary)}.card-image{width:100%;height:240px;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.listicle-card:hover .card-image img{transform:scale(1.05)}.card-content{padding:var(--spacing-lg);position:relative;z-index:2}.publish-date{display:block;font-size:.875rem;color:var(--text-tertiary);margin-bottom:var(--spacing-sm)}.card-title{font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.card-excerpt{color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:.9375rem}.sample-listicle{padding:var(--spacing-3xl)0;background-color:var(--bg-secondary)}.listicle-header{max-width:800px;margin:0 auto var(--spacing-2xl)}.listicle-intro{max-width:800px;margin:0 auto var(--spacing-2xl);color:var(--text-secondary)}.breadcrumb{display:block;font-size:.875rem;color:var(--text-tertiary);margin-bottom:var(--spacing-md)}.breadcrumb a{color:var(--text-tertiary)}.breadcrumb a:hover{color:var(--accent-primary)}.listicle-title{font-size:2.5rem;margin-bottom:var(--spacing-md)}.listicle-meta{color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.listicle-meta .divider{margin:0 var(--spacing-sm)}.affiliate-notice{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,5%));border-left:4px solid var(--color-warning);padding:var(--spacing-md);border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(245,158,11,.1);position:relative;overflow:hidden}.affiliate-notice::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--color-warning),transparent)}.affiliate-notice p{margin:0;font-size:.9375rem;color:var(--text-secondary)}.ranked-product{position:relative;background:linear-gradient(135deg,var(--bg-primary),rgba(20,20,20,.5));border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);transition:all var(--transition-base);overflow:hidden}.ranked-product::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,5%),transparent);transition:left .8s}.ranked-product:hover::before{left:100%}.ranked-product:hover{border-color:var(--accent-primary);box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 40px rgba(59,130,246,.15),inset 0 1px rgba(255,255,255,5%);transform:translateX(4px)}.rank-badge{position:absolute;top:-12px;left:var(--spacing-xl);font-size:1.5rem;font-weight:700;padding:8px 16px;border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.3);text-shadow:0 1px 2px rgba(0,0,0,.3);animation:badge-pulse 2s ease-in-out infinite}@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.rank-gold{background:linear-gradient(135deg,#ffd700,#ffed4e,#ffd700);color:#000;box-shadow:0 4px 12px rgba(255,215,0,.5),0 0 20px rgba(255,215,0,.3),inset 0 1px rgba(255,255,255,.4)}.rank-silver{background:linear-gradient(135deg,#c0c0c0,#e8e8e8,#c0c0c0);color:#000;box-shadow:0 4px 12px rgba(192,192,192,.5),0 0 20px rgba(192,192,192,.3),inset 0 1px rgba(255,255,255,.4)}.rank-bronze{background:linear-gradient(135deg,#cd7f32,#e89b5f,#cd7f32);color:#000;box-shadow:0 4px 12px rgba(205,127,50,.5),0 0 20px rgba(205,127,50,.3),inset 0 1px rgba(255,255,255,.3)}.rank-blue{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--text-primary);box-shadow:0 4px 12px rgba(59,130,246,.5),0 0 20px rgba(59,130,246,.3),inset 0 1px rgba(255,255,255,.2)}.product-layout{display:flex;gap:var(--spacing-xl);align-items:flex-start}.product-image{flex-shrink:0;width:300px;height:300px;border-radius:var(--radius-md);overflow:hidden;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:1px solid var(--border-primary);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:all var(--transition-base)}.ranked-product:hover .product-image{box-shadow:0 6px 16px rgba(0,0,0,.3);border-color:var(--accent-primary)}.product-image img{width:100%;height:100%;object-fit:cover}.product-details{flex:1}.product-name{font-size:1.75rem;margin-bottom:var(--spacing-sm);margin-top:var(--spacing-md)}.product-specs{color:var(--text-secondary);font-size:.9375rem;margin-bottom:var(--spacing-lg)}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.pros h5,.cons h5{font-size:1rem;margin-bottom:var(--spacing-md)}.pros h5{color:var(--color-success)}.cons h5{color:var(--color-error)}.pros ul,.cons ul{list-style:none}.pros li,.cons li{font-size:.9375rem;color:var(--text-secondary);margin-bottom:var(--spacing-sm);padding-left:20px;position:relative}.pros li::before{content:"✓";position:absolute;left:0;color:var(--color-success);font-weight:700}.cons li::before{content:"✗";position:absolute;left:0;color:var(--color-error);font-weight:700}.site-footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:var(--spacing-3xl)0 var(--spacing-lg)}.footer-content{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.footer-section h4,.footer-section h5{margin-bottom:var(--spacing-md);color:var(--text-primary)}.footer-section p{color:var(--text-secondary);font-size:.9375rem}.footer-section ul{list-style:none}.footer-section li{margin-bottom:var(--spacing-sm)}.footer-section a{color:var(--text-secondary);font-size:.9375rem;transition:color var(--transition-fast)}.footer-section a:hover{color:var(--text-primary)}.social-links{display:flex;gap:var(--spacing-md)}.footer-disclosure{background-color:var(--bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.footer-disclosure p{font-size:.875rem;color:var(--text-tertiary);margin:0}.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-primary)}.footer-bottom p{color:var(--text-tertiary);font-size:.875rem;margin:0}@media(max-width:1023px){h1{font-size:2.4rem}h2{font-size:1.8rem}.hero-title{font-size:2.4rem}.listicle-title{font-size:2rem}.hero{min-height:550px}.listicle-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}.footer-content{grid-template-columns:repeat(2,1fr)}.product-layout{gap:var(--spacing-lg)}.product-image{width:240px;height:240px}}@media(max-width:767px){:root{--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--spacing-3xl:48px}h1{font-size:2.1rem}h2{font-size:1.575rem}h3{font-size:1.25rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.listicle-title{font-size:1.75rem}body{line-height:1.7}.main-nav{display:none}.hamburger{display:flex}.hero{padding:80px 0;min-height:500px}.hero-background{background-position:60%}.listicle-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.card-content{padding:var(--spacing-md)}.ranked-product{padding:var(--spacing-lg);padding-top:var(--spacing-xl)}.rank-badge{left:var(--spacing-md);font-size:1.25rem;padding:6px 12px}.product-layout{flex-direction:column;gap:var(--spacing-lg)}.product-image{width:100%;height:auto;aspect-ratio:1}.pros-cons{grid-template-columns:1fr;gap:var(--spacing-lg)}.footer-content{grid-template-columns:1fr;gap:var(--spacing-xl)}.site-footer{padding:var(--spacing-xl)0 var(--spacing-lg)}}