:root {
    --bg: #030014;
    --bg2: rgba(15,10,35,0.4);
    --border: rgba(255,255,255,0.08);
    --primary: #00f2ff;
    --secondary: #ff00ff;
    --accent: #7000ff;
    --text: #ffffff;
    --muted: #8a8a9b;
    --grad1: linear-gradient(135deg, #00f2ff 0%, #7000ff 50%, #ff00ff 100%);
    --grad2: linear-gradient(135deg, #ff00ff 0%, #ff5555 100%);
    --font-h: 'Space Grotesk', sans-serif;
    --font-b: 'Outfit', sans-serif;
    --ease: cubic-bezier(0.16,1,0.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;cursor:none}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:700;letter-spacing:-0.02em;line-height:1.1}
p{color:var(--muted);font-weight:300;font-size:1.1rem}
a,button{text-decoration:none;color:inherit;cursor:none;outline:none}
ul{list-style:none}
.container{max-width:1400px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.section-pad{padding:160px 0;position:relative}
.section-border{border-bottom:1px solid var(--border)}
.w-full{width:100%;text-align:center;justify-content:center}

/* Cursor */
.cursor-dot{width:6px;height:6px;background:var(--primary);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-ring{width:40px;height:40px;border:1.5px solid rgba(0,242,255,0.4);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s,border-color 0.3s,background 0.3s}

/* WebGL */
#webgl-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Noise */
.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

/* Loader */
.loader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity 0.8s,visibility 0.8s}
.loader.hidden{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-logo{font-size:3rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:32px;animation:pulse-glow 1.5s infinite}
.loader-bar{width:200px;height:2px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;margin:0 auto 16px}
.loader-progress{height:100%;width:0;background:var(--grad1);border-radius:4px;transition:width 0.3s}
.loader-text{font-size:0.85rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
@keyframes pulse-glow{0%,100%{filter:drop-shadow(0 0 10px rgba(0,242,255,0.3))}50%{filter:drop-shadow(0 0 30px rgba(0,242,255,0.8))}}

/* Text Gradients */
.text-gradient{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;background-size:200% auto;animation:shine 4s linear infinite}
.text-gradient-alt{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
@keyframes shine{to{background-position:200% center}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:50px;font-weight:600;font-size:0.95rem;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;transition:all 0.4s var(--ease);border:none;font-family:var(--font-h)}
.btn-glow{background:var(--grad1);color:#fff;background-size:200% auto;box-shadow:0 8px 30px rgba(112,0,255,0.4)}
.btn-glow::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:0.6s}
.btn-glow:hover::before{left:100%}
.btn-glow:hover{background-position:right center;transform:translateY(-3px) scale(1.02);box-shadow:0 15px 40px rgba(255,0,255,0.5)}
.btn-glass{background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text);backdrop-filter:blur(10px)}
.btn-glass:hover{border-color:var(--primary);background:rgba(0,242,255,0.08);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,242,255,0.15)}
.btn-sm{padding:10px 20px;font-size:0.85rem}
.btn-xl{padding:18px 36px;font-size:1rem}

/* Header */
header{position:fixed;top:0;width:100%;z-index:1000;padding:20px 0;transition:all 0.5s var(--ease)}
header.scrolled{background:rgba(3,0,20,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:14px 0}
nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:10px;font-family:var(--font-h)}
.logo i{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.3rem}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:0.9rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:1px;transition:all 0.3s}
.nav-links a:hover{color:var(--primary);text-shadow:0 0 10px var(--primary)}
.mobile-toggle{display:none;font-size:1.5rem;color:var(--text)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:100px;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:50px;font-size:0.8rem;font-weight:600;letter-spacing:2px;color:var(--primary);text-transform:uppercase;margin-bottom:28px;backdrop-filter:blur(10px)}
.badge-dot{width:8px;height:8px;background:var(--primary);border-radius:50%;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(0,242,255,0.6)}50%{box-shadow:0 0 0 8px rgba(0,242,255,0)}}
.hero-title{margin-bottom:28px}
.title-line{display:block;font-size:5.5rem;font-weight:800;letter-spacing:-3px;line-height:1.05}
.title-gradient{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:shine 4s linear infinite}
.hero-desc{font-size:1.25rem;max-width:480px;margin-bottom:40px;line-height:1.7}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

/* Hero 3D Orb */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px}
.hero-3d-orb{width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,242,255,0.15),rgba(112,0,255,0.1),transparent);box-shadow:0 0 80px rgba(0,242,255,0.15),inset 0 0 60px rgba(112,0,255,0.1);animation:orb-float 6s ease-in-out infinite;position:relative;z-index:2}
.orb-ring{position:absolute;border-radius:50%;border:1px solid;top:50%;left:50%;transform:translate(-50%,-50%)}
.ring-1{width:400px;height:400px;border-color:rgba(0,242,255,0.1);animation:spin-slow 20s linear infinite}
.ring-2{width:460px;height:460px;border-color:rgba(255,0,255,0.08);animation:spin-slow 30s linear infinite reverse}
.ring-3{width:520px;height:520px;border-color:rgba(112,0,255,0.05);animation:spin-slow 40s linear infinite}
@keyframes orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes spin-slow{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Scroll Indicator */
.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0.5}
.scroll-mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,0.3);border-radius:12px;position:relative}
.scroll-wheel{width:3px;height:8px;background:#fff;border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);animation:scroll-anim 1.5s infinite}
@keyframes scroll-anim{0%{top:6px;opacity:1}100%{top:20px;opacity:0}}
.scroll-indicator span{font-size:0.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}

/* Metrics */
.metrics{padding:0}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.metric-card{padding:48px 32px;border-right:1px solid var(--border);text-align:center;position:relative;overflow:hidden}
.metric-card:last-child{border-right:none}
.metric-val{font-size:3.5rem;font-weight:800;font-family:var(--font-h);background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline}
.metric-suffix{font-size:1.5rem;font-weight:700;color:var(--primary);margin-left:2px;font-family:var(--font-h)}
.metric-label{display:block;font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px;font-weight:600}
.metric-bar{height:2px;background:rgba(255,255,255,0.05);border-radius:2px;margin-top:16px;overflow:hidden}
.metric-fill{height:100%;width:0;background:var(--grad1);border-radius:2px;transition:width 1.5s var(--ease)}

/* Section Header */
.section-header{text-align:center;margin-bottom:80px}
.section-tag{display:inline-block;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--primary);margin-bottom:16px;padding:6px 16px;background:rgba(0,242,255,0.06);border:1px solid rgba(0,242,255,0.15);border-radius:50px}
.section-title{font-size:4.5rem;letter-spacing:-2px;margin-bottom:20px}
.section-desc{font-size:1.2rem;max-width:600px;margin:0 auto;color:var(--muted)}

/* Infrastructure Horizontal Scroll */
.infrastructure{overflow:hidden}
.infra-track-wrapper{overflow:hidden;padding:0 40px}
.infra-track{display:flex;gap:32px;padding:20px 0;will-change:transform}
.infra-card{min-width:420px;background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:28px;padding:48px;position:relative;overflow:hidden;transition:all 0.5s var(--ease);flex-shrink:0}
.infra-card:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,242,255,0.1)}
.infra-num{font-size:6rem;font-weight:900;font-family:var(--font-h);background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:absolute;top:-10px;right:20px;line-height:1}
.infra-icon{font-size:2rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;filter:drop-shadow(0 0 10px rgba(0,242,255,0.3))}
.infra-card h3{font-size:1.6rem;margin-bottom:14px}
.infra-card p{font-size:1rem;line-height:1.7;margin:0}
.infra-glow{position:absolute;bottom:-50%;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(0,242,255,0.08),transparent 70%);pointer-events:none}

/* Arsenal Grid */
.arsenal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.arsenal-card{background:var(--bg2);backdrop-filter:blur(15px);border:1px solid var(--border);border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:all 0.4s var(--ease)}
.arsenal-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);transition:0.5s}
.arsenal-card:hover::before{left:100%}
.arsenal-card:hover{border-color:rgba(255,0,255,0.3);transform:translateY(-6px);box-shadow:0 16px 40px rgba(112,0,255,0.12)}
.ac-icon{font-size:1.6rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;display:inline-block;filter:drop-shadow(0 0 8px rgba(0,242,255,0.2))}
.arsenal-card h3{font-size:1.25rem;margin-bottom:10px;font-weight:600}
.arsenal-card p{font-size:0.95rem;margin:0;line-height:1.6}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price-card{background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:44px 32px;display:flex;flex-direction:column;transition:all 0.4s var(--ease);position:relative;overflow:hidden}
.price-card:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-8px)}
.price-card.featured{border-color:var(--secondary);background:linear-gradient(180deg,rgba(255,0,255,0.04),var(--bg2));transform:scale(1.04);box-shadow:0 0 50px rgba(255,0,255,0.1);z-index:2}
.price-card.featured:hover{transform:scale(1.04) translateY(-8px)}
.featured-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--grad1);color:#fff;padding:5px 18px;border-radius:0 0 10px 10px;font-size:0.75rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.price-tier{font-size:0.9rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin-bottom:16px}
.price-amount{font-size:3rem;font-weight:800;font-family:var(--font-h);margin-bottom:28px}
.price-amount span{font-size:1rem;color:var(--muted);font-weight:400}
.price-list{margin-bottom:32px;flex-grow:1}
.price-list li{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:1rem;color:var(--muted)}
.price-list i{color:var(--primary);font-size:0.9rem;filter:drop-shadow(0 0 4px var(--primary))}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.faq-left .section-title{text-align:left}
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;font-size:1.15rem;font-family:var(--font-h);font-weight:600;transition:color 0.3s}
.faq-q:hover{color:var(--primary)}
.faq-q i{color:var(--primary);font-size:0.9rem;transition:transform 0.4s}
.faq-item.active .faq-q{color:var(--primary)}
.faq-item.active .faq-q i{transform:rotate(45deg);color:var(--secondary)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease)}
.faq-a p{padding-bottom:20px;font-size:1.05rem;color:var(--muted);margin:0}

/* CTA */
.cta-card{text-align:center;padding:120px 40px;background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--primary);border-radius:32px;position:relative;overflow:hidden}
.cta-bg-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.15}
.orb-a{width:400px;height:400px;background:var(--primary);top:-100px;left:-100px;animation:drift 8s ease-in-out infinite}
.orb-b{width:350px;height:350px;background:var(--secondary);bottom:-100px;right:-100px;animation:drift 10s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
.cta-card .section-title{position:relative;z-index:2}
.cta-card .section-desc{position:relative;z-index:2;margin-bottom:48px}
.cta-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* Footer */
footer{border-top:1px solid var(--border);padding:48px 0}
.footer-content{display:flex;justify-content:space-between;align-items:center}
.footer-left p{color:var(--muted);margin-top:8px;font-size:0.95rem}
.footer-right{display:flex;align-items:center;gap:32px}
.footer-right span{color:var(--muted);font-size:0.9rem}
.footer-socials{display:flex;gap:16px}
.footer-socials a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.3s}
.footer-socials a:hover{background:var(--primary);color:#000;box-shadow:0 0 20px var(--primary)}

/* Reveal animation base */
.reveal-3d{opacity:0;transform:translateY(50px) rotateX(10deg);transform-origin:bottom center}
.text-center{text-align:center}

/* SEO vs PPC */
.compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:stretch}
.compare-card{background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:44px;position:relative;overflow:hidden}
.compare-card.seo-side{border-color:rgba(0,242,255,0.3);box-shadow:0 0 40px rgba(0,242,255,0.05)}
.compare-card.ppc-side{border-color:rgba(255,60,60,0.2)}
.compare-badge{position:absolute;top:16px;right:16px;background:var(--grad1);color:#fff;padding:4px 14px;border-radius:50px;font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.compare-card h3{font-size:1.8rem;margin-bottom:24px;display:flex;align-items:center;gap:12px}
.compare-card h3 i{font-size:1.4rem}
.seo-side h3 i{color:var(--primary)}
.ppc-side h3 i{color:#ff5555}
.compare-card ul{padding:0}
.compare-card li{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:1.05rem;color:var(--muted)}
.seo-side li i{color:var(--primary);filter:drop-shadow(0 0 4px var(--primary))}
.ppc-side li i{color:#ff5555}
.compare-vs{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;font-family:var(--font-h);background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:0 8px}

/* How It Works */
.steps-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:start}
.step-card{background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:40px;text-align:center;position:relative;transition:all 0.4s var(--ease)}
.step-card:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-6px)}
.step-num{font-size:4rem;font-weight:900;font-family:var(--font-h);background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:16px}
.step-icon{font-size:2rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px}
.step-card h3{font-size:1.4rem;margin-bottom:12px}
.step-card p{font-size:0.95rem;margin:0}
.step-arrow{display:flex;align-items:center;color:var(--primary);font-size:1.5rem;opacity:0.3;padding-top:80px}

/* Why Us */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:36px;text-align:center;transition:all 0.4s var(--ease)}
.why-card:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-6px)}
.why-card i{font-size:2rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;display:inline-block}
.why-card h3{font-size:1.2rem;margin-bottom:10px}
.why-card p{font-size:0.95rem;margin:0}

/* Case Studies */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-card{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:44px;transition:all 0.4s var(--ease);position:relative;overflow:hidden}
.case-card:hover{border-color:rgba(255,0,255,0.3);transform:translateY(-8px)}
.case-stat{font-size:3.5rem;font-weight:900;font-family:var(--font-h);background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px}
.case-card h3{font-size:1.4rem;margin-bottom:12px}
.case-card p{font-size:0.95rem;margin-bottom:16px}
.case-tag{display:inline-block;padding:4px 14px;background:rgba(0,242,255,0.08);border:1px solid rgba(0,242,255,0.2);border-radius:50px;font-size:0.75rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:1px}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testimonial-card{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px;transition:all 0.4s var(--ease)}
.testimonial-card:hover{border-color:rgba(255,0,255,0.2);transform:translateY(-6px)}
.stars{color:#fbbf24;font-size:1.2rem;margin-bottom:20px;letter-spacing:4px}
.testimonial-card p{font-size:1.05rem;font-style:italic;margin-bottom:24px;line-height:1.7}
.testimonial-author{display:flex;flex-direction:column;gap:2px}
.testimonial-author strong{color:var(--text);font-size:1rem}
.testimonial-author span{color:var(--muted);font-size:0.85rem}

/* Industries */
.industries-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.industry-pill{padding:14px 28px;background:var(--bg2);border:1px solid var(--border);border-radius:50px;font-size:1rem;font-weight:500;display:flex;align-items:center;gap:10px;transition:all 0.3s var(--ease)}
.industry-pill:hover{border-color:var(--primary);background:rgba(0,242,255,0.06);transform:translateY(-3px)}
.industry-pill i{color:var(--primary)}

/* Timeline */
.timeline-track{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.timeline-track::before{content:'';position:absolute;top:40px;left:10%;right:10%;height:2px;background:var(--border)}
.timeline-item{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:32px;text-align:center;transition:all 0.4s var(--ease);position:relative}
.timeline-item:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-6px)}
.tl-month{display:inline-block;padding:6px 16px;background:rgba(0,242,255,0.08);border:1px solid rgba(0,242,255,0.2);border-radius:50px;font-size:0.8rem;font-weight:700;color:var(--primary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.timeline-item h3{font-size:1.3rem;margin-bottom:10px}
.timeline-item p{font-size:0.95rem;margin:0}

/* About */
.about-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.about-text .section-title{text-align:left}
.about-text p{margin-bottom:20px}
.about-stats{display:flex;gap:40px;margin-top:32px}
.about-stats div{text-align:center}
.about-stats strong{display:block;font-size:2rem;font-family:var(--font-h);background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.about-stats span{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.about-visual{display:flex;align-items:center;justify-content:center}
.about-orb{width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(112,0,255,0.15),rgba(0,242,255,0.1),transparent);box-shadow:0 0 80px rgba(112,0,255,0.15);animation:orb-float 6s ease-in-out infinite}

/* Tools */
.tools-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.tool-item{padding:16px 32px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;font-size:1rem;font-weight:600;font-family:var(--font-h);transition:all 0.3s var(--ease)}
.tool-item:hover{border-color:var(--primary);background:rgba(0,242,255,0.06);transform:translateY(-3px)}

/* Trust */
.trust-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.trust-item{padding:16px 32px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;font-size:1rem;font-weight:600;color:var(--primary);transition:all 0.3s}
.trust-item:hover{border-color:var(--primary);background:rgba(0,242,255,0.06)}

/* Guarantee */
.guarantee-card{background:var(--bg2);border:1px solid rgba(0,242,255,0.2);border-radius:32px;padding:80px 40px}
.guarantee-icon{font-size:3rem;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:24px}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px;transition:all 0.4s var(--ease);display:flex;flex-direction:column}
.blog-card:hover{border-color:rgba(0,242,255,0.3);transform:translateY(-8px)}
.blog-tag{display:inline-block;padding:4px 12px;background:rgba(255,0,255,0.08);border:1px solid rgba(255,0,255,0.2);border-radius:50px;font-size:0.75rem;font-weight:600;color:var(--secondary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;width:fit-content}
.blog-card h3{font-size:1.3rem;margin-bottom:12px}
.blog-card p{font-size:0.95rem;margin-bottom:20px;flex-grow:1}
.blog-link{color:var(--primary);font-weight:600;font-size:0.9rem;display:flex;align-items:center;gap:8px;transition:gap 0.3s}
.blog-link:hover{gap:14px}

/* Form */
.audit-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.audit-text .section-title{text-align:left}
.form-input{width:100%;padding:16px 20px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:14px;color:var(--text);font-size:1rem;font-family:var(--font-b);outline:none;margin-bottom:16px;transition:border-color 0.3s}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 20px rgba(0,242,255,0.1)}
.form-input::placeholder{color:var(--muted)}

/* Newsletter */
.newsletter-card{background:var(--bg2);border:1px solid var(--border);border-radius:32px;padding:80px 40px}
.newsletter-form{display:flex;gap:12px;max-width:500px;margin:32px auto 0;justify-content:center}
.newsletter-form .form-input{margin-bottom:0;max-width:320px}

/* Responsive */
@media(max-width:1200px){
    .pricing-grid{grid-template-columns:1fr 1fr}
    .price-card.featured{transform:scale(1)}
    .price-card.featured:hover{transform:translateY(-8px)}
}
@media(max-width:1024px){
    .title-line{font-size:4rem!important}
    .section-title{font-size:3.5rem!important}
    .hero-grid{grid-template-columns:1fr}
    .hero-visual{display:none}
    .faq-layout{grid-template-columns:1fr}
    .infra-card{min-width:340px}
    .about-layout,.audit-layout{grid-template-columns:1fr}
    .steps-grid{grid-template-columns:1fr}
    .step-arrow{display:none}
    .why-grid{grid-template-columns:1fr 1fr}
    .timeline-track{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .title-line{font-size:3rem!important}
    .section-title{font-size:2.5rem!important}
    .hero-grid,.pricing-grid,.arsenal-grid,.metrics-grid,.compare-grid,.cases-grid,.testimonials-grid,.blog-grid,.why-grid,.timeline-track{grid-template-columns:1fr}
    .compare-vs{padding:16px 0}
    .nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:rgba(3,0,20,0.95);flex-direction:column;padding:24px;border-bottom:1px solid var(--border)}
    .nav-links.active{display:flex}
    .mobile-toggle{display:block}
    .section-pad{padding:100px 0}
    .metric-card{border-right:none;border-bottom:1px solid var(--border)}
    .footer-content{flex-direction:column;gap:24px;text-align:center}
    .cursor-dot,.cursor-ring{display:none}
    body{cursor:auto}
    .infra-card{min-width:280px;padding:32px}
    .about-stats{flex-direction:column;gap:20px}
    .newsletter-form{flex-direction:column;align-items:center}
    .newsletter-form .form-input{max-width:100%}
    .audit-demo-layout{grid-template-columns:1fr}
}

/* ============ GOOGLE RANKING MOCK ============ */
.google-mock{max-width:700px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);position:relative}
.gm-bar{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:24px;background:#f8f9fa}
.gm-logo{font-size:1.6rem;font-weight:700;color:#4285F4;font-family:'Outfit',sans-serif}
.gm-search-bar{flex:1;background:#fff;border:1px solid #dfe1e5;border-radius:24px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;font-size:0.95rem;color:#333}
.gm-search-bar i{color:#4285F4}
.gm-results{padding:16px 24px}
.gm-result{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #f0f0f0;transition:all 0.6s var(--ease)}
.gm-placeholder{opacity:0.5}
.gm-dot{width:28px;height:28px;border-radius:50%;background:#e8e8e8;flex-shrink:0}
.gm-lines div{height:10px;background:#e8e8e8;border-radius:4px;margin-bottom:6px}
.gm-lines div:first-child{width:180px}
.gm-lines div:last-child{width:280px}
.gm-target{background:rgba(0,242,255,0.04);border-radius:12px;padding:14px!important;border:1px solid rgba(0,242,255,0.15)!important;position:relative;order:5}
.gm-target.climbed{order:-1;border-color:rgba(52,168,83,0.4)!important;background:rgba(52,168,83,0.06)}
.gm-favicon{width:28px;height:28px;border-radius:50%;background:var(--grad1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.7rem;flex-shrink:0}
.gm-result-text{display:flex;flex-direction:column;gap:2px}
.gm-url{font-size:0.8rem;color:#202124}
.gm-title{font-size:1.1rem;color:#1a0dab;font-weight:600}
.gm-snippet{font-size:0.85rem;color:#545454;line-height:1.4}
.gm-rank-badge{position:absolute;top:20px;right:20px;background:var(--grad1);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;font-family:var(--font-h);box-shadow:0 8px 24px rgba(0,242,255,0.4);z-index:5;transition:all 0.8s var(--ease)}
.gm-rank-badge.at-top{background:linear-gradient(135deg,#34A853,#0f9d58);box-shadow:0 8px 24px rgba(52,168,83,0.5);transform:scale(1.2)}

/* ============ SEARCH TYPING ANIMATION ============ */
.search-anim{max-width:700px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);border:1px solid var(--border)}
.sa-browser{background:#2d2d2d;padding:12px 16px;display:flex;align-items:center;gap:12px}
.sa-dots{display:flex;gap:6px}
.sa-dots span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.15)}
.sa-dots span:first-child{background:#ff5f57}
.sa-dots span:nth-child(2){background:#ffbd2e}
.sa-dots span:last-child{background:#28c840}
.sa-url-bar{flex:1;background:rgba(255,255,255,0.1);border-radius:6px;padding:6px 14px;font-size:0.8rem;color:rgba(255,255,255,0.6);text-align:center}
.sa-body{background:#fff;padding:40px;text-align:center}
.sa-google-logo{font-size:3rem;font-weight:700;color:#4285F4;font-family:'Outfit',sans-serif;margin-bottom:24px}
.sa-search-input{max-width:500px;margin:0 auto 32px;background:#fff;border:2px solid #dfe1e5;border-radius:24px;padding:14px 24px;display:flex;align-items:center;font-size:1.1rem;color:#333;transition:border-color 0.3s}
.sa-search-input.active{border-color:#4285F4;box-shadow:0 4px 12px rgba(66,133,244,0.15)}
.sa-typed{font-family:monospace;min-width:1px}
.sa-cursor{color:#4285F4;animation:blink 0.8s infinite;font-weight:300}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.sa-search-input i{margin-left:auto;color:#4285F4;font-size:1rem}
.sa-result-area{opacity:0;transform:translateY(20px);transition:all 0.6s var(--ease);text-align:left}
.sa-result-area.visible{opacity:1;transform:translateY(0)}
.sa-top-result{display:flex;gap:14px;padding:16px;background:#f8fffe;border:1px solid rgba(52,168,83,0.2);border-radius:12px}
.sa-result-favicon{width:28px;height:28px;border-radius:50%;background:var(--grad1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.65rem;flex-shrink:0}
.sa-result-url{font-size:0.8rem;color:#202124}
.sa-result-title{font-size:1.1rem;color:#1a0dab;font-weight:600}
.sa-result-desc{font-size:0.85rem;color:#545454}

/* ============ SEO AUDIT CHECKLIST ============ */
.audit-demo-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center}
.audit-demo-text .section-title{text-align:left}
.audit-checklist{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:32px;backdrop-filter:blur(20px)}
.ac-item{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;margin-bottom:8px;transition:all 0.5s var(--ease);opacity:0.4}
.ac-item.done{opacity:1;background:rgba(0,242,255,0.04);border:1px solid rgba(0,242,255,0.1)}
.ac-check{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;transition:all 0.4s;flex-shrink:0}
.ac-item.done .ac-check{background:var(--primary);border-color:var(--primary);color:#000}
.ac-info{flex:1}
.ac-info h4{font-size:1rem;margin-bottom:2px;font-family:var(--font-h)}
.ac-info p{font-size:0.85rem;color:var(--muted);margin:0}
.ac-status{font-size:0.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;min-width:90px;text-align:right;transition:color 0.3s}
.ac-item.done .ac-status{color:var(--primary)}
.ac-progress-bar{height:4px;background:rgba(255,255,255,0.05);border-radius:4px;margin-top:16px;overflow:hidden}
.ac-progress-fill{height:100%;width:0;background:var(--grad1);border-radius:4px;transition:width 0.8s var(--ease)}
.ac-score{text-align:center;margin-top:12px;font-size:1.1rem;color:var(--muted)}
.ac-score strong{font-size:1.4rem;color:var(--primary);font-family:var(--font-h)}

/* ============ KEYWORD CLIMB ============ */
.kw-climb-grid{display:flex;flex-direction:column;gap:20px;max-width:700px;margin:0 auto}
.kw-item{display:grid;grid-template-columns:200px 1fr 120px;align-items:center;gap:20px;padding:20px 24px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;transition:all 0.4s var(--ease)}
.kw-item:hover{border-color:rgba(0,242,255,0.3)}
.kw-name{font-family:var(--font-h);font-weight:600;font-size:1rem;color:var(--text)}
.kw-track{position:relative;height:6px;background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden}
.kw-dot{position:absolute;right:0;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary);transition:right 2s var(--ease);z-index:2}
.kw-item.animated .kw-dot{right:calc(100% - 14px)}
.kw-line{position:absolute;top:0;right:0;height:100%;width:0;background:var(--grad1);border-radius:4px;transition:width 2s var(--ease)}
.kw-item.animated .kw-line{width:100%}
.kw-ranks{display:flex;justify-content:space-between}
.kw-start{font-size:0.9rem;color:#ff5555;font-weight:700;font-family:var(--font-h);text-decoration:line-through;opacity:0.5}
.kw-end{font-size:1.1rem;color:var(--primary);font-weight:800;font-family:var(--font-h);opacity:0;transition:opacity 1s 1.5s}
.kw-item.animated .kw-end{opacity:1}

@media(max-width:768px){
    .kw-item{grid-template-columns:1fr;gap:10px}
    .gm-search-bar span{font-size:0.8rem}
    .sa-google-logo{font-size:2rem}
    .lead-flow-anim{flex-direction:column;gap:40px}
    .lf-stream{width:4px;height:100px}
    .lf-dot{animation:flowDown 2s infinite linear}
}

@keyframes flowDown {
    0% { top: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ============ COMPETITOR OVERTAKE ============ */
.competitor-mock{max-width:700px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:24px}
.comp-item{display:grid;grid-template-columns:140px 1fr 50px;align-items:center;gap:20px;transition:transform 0.8s var(--ease)}
.comp-name{font-family:var(--font-h);font-weight:600;font-size:0.95rem}
.comp-bar-wrapper{height:12px;background:rgba(255,255,255,0.05);border-radius:6px;overflow:hidden;position:relative}
.comp-bar{height:100%;background:rgba(255,255,255,0.2);border-radius:6px;transition:width 1.5s var(--ease)}
.comp-target .comp-bar{background:var(--grad1);box-shadow:0 0 15px var(--primary)}
.comp-rank{font-family:var(--font-h);font-weight:800;font-size:1.1rem;text-align:right}
.comp-target .comp-rank{color:var(--primary)}

/* ============ LEAD FLOW ============ */
.lead-flow-anim{display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px;position:relative}
.lf-source, .lf-destination{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.lf-source i, .lf-destination i{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--primary)}
.lf-source span, .lf-destination span{font-family:var(--font-h);font-size:0.9rem;color:var(--muted)}
.lf-stream{flex:1;height:4px;background:rgba(255,255,255,0.05);margin:0 20px;position:relative;overflow:hidden}
.lf-dot{position:absolute;top:50%;left:0;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:flowRight 2s infinite linear}
.lf-dot:nth-child(2){animation-delay:0.5s}
.lf-dot:nth-child(3){animation-delay:1s}
.lf-dot:nth-child(4){animation-delay:1.5s}

@keyframes flowRight {
    0% { left: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.lf-conversion{display:flex;gap:16px;z-index:2}
.lf-box{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:80px;transition:all 0.5s var(--ease)}
.lf-box i{font-size:1.2rem;color:var(--primary)}
.lf-box span{font-size:0.8rem;color:var(--muted)}
.lf-box.active{background:rgba(0,242,255,0.05);border-color:var(--primary);transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,242,255,0.1)}

/* ============ SPEED GAUGE ============ */
.speed-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:900px;margin:0 auto}
.speed-text .section-title{text-align:left}
.speed-gauge-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px}
.speed-gauge{width:160px;height:160px;position:relative}
.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:rgba(255,255,255,0.05);stroke-width:8}
.gauge-fill{fill:none;stroke:#ff4d4d;stroke-width:8;stroke-dasharray:282.7;stroke-dashoffset:282.7;transition:stroke-dashoffset 2s var(--ease), stroke 2s;}
.gauge-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:900;font-family:var(--font-h);color:#ff4d4d;transition:color 2s;}
.gauge-status{font-family:var(--font-h);font-size:1.1rem;font-weight:600;color:#ff4d4d;transition:color 2s;}

@media(max-width:768px){
    .speed-layout{grid-template-columns:1fr}
}