/* Theme Name: Ocimum Systems Theme URI: https://www.ocimum.co.in Author: Ocimum Systems Description: Professional B2B IT Infrastructure & Cybersecurity — UI Overhaul v4.0 Version: 5.0.0 Text Domain: ocimum */ /* Theme: Ocimum Systems v5.0 Modernized: Vanilla JS · PHP namespaced classes · theme.json · JSON-LD SEO ================================================================= COLOR SYSTEM — Design Decisions: - Primary Navy #0C2340: Deeper, richer than v2's #0a3d62. Conveys authority and trustworthiness for B2B enterprise buyers. - Accent Cyan #00D4FF: Electric, high-tech feel — replaces flat green. Passes WCAG AA on dark bg. Signals innovation & cybersecurity. - Accent Green #00C27A: Retained for success states & CTAs. - Surface #F8FAFE: 2% blue tint on white — warmer than pure white, reduces eye strain on data-heavy pages. - All text colors use WCAG AA contrast (4.5:1 minimum). ================================================================= */ :root { /* ── Core Brand ── */ --navy: #0C2340; --navy-dk: #07172B; --navy-mid: #123A64; --navy-lt: #1B5089; --navy-glass: rgba(12,35,64,.92); /* ── Accents ── */ --cyan: #00D4FF; /* primary interactive accent */ --cyan-dk: #00A8CC; --cyan-glow: rgba(0,212,255,.18); --green: #00C27A; /* CTA / success */ --green-dk: #00A065; --green-glow: rgba(0,194,122,.22); --gold: #F5B041; /* premium / highlight */ --gold-glow: rgba(245,176,65,.2); --gold-dk: #D4952A; /* ── Surfaces ── */ --white: #FFFFFF; --surf-0: #F8FAFE; /* page bg — barely-blue white */ --surf-1: #F0F5FF; /* alternate section bg */ --surf-2: #E6EEF9; /* card border / dividers */ /* ── Text ── */ --text-900: #0D1F35; /* headings */ --text-700: #2D4A6B; /* body */ --text-500: #5B7A9C; /* secondary */ --text-300: #94AAC0; /* muted */ /* ── Category chips ── */ --chip-blue: #EBF2FF; --chip-blue-t: #1455A4; --chip-green: #E6F9F0; --chip-green-t: #0A7A4E; --chip-amber: #FFF5E6; --chip-amber-t: #915A00; --chip-teal: #E5F8F8; --chip-teal-t: #0D7070; --chip-purple: #F0EBFF; --chip-purple-t: #5C30B5; --chip-coral: #FFF0EE; --chip-coral-t: #B53020; /* ── Shadows — layered for realism ── */ --sh-xs: 0 1px 2px rgba(12,35,64,.05); --sh-sm: 0 1px 4px rgba(12,35,64,.07), 0 2px 8px rgba(12,35,64,.04); --sh-md: 0 2px 8px rgba(12,35,64,.08), 0 8px 24px rgba(12,35,64,.06); --sh-lg: 0 4px 16px rgba(12,35,64,.10), 0 16px 48px rgba(12,35,64,.08); --sh-xl: 0 8px 32px rgba(12,35,64,.12), 0 32px 80px rgba(12,35,64,.10); --sh-2xl: 0 20px 60px rgba(12,35,64,.18), 0 4px 12px rgba(12,35,64,.08); --sh-glow-cyan: 0 0 0 3px var(--cyan-glow); --sh-glow-green: 0 0 0 3px var(--green-glow); --sh-inset: inset 0 1px 0 rgba(255,255,255,.08); /* ── Typography ── */ --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Geometry ── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* ── Motion — purposeful, not decorative ── */ --ease-out: cubic-bezier(0, 0, .2, 1); /* entrances */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* exits */ --ease-io: cubic-bezier(.4, 0, .2, 1); /* UI micro-interactions */ --ease-spring: cubic-bezier(.34,1.56,.64,1); /* playful bounce */ --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 380ms; --dur-enter: 600ms; /* ── Layout ── */ --nav-h: 72px; --page-max: 1360px; } /* ================================================================= DARK MODE — navy-deep palette Toggle with .dark-mode on or ================================================================= */ .dark-mode, .dark-mode :root { --navy: #0A1628; --navy-dk: #050F1A; --navy-mid: #0E2440; --navy-lt: #163A66; --navy-glass: rgba(5,15,26,.95); --surf-0: #0A1628; /* page bg — deep navy */ --surf-1: #0E2440; /* alternate section bg */ --surf-2: #1A3355; /* card border / dividers */ --text-900: #E8EDF5; /* headings — light */ --text-700: #B0C4DE; /* body */ --text-500: #7A9BB5; /* secondary */ --text-300: #4A6B85; /* muted */ --white: #0D1F30; /* card bg — dark navy */ --chip-blue: #0D1F3A; --chip-blue-t: #5B9BDF; --chip-green: #0D2A1E; --chip-green-t: #3DD68C; --chip-amber: #2A1F0D; --chip-amber-t: #E8B84B; --chip-teal: #0D2428; --chip-teal-t: #3DB8B8; --chip-purple: #1A0D2A; --chip-purple-t: #8B6BD6; --chip-coral: #2A100D; --chip-coral-t: #E8604D; --sh-xs: 0 1px 2px rgba(0,0,0,.2); --sh-sm: 0 1px 4px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15); --sh-md: 0 2px 8px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2); --sh-lg: 0 4px 16px rgba(0,0,0,.35), 0 16px 48px rgba(0,0,0,.25); --sh-xl: 0 8px 32px rgba(0,0,0,.4), 0 32px 80px rgba(0,0,0,.3); --sh-2xl: 0 20px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.25); } .dark-mode .section { background: rgba(10,22,40,.96); } .dark-mode .section-alt { background: rgba(14,36,64,.94); } .dark-mode .card, .dark-mode .svc-card, .dark-mode .whyus-card, .dark-mode .hww-card, .dark-mode .qa-card, .dark-mode .sw-card, .dark-mode .team-card, .dark-mode .astat, .dark-mode .metric-card, .dark-mode .contact-item, .dark-mode .contact-form-card, .dark-mode .std-card, .dark-mode .ind-chip, .dark-mode .proc-card, .dark-mode .logo-card, .dark-mode .client-card { background: var(--white); } .dark-mode .team-inner { background: var(--white); } .dark-mode .tsocial { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.6); } .dark-mode .tsocial:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); } /* Dark mode — text, button, nav & icon readability */ .dark-mode .logo-text { color: #E8EDF5; } .dark-mode .hero h1 { color: #E8EDF5; } .dark-mode .cyber-card h2 { color: #E8EDF5; } .dark-mode .btn-primary { color: #fff; } .dark-mode .btn-navy { background: linear-gradient(135deg, #1A4480, #0E3060); color: #fff; box-shadow: var(--sh-sm); } .dark-mode .btn-navy:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); } .dark-mode .btn-outline-dark { border-color: rgba(255,255,255,.2); color: var(--text-900); background: rgba(255,255,255,.05); } .dark-mode .btn-outline-dark:hover { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(255,255,255,.1); } .dark-mode .btn-outline { color: #E8EDF5; } .dark-mode .nav-cta { color: #fff; } .dark-mode .svc-icon { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } .dark-mode .ind-icon { color: #B0C4DE; } .dark-mode .ind-chip:hover { background: #1A3355; } .dark-mode .ind-chip:hover .ind-icon, .dark-mode .ind-chip:hover .ind-name { color: #fff !important; } .dark-mode .ind-cta h3 { color: #fff; } .dark-mode .hww-num-badge { background: linear-gradient(135deg, #1A4480, #0E3060); color: #fff; } .dark-mode .hww-icon { color: #5B9BDF; } .dark-mode .proc-icon { background: linear-gradient(135deg, #1A4480, #0E3060); color: #fff; } .dark-mode .badge-num { color: #E8EDF5; } .dark-mode .stat-num { color: #E8EDF5; } .dark-mode .metric-icon { color: #5B9BDF; } .dark-mode .vm-card h3 { color: #E8EDF5; } .dark-mode .form-submit { background: linear-gradient(135deg, #1A4480, #0E3060); color: #fff; } .dark-mode .logo-card-img, .dark-mode .client-card-img { filter: grayscale(1) opacity(.65); } .dark-mode .logo-card.has-img:hover .logo-card-img, .dark-mode .client-card.has-img:hover .client-card-img { filter: grayscale(0) opacity(1); } /* Dark mode toggle button */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5); font-size: 1.1rem; cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0; } .theme-toggle:hover { background: rgba(255,255,255,.14); color: var(--cyan); border-color: rgba(0,212,255,.3); } .dark-mode .theme-toggle { background: rgba(0,212,255,.1); color: var(--cyan); border-color: rgba(0,212,255,.2); } .dark-mode .theme-toggle:hover { background: rgba(0,212,255,.18); } /* ================================================================= RESET & BASE ================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Screen-reader only — for skip links & accessibility */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; padding: .75rem 1.25rem; margin: 0; clip: auto; white-space: normal; background: var(--navy); color: var(--white); border-radius: var(--r-md); font-size: .85rem; font-weight: 600; outline: 2px solid var(--cyan); outline-offset: 2px; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--text-700); background: var(--surf-0); overflow-x: hidden; } /* IT equipment watermark pattern — navy strokes at 6% opacity */ body { background-image: var(--it-bg-pattern); background-size: 320px 320px; background-repeat: repeat; background-attachment: fixed; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -.025em; color: var(--text-900); } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; } h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; } h4 { font-size: 1.05rem; font-weight: 600; } p { margin-bottom: .9rem; } p:last-child { margin-bottom: 0; } /* ================================================================= LAYOUT ================================================================= */ .container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(.75rem, 2.5vw, 2rem); } .section { position: relative; padding: clamp(3.5rem, 5vw, 5rem) 0; background: rgba(248,250,254,.93); overflow: hidden; } .section-alt { background: rgba(240,245,255,.94); } .section-dark { background: var(--navy) !important; background-image: var(--it-bg-dark) !important; background-size: 320px 320px !important; } .section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4 { color: var(--white); } .section-dark p { color: rgba(255,255,255,.6); } .center { text-align: center; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(380px,1fr)); gap: clamp(2rem,4vw,4rem); } /* ================================================================= SECTION HEADER ================================================================= */ .sec-header { margin-bottom: clamp(2.5rem,5vw,4rem); } .sec-header.center { text-align: center; } .sec-header.center .sec-sub { margin: 0 auto; } /* Eyebrow — animated underline entry */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-dk); margin-bottom: .7rem; } .eyebrow::before { content: ''; width: 0; height: 2px; background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 100%); border-radius: 2px; display: inline-block; transition: width var(--dur-slow) var(--ease-out); } .animate.in .eyebrow::before, .sec-header .eyebrow::before { width: 1.5rem; } .section-dark .eyebrow { color: var(--cyan); } /* Section separator — gradient bar */ .section-sep { display: block; width: 52px; height: 3px; background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 100%); border-radius: 3px; margin: .75rem 0 1.25rem; } .center .section-sep, .sec-header.center .section-sep { margin: .75rem auto 1.25rem; } .sec-title { margin-bottom: .5rem; } .sec-sub { font-size: 1.05rem; color: var(--text-500); max-width: 600px; line-height: 1.8; margin-top: .5rem; } /* ================================================================= BUTTONS — clear hierarchy, satisfying micro-interaction Primary: filled green (highest action) Secondary: filled navy Ghost: outlined All use spring easing on hover for premium feel ================================================================= */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.75rem; border-radius: var(--r-full); font-family: var(--font-body); font-size: .9rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; min-height: 44px; border: 1.5px solid transparent; transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-io), background var(--dur-fast), border-color var(--dur-fast); will-change: transform; } .btn:active { transform: scale(.97) !important; } .btn-primary { background: linear-gradient(135deg, var(--green) 0%, var(--green-dk) 100%); color: var(--white); box-shadow: 0 2px 8px var(--green-glow), var(--sh-sm); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 24px var(--green-glow), var(--sh-md); } .btn-navy { background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%); color: var(--white); box-shadow: var(--sh-sm); } .btn-navy:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(12,35,64,.25); } .btn-outline { border-color: rgba(255,255,255,.3); color: var(--white); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); } .btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); transform: translateY(-2px); } .btn-outline-dark { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.75rem; border-radius: var(--r-full); border: 1.5px solid var(--surf-2); color: var(--text-700); background: var(--white); font-family: var(--font-body); font-size: .9rem; font-weight: 500; transition: all var(--dur-med) var(--ease-io); min-height: 44px; } .btn-outline-dark:hover { border-color: var(--navy-mid); color: var(--navy); background: var(--surf-1); transform: translateY(-2px); box-shadow: var(--sh-md); } .btn-cyan { background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dk) 100%); color: var(--navy); box-shadow: 0 2px 8px var(--cyan-glow); } .btn-cyan:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--cyan-glow); } .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%); color: var(--navy); box-shadow: 0 2px 8px var(--gold-glow); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 8px 24px var(--gold-glow); } .btn-row { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.75rem; align-items: center; } /* ================================================================= CARDS — base class, elevated material style ================================================================= */ .card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); padding: 1.5rem; box-shadow: var(--sh-sm); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast); } .card:hover { transform: translateY(-5px); box-shadow: var(--sh-xl); border-color: rgba(0,212,255,.18); } /* ================================================================= NAVIGATION ================================================================= */ #site-header { position: sticky; top: 0; z-index: 1000; height: var(--nav-h); background: var(--navy-glass); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.07); transition: background var(--dur-med), box-shadow var(--dur-med); } #site-header.scrolled { background: rgba(7,23,43,.97); box-shadow: 0 4px 32px rgba(0,0,0,.28); } /* Progress bar — cyan line that fills as user scrolls */ #site-header::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 100%); transition: width .1s linear; } .nav-inner { display: flex; align-items: center; height: var(--nav-h); gap: 1rem; } .site-logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .logo-mark { width: 40px; height: 40px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: .95rem; font-weight: 800; color: var(--navy); box-shadow: 0 2px 12px var(--cyan-glow); transition: transform var(--dur-med) var(--ease-spring); } .site-logo:hover .logo-mark { transform: rotate(-5deg) scale(1.08); } .logo-text { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--white); line-height: 1.2; } .logo-text span { display: block; font-family: var(--font-body); font-size: .58rem; font-weight: 400; color: rgba(255,255,255,.4); letter-spacing: .15em; text-transform: uppercase; } #primary-menu { display: flex; align-items: center; gap: .1rem; flex: 1; justify-content: flex-end; } #primary-menu li { position: relative; } #primary-menu li a { font-family: var(--font-body); font-size: .86rem; font-weight: 400; color: rgba(255,255,255,.7) !important; padding: .5rem .9rem; border-radius: var(--r-md); display: flex; align-items: center; min-height: 44px; transition: color var(--dur-fast), background var(--dur-fast); position: relative; } /* Animated underline on hover */ #primary-menu li a::after { content: ''; position: absolute; bottom: 6px; left: .9rem; right: .9rem; height: 1.5px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-med) var(--ease-out); } #primary-menu li a:hover { color: var(--white) !important; } #primary-menu li a:hover::after { transform: scaleX(1); transform-origin: left; } #primary-menu li.current-menu-item a { color: var(--white) !important; } #primary-menu li.current-menu-item a::after { transform: scaleX(1); } /* Dropdown */ #primary-menu .menu-item-has-children > a::after { content: none; } #primary-menu .menu-item-has-children > a .arrow { display: inline-block; font-size: .6rem; margin-left: .25rem; opacity: .5; transition: transform var(--dur-fast); } #primary-menu .sub-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: var(--navy-dk); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg); min-width: 230px; padding: .5rem; box-shadow: var(--sh-2xl); z-index: 200; } #primary-menu .sub-menu::before { content: ''; position: absolute; top: -6px; left: 20px; width: 10px; height: 10px; background: var(--navy-dk); border-left: 1px solid rgba(255,255,255,.09); border-top: 1px solid rgba(255,255,255,.09); transform: rotate(45deg); } #primary-menu .menu-item-has-children:hover .sub-menu { display: block; } #primary-menu .menu-item-has-children:hover > a { color: var(--white) !important; } #primary-menu .sub-menu li a { border-radius: var(--r-md); padding: .55rem .85rem; font-size: .84rem; color: rgba(255,255,255,.65) !important; } #primary-menu .sub-menu li a::after { display: none; } #primary-menu .sub-menu li a:hover { color: var(--white) !important; background: rgba(255,255,255,.07); } .nav-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .nav-phone { font-size: .8rem; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: .38rem; transition: color var(--dur-fast); } .nav-phone:hover { color: var(--cyan); } .nav-cta { display: flex; align-items: center; gap: .42rem; padding: .5rem 1.3rem; border-radius: var(--r-full); min-height: 40px; background: linear-gradient(135deg, var(--green) 0%, var(--green-dk) 100%); color: var(--white); font-size: .86rem; font-weight: 500; box-shadow: 0 2px 10px var(--green-glow); transition: all var(--dur-med) var(--ease-spring); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--green-glow); } .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; min-height: 44px; justify-content: center; touch-action: manipulation; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--dur-med) var(--ease-io); } /* ================================================================= HERO — Immersive dark with animated mesh gradient + IT grid ================================================================= */ .hero { position: relative; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; overflow: hidden; background: var(--navy-dk); padding: clamp(4rem,7vw,6rem) 0; } /* Animated mesh gradient blobs */ .hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; animation: blobFloat 8s ease-in-out infinite alternate; pointer-events: none; will-change: transform; } .hero-blob-1 { width: 600px; height: 600px; top: -200px; right: -100px; background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); opacity: .12; animation-delay: 0s; } .hero-blob-2 { width: 500px; height: 500px; bottom: -200px; left: -50px; background: radial-gradient(circle, var(--navy-lt) 0%, transparent 70%); opacity: .25; animation-delay: -3s; } .hero-blob-3 { width: 400px; height: 400px; top: 30%; left: 35%; background: radial-gradient(circle, var(--green) 0%, transparent 70%); opacity: .07; animation-delay: -5s; } @keyframes blobFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, -40px) scale(1.05); } } /* Grid overlay pattern */ .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%); } /* Noise texture for depth */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .025; } .hero-inner { display: grid; grid-template-columns: repeat(auto-fit,minmax(500px,1fr)); gap: clamp(2rem,4vw,4rem); align-items: center; position: relative; z-index: 2; } /* Animated badge with pulsing dot */ .hero-badge { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.22); color: var(--cyan); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; padding: .38rem 1.1rem; border-radius: var(--r-full); box-shadow: 0 0 20px rgba(0,212,255,.08); } .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; flex-shrink: 0; animation: dotPulse 1.8s ease-in-out infinite; } @keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,212,255,.5); opacity:1; } 50% { box-shadow: 0 0 0 5px rgba(0,212,255,0); opacity:.7; } } .hero h1 { color: var(--white); margin-bottom: 1.25rem; } .hero h1 .accent { background: linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-desc { font-size: 1.06rem; color: rgba(255,255,255,.58); line-height: 1.82; max-width: 490px; margin-bottom: 2.25rem; } .hero-btns { margin-bottom: 3rem; } /* Trust strip with subtle fade-in logos */ .hero-trust { display: flex; align-items: center; gap: 1.25rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.07); } .hero-trust-label { font-size: .7rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; } .hero-trust-logos { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .hero-trust-logos span { font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.25); letter-spacing: .04em; transition: color var(--dur-med); } .hero-trust-logos span:hover { color: rgba(255,255,255,.6); } /* Hero right panel — terminal / dashboard widget */ .hero-panel { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-2xl); padding: 1.5rem; backdrop-filter: blur(24px); box-shadow: 0 32px 64px rgba(0,0,0,.4), var(--sh-inset); position: relative; overflow: hidden; } .hero-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,.4), transparent); } .hero-panel-header { display: flex; align-items: center; gap: .45rem; margin-bottom: 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.06); } .panel-dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background: #FF5F56; } .dot-yellow { background: #FFBD2E; } .dot-green { background: #27C93F; } .panel-title { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: rgba(255,255,255,.25); letter-spacing: .05em; } .hcr { display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem; border-radius: var(--r-md); margin-bottom: .45rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); transition: all var(--dur-fast); } .hcr:last-child { margin-bottom: 0; } .hcr:hover { background: rgba(255,255,255,.08); border-color: rgba(0,212,255,.15); } .hcr-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .hcr-title { font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.85); } .hcr-sub { font-size: .69rem; color: rgba(255,255,255,.35); margin-top: 1px; } .hcr-tag { margin-left: auto; font-size: .62rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0; } .tag-a { background: rgba(0,194,122,.14); color: #00C27A; } .tag-n { background: rgba(0,212,255,.14); color: #00D4FF; } /* Stats within hero */ .hero-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 1.1rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.08); } .hero-stat .num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -.03em; } .hero-stat .lbl { font-size: .7rem; color: rgba(255,255,255,.42); margin-top: .25rem; line-height: 1.4; } /* ================================================================= STATS BAR — Metrics ticker strip ================================================================= */ .stats-bar { background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy-mid) 35%, var(--navy) 65%, var(--navy-dk) 100%); background-size: 200% 200%; animation: gradientShift 12s ease infinite; padding: clamp(2.25rem,4vw,3rem) 0; position: relative; z-index: 1; overflow: hidden; } .stats-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,212,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.015) 1px, transparent 1px); background-size: 40px 40px; } .stats-bar-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 1rem; text-align: center; position: relative; z-index: 1; } .stat-item { padding: .5rem 0; } .stat-num { font-family: var(--font-head); font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 800; line-height: 1; margin-bottom: .3rem; color: var(--white); letter-spacing: -.03em; } .stat-num .hi { background: linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-lbl { font-size: .68rem; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .1em; line-height: 1.45; } /* ================================================================= ABOUT — Two-column with floating badges ================================================================= */ .about-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(480px,1fr)); gap: clamp(2rem,4vw,4rem); align-items: stretch; } .about-image-col { display: flex; flex-direction: column; } .about-image-col .animate { flex: 1; display: flex; } .about-image-wrap { position: relative; border-radius: var(--r-2xl); overflow: hidden; width: 100%; height: 100%; min-height: 420px; box-shadow: var(--sh-2xl); } .about-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .about-image-wrap:hover img { transform: scale(1.04); } .about-text-col { display: flex; flex-direction: column; justify-content: center; } .about-text-col .about-stats { margin-top: 1.5rem; } .about-text-col .btn-row { margin-top: 1.25rem; } /* Floating card badge */ .about-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; background: rgba(7,23,43,.9); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: .9rem 1.1rem; display: flex; align-items: center; gap: .8rem; box-shadow: var(--sh-xl); } .badge-icon { font-size: 1.6rem; color: var(--cyan); } .badge-num { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--white); line-height: 1; } .badge-lbl { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: 2px; } /* Floating chip top-right */ .about-chip { position: absolute; top: 1.5rem; right: -1rem; background: var(--white); border-radius: var(--r-xl); padding: .75rem 1rem; box-shadow: var(--sh-xl); display: flex; align-items: center; gap: .6rem; border: 1px solid var(--surf-2); } .chip-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--chip-green); display: flex; align-items: center; justify-content: center; color: var(--chip-green-t); font-size: .95rem; } .chip-text { font-size: .78rem; font-weight: 600; color: var(--text-900); } .chip-sub { font-size: .67rem; color: var(--text-300); } .about-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: .85rem; margin-top: 2rem; } .astat { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); padding: 1.25rem 1rem; display: flex; align-items: center; gap: .85rem; box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .astat:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: rgba(0,212,255,.2); } .astat-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .astat-num { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--text-900); line-height: 1; letter-spacing: -.03em; } .astat-lbl { font-size: .7rem; color: var(--text-300); margin-top: 2px; } /* Vision / Mission */ .vm-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); gap: 1.25rem; margin-top: 2.5rem; } .vm-card { border-radius: var(--r-2xl); padding: 2.25rem 1.75rem; position: relative; overflow: hidden; box-shadow: var(--sh-lg); } .vm-card-vision { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); } .vm-card-mission { background: linear-gradient(135deg, #0E3D6E 0%, var(--navy) 100%); } .vm-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 160px; height: 160px; border-radius: 50%; background: var(--cyan-glow); } .vm-card::after { content: ''; position: absolute; bottom: -30px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.03); } .vm-icon { width: 54px; height: 54px; border-radius: var(--r-lg); background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--cyan); margin-bottom: 1.1rem; } .vm-card h3 { color: var(--white); font-size: 1.2rem; margin-bottom: .6rem; } .vm-card p { color: rgba(255,255,255,.6); line-height: 1.75; margin: 0; font-size: .93rem; } /* ================================================================= CYBER CALLOUT — Full-bleed dark container with image overlay ================================================================= */ .cyber-wrap { border-radius: var(--r-2xl); overflow: hidden; position: relative; background: var(--white); border: 1px solid var(--surf-2); box-shadow: var(--sh-2xl); } .cyber-bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1400&q=60&auto=format&fit=crop'); background-size: cover; background-position: center; opacity: .06; } .cyber-scan { position: absolute; inset: 0; background: linear-gradient(rgba(0,212,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.02) 1px, transparent 1px); background-size: 40px 40px; } .cyber-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(248,250,254,.94) 0%, rgba(240,245,255,.96) 100%); } .dark-mode .cyber-overlay { background: linear-gradient(135deg, rgba(5,15,26,.97) 0%, rgba(10,22,40,.95) 100%); } .cyber-content { position: relative; z-index: 1; padding: clamp(3rem,5vw,4.5rem) clamp(1rem,2vw,1.5rem); } .cyber-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr)); gap: 1.5rem; } .cyber-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); padding: clamp(1.75rem,3vw,2.5rem); box-shadow: var(--sh-sm); } .dark-mode .cyber-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 24px rgba(0,0,0,.15); backdrop-filter: blur(4px); } .cyber-card h2 { color: var(--text-900); font-size: clamp(1.3rem,2.5vw,1.65rem); margin-bottom: .75rem; } .cyber-card p { color: var(--text-500); font-size: .95rem; line-height: 1.7; margin-bottom: 1.6rem; } /* ================================================================= SERVICES — with large icon watermark ================================================================= */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(380px,1fr)); gap: 1.5rem; } .svc-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); padding: 2rem; position: relative; overflow: hidden; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast); box-shadow: var(--sh-sm); } /* Top-edge gradient on hover */ .svc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 100%); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out); } .svc-card:hover::before { transform: scaleX(1); } .svc-card:hover { transform: translateY(-7px); box-shadow: var(--sh-2xl); border-color: rgba(0,212,255,.12); } /* Watermark icon — category-coloured, faint */ .svc-watermark { position: absolute; right: -18px; bottom: -18px; font-size: 7.5rem; line-height: 1; color: var(--svc-ic, #1455A4); opacity: .06; transform: rotate(-8deg); pointer-events: none; z-index: 0; transition: opacity var(--dur-med), transform var(--dur-med); } .svc-card:hover .svc-watermark { opacity: .1; transform: rotate(-4deg) scale(1.08); } .svc-icon, .svc-card h3, .svc-card p, .svc-tag, .svc-sublist { position: relative; z-index: 1; } .svc-icon { width: 56px; height: 56px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.65rem; margin-bottom: 1.25rem; background: var(--svc-bg, var(--chip-blue)); color: var(--svc-ic, var(--chip-blue-t)); transition: transform var(--dur-med) var(--ease-spring); } .svc-card:hover .svc-icon { animation: iconFloat 2s ease-in-out infinite; } .svc-card h3 { font-size: 1.06rem; margin-bottom: .45rem; color: var(--text-900); } .svc-card p { font-size: .9rem; line-height: 1.72; margin-bottom: .9rem; } .svc-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 500; padding: .22rem .7rem; border-radius: var(--r-full); background: var(--svc-bg); color: var(--svc-ic); } .svc-sublist { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--surf-1); } .svc-sublist li { font-size: .82rem; color: var(--text-500); padding: .22rem 0; display: flex; align-items: baseline; gap: .5rem; } .svc-sublist li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--svc-ic, var(--cyan)); flex-shrink: 0; margin-top: 6px; } /* ================================================================= WHY US ================================================================= */ .whyus-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 1.25rem; } .whyus-card { display: flex; gap: 1.1rem; padding: 1.6rem; background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .whyus-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: rgba(0,212,255,.18); } .whyus-icon { width: 50px; height: 50px; border-radius: var(--r-lg); flex-shrink: 0; background: linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,194,122,.08) 100%); display: flex; align-items: center; justify-content: center; color: var(--cyan-dk); font-size: 1.35rem; transition: transform var(--dur-med) var(--ease-spring); } .whyus-card:hover .whyus-icon { transform: scale(1.12) rotate(-5deg); color: var(--cyan); } .whyus-card h4 { font-size: 1.02rem; margin-bottom: .3rem; color: var(--text-900); } .whyus-card p { font-size: .88rem; line-height: 1.65; margin: 0; } /* ================================================================= HOW WE WORK — big number accent in background ================================================================= */ .hww-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.5rem; } .hww-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); padding: 2rem; box-shadow: var(--sh-xs); position: relative; overflow: hidden; transition: all var(--dur-med) var(--ease-out); } .hww-card::before { content: attr(data-num); position: absolute; top: -8px; right: 12px; font-family: var(--font-head); font-size: 6rem; font-weight: 800; color: var(--surf-2); line-height: 1; pointer-events: none; transition: color var(--dur-med); } .hww-card:hover::before { color: rgba(0,212,255,.06); } .hww-card:hover { box-shadow: var(--sh-xl); transform: translateY(-5px); border-color: rgba(0,212,255,.15); } .hww-num-badge { width: 36px; height: 36px; border-radius: 50%; margin-bottom: 1rem; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: var(--white); font-family: var(--font-head); font-size: .9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .hww-icon { font-size: 1.55rem; color: var(--navy-lt); margin-bottom: .75rem; } .hww-card h3 { font-size: 1.02rem; margin-bottom: .4rem; color: var(--text-900); } .hww-card p { font-size: .88rem; line-height: 1.65; margin: 0; } /* ================================================================= CAROUSELS — Partner & Client logo tiles ================================================================= */ .carousel-wrap { overflow: hidden; position: relative; touch-action: pan-y; padding: .5rem 0 .85rem; width: 100%; max-width: 100%; } .carousel-track { display: flex; gap: 1rem; width: max-content; animation: marquee 12s linear infinite; animation-delay: 1.5s; } .carousel-wrap:hover .carousel-track { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-card, .client-card { flex: 0 0 200px; height: 120px; background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1rem; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .logo-card:hover, .client-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: rgba(0,212,255,.2); } .logo-card.has-img, .client-card.has-img { padding: 0; } .logo-card-img, .client-card-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) opacity(.45); transition: filter var(--dur-slow) var(--ease-out); } .logo-card.has-img:hover .logo-card-img, .client-card.has-img:hover .client-card-img { filter: grayscale(0) opacity(1); } .logo-card-icon, .client-init { width: 50px; height: 50px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .client-init { border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; } .logo-card-name, .client-name { font-size: .82rem; font-weight: 600; color: var(--text-700); } .logo-card-cat, .client-ind { font-size: .68rem; color: var(--text-300); } .logo-card-link-icon { position: absolute; top: .55rem; right: .55rem; font-size: .75rem; opacity: 0; transition: opacity var(--dur-fast); background: rgba(255,255,255,.9); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--navy-lt); } .logo-card:hover .logo-card-link-icon, .client-card:hover .logo-card-link-icon { opacity: 1; } .car-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.75rem; } .car-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-500); background: var(--white); border: 1px solid var(--surf-2); box-shadow: var(--sh-sm); cursor: pointer; transition: all var(--dur-fast); } .car-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); box-shadow: var(--sh-md); } .car-dots { display: flex; gap: 6px; align-items: center; } .car-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--surf-2); cursor: pointer; transition: all var(--dur-med); border: none; } .car-dot.active { background: var(--cyan-dk); width: 20px; border-radius: 3px; } /* ================================================================= SOFTWARE GRID ================================================================= */ .sw-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1rem; } .sw-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .sw-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: rgba(0,212,255,.18); } .sw-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .sw-card h4 { font-size: .92rem; margin-bottom: .12rem; color: var(--text-900); } .sw-card p { font-size: .78rem; color: var(--text-300); margin: 0; } /* ================================================================= INDUSTRIES ================================================================= */ .ind-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(195px,1fr)); gap: .85rem; } .ind-chip { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); padding: 1.5rem 1rem; text-align: center; box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); cursor: default; } .ind-chip:hover { background: var(--navy); border-color: transparent; box-shadow: var(--sh-xl); transform: translateY(-3px); } .ind-chip:hover .ind-icon, .ind-chip:hover .ind-name { color: var(--white) !important; } .ind-icon { font-size: 2.1rem; color: var(--navy); margin-bottom: .55rem; transition: color var(--dur-med); } .ind-name { font-size: .84rem; font-weight: 500; color: var(--text-500); line-height: 1.35; transition: color var(--dur-med); } /* CTA bar */ .ind-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: var(--r-2xl); padding: 2.5rem 3rem; margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: var(--sh-2xl); position: relative; overflow: hidden; } .ind-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px); background-size: 32px 32px; } .ind-cta h3 { color: var(--white); font-size: 1.2rem; margin-bottom: .3rem; position: relative; } .ind-cta p { color: rgba(255,255,255,.5); margin: 0; font-size: .9rem; position: relative; } /* Metrics */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(165px,1fr)); gap: 1.25rem; margin-top: 2.5rem; } .metric-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); padding: 1.5rem; text-align: center; box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .metric-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: rgba(0,212,255,.2); } .metric-icon { font-size: 1.5rem; color: var(--navy-lt); margin-bottom: .5rem; } .metric-num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--text-900); line-height: 1; margin-bottom: .25rem; letter-spacing: -.03em; } .metric-lbl { font-size: .69rem; color: var(--text-300); text-transform: uppercase; letter-spacing: .09em; } /* ================================================================= TEAM ================================================================= */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.5rem; } .team-card { perspective: 1000px; background: none; border: none; box-shadow: none; overflow: hidden; border-radius: var(--r-2xl); } .team-inner { position: relative; width: 100%; height: 100%; min-height: 340px; transition: transform .5s cubic-bezier(.16,1,.3,1); transform-style: preserve-3d; border: 1px solid var(--surf-2); box-shadow: var(--sh-sm); background: var(--white); } .team-card:hover .team-inner { transform: rotateY(180deg); } .team-front, .team-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: inherit; } .team-back { transform: rotateY(180deg); display: flex; } .team-back-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; gap: .5rem; } .team-photo { position: relative; height: 220px; background: var(--surf-1); overflow: hidden; } .team-photo img { width: 100%; height: 100%; object-fit: contain; } .team-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; } .team-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,23,43,.88) 0%, transparent 100%); } .team-exp-front { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 500; letter-spacing: .02em; color: var(--cyan-dk); margin-top: .5rem; padding: .2rem .65rem; border-radius: var(--r-full); background: rgba(0,148,255,.06); line-height: 1.4; } .team-front-body { padding: 1rem 1.15rem 1.25rem; } .team-front-body h3 { font-size: 1rem; margin-bottom: .18rem; color: var(--text-900); } .team-role { font-size: .78rem; color: var(--cyan-dk); font-weight: 500; } .team-exp-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--cyan-dk); background: rgba(0,148,255,.08); padding: .35rem .85rem; border-radius: var(--r-full); } .team-back-bio { flex: 1; overflow-y: auto; width: 100%; min-height: 0; font-size: .82rem; color: var(--text-300); line-height: 1.65; } .team-back-social { display: flex; gap: .55rem; margin-top: .35rem; } .tsocial { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,148,255,.08); border: 1px solid rgba(0,148,255,.15); display: flex; align-items: center; justify-content: center; color: var(--cyan-dk); font-size: .85rem; transition: all var(--dur-fast); } .tsocial:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); } /* ================================================================= PROCESS — Execution Model (9-step uniform cards) ================================================================= */ .process-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 1rem; align-items: stretch; } .proc-step { text-align: center; height: 100%; position: relative; } .proc-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-xl); padding: 1.5rem 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; box-shadow: var(--sh-xs); height: 100%; min-height: 160px; transition: all var(--dur-med) var(--ease-out); position: relative; z-index: 1; } .proc-step:hover .proc-card { box-shadow: var(--sh-xl); transform: translateY(-5px); border-color: rgba(0,212,255,.2); } .proc-icon { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; transition: all var(--dur-med) var(--ease-spring); box-shadow: 0 4px 12px rgba(12,35,64,.2); } .proc-step:hover .proc-icon { background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dk) 100%); color: var(--navy); box-shadow: 0 6px 20px var(--cyan-glow); transform: scale(1.1); } .proc-num { font-family: var(--font-head); font-size: .7rem; font-weight: 700; color: var(--text-300); letter-spacing: .07em; } .proc-label { font-size: .82rem; font-weight: 600; color: var(--text-700); line-height: 1.35; } /* Larger variant */ .process-grid-lg .proc-card { padding: 2rem 1rem 1.75rem; gap: .9rem; min-height: 195px; } .process-grid-lg .proc-icon { width: 64px; height: 64px; font-size: 1.6rem; } .process-grid-lg .proc-num { font-size: .82rem; } .process-grid-lg .proc-label { font-size: .95rem; font-weight: 600; line-height: 1.4; } /* ================================================================= QUALITY ASSURANCE ================================================================= */ .qa-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(360px,1fr)); gap: 1.25rem; } .qa-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); padding: 1.75rem 1.5rem; text-align: center; box-shadow: var(--sh-xs); transition: all var(--dur-med) var(--ease-out); } .qa-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: rgba(0,212,255,.18); } .qa-icon { width: 56px; height: 56px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,194,122,.06) 100%); border: 1px solid rgba(0,212,255,.12); display: flex; align-items: center; justify-content: center; color: var(--cyan-dk); font-size: 1.45rem; margin: 0 auto .9rem; transition: transform var(--dur-med) var(--ease-spring); } .qa-card:hover .qa-icon { transform: scale(1.1) rotate(-5deg); } .qa-card h4 { font-size: .95rem; color: var(--text-900); margin-bottom: .35rem; } .qa-card p { font-size: .82rem; color: var(--text-300); line-height: 1.6; margin: 0; } /* ================================================================= STANDARDS / APPROACH ================================================================= */ .standards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.25rem; } .std-card { background: var(--white); border-radius: var(--r-xl); padding: 1.5rem; border-left: 3px solid transparent; background-clip: padding-box; position: relative; box-shadow: var(--sh-sm); transition: all var(--dur-med) var(--ease-out); } .std-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; background: linear-gradient(to bottom, var(--cyan) 0%, var(--green) 100%); } .std-card:hover { box-shadow: var(--sh-xl); transform: translateY(-4px); } .std-phase { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan-dk); margin-bottom: .4rem; } .std-card h4 { font-size: .95rem; margin-bottom: .55rem; color: var(--text-900); } .std-badges { display: flex; flex-wrap: wrap; gap: .4rem; } .std-badge { font-size: .68rem; background: var(--surf-1); color: var(--text-500); border: 1px solid var(--surf-2); border-radius: var(--r-sm); padding: .2rem .6rem; font-weight: 500; } /* ================================================================= CONTACT ================================================================= */ .contact-wrap { display: grid; grid-template-columns: repeat(auto-fit,minmax(400px,1fr)); gap: clamp(2rem,4vw,3rem); align-items: start; } .contact-info-col h3 { font-size: 1.45rem; margin-bottom: .5rem; color: var(--text-900); } .contact-info-col > p { margin-bottom: 1.5rem; color: var(--text-500); } .contact-item { display: flex; gap: .9rem; margin-bottom: 1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-lg); padding: .9rem 1rem; box-shadow: var(--sh-xs); transition: all var(--dur-fast); } .contact-item:hover { border-color: rgba(0,212,255,.25); box-shadow: var(--sh-md); } .contact-ico { width: 40px; height: 40px; background: linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,194,122,.06) 100%); border: 1px solid rgba(0,212,255,.12); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--cyan-dk); font-size: 1rem; flex-shrink: 0; } .contact-item strong { display: block; font-size: .82rem; color: var(--text-900); margin-bottom: .08rem; } .contact-item span, .contact-item a { font-size: .82rem; color: var(--text-500); } .contact-item a:hover { color: var(--navy); } .contact-callout { margin-top: 1.25rem; padding: 1.5rem; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: var(--r-2xl); position: relative; overflow: hidden; box-shadow: 0 12px 40px rgba(12,35,64,.25); } .contact-callout::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--cyan-glow); } .contact-callout::after { content: ''; position: absolute; bottom: -30px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.03); } .contact-callout strong { display: block; font-size: .95rem; color: var(--cyan); margin-bottom: .5rem; font-family: var(--font-head); position: relative; } .contact-callout p { font-size: .85rem; line-height: 1.72; color: rgba(255,255,255,.6); position: relative; margin-bottom: .4rem; } .contact-form-card { background: var(--white); border: 1px solid var(--surf-2); border-radius: var(--r-2xl); padding: clamp(1.75rem,4vw,2.5rem); box-shadow: var(--sh-xl); } .form-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: .78rem; font-weight: 500; color: var(--text-500); margin-bottom: .35rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: .72rem 1rem; border-radius: var(--r-md); font-family: var(--font-body); font-size: .9rem; color: var(--text-900); background: var(--surf-0); border: 1.5px solid var(--surf-2); outline: none; transition: all var(--dur-fast); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: var(--white); border-color: var(--cyan-dk); box-shadow: 0 0 0 3px var(--cyan-glow); } .form-group textarea { height: 110px; resize: none; } .form-group small { font-size: .7rem; color: var(--text-300); margin-top: 4px; display: block; } .form-submit { width: 100%; border-radius: var(--r-full); padding: .9rem; font-family: var(--font-body); font-size: .95rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: var(--white); box-shadow: 0 4px 16px rgba(12,35,64,.22); transition: all var(--dur-med) var(--ease-spring); } .form-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(12,35,64,.3); } .form-success { display:none; background:#E6F9F0; border:1px solid var(--green); border-radius:var(--r-md); padding:1rem; margin-top:1rem; font-size:.88rem; color:var(--green-dk); text-align:center; } .form-error-msg { display:none; background:#FFF0EE; border:1px solid var(--chip-coral-t); border-radius:var(--r-md); padding:1rem; margin-top:1rem; font-size:.88rem; color:var(--chip-coral-t); text-align:center; } /* ================================================================= FOOTER ================================================================= */ #site-footer { background: var(--navy-dk); background-image: linear-gradient(rgba(0,212,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.018) 1px, transparent 1px), var(--circuit-pattern); background-size: 48px 48px, 48px 48px, 400px 400px; padding: clamp(3.5rem,6vw,5rem) 0 0; position: relative; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(1.5rem,3vw,3.5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.07); } .footer-brand p { font-size: .84rem; color: rgba(255,255,255,.38); line-height: 1.75; margin: 1rem 0 1.5rem; max-width: 280px; } .footer-social { display: flex; gap: .6rem; } .footer-social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.38); font-size: .85rem; transition: all var(--dur-fast); } .footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); } .footer-col h4 { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 1.1rem; } .footer-col ul li { margin-bottom: .55rem; } .footer-col ul li a { font-size: .84rem; color: rgba(255,255,255,.42); transition: color var(--dur-fast); } .footer-col ul li a:hover { color: var(--white); } .footer-ci { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .8rem; } .footer-ci i { color: var(--cyan); font-size: .9rem; flex-shrink: 0; margin-top: 2px; } .footer-ci a, .footer-ci span { font-size: .82rem; color: rgba(255,255,255,.38); line-height: 1.55; } .footer-ci a:hover { color: var(--white); } .footer-bottom { padding: 1.1rem 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .75rem; color: rgba(255,255,255,.22); } .footer-bottom-inner a { color: rgba(255,255,255,.22); transition: color var(--dur-fast); } .footer-bottom-inner a:hover { color: rgba(255,255,255,.55); } /* ================================================================= PAGINATION ================================================================= */ .pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--r-md); font-size: .88rem; font-weight: 500; color: var(--text-500); background: var(--white); border: 1px solid var(--surf-2); transition: all var(--dur-fast); } .pagination .page-numbers:hover { border-color: var(--navy-mid); color: var(--navy); box-shadow: var(--sh-sm); } .pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--white); } .pagination .page-numbers .ti { font-size: .8rem; } .pagination .page-numbers.prev, .pagination .page-numbers.next { font-size: 0; } .pagination .page-numbers.prev::before { content: '< Prev'; font-size: .88rem; } .pagination .page-numbers.next::after { content: 'Next >'; font-size: .88rem; } /* ================================================================= SEARCH FORM ================================================================= */ .search-field:focus { background: var(--white); border-color: var(--cyan-dk); box-shadow: 0 0 0 3px var(--cyan-glow); } /* ================================================================= ANIMATIONS - fadeUp: page-load hero elements - scaleIn: card entrances on scroll - countUp: handled by JS IntersectionObserver - Stagger delays via nth-child ================================================================= */ @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } @keyframes scaleIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} } @keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} } @keyframes dotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.5)} 50%{box-shadow:0 0 0 6px rgba(0,212,255,0)} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes floatYSoft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } @keyframes pulseGlow { 0%,100%{box-shadow:0 0 8px var(--cyan-glow)} 50%{box-shadow:0 0 24px var(--cyan-glow),0 0 48px rgba(0,212,255,.08)} } @keyframes scanline { 0%{top:-2%} 100%{top:102%} } @keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes borderGlow { 0%,100%{border-color:rgba(0,212,255,.08)} 50%{border-color:rgba(0,212,255,.3)} } @keyframes iconFloat { 0%,100%{transform:translateY(0) rotate(0)} 33%{transform:translateY(-4px) rotate(-2deg)} 66%{transform:translateY(2px) rotate(1deg)} } @keyframes dashOffset { to{stroke-dashoffset:0} } /* New animated utility classes */ .animate-float { animation: floatY 4s ease-in-out infinite; } .animate-float-soft { animation: floatYSoft 5s ease-in-out infinite; } .animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; } .animate-gradient { background-size: 200% 200% !important; animation: gradientShift 8s ease infinite; } /* Scroll reveal — elements start invisible, JS adds .in */ .animate { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); } .animate.in { opacity: 1; transform: none; } /* Hero content auto-animates (no JS needed) */ .hero-content > * { animation: fadeUp .75s var(--ease-out) both; } .hero-content > *:nth-child(1){animation-delay:.06s} .hero-content > *:nth-child(2){animation-delay:.18s} .hero-content > *:nth-child(3){animation-delay:.30s} .hero-content > *:nth-child(4){animation-delay:.42s} .hero-content > *:nth-child(5){animation-delay:.54s} .hero-panel { animation: scaleIn .8s .28s var(--ease-out) both; } .hero-panel:hover { animation: floatY 5s ease-in-out infinite; } .hero-panel .hcr { transition: all var(--dur-fast), transform var(--dur-med) var(--ease-spring); } .hero-panel .hcr:hover { transform: translateX(4px) scale(1.01); } /* Staggered card grids */ .services-grid .svc-card:nth-child(1){transition-delay:.05s} .services-grid .svc-card:nth-child(2){transition-delay:.1s} .services-grid .svc-card:nth-child(3){transition-delay:.15s} .services-grid .svc-card:nth-child(4){transition-delay:.2s} .services-grid .svc-card:nth-child(5){transition-delay:.25s} .services-grid .svc-card:nth-child(6){transition-delay:.3s} /* ================================================================= ARCHITECTURAL BACKGROUND PATTERNS ================================================================= */ :root { --it-bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect x='18' y='22' width='36' height='48' rx='3' fill='none' stroke='%230C2340' stroke-width='1.2' opacity='.06'/%3E%3Crect x='22' y='28' width='28' height='5' rx='1' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Crect x='22' y='37' width='28' height='5' rx='1' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Crect x='22' y='46' width='28' height='5' rx='1' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Ccircle cx='44' cy='30' r='1.5' fill='%2300D4FF' opacity='.14'/%3E%3Ccircle cx='44' cy='39' r='1.5' fill='%2300D4FF' opacity='.14'/%3E%3Ccircle cx='44' cy='48' r='1.5' fill='%2300D4FF' opacity='.14'/%3E%3Crect x='120' y='28' width='52' height='34' rx='3' fill='none' stroke='%230C2340' stroke-width='1.2' opacity='.06'/%3E%3Crect x='108' y='62' width='76' height='5' rx='2' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Crect x='125' y='34' width='42' height='22' rx='1' fill='none' stroke='%230C2340' stroke-width='.8' opacity='.04'/%3E%3Crect x='238' y='18' width='58' height='28' rx='4' fill='none' stroke='%230C2340' stroke-width='1.2' opacity='.06'/%3E%3Ccircle cx='252' cy='32' r='3' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Ccircle cx='267' cy='32' r='3' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Ccircle cx='282' cy='32' r='3' fill='none' stroke='%230C2340' stroke-width='1' opacity='.06'/%3E%3Cline x1='267' y1='46' x2='267' y2='62' stroke='%230C2340' stroke-width='1' opacity='.04'/%3E%3Cline x1='252' y1='46' x2='220' y2='62' stroke='%230C2340' stroke-width='1' opacity='.04'/%3E%3Cline x1='282' y1='46' x2='314' y2='62' stroke='%230C2340' stroke-width='1' opacity='.04'/%3E%3Ccircle cx='48' cy='170' r='14' fill='none' stroke='%230C2340' stroke-width='1.2' opacity='.06'/%3E%3Ccircle cx='48' cy='170' r='7' fill='none' stroke='%230C234... (line truncated to 2000 chars) --it-bg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect x='18' y='22' width='36' height='48' rx='3' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Crect x='22' y='28' width='28' height='5' rx='1' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.04'/%3E%3Crect x='22' y='37' width='28' height='5' rx='1' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.04'/%3E%3Crect x='22' y='46' width='28' height='5' rx='1' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.04'/%3E%3Ccircle cx='44' cy='30' r='1.5' fill='%2300D4FF' opacity='.18'/%3E%3Ccircle cx='44' cy='39' r='1.5' fill='%2300D4FF' opacity='.18'/%3E%3Ccircle cx='44' cy='48' r='1.5' fill='%2300D4FF' opacity='.18'/%3E%3Ccircle cx='48' cy='170' r='14' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Ccircle cx='48' cy='170' r='7' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.04'/%3E%3Crect x='200' y='158' width='68' height='28' rx='3' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Ccircle cx='270' cy='278' r='18' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Ccircle cx='270' cy='278' r='11' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.04'/%3E%3Ccircle cx='270' cy='278' r='4' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.05'/%3E%3Ccircle cx='270' cy='278' r='1.5' fill='%2300D4FF' opacity='.2'/%3E%3Crect x='120' y='28' width='52' height='34' rx='3' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Crect x='238' y='18' width='58' height='28' rx='4' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.04'/%3E%3Crect x='18' y='258' width='22' height='44' rx='2' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.03'/%3E%3Crect x='44' y='258' width='22' height='44' rx='2' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.03'/%3E%3C/svg%3E"); --circuit-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpath d='M0 200h80v40h60M200 0v80h-40v60M400 200h-80v40h-60M200 400v-80h40v-60' stroke='%2300D4FF' stroke-width='.6' fill='none' opacity='.08'/%3E%3Ccircle cx='200' cy='200' r='4' fill='%2300D4FF' opacity='.06'/%3E%3Ccircle cx='80' cy='240' r='2.5' fill='%2300D4FF' opacity='.05'/%3E%3Ccircle cx='320' cy='240' r='2.5' fill='%2300D4FF' opacity='.05'/%3E%3Ccircle cx='160' cy='80' r='2.5' fill='%2300D4FF' opacity='.05'/%3E%3Ccircle cx='240' cy='320' r='2.5' fill='%2300D4FF' opacity='.05'/%3E%3C/svg%3E"); --dots-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1' fill='%2300D4FF' opacity='.06'/%3E%3C/svg%3E"); --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z' fill='none' stroke='%2300D4FF' stroke-width='.5' opacity='.04'/%3E%3Cpath d='M28 34L56 50v32L28 98 0 82V50z' fill='none' stroke='%2300D4FF' stroke-width='.5' opacity='.04'/%3E%3C/svg%3E"); } /* Circuit pattern overlay utility */ .has-circuit::before { content: ''; position: absolute; inset: 0; background-image: var(--circuit-pattern); background-size: 400px 400px; pointer-events: none; z-index: 0; } .has-dots::before { content: ''; position: absolute; inset: 0; background-image: var(--dots-pattern); background-size: 24px 24px; pointer-events: none; z-index: 0; } .has-hex::before { content: ''; position: absolute; inset: 0; background-image: var(--hex-pattern); background-size: 56px 100px; pointer-events: none; z-index: 0; } /* ── Menu slide-down animation ── */ @keyframes menuSlideIn { from { opacity: 0; transform: translateY(-24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes menuSlideOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-16px) scale(.98); } } /* ================================================================= RESPONSIVE ================================================================= */ @media(max-width:1100px){ .logo-card,.client-card { flex:0 0 175px; height:108px; } } @media(max-width:1024px){ #primary-menu { display:none; } #primary-menu.open { display:flex; flex-direction:column; align-items:stretch; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; background:rgba(7,23,43,.98); padding:1rem 1.25rem 2.5rem; gap:.25rem; border-top:1px solid rgba(255,255,255,.08); z-index:999; overflow-y:auto; overflow-x:hidden; animation: menuSlideIn .35s cubic-bezier(.16,1,.3,1) forwards; } #primary-menu.closing { display:flex; animation: menuSlideOut .25s ease forwards; } #primary-menu.open li a { padding:.78rem 1rem; font-size:1rem; min-height:48px; border-radius:var(--r-md); } #primary-menu.open .sub-menu { position:static; display:none; background:rgba(255,255,255,.04); border:none; border-radius:var(--r-md); margin:.25rem 0 .25rem 1rem; } #primary-menu.open .menu-item-has-children.open > .sub-menu { display:block; } .menu-toggle { display:flex; } .nav-phone { display:none; } .hero { min-height:auto; padding:4rem 0 3.5rem; } .hero-panel { margin-top:2rem; } .hero h1 { font-size:clamp(2rem,6vw,3rem); } .about-image-col .animate { min-height:320px; } .about-image-wrap { min-height:320px; } .about-chip { display:none; } .process-grid-lg .proc-card { min-height:172px; padding:1.5rem .9rem 1.25rem; } .process-grid-lg .proc-icon { width:54px; height:54px; font-size:1.4rem; } .process-grid-lg .proc-label { font-size:.88rem; } .logo-card,.client-card { flex:0 0 162px; height:100px; } .btn-row { flex-wrap:wrap; gap:.75rem; } .ind-cta { flex-direction:column; text-align:center; gap:1.25rem; } .contact-info-col { order:2; } .contact-form-card { order:1; } } @media(max-width:768px){ .hero h1 { font-size:clamp(1.85rem,5vw,2.65rem); } .nav-cta span { display:none; } .nav-cta { padding:.5rem .9rem; } } @media(max-width:640px){ body { width: 100%; } .container, .section, .section-alt, .section-dark, .hero { width: 100%; overflow-x: hidden; } img, video, iframe, embed, object { max-width: 100% !important; height: auto; } h2 { font-size:1.5rem; } h3 { font-size:1rem; } h4 { font-size:.92rem; } p { font-size:.88rem; } .section { padding:2.75rem 0; } .sec-title { font-size:1.5rem; } .sec-sub { font-size:.9rem; } .hero { padding:3rem 0; } .hero h1 { font-size:clamp(1.75rem,8vw,2.5rem); } .hero-desc { font-size:.95rem; } .hero-btns { flex-direction:column; } .hero-btns .btn { width:100%; justify-content:center; } .hero-stat .num { font-size:1.5rem; } .hero-stat .lbl { font-size:.6rem; } .stat-num { font-size:1.5rem; } .stat-lbl { font-size:.6rem; } .about-chip { display:none; } .about-stats { gap:.65rem; } .astat { padding:1rem .75rem; gap:.65rem; } .astat-icon { width:38px; height:38px; font-size:1.05rem; } .astat-num { font-size:1.25rem; } .astat-lbl { font-size:.62rem; } .svc-card { padding:1.35rem; } .svc-icon { width:44px; height:44px; font-size:1.3rem; margin-bottom:.85rem; } .svc-card h3 { font-size:.95rem; } .svc-card p { font-size:.82rem; } .whyus-card { padding:1.15rem; gap:.85rem; } .whyus-icon { width:40px; height:40px; font-size:1.1rem; } .whyus-card h4 { font-size:.92rem; } .whyus-card p { font-size:.82rem; } .hww-card { padding:1.25rem 1rem; } .hww-icon { font-size:1.3rem; margin-bottom:.5rem; } .hww-card h3 { font-size:.95rem; } .hww-card p { font-size:.82rem; } .services-grid { gap:1rem; } .whyus-grid { gap:.85rem; } .hww-grid { gap:1rem; } .qa-grid { gap:1rem; } .sw-grid { gap:.75rem; } .sw-card { padding:.85rem; gap:.65rem; } .sw-icon { width:38px; height:38px; font-size:1.1rem; } .sw-card h4 { font-size:.88rem; } .sw-card p { font-size:.78rem; } .qa-card { padding:1.25rem; gap:.85rem; } .qa-icon { width:44px; height:44px; font-size:1.25rem; } .qa-card h3 { font-size:.95rem; } .qa-card p { font-size:.82rem; } .std-card { padding:1.15rem; } .std-card h4 { font-size:.9rem; } .team-photo { height:180px; } .team-front-body { padding:.85rem 1rem 1rem; } .team-front-body h3 { font-size:.92rem; } .team-back-body { padding:1rem; gap:.5rem; } .team-back-bio { font-size:.78rem; } .team-exp-badge { font-size:.68rem; padding:.3rem .7rem; } .vm-card { padding:1.25rem; gap:.85rem; } .vm-icon { width:44px; height:44px; font-size:1.2rem; } .vm-card h3 { font-size:.95rem; } .process-grid { gap:.75rem; } .process-grid-lg .proc-card { min-height:140px; padding:1rem .6rem .85rem; gap:.5rem; } .process-grid-lg .proc-icon { width:42px; height:42px; font-size:1.15rem; } .process-grid-lg .proc-num { font-size:.72rem; } .process-grid-lg .proc-label { font-size:.78rem; } .ind-grid { gap:.5rem; } .ind-chip { padding:1rem .5rem; } .ind-icon { font-size:1.5rem; } .ind-name { font-size:.72rem; } .metrics-grid { gap:.75rem; } .metric-card { padding:1.15rem; } .metric-icon { font-size:1.25rem; } .metric-num { font-size:1.6rem; } .metric-lbl { font-size:.6rem; } .cyber-content { padding:clamp(1.5rem,4vw,2.5rem) .85rem; } .cyber-card { padding:1.25rem; } .cyber-cards { gap:1rem; } .logo-card,.client-card { flex:0 0 146px; height:95px; padding:.65rem; } .logo-card-img,.client-card-img { padding:.6rem .85rem; } .contact-info-col,.contact-form-card { order:unset; } .contact-form-card { padding:1.5rem; } .footer-bottom-inner { flex-direction:column; text-align:center; } .btn-row { flex-direction:column; align-items:stretch; } .btn-row .btn,.btn-row .btn-outline-dark { width:100%; justify-content:center; } .ind-cta .btn { width:auto; } .form-group input,.form-group select,.form-group textarea { font-size:16px; } } @media(max-width:480px){ :root { --nav-h:64px; } .container, .section, .section-alt, .section-dark, .hero { width: 100%; overflow-x: hidden; } img, video, iframe, embed, object { max-width: 100% !important; height: auto; } h2 { font-size:1.3rem; } h3 { font-size:.92rem; } h4 { font-size:.85rem; } p { font-size:.83rem; } .hero h1 { font-size:1.65rem; } .hero-desc { font-size:.92rem; } .sec-title { font-size:1.3rem; } .sec-sub { font-size:.85rem; } .section { padding:2.25rem 0; } .stat-num { font-size:1.4rem; } .stat-lbl { font-size:.6rem; } .logo-text span { display:none; } .logo-text { font-size:.9rem; } .svc-card { padding:1.1rem; } .svc-icon { width:38px; height:38px; font-size:1.15rem; margin-bottom:.65rem; } .svc-card h3 { font-size:.88rem; } .svc-card p { font-size:.78rem; } .whyus-card { padding:.95rem; gap:.7rem; } .whyus-icon { width:36px; height:36px; font-size:1rem; } .whyus-card h4 { font-size:.85rem; } .whyus-card p { font-size:.78rem; } .hww-card { padding:1rem .85rem; } .hww-icon { font-size:1.15rem; } .hww-card h3 { font-size:.88rem; } .hww-card p { font-size:.78rem; } .sw-card { padding:.7rem; gap:.55rem; } .sw-icon { width:34px; height:34px; font-size:1rem; } .sw-card h4 { font-size:.82rem; } .sw-card p { font-size:.75rem; } .qa-card { padding:1rem; gap:.7rem; } .qa-icon { width:38px; height:38px; font-size:1.1rem; } .qa-card h3 { font-size:.88rem; } .qa-card p { font-size:.78rem; } .std-card { padding:1rem; } .std-card h4 { font-size:.85rem; } .team-photo { height:150px; } .team-exp-front { font-size:.64rem; } .team-front-body { padding:.7rem .85rem .85rem; } .team-front-body h3 { font-size:.85rem; } .team-back-body { padding:.75rem; gap:.35rem; } .team-exp-badge { font-size:.64rem; padding:.25rem .6rem; } .team-back-bio { font-size:.74rem; } .team-back-social { gap:.4rem; } .tsocial { width:32px; height:32px; font-size:.78rem; } .vm-card { padding:1rem; gap:.7rem; } .vm-icon { width:38px; height:38px; font-size:1rem; } .vm-card h3 { font-size:.88rem; } .process-grid-lg .proc-card { min-height:120px; padding:.75rem .5rem .65rem; gap:.4rem; } .process-grid-lg .proc-icon { width:36px; height:36px; font-size:1rem; } .process-grid-lg .proc-num { font-size:.65rem; } .process-grid-lg .proc-label { font-size:.7rem; } .ind-chip { padding:.8rem .4rem; } .ind-icon { font-size:1.3rem; } .ind-name { font-size:.68rem; } .metric-card { padding:.85rem; } .metric-icon { font-size:1.1rem; } .metric-num { font-size:1.35rem; } .metric-lbl { font-size:.55rem; } .about-stats { gap:.5rem; } .astat { padding:.7rem .6rem; gap:.5rem; } .astat-icon { width:34px; height:34px; font-size:.95rem; } .astat-num { font-size:1.1rem; } .astat-lbl { font-size:.6rem; } .logo-card,.client-card { flex:0 0 120px; height:78px; padding:.5rem; } .logo-card-img,.client-card-img { padding:.5rem .7rem; } .cyber-card { padding:1rem; } .about-image-col .animate, .about-image-wrap { min-height:200px; } .about-badge { padding:.55rem .7rem; gap:.4rem; } .badge-num { font-size:1.05rem; } .badge-icon { font-size:1.1rem; } .form-submit { font-size:.82rem; padding:.65rem; } .btn { font-size:.78rem; padding:.5rem 1.1rem; min-height:38px; } }