/* =========================================== RESPONSIVE HERO - Neural Chaos Complete Breakpoints:1440, 1200, 1024, 768, 600, 480, 360 =========================================== *//* ===== 🎯 VISUAL FLOW SYSTEM ===== *//* 1) FADE-IN SEQUENTIAL — eye knows where to start */.hero-badge{opacity:0;animation:sequentialFade 0.6s ease-out 0.2s forwards}.hero-title .title-line:first-child{opacity:0;animation:sequentialFade 0.7s ease-out 0.5s forwards}.hero-title .subtitle-line{opacity:0;animation:sequentialFade 0.6s ease-out 0.9s forwards}.hero-title .highlight{opacity:0;animation:sequentialFade 0.8s ease-out 1.2s forwards, glowPulse 3s ease-in-out 2s infinite}.hero-description{opacity:0;animation:sequentialFade 0.6s ease-out 1.6s forwards}.signal-layer{opacity:0;animation:sequentialFade 0.6s ease-out 2s forwards}.hero-buttons{opacity:0;animation:sequentialFade 0.6s ease-out 2.3s forwards}@keyframes sequentialFade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes glowPulse{0%, 100%{text-shadow:0 0 22px rgba(0,212,255,0.25)}50%{text-shadow:0 0 35px rgba(0,212,255,0.4)}}/* 2) NEURAL CHAOS ACTIVE — compressed, powerful but not screaming */.neural-active{letter-spacing:0.38em;text-shadow:0 0 22px rgba(0,212,255,0.25);position:relative;padding:0.15em 0.3em;transform:scaleY(0.92);transform-origin:center}/* Subtle overlay behind ACTIVE */.neural-active::before{content:'';position:absolute;top:-0.1em;left:-0.5em;right:-0.5em;bottom:-0.1em;background:rgba(0,0,0,0.15);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:4px;z-index:-1}/* 3) VERTICAL RHYTHM — breathing space between blocks */.subtitle-boss{opacity:0.88 !important;font-weight:500 !important;margin-top:5px !important;margin-bottom:18px !important}.hero-description{line-height:1.85 !important;max-width:62% !important;margin-left:auto !important;margin-right:auto !important;margin-top:2.2rem !important;margin-bottom:0 !important}.signal-layer{margin-top:3.5rem !important;margin-bottom:1.5rem !important;text-align:center}.signal-main{font-size:1.5rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#fff;margin-bottom:0.5rem;text-shadow:0 0 20px rgba(255,0,85,0.5)}.signal-sub{font-size:0.82rem;font-weight:400;letter-spacing:0.1em;color:rgba(255,255,255,0.8);font-style:italic;text-shadow:0 0 18px rgba(0,217,255,0.12)}/* 4) BUTTON HIERARCHY — ENTER THE CHAOS is the portal */#chaos-portal{padding:18px 48px !important;font-size:15px !important;transition:all 0.15s ease 0.14s !important;position:relative;overflow:hidden}#chaos-portal::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid transparent;border-radius:inherit;transition:all 0.3s ease 0.1s}#chaos-portal:hover::after{border-color:rgba(0,217,255,0.6);box-shadow:0 0 15px rgba(0,217,255,0.4), inset 0 0 15px rgba(0,217,255,0.1);animation:portalPulse 0.8s ease-out}@keyframes portalPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.02);opacity:0.8}100%{transform:scale(1);opacity:1}}/* EXPLORAR — safe path, visually quieter */.hero-buttons .btn-primary{padding:14px 32px !important;font-size:13px !important;opacity:0.78 !important;filter:saturate(0.8) !important}.hero-buttons .btn-primary:hover{opacity:1 !important;filter:saturate(1) !important}/* 5) BACKGROUND BREATHING — alive, not static */.hero .video-background,.hero .animated-bg{animation:slowDrift 45s ease-in-out infinite}@keyframes slowDrift{0%, 100%{transform:scale(1)}50%{transform:scale(1.04)}}/* 6) VISUAL SPINE — connects all elements */.hero-content::before{content:'';position:absolute;left:50%;top:8%;height:75%;width:1px;background:linear-gradient( to bottom, transparent 0%, rgba(0,217,255,0.12) 15%, rgba(0,217,255,0.18) 50%, rgba(0,217,255,0.12) 85%, transparent 100% );transform:translateX(-50%);z-index:-1;pointer-events:none}/* 7) SEO + Myth element — crawler food */.seo-myth{position:absolute;bottom:-2.5rem;left:45%;transform:translateX(-50%);font-size:0.6rem;opacity:0.35;color:#fff;white-space:nowrap;pointer-events:none;user-select:none;font-style:italic}/* 8) Scroll cue — delayed appearance */.scroll-down{opacity:0;animation:fadeInScroll 1s ease-out 2.8s forwards}.scroll-line{animation:scrollBounce 2.5s ease-in-out infinite;animation-delay:3s}@keyframes fadeInScroll{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes scrollBounce{0%, 100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(8px);opacity:1}}/* ===== FIX:HERO TITLE SPACING FOR ALL SCREENS ===== */.hero-title{line-height:1.0 !important;margin-bottom:25px !important}.hero-title .title-line{display:block;margin-bottom:0.08em}.hero-title .title-line:first-child{/* Mister RickRoss */ margin-bottom:0.05em}.hero-title .subtitle-line{/* NEURAL CHAOS ARCHITECT */ margin-bottom:0.1em;margin-top:0.02em}.hero-title .highlight{/* NEURAL CHAOS ACTIVE */ margin-top:0.12em !important;display:block}.hero-badge{margin-bottom:25px !important;margin-top:20px !important}/* Logo text watermark - symbol stays, text fades */.navbar .logo-text{opacity:0.45;transition:opacity 0.3s ease}.navbar:hover .logo-text,.navbar.scrolled .logo-text{opacity:0.85}/* Logo responsive text variants */.logo-full{display:inline !important}.logo-medium{display:none !important}.logo-short{display:none !important}@media (max-width:1100px){.logo-full{display:none !important}.logo-medium{display:inline !important}.logo-short{display:none !important}}@media (max-width:768px){.logo-full{display:none !important}.logo-medium{display:none !important}.logo-short{display:inline !important}}/* ===== LARGE DESKTOP (1440px+) ===== */@media (min-width:1440px){.hero{padding-top:120px !important}.hero-content{max-width:1200px;margin:0 auto;padding-top:30px}.hero-badge{margin-top:25px !important;margin-bottom:35px !important}.hero-title{font-size:clamp(90px, 9vw, 140px) !important;line-height:0.98 !important;margin-bottom:30px !important}.hero-title .title-line:first-child{font-size:1em;margin-bottom:0.04em}.hero-title .subtitle-line{font-size:0.35em !important;margin-top:0.05em;margin-bottom:0.08em}.hero-title .highlight{font-size:0.85em !important;margin-top:0.06em !important}.signal-layer{margin:2.5rem 0 !important}.signal-main{font-size:1.8rem !important}.signal-sub{font-size:1rem !important}}/* ===== DESKTOP (1200px - 1439px) ===== */@media (max-width:1439px) and (min-width:1200px){.hero{padding-top:110px !important}.hero-content{padding-top:25px}.hero-badge{margin-top:20px !important;margin-bottom:30px !important}.hero-title{font-size:clamp(75px, 8vw, 120px) !important;line-height:1.0 !important;margin-bottom:28px !important}.hero-title .title-line:first-child{margin-bottom:0.05em}.hero-title .subtitle-line{font-size:0.38em !important;margin-top:0.04em;margin-bottom:0.1em}.hero-title .highlight{font-size:0.82em !important;margin-top:0.07em !important}}/* ===== SMALL DESKTOP / LARGE TABLET (1024px - 1199px) ===== */@media (max-width:1199px) and (min-width:1024px){.hero-content{padding:0 40px}.hero-title{font-size:clamp(60px, 7vw, 100px) !important;line-height:1.1 !important;margin-bottom:30px !important}.hero-title .title-line:first-child{margin-bottom:0.12em}.hero-title .subtitle-line{font-size:0.4em !important;margin-top:0.1em;margin-bottom:0.2em}.hero-title .highlight{font-size:0.78em !important;letter-spacing:0.28em !important;margin-top:0.15em !important}.hero-badge{margin-bottom:25px !important}.signal-main{font-size:1.4rem !important}.signal-sub{font-size:0.85rem !important}}/* ===== TABLET / iPad (768px - 1023px) ===== */@media (max-width:1023px) and (min-width:768px){.hero{height:auto;min-height:100vh;min-height:100dvh;padding:110px 0 60px}.hero-content{padding:0 40px;max-width:90%;margin:0 auto}/* Disable visual spine on tablet */ .hero-content::before{display:none}.hero-badge{margin-bottom:28px;margin-top:15px;padding:12px 24px}.badge-text{font-size:11px;letter-spacing:2px}.hero-title{font-size:clamp(55px, 9vw, 95px);margin-bottom:22px;line-height:1.05}.title-line{letter-spacing:3px}.subtitle-line{white-space:normal}.subtitle-boss{font-size:clamp(18px, 3.2vw, 34px);display:block;margin:10px 0 15px 0}.hero-title .highlight{font-size:clamp(45px, 8vw, 80px);letter-spacing:0.22em !important;margin-top:12px}/* Manifesto - iPad */ .hero-description{font-size:clamp(15px, 2.2vw, 17px);margin:25px auto 30px !important;max-width:80% !important;line-height:1.75}.hero-description br{display:block}.hero-description span{display:block;margin-top:8px}/* Signal Layer - iPad */ .signal-layer{margin:2.5rem 0 !important;padding:0 30px}.signal-main{font-size:1.35rem !important;letter-spacing:0.14em !important}.signal-sub{font-size:0.85rem !important;letter-spacing:0.08em !important}/* Buttons - iPad */ .hero-buttons{gap:15px;margin-top:25px;flex-direction:row;justify-content:center}.hero-buttons .btn{padding:15px 32px;font-size:13px}#chaos-portal{padding:16px 42px !important;font-size:14px !important}.hero-buttons .btn-primary{padding:14px 28px !important;font-size:12px !important}.scroll-down{margin-top:35px}/* Social Sidebar - Tablet */ .social-sidebar{right:20px;gap:20px}.social-link{font-size:18px}}/* ===== LARGE MOBILE (600px - 767px) ===== */@media (max-width:767px) and (min-width:600px){.hero{height:auto;min-height:100vh;min-height:100dvh;padding:90px 0 50px}.hero-content{padding:0 25px}.hero-badge{margin-bottom:20px;padding:8px 16px}.badge-icon{font-size:16px}.badge-text{font-size:9px;letter-spacing:1.5px}.hero-title{font-size:clamp(42px, 9vw, 70px);margin-bottom:15px;line-height:1.15}.title-line{letter-spacing:3px}.subtitle-line{white-space:normal}.subtitle-boss{font-size:clamp(16px, 3vw, 26px);display:block;margin:6px 0;letter-spacing:0.5px}.hero-title .highlight{font-size:clamp(34px, 7vw, 58px);letter-spacing:0.2em !important;margin-top:8px;text-shadow:0 0 20px rgba(0,212,255,0.25) !important}.hero-description{font-size:14px;margin:15px auto 20px;max-width:95%;line-height:1.6}.hero-description br{display:block}.hero-description span{display:block;margin-top:6px;font-size:0.85em !important}/* Signal Layer - Large Mobile */ .signal-layer{margin:1.2rem 0 !important;padding:0 15px}.signal-main{font-size:1rem !important;letter-spacing:0.1em !important;margin-bottom:0.4rem !important}.signal-sub{font-size:0.75rem !important;letter-spacing:0.06em !important}.hero-buttons{flex-direction:column;gap:10px;margin-top:15px;width:100%;max-width:300px;margin-left:auto;margin-right:auto}.hero-buttons .btn{width:100%;padding:14px 24px;font-size:12px;justify-content:center}.scroll-down{margin-top:25px}.scroll-text{font-size:10px}.scroll-line{height:20px}/* Hide Social Sidebar on Mobile */ .social-sidebar{display:none}}/* ===== MOBILE (480px - 599px) ===== */@media (max-width:599px) and (min-width:480px){.hero{height:auto;min-height:100vh;min-height:100dvh;padding:80px 0 40px}.hero-content{padding:0 20px}.hero-badge{margin-bottom:18px;padding:8px 14px;gap:8px}.badge-icon{font-size:14px}.badge-text{font-size:8px;letter-spacing:1.2px}.hero-title{font-size:clamp(36px, 10vw, 56px);margin-bottom:12px;line-height:1.1}.title-line{letter-spacing:2px}.subtitle-boss{font-size:clamp(14px, 3.5vw, 22px);display:block;margin:5px 0}.hero-title .highlight{font-size:clamp(28px, 8vw, 46px);letter-spacing:0.15em !important;margin-top:6px}.hero-description{font-size:13px;margin:12px auto 15px;line-height:1.5}.hero-description span{font-size:0.85em !important}/* Signal Layer - Mobile */ .signal-layer{margin:1rem 0 !important;padding:0 10px}.signal-main{font-size:0.9rem !important;letter-spacing:0.08em !important;margin-bottom:0.3rem !important;text-shadow:0 0 15px rgba(255,0,85,0.4) !important}.signal-sub{font-size:0.7rem !important;letter-spacing:0.05em !important;line-height:1.4}.hero-buttons{flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:280px;margin-left:auto;margin-right:auto}.hero-buttons .btn{width:100%;padding:12px 20px;font-size:11px}/* Chaos Portal Button */ #chaos-portal:hover{transform:skewX(-0.5deg) scale(1.01) !important}.scroll-down{display:none}.social-sidebar{display:none}}/* ===== SMALL MOBILE (360px - 479px) ===== */@media (max-width:479px) and (min-width:360px){.hero{height:auto;min-height:100vh;min-height:100dvh;padding:75px 0 35px}.hero-content{padding:0 15px}.hero-badge{margin-bottom:15px;padding:6px 12px;gap:6px}.badge-icon{font-size:12px}.badge-text{font-size:7px;letter-spacing:1px}.hero-title{font-size:clamp(30px, 11vw, 48px);margin-bottom:10px;line-height:1.08}.title-line{letter-spacing:1px}.subtitle-boss{font-size:clamp(12px, 3.8vw, 18px);display:block;margin:4px 0;letter-spacing:0}.hero-title .highlight{font-size:clamp(24px, 8vw, 40px);letter-spacing:0.12em !important;margin-top:5px;text-shadow:0 0 18px rgba(0,212,255,0.2) !important}.hero-description{font-size:12px;margin:10px auto 12px;line-height:1.45}.hero-description span{font-size:0.8em !important;margin-top:4px}/* Signal Layer - Small Mobile */ .signal-layer{margin:0.8rem 0 !important;padding:0 8px}.signal-main{font-size:0.8rem !important;letter-spacing:0.06em !important;margin-bottom:0.25rem !important}.signal-sub{font-size:0.65rem !important;letter-spacing:0.04em !important;line-height:1.35}.hero-buttons{flex-direction:column;gap:6px;margin-top:10px;width:100%;padding:0 5px}.hero-buttons .btn{width:100%;padding:11px 18px;font-size:10px;letter-spacing:1px}.scroll-down, .social-sidebar{display:none}}/* ===== EXTRA SMALL MOBILE (< 360px) ===== */@media (max-width:359px){.hero{height:auto;min-height:100vh;min-height:100dvh;padding:70px 0 30px}.hero-content{padding:0 12px}.hero-badge{margin-bottom:12px;padding:5px 10px;gap:5px}.badge-icon{font-size:10px}.badge-text{font-size:6px;letter-spacing:0.8px}.hero-title{font-size:clamp(26px, 12vw, 40px);margin-bottom:8px;line-height:1.05}.title-line{letter-spacing:0.5px}.subtitle-boss{font-size:clamp(10px, 4vw, 15px);display:block;margin:3px 0}.hero-title .highlight{font-size:clamp(20px, 9vw, 34px);letter-spacing:0.1em !important;margin-top:4px}.hero-description{font-size:11px;margin:8px auto 10px;line-height:1.4}.hero-description span{font-size:0.75em !important}/* Signal Layer - Extra Small */ .signal-layer{margin:0.6rem 0 !important;padding:0 5px}.signal-main{font-size:0.7rem !important;letter-spacing:0.04em !important;margin-bottom:0.2rem !important}.signal-sub{font-size:0.58rem !important;letter-spacing:0.02em !important;line-height:1.3}.hero-buttons{gap:5px;margin-top:8px;padding:0}.hero-buttons .btn{padding:10px 15px;font-size:9px;letter-spacing:0.5px}.scroll-down, .social-sidebar{display:none}}/* ===== LANDSCAPE MOBILE ===== */@media (max-height:500px) and (orientation:landscape){.hero{height:auto;min-height:100vh;padding:60px 0 30px}.hero-content{display:flex;flex-direction:column;justify-content:center;gap:10px}.hero-badge{margin-bottom:10px}.hero-title{font-size:clamp(28px, 6vw, 50px);margin-bottom:8px}.subtitle-boss{font-size:clamp(12px, 2.5vw, 20px)}.hero-title .highlight{font-size:clamp(24px, 5vw, 42px);letter-spacing:0.15em !important}.hero-description{margin:8px auto 10px;font-size:12px}.signal-layer{margin:0.5rem 0 !important}.signal-main{font-size:0.75rem !important}.signal-sub{font-size:0.6rem !important}.hero-buttons{flex-direction:row;gap:10px;margin-top:10px}.hero-buttons .btn{padding:10px 20px;font-size:10px}.scroll-down{display:none}}/* ===== SEO LAYER RESPONSIVE ===== */.hero-content > p[style*="position:absolute"]{/* SEO micro-phrase stays hidden but responsive */ font-size:0.5rem !important}@media (max-width:768px){.hero-content > p[style*="position:absolute"]{font-size:0.4rem !important;bottom:-1.5rem !important}}@media (max-width:480px){.hero-content > p[style*="position:absolute"]{display:none !important}}/* ===== HOVER STATES - Touch Devices ===== */@media (hover:none) and (pointer:coarse){#chaos-portal:hover{transform:none !important;text-shadow:none !important;filter:none !important}#chaos-portal:active{transform:scale(0.98) !important;filter:brightness(1.1) !important}.btn:hover::before{display:none}}/* ===== HIGH DPI / RETINA ===== */@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){.hero-title, .signal-main, .signal-sub{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}/* ===== REDUCED MOTION ===== */@media (prefers-reduced-motion:reduce){.hero-content, .hero-badge, .hero-title, .title-line, .hero-description, .hero-buttons, .scroll-down{animation:none !important;transition:none !important}#chaos-portal:hover{transform:none !important}.boss-off{animation:none !important}.scroll-line{animation:none !important}}/* ===== DARK MODE SUPPORT ===== */@media (prefers-color-scheme:dark){/* Already dark, but ensure contrast */ .signal-main{color:#fff !important}.signal-sub{color:rgba(255,255,255,0.65) !important}}/* ===== PRINT STYLES ===== */@media print{.hero{height:auto !important;min-height:auto !important;padding:20px !important;background:white !important}.video-background, .animated-bg, #three-canvas, .scroll-down, .social-sidebar, .hero-buttons{display:none !important}.hero-title{color:#000 !important;text-shadow:none !important;font-size:32px !important}.signal-main, .signal-sub{color:#333 !important;text-shadow:none !important}}