.web-hero-section{color:#fff;background-color:#050505;justify-content:center;align-items:center;min-height:100vh;padding:120px 5% 80px;display:flex;position:relative;overflow:hidden}.web-hero-bg-glow{pointer-events:none;background:radial-gradient(circle,#c81e1e26 0%,#0000 70%);border-radius:50%;width:800px;height:800px;position:absolute;top:-200px;left:-200px}.web-hero-grid{z-index:2;grid-template-columns:1fr 1fr;align-items:center;gap:60px;width:100%;max-width:1400px;display:grid;position:relative}.web-hero-text h1{font-family:var(--font-neue-leiden), Georgia, serif;margin-bottom:24px;font-size:clamp(48px,5vw,80px);font-weight:500;line-height:1.1}.web-hero-text p{color:#ffffffb3;max-width:500px;margin-bottom:40px;font-size:20px;line-height:1.6}.web-hero-visual{justify-content:center;align-items:center;width:100%;height:600px;display:flex;position:relative}.browser-mockup{background:#111;border:1px solid #ffffff1a;border-radius:16px;width:100%;max-width:600px;height:400px;transition:all .6s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;box-shadow:0 40px 80px #00000080}.browser-header{background:#1a1a1a;border-bottom:1px solid #ffffff0d;align-items:center;gap:8px;height:40px;padding:0 16px;display:flex}.browser-dot{background:#333;border-radius:50%;width:12px;height:12px}.browser-dot.red{background:#ff5f56}.browser-dot.yellow{background:#ffbd2e}.browser-dot.green{background:#27c93f}.browser-content{background-image:url(/images/essen-markasi.png);background-position:top;background-size:cover;width:100%;height:calc(100% - 40px);transition:all .6s cubic-bezier(.22,1,.36,1)}.web-hero-visual:hover .browser-mockup{border-radius:40px;width:280px;height:560px}.web-hero-visual:hover .browser-header{opacity:0;height:0;padding:0}.web-hero-visual:hover .browser-content{background-size:100%;height:100%}.web-perf-section{color:#000;text-align:center;background:#fff;padding:120px 5%}.web-perf-header{margin-bottom:80px}.web-perf-header h2{font-family:var(--font-neue-leiden), Georgia, serif;margin-bottom:20px;font-size:clamp(36px,4vw,56px)}.web-perf-header p{color:#666;max-width:600px;margin:0 auto;font-size:18px}.lighthouse-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;max-width:1000px;margin:0 auto;display:grid}.lighthouse-item{flex-direction:column;align-items:center;gap:20px;display:flex}.lighthouse-gauge{justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge-bg{fill:none;stroke:#eee;stroke-width:8px}.gauge-progress{fill:none;stroke:#0c6;stroke-width:8px;stroke-dasharray:440;stroke-dashoffset:440px;stroke-linecap:round;transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1)}.lighthouse-item.animate .gauge-progress{stroke-dashoffset:0}.gauge-score{color:#0c6;font-family:monospace;font-size:40px;font-weight:600;position:absolute}.lighthouse-label{color:#333;font-size:18px;font-weight:500}.web-orbit-section{color:#fff;background:#0a0a0a;padding:120px 5%;position:relative;overflow:hidden}.orbit-container{justify-content:center;align-items:center;width:100%;max-width:800px;height:800px;margin:0 auto;display:flex;position:relative}.orbit-center{z-index:10;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;display:flex;box-shadow:0 0 40px #f003}.orbit-center img{height:24px}.orbit-ring{border:1px dashed #ffffff1a;border-radius:50%;animation:linear infinite rotate;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-ring-1{width:300px;height:300px;animation-duration:20s}.orbit-ring-2{width:500px;height:500px;animation-duration:35s;animation-direction:reverse}.orbit-ring-3{width:700px;height:700px;animation-duration:50s}.orbit-planet{color:#fff;background:#111;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.orbit-planet span{font-size:10px}@keyframes rotate{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@media (max-width:1000px){.web-hero-grid{text-align:center;grid-template-columns:1fr}.web-hero-text p{margin:0 auto 40px}.orbit-container{height:400px;transform:scale(.6)}}