/* Icon Software — landing page only (extracted from index.html). See /README.md for DRY + SSG notes. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Base :root tokens = dark UI palette. Default visitor theme is LIGHT via (head script + localStorage icon-theme). */ :root { --ink: #060d0f; --ink-soft: #0d1a1e; --ink-card: #0f1f24; --paper: #eef4f5; --text-soft: rgba(238,244,245,0.48); --text-muted: rgba(238,244,245,0.52); --teal: #1d8fa3; --teal-light: #29afc7; --teal-pale: #b8e4ed; --green: #7ec832; --green-light: #9ee04e; --gold: #c8a96e; --line: rgba(29,143,163,0.18); --line-soft: rgba(29,143,163,0.08); --muted: #6a9aa3; --nav-bg: rgba(6,13,15,0.75); --card-hover-bg: rgba(29,143,163,0.055); --canvas-base: #060d0f; --serif: 'Playfair Display', serif; --mono: 'DM Mono', monospace; --sans: 'Plus Jakarta Sans', sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ── LIGHT MODE ── */ :root.light { --ink: #f0f7f8; --ink-soft: #e2eef0; --ink-card: #eaf4f6; --paper: #0d2428; --text-soft: rgba(13,36,40,0.72); --text-muted: rgba(13,36,40,0.58); --teal: #0e7a8f; --teal-light: #1d8fa3; --teal-pale: #0e6070; --green: #5fa020; --green-light: #7ec832; --line: rgba(14,122,143,0.2); --line-soft: rgba(14,122,143,0.1); --muted: #2e7a85; --nav-bg: rgba(240,247,248,0.82); --card-hover-bg: rgba(14,122,143,0.06); --canvas-base: #f0f7f8; } html { scroll-behavior: smooth; overflow-x: hidden; } ::-webkit-scrollbar { width: 10px; height: 10px; background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--teal-light); } ::-webkit-scrollbar-track { background: var(--ink); } body { background: var(--ink); color: var(--paper); font-family: var(--sans); overflow-x: hidden; opacity: 0; transition: opacity 0.55s ease, background 0.5s ease, color 0.5s ease; } body.loaded { opacity: 1; } body.no-custom-cursor .cursor, body.no-custom-cursor .cursor-ring { display: none !important; } /* Keyboard focus (A11y) — preserve visible focus for keyboard users */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; } /* ── THEME TRANSITION ── */ *, section, nav, footer, .service-card, .process-step, .stat, .why-highlight, .form-field, .contact-section, .why-section, .services-section, .process-section { transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease; } .theme-toggle { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); z-index: 9996; width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer !important; display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 24px rgba(0,0,0,0.18); } .theme-toggle:hover { border-color: var(--teal); transform: scale(1.1) rotate(15deg); box-shadow: 0 8px 32px rgba(29,143,163,0.25); } .theme-toggle svg { width: 18px; height: 18px; transition: opacity 0.3s, transform 0.4s; } .theme-toggle .icon-sun { position: absolute; color: var(--teal); } .theme-toggle .icon-moon { position: absolute; color: var(--teal); } :root:not(.light) .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } :root:not(.light) .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } :root.light .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } :root.light .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } /* Light mode overrides for hardcoded rgba colors */ :root.light .hero-sub { color: rgba(13,36,40,0.82); } :root.light .service-desc, :root.light .step-desc, :root.light .principle-desc, :root.light .footer-brand { color: var(--text-soft); } :root.light .nav-links a { color: rgba(13,36,40,0.7); } :root.light .nav-links a:hover { color: var(--paper); } :root.light .btn-ghost { border-color: rgba(13,36,40,0.22); color: rgba(13,36,40,0.6); } :root.light .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } :root.light .stat-number { color: var(--teal-light); } :root.light .stat-label { color: var(--muted); } :root.light .stat { border-right-color: var(--line); } :root.light .contact-item-text, :root.light .contact-item-text a { color: var(--text-soft); } :root.light .nda-row label { color: var(--muted); } :root.light .footer-copy { color: var(--text-muted); } :root.light .footer-links a { color: var(--text-muted); } :root.light .section-number { color: rgba(14,122,143,0.1); } :root.light .why-highlight { background: var(--ink-soft); } :root.light .contact-bg-text { color: rgba(14,122,143,0.06); } :root.light .form-field { background: var(--ink-card); } :root.light .form-field.full { background: var(--ink-card); } :root.light .form-field input, :root.light .form-field select, :root.light .form-field textarea { color: var(--paper); } :root.light .process-step, :root.light .service-card { background: var(--ink-card); } :root.light nav.scrolled { background: var(--nav-bg); } :root.light .hero-orb { border-color: rgba(14,122,143,0.15); } :root.light .hero-bg::before { background: radial-gradient(ellipse 100% 34% at 50% 106%, rgba(240,247,248,0.22) 0%, rgba(240,247,248,0) 60%); } :root.light .hero-grid { background-image: linear-gradient(rgba(14,122,143,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(14,122,143,0.07) 1px, transparent 1px); } :root.light .services-intro { color: var(--text-soft); } :root.light .services-tab { color: var(--text-soft); border-color: var(--line); } :root.light .services-tab:hover, :root.light .services-tab.active { color: var(--teal); border-color: var(--teal); } :root.light .services-not-sure { border-color: var(--line); background: rgba(14,122,143,0.04); } :root.light .services-not-sure p { color: var(--text-soft); } :root.light .service-expand { border-top-color: var(--line); } :root.light .service-expand ul { color: var(--text-soft); } :root.light .pill { color: rgba(13,36,40,0.55); border-color: rgba(14,122,143,0.22); background: rgba(14,122,143,0.06); } :root.light .pill:hover { color: var(--teal); border-color: var(--teal); background: rgba(14,122,143,0.1); } :root.light .theme-toggle { border-color: rgba(14,122,143,0.25); background: rgba(240,247,248,0.9); box-shadow: 0 4px 20px rgba(14,122,143,0.12); } :root.light .theme-toggle:hover { border-color: var(--teal); box-shadow: 0 8px 32px rgba(14,122,143,0.2); } /* GRAIN OVERLAY */ .grain { position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 9990; } :root.light .grain { opacity: 0; } /* CUSTOM CURSOR — position via translate3d in home.js (compositor-friendly; avoid left/top) */ .cursor { position: fixed; left: 0; top: 0; width: 8px; height: 8px; background: var(--green); border-radius: 50%; pointer-events: none; z-index: 9999; will-change: transform; transition: background 0.2s; } .cursor.hov { background: var(--teal); } .cursor-ring { position: fixed; left: 0; top: 0; width: 38px; height: 38px; border: 1px solid rgba(29,143,163,0.45); border-radius: 50%; pointer-events: none; z-index: 9998; will-change: transform; transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s; } .cursor-ring.hov { width: 66px; height: 66px; border-color: rgba(29,143,163,0.65); } /* NAV */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 28px 64px; transition: padding 0.4s var(--ease-out), background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); padding: 16px 64px; border-bottom: 1px solid var(--line); } .nav-logo { text-decoration: none; display: flex; align-items: center; } .nav-logo-svg { height: 36px; width: auto; overflow: visible; transition: opacity 0.3s; } #logoDot { transform-origin: 5.6px 5.6px; transform-box: fill-box; will-change: transform, filter, opacity; animation: dotCompile 1.1s var(--ease-out) forwards, dotFloat 3.2s ease-in-out infinite 1.1s, dotGlow 2.4s ease-in-out infinite 1.1s; } @keyframes dotCompile { 0% { opacity: 0; transform: scale(0) translateY(-6px); filter: drop-shadow(0 0 0px rgba(156,203,148,0)); } 15% { opacity: 0.9; transform: scale(1.6) translateY(-6px); filter: drop-shadow(0 0 8px rgba(29,143,163,0.9)); } 22% { opacity: 0; transform: scale(0.2) translateY(-3px); filter: drop-shadow(0 0 0px rgba(156,203,148,0)); } 35% { opacity: 1; transform: scale(1.4) translateY(2px); filter: drop-shadow(0 0 12px rgba(156,203,148,1)); } 45% { opacity: 0.4; transform: scale(0.8) translateY(0); filter: drop-shadow(0 0 3px rgba(29,143,163,0.5)); } 58% { opacity: 1; transform: scale(1.15) translateY(-1px); filter: drop-shadow(0 0 6px rgba(156,203,148,0.8)); } 72% { opacity: 1; transform: scale(0.95) translateY(0.5px); filter: drop-shadow(0 0 2px rgba(156,203,148,0.3)); } 85% { opacity: 1; transform: scale(1.05) translateY(0); filter: drop-shadow(0 0 4px rgba(156,203,148,0.6)); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: drop-shadow(0 0 0px rgba(156,203,148,0)); } } @keyframes dotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes dotGlow { 0%, 100% { filter: drop-shadow(0 0 0px rgba(156,203,148,0)); } 50% { filter: drop-shadow(0 0 4px rgba(156,203,148,0.75)); } } @media (prefers-reduced-motion: reduce) { #logoDot { animation: none; opacity: 1; } } .nav-logo:hover .nav-logo-svg { opacity: 0.75; } :root.light .nav-logo-svg { filter: brightness(0.92); } .nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-links > li { display: flex; align-items: center; flex-shrink: 0; } .nav-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238,244,245,0.5); text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.2s; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--teal); transition: width 0.3s var(--ease-out); } .nav-links a:hover { color: var(--paper); } .nav-links a:hover::after { width: 100%; } .nav-links a.active { color: var(--teal); } .nav-links a.active::after { width: 100%; } :root.light .nav-links a.active { color: #0a6070; } :root.light nav.scrolled { background: rgba(240,247,248,0.95); } /* ── Nav: services mega-menu ── */ .nav-item--dropdown { position: relative; align-items: center; } .nav-item__row { display: inline-flex; align-items: center; justify-content: flex-start; gap: 2px; min-height: 1.25em; } .nav-dropdown-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: transparent; color: rgba(238,244,245,0.55); cursor: pointer; border-radius: 8px; transition: color 0.2s, background 0.2s; } .nav-dropdown-toggle:hover, .nav-dropdown-toggle:focus-visible { color: var(--paper); background: rgba(29,143,163,0.12); outline: none; } :root.light .nav-dropdown-toggle { color: rgba(13,36,40,0.55); } :root.light .nav-dropdown-toggle:hover, :root.light .nav-dropdown-toggle:focus-visible { color: var(--paper); } .nav-chevron { transition: transform 0.25s var(--ease-out); } .nav-item--dropdown.is-open .nav-chevron { transform: rotate(180deg); } .nav-dropdown { display: none; } .nav-dropdown__hub { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); text-decoration: none; padding: 10px 0 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; } .nav-dropdown__hub:hover { color: var(--paper); } .nav-dropdown__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .nav-dropdown__label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(238,244,245,0.35); margin-bottom: 10px; } :root.light .nav-dropdown__label { color: rgba(13,36,40,0.45); } .nav-dropdown__col a { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(238,244,245,0.75); text-decoration: none; padding: 8px 0; border: none; position: relative; transition: color 0.15s; } .nav-dropdown__col a::after { display: none; } .nav-dropdown__col a:hover { color: var(--paper); } :root.light .nav-dropdown__col a { color: rgba(13,36,40,0.78); } :root.light .nav-dropdown__col a:hover { color: var(--paper); } @media (min-width: 901px) { .nav-dropdown-toggle { display: none !important; } /* Invisible bridge: keeps hover without stretching the nav row */ .nav-item--dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; z-index: 398; } .nav-dropdown { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0; min-width: min(720px, 94vw); max-height: min(80vh, 560px); overflow-y: auto; padding: 22px 26px 24px; background: var(--nav-bg); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 28px 60px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s var(--ease-out), visibility 0.22s; z-index: 400; } :root.light .nav-dropdown { background: rgba(240,247,248,0.98); box-shadow: 0 24px 48px rgba(13,36,40,0.12); } .nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } .nav-dropdown__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; } .nav-dropdown__hub { margin-bottom: 14px; padding-top: 0; } } @media (max-width: 900px) { .nav-dropdown-toggle { display: flex; } .nav-item--dropdown { width: 100%; max-width: 280px; } .nav-item__row { width: 100%; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--line-soft); } .nav-item--dropdown .nav-link--top { flex: 1; padding: 18px 0; min-height: 52px; display: flex; align-items: center; border-bottom: none; } .nav-dropdown { display: none; width: 100%; padding: 14px 14px 18px; margin: 6px 0 12px; max-height: min(58vh, 480px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 14px; background: rgba(8, 18, 22, 0.78); backdrop-filter: blur(28px) saturate(155%); -webkit-backdrop-filter: blur(28px) saturate(155%); border: 1px solid rgba(29, 143, 163, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 44px rgba(0, 0, 0, 0.4); } :root.light .nav-dropdown { background: rgba(255, 255, 255, 0.92); border-color: rgba(14, 122, 143, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 36px rgba(13, 36, 40, 0.1); } .nav-item--dropdown.is-open .nav-dropdown { display: block; } .nav-dropdown__hub { padding: 12px 0; margin-bottom: 8px; font-size: 11px; } .nav-dropdown__col a { padding: 10px 0; font-size: 14px; } } .nav-hamburger { display: none; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; transition: transform 0.3s; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--paper); opacity: 0.8; transition: transform 0.3s var(--ease-out), opacity 0.3s; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .nav-cta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 11px 28px; border: 1px solid var(--teal); color: var(--teal); background: transparent; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; transition: color 0.25s; } .nav-cta::before { content: ''; position: absolute; inset: 0; background: var(--teal); transform: translateX(-101%); transition: transform 0.3s var(--ease-out); } .nav-cta:hover { color: var(--ink); } .nav-cta:hover::before { transform: translateX(0); } .nav-cta span { position: relative; z-index: 1; } /* ── I18N: show one language block per html[lang] ── */ [data-lang="en"], [data-lang="ar"] { display: none !important; } html[lang="en"] [data-lang="en"], html[lang="ar"] [data-lang="ar"] { display: revert !important; } .hero-headline .hero-headline__lang { display: none !important; } html[lang="en"] .hero-headline .hero-headline__lang[data-lang="en"], html[lang="ar"] .hero-headline .hero-headline__lang[data-lang="ar"] { display: block !important; } .hero-sub [data-lang] { display: none !important; } html[lang="en"] .hero-sub [data-lang="en"], html[lang="ar"] .hero-sub [data-lang="ar"] { display: block !important; } .hero-actions .btn-primary [data-lang], .hero-actions .btn-ghost [data-lang] { display: none !important; } html[lang="en"] .hero-actions .btn-primary [data-lang="en"], html[lang="en"] .hero-actions .btn-ghost [data-lang="en"], html[lang="ar"] .hero-actions .btn-primary [data-lang="ar"], html[lang="ar"] .hero-actions .btn-ghost [data-lang="ar"] { display: inline !important; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(6, 13, 15, 0.35); } :root.light .lang-switch { background: rgba(255, 255, 255, 0.55); } .lang-switch__btn { min-width: 40px; padding: 6px 10px; border: none; border-radius: 999px; background: transparent; color: var(--paper); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, color 0.2s; } .lang-switch__btn:hover { color: var(--teal-light); } .lang-switch__btn.active { background: var(--teal); color: var(--ink); } :root.light .lang-switch__btn.active { color: #fff; } html[lang="ar"] .lang-switch { flex-direction: row-reverse; } html[lang="ar"] body { font-family: "Tajawal", var(--sans); line-height: 1.65; } html[lang="ar"] .hero-headline, html[lang="ar"] .section-title { font-family: "Tajawal", var(--serif); line-height: 1.25; } html[lang="ar"] .hero-headline em { font-style: normal; color: var(--teal-light); } html[lang="ar"] .hero-svc-arrow { display: inline-block; transform: scaleX(-1); } .contact-section .section-title [data-lang] { display: none !important; } html[lang="en"] .contact-section .section-title [data-lang="en"], html[lang="ar"] .contact-section .section-title [data-lang="ar"] { display: block !important; } .services-not-sure p [data-lang], .contact-intro [data-lang], .why-lead [data-lang] { display: none !important; } html[lang="en"] .services-not-sure p [data-lang="en"], html[lang="ar"] .services-not-sure p [data-lang="ar"], html[lang="en"] .contact-intro [data-lang="en"], html[lang="ar"] .contact-intro [data-lang="ar"], html[lang="en"] .why-lead [data-lang="en"], html[lang="ar"] .why-lead [data-lang="ar"] { display: block !important; } .contact-item-text [data-lang] { display: none !important; } html[lang="en"] .contact-item-text [data-lang="en"], html[lang="ar"] .contact-item-text [data-lang="ar"] { display: block !important; } .service-desc [data-lang], .principle-desc [data-lang], .step-desc [data-lang], .case-desc [data-lang] { display: none !important; } html[lang="en"] .service-desc [data-lang="en"], html[lang="ar"] .service-desc [data-lang="ar"], html[lang="en"] .principle-desc [data-lang="en"], html[lang="ar"] .principle-desc [data-lang="ar"], html[lang="en"] .step-desc [data-lang="en"], html[lang="ar"] .step-desc [data-lang="ar"], html[lang="en"] .case-desc [data-lang="en"], html[lang="ar"] .case-desc [data-lang="ar"] { display: block !important; } /* HERO */ .hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; position: relative; overflow: hidden; padding: 0 64px; } #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 40% at 50% 105%, var(--ink) 0%, transparent 60%); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(29,143,163,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(29,143,163,0.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 100% 100% at 60% 40%, black 5%, transparent 75%); } .hero-orb { display: none; } .hero-orb-ring { display: none; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 1; } } /* Hero panel — right column */ .hero-panel-wrap { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; padding: 52px 32px 52px 8px; position: relative; z-index: 3; } .hero-panel { width: 100%; max-width: 380px; border: 1px solid var(--line); background: rgba(6,13,15,0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; overflow: hidden; opacity: 0; animation: fadeUp 0.7s var(--ease-out) forwards 0.45s; position: relative; } .hero-panel::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--green) 75%, transparent 100%); opacity: 0; transform: translateY(0); pointer-events: none; z-index: 2; animation: panelScanLine 0.6s var(--ease-out) forwards 1s; } :root.light .hero-panel { background: rgba(234,244,246,0.62); border-color: var(--line); } .hero-panel-header { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; } .hero-panel-header::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); transform: scaleX(0); transform-origin: left; opacity: 0; animation: panelLoadBar 0.4s var(--ease-out) forwards 0.55s; } .hero-panel-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); white-space: nowrap; width: 0; overflow: hidden; animation: panelTypewriter 0.75s steps(14, end) forwards 0.6s; } .hero-panel-live { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; color: var(--text-muted); letter-spacing: 0.08em; opacity: 0; transform: translateX(6px); animation: panelLiveIn 0.35s var(--ease-out) forwards 1.05s; } .hero-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(126,200,50,0.4);}50%{opacity:0.8;box-shadow:0 0 0 5px rgba(126,200,50,0);} } .hero-service-row { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 14px; cursor: pointer; text-decoration: none; color: inherit; transition: background 0.2s; position: relative; overflow: hidden; opacity: 0; transform: translateX(40px); filter: blur(6px); will-change: transform, filter, opacity; } .hero-panel .hero-service-row:nth-of-type(1) { --row-delay: 1.12s; } .hero-panel .hero-service-row:nth-of-type(2) { --row-delay: 1.18s; } .hero-panel .hero-service-row:nth-of-type(3) { --row-delay: 1.24s; } .hero-panel .hero-service-row:nth-of-type(4) { --row-delay: 1.30s; } .hero-panel .hero-service-row:nth-of-type(5) { --row-delay: 1.36s; } .hero-panel .hero-service-row:nth-of-type(6) { --row-delay: 1.42s; } .hero-panel .hero-service-row:nth-of-type(7) { --row-delay: 1.48s; } .hero-panel .hero-service-row { animation: heroRowMaterialize 0.55s var(--ease-out) forwards; animation-delay: var(--row-delay, 1.12s); } .hero-service-row::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:linear-gradient(90deg,var(--teal),var(--green)); transition:width 0.35s; } .hero-service-row:hover { background: rgba(29,143,163,0.05); } .hero-service-row:hover::after { width: 100%; } .hero-service-row:last-of-type { border-bottom: none; } :root.light .hero-service-row:hover { background: rgba(14,122,143,0.06); } .hero-service-row:focus-visible { outline: 2px solid var(--teal-light); outline-offset: -2px; background: rgba(29,143,163,0.08); } .hero-svc-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(29,143,163,0.2); background: rgba(29,143,163,0.06); transition: all 0.25s; } .hero-service-row:hover .hero-svc-icon { border-color: var(--teal); background: rgba(29,143,163,0.14); } :root.light .hero-svc-icon { border-color: rgba(14,122,143,0.25); background: rgba(14,122,143,0.04); } :root.light .hero-service-row:hover .hero-svc-icon { border-color: var(--teal); background: rgba(14,122,143,0.1); } .hero-svc-icon svg { width: 14px; height: 14px; stroke: var(--text-muted); transition: stroke 0.25s; } .hero-service-row:hover .hero-svc-icon svg { stroke: var(--teal); } .hero-svc-text { flex: 1; min-width: 0; } .hero-svc-name { font-size: 12px; font-weight: 500; color: var(--paper); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-svc-tags { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-svc-arrow { font-family: var(--mono); font-size: 10px; color: transparent; transition: color 0.2s, transform 0.2s; flex-shrink: 0; } .hero-service-row:hover .hero-svc-arrow { color: var(--teal); transform: translateX(2px); } .hero-panel-footer { padding: 14px 18px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; } .hero-resp-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-muted); } .hero-resp-val { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--green); } @keyframes heroRowMaterialize { to { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes panelTypewriter { from { width: 0; } to { width: 16ch; } } @keyframes panelLiveIn { to { opacity: 1; transform: translateX(0); } } @keyframes panelLoadBar { 0% { opacity: 1; transform: scaleX(0); } 85% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } } @keyframes panelScanLine { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.75; } 100% { opacity: 0; transform: translateY(100%); } } .hero-content { display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 60px; max-width: 560px; position: relative; z-index: 3; grid-column: 1; grid-row: 1; } .hero-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin-bottom: 38px; display: flex; align-items: center; gap: 16px; opacity: 0; animation: fadeUp 0.7s var(--ease-out) forwards 0.3s; } .hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); } .hero-headline { font-family: var(--serif); font-size: clamp(48px, 7.5vw, 100px); font-weight: 400; line-height: 1.1; font-style: italic; letter-spacing: -0.03em; margin-bottom: 32px; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.45s; } .hero-headline em { font-style: normal; font-weight: 600; background: linear-gradient(125deg, var(--teal-light) 0%, var(--teal-pale) 55%, var(--green-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: clamp(14px,1.5vw,16px); line-height: 1.75; color: var(--text-soft); max-width: 500px; margin-bottom: 54px; letter-spacing: -0.01em; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.6s; } .hero-actions { display: flex; gap: 18px; align-items: center; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.75s; } /* BUTTONS */ .btn-primary { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 44px; background: var(--teal); color: var(--ink); border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.25s, box-shadow 0.25s, transform 0.15s; font-weight: 500; position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 55%); opacity: 0; transition: opacity 0.3s; } .btn-primary:hover { background: var(--teal-light); box-shadow: 0 16px 48px rgba(29,143,163,0.35); transform: translateY(-2px); } .btn-primary:hover::after { opacity: 1; } .btn-primary:active { transform: scale(0.97); } .btn-ghost { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 44px; border: 1px solid rgba(238,244,245,0.2); color: rgba(238,244,245,0.55); cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.25s; } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .btn-ghost:active { transform: scale(0.97); } /* PILLS — horizontal infinite ticker */ .hero-pills { overflow: hidden; padding: 32px 0 64px; position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 2; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.9s; } .hero-pills-track { display: flex; gap: 10px; width: max-content; animation: pillTicker 40s linear infinite; } .hero-pills-set { display: flex; gap: 10px; flex-shrink: 0; } .hero-pills-track:hover { animation-play-state: paused; } .hero-pills-track.is-paused { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hero-pills-track { animation: none; } } @keyframes pillTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hero-pills .pill { flex-shrink: 0; } .pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 18px; border: 1px solid rgba(29,143,163,0.2); color: rgba(238,244,245,0.42); background: rgba(29,143,163,0.04); transition: all 0.2s; cursor: default; } .pill:hover { border-color: var(--teal); color: var(--teal); background: rgba(29,143,163,0.08); } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* STATS */ .stats { background: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; overflow: hidden; } .stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, var(--green) 75%, transparent 100%); opacity: 0.55; } .stat { padding: 52px 44px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; transition: background 0.3s; position: relative; overflow: hidden; } .stat::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--green)); transition: width 0.4s var(--ease-out); } .stat:hover::after { width: 100%; } .stat:last-child { border-right: none; } .stat:hover { background: rgba(29,143,163,0.04); } .stat-number { font-family: var(--serif); font-size: 52px; font-weight: 600; color: var(--teal-light); line-height: 1; letter-spacing: -0.03em; } .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } /* SECTION SHARED */ section { position: relative; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 72px; padding-bottom: 36px; border-bottom: 1px solid var(--line); } .section-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .section-tag::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); } .section-title { font-family: var(--serif); font-size: clamp(32px,4vw,54px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; } .section-title em { font-style: italic; background: linear-gradient(130deg, var(--teal-light), var(--teal-pale)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-number { font-family: var(--mono); font-size: 90px; font-weight: 300; color: rgba(29,143,163,0.07); line-height: 1; letter-spacing: -0.05em; } /* SERVICES BENTO */ .services-section { padding: 128px 64px; background: var(--ink); } .services-intro { font-size: 15px; line-height: 1.85; color: var(--text-soft); max-width: 620px; margin-bottom: 40px; } .services-tabs { display: flex; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; } .services-tab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 24px; border: 1px solid var(--line); background: transparent; color: var(--text-soft); cursor: pointer; transition: all 0.25s var(--ease-out); } .services-tab:hover { border-color: var(--teal); color: var(--teal); } .services-tab.active { background: rgba(29,143,163,0.12); border-color: var(--teal); color: var(--teal); } .services-not-sure { margin-top: 48px; padding: 28px 36px; border: 1px solid var(--line); background: rgba(29,143,163,0.04); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .services-not-sure p { font-size: 14px; color: var(--text-soft); margin: 0; max-width: 420px; line-height: 1.7; } .services-not-sure .services-not-sure-cta { flex-shrink: 0; } .services-main { display: flex; flex-direction: column; } .services-main .services-not-sure { order: 3; margin-top: 48px; } .services-main .services-grid { order: 2; } .services-main .services-tabs { order: 1; margin-bottom: 48px; } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .services-grid.filtered { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: minmax(220px, auto); grid-auto-flow: dense; align-items: stretch; } .services-grid.filtered .service-card:not(.hidden) { display: flex; width: 100%; } .services-grid.filtered .service-card.first-visible { grid-column: span 2; } .services-grid[data-active-filter="build"] .service-card:not(.hidden) { background: linear-gradient(135deg, var(--ink-card) 0%, rgba(29,143,163,0.03) 100%); } .services-grid[data-active-filter="solutions"] .service-card:not(.hidden) { background: linear-gradient(135deg, var(--ink-card) 0%, rgba(126,200,50,0.02) 100%); } .services-grid[data-active-filter="scale"] .service-card:not(.hidden) { background: linear-gradient(135deg, var(--ink-card) 0%, rgba(238,244,245,0.02) 100%); } .services-grid[data-active-filter="sell"] .service-card:not(.hidden) { background: linear-gradient(135deg, var(--ink-card) 0%, rgba(29,143,163,0.04) 100%); } .service-card { background: var(--ink-card); padding: 44px 36px; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; transition: background 0.35s, transform 0.35s var(--ease-out), box-shadow 0.35s, padding 0.4s; } .service-card:focus-visible { outline: 2px solid var(--teal-light); outline-offset: -2px; } .service-card.hidden { display: none !important; } .service-card:nth-child(1) { grid-column: span 2; grid-row: span 2; padding: 56px 52px; } .service-card:nth-child(2) { grid-column: span 2; } .service-card:nth-child(4) { grid-column: span 2; } .service-card[data-dominant="true"] { grid-column: span 2; } .services-grid.filtered .service-card[data-dominant="true"] { grid-column: span 2; } .service-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient( 500px circle at var(--mx,50%) var(--my,50%), rgba(29,143,163,0.07), transparent 40% ); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .service-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } @media (hover: hover) { .service-card:hover::after { opacity: 1; } .service-card:hover { background: rgba(29,143,163,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04); z-index: 2; } .service-card:hover::before { transform: scaleX(1); } } .service-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: rgba(29,143,163,0.38); margin-bottom: 28px; } .service-icon-wrap { width: 44px; height: 44px; margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-start; transition: transform 0.35s var(--ease-out); } @media (hover: hover) { .service-card:hover .service-icon-wrap { transform: scale(1.08); } } .service-icon-wrap svg { width: 26px; height: 26px; color: rgba(238,244,245,0.2); stroke: currentColor; transition: color 0.3s; } @media (hover: hover) { .service-card:hover .service-icon-wrap svg { color: var(--teal); } } .service-card:nth-child(1) .service-icon-wrap svg { width: 32px; height: 32px; } .service-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 12px; letter-spacing: -0.01em; color: var(--paper); min-width: 0; word-break: break-word; } .service-title a { color: inherit; text-decoration: none; } .service-title a:hover { color: var(--teal); } .service-card:nth-child(1) .service-title, .service-card[data-dominant="true"] .service-title { font-size: 24px; font-weight: 600; } .service-card:nth-child(1) .service-title { font-size: 28px; } .service-desc { font-size: 14px; line-height: 1.65; color: var(--text-soft); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; word-break: break-word; } .service-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .service-tech span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; padding: 4px 10px; background: rgba(29,143,163,0.08); color: var(--muted); border: 1px solid rgba(29,143,163,0.15); transition: all 0.2s; } @media (hover: hover) { .service-card:hover .service-tech span { color: var(--teal); border-color: rgba(29,143,163,0.3); } } .service-industries { font-size: 11px; color: var(--muted); margin-top: 12px; font-family: var(--mono); letter-spacing: 0.06em; min-width: 0; word-break: break-word; } .service-outcome { font-size: 12px; color: var(--teal); margin-top: 14px; font-style: italic; line-height: 1.5; padding-left: 32px; border-left: 2px solid rgba(29,143,163,0.4); opacity: 0.9; position: relative; } .service-outcome-icon { position: absolute; left: 0; top: 0.1em; width: 16px; height: 16px; opacity: 0.9; color: var(--teal); } .service-outcome-icon svg { width: 100%; height: 100%; stroke: currentColor; } .service-outcome-body { display: block; } .service-industries [data-lang], .service-outcome-body [data-lang], .service-expand-timeline [data-lang] { display: none !important; } html[lang="en"] .service-industries [data-lang="en"], html[lang="ar"] .service-industries [data-lang="ar"], html[lang="en"] .service-outcome-body [data-lang="en"], html[lang="ar"] .service-outcome-body [data-lang="ar"], html[lang="en"] .service-expand-timeline [data-lang="en"], html[lang="ar"] .service-expand-timeline [data-lang="ar"] { display: block !important; } .service-expand ul li [data-lang] { display: none !important; } html[lang="en"] .service-expand ul li [data-lang="en"], html[lang="ar"] .service-expand ul li [data-lang="ar"] { display: block !important; } .service-modal-expand ul li [data-lang] { display: none !important; } html[lang="en"] .service-modal-expand ul li [data-lang="en"], html[lang="ar"] .service-modal-expand ul li [data-lang="ar"] { display: block !important; } .service-modal-expand .service-expand-timeline [data-lang] { display: none !important; } html[lang="en"] .service-modal-expand .service-expand-timeline [data-lang="en"], html[lang="ar"] .service-modal-expand .service-expand-timeline [data-lang="ar"] { display: block !important; } .service-expand { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s var(--ease-out), opacity 0.35s, margin 0.35s; } .service-expand-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .service-expand ul { list-style: none; padding: 0; margin: 0 0 12px 0; font-size: 14px; color: var(--text-soft); line-height: 1.8; } .service-expand ul li { padding-left: 16px; position: relative; } .service-expand ul li::before { content: '—'; position: absolute; left: 0; color: var(--teal); opacity: 0.6; } .service-expand-timeline { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin-top: 8px; } .service-vendors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; } .service-vendor { background: #ffffff; border: 1px solid rgba(13, 36, 40, 0.12); min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; } .service-vendor img { max-width: 96px; max-height: 28px; width: auto; height: auto; object-fit: contain; } .service-arrow { margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); opacity: 0; transform: translateX(-10px); transition: all 0.3s var(--ease-out); display: flex; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer; } .service-arrow::after { content: '→'; transition: transform 0.25s; } @media (hover: hover) { .service-card:hover .service-arrow { opacity: 1; transform: translateX(0); } } /* SERVICE MODAL (Learn more overlay) */ .service-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; overflow-y: auto; -webkit-overflow-scrolling: touch; } .service-modal.open { opacity: 1; visibility: visible; } .service-modal-backdrop { position: absolute; inset: 0; background: rgba(6,13,15,0.9); backdrop-filter: blur(8px); } .service-modal-content { position: relative; z-index: 1; max-width: 520px; width: 100%; max-height: min(90vh, calc(100vh - 48px)); background: var(--ink-card); border: 1px solid var(--line); padding: 44px 40px; overflow-y: auto; transform: translateY(20px); transition: transform 0.35s var(--ease-out); } .service-modal.open .service-modal-content { transform: translateY(0); } .service-modal-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1; background: none; border: none; color: var(--text-soft); cursor: pointer; transition: color 0.2s; } .service-modal-close:hover { color: var(--paper); } .service-modal-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: rgba(29,143,163,0.38); margin-bottom: 12px; } .service-modal-title { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 16px; letter-spacing: -0.01em; } .service-modal-desc { font-size: 15px; line-height: 1.8; color: var(--text-soft); margin-bottom: 20px; } .service-modal-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .service-modal-tech span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; padding: 4px 10px; background: rgba(29,143,163,0.08); color: var(--muted); border: 1px solid rgba(29,143,163,0.15); } .service-modal-industries { font-size: 11px; color: var(--muted); margin-bottom: 14px; font-family: var(--mono); letter-spacing: 0.06em; } .service-modal-outcome { font-size: 12px; color: var(--teal); margin-bottom: 20px; font-style: italic; line-height: 1.5; padding-left: 14px; border-left: 2px solid rgba(29,143,163,0.4); } .service-modal-expand { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .service-modal-expand .service-expand-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .service-modal-expand ul { list-style: none; padding: 0; margin: 0 0 12px 0; font-size: 14px; color: var(--text-soft); line-height: 1.8; } .service-modal-expand ul li { padding-left: 16px; position: relative; } .service-modal-expand ul li::before { content: '—'; position: absolute; left: 0; color: var(--teal); opacity: 0.6; } .service-modal-expand .service-expand-timeline { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); margin-top: 8px; } .service-modal-cta { display: inline-block; margin-top: 28px; } .service-modal-cta + .service-modal-cta { margin-top: 12px; } /* WHY US */ .why-section { padding: 128px 64px; background: var(--ink-soft); overflow: hidden; } .why-section::before { content: ''; position: absolute; right: -400px; top: -400px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(29,143,163,0.05) 0%, transparent 65%); pointer-events: none; } .why-grid { display: grid; grid-template-columns: 420px 1fr; gap: 100px; align-items: start; } .why-left { position: sticky; top: clamp(24px, 10vh, 120px); align-self: start; max-height: calc(100vh - 32px); overflow: auto; } .why-highlights { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-soft); margin-top: 52px; border: 1px solid var(--line-soft); } .why-highlight { background: var(--ink-soft); padding: 30px 26px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; transition: background 0.3s; } .why-highlight:hover { background: rgba(29,143,163,0.06); } .why-highlight::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .why-highlight:hover::after { transform: scaleX(1); } .why-highlight-num { font-family: var(--serif); font-size: 34px; font-weight: 600; background: linear-gradient(130deg, var(--teal-light), var(--green-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } .why-highlight-text { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .why-principles { display: flex; flex-direction: column; } .principle { padding: 36px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 32px; align-items: flex-start; transition: padding-left 0.3s var(--ease-out); } .principle:last-child { border-bottom: none; } .principle:hover { padding-left: 8px; } .principle-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--green); flex-shrink: 0; padding-top: 5px; } .principle-title { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.01em; } .principle-desc { font-size: 15px; line-height: 1.8; color: var(--text-soft); } /* PROCESS */ .process-section { padding: 128px 64px; background: var(--ink); } .process-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 80px; } .process-step { background: var(--ink-card); padding: 44px 32px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; transition: background 0.3s; } .process-step::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .process-step:hover { background: rgba(29,143,163,0.05); } .process-step:hover::after { transform: scaleX(1); } .step-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--teal); background: rgba(29,143,163,0.1); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: background 0.3s, color 0.3s; flex-shrink: 0; } .process-step:hover .step-num { background: var(--teal); color: var(--ink); } .step-title { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; } .step-desc { font-size: 14px; line-height: 1.8; color: var(--text-soft); flex: 1; } /* PARTNERS */ .partners-section { padding: 92px 64px; background: var(--ink-soft); } .partners-intro { font-size: 14px; line-height: 1.8; color: var(--text-soft); max-width: 620px; margin-bottom: 30px; } .partners-slider { position: relative; overflow: hidden; background: var(--line-soft); border: 1px solid var(--line-soft); } .partners-slider::before, .partners-slider::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(26px, 5vw, 64px); pointer-events: none; z-index: 2; } .partners-slider::before { left: 0; background: linear-gradient(90deg, var(--ink-soft), rgba(12, 16, 18, 0)); } .partners-slider::after { right: 0; background: linear-gradient(270deg, var(--ink-soft), rgba(12, 16, 18, 0)); } .partners-track { display: flex; width: max-content; animation: partnersLoop 26s linear infinite; will-change: transform; } .partner-group { display: flex; gap: 1px; padding-right: 1px; } .partner-card { background: var(--ink-card); min-width: 238px; min-height: 112px; padding: 20px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; transition: background 0.35s var(--ease-out); } .partner-card.has-logo { align-items: center; text-align: center; } .partner-card.has-logo:hover { background: #ffffff; } .partner-logo { display: block; max-width: 180px; max-height: 48px; width: auto; height: auto; object-fit: contain; /* Dark mode default: treat logos as white marks */ filter: brightness(0) invert(1) contrast(1.05); opacity: 0.9; transition: filter 0.35s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .partner-card.has-logo:hover .partner-logo { filter: none; opacity: 1; transform: translateY(-1px); } :root.light .partner-logo { /* Light mode: subtle monochrome until hover */ filter: grayscale(1) saturate(0) contrast(1.08) brightness(0.98); opacity: 0.78; } .partner-card.has-logo:hover .partner-region { color: #475569; } .partner-name { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; } .partner-region { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .partners-slider:hover .partners-track { animation-play-state: paused; } @keyframes partnersLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* CONTACT */ .contact-section { padding: 128px 64px; background: var(--ink); overflow: hidden; } .contact-bg-text { position: absolute; bottom: -60px; left: -20px; font-family: var(--serif); font-size: 220px; font-weight: 300; color: rgba(29,143,163,0.04); white-space: nowrap; pointer-events: none; letter-spacing: -0.06em; line-height: 1; user-select: none; } /* CASE STUDIES */ .cases-section { padding: 128px 64px; background: var(--ink-soft); } .cases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .case-card { background: var(--ink-card); padding: 36px 30px; display: flex; flex-direction: column; gap: 12px; } .case-kicker { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .case-title { font-family: var(--serif); font-size: 23px; font-weight: 500; letter-spacing: -0.01em; } .case-title a { color: inherit; text-decoration: none; } .case-title a:hover { color: var(--teal); } .case-metric { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); } .case-desc { font-size: 14px; line-height: 1.7; color: var(--text-soft); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; position: relative; z-index: 1; } .contact-info-items { margin-top: 48px; display: flex; flex-direction: column; } .contact-item { padding: 24px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 24px; align-items: flex-start; } .contact-item:last-child { border-bottom: none; } .contact-item-icon { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); flex-shrink: 0; padding-top: 3px; min-width: 52px; } .contact-item-text { font-size: 14px; color: var(--text-soft); line-height: 1.65; } .contact-item-text a { color: var(--text-soft); text-decoration: none; transition: color 0.2s; } .contact-item-text a:hover { color: var(--teal); } .contact-form { display: flex; flex-direction: column; } .contact-form-submit { width: 100%; text-align: center; display: block; border: none; cursor: pointer; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); margin-bottom: 1px; } .form-field { background: var(--ink-card); position: relative; transition: background 0.2s; } .form-field.full { background: var(--ink-card); margin-bottom: 1px; } .form-field:focus-within { background: rgba(29,143,163,0.04); } .form-field label { position: absolute; top: 20px; left: 24px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); transition: all 0.2s; pointer-events: none; } .form-field input:focus + label, .form-field input:not(:placeholder-shown) + label, .form-field textarea:focus + label, .form-field textarea:not(:placeholder-shown) + label, .form-field select:focus + label { color: var(--teal); } .form-field input, .form-field select, .form-field textarea { width: 100%; background: transparent; border: none; outline: none; padding: 46px 24px 16px; color: var(--paper); font-family: var(--sans); font-size: 14px; font-weight: 400; appearance: none; -webkit-appearance: none; border-radius: 0; resize: none; } .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; } .form-field select option { background: var(--ink-card); color: var(--paper); } .form-field textarea { height: 140px; } .form-field:focus-within .form-border { background: var(--teal); } .form-field input:focus:valid ~ .form-border, .form-field input:not(:placeholder-shown):valid ~ .form-border { background: var(--green); } .form-border { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--line-soft); transition: background 0.3s; } .nda-row { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0 28px; border-top: 1px solid var(--line-soft); margin-bottom: 28px; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nda-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; } .nda-row label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); cursor: pointer; padding: 12px 0; flex: 1; } .contact-form.success .contact-form-body { display: none; } .contact-form.success .contact-form-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 32px; animation: fadeUp 0.5s var(--ease-out); } .contact-form-success[hidden] { display: none !important; } .contact-success-icon { width: 56px; height: 56px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; background: rgba(126,200,50,0.15); color: var(--green); border-radius: 50%; } .contact-success-icon svg { width: 28px; height: 28px; } .contact-success-title { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; } .contact-success-text { font-size: 15px; line-height: 1.7; color: var(--text-soft); } /* FOOTER */ footer { background: var(--ink-soft); border-top: 1px solid var(--line); padding: 56px 64px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 40px; position: relative; } footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--teal) 40%, var(--green) 72%, transparent); opacity: 0.45; } .footer-brand-block { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; } .footer-logo { display: flex; align-items: center; flex-shrink: 0; line-height: 0; text-decoration: none; transition: opacity 0.25s; } .footer-logo:hover { opacity: 0.82; } .footer-logo-svg { height: 32px; width: auto; overflow: visible; display: block; } :root.light .footer-logo-svg { filter: brightness(0.92); } .footer-brand { font-family: var(--serif); font-size: 17px; font-weight: 300; color: rgba(238,244,245,0.32); letter-spacing: 0.03em; } .footer-brand span { color: var(--teal); } .footer-links { display: flex; gap: 32px; list-style: none; } .footer-links a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238,244,245,0.28); text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.2s; } .footer-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--teal); transition: width 0.3s var(--ease-out); } .footer-links a:hover { color: var(--teal); } .footer-links a:hover::after { width: 100%; } .footer-copy { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(238,244,245,0.16); } /* REVEAL */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); } .reveal.from-left { transform: translateX(-36px); } .reveal.from-right { transform: translateX(36px); } .reveal.visible { opacity: 1; transform: translate(0,0); } .service-card.reveal { transform: translateY(24px) scale(0.98); } .service-card.reveal.visible { transform: translate(0,0) scale(1); transition-delay: var(--stagger, 0ms); } /* RESPONSIVE */ @media (max-width: 1024px) { .hero { padding: 0 48px; } .hero-content { max-width: 480px; padding-top: 100px; } .hero-headline { font-size: clamp(44px, 5.8vw, 66px); } .hero-panel { max-width: 100%; } } @media (max-width: 1100px) { .hero { grid-template-columns: 1.1fr 0.9fr; padding: 0 44px; } .hero-content { padding-top: 108px; max-width: 520px; } .hero-headline { font-size: clamp(36px, 5.4vw, 58px); } .hero-panel-wrap { padding: 48px 20px 48px 8px; } } @media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2,1fr); } .service-card:nth-child(1) { grid-column: span 2; } .service-card:nth-child(4) { grid-column: span 1; } .services-not-sure { flex-direction: column; align-items: flex-start; } .process-steps { grid-template-columns: repeat(3,1fr); gap: 12px; background: transparent; border: none; } .why-grid { grid-template-columns: 1fr 1fr; gap: 60px; } .cases-grid { grid-template-columns: 1fr 1fr; } .partner-card { min-width: 220px; } } @media (max-width: 900px) { nav { padding: 20px max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); } nav.scrolled { padding-top: 14px; padding-bottom: 14px; } /* Nav bar reads clearly above the full-screen menu */ nav.menu-open { background: rgba(6, 13, 15, 0.94); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom: 1px solid rgba(29, 143, 163, 0.28); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42); } :root.light nav.menu-open { background: rgba(240, 247, 248, 0.96); border-bottom-color: rgba(14, 122, 143, 0.22); box-shadow: 0 10px 36px rgba(13, 36, 40, 0.1); } .nav-hamburger { display: flex; border-radius: 12px; border: 1px solid transparent; transition: background 0.25s, border-color 0.25s, transform 0.3s; } nav.menu-open .nav-hamburger { background: rgba(29, 143, 163, 0.16); border-color: rgba(29, 143, 163, 0.32); } :root.light nav.menu-open .nav-hamburger { background: rgba(14, 122, 143, 0.1); border-color: rgba(14, 122, 143, 0.22); } .nav-links { display: none; position: fixed; inset: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; padding: max(20px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-left)); padding-top: max(100px, calc(76px + env(safe-area-inset-top))); padding-bottom: max(28px, env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; list-style: none; z-index: 199; isolation: isolate; background: transparent; scrollbar-gutter: stable; } /* Full-viewport splash-style backdrop (fixed so it doesn’t scroll away) */ .nav-links::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 110% 70% at 50% -18%, rgba(29, 143, 163, 0.32) 0%, transparent 56%), radial-gradient(ellipse 42% 32% at 94% 98%, rgba(126, 200, 50, 0.1) 0%, transparent 52%), linear-gradient(168deg, #020506 0%, #060d0f 38%, #0d181c 100%); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); } :root.light .nav-links::before { background: radial-gradient(ellipse 105% 65% at 50% -14%, rgba(14, 122, 143, 0.14) 0%, transparent 54%), radial-gradient(ellipse 38% 28% at 90% 96%, rgba(95, 160, 32, 0.07) 0%, transparent 50%), linear-gradient(168deg, #fafdfe 0%, #eef6f8 45%, #e6f1f3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .nav-links li { width: 100%; max-width: min(384px, 100%); } /* Primary links — tappable cards */ .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top { display: flex; align-items: center; min-height: 52px; padding: 14px 18px; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 14px; border: 1px solid rgba(29, 143, 163, 0.28); background: rgba(8, 22, 28, 0.62); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); border-bottom: none; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out); -webkit-tap-highlight-color: transparent; } .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top:active { transform: scale(0.98); background: rgba(29, 143, 163, 0.2); } :root.light .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top { border-color: rgba(14, 122, 143, 0.22); background: rgba(255, 255, 255, 0.78); box-shadow: 0 4px 20px rgba(13, 36, 40, 0.08); } :root.light .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top:active { background: rgba(14, 122, 143, 0.1); } /* Services block — grouped card */ .nav-item--dropdown { margin-bottom: 10px; padding: 8px 8px 12px; border-radius: 16px; border: 1px solid rgba(29, 143, 163, 0.28); background: rgba(5, 14, 18, 0.58); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } :root.light .nav-item--dropdown { border-color: rgba(14, 122, 143, 0.22); background: rgba(255, 255, 255, 0.72); box-shadow: 0 8px 28px rgba(13, 36, 40, 0.08); } .nav-item__row { border-bottom: none; min-height: 56px; padding: 0 6px; } .nav-item--dropdown .nav-link--top { padding: 16px 12px; border-bottom: none; } .nav-dropdown { margin-top: 2px; } nav.menu-open .nav-links { display: flex; animation: navMobileSheetIn 0.42s var(--ease-out) both; } @keyframes navMobileSheetIn { from { opacity: 0; } to { opacity: 1; } } .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top, .nav-item__row .nav-link--top { opacity: 0; transform: translateY(14px); animation: navLinkIn 0.4s var(--ease-out) forwards; } .nav-dropdown a { opacity: 1 !important; transform: none !important; animation: none !important; } nav:not(.menu-open) .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top, nav:not(.menu-open) .nav-item__row .nav-link--top { animation: none; opacity: 1; transform: none; } nav.menu-open .nav-links > li:nth-child(1) .nav-link--top { animation-delay: 0.05s; } nav.menu-open .nav-links > li:nth-child(2) > a { animation-delay: 0.1s; } nav.menu-open .nav-links > li:nth-child(3) > a { animation-delay: 0.15s; } nav.menu-open .nav-links > li:nth-child(4) > a { animation-delay: 0.2s; } nav.menu-open .nav-links > li:nth-child(5) > a { animation-delay: 0.25s; } nav.menu-open .nav-links > li:nth-child(6) > a { animation-delay: 0.3s; } @keyframes navLinkIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { nav.menu-open .nav-links { animation: none; } .nav-links > li:not(.nav-item--dropdown) > a.nav-link--top, .nav-item__row .nav-link--top { animation: none !important; opacity: 1 !important; transform: none !important; } } .nav-links a::after { display: none; } .nav-hamburger, .nav-cta, .lang-switch { position: relative; z-index: 201; } .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .hero-content { grid-column: 1; grid-row: 1; padding-top: 100px; max-width: 100%; } .hero-panel-wrap { grid-column: 1; grid-row: 2; padding: 24px max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); padding-bottom: 40px; } .hero-pills { grid-column: 1; grid-row: 3; padding: 0 max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); padding-bottom: 48px; } .services-section, .why-section, .process-section, .contact-section, .cases-section, .partners-section { padding: 80px max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); } .stats { grid-template-columns: repeat(2,1fr); } .process-steps { grid-template-columns: repeat(2,1fr); gap: 10px; } .why-grid { grid-template-columns: 1fr; gap: 56px; } .why-left { position: static; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } footer { grid-template-columns: 1fr; gap: 20px; padding: 36px max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); padding-bottom: max(36px, env(safe-area-inset-bottom)); } } @media (max-width: 640px) { .services-section { overflow: hidden; } .services-intro { font-size: 14px; max-width: 100%; } .hero-panel .hero-service-row { min-height: 48px; padding: 14px 16px; -webkit-tap-highlight-color: transparent; } .hero-panel-header, .hero-panel-footer { padding: 12px 16px; } .services-section, .why-section, .process-section, .contact-section, .cases-section, .partners-section { padding-top: 64px; padding-bottom: 64px; } .section-header { margin-bottom: 48px; padding-bottom: 24px; } .section-title { font-size: clamp(28px, 8vw, 42px); } .services-main .services-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; padding-bottom: 8px; margin-bottom: 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .services-main .services-tabs .services-tab { scroll-snap-align: start; flex-shrink: 0; min-height: 44px; } .services-main .services-not-sure { order: 2; margin-top: 0; margin-bottom: 32px; padding: 20px; } .services-main .services-grid { order: 3; } .services-grid { display: block; grid-template-columns: 1fr; grid-auto-rows: minmax(200px, auto); margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; min-width: 0; background: transparent; border: none; overflow-x: clip; } .service-card { min-width: 0; width: 100%; max-width: 100%; margin-bottom: 1px; } .service-card:last-child { margin-bottom: 0; } .service-card:nth-child(1) { grid-column: span 1; } .services-grid.filtered { grid-template-columns: 1fr; } .services-grid.filtered .service-card.first-visible, .services-grid.filtered .service-card[data-dominant="true"] { grid-column: span 1; } .service-card:nth-child(1) { padding: 36px 24px; } .service-card:nth-child(n+2) { padding: 28px 20px; } .service-vendors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-steps { grid-template-columns: 1fr; gap: 16px; } .process-step { padding: 28px 24px; } .stats { grid-template-columns: 1fr 1fr; } .stat { padding: 32px 24px; } .stat-number { font-size: 40px; } .why-highlights { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .form-field input, .form-field select, .form-field textarea { font-size: 16px; } .form-field label { left: 20px; top: 18px; } .form-field input, .form-field select, .form-field textarea { padding: 44px 20px 14px; } .form-field textarea { height: 110px; } .section-number { display: none; } .contact-bg-text { font-size: 120px; opacity: 0.35; } .service-modal-content { padding: 36px 24px; } .cases-grid { grid-template-columns: 1fr; } .partner-card { min-width: 188px; min-height: 88px; } } @media (max-width: 640px) { .contact-bg-text { font-size: 100px; bottom: -20px; } } @media (min-width: 500px) and (max-width: 640px) { .footer-links { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 6px; } .footer-links li { flex: 0 0 auto; } } @media (max-width: 480px) { .nav-logo-svg { height: 30px; max-width: 140px; } nav { padding: 16px max(20px, env(safe-area-inset-right)); padding-left: max(20px, env(safe-area-inset-left)); } .hero-content { padding-top: 80px; } .hero-headline { font-size: clamp(32px, 9vw, 48px); } .hero-panel-wrap { padding: 20px max(20px, env(safe-area-inset-right)); padding-left: max(20px, env(safe-area-inset-left)); padding-bottom: 32px; } .hero-pills { padding-bottom: 40px; } .stats { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } .services-section, .why-section, .process-section, .contact-section, .cases-section, .partners-section { padding-top: 56px; padding-bottom: 56px; } .services-main .services-tabs { gap: 6px; margin-bottom: 20px; } .services-main .services-tab { padding: 10px 18px; font-size: 9px; } .services-not-sure { padding: 18px; } .service-outcome { padding-left: 24px; } .footer-links { flex-wrap: wrap; gap: 16px; } .partner-card { min-width: 166px; } } @media (max-width: 400px) { .nav-logo-svg { height: 26px; max-width: 120px; } .hero-headline { line-height: 1.15; font-size: clamp(28px, 10vw, 40px); } .hero-content { padding-top: 72px; } .hero-panel-wrap { padding: 16px max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } nav { padding: 14px max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } .stat { padding: 28px 20px; } .stat-number { font-size: 34px; } .services-main .services-tab { padding: 10px 14px; font-size: 9px; } .services-not-sure { padding: 16px; } .services-not-sure p { font-size: 13px; } .service-outcome { padding-left: 20px; font-size: 11px; } .service-card:nth-child(1) { padding: 28px 20px; } .service-card:nth-child(n+2) { padding: 24px 16px; } .process-step { padding: 24px 20px; } .form-field textarea { height: 96px; } .section-header { margin-bottom: 36px; } .section-title { font-size: clamp(24px, 7vw, 36px); } .footer-links { flex-direction: column; align-items: flex-start; } .theme-toggle { width: 44px; height: 44px; bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .partners-track { animation: none !important; transform: translateX(0) !important; } }