:root { --bg-dark: #07090e; --bg-surface: #0e121b; --bg-surface-elevated: #151b28; --bg-surface-hover: #1c2436; --bg-glass: rgba(14, 18, 27, 0.85); --bg-glass-card: rgba(21, 27, 40, 0.65); --border-subtle: rgba(255, 255, 255, 0.08); --border-glow: rgba(40, 199, 126, 0.35); --border-gold-glow: rgba(244, 196, 104, 0.35); --primary: #28c77e; --primary-light: #44dc95; --primary-dark: #158852; --primary-glow: rgba(40, 199, 126, 0.4); --accent-gold: #f4c468; --accent-gold-light: #fae0a2; --accent-gold-dark: #d49838; --accent-gold-glow: rgba(244, 196, 104, 0.35); --text-main: #f3f5f8; --text-muted: #9ba3b4; --text-faint: #60687a; --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px; --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 35px rgba(40, 199, 126, 0.2); --shadow-gold: 0 0 35px rgba(244, 196, 104, 0.2); --transition-fast: 0.15s ease; --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; color-scheme: dark; background-color: var(--bg-dark); } body { font-family: var(--font-body); color: var(--text-main); background-color: var(--bg-dark); line-height: 1.6; overflow-x: hidden; width: 100%; -webkit-font-smoothing: antialiased; } img, picture, video { max-width: 100%; height: auto; display: block; object-fit: cover; } a { color: var(--primary); text-decoration: none; transition: color 0.15s ease, text-decoration 0.15s ease, transform 0.15s ease; } a:visited { color: var(--primary); } a:hover { color: var(--accent-gold); } p a, .intro-copy a, .lede a, .article-body a, .article-body ul li a:not(.btn):not(.cluster-links a):not(.dropdown-item-link):not(.nav-links a):not(.mega-extra-link) { color: var(--primary) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } p a:hover, .intro-copy a:hover, .lede a:hover, .article-body a:hover, .article-body ul li a:not(.btn):not(.cluster-links a):not(.dropdown-item-link):not(.nav-links a):not(.mega-extra-link):hover { color: var(--accent-gold) !important; text-decoration: underline; } .btn-ghost { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 0.92rem !important; padding: 11px 22px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; transition: all 0.22s ease !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; } .btn-ghost:hover { background: #ffffff !important; color: #07090e !important; border-color: #ffffff !important; box-shadow: 0 0 22px rgba(255, 255, 255, 0.5) !important; transform: translateY(-2px) !important; } .btn-outline { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 0.92rem !important; padding: 11px 22px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; transition: all 0.22s ease !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; } .btn-outline:hover { background: #ffffff !important; color: #07090e !important; border-color: #ffffff !important; box-shadow: 0 0 22px rgba(255, 255, 255, 0.55) !important; transform: translateY(-2px) !important; } .ambient-glow-1 { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: min(900px, 100vw); height: 550px; background: radial-gradient(circle, rgba(40, 199, 126, 0.16) 0%, rgba(7, 9, 14, 0) 70%); filter: blur(80px); pointer-events: none; z-index: 0; overflow: hidden; } .ambient-glow-2 { position: absolute; top: 900px; right: -150px; width: min(700px, 100vw); height: 600px; background: radial-gradient(circle, rgba(244, 196, 104, 0.12) 0%, rgba(7, 9, 14, 0) 70%); filter: blur(90px); pointer-events: none; z-index: 0; overflow: hidden; } .ambient-glow-3 { position: absolute; top: 2200px; left: -150px; width: min(700px, 100vw); height: 600px; background: radial-gradient(circle, rgba(40, 199, 126, 0.12) 0%, rgba(7, 9, 14, 0) 70%); filter: blur(90px); pointer-events: none; z-index: 0; overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--text-main); word-wrap: break-word; overflow-wrap: break-word; } h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.24; letter-spacing: -0.015em; margin-bottom: 0.5em; } h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.28; letter-spacing: -0.012em; margin-bottom: 0.45em; } h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.34; letter-spacing: -0.008em; margin-bottom: 0.4em; } h4 { font-size: 1.15rem; line-height: 1.38; margin-bottom: 0.35em; } p { color: var(--text-muted); line-height: 1.72; margin-bottom: 1.15em; font-size: clamp(0.95rem, 1vw, 1.05rem); } .lede, .hero-sub, .intro-copy { line-height: 1.75; margin-bottom: 1.4em; font-size: clamp(1.02rem, 1.2vw, 1.18rem); } .section-head { margin-bottom: clamp(28px, 4vw, 48px); } .section-head h2 { margin-bottom: 10px; } .eyebrow { margin-bottom: 8px; display: inline-block; } .highlight-gradient { background: linear-gradient(135deg, #ffffff 15%, var(--primary) 65%, var(--accent-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gold-gradient { background: linear-gradient(135deg, #fff3d1 0%, var(--accent-gold) 60%, var(--accent-gold-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 24px); position: relative; z-index: 1; } .site-header { position: sticky; top: 0; z-index: 500; width: 100%; background: rgba(10, 14, 27, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); transition: var(--transition); } .nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1220px; margin: 0 auto; padding: 12px 24px; position: relative; } .site-header.scrolled { border-bottom-color: rgba(40, 199, 126, 0.3); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 42px; flex-shrink: 0; } .brand-mark svg { width: 100%; height: 100%; display: block; } .brand-wrap { display: flex; flex-direction: column; } .brand-name { font-family: var(--font-heading); font-size: 1.22rem; font-weight: 800; line-height: 1.1; color: var(--text-main); letter-spacing: -0.01em; } .brand-accent { color: var(--primary); } .brand-tagline { font-family: var(--font-body); font-size: 0.7rem; color: var(--accent-gold); font-weight: 600; letter-spacing: 0.05em; margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; } .nav-links > li { position: relative; display: flex; align-items: center; height: 48px; } .has-dropdown::after { content: ''; position: absolute; top: 100%; left: -15px; right: -15px; height: 24px; background: transparent; z-index: 1050; } .nav-links > li > a, .nav-drop-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: none; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--text-muted); text-decoration: none; cursor: pointer; border-radius: var(--radius-full); transition: var(--transition-fast); } .nav-links > li > a:hover, .nav-drop-trigger:hover, .has-dropdown:hover .nav-drop-trigger { color: var(--text-main); background: rgba(255, 255, 255, 0.08); } .nav-drop-trigger .caret { font-size: 0.72rem; transition: transform 0.2s ease; } .has-dropdown:hover .nav-drop-trigger .caret { transform: rotate(180deg); color: var(--primary); } .dot-live { display: inline-block; width: 7px; height: 7px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 8px var(--primary); animation: pulse 1.8s infinite; } .nav-dropdown { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(11, 15, 23, 0.98); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(40, 199, 126, 0.25); border-radius: var(--radius-lg); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(40, 199, 126, 0.12); padding: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1100; } @media (min-width: 961px) { .has-dropdown:hover > .nav-dropdown, .has-dropdown.open > .nav-dropdown, .nav-dropdown:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .has-dropdown:hover > .mega-menu-futuristic, .has-dropdown.open > .mega-menu-futuristic { transform: translateX(-48%) translateY(0); } } @media (min-width: 961px) { .mega-menu-futuristic { width: 990px; max-width: 94vw; padding: 24px; left: 50%; transform: translateX(-48%) translateY(8px); } .mega-hub-grid { display: grid; grid-template-columns: 2.15fr 0.85fr; gap: 24px; } .services-cluster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } .service-cluster-card { background: rgba(21, 27, 40, 0.5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; transition: var(--transition-fast); } .service-cluster-card:hover { background: rgba(25, 33, 49, 0.85); border-color: rgba(40, 199, 126, 0.35); transform: translateY(-2px); } .cluster-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); } .cluster-icon-box { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(40, 199, 126, 0.12); border: 1px solid rgba(40, 199, 126, 0.25); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--primary); flex-shrink: 0; } .cluster-icon-box.gold { background: rgba(244, 196, 104, 0.12); border-color: rgba(244, 196, 104, 0.25); color: var(--accent-gold); } .cluster-title { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .cluster-links { list-style: none; display: flex; flex-direction: column; gap: 4px; } .cluster-links li a { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; color: var(--text-muted); text-decoration: none; font-size: 0.84rem; font-weight: 500; border-radius: var(--radius-xs); transition: var(--transition-fast); } .cluster-links li a:hover { color: var(--text-main); background: rgba(40, 199, 126, 0.1); padding-left: 11px; } .cluster-links li a .arrow { opacity: 0; transform: translateX(-4px); transition: var(--transition-fast); color: var(--primary); font-size: 0.75rem; } .cluster-links li a:hover .arrow { opacity: 1; transform: translateX(0); } .mega-spotlight-panel { background: linear-gradient(145deg, rgba(24, 32, 48, 0.9), rgba(12, 16, 25, 0.95)); border: 1px solid rgba(244, 196, 104, 0.25); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .spotlight-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.3); padding: 3px 10px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .spotlight-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; line-height: 1.3; } .spotlight-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; } .mega-bottom-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--border-subtle); font-size: 0.86rem; flex-wrap: wrap; gap: 12px; } .mega-bottom-strip a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-weight: 600; transition: var(--transition-fast); } .mega-bottom-strip a:hover { color: var(--primary); } .mega-bottom-strip a.highlight { color: var(--accent-gold); } @media (min-width: 961px) { .affiliate-dropdown-card { width: 320px; } .blog-dropdown-card { width: 380px; } .about-dropdown-card { width: 290px; } } .affiliate-dropdown-card { padding: 18px; } .affiliate-highlight-box { background: rgba(40, 199, 126, 0.08); border: 1px solid rgba(40, 199, 126, 0.25); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; text-align: center; } .affiliate-rate { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1; } .affiliate-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; } .dropdown-item-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; color: var(--text-muted); text-decoration: none; font-size: 0.88rem; font-weight: 500; border-radius: var(--radius-sm); transition: var(--transition-fast); } .dropdown-item-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-main); transform: translateX(3px); } .blog-dropdown-card { padding: 18px; } .blog-mini-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; transition: var(--transition-fast); } .blog-mini-item:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(3px); } .blog-mini-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.05em; } .blog-mini-title { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 600; color: var(--text-main); line-height: 1.3; } .about-dropdown-card { padding: 14px; } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 50%; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-main); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle.open span:first-child { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: var(--transition); border: none; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, #28c77e 0%, #158852 100%); color: #ffffff; box-shadow: 0 4px 20px var(--primary-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(40, 199, 126, 0.55); } .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--text-main); border: 1px solid var(--border-subtle); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .btn-gold { background: linear-gradient(135deg, #f4c468 0%, #d49838 100%); color: #07090e; font-weight: 700; box-shadow: 0 4px 20px var(--accent-gold-glow); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(244, 196, 104, 0.55); } .btn-block { width: 100%; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(40, 199, 126, 0.1); border: 1px solid rgba(40, 199, 126, 0.3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } .section-head { text-align: center; max-width: 760px; margin: 0 auto 36px; } .section-head h2 { margin-top: 6px; margin-bottom: 14px; line-height: 1.22; } .section-head p { font-size: clamp(0.96rem, 1.3vw, 1.08rem); line-height: 1.65; color: var(--text-muted); } .badge-pulse { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; animation: pulse 1.8s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(40, 199, 126, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(40, 199, 126, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(40, 199, 126, 0); } } .hero-wrapper { padding-top: clamp(120px, 14vw, 150px); padding-bottom: clamp(60px, 8vw, 100px); position: relative; overflow: hidden; } .hero-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 75% 35%, rgba(40, 199, 126, 0.12) 0%, transparent 55%), radial-gradient(circle at 25% 65%, rgba(244, 196, 104, 0.08) 0%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; pointer-events: none; z-index: 0; } .top-process-pipeline { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 36px); margin-bottom: 30px; flex-wrap: wrap; } .process-step-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .process-step-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.35); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--accent-gold); } .process-step-item.active .process-step-icon { background: rgba(40, 199, 126, 0.15); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 10px rgba(40, 199, 126, 0.4); } .process-divider { color: var(--border-subtle); font-size: 0.8rem; } .hero-master-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 4vw, 50px); align-items: center; } .hero-left { text-align: left; } .hero-trusted-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .hero-main-title { font-size: clamp(2.4rem, 4.2vw, 3.8rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; } .hero-line-gold { color: var(--accent-gold); display: block; } .hero-line-white { color: #ffffff; display: block; } .hero-line-emerald { color: var(--primary); display: block; text-shadow: 0 0 25px rgba(40, 199, 126, 0.4); } .hero-desc { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text-muted); line-height: 1.65; margin-bottom: 30px; max-width: 520px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } .hero-hud-dashboard { display: grid; grid-template-columns: 1fr; gap: 18px; position: relative; } @keyframes float1 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes float2 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(8px); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 25px rgba(40, 199, 126, 0.15); } 50% { box-shadow: 0 0 40px rgba(40, 199, 126, 0.35); } } .hud-glass-card { background: rgba(14, 18, 27, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 20px 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); position: relative; transition: var(--transition); } .hud-glass-card:hover { border-color: rgba(40, 199, 126, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(40, 199, 126, 0.2); } .hud-glass-card.card-float-1 { animation: float1 6s ease-in-out infinite; } .hud-glass-card.card-float-2 { animation: float2 7s ease-in-out infinite; } .hud-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); } .hud-title { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .hud-metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .hud-metric-box { text-align: left; } .hud-metric-label { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; margin-bottom: 2px; } .hud-metric-val { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--text-main); line-height: 1.1; } .hud-metric-trend { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--primary); } .hud-chart-container { width: 100%; height: 90px; margin-top: 6px; } .hud-chart-container svg { width: 100%; height: 100%; overflow: visible; } .channel-bars-grid { display: flex; flex-direction: column; gap: 10px; } .channel-bar-item { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; } .channel-name { width: 90px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .channel-bar-track { flex-grow: 1; height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-full); overflow: hidden; position: relative; } .channel-bar-fill { height: 100%; border-radius: var(--radius-full); position: relative; transition: width 1s ease-in-out; } .channel-bar-fill.google { width: 72%; background: linear-gradient(90deg, #28c77e, #44dc95); box-shadow: 0 0 10px rgba(40, 199, 126, 0.5); } .channel-bar-fill.meta { width: 58%; background: linear-gradient(90deg, #1877f2, #28c77e); } .channel-bar-fill.instagram { width: 45%; background: linear-gradient(90deg, #f4c468, #e1306c); } .channel-bar-fill.youtube { width: 35%; background: linear-gradient(90deg, #ff0000, #f4c468); } .channel-val { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--text-main); width: 38px; text-align: right; } .ai-human-card { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, rgba(24, 32, 48, 0.9), rgba(12, 16, 25, 0.95)); border: 1px solid rgba(244, 196, 104, 0.3); border-radius: var(--radius-md); padding: 16px 20px; } .ai-brain-icon { font-size: 2.2rem; flex-shrink: 0; filter: drop-shadow(0 0 15px rgba(244, 196, 104, 0.5)); } .ai-human-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; color: var(--accent-gold); margin-bottom: 2px; } .ai-human-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; } .ai-human-pills { display: flex; gap: 8px; flex-wrap: wrap; } .ai-human-pill { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-main); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: var(--radius-full); } .hero-bottom-strips { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; } .core-services-strip { background: rgba(14, 18, 27, 0.7); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .core-service-mini-item { text-align: center; padding: 8px 6px; border-radius: var(--radius-sm); transition: var(--transition-fast); text-decoration: none; } .core-service-mini-item:hover { background: rgba(40, 199, 126, 0.08); transform: translateY(-2px); } .core-service-mini-icon { font-size: 1.3rem; margin-bottom: 4px; } .core-service-mini-title { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .core-service-mini-sub { font-size: 0.7rem; color: var(--text-faint); margin-top: 2px; } .proven-process-strip { background: rgba(14, 18, 27, 0.7); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .process-node { display: flex; align-items: center; gap: 10px; } .process-node-num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 800; color: var(--primary); } .process-node-text { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.05em; } .process-node-sub { font-size: 0.72rem; color: var(--text-faint); } @media (max-width: 1080px) { .hero-master-grid { grid-template-columns: 1fr; } .core-services-strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .core-services-strip { grid-template-columns: repeat(2, 1fr); } .hud-metrics-row { grid-template-columns: repeat(2, 1fr); } .proven-process-strip { flex-direction: column; align-items: flex-start; } } .stats-impact-section { padding: 30px 0 50px; position: relative; z-index: 2; } .stats-ribbon-elevated { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 32px 36px; background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), var(--shadow-glow); position: relative; } .stat-impact-box { text-align: center; border-right: 1px solid var(--border-subtle); padding: 0 10px; } .stat-impact-box:last-child { border-right: none; } .stat-impact-num { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; line-height: 1.1; color: var(--text-main); } .stat-impact-label { font-size: 0.86rem; color: var(--text-muted); margin-top: 6px; font-weight: 500; } @media (max-width: 1000px) { .stats-ribbon-elevated { grid-template-columns: repeat(3, 1fr); } .stat-impact-box:nth-child(3) { border-right: none; } } @media (max-width: 650px) { .stats-ribbon-elevated { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .stat-impact-box { border-right: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: 20px; } .stat-impact-box:last-child { border-bottom: none; padding-bottom: 0; } } .conversion-audit-section { padding: clamp(60px, 8vw, 100px) 0; background: var(--bg-surface); position: relative; overflow: hidden; } .conversion-split-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 60px); align-items: center; } .conversion-left-showcase { text-align: left; } .audit-value-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.35); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; } .conversion-heading { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 18px; } .conversion-subtext { font-size: 1.02rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; } .growth-chips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; } .growth-chip { background: rgba(21, 27, 40, 0.7); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: var(--transition-fast); } .growth-chip:hover { background: rgba(25, 33, 49, 0.95); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .growth-chip-icon { font-size: 1.4rem; flex-shrink: 0; } .growth-chip-text { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .growth-chip-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } .audit-checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; } .audit-checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--text-main); font-weight: 500; } .audit-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(40, 199, 126, 0.15); color: var(--primary); font-weight: 800; font-size: 0.8rem; flex-shrink: 0; } .lead-form-master-card { background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), var(--shadow-glow); position: relative; } .lead-form-master-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-gold), var(--primary)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .lead-form-header { margin-bottom: 22px; } .lead-form-title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: var(--text-main); margin-bottom: 6px; } .lead-form-desc { font-size: 0.88rem; color: var(--text-muted); } .lead-field-group { margin-bottom: 16px; } .lead-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .lead-input { width: 100%; padding: 13px 16px; background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-main); font-family: var(--font-body); font-size: 0.95rem; transition: var(--transition-fast); } .lead-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40, 199, 126, 0.18); } .lead-form-trust-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 0.76rem; color: var(--text-faint); flex-wrap: wrap; gap: 8px; } @media (max-width: 950px) { .conversion-split-grid { grid-template-columns: 1fr; } .growth-chips-grid { grid-template-columns: 1fr; } } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 40px; } .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px; transition: var(--transition); position: relative; overflow: hidden; } .card:hover { transform: translateY(-5px); border-color: var(--border-glow); box-shadow: var(--shadow-glow); } .card-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: rgba(40, 199, 126, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary); margin-bottom: 20px; border: 1px solid rgba(40, 199, 126, 0.2); } .card-icon.gold { background: rgba(244, 196, 104, 0.1); color: var(--accent-gold); border-color: rgba(244, 196, 104, 0.2); } .card h3 { margin-bottom: 12px; } .card p { font-size: 0.94rem; margin-bottom: 20px; } .card-tags { display: flex; flex-wrap: wrap; gap: 8px; } .card-tag { font-size: 0.75rem; font-family: var(--font-mono); padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; align-items: stretch; } .pricing-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 38px 30px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.4s ease, background 0.35s ease; cursor: pointer; } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(40, 199, 126, 0.8), transparent); opacity: 0; transform: scaleX(0.4); transition: transform 0.4s ease, opacity 0.35s ease; } .pricing-card:hover { transform: translateY(-10px) scale(1.02); border-color: rgba(40, 199, 126, 0.55); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(40, 199, 126, 0.22); background: rgba(18, 24, 37, 0.95); } .pricing-card:hover::before { opacity: 1; transform: scaleX(1); } .pricing-card.featured { background: var(--bg-surface-elevated); border-color: var(--primary); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(40, 199, 126, 0.25); transform: scale(1.03); } .pricing-card.featured::before { opacity: 1; transform: scaleX(1); background: linear-gradient(90deg, var(--accent-gold), var(--primary), var(--accent-gold)); } .pricing-card.featured:hover { transform: translateY(-14px) scale(1.055); border-color: var(--primary-light); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(40, 199, 126, 0.45); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; padding: 5px 16px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 4px 15px rgba(40, 199, 126, 0.4); } .pricing-price { font-family: var(--font-heading); font-size: 2.9rem; font-weight: 800; color: var(--text-main); margin: 16px 0 6px; line-height: 1; transition: transform 0.3s ease, color 0.3s ease; } .pricing-card:hover .pricing-price { transform: scale(1.03); } .pricing-price span { font-size: 1rem; font-weight: 500; color: var(--text-muted); } .pricing-features { list-style: none; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 13px; flex-grow: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-muted); transition: color 0.25s ease, transform 0.25s ease; } .pricing-card:hover .pricing-features li { color: var(--text-main); } .pricing-features li::before { content: '✓'; color: var(--primary); font-weight: 800; font-size: 0.95rem; flex-shrink: 0; transition: transform 0.25s ease, text-shadow 0.25s ease; } .pricing-card:hover .pricing-features li::before { text-shadow: 0 0 8px rgba(40, 199, 126, 0.6); transform: scale(1.15); } .pricing-card .btn { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .pricing-card:hover .btn { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(40, 199, 126, 0.4); } .pricing-card.featured:hover .btn-primary { box-shadow: 0 10px 30px rgba(40, 199, 126, 0.6); } .calculator-box { background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-glow); margin-top: 40px; } .calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; } .calc-input-group { margin-bottom: 24px; } .calc-label { display: flex; justify-content: space-between; font-size: 0.94rem; font-weight: 600; margin-bottom: 10px; } .calc-slider { width: 100%; accent-color: var(--primary); cursor: pointer; height: 6px; border-radius: var(--radius-full); } .calc-result-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 30px; display: flex; flex-direction: column; justify-content: center; text-align: center; } .calc-result-number { font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; color: var(--primary); line-height: 1.1; margin: 10px 0; } .faq-list { max-width: 820px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition-fast); } .faq-item[open] { border-color: var(--border-glow); background: var(--bg-surface-elevated); } .faq-item summary { padding: 20px 24px; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-icon { font-size: 1.3rem; color: var(--primary); transition: transform 0.2s ease; } .faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--accent-gold); } .faq-answer { padding: 0 24px 22px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; } .footer { border-top: 1px solid var(--border-subtle); padding: 70px 0 30px; margin-top: 100px; background: #040508; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; } .footer-heading { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: var(--transition-fast); } .footer-col ul li a:hover { color: var(--primary); padding-left: 4px; } .footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); font-size: 0.9rem; } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid var(--border-subtle); font-size: 0.85rem; color: var(--text-faint); } @media (min-width: 961px) and (max-width: 1080px) { .mega-menu-futuristic { width: 750px; } .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } .pricing-card.featured { transform: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 961px) { .nav-mobile-cta { display: none !important; } .nav-cta .header-btn { display: inline-flex !important; } } @media (max-width: 960px) { .nav-cta .header-btn { display: none !important; } .nav-mobile-cta { display: block !important; padding: 16px 24px 24px !important; border-top: 1px solid var(--border-subtle) !important; } .nav-mobile-cta .btn { width: 100% !important; justify-content: center !important; } .nav-toggle { display: flex; } .brand { max-width: calc(100% - 60px); } .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 14, 27, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; transition: max-height .32s ease; padding: 0; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85); z-index: 500; width: 100%; box-sizing: border-box; } .nav-links.open { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links > li { width: 100%; height: auto; flex-direction: column; align-items: stretch; border-top: 1px solid var(--border-subtle); box-sizing: border-box; } .nav-links > li > a { display: block; padding: 14px 20px; font-size: 0.95rem; color: var(--text-main); border-radius: 0; } .nav-drop-trigger { width: 100%; justify-content: space-between; padding: 14px 20px; font-size: 0.95rem; color: var(--text-main); border-radius: 0; box-sizing: border-box; } .has-dropdown.open > .nav-drop-trigger .caret { transform: rotate(180deg); color: var(--primary); } .nav-dropdown, .mega-menu-futuristic, .affiliate-dropdown-card, .blog-dropdown-card, .about-dropdown-card { display: none !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; transform: none !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.03) !important; margin: 0 !important; box-shadow: none !important; max-height: 0 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-sizing: border-box !important; } .has-dropdown.open > .nav-dropdown, .has-dropdown.open > .mega-menu-futuristic, .has-dropdown.open > .affiliate-dropdown-card, .has-dropdown.open > .blog-dropdown-card, .has-dropdown.open > .about-dropdown-card { display: block !important; max-height: 4000px !important; overflow: visible !important; padding: 10px 0 !important; } .mega-hub-grid { display: flex; flex-direction: column; gap: 0; width: 100%; box-sizing: border-box; } .services-cluster-grid { display: flex; flex-direction: column; gap: 0; width: 100%; box-sizing: border-box; } .service-cluster-card { background: transparent; border: none; border-radius: 0; padding: 10px 20px; border-top: 1px solid rgba(255, 255, 255, 0.04); box-sizing: border-box; width: 100%; } .service-cluster-card:hover { background: rgba(255, 255, 255, 0.04); transform: none; } .cluster-links li a { padding: 8px 12px !important; font-size: 0.88rem; } .affiliate-dropdown-card, .blog-dropdown-card, .about-dropdown-card { padding: 12px 20px !important; width: 100% !important; box-sizing: border-box !important; } .hero-master-grid { grid-template-columns: 1fr; gap: 36px; } .hero-left { text-align: center; } .hero-desc { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } } @media (max-width: 600px) { .hero-wrapper { padding-top: 28px; padding-bottom: 40px; } .hero-main-title { font-size: clamp(1.85rem, 6.8vw, 2.35rem); line-height: 1.16; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; } .top-process-pipeline { gap: 6px; width: 100%; box-sizing: border-box; } .process-divider { display: none; } .process-step-item { font-size: 0.68rem; } .hud-glass-card { padding: 16px 14px !important; } .hud-metrics-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .hud-metric-val { font-size: 1.18rem !important; } .stats-ribbon-elevated { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; width: 100%; box-sizing: border-box; } .stat-impact-box { border-right: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; } .stat-impact-box:last-child { border-bottom: none; padding-bottom: 0; } .tabbed-showcase { padding: 20px 14px !important; } .tab-diagram-container { min-height: 240px !important; } .case-metrics-row { grid-template-columns: 1fr; } .map-svg-container { height: 260px; width: 100%; max-width: 100%; } .map-active-intel-box { flex-direction: column; align-items: flex-start; width: 100%; box-sizing: border-box; } .form-category-pills { width: 100%; box-sizing: border-box; } .form-cat-pill { padding: 6px 10px !important; font-size: 0.74rem !important; } .whatsapp-float { right: 14px !important; bottom: 14px !important; width: 48px !important; height: 48px !important; } .quote-float { left: 14px !important; bottom: 14px !important; padding: 8px 12px !important; font-size: 0.72rem !important; } .footer-grid { grid-template-columns: 1fr; gap: 28px; width: 100%; box-sizing: border-box; } .footer-bottom { flex-direction: column; text-align: center; gap: 10px; } .container { padding-left: 16px; padding-right: 16px; width: 100%; box-sizing: border-box; } } .tabbed-showcase { background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); margin-top: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.5), var(--shadow-glow); } .tabs-nav { display: flex; gap: 12px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; } .tabs-nav::-webkit-scrollbar { display: none; } .tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); color: var(--text-muted); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: var(--transition-fast); } .tab-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.08); } .tab-btn.active { background: linear-gradient(135deg, rgba(40, 199, 126, 0.2), rgba(40, 199, 126, 0.05)); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 15px rgba(40, 199, 126, 0.25); } .tab-pane { display: none; animation: fadeIn 0.3s ease; } .tab-pane.active { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tab-visual { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-glow); box-shadow: var(--shadow-glow); } .tab-visual img { width: 100%; height: 100%; display: block; object-fit: cover; } @media (max-width: 900px) { .tab-pane.active { grid-template-columns: 1fr; } } .india-coverage-section { padding: clamp(80px, 10vw, 130px) 0; background: var(--bg-dark); position: relative; overflow: hidden; } .india-coverage-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 40%, rgba(40, 199, 126, 0.12) 0%, transparent 60%), radial-gradient(circle at 75% 70%, rgba(244, 196, 104, 0.08) 0%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; pointer-events: none; } .coverage-intel-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; margin-bottom: 28px; } .coverage-intel-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); transition: var(--transition-fast); } .coverage-intel-card:hover { border-color: var(--primary); transform: translateY(-2px); } .intel-card-icon { font-size: 1.6rem; flex-shrink: 0; } .intel-card-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin-bottom: 2px; } .intel-card-sub { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); } .india-coverage-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(32px, 4.5vw, 54px); align-items: stretch; } .india-map-card { background: radial-gradient(circle at 50% 35%, rgba(20, 27, 40, 0.98), rgba(9, 12, 18, 1)); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(20px, 3.5vw, 32px); box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), var(--shadow-glow); position: relative; display: flex; flex-direction: column; justify-content: space-between; } .map-svg-container { width: 100%; max-width: 540px; height: 480px; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; } .map-svg-container svg { width: 100%; height: 100%; filter: drop-shadow(0 0 25px rgba(40, 199, 126, 0.22)); overflow: visible; } .state-path { fill: rgba(22, 30, 46, 0.9); stroke: rgba(40, 199, 126, 0.4); stroke-width: 1.4; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .state-path:hover, .state-path.active { fill: rgba(40, 199, 126, 0.28); stroke: var(--primary); stroke-width: 2.2; filter: drop-shadow(0 0 16px rgba(40, 199, 126, 0.7)); } .state-path.hq-zone { fill: rgba(40, 199, 126, 0.2); stroke: var(--primary); stroke-width: 2; } .map-sonar-ring { animation: sonarWave 3s infinite cubic-bezier(0.2, 0.8, 0.4, 1); transform-origin: 255px 160px; } .map-sonar-ring.delay-1 { animation-delay: 1s; } .map-sonar-ring.delay-2 { animation-delay: 2s; } @keyframes sonarWave { 0% { r: 6; opacity: 0.95; stroke-width: 2.5; } 60% { opacity: 0.4; } 100% { r: 38; opacity: 0; stroke-width: 0.8; } } .map-energy-beam { stroke-dasharray: 6 6; animation: beamFlow 10s linear infinite; } @keyframes beamFlow { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } } .map-active-intel-box { background: rgba(14, 18, 27, 0.95); border: 1px solid var(--border-glow); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .intel-box-title { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; } .intel-box-desc { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); } .regional-hubs-column { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; } .regional-state-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px; transition: var(--transition-fast); cursor: pointer; } .regional-state-box:hover, .regional-state-box.active { background: rgba(25, 33, 49, 0.95); border-color: var(--primary); transform: translateX(4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(40, 199, 126, 0.15); } .regional-state-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .state-badge-hq { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.3); padding: 3px 8px; border-radius: var(--radius-full); } @media (max-width: 950px) { .coverage-intel-ribbon { grid-template-columns: 1fr; } .india-coverage-grid { grid-template-columns: 1fr; } } .state-cities-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .state-city-pill { font-size: 0.74rem; font-family: var(--font-mono); color: var(--text-muted); background: rgba(255, 255, 255, 0.05); padding: 2px 8px; border-radius: var(--radius-full); } .comparison-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-surface); position: relative; } .comparison-table-wrapper { margin-top: 40px; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-dark); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .comparison-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 650px; } .comparison-table th, .comparison-table td { padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); font-size: 0.92rem; } .comparison-table th { font-family: var(--font-heading); font-weight: 700; background: rgba(14, 18, 27, 0.95); color: var(--text-muted); } .comparison-table th.col-highlight, .comparison-table td.col-highlight { background: rgba(40, 199, 126, 0.06); border-left: 1px solid rgba(40, 199, 126, 0.3); border-right: 1px solid rgba(40, 199, 126, 0.3); color: var(--text-main); font-weight: 600; } .comparison-table th.col-highlight { color: var(--primary); font-size: 1.05rem; } .cell-check { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; } .cell-cross { display: inline-flex; align-items: center; gap: 6px; color: #ff5252; font-weight: 500; } .industries-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-dark); } .industry-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 40px; } .industry-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px 26px; transition: var(--transition); position: relative; } .industry-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), var(--shadow-glow); } .industry-icon-box { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(40, 199, 126, 0.1); border: 1px solid rgba(40, 199, 126, 0.25); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 18px; } .industry-metric-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); border: 1px solid rgba(244, 196, 104, 0.25); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 14px; } .industry-card h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--text-main); line-height: 1.35; margin-top: 4px; margin-bottom: 12px; } .industry-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; } .sprint-timeline-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-surface); } .sprint-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; position: relative; } .sprint-card { background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 26px 20px; position: relative; transition: var(--transition-fast); } .sprint-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .sprint-week-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .sprint-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text-main); line-height: 1.35; margin-top: 4px; margin-bottom: 10px; } .sprint-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; } @media (max-width: 950px) { .india-coverage-grid { grid-template-columns: 1fr; } .sprint-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sprint-grid { grid-template-columns: 1fr; } } .faq-search-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); padding: 2px 8px; border-radius: var(--radius-full); margin-bottom: 6px; text-transform: uppercase; } .faq-answer p { margin-bottom: 10px; font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); } .faq-answer p:last-child { margin-bottom: 0; } .strategy-command-section { padding: clamp(80px, 10vw, 130px) 0; background: var(--bg-surface); position: relative; overflow: hidden; } .strategy-command-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 80% 80%, rgba(40, 199, 126, 0.1) 0%, transparent 60%), radial-gradient(circle at 20% 20%, rgba(244, 196, 104, 0.08) 0%, transparent 50%); pointer-events: none; } .strategy-split-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 5vw, 64px); align-items: start; margin-top: 40px; } .strategy-left-visuals { display: flex; flex-direction: column; gap: 20px; } .touchpoints-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .touchpoint-card { background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 16px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: var(--transition-fast); } .touchpoint-card:hover { background: rgba(25, 33, 49, 0.95); border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.4), 0 0 20px rgba(40, 199, 126, 0.15); } .touchpoint-icon { font-size: 1.5rem; } .touchpoint-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text-main); } .touchpoint-sub { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); } .chandigarh-office-card { background: var(--bg-dark); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), var(--shadow-glow); position: relative; overflow: hidden; } .office-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .office-title { display: flex; align-items: center; gap: 10px; } .office-map-frame { width: 100%; height: 200px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); margin-bottom: 14px; } .office-map-frame iframe { width: 100%; height: 100%; border: 0; filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%); } .office-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); } .strategy-form-card { background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(28px, 4.5vw, 44px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), var(--shadow-glow); position: relative; } .strategy-form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent-gold), var(--primary)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .strategy-form-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.3); padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 14px; } .strategy-form-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--text-main); margin-bottom: 8px; } .strategy-form-subtitle { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 24px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .strategy-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .strategy-label { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); } .strategy-input { width: 100%; padding: 13px 16px; background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-main); font-family: var(--font-body); font-size: 0.94rem; transition: var(--transition-fast); } .strategy-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40, 199, 126, 0.18); } .strategy-textarea { width: 100%; padding: 12px 16px; background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-main); font-family: var(--font-body); font-size: 0.92rem; resize: vertical; min-height: 80px; transition: var(--transition-fast); } .strategy-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40, 199, 126, 0.18); } .strategy-trust-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 0.78rem; color: var(--text-faint); flex-wrap: wrap; gap: 10px; } @media (max-width: 980px) { .strategy-split-layout { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 550px) { .touchpoints-grid { grid-template-columns: 1fr; } } .calculator-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-surface); position: relative; } .calculator-box { background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), var(--shadow-glow); max-width: 960px; margin: 36px auto 0; } .calc-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 48px); align-items: center; } .calc-input-group { margin-bottom: 24px; } .calc-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.95rem; font-weight: 600; color: var(--text-main); } .calc-slider { width: 100%; height: 8px; border-radius: 4px; background: var(--bg-dark); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary); cursor: pointer; border: 2px solid #fff; } .calc-result-box { background: radial-gradient(circle at 50% 50%, rgba(40, 199, 126, 0.12), rgba(14, 18, 27, 0.95)); border: 1px solid var(--border-glow); border-radius: var(--radius-md); padding: 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .calc-result-number { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--primary); text-shadow: 0 0 20px rgba(40, 199, 126, 0.4); margin: 8px 0; } @media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; } } .case-studies-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-dark); } .case-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); margin-top: 36px; } .case-study-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: var(--transition-fast); } .case-study-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(40, 199, 126, 0.15); } .case-badge { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); border: 1px solid rgba(244, 196, 104, 0.25); padding: 3px 10px; border-radius: var(--radius-full); display: inline-block; margin-bottom: 12px; text-transform: uppercase; } .case-study-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text-main); line-height: 1.35; margin-bottom: 12px; } .case-study-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; } .case-metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: auto; } .case-metric-item strong { display: block; font-family: var(--font-heading); font-size: 1.25rem; color: var(--primary); margin-bottom: 2px; } .case-metric-item span { font-size: 0.76rem; color: var(--text-muted); font-family: var(--font-mono); } @media (max-width: 768px) { .case-cards-grid { grid-template-columns: 1fr; } } .pitfalls-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-surface); } .pitfalls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; } .pitfall-card { background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: var(--transition-fast); } .pitfall-card:hover { border-color: #ff5252; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .pitfall-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; color: #ff5252; background: rgba(255, 82, 82, 0.1); border: 1px solid rgba(255, 82, 82, 0.3); padding: 2px 8px; border-radius: var(--radius-full); display: inline-block; width: fit-content; margin-bottom: 4px; } .pitfall-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-main); line-height: 1.35; margin-bottom: 6px; } .pitfall-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 8px; } .pitfall-fix { font-size: 0.82rem; color: var(--primary); border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: auto; font-weight: 600; line-height: 1.5; } @media (max-width: 900px) { .pitfalls-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pitfalls-grid { grid-template-columns: 1fr; } } .form-category-pills { display: flex; gap: 8px; margin-bottom: 20px; background: var(--bg-dark); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); overflow-x: auto; } .form-cat-pill { flex: 1; text-align: center; padding: 8px 12px; font-size: 0.82rem; font-weight: 600; font-family: var(--font-heading); color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: var(--transition-fast); } .form-cat-pill:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); } .form-cat-pill.active { color: var(--primary); background: rgba(40, 199, 126, 0.12); border: 1px solid rgba(40, 199, 126, 0.35); box-shadow: 0 4px 12px rgba(40, 199, 126, 0.15); } .form-live-deliverable-hud { display: flex; align-items: center; gap: 10px; background: rgba(40, 199, 126, 0.06); border: 1px solid rgba(40, 199, 126, 0.25); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 18px; font-size: 0.82rem; color: var(--text-main); } .form-hud-icon { font-size: 1.2rem; } .platforms-marquee-section { padding: clamp(40px, 6vw, 70px) 0; background: var(--bg-surface); position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .platforms-marquee-section::before, .platforms-marquee-section::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(50px, 12vw, 150px); z-index: 2; pointer-events: none; } .platforms-marquee-section::before { left: 0; background: linear-gradient(to right, var(--bg-surface), transparent); } .platforms-marquee-section::after { right: 0; background: linear-gradient(to left, var(--bg-surface), transparent); } .marquee-track-container { display: flex; flex-direction: column; gap: 16px; } .marquee-track-ltr, .marquee-track-rtl { display: flex; gap: 16px; width: max-content; } .marquee-track-ltr { animation: scrollLTR 35s linear infinite; } .marquee-track-rtl { animation: scrollRTL 35s linear infinite; } .platforms-marquee-section:hover .marquee-track-ltr, .platforms-marquee-section:hover .marquee-track-rtl { animation-play-state: paused; } @keyframes scrollLTR { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollRTL { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .platform-slide-card { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 10px 22px; white-space: nowrap; transition: var(--transition-fast); cursor: pointer; } .platform-slide-card:hover { border-color: var(--primary); background: rgba(25, 33, 49, 0.95); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(40, 199, 126, 0.2); } .platform-slide-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .platform-slide-icon svg { width: 100%; height: 100%; object-fit: contain; } .platform-slide-name { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text-main); } .platform-slide-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); padding: 2px 8px; border-radius: var(--radius-full); } .instant-search-section { padding: clamp(70px, 9vw, 110px) 0; background: var(--bg-dark); position: relative; } .growth-search-box-container { max-width: 820px; margin: 32px auto 0; } .growth-search-bar-wrap { position: relative; display: flex; align-items: center; background: var(--bg-surface-elevated); border: 1px solid var(--border-glow); border-radius: var(--radius-full); padding: 8px 12px 8px 24px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), var(--shadow-glow); transition: var(--transition-fast); } .growth-search-bar-wrap:focus-within { border-color: var(--primary); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(40, 199, 126, 0.35); } .growth-search-icon { font-size: 1.25rem; margin-right: 12px; color: var(--primary); } .growth-search-input { flex: 1; background: transparent; border: none; color: var(--text-main); font-family: var(--font-body); font-size: 1.02rem; outline: none; } .growth-search-input::placeholder { color: var(--text-faint); font-size: 0.92rem; } .growth-search-btn { background: var(--primary-gradient); border: none; border-radius: var(--radius-full); color: #06110a; font-family: var(--font-heading); font-weight: 700; padding: 10px 22px; font-size: 0.88rem; cursor: pointer; transition: var(--transition-fast); } .growth-search-btn:hover { transform: scale(1.03); box-shadow: 0 4px 15px rgba(40, 199, 126, 0.4); } .search-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .search-pill-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 6px 14px; font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); } .search-pill-btn:hover, .search-pill-btn.active { color: var(--primary); background: rgba(40, 199, 126, 0.1); border-color: var(--primary); } .search-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .search-result-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; transition: var(--transition-fast); } .search-result-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(40, 199, 126, 0.15); } .search-result-card.hidden { display: none !important; } .search-result-tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); border: 1px solid rgba(244, 196, 104, 0.25); padding: 3px 10px; border-radius: var(--radius-full); display: inline-block; width: fit-content; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .search-result-title { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; color: var(--text-main); line-height: 1.4; margin-top: 0; margin-bottom: 12px; } .search-result-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 6px; } @media (max-width: 900px) { .search-results-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .search-results-grid { grid-template-columns: 1fr; } .growth-search-bar-wrap { padding: 6px 8px 6px 16px; } .growth-search-btn { padding: 8px 16px; font-size: 0.82rem; } } .form-msg { display: none; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; margin-bottom: 16px; line-height: 1.5; text-align: left; } .form-msg.success { display: block; background: rgba(40, 199, 126, 0.15); color: #28c77e; border: 1px solid rgba(40, 199, 126, 0.35); } .form-msg.error { display: block; background: rgba(255, 82, 82, 0.15); color: #ff5252; border: 1px solid rgba(255, 82, 82, 0.35); } .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 400; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; } .whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35); } .whatsapp-float svg { width: 32px; height: 32px; } .whatsapp-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25d366; opacity: 0.55; animation: wa-pulse 2.4s ease-out infinite; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } } @media (max-width: 600px) { .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } .whatsapp-float svg { width: 28px; height: 28px; } } .mb-ai-fab { position: fixed; right: 22px; bottom: 94px; z-index: 401; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-surface); border: 1.5px solid rgba(244, 196, 104, 0.45); display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; } .mb-ai-fab:hover { transform: translateY(-3px) scale(1.05); border-color: var(--accent-gold); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 18px rgba(244, 196, 104, 0.3); } .mb-ai-fab svg { width: 100%; height: 100%; } @media (max-width: 600px) { .mb-ai-fab { right: 16px; bottom: 78px; width: 48px; height: 48px; } } .mb-ai-panel { position: fixed; right: 22px; bottom: 160px; z-index: 402; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: 70vh; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.97); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .mb-ai-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } @media (max-width: 600px) { .mb-ai-panel { right: 16px; bottom: 16px; width: calc(100vw - 32px); height: 70vh; } } .mb-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-dark); } .mb-ai-head-info { display: flex; align-items: center; gap: 10px; } .mb-ai-head-info strong { display: block; color: var(--text-main); font-family: var(--font-heading); font-size: 0.92rem; } .mb-ai-head-info small { display: block; color: var(--text-muted); font-size: 0.72rem; margin-top: 1px; } .mb-ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(40, 199, 126, 0.3); flex-shrink: 0; } .mb-ai-close { width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; background: transparent; border: none; cursor: pointer; } .mb-ai-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); } .mb-ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .mb-ai-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 0.87rem; line-height: 1.5; } .mb-ai-msg-bot { align-self: flex-start; background: rgba(255, 255, 255, 0.06); color: #dce0ec; border-bottom-left-radius: 4px; } .mb-ai-msg-user { align-self: flex-end; background: linear-gradient(135deg, var(--accent-gold), #e7a33e); color: #201705; font-weight: 600; border-bottom-right-radius: 4px; } .mb-ai-msg-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border-radius: 14px; border-bottom-left-radius: 4px; } .mb-ai-msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: mbTyping 1.1s infinite ease-in-out; } .mb-ai-msg-typing span:nth-child(2) { animation-delay: 0.15s; } .mb-ai-msg-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes mbTyping { 0%, 100%, 60% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .mb-ai-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-subtle); background: var(--bg-dark); } .mb-ai-input-row input { flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 10px 16px; color: var(--text-main); font-size: 0.87rem; } .mb-ai-input-row input::placeholder { color: var(--text-muted); } .mb-ai-input-row input:focus { outline: 0; border-color: var(--accent-gold); } .mb-ai-send { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gold); color: #201705; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform 0.15s ease; border: none; cursor: pointer; } .mb-ai-send:hover { transform: scale(1.06); } .mb-ai-send:disabled { opacity: 0.5; pointer-events: none; } .exit-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10, 14, 27, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .exit-overlay.open { opacity: 1; pointer-events: auto; } .exit-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); max-width: 480px; width: 100%; padding: clamp(24px, 3vw, 36px); position: relative; box-shadow: var(--shadow-deep); transform: translateY(14px) scale(0.97); transition: transform 0.28s ease; max-height: 92vh; overflow-y: auto; color: var(--text-main); } .exit-overlay.open .exit-modal { transform: translateY(0) scale(1); } .exit-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border-subtle); background: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-muted); transition: all 0.15s ease; cursor: pointer; } .exit-close:hover { background: var(--primary); color: #06301d; border-color: var(--primary); } .exit-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); background: rgba(40, 199, 126, 0.12); border: 1px solid rgba(40, 199, 126, 0.3); padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 14px; } .exit-modal h3 { font-size: 1.35rem; margin-bottom: 6px; color: var(--text-main); } .exit-modal .lede { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; } .exit-modal .field { margin-bottom: 14px; } .exit-modal .field label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-main); margin-bottom: 5px; } .exit-modal .field input, .exit-modal .field select, .exit-modal .field textarea { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-subtle); background: var(--bg-dark); color: var(--text-main); font-size: 0.9rem; box-sizing: border-box; } .exit-modal .field textarea { min-height: 70px; resize: vertical; } .exit-modal .field input:focus, .exit-modal .field select:focus, .exit-modal .field textarea:focus { border-color: var(--primary); outline: 0; } .page-hero, .hero { background: var(--bg-dark); background-image: radial-gradient(700px 380px at 90% -10%, rgba(244, 196, 104, 0.12), transparent 70%), radial-gradient(600px 380px at 10% 100%, rgba(40, 199, 126, 0.12), transparent 70%); color: var(--text-main); padding: clamp(54px, 7vw, 92px) 0 clamp(44px, 5.5vw, 68px); position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); } .breadcrumb { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; } .breadcrumb a:hover { color: var(--accent-gold); } .breadcrumb span.current { color: var(--primary); font-weight: 600; } .hero-eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-gold); background: rgba(244, 196, 104, 0.1); border: 1px solid rgba(244, 196, 104, 0.25); padding: 5px 14px; border-radius: var(--radius-full); margin-bottom: 16px; } .hero-eyebrow.green, .eyebrow.green { color: var(--primary); background: rgba(40, 199, 126, 0.1); border-color: rgba(40, 199, 126, 0.25); } .hero-lede, .lede { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; max-width: 68ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; } .stats-band { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-card); margin: 32px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .stat-num { font-family: var(--font-heading); font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; color: var(--accent-gold); line-height: 1.1; } .stat-num.green { color: var(--primary); } .stat-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 980px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } } .course-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-card); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .course-card:hover { transform: translateY(-6px); border-color: rgba(244, 196, 104, 0.4); box-shadow: var(--shadow-deep); } .course-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: rgba(244, 196, 104, 0.12); border: 1px solid rgba(244, 196, 104, 0.3); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 18px; } .course-card.affiliate-card .course-icon, .course-card:nth-child(2n) .course-icon { background: rgba(40, 199, 126, 0.12); border-color: rgba(40, 199, 126, 0.3); color: var(--primary); } .course-card h3 { font-size: 1.22rem; margin-bottom: 10px; color: var(--text-main); } .course-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; flex-grow: 1; } .course-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; } .tag { font-family: var(--font-mono); font-size: 0.7rem; padding: 4px 10px; border-radius: var(--radius-full); background: var(--bg-dark); color: var(--text-muted); border: 1px solid var(--border-subtle); } .course-learn { list-style: none; padding: 0; margin: 14px 0 20px; } .course-learn li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--text-main); padding: 6px 0; align-items: flex-start; } .course-learn li::before { content: '✓'; color: var(--primary); font-weight: 800; flex-shrink: 0; } .ledger { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); margin: 28px 0; } .ledger-row { display: grid; grid-template-columns: 2.2fr 1fr 1.2fr 1fr; gap: 16px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); } .ledger-row:last-child { border-bottom: none; } .ledger-row.head { background: var(--bg-dark); font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; } .ledger-row.featured { background: rgba(40, 199, 126, 0.08); border-left: 3px solid var(--primary); } .ledger-pkg { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--text-main); } .ledger-pkg small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--text-muted); font-size: 0.8rem; margin-top: 3px; } .ledger-val { font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); font-size: 0.95rem; } .ledger-commission { font-family: var(--font-mono); font-weight: 800; color: var(--primary); font-size: 1.1rem; } .ledger-pct { font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; color: #201705; background: var(--accent-gold); padding: 4px 12px; border-radius: var(--radius-full); display: inline-block; width: fit-content; } @media (max-width: 720px) { .ledger-row { grid-template-columns: 1fr 1fr; row-gap: 8px; padding: 16px; } .ledger-row.head { display: none; } .ledger-pkg { grid-column: 1 / -1; } } .process.timeline { display: flex; flex-direction: column; gap: 0; position: relative; margin: 32px auto; } .timeline-step { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border-subtle); } .timeline-step:last-child { border-bottom: none; } .timeline-num { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .timeline-step h3 { color: var(--text-main); margin-bottom: 6px; font-size: 1.2rem; } .timeline-step p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.65; margin: 0; } .timeline-step.is-active .timeline-num { background: linear-gradient(135deg, var(--accent-gold), #e7a33e); color: #201705; border-color: var(--accent-gold); box-shadow: 0 0 20px rgba(244, 196, 104, 0.4); } @media (max-width: 600px) { .timeline-step { grid-template-columns: 48px 1fr; gap: 14px; } .timeline-num { width: 44px; height: 44px; font-size: 0.9rem; } } .audience-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; box-shadow: var(--shadow-card); transition: transform 0.2s ease, border-color 0.2s ease; } .audience-card:hover { transform: translateY(-5px); border-color: var(--accent-gold); } .audience-card .a-icon { font-size: 2rem; margin-bottom: 12px; } .audience-card h3 { font-size: 1rem; color: var(--text-main); margin: 0; } .who-for-list, .glossary-list { list-style: none; padding: 0; margin: 20px auto; display: grid; gap: 12px; } .who-for-list li, .glossary-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 14px 18px; line-height: 1.6; } .who-for-list li::before { content: '✓'; color: var(--primary); font-weight: 800; flex-shrink: 0; } .article-header { padding: clamp(50px, 6.5vw, 84px) 0 34px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-dark); } .article-body { max-width: 780px; margin: 40px auto; font-size: 1.05rem; line-height: 1.85; color: #c9cedc; } .article-body h2 { font-size: clamp(1.5rem, 2.5vw, 1.95rem); color: var(--text-main); margin: 42px 0 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); } .article-body h3 { font-size: 1.28rem; color: var(--accent-gold); margin: 28px 0 12px; } .article-body p { margin-bottom: 22px; } .article-body strong { color: var(--text-main); } .article-body ul, .article-body ol { margin: 0 0 24px 24px; padding: 0; } .article-body li { margin-bottom: 10px; } .article-body a { color: var(--primary); text-decoration: underline; } .article-body blockquote { border-left: 3px solid var(--accent-gold); background: var(--bg-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 24px; margin: 28px 0; color: var(--text-main); font-style: italic; } .article-takeaway-hud { background: rgba(40, 199, 126, 0.08); border: 1px solid rgba(40, 199, 126, 0.3); border-radius: var(--radius-md); padding: 22px 26px; margin: 32px 0; } .article-takeaway-hud h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--primary); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .reading-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent-gold)); z-index: 1000; width: 0%; transition: width 0.1s ease-out; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin: 32px 0; } .price-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 34px 28px; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .price-card:hover { transform: translateY(-5px); border-color: rgba(244, 196, 104, 0.35); box-shadow: var(--shadow-deep); } .price-card.featured { background: linear-gradient(165deg, rgba(244, 196, 104, 0.06), var(--bg-surface)); border-color: var(--accent-gold); transform: scale(1.03); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(244, 196, 104, 0.15); } .price-badge { position: absolute; top: -14px; right: 24px; background: var(--accent-gold); color: #201705; font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-full); } .price-amount { font-family: var(--font-heading); font-size: 2.3rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; } .price-amount span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); } .price-commission { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--primary); background: rgba(40, 199, 126, 0.12); border: 1px solid rgba(40, 199, 126, 0.25); border-radius: var(--radius-full); padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; width: fit-content; } .price-list { list-style: none; padding: 0; margin: 0 0 26px; flex-grow: 1; } .price-list li { display: flex; gap: 10px; padding: 7px 0; font-size: 0.92rem; color: var(--text-main); align-items: flex-start; } .price-list li::before { content: '✓'; color: var(--primary); font-weight: 800; flex-shrink: 0; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 32px auto; } .price-card.featured { transform: none; } } .feature-icon, .course-icon, .step-icon, .pain-icon, .hud-icon-box, .hub-icon, .icon-3d, .service-icon-3d { width: 58px !important; height: 58px !important; min-width: 58px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.8rem !important; background: linear-gradient(135deg, rgba(40, 199, 126, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border: 1.5px solid rgba(40, 199, 126, 0.45) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.2), 0 0 18px rgba(40, 199, 126, 0.25) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important; position: relative; z-index: 2; transform-style: preserve-3d; } .mega-menu-dropdown .cluster-icon-box, .mega-menu-futuristic .cluster-icon-box { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 10px !important; font-size: 1.15rem !important; background: linear-gradient(135deg, rgba(40, 199, 126, 0.18) 0%, rgba(15, 23, 42, 0.9) 100%) !important; border: 1px solid rgba(40, 199, 126, 0.35) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important; } .mega-menu-dropdown .cluster-icon-box.gold, .mega-menu-futuristic .cluster-icon-box.gold { background: linear-gradient(135deg, rgba(244, 196, 104, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%) !important; border-color: rgba(244, 196, 104, 0.35) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important; } .cluster-icon-box.gold, .feature-icon.gold, .course-icon.gold, .step-icon.gold, .icon-3d.gold { background: linear-gradient(135deg, rgba(244, 196, 104, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border-color: rgba(244, 196, 104, 0.5) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.2), 0 0 18px rgba(244, 196, 104, 0.25) !important; } .service-cluster-card:hover .cluster-icon-box, .service-card:hover .service-icon-3d, .feature-card:hover .feature-icon, .course-card:hover .course-icon, .step-card:hover .step-icon, .cluster-icon-box:hover, .feature-icon:hover, .course-icon:hover, .icon-3d:hover { transform: translateY(-6px) scale(1.08) rotate(-3deg) !important; border-color: var(--primary) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 0 28px rgba(40, 199, 126, 0.55) !important; } .service-cluster-card:hover .cluster-icon-box.gold, .cluster-icon-box.gold:hover, .feature-icon.gold:hover, .icon-3d.gold:hover { border-color: var(--accent-gold) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 0 28px rgba(244, 196, 104, 0.55) !important; } .nav-actions { display: flex !important; align-items: center !important; gap: 14px !important; } .nav-cta { display: flex !important; align-items: center !important; gap: 14px !important; } .nav-login-btn { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 0.85rem !important; padding: 8px 18px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .nav-login-btn:hover { background: #ffffff !important; color: #07090e !important; border-color: #ffffff !important; box-shadow: 0 0 22px rgba(255, 255, 255, 0.6) !important; transform: translateY(-2px) !important; } .nav-cta .header-btn, .nav-actions .nav-cta, .nav-cta > a:not(.nav-login-btn) { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border: 1.5px solid #3ee899 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 0.85rem !important; padding: 8px 20px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; box-shadow: 0 4px 18px rgba(40, 199, 126, 0.4) !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .nav-cta .header-btn:hover, .nav-actions .nav-cta:hover, .nav-cta > a:not(.nav-login-btn):hover { background: linear-gradient(135deg, #32e08e 0%, #1ab66e 100%) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 0 28px rgba(40, 199, 126, 0.7) !important; } section { padding: clamp(48px, 6vw, 80px) 0 !important; position: relative; } .page-hero { padding: clamp(55px, 7vw, 90px) 0 35px !important; } .hero-content { margin-bottom: 24px; } .hero-content h1, .page-hero h1 { margin-top: 0 !important; margin-bottom: clamp(16px, 2.5vw, 24px) !important; line-height: 1.24 !important; } .hero-sub, .hero-content p { margin-top: 0 !important; margin-bottom: clamp(20px, 3vw, 32px) !important; line-height: 1.75 !important; } .hero-actions { display: flex !important; gap: 16px !important; flex-wrap: wrap !important; margin-top: 20px !important; margin-bottom: 32px !important; } .section-head { margin-bottom: clamp(32px, 4.5vw, 52px) !important; } .section-head h2 { margin-top: 6px !important; margin-bottom: 12px !important; line-height: 1.28 !important; } .section-head .lede { margin-top: 8px !important; margin-bottom: 0 !important; } .intro-copy { margin-top: 20px !important; margin-bottom: 28px !important; } .intro-copy p { margin-bottom: 1.35em !important; line-height: 1.78 !important; } .article-body h2 { margin-top: clamp(36px, 5vw, 54px) !important; margin-bottom: 18px !important; line-height: 1.3 !important; } .article-body h3 { margin-top: clamp(26px, 3.5vw, 36px) !important; margin-bottom: 14px !important; line-height: 1.35 !important; } .article-body p { margin-bottom: 1.35em !important; line-height: 1.8 !important; } .article-body ul, .article-body ol { margin-top: 10px !important; margin-bottom: 1.4em !important; padding-left: 24px !important; } .article-body li { margin-bottom: 0.6em !important; line-height: 1.68 !important; } .article-body table, .native-comparison-hud, .native-framework-hud { margin: clamp(24px, 3.5vw, 38px) 0 !important; } .service-card, .feature-card, .price-card, .course-card, .cluster-card { padding: clamp(24px, 3.5vw, 36px) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .service-card h3, .feature-card h3, .course-card h3 { margin-top: 4px !important; margin-bottom: 6px !important; } .service-card p, .feature-card p, .course-card p { margin-bottom: 12px !important; flex-grow: 1 !important; } .exit-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: rgba(4, 7, 14, 0.86) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important; padding: 20px !important; } .exit-modal-backdrop.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .exit-modal { background: linear-gradient(165deg, rgba(21, 27, 40, 0.98) 0%, rgba(10, 14, 24, 0.99) 100%) !important; border: 2px solid rgba(40, 199, 126, 0.45) !important; border-radius: var(--radius-lg) !important; padding: clamp(24px, 4vw, 42px) !important; max-width: 520px !important; width: 100% !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.8), 0 0 45px rgba(40, 199, 126, 0.22) !important; transform: scale(0.92) translateY(24px) !important; transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; } .exit-modal-backdrop.open .exit-modal { transform: scale(1) translateY(0) !important; } .exit-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-muted) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; cursor: pointer !important; transition: all 0.25s ease !important; } .exit-modal-close:hover { background: rgba(244, 196, 104, 0.25) !important; color: var(--accent-gold) !important; border-color: var(--accent-gold) !important; transform: rotate(90deg) scale(1.12) !important; } .exit-modal-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(244, 196, 104, 0.15) !important; border: 1px solid rgba(244, 196, 104, 0.35) !important; color: var(--accent-gold) !important; font-family: var(--font-mono) !important; font-size: 0.76rem !important; font-weight: 700 !important; padding: 4px 12px !important; border-radius: var(--radius-full) !important; text-transform: uppercase !important; margin-bottom: 8px !important; } .exit-modal .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #3ee899 100%) !important; color: #06301d !important; font-weight: 800 !important; box-shadow: 0 6px 20px rgba(40, 199, 126, 0.35) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; } .exit-modal .btn-primary:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 10px 30px rgba(40, 199, 126, 0.55) !important; } .service-card, .feature-card, .cluster-card, .price-card, .course-card, .native-framework-hud, .native-comparison-hud, .blog-card { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease !important; } .service-card:hover, .feature-card:hover, .course-card:hover, .blog-card:hover { transform: translateY(-6px) !important; border-color: rgba(40, 199, 126, 0.45) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(40, 199, 126, 0.15) !important; } @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(40, 199, 126, 0.6); } 70% { box-shadow: 0 0 0 14px rgba(40, 199, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 199, 126, 0); } } .whatsapp-float { animation: fabPulse 3s infinite !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .whatsapp-float:hover { transform: scale(1.12) rotate(4deg) !important; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5) !important; } .mb-ai-fab:hover { transform: translateY(-3px) scale(1.05) !important; box-shadow: 0 8px 28px rgba(40, 199, 126, 0.5) !important; } .process { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(20px, 3vw, 32px) !important; max-width: 1180px !important; margin: clamp(28px, 4vw, 44px) auto 0 !important; text-align: center !important; justify-items: center !important; width: 100% !important; } .process .step, .step { background: var(--bg-surface) !important; border: 1.5px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; padding: clamp(28px, 3.5vw, 38px) clamp(20px, 2.5vw, 28px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease !important; position: relative !important; box-sizing: border-box !important; } .process .step:hover, .step:hover { transform: translateY(-6px) !important; border-color: rgba(40, 199, 126, 0.5) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(40, 199, 126, 0.2) !important; } .process .step .step-icon, .step .step-icon { margin: 0 auto 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 60px !important; height: 60px !important; min-width: 60px !important; border-radius: 18px !important; font-size: 1.85rem !important; background: linear-gradient(135deg, rgba(40, 199, 126, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border: 1.5px solid rgba(40, 199, 126, 0.45) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.2), 0 0 18px rgba(40, 199, 126, 0.25) !important; } .process .step h3, .step h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: var(--text-main) !important; margin: 0 auto 10px !important; text-align: center !important; line-height: 1.32 !important; width: 100% !important; } .process .step p, .step p { font-size: 0.92rem !important; color: var(--text-muted) !important; line-height: 1.68 !important; margin: 0 auto !important; text-align: center !important; max-width: 300px !important; width: 100% !important; } @media (max-width: 980px) { .process { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .process { grid-template-columns: 1fr !important; } } @media (min-width: 961px) { .mega-menu-futuristic { width: 1000px !important; max-width: 95vw !important; max-height: calc(100vh - 82px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 22px 26px !important; scrollbar-width: thin !important; scrollbar-color: #28c77e rgba(11, 15, 23, 0.9) !important; } .mega-menu-futuristic::-webkit-scrollbar { width: 6px !important; } .mega-menu-futuristic::-webkit-scrollbar-track { background: rgba(11, 15, 23, 0.8) !important; border-radius: 4px !important; } .mega-menu-futuristic::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #28c77e 0%, #f4c468 100%) !important; border-radius: 4px !important; } } .exit-overlay { position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: rgba(6, 9, 15, 0.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease !important; } .exit-overlay.open { opacity: 1 !important; pointer-events: auto !important; } .exit-modal { background: linear-gradient(165deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 14, 24, 0.99) 100%) !important; border: 1.5px solid rgba(40, 199, 126, 0.5) !important; border-radius: var(--radius-lg) !important; max-width: 460px !important; width: 100% !important; padding: clamp(20px, 3vw, 28px) !important; position: relative !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(40, 199, 126, 0.25) !important; transform: translateY(14px) scale(0.97) !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; max-height: 94vh !important; overflow: visible !important; color: var(--text-main) !important; } .exit-overlay.open .exit-modal { transform: translateY(0) scale(1) !important; } .exit-modal h3 { font-size: clamp(1.25rem, 2.5vw, 1.45rem) !important; margin: 6px 0 4px !important; color: var(--text-main) !important; line-height: 1.25 !important; } .exit-modal p.lede { font-size: 0.84rem !important; color: var(--text-muted) !important; margin-bottom: 14px !important; line-height: 1.45 !important; } .exit-modal .field { margin-bottom: 10px !important; } .exit-modal .field label { display: block !important; font-size: 0.78rem !important; font-weight: 600 !important; margin-bottom: 4px !important; color: var(--text-main) !important; } .exit-modal .field input, .exit-modal .field select { width: 100% !important; padding: 9px 12px !important; font-size: 0.88rem !important; background: var(--bg-dark) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important; color: var(--text-main) !important; } .exit-modal .field input:focus, .exit-modal .field select:focus { border-color: var(--primary) !important; box-shadow: 0 0 10px rgba(40, 199, 126, 0.35) !important; outline: none !important; } .exit-modal .btn, .exit-modal .btn-green, .exit-modal .btn-primary, .exit-modal button[type="submit"] { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border: 1.5px solid #3ee899 !important; font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 0.95rem !important; padding: 12px 20px !important; border-radius: var(--radius-full) !important; box-shadow: 0 6px 22px rgba(40, 199, 126, 0.45) !important; cursor: pointer !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-top: 12px !important; } .exit-modal .btn:hover, .exit-modal .btn-green:hover, .exit-modal .btn-primary:hover, .exit-modal button[type="submit"]:hover { background: linear-gradient(135deg, #32e08e 0%, #1ab66e 100%) !important; box-shadow: 0 0 30px rgba(40, 199, 126, 0.75) !important; transform: translateY(-2px) !important; color: #ffffff !important; } .pricing-card .btn-spark, .pricing-card:nth-child(1) .btn, .pricing-grid .pricing-card:first-child .btn, .price-card:first-child .btn { background: rgba(255, 255, 255, 0.09) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; font-family: var(--font-heading) !important; font-weight: 700 !important; font-size: 0.92rem !important; padding: 12px 24px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.22s ease !important; } .pricing-card .btn-spark:hover, .pricing-card:nth-child(1) .btn:hover, .pricing-grid .pricing-card:first-child .btn:hover, .price-card:first-child .btn:hover { background: #ffffff !important; color: #07090e !important; border-color: #ffffff !important; box-shadow: 0 0 24px rgba(255, 255, 255, 0.6) !important; transform: translateY(-2px) !important; } .pricing-card.featured .btn, .pricing-card .btn-bright, .pricing-grid .pricing-card.featured .btn, .price-card.featured .btn { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border: 1.5px solid #3ee899 !important; font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 0.95rem !important; padding: 13px 26px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; box-shadow: 0 6px 24px rgba(40, 199, 126, 0.45) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.22s ease !important; } .pricing-card.featured .btn:hover, .pricing-card .btn-bright:hover, .pricing-grid .pricing-card.featured .btn:hover, .price-card.featured .btn:hover { background: linear-gradient(135deg, #32e08e 0%, #1ab66e 100%) !important; color: #ffffff !important; box-shadow: 0 0 32px rgba(40, 199, 126, 0.8) !important; transform: translateY(-2px) !important; } .pricing-card .btn-prime, .pricing-card:nth-child(3) .btn, .pricing-grid .pricing-card:last-child .btn, .price-card:last-child .btn { background: linear-gradient(135deg, #f4c468 0%, #d49838 100%) !important; color: #07090e !important; border: 1.5px solid #fbd38d !important; font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 0.95rem !important; padding: 12px 24px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; box-shadow: 0 6px 22px rgba(244, 196, 104, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.22s ease !important; } .pricing-card .btn-prime:hover, .pricing-card:nth-child(3) .btn:hover, .pricing-grid .pricing-card:last-child .btn:hover, .price-card:last-child .btn:hover { background: linear-gradient(135deg, #fed7aa 0%, #e6a848 100%) !important; color: #07090e !important; box-shadow: 0 0 28px rgba(244, 196, 104, 0.7) !important; transform: translateY(-2px) !important; } .password-input-wrapper { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; } .password-input-wrapper input { padding-right: 46px !important; width: 100% !important; } .password-toggle-btn { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; color: var(--text-muted) !important; cursor: pointer !important; padding: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.15rem !important; line-height: 1 !important; transition: all 0.2s ease !important; z-index: 10 !important; border-radius: 6px !important; } .password-toggle-btn:hover { color: var(--primary) !important; background: rgba(255, 255, 255, 0.08) !important; transform: translateY(-50%) scale(1.1) !important; } #exit-popup, .exit-popup, .exit-popup-backdrop, .lead-exit-modal { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; background: rgba(5, 8, 15, 0.88) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; align-items: center !important; justify-content: center !important; padding: 16px !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease !important; } #exit-popup.active, #exit-popup.show, .exit-popup.active, .exit-popup.show, .lead-exit-modal.active, .lead-exit-modal.show { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } #exit-popup .exit-popup-dialog, .exit-popup-dialog { background: var(--bg-surface) !important; border: 1.5px solid rgba(40, 199, 126, 0.45) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85) !important; max-width: 460px !important; width: 100% !important; padding: 24px 26px !important; position: relative !important; margin: auto !important; } .btn-gold, .btn-orange, .btn-prime, button[type="submit"].btn-gold, a.btn-gold, a.btn-orange, a.btn-prime, .pricing-card .btn-prime { background: linear-gradient(135deg, #f4c468 0%, #e5b34e 100%) !important; color: #07090e !important; font-weight: 800 !important; border: 1px solid rgba(244, 196, 104, 0.5) !important; box-shadow: 0 4px 18px rgba(244, 196, 104, 0.35) !important; text-shadow: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .btn-gold:hover, .btn-orange:hover, .btn-prime:hover, button[type="submit"].btn-gold:hover { background: linear-gradient(135deg, #fae0a2 0%, #f4c468 100%) !important; color: #000000 !important; border-color: #fae0a2 !important; box-shadow: 0 6px 26px rgba(244, 196, 104, 0.6) !important; transform: translateY(-2px) !important; } .btn-primary, .btn-green, .btn-bright, button[type="submit"].btn-primary, button[type="submit"].btn-green, a.btn-primary, a.btn-green, a.btn-bright, .pricing-card .btn-bright { background: linear-gradient(135deg, #28c77e 0%, #1ea768 100%) !important; color: #ffffff !important; font-weight: 700 !important; border: 1px solid rgba(40, 199, 126, 0.4) !important; box-shadow: 0 4px 18px rgba(40, 199, 126, 0.4) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .btn-primary:hover, .btn-green:hover, .btn-bright:hover, button[type="submit"].btn-primary:hover, button[type="submit"].btn-green:hover { background: linear-gradient(135deg, #3ae695 0%, #24bf78 100%) !important; color: #ffffff !important; border-color: #3ae695 !important; box-shadow: 0 6px 26px rgba(40, 199, 126, 0.65) !important; transform: translateY(-2px) !important; } .btn-white, .btn-light, .btn-spark, a.btn-white, a.btn-light, .pricing-card .btn-spark { background: #ffffff !important; color: #07090e !important; font-weight: 800 !important; border: 1.5px solid #ffffff !important; box-shadow: 0 4px 18px rgba(255, 255, 255, 0.25) !important; text-shadow: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .btn-white:hover, .btn-light:hover, .btn-spark:hover { background: #f1f5f9 !important; color: #000000 !important; box-shadow: 0 6px 26px rgba(255, 255, 255, 0.45) !important; transform: translateY(-2px) !important; } .btn-outline, a.btn-outline, .header-btn.btn-outline, .nav-login-btn { background: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.22) !important; font-weight: 600 !important; backdrop-filter: blur(8px) !important; transition: all 0.2s ease !important; } .btn-outline:hover, a.btn-outline:hover, .header-btn.btn-outline:hover, .nav-login-btn:hover { background: #ffffff !important; color: #07090e !important; border-color: #ffffff !important; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px) !important; } .whatsapp-float { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 58px !important; height: 58px !important; background: #25d366 !important; color: #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5) !important; z-index: 99999 !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; text-decoration: none !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; } .whatsapp-float:hover { transform: scale(1.1) !important; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.75) !important; background: #22bf5b !important; } .whatsapp-float svg { width: 32px !important; height: 32px !important; fill: #ffffff !important; } @media (max-width: 768px) { .whatsapp-float { bottom: 20px !important; right: 20px !important; width: 52px !important; height: 52px !important; } .whatsapp-float svg { width: 28px !important; height: 28px !important; } } @media (min-width: 961px) { .nav-toggle { display: none !important; } .nav-links { display: flex !important; align-items: center !important; gap: 24px !important; position: static !important; background: transparent !important; max-height: none !important; overflow: visible !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .nav-dropdown { position: absolute !important; top: calc(100% + 4px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important; max-height: calc(100vh - 100px) !important; overflow-y: auto !important; } .has-dropdown:hover > .nav-dropdown, .has-dropdown.open > .nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .has-dropdown:hover > .mega-menu-futuristic, .has-dropdown.open > .mega-menu-futuristic { transform: translateX(-48%) translateY(0) !important; } } @media (max-width: 960px) { .nav-toggle { display: flex !important; z-index: 1001 !important; } .nav-links { position: fixed !important; top: 70px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - 70px) !important; background: rgba(7, 9, 14, 0.98) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 16px 20px 80px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important; } .nav-links.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .nav-links > li { width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; margin: 0 !important; } .nav-links > li > a, .nav-drop-trigger { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 10px !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--text-main) !important; border-radius: 0 !important; } .has-dropdown .nav-dropdown, .mega-menu-futuristic, .affiliate-dropdown-card, .blog-dropdown-card, .about-dropdown-card { position: static !important; width: 100% !important; max-width: 100% !important; transform: none !important; box-shadow: none !important; border: 1px solid rgba(40, 199, 126, 0.2) !important; border-radius: 12px !important; background: rgba(14, 19, 29, 0.95) !important; margin: 4px 0 12px !important; padding: 0 14px !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: max-height 0.32s ease, opacity 0.25s ease, padding 0.25s ease !important; } .has-dropdown.open > .nav-dropdown, .has-dropdown.open > .mega-menu-futuristic, .has-dropdown.open > .affiliate-dropdown-card, .has-dropdown.open > .blog-dropdown-card, .has-dropdown.open > .about-dropdown-card { max-height: 3800px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; padding: 16px 14px !important; overflow-y: visible !important; } .mega-hub-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; } .services-cluster-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; } .mega-bottom-strip { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .nav-cta .header-btn, .nav-cta .nav-login-btn { display: none !important; } } @media (max-width: 1180px) { .mega-menu-futuristic { width: 92vw !important; } .grid-5 { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 980px) { .hero-master-grid, .hero-grid, .split-grid, .split, .lead-split-layout { grid-template-columns: 1fr !important; gap: 32px !important; } .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr !important; } .process::before { display: none !important; } .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } } @media (max-width: 820px) { .calc-card { grid-template-columns: 1fr !important; gap: 24px !important; } .hud-3d-grid, .affiliate-hud-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .trust-grid { grid-template-columns: 1fr 1fr !important; } .table-wrapper, .native-comparison-hud, .native-framework-hud, .ledger { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; width: 100% !important; } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr !important; } .form-row { grid-template-columns: 1fr !important; gap: 12px !important; } .timeline-step { grid-template-columns: 50px 1fr !important; gap: 14px !important; } } @media (max-width: 600px) { .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .hero-actions .btn { width: 100% !important; justify-content: center !important; } .whatsapp-float { bottom: 20px !important; right: 20px !important; width: 52px !important; height: 52px !important; } .whatsapp-float svg { width: 28px !important; height: 28px !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } @media (max-width: 480px) { .container { padding: 0 16px !important; } h1, .hero-main-title, .page-hero h1 { font-size: clamp(1.9rem, 7vw, 2.3rem) !important; line-height: 1.18 !important; } h2 { font-size: clamp(1.45rem, 5.5vw, 1.8rem) !important; } .trust-grid { grid-template-columns: 1fr !important; } .stats-grid { grid-template-columns: 1fr !important; } .card, .service-card, .feature-card, .price-card, .form-card, .hero-form-card { padding: 20px 16px !important; } } .password-input-wrapper, .field-password-wrap, .password-wrap { position: relative !important; display: block !important; width: 100% !important; } .password-input-wrapper input[type="password"], .password-input-wrapper input[type="text"], .field-password-wrap input, .password-wrap input { width: 100% !important; padding-right: 44px !important; display: block !important; box-sizing: border-box !important; } .password-toggle-btn { position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 6px !important; color: var(--text-muted, #94a3b8) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; font-size: 1.15rem !important; line-height: 1 !important; border-radius: 6px !important; transition: all 0.2s ease !important; } .password-toggle-btn:hover { color: var(--primary, #28c77e) !important; background: rgba(255, 255, 255, 0.08) !important; } .field { position: relative; } html, body { width: 100% !important; max-width: 100vw !important; overflow-x: clip !important; overflow-x: hidden !important; position: relative !important; box-sizing: border-box !important; } *, *::before, *::after { max-width: 100%; } .site-header, main, section, footer, .container, .section, .hero, .page-hero { max-width: 100% !important; box-sizing: border-box !important; overflow-x: clip !important; overflow-x: hidden !important; } .ambient-glow-1, .ambient-glow-2, .ambient-glow-3 { max-width: 100vw !important; overflow: hidden !important; pointer-events: none !important; contain: paint !important; } .ambient-glow-2 { right: 0 !important; } .ambient-glow-3 { left: 0 !important; } @media (max-width: 960px) { .site-header { height: 64px !important; padding: 0 !important; display: flex !important; align-items: center !important; } .nav { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 0 16px !important; height: 100% !important; } .brand { gap: 10px !important; max-width: calc(100% - 60px) !important; } .brand-mark { width: 32px !important; height: 38px !important; } .brand-name { font-size: 1.15rem !important; line-height: 1.1 !important; white-space: nowrap !important; } .brand-tagline { font-size: 0.65rem !important; white-space: nowrap !important; } .nav-cta .btn, .nav-cta .header-btn, .nav-cta .nav-login-btn, .nav-cta a.btn { display: none !important; } .nav-cta { display: flex !important; align-items: center !important; gap: 0 !important; } .nav-toggle { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; width: 42px !important; height: 42px !important; padding: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; cursor: pointer !important; outline: none !important; z-index: 1001 !important; } .nav-toggle span { display: block !important; width: 22px !important; height: 2px !important; background-color: var(--text-main) !important; border-radius: 2px !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; background-color: var(--primary) !important; } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; transform: scale(0) !important; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; background-color: var(--primary) !important; } .nav-links { top: 64px !important; height: calc(100vh - 64px) !important; padding: 20px 16px 100px !important; background: rgba(7, 9, 14, 0.98) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; } .mobile-drawer-cta { display: flex !important; flex-direction: column !important; gap: 12px !important; padding-top: 24px !important; margin-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .mobile-drawer-cta .btn { width: 100% !important; padding: 14px !important; font-size: 0.95rem !important; font-weight: 700 !important; display: flex !important; justify-content: center !important; border-radius: var(--radius-full) !important; } } .table-wrapper, .comparison-table-wrap, .ledger, .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; } .grid-2, .grid-3, .grid-4, .grid-5, .services-grid, .features-grid, .pricing-grid, .hero-master-grid, .split-grid { max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 768px) { .hero-master-grid, .hero-grid, .split-grid, .split { grid-template-columns: 1fr !important; } h1, .hero-main-title { font-size: clamp(1.85rem, 6.5vw, 2.4rem) !important; line-height: 1.2 !important; word-break: break-word !important; } .hero-badges, .hero-badge-strip, .pill-list { flex-wrap: wrap !important; gap: 8px !important; } } html, body { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; overflow-x: hidden !important; position: relative !important; box-sizing: border-box !important; } *, *::before, *::after { box-sizing: border-box !important; } @media (max-width: 820px) { .site-header { height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 0 !important; display: flex !important; align-items: center !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; background: rgba(10, 14, 27, 0.98) !important; } .nav { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 0 16px !important; height: 64px !important; margin: 0 !important; max-width: 100% !important; } .brand { display: flex !important; align-items: center !important; gap: 8px !important; max-width: calc(100% - 50px) !important; text-decoration: none !important; flex-shrink: 0 !important; } .brand-mark { width: 28px !important; height: 34px !important; flex-shrink: 0 !important; } .brand-name { font-size: 1.1rem !important; line-height: 1.1 !important; white-space: nowrap !important; } .brand-tagline { font-size: 0.65rem !important; white-space: nowrap !important; } .nav-cta { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .nav-cta a, .nav-cta .btn, .nav-cta .header-btn, .nav-cta .nav-login-btn, .site-header a.btn { display: none !important; } .nav-toggle { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; width: 40px !important; height: 40px !important; padding: 6px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1.5px solid rgba(255, 255, 255, 0.2) !important; border-radius: 8px !important; cursor: pointer !important; outline: none !important; margin-left: auto !important; z-index: 10001 !important; } .hero-master-grid, .hero-grid, .split-grid, .split, .lead-split-layout, .core-services-strip, .stats-ribbon-elevated, .grid-2, .grid-3, .grid-4, .grid-5, .services-grid, .features-grid, .pricing-grid, .calc-card, .hud-3d-grid, .affiliate-hud-grid, .footer-grid { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; gap: 20px !important; } .hud-metrics-row, .stats-grid, .trust-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } .hud-metric-box { background: rgba(255, 255, 255, 0.03) !important; padding: 10px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; } .hud-metric-label { font-size: 0.68rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hud-metric-val { font-size: 1.15rem !important; } .card, .service-card, .feature-card, .pricing-card, .price-card, .form-card, .hero-form-card, .hud-glass-card, .hero-left, .hero-hud-dashboard { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } h1, .hero-main-title, .page-hero h1 { font-size: clamp(1.85rem, 7vw, 2.3rem) !important; line-height: 1.18 !important; word-break: break-word !important; } h2 { font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important; line-height: 1.25 !important; } .hero-desc, p { font-size: 0.95rem !important; line-height: 1.6 !important; } .hero-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } .hero-actions .btn { width: 100% !important; justify-content: center !important; } .top-process-pipeline { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; padding-bottom: 8px !important; margin-bottom: 20px !important; } .process-step-item { flex-shrink: 0 !important; font-size: 0.7rem !important; } .process-divider { flex-shrink: 0 !important; font-size: 0.65rem !important; } .comparison-table, table { min-width: 100% !important; } .table-wrapper, .comparison-table-wrap, .ledger { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; display: block !important; } } .site-header { position: sticky !important; top: 0 !important; z-index: 999999 !important; overflow: visible !important; background: #0a0e1b !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } @media (max-width: 960px) { .site-header { height: 64px !important; overflow: visible !important; } .nav { height: 64px !important; overflow: visible !important; } .nav-links { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - 64px) !important; background: #07090e !important; background-color: #07090e !important; z-index: 9999999 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 20px 20px 100px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) !important; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95) !important; } .nav-links.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } } @media (max-width: 768px) { .top-process-pipeline { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 12px !important; max-width: 360px !important; width: 100% !important; margin: 0 auto 24px !important; padding: 0 6px !important; justify-content: center !important; } .top-process-pipeline .process-divider { display: none !important; } .top-process-pipeline .process-step-item { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 9px 12px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1.5px solid rgba(40, 199, 126, 0.35) !important; border-radius: 9999px !important; font-family: var(--font-mono) !important; font-size: 0.74rem !important; font-weight: 700 !important; color: var(--text-main) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; } .top-process-pipeline .process-step-item:hover, .top-process-pipeline .process-step-item.active { border-color: var(--primary) !important; background: rgba(40, 199, 126, 0.12) !important; color: #ffffff !important; } .top-process-pipeline .process-step-icon { font-size: 1rem !important; } } .lead-modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(5, 8, 15, 0.85) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; z-index: 9999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important; } .lead-modal-backdrop.show { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .lead-modal-dialog { background: linear-gradient(165deg, rgba(20, 26, 38, 0.98) 0%, rgba(10, 14, 24, 0.99) 100%) !important; border: 1.5px solid rgba(244, 196, 104, 0.45) !important; border-radius: var(--radius-lg, 24px) !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(244, 196, 104, 0.15) !important; max-width: 500px !important; width: 100% !important; padding: clamp(24px, 4vw, 36px) !important; position: relative !important; transform: scale(0.92) translateY(20px) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; } .lead-modal-backdrop.show .lead-modal-dialog { transform: scale(1) translateY(0) !important; } .lead-modal-close { position: absolute !important; top: 14px !important; right: 16px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: var(--text-muted, #9ba3b4) !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; line-height: 1 !important; cursor: pointer !important; transition: all 0.2s ease !important; z-index: 10 !important; } .lead-modal-close:hover { color: #ffffff !important; background: rgba(239, 68, 68, 0.3) !important; border-color: rgba(239, 68, 68, 0.6) !important; transform: rotate(90deg) !important; } .lead-modal-head { text-align: center !important; margin-bottom: 20px !important; } .lead-modal-badge { display: inline-block !important; font-family: var(--font-mono, monospace) !important; font-size: 0.72rem !important; font-weight: 700 !important; color: var(--accent-gold, #f4c468) !important; letter-spacing: 0.08em !important; background: rgba(244, 196, 104, 0.12) !important; border: 1px solid rgba(244, 196, 104, 0.3) !important; padding: 4px 12px !important; border-radius: 9999px !important; margin-bottom: 10px !important; } .lead-modal-title { font-size: clamp(1.25rem, 3.5vw, 1.55rem) !important; font-weight: 800 !important; color: var(--text-main, #f3f5f8) !important; line-height: 1.25 !important; margin-bottom: 8px !important; } .lead-modal-sub { font-size: 0.84rem !important; color: var(--text-muted, #9ba3b4) !important; line-height: 1.5 !important; margin: 0 !important; } .lead-modal-field { margin-bottom: 14px !important; text-align: left !important; } .lead-modal-field label { display: block !important; font-size: 0.8rem !important; font-weight: 600 !important; color: var(--text-main, #f3f5f8) !important; margin-bottom: 5px !important; } .lead-modal-field input, .lead-modal-field select { width: 100% !important; padding: 11px 14px !important; background: var(--bg-dark, #07090e) !important; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)) !important; border-radius: var(--radius-sm, 10px) !important; color: var(--text-main, #f3f5f8) !important; font-size: 0.9rem !important; box-sizing: border-box !important; } .lead-modal-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } @media (max-width: 480px) { .lead-modal-grid-2 { grid-template-columns: 1fr !important; gap: 0 !important; } } .lead-modal-footer { text-align: center !important; margin-top: 14px !important; font-size: 0.74rem !important; color: var(--text-faint, #60687a) !important; font-family: var(--font-mono, monospace) !important; } @media (min-width: 961px) { .nav-dropdown { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; background: rgba(10, 14, 25, 0.98) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1.5px solid rgba(40, 199, 126, 0.25) !important; border-radius: 16px !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(40, 199, 126, 0.12) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important; z-index: 10000 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; } .has-dropdown:hover > .nav-dropdown, .has-dropdown.open > .nav-dropdown, .nav-dropdown:hover { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .mega-menu-futuristic { width: 990px !important; min-width: 990px !important; max-width: 95vw !important; padding: 24px !important; transform: translateX(-48%) translateY(10px) !important; } .has-dropdown:hover > .mega-menu-futuristic, .has-dropdown.open > .mega-menu-futuristic { transform: translateX(-48%) translateY(0) !important; } .affiliate-dropdown-card { width: 340px !important; min-width: 340px !important; max-width: 340px !important; padding: 20px !important; } .affiliate-highlight-box { background: rgba(40, 199, 126, 0.08) !important; border: 1px solid rgba(40, 199, 126, 0.3) !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 14px !important; text-align: center !important; } .affiliate-rate { font-family: var(--font-heading) !important; font-size: 1.6rem !important; font-weight: 800 !important; color: var(--primary) !important; line-height: 1 !important; } .affiliate-sub { font-size: 0.78rem !important; color: var(--text-muted) !important; margin-top: 4px !important; } .blog-dropdown-card { width: 440px !important; min-width: 440px !important; max-width: 440px !important; padding: 20px !important; } .blog-mini-item { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 10px 12px !important; border-radius: 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; margin-bottom: 4px !important; } .blog-mini-item:hover { background: rgba(255, 255, 255, 0.06) !important; transform: translateX(4px) !important; } .blog-mini-tag { font-family: var(--font-mono) !important; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--accent-gold) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .blog-mini-title { font-family: var(--font-heading) !important; font-size: 0.88rem !important; font-weight: 600 !important; color: var(--text-main) !important; line-height: 1.35 !important; } .about-dropdown-card { width: 310px !important; min-width: 310px !important; max-width: 310px !important; padding: 16px !important; } .dropdown-item-link { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; color: var(--text-muted) !important; text-decoration: none !important; font-size: 0.9rem !important; font-weight: 600 !important; border-radius: 10px !important; transition: all 0.2s ease !important; margin-bottom: 4px !important; } .dropdown-item-link:hover { background: rgba(255, 255, 255, 0.07) !important; color: #ffffff !important; transform: translateX(4px) !important; } } .auth-card-container, .auth-box-wrapper, .auth-container, main.auth-page .container { max-width: 480px !important; width: 100% !important; margin: 0 auto !important; padding: 0 16px !important; box-sizing: border-box !important; } .password-input-wrapper { position: relative !important; width: 100% !important; display: block !important; } .password-input-wrapper input { width: 100% !important; padding-right: 50px !important; box-sizing: border-box !important; } .password-toggle-btn { position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 6px !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; outline: none !important; border-radius: 6px !important; transition: color 0.15s ease !important; } .password-toggle-btn:hover { color: #28c77e !important; } .password-toggle-btn svg, .password-toggle-btn path, .password-toggle-btn circle, .password-toggle-btn line { pointer-events: none !important; } .ai-assistant-widget { position: fixed !important; bottom: 88px !important; right: 22px !important; z-index: 9998 !important; font-family: var(--font-body, system-ui, sans-serif) !important; } .ai-chat-trigger-btn { display: flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(135deg, #182235 0%, #0d1522 100%) !important; border: 1.5px solid rgba(244, 196, 104, 0.5) !important; border-radius: 9999px !important; padding: 10px 16px 10px 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(244, 196, 104, 0.25) !important; cursor: pointer !important; color: #ffffff !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; outline: none !important; position: relative !important; } .ai-chat-trigger-btn:hover { transform: translateY(-3px) scale(1.03) !important; border-color: var(--accent-gold, #f4c468) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 196, 104, 0.45) !important; } .ai-trigger-icon { font-size: 1.25rem !important; line-height: 1 !important; } .ai-trigger-label { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--accent-gold, #f4c468) !important; } .ai-trigger-pulse { position: absolute !important; top: -3px !important; right: -3px !important; width: 10px !important; height: 10px !important; background: var(--primary, #28c77e) !important; border-radius: 50% !important; box-shadow: 0 0 8px #28c77e !important; animation: badgePulse 2s infinite !important; } .ai-chat-window { position: fixed !important; bottom: 96px !important; right: 22px !important; width: 380px !important; max-width: calc(100vw - 32px) !important; height: 530px !important; max-height: calc(100vh - 120px) !important; background: rgba(10, 14, 25, 0.98) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1.5px solid rgba(244, 196, 104, 0.45) !important; border-radius: 20px !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(244, 196, 104, 0.15) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(20px) scale(0.95) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 99999 !important; } .ai-chat-window.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } .ai-chat-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; background: rgba(18, 24, 38, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .ai-header-info { display: flex !important; align-items: center !important; gap: 10px !important; } .ai-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(244, 196, 104, 0.15) !important; border: 1px solid rgba(244, 196, 104, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.15rem !important; } .ai-name { font-size: 0.92rem !important; font-weight: 700 !important; color: #ffffff !important; display: flex !important; align-items: center !important; gap: 6px !important; } .ai-badge { font-size: 0.65rem !important; background: rgba(40, 199, 126, 0.2) !important; color: var(--primary, #28c77e) !important; padding: 2px 6px !important; border-radius: 4px !important; font-weight: 700 !important; } .ai-status { font-size: 0.7rem !important; color: var(--text-muted, #94a3b8) !important; } .ai-header-actions { display: flex !important; align-items: center !important; gap: 6px !important; } .ai-header-actions button { background: transparent !important; border: none !important; color: var(--text-muted, #94a3b8) !important; font-size: 1.1rem !important; cursor: pointer !important; padding: 4px 6px !important; border-radius: 6px !important; transition: all 0.15s ease !important; } .ai-header-actions button:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; } .ai-chat-messages { flex: 1 !important; padding: 16px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .ai-msg { display: flex !important; flex-direction: column !important; max-width: 85% !important; word-break: break-word !important; } .ai-msg-bot { align-self: flex-start !important; } .ai-msg-user { align-self: flex-end !important; } .ai-bubble { padding: 10px 14px !important; border-radius: 14px !important; font-size: 0.88rem !important; line-height: 1.5 !important; } .ai-msg-bot .ai-bubble { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--text-main, #f3f5f8) !important; border-bottom-left-radius: 4px !important; } .ai-msg-user .ai-bubble { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border-bottom-right-radius: 4px !important; } .ai-starter-prompts { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 6px !important; } .ai-prompt-chip { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(244, 196, 104, 0.3) !important; border-radius: 8px !important; padding: 8px 10px !important; font-size: 0.78rem !important; font-weight: 600 !important; color: var(--accent-gold, #f4c468) !important; text-align: left !important; cursor: pointer !important; transition: all 0.15s ease !important; } .ai-prompt-chip:hover { background: rgba(244, 196, 104, 0.12) !important; border-color: var(--accent-gold, #f4c468) !important; transform: translateX(3px) !important; } .ai-chat-input-row { display: flex !important; align-items: center !important; padding: 10px 14px !important; background: rgba(15, 20, 32, 0.95) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; gap: 8px !important; } .ai-chat-input-row input { flex: 1 !important; background: var(--bg-dark, #07090e) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; padding: 10px 14px !important; color: #ffffff !important; font-size: 0.88rem !important; outline: none !important; } .ai-chat-input-row input:focus { border-color: var(--primary, #28c77e) !important; } .ai-chat-input-row button { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; border: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; } .ai-chat-input-row button:hover { transform: scale(1.08) !important; } @media (max-width: 480px) { .ai-assistant-widget { bottom: 84px !important; right: 16px !important; } .ai-chat-window { width: calc(100vw - 32px) !important; right: 16px !important; bottom: 86px !important; height: 75vh !important; } } .ai-assistant-widget { position: fixed !important; bottom: 24px !important; left: 24px !important; right: auto !important; z-index: 999999 !important; font-family: var(--font-body, system-ui, sans-serif) !important; } .ai-chat-trigger-btn { display: flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(135deg, #182235 0%, #0d1522 100%) !important; border: 1.5px solid rgba(244, 196, 104, 0.5) !important; border-radius: 9999px !important; padding: 10px 16px 10px 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(244, 196, 104, 0.25) !important; cursor: pointer !important; color: #ffffff !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; outline: none !important; position: relative !important; } .ai-chat-trigger-btn:hover { transform: translateY(-3px) scale(1.03) !important; border-color: var(--accent-gold, #f4c468) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 196, 104, 0.45) !important; } .ai-trigger-icon { font-size: 1.2rem !important; line-height: 1 !important; } .ai-trigger-label { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--accent-gold, #f4c468) !important; } .ai-trigger-pulse { position: absolute !important; top: -3px !important; right: -3px !important; width: 10px !important; height: 10px !important; background: var(--primary, #28c77e) !important; border-radius: 50% !important; box-shadow: 0 0 8px #28c77e !important; animation: badgePulse 2s infinite !important; } .ai-chat-window { position: fixed !important; bottom: 80px !important; left: 24px !important; right: auto !important; width: 360px !important; max-width: calc(100vw - 40px) !important; height: 440px !important; max-height: calc(100vh - 150px) !important; background: rgba(10, 14, 25, 0.98) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1.5px solid rgba(244, 196, 104, 0.45) !important; border-radius: 18px !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(244, 196, 104, 0.15) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(16px) scale(0.96) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 9999999 !important; } .ai-chat-window.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } .ai-chat-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px !important; background: rgba(18, 24, 38, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .ai-header-info { display: flex !important; align-items: center !important; gap: 10px !important; } .ai-avatar { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: rgba(244, 196, 104, 0.15) !important; border: 1px solid rgba(244, 196, 104, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; } .ai-name { font-size: 0.9rem !important; font-weight: 700 !important; color: #ffffff !important; display: flex !important; align-items: center !important; gap: 6px !important; } .ai-badge { font-size: 0.65rem !important; background: rgba(40, 199, 126, 0.2) !important; color: var(--primary, #28c77e) !important; padding: 2px 6px !important; border-radius: 4px !important; font-weight: 700 !important; } .ai-status { font-size: 0.68rem !important; color: var(--text-muted, #94a3b8) !important; } .ai-header-actions button { background: transparent !important; border: none !important; color: var(--text-muted, #94a3b8) !important; font-size: 1.1rem !important; cursor: pointer !important; padding: 4px 6px !important; border-radius: 6px !important; } .ai-header-actions button:hover { color: #ffffff !important; } .ai-chat-messages { flex: 1 !important; padding: 14px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .ai-msg { display: flex !important; flex-direction: column !important; max-width: 88% !important; word-break: break-word !important; } .ai-msg-bot { align-self: flex-start !important; } .ai-msg-user { align-self: flex-end !important; } .ai-bubble { padding: 9px 12px !important; border-radius: 14px !important; font-size: 0.84rem !important; line-height: 1.45 !important; } .ai-msg-bot .ai-bubble { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--text-main, #f3f5f8) !important; border-bottom-left-radius: 4px !important; } .ai-msg-user .ai-bubble { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border-bottom-right-radius: 4px !important; } .ai-starter-prompts { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 4px !important; } .ai-prompt-chip { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(244, 196, 104, 0.3) !important; border-radius: 8px !important; padding: 7px 10px !important; font-size: 0.76rem !important; font-weight: 600 !important; color: var(--accent-gold, #f4c468) !important; text-align: left !important; cursor: pointer !important; transition: all 0.15s ease !important; } .ai-prompt-chip:hover { background: rgba(244, 196, 104, 0.12) !important; border-color: var(--accent-gold, #f4c468) !important; transform: translateX(3px) !important; } .ai-chat-input-row { display: flex !important; align-items: center !important; padding: 8px 12px !important; background: rgba(15, 20, 32, 0.95) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; gap: 8px !important; } .ai-chat-input-row input { flex: 1 !important; background: var(--bg-dark, #07090e) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; padding: 8px 14px !important; color: #ffffff !important; font-size: 0.85rem !important; outline: none !important; } .ai-chat-input-row button { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; border: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } @media (max-width: 480px) { .ai-assistant-widget { bottom: 20px !important; left: 16px !important; } .ai-chat-window { width: calc(100vw - 32px) !important; left: 16px !important; bottom: 74px !important; height: 60vh !important; max-height: calc(100vh - 140px) !important; } } .ai-assistant-widget { position: fixed !important; bottom: 86px !important; right: 24px !important; left: auto !important; z-index: 9998 !important; font-family: var(--font-body, system-ui, sans-serif) !important; } .ai-chat-trigger-btn { display: flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(135deg, #182235 0%, #0d1522 100%) !important; border: 1.5px solid rgba(244, 196, 104, 0.55) !important; border-radius: 9999px !important; padding: 10px 16px 10px 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(244, 196, 104, 0.25) !important; cursor: pointer !important; color: #ffffff !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; outline: none !important; position: relative !important; } .ai-chat-trigger-btn:hover { transform: translateY(-2px) scale(1.04) !important; border-color: var(--accent-gold, #f4c468) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 196, 104, 0.45) !important; } .ai-trigger-icon { font-size: 1.2rem !important; line-height: 1 !important; } .ai-trigger-label { font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; color: var(--accent-gold, #f4c468) !important; } .ai-trigger-pulse { position: absolute !important; top: -3px !important; right: -3px !important; width: 10px !important; height: 10px !important; background: var(--primary, #28c77e) !important; border-radius: 50% !important; box-shadow: 0 0 8px #28c77e !important; animation: badgePulse 2s infinite !important; } .ai-chat-window { position: fixed !important; bottom: 24px !important; right: 92px !important; left: auto !important; width: 360px !important; max-width: calc(100vw - 110px) !important; height: 430px !important; max-height: calc(100vh - 120px) !important; background: rgba(10, 14, 25, 0.98) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1.5px solid rgba(244, 196, 104, 0.45) !important; border-radius: 18px !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(244, 196, 104, 0.15) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(20px) scale(0.96) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 9999999 !important; } .ai-chat-window.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(0) scale(1) !important; } .ai-chat-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px !important; background: rgba(18, 24, 38, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .ai-header-info { display: flex !important; align-items: center !important; gap: 10px !important; } .ai-avatar { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: rgba(244, 196, 104, 0.15) !important; border: 1px solid rgba(244, 196, 104, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.05rem !important; } .ai-name { font-size: 0.88rem !important; font-weight: 700 !important; color: #ffffff !important; display: flex !important; align-items: center !important; gap: 6px !important; } .ai-badge { font-size: 0.65rem !important; background: rgba(40, 199, 126, 0.2) !important; color: var(--primary, #28c77e) !important; padding: 2px 6px !important; border-radius: 4px !important; font-weight: 700 !important; } .ai-status { font-size: 0.68rem !important; color: var(--text-muted, #94a3b8) !important; } .ai-header-actions button { background: transparent !important; border: none !important; color: var(--text-muted, #94a3b8) !important; font-size: 1.1rem !important; cursor: pointer !important; padding: 3px 6px !important; border-radius: 6px !important; } .ai-header-actions button:hover { color: #ffffff !important; } .ai-chat-messages { flex: 1 !important; padding: 12px 14px !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .ai-msg { display: flex !important; flex-direction: column !important; max-width: 88% !important; word-break: break-word !important; } .ai-msg-bot { align-self: flex-start !important; } .ai-msg-user { align-self: flex-end !important; } .ai-bubble { padding: 8px 12px !important; border-radius: 14px !important; font-size: 0.84rem !important; line-height: 1.45 !important; } .ai-msg-bot .ai-bubble { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--text-main, #f3f5f8) !important; border-bottom-left-radius: 4px !important; } .ai-msg-user .ai-bubble { background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; color: #ffffff !important; border-bottom-right-radius: 4px !important; } .ai-starter-prompts { display: flex !important; flex-direction: column !important; gap: 5px !important; margin-top: 4px !important; } .ai-prompt-chip { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(244, 196, 104, 0.3) !important; border-radius: 8px !important; padding: 6px 10px !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--accent-gold, #f4c468) !important; text-align: left !important; cursor: pointer !important; transition: all 0.15s ease !important; } .ai-prompt-chip:hover { background: rgba(244, 196, 104, 0.12) !important; border-color: var(--accent-gold, #f4c468) !important; transform: translateX(3px) !important; } .ai-chat-input-row { display: flex !important; align-items: center !important; padding: 8px 12px !important; background: rgba(15, 20, 32, 0.95) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; gap: 8px !important; } .ai-chat-input-row input { flex: 1 !important; background: var(--bg-dark, #07090e) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; padding: 8px 14px !important; color: #ffffff !important; font-size: 0.84rem !important; outline: none !important; } .ai-chat-input-row button { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: linear-gradient(135deg, #28c77e 0%, #158852 100%) !important; border: none !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } @media (max-width: 600px) { .ai-assistant-widget { bottom: 84px !important; right: 16px !important; } .ai-chat-window { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; right: 16px !important; bottom: 84px !important; height: 60vh !important; max-height: calc(100vh - 120px) !important; transform: translateY(20px) scale(0.96) !important; } .ai-chat-window.open { transform: translateY(0) scale(1) !important; } } .lead-modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(4, 7, 13, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; z-index: 99999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px !important; overflow-y: auto !important; box-sizing: border-box !important; } .lead-modal-dialog { position: relative !important; width: 100% !important; max-width: 520px !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; background: linear-gradient(145deg, rgba(16, 22, 36, 0.98) 0%, rgba(8, 12, 20, 0.99) 100%) !important; border: 1.5px solid rgba(244, 196, 104, 0.45) !important; border-radius: 20px !important; padding: 24px 22px 20px !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(244, 196, 104, 0.15) !important; margin: auto !important; box-sizing: border-box !important; } @media (max-height: 600px) { .lead-modal-dialog { padding: 16px 18px 14px !important; max-height: 96vh !important; } .lead-modal-head { margin-bottom: 10px !important; } .lead-modal-title { font-size: 1.1rem !important; margin-bottom: 4px !important; } .lead-modal-sub { font-size: 0.76rem !important; } .lead-modal-field { margin-bottom: 8px !important; } } @media (min-width: 961px) { .nav { max-width: 1440px !important; padding: 12px 32px !important; box-sizing: border-box !important; } .nav-links { gap: 14px !important; } .nav-drop-trigger, .nav-links a:not(.btn) { font-size: 0.92rem !important; padding: 6px 8px !important; } .brand-name { font-size: 1.3rem !important; } .nav-links li:last-child .btn { padding: 10px 20px !important; font-size: 0.9rem !important; white-space: nowrap !important; } } @media (min-width: 961px) { .nav-dropdown { transform: translateX(-50%) translateY(12px) !important; } } @media (min-width: 961px) { .mega-dropdown-card { width: 650px !important; min-width: 650px !important; max-width: 90vw !important; padding: 24px !important; } } @media (max-width: 960px) { .mega-dropdown-card { width: 100% !important; min-width: 100% !important; padding: 16px !important; } } html body .has-dropdown .nav-dropdown.mega-dropdown-card { width: 650px !important; max-width: 90vw !important; white-space: normal !important; padding: 24px !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; } @media (max-width: 960px) { html body .has-dropdown .nav-dropdown.mega-dropdown-card { width: 100% !important; max-width: 100% !important; left: 0 !important; transform: none !important; padding: 16px !important; } } .brand-wrap { align-items: center !important; justify-content: center !important; } .brand-name { text-align: center !important; } .brand-tagline { text-align: center !important; } @media (min-width: 961px) { html body .has-dropdown .nav-dropdown.mega-menu-futuristic { width: 1100px !important; max-width: 95vw !important; padding: 32px !important; left: -200px !important; transform: translateY(10px) !important; white-space: normal !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic .service-cluster-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic .cluster-links a { font-size: 0.92rem !important; padding: 4px 0 !important; } } @media (min-width: 961px) and (max-width: 1250px) { html body .has-dropdown .nav-dropdown.mega-menu-futuristic { width: 95vw !important; left: -150px !important; } } @media (max-width: 960px) { html body .has-dropdown .nav-dropdown.mega-menu-futuristic { width: 100% !important; max-width: 100% !important; position: static !important; left: 0 !important; right: 0 !important; transform: none !important; padding: 10px 0 !important; box-shadow: none !important; background: transparent !important; border: none !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic > div[style*="display:grid"] { display: flex !important; flex-direction: column !important; gap: 16px !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic .service-cluster-card { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 8px !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic .cluster-title { font-size: 1.1rem !important; } html body .has-dropdown .nav-dropdown.mega-menu-futuristic .cluster-links a { font-size: 0.95rem !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05); } } @media (min-width: 961px) { html body .has-dropdown .nav-dropdown.mega-menu-futuristic { position: fixed !important; top: 85px !important; left: 50% !important; transform: translateX(-50%) !important; width: 1000px !important; max-width: 95vw !important; padding: 32px !important; margin: 0 !important; box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 40px rgba(40,199,126,0.15) !important; } } @media (min-width: 961px) and (max-width: 1100px) { html body .has-dropdown .nav-dropdown.mega-menu-futuristic { width: 92vw !important; } } @media (max-width: 960px) { html body .whatsapp-float { bottom: 20px !important; right: 20px !important; z-index: 9999 !important; } html body .ai-assistant-widget { bottom: 90px !important; right: 20px !important; z-index: 9998 !important; } html body .ai-chat-window { bottom: 90px !important; right: 16px !important; max-height: 65vh !important; } } @media (max-width: 768px) { html body .top-process-pipeline .process-divider { display: none !important; } } html body .process-divider { color: #ffffff !important; font-weight: 800 !important; font-size: 1.1rem !important; opacity: 1 !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important; } html body .nav-drop-trigger .caret { color: #ffffff !important; opacity: 1 !important; font-weight: bold !important; } html body .cluster-links li a .arrow, html body .nav-dropdown .arrow, html body .arrow, html body span.arrow { color: #ffffff !important; opacity: 1 !important; transform: translateX(0) !important; font-weight: bold !important; display: inline-block !important; margin-left: 6px !important; } html body .cluster-links li a { color: rgba(255, 255, 255, 0.9) !important; } html body .cluster-links li a:hover { color: #ffffff !important; } html body .proven-process-strip > span { color: #ffffff !important; font-weight: 800 !important; opacity: 1 !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important; font-size: 1.2rem !important; } html body .dropdown-item-link span:last-child { color: #ffffff !important; opacity: 1 !important; font-weight: bold !important; } html body p, html body span, html body div, html body a, html body li { } html body .text-muted, html body [style*="color:var(--text-muted)"] { color: #a3b1c6 !important; opacity: 1 !important; } html body .process-node-sub { color: #a3b1c6 !important; font-weight: 500 !important; } html body ::placeholder { color: #7b889b !important; opacity: 1 !important; } html body .footer-bottom { color: #8c9bb0 !important; } html body a { text-decoration-thickness: 1px; text-underline-offset: 3px; } .ai-trigger-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; } .robot-hover-group { animation: robotFloat 3s ease-in-out infinite; } .robot-look-group { animation: robotLookAround 7s ease-in-out infinite; transform-origin: 50px 80px; } .robot-antenna-bulb { animation: robotAntennaGlow 1.5s infinite alternate; } .robot-eye { animation: eyeBlink 4.5s infinite; transform-origin: 50% 50%; transform-box: fill-box; } @keyframes robotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes robotLookAround { 0%, 100% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-6px) rotate(-15deg); } 35% { transform: translateX(6px) rotate(15deg); } 50% { transform: translateX(0) rotate(0deg); } } @keyframes robotAntennaGlow { 0% { fill: #F4C468; filter: drop-shadow(0 0 2px rgba(244, 196, 104, 0.5)); } 100% { fill: #ffffff; filter: drop-shadow(0 0 8px rgba(244, 196, 104, 1)); } } @keyframes eyeBlink { 0%, 95%, 98%, 100% { transform: scaleY(1); } 96%, 99% { transform: scaleY(0.1); } } .robot-shadow { animation: robotShadowPulse 3s ease-in-out infinite; transform-origin: center; } @keyframes robotShadowPulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(0.7); opacity: 0.15; } } .ai-typing { display: flex; align-items: center; gap: 4px; padding: 10px 14px !important; } .ai-typing .dot { width: 6px; height: 6px; background-color: var(--accent-gold); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; } .ai-typing .dot:nth-child(1) { animation-delay: -0.32s; } .ai-typing .dot:nth-child(2) { animation-delay: -0.16s; } .ai-typing .dot:nth-child(3) { animation-delay: 0s; } @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } html body .ai-trigger-label { display: none !important; } html body .ai-chat-trigger-btn { width: 60px !important; height: 60px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; border: 1.5px solid rgba(40, 199, 126, 0.4) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(40, 199, 126, 0.25) !important; } html body .ai-chat-trigger-btn:hover { border-color: #28C77E !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9), 0 0 30px rgba(40, 199, 126, 0.45) !important; } html body .ai-trigger-icon { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body .robot-avatar { width: 42px !important; height: 42px !important; } html body .ai-trigger-pulse { border-radius: 50% !important; } html body .ai-assistant-widget { bottom: 110px !important; } @media (max-width: 600px) { html body .ai-assistant-widget { bottom: 110px !important; } } html body .ai-chat-trigger-btn { border: 2px solid rgba(0, 255, 255, 0.8) !important; animation: cyanPulse 2.5s infinite !important; } html body .ai-chat-trigger-btn:hover { border-color: #00ffff !important; animation: none !important; box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5) !important; } @keyframes cyanPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.6), 0 5px 15px rgba(0,0,0,0.5); } 70% { box-shadow: 0 0 0 20px rgba(0, 255, 255, 0), 0 5px 15px rgba(0,0,0,0.5); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0), 0 5px 15px rgba(0,0,0,0.5); } } html body .ai-speech-bubble { position: absolute; right: 75px; bottom: 12px; background: linear-gradient(135deg, #0d1522, #1a202c); border: 1.5px solid #00ffff; color: #ffffff; padding: 10px 16px; border-radius: 20px 20px 0 20px; font-size: 0.85rem; font-weight: 700; box-shadow: 0 8px 20px rgba(0, 255, 255, 0.25); white-space: nowrap; opacity: 0; transform: translateX(15px); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; z-index: -1; } html body .ai-speech-bubble.show { opacity: 1; transform: translateX(0); } @media (max-width: 400px) { html body .ai-speech-bubble { font-size: 0.75rem; padding: 8px 12px; right: 70px; } } html body .ai-chat-trigger-btn { animation: none !important; border: 1.5px solid #00ffff !important; } html body .ai-chat-trigger-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 255, 255, 0.3); border-radius: 50%; z-index: -1; animation: radarPulseBg 2s infinite ease-out !important; pointer-events: none; } html body .ai-chat-trigger-btn:hover::before { animation: none !important; opacity: 0; } @keyframes radarPulseBg { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } } html body .ai-speech-bubble { right: -5px !important; bottom: 75px !important; border-radius: 20px 20px 0px 20px !important; z-index: 999999 !important; transform: translateY(15px) !important; } html body .ai-speech-bubble.show { transform: translateY(0) !important; } @media (max-width: 400px) { html body .ai-speech-bubble { right: 0px !important; } } html body .ai-speech-bubble { right: 15px !important; bottom: 75px !important; border-radius: 20px 20px 0px 20px !important; transform-origin: bottom right !important; z-index: 999999 !important; white-space: nowrap !important; width: max-content !important; max-width: 85vw !important; } html body .ai-chat-trigger-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 255, 255, 0.35); border-radius: 50%; z-index: -1; animation: radarPulseBg 2s infinite ease-out !important; pointer-events: none; }
/* ==========================================================================
   BLOG LAYOUT & READABILITY FIXES (2026 UPDATE)
   ========================================================================== */
.blog-sub-section, 
.table-of-contents,
.authority-references {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.blog-sub-section img, 
.article-body-section img,
.blog-sub-section svg, 
.article-body-section svg {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.table-of-contents {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

/* Ensure code blocks and tables don't overflow */
pre, code, table, .native-diagram-card {
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

.native-diagram-card {
  padding: 15px !important;
}