/* ============================== AI DYNAMICS EXACT STYLE TOKENS ============================== */ :root { --blue: #180EA7; --purple: #6E0EAA; --cyan: #24B3D0; --cyan2: #00E5FF; --dark: #03020A; --dark2: #09071A; --glass: rgba(255, 255, 255, 0.03); --glass-border: rgba(36, 179, 208, 0.18); --glass-hover: rgba(36, 179, 208, 0.08); --text: #E8E8F0; --muted: #8888AA; --grad: linear-gradient(135deg, #180EA7 0%, #6E0EAA 50%, #24B3D0 100%); --grad2: linear-gradient(90deg, #24B3D0, #6E0EAA); --glow: 0 0 35px rgba(0, 229, 255, 0.25); } /* FIX: the reset used to set `padding: 3px` on every single element. That stacked extra padding on top of every component's own padding (buttons, nav links, hamburger bars, cards...) and was the main reason things looked "off"/misaligned, especially once everything stacked into a single column on mobile. Reset to 0 like a normal reset. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* FIX: horizontal scroll / blank space on the left on mobile. The decorative glow shapes (.fluid-shape-left/right, .dynamic-mesh-glow) use `position: absolute` with negative offsets but had no positioned ancestor, so their containing block was the viewport itself instead of — `overflow-x: hidden` on body alone could not reliably clip them on every mobile browser. Making html/body positioned + hidden on both elements fixes it properly. */ html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; position: relative; } body { font-family: 'Questrial', sans-serif; background: var(--dark); color: var(--text); overflow: clip; width: 100%; position: relative; } h1, h2, h3, h4, h5, h6, .brand-name { font-family: 'Lexend', sans-serif !important; } a { color: inherit; text-decoration: none; } /* ============================== LAYOUT HELPERS FIX: `.container` and `.section-pad` were used all over the HTML (every section's inner wrapper, the footer, the stats strip) but were never actually defined in the CSS. Without them those wrappers had no max-width and no side padding, so content on mobile ran edge-to-edge with no breathing room and sections had no consistent vertical rhythm. Adding them fixes both the "broken mobile" look and the missing spacing/organization on desktop too. ============================== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section-pad { position: relative; z-index: 2; padding: 100px 0; } /* ============================== EXACT FLUID & ABSTRACT CANVAS MESH ============================== */ #particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.55; } /* Top Left Fluid Accent Vector */ .fluid-shape-left { position: absolute; top: -100px; left: -100px; width: 550px; height: 550px; background: radial-gradient(circle, rgba(24,14,167,0.45) 0%, transparent 65%); filter: blur(70px); pointer-events: none; z-index: 1; } /* Top Right Floating Flow Vector */ .fluid-shape-right { position: absolute; top: -80px; right: -80px; width: 500px; height: 550px; background: radial-gradient(circle, rgba(0, 229, 255, 0.22) 0%, transparent 70%); filter: blur(60px); pointer-events: none; z-index: 1; } /* Central Ambient Glow Overlay */ .dynamic-mesh-glow { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 85% 50%, rgba(110, 14, 170, 0.15) 0%, transparent 60%); pointer-events: none; z-index: 1; } /* ============================== TOP LAYER INTERFACE (Neon Navigation) ============================== */ .topbar { background: rgba(3, 2, 10, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.03); padding: 10px 0; font-size: 12px; font-weight: 500; position: relative; z-index: 100; } .topbar .tb-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .topbar .tb-left { display: flex; gap: 24px; flex-wrap: wrap; } .topbar a, .topbar span { color: var(--muted); display: flex; align-items: center; gap: 6px; transition: color 0.3s; } .topbar a:hover { color: var(--cyan2); } .topbar .tb-socials { display: flex; gap: 12px; } .topbar .tb-socials a { width: 28px; height: 28px; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); transition: all 0.3s; } .topbar .tb-socials a:hover { background: var(--grad2); color: #fff; } /* ============================== NAVBAR HOVER CHASSIS ============================== */ .navbar { position: sticky; top: 16px; z-index: 999; margin: 0 24px; background: rgba(7, 5, 26, 0.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: 100px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .navbar.scrolled { top: 0; margin: 0; border-radius: 0; background: rgba(3, 2, 10, 0.85); border-bottom: 1px solid var(--glass-border); } .nav-inner { max-width: 1577px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; } .nav-logo span { font-size: 24px; font-weight: 800; background: var(--grad2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; list-style: none; gap: 2px; align-items: center; } .nav-menu li a { font-size: 14px; font-weight: 500; padding: 10px 14px; border-radius: 50px; color: var(--text); white-space: nowrap; transition: all 0.3s; } .nav-menu li a:hover, .nav-menu li a.active { background: var(--glass-hover); color: var(--cyan2); } .nav-menu .dropdown { position: relative; } .nav-menu .dropdown-content { display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); background: rgba(7, 5, 26, 0.95); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 20px; min-width: 250px; padding: 10px; box-shadow: 0 40px 80px rgba(0,0,0,0.6); z-index: 999; } .nav-menu .dropdown:hover .dropdown-content { display: block; animation: menuFade 0.2s ease; } @keyframes menuFade { from { opacity:0; transform: translate(-50%, -6px); } to { opacity:1; transform: translate(-50%, 0); } } .nav-menu .dropdown-content a { display: block; padding: 12px 16px; font-size: 13px; border-radius: 12px; color: var(--muted); transition: all 0.2s; } .nav-menu .dropdown-content a:hover { background: var(--glass-hover); color: var(--cyan2); } .nav-cta { padding: 12px 22px; background: var(--grad); border-radius: 50px; font-size: 14px; font-weight: 600; color: #fff !important; white-space: nowrap; transition: all 0.3s; display: flex; align-items: center; gap: 8px; } .nav-cta:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.4); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--cyan2); border-radius: 2px; } /* ============================== THE EXACT SCREENS COMPOSITION GRID ============================== */ .hero { position: relative; min-height: 95vh; display: flex; align-items: center; z-index: 2; padding: 50px 0; } .hero-content { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; background: rgba(36, 179, 208, 0.08); border: 1px solid var(--glass-border); border-radius: 100px; font-size: 13px; color: var(--cyan2); font-weight: 500; margin-bottom: 24px; } .hero h1 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 800; line-height: 1.15; margin-bottom: 24px; color: #fff; letter-spacing: -0.5px; } .hero h1 .grad-text { background: linear-gradient(90deg, #00E5FF, #24B3D0, #6E0EAA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 40px; max-width: 540px; } .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; } /* EXACT REFERENCE MAPPED GLOW OVERLAY BUTTONS */ .btn-primary { padding: 16px 34px; background: rgba(255,255,255,0.06); border: 1px solid rgba(0, 229, 255, 0.4); border-radius: 50px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 35px rgba(0, 229, 255, 0.35), inset 0 0 12px rgba(255,255,255,0.1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 45px rgba(0, 229, 255, 0.55); background: rgba(0, 229, 255, 0.1); } .btn-outline { padding: 16px 32px; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 50px; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; } .btn-outline:hover { background: var(--glass-hover); border-color: var(--cyan2); } /* Reconstructed Rotating AI Particle Sphere Frame (Native Engine) */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .hologram-viewport { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, rgba(110, 14, 170, 0.25) 0%, transparent 75%); display: flex; align-items: center; justify-content: center; animation: orbitFloat 6s ease-in-out infinite; } #sphere-canvas { width: 110%; height: 110%; filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.45)); } @keyframes orbitFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } /* ============================== STATS SECTION ============================== */ .stats-strip { background: rgba(7, 5, 24, 0.5); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding: 54px 0; position: relative; z-index: 2; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-item { text-align: center; } .stat-num { font-size: 54px; font-weight: 800; background: linear-gradient(90deg, #24B3D0, #00E5FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 14px; color: var(--muted); } /* ============================== SERVICES SECTIONS ============================== */ .services-section { background: var(--dark2); position: relative; z-index: 2; } .section-header { text-align: center; margin-bottom: 72px; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan2); margin-bottom: 16px; } .section-header h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; color: #fff; line-height: 1.2; } .section-header p { font-size: 16px; color: var(--muted); max-width: 580px; margin: 16px auto 0; line-height: 1.7; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .srv-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 44px 32px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .srv-card:hover { border-color: rgba(0, 229, 255, 0.4); background: var(--glass-hover); transform: translateY(-6px); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.08); } .srv-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--glass-hover); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--cyan2); margin-bottom: 24px; transition: all 0.3s; } .srv-card:hover .srv-icon { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow); } .srv-card h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; } .srv-card p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; } .srv-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cyan2); } .srv-num { position: absolute; top: 32px; right: 32px; font-size: 48px; font-weight: 800; color: rgba(255, 255, 255, 0.012); line-height: 1; } /* ============================== ABOUT HOVER ARCHITECTURE ============================== */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-visual { position: relative; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 32px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; } .about-visual svg { width: 75%; height: 75%; opacity: 0.15; } .about-visual .center-icon { position: absolute; font-size: 64px; color: var(--cyan2); filter: drop-shadow(var(--glow)); } .about-float-badge { position: absolute; bottom: -16px; right: -16px; background: rgba(7, 5, 24, 0.95); border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px 24px; box-shadow: var(--glow); } .about-float-badge .big { font-size: 36px; font-weight: 800; color: var(--cyan2); } .about-float-badge .small { font-size: 12px; color: var(--muted); } .about-text h2 { font-size: clamp(30px, 3.5vw, 42px); font-weight: 800; color: #fff; margin-bottom: 20px; } .about-text p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 32px; } .value-list { list-style: none; display: flex; flex-direction: column; gap: 16px; } .value-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--text); } .value-list li .check { width: 22px; height: 22px; background: var(--glass-hover); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--cyan2); flex-shrink: 0; } /* ============================== ABOUT PAGE — PAGE HEADER / BREADCRUMB ============================== */ .page-header { position: relative; z-index: 2; padding: 80px 0 56px; text-align: center; } .page-header h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; color: #fff; margin: 14px 0 16px; font-family: 'Lexend', sans-serif; } .page-header h1 .grad-text { background: linear-gradient(90deg, #00E5FF, #24B3D0, #6E0EAA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .breadcrumb a { color: var(--cyan2); } .breadcrumb span { color: var(--muted); } /* ============================== ABOUT PAGE — VALUE / FEATURE ROWS ============================== */ .feature-rows { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; } .feature-row { display: flex; gap: 18px; align-items: flex-start; } .feature-icon { width: 50px; height: 50px; border-radius: 14px; background: var(--glass-hover); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--cyan2); flex-shrink: 0; } .feature-row h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px; } .feature-row p { font-size: 14px; color: var(--muted); line-height: 1.7; } /* ============================== ABOUT PAGE — STRENGTH / ACCORDION ============================== */ .strength-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .strength-grid h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; color: #fff; margin: 12px 0 28px; } .accordion { display: flex; flex-direction: column; gap: 14px; } .acc-item { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; } .acc-item:hover { border-color: rgba(0, 229, 255, 0.35); } .acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: none; border: none; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; font-family: 'Lexend', sans-serif; } .acc-head i { color: var(--cyan2); transition: transform 0.3s; flex-shrink: 0; margin-left: 12px; } .acc-item.active .acc-head i { transform: rotate(180deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .acc-item.active .acc-body { max-height: 600px; } .acc-body-inner { padding: 0 22px 20px; } .acc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .acc-list li { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; } .acc-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan2); flex-shrink: 0; } .acc-body p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 12px; } .acc-body p:last-child { margin-bottom: 0; } .strength-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 48px; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .strength-card i { font-size: 42px; color: var(--cyan2); margin-bottom: 20px; filter: drop-shadow(var(--glow)); } .strength-card h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 14px; } .strength-card p { font-size: 14px; color: var(--muted); line-height: 1.8; } /* ============================== ABOUT PAGE — TECHNOLOGY INDEX GRID ============================== */ .tech-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; z-index: 2; } .tech-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px; padding: 32px 16px; text-align: center; transition: all 0.3s; } .tech-card:hover { border-color: var(--cyan2); background: var(--glass-hover); transform: translateY(-4px); } .tech-card i { font-size: 30px; color: var(--cyan2); display: block; margin-bottom: 14px; } .tech-card span { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.5px; } /* ============================== WHY CHOOSE US & PROCESS LOGIC ============================== */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 2; } .why-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 36px 24px; text-align: center; transition: all 0.35s; } .why-card:hover { border-color: var(--cyan2); background: var(--glass-hover); transform: translateY(-4px); } .why-card i { font-size: 36px; color: var(--cyan2); margin-bottom: 18px; display: block; } .why-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; } .why-card p { font-size: 13px; color: var(--muted); line-height: 1.6; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 2; } .step { text-align: center; } .step-num { width: 80px; height: 80px; border-radius: 50%; background: var(--dark); border: 2px solid var(--glass-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 24px; font-weight: 800; color: #fff; transition: all 0.3s; } .step:hover .step-num { border-color: var(--cyan2); box-shadow: var(--glow); color: var(--cyan2); } .step h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; } .step p { font-size: 13px; color: var(--muted); line-height: 1.6; } /* ============================== CTA BANNER CONTEXT ============================== */ .cta-banner { background: linear-gradient(135deg, rgba(24, 14, 167, 0.7) 0%, rgba(110, 14, 170, 0.7) 100%); border: 1px solid var(--glass-border); border-radius: 32px; padding: 60px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; overflow: hidden; box-shadow: var(--glow); z-index: 2; } .cta-text h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #fff; margin-bottom: 10px; } .cta-text p { font-size: 15px; color: rgba(255,255,255,0.7); } .btn-white { padding: 16px 32px; background: #fff; border-radius: 50px; font-size: 15px; font-weight: 700; color: var(--blue); white-space: nowrap; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; } /* ============================== FOOTER CORE UTILITIES ============================== */ .footer { background: #030209; border-top: 1px solid rgba(255,255,255,0.05); padding: 80px 0 0; position: relative; z-index: 2; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 60px; } .footer-brand p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 16px 0 24px; } .footer-brand .brand-name { font-size: 24px; font-weight: 800; color: #fff; } .footer-logo { height: 150px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 14px; } .footer-info { display: flex; flex-direction: column; gap: 12px; } .footer-info a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .footer-info a:hover { color: var(--cyan2); } .footer-info a i { color: var(--cyan2); width: 16px; } .socials { display: flex; gap: 12px; margin-top: 24px; } .socials a { width: 38px; height: 38px; background: var(--glass); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); transition: all 0.3s; } .socials a:hover { background: var(--grad); color: #fff; box-shadow: var(--glow); transform: translateY(-2px); } .footer h5 { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-links a { font-size: 14px; color: var(--muted); } .footer-links a:hover { color: var(--cyan2); padding-left: 4px; transition: all 0.3s; } .newsletter-form { display: flex; flex-direction: column; gap: 12px; } .newsletter-form input { width: 100%; padding: 14px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; color: var(--text); font-size: 14px; outline: none; transition: all 0.3s; } .newsletter-form input:focus { border-color: var(--cyan2); box-shadow: var(--glow); } .newsletter-form button { padding: 14px; background: var(--grad); border: none; border-radius: 14px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.3s; width: 100%; } .newsletter-form button:hover { box-shadow: var(--glow); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 13px; color: var(--muted); } .footer-bottom a { color: var(--cyan2); } /* ============================== REVEALS, BACK-TO-TOP, MOBILE NAV OVERLAY ============================== */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .back-top { position: fixed; bottom: 32px; right: 32px; width: 46px; height: 46px; background: var(--grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; cursor: pointer; opacity: 0; transform: translateY(20px); transition: all 0.3s; z-index: 100; border: none; } .back-top.show { opacity: 1; transform: translateY(0); } .mobile-nav { display: none; position: fixed; inset: 0; background: rgba(4, 3, 17, 0.98); backdrop-filter: blur(24px); z-index: 9999; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } .mobile-nav.open { display: flex; } .mobile-nav a { font-size: 26px; font-weight: 700; color: var(--text); } .mobile-nav-close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--text); font-size: 24px; cursor: pointer; } /* ============================== LOGO IMAGE (Desktop default) ============================== */ .imgs { display: block; width: auto; height: 200px; max-width: 100%; object-fit: contain; margin-right: 340px; } /* =================================================================== RESPONSIVE BREAKPOINTS Organized largest -> smallest, each rule declared once (no repeats across breakpoints, since max-width queries already cascade down to every smaller screen). =================================================================== */ /* ---------- Tablet (<= 1024px) ---------- */ @media (max-width: 1024px) { .services-grid, .why-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; } .strength-grid { gap: 40px; } .tech-grid { grid-template-columns: repeat(3, 1fr); } .imgs { height: 110px !important; width: auto; margin-right: 0; } } /* ---------- Mobile (<= 768px) ---------- */ @media (max-width: 768px) { /* Drop the secondary contact strip and let the floating nav sit flush at the top */ .topbar { display: none !important; } .navbar { top: 0; } .section-pad { padding: 60px 0; } .hero { min-height: auto; padding: 100px 0 50px; } .hero-content { grid-template-columns: 1fr; text-align: center; } .hero p { margin: 0 auto 36px; } .hero-btns { justify-content: center; } .hero-visual { order: -1; margin-bottom: 20px; } .hologram-viewport { max-width: 280px; } .nav-menu, .nav-cta { display: none; } .hamburger { display: flex; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .services-grid, .why-grid, .process-steps { grid-template-columns: 1fr; } .cta-banner { flex-direction: column; text-align: center; padding: 40px 24px; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; text-align: center; } .page-header { padding: 50px 0 36px; } .strength-grid { grid-template-columns: 1fr; } .tech-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .imgs { height: 110px !important; width: auto; margin-right: 0; } } /* ---------- Small mobile (<= 480px) ---------- */ @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .hologram-viewport { max-width: 220px; } .cta-banner { padding: 32px 20px; } .tech-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ ARC REACTOR PRELOADER — INFOXSOLUTION ============================================================ */ #arc-preloader { position: fixed; inset: 0; background: #050a12; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.8s ease, visibility 0.8s ease; } #arc-preloader.hidden { opacity: 0; visibility: hidden; } /* Outer ambient breath */ .arc-outer-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, #00cfff0a 0%, transparent 70%); animation: arcOuterBreath 3s ease-in-out infinite alternate; } @keyframes arcOuterBreath { from { transform: scale(0.85); opacity: 0.4; } to { transform: scale(1.15); opacity: 1; } } /* Scene container */ .arc-scene { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; } /* Spinning rings */ .arc-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; animation: arcSpin linear infinite; } @keyframes arcSpin { to { transform: rotate(360deg); } } .arc-ring-1 { width: 220px; height: 220px; border-top-color: #00cfff; border-right-color: #00cfff30; border-bottom-color: transparent; border-left-color: #00cfff20; animation-duration: 3.2s; box-shadow: 0 0 14px #00cfff44, inset 0 0 10px #00cfff18; } .arc-ring-2 { width: 186px; height: 186px; border-top-color: transparent; border-right-color: #4dd9ff; border-bottom-color: #4dd9ff; border-left-color: transparent; animation-duration: 2.1s; animation-direction: reverse; box-shadow: 0 0 10px #4dd9ff33, inset 0 0 6px #4dd9ff18; } .arc-ring-3 { width: 150px; height: 150px; border-top-color: #00a8cc; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #00a8cc; animation-duration: 1.6s; box-shadow: 0 0 8px #00a8cc44; } .arc-ring-4 { width: 116px; height: 116px; border-color: #0e3f55 #00cfff44 #00cfff44 #0e3f55; animation-duration: 2.8s; animation-direction: reverse; } /* Radial segment ticks */ .arc-segments { position: absolute; width: 220px; height: 220px; } .arc-seg { position: absolute; width: 2px; height: 16px; background: #00cfff; top: 0; left: 109px; transform-origin: 1px 110px; border-radius: 1px; animation: arcSegPulse 2s ease-in-out infinite; } .arc-seg:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; } .arc-seg:nth-child(2) { transform: rotate(45deg); animation-delay: 0.22s; } .arc-seg:nth-child(3) { transform: rotate(90deg); animation-delay: 0.44s; } .arc-seg:nth-child(4) { transform: rotate(135deg); animation-delay: 0.66s; } .arc-seg:nth-child(5) { transform: rotate(180deg); animation-delay: 0.88s; } .arc-seg:nth-child(6) { transform: rotate(225deg); animation-delay: 1.10s; } .arc-seg:nth-child(7) { transform: rotate(270deg); animation-delay: 1.32s; } .arc-seg:nth-child(8) { transform: rotate(315deg); animation-delay: 1.54s; } @keyframes arcSegPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; box-shadow: 0 0 8px #00cfff, 0 0 16px #00cfff55; } } /* Core orb */ .arc-core { position: relative; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #c8f5ff, #00cfff 28%, #007aaa 58%, #003e58); animation: arcCoreGlow 2.2s ease-in-out infinite alternate; z-index: 2; } .arc-core::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #ffffff, #a8eeff 38%, #00cfff80); animation: arcInnerPulse 1.6s ease-in-out infinite alternate; } .arc-core::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, #00cfff1a 0%, transparent 68%); animation: arcCoreHalo 2s ease-in-out infinite alternate; } @keyframes arcCoreGlow { from { box-shadow: 0 0 22px #00cfff, 0 0 44px #00cfff88, 0 0 66px #00cfff33; } to { box-shadow: 0 0 34px #00eeff, 0 0 70px #00cfffaa, 0 0 110px #00cfff44; } } @keyframes arcInnerPulse { from { opacity: 0.78; } to { opacity: 1; } } @keyframes arcCoreHalo { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.35); opacity: 0; } } /* Hexagonal inner pattern overlay on core */ .arc-core-hex { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: 0.18; } .arc-core-hex svg { width: 100%; height: 100%; animation: arcHexSpin 8s linear infinite; } @keyframes arcHexSpin { to { transform: rotate(360deg); } } /* Brand text + progress */ .arc-brand { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .arc-company { color: #ffffff; font-family: 'Lexend', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .arc-tagline { color: #00cfff; font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; animation: arcTagBlink 2.4s ease-in-out infinite; text-shadow: 0 0 8px #00cfff88; } @keyframes arcTagBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .arc-progress-wrap { width: 180px; height: 2px; background: #0a1e2b; border-radius: 2px; overflow: hidden; border: 0.5px solid #00cfff22; } .arc-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #007aaa, #00cfff, #80eeff); border-radius: 2px; box-shadow: 0 0 8px #00cfff; animation: arcFillBar 2.2s ease-in-out infinite; } @keyframes arcFillBar { 0% { width: 0%; opacity: 1; } 75% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } } /* Scanline ambient */ #arc-preloader::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, #00cfff04 3px, #00cfff04 4px ); pointer-events: none; animation: arcScan 4s linear infinite; } @keyframes arcScan { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } }