*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Design tokens: :root holds the dark-theme palette. Visitor default is LIGHT via (see theme scripts). Landing page styles: ../../assets/css/home.css — long-term DRY: merge tokens here + SSG layouts (see README). */ /* ── Dark palette (base :root) ── */ :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.82); --card-hover-bg: rgba(29,143,163,0.055); --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.88); } 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: 1; transition: opacity 0.55s ease, background 0.5s ease, color 0.5s ease; line-height: 1.7; } body.loaded { opacity: 1; } body.no-custom-cursor .cursor, body.no-custom-cursor .cursor-ring { display: none !important; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ── THEME TRANSITION ── */ *, section, nav, footer, .service-card, .section-block, .process-step, .stat { transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease; } /* ── THEME TOGGLE ── */ .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; 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); } :root.light .theme-toggle { border-color: rgba(14,122,143,0.25); background: rgba(240,247,248,0.9); } /* ── GRAIN ── */ .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.012; } /* ── CUSTOM CURSOR ── */ .cursor { position: fixed; width: 8px; height: 8px; background: var(--green); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: transform 0.15s ease, background 0.2s; } .cursor.hov { transform: translate(-50%,-50%) scale(2.8); background: var(--teal); } .cursor-ring { position: fixed; width: 38px; height: 38px; border: 1px solid rgba(29,143,163,0.45); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); 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); } :root.light nav.scrolled { background: rgba(240,247,248,0.95); } .nav-logo { text-decoration: none; display: flex; align-items: center; } .nav-logo-svg { height: 36px; width: auto; overflow: visible; transition: opacity 0.3s; } .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 { color: rgba(13,36,40,0.7); } :root.light .nav-links a:hover { color: var(--paper); } :root.light .nav-links a.active { color: #0a6070; } /* ── Nav: services mega-menu (same behavior as home) ── */ .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; } .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; } .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); text-decoration: none; } .nav-cta:hover::before { transform: translateX(0); } .nav-cta span { position: relative; z-index: 1; } .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; } /* ── HERO ── */ .hero { min-height: 75vh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; padding: 0 64px; background: var(--ink); } .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 80% 80% at 60% 30%, black 10%, transparent 75%); pointer-events: none; } :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); } .hero-bg-blob { position: absolute; top: -80px; right: -100px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(29,143,163,0.1) 0%, transparent 65%); pointer-events: none; } .hero-content { position: relative; z-index: 3; padding-top: 140px; padding-bottom: 80px; max-width: 780px; } .hero-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin-bottom: 28px; 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); } h1.hero-headline { font-family: var(--serif); font-size: clamp(42px, 6vw, 80px); font-weight: 400; line-height: 1.1; font-style: italic; letter-spacing: -0.03em; margin-bottom: 24px; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.45s; } h1.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.8; color: var(--text-soft); max-width: 560px; margin-bottom: 40px; opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards 0.6s; } :root.light .hero-sub { color: rgba(13,36,40,0.82); } .hero-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; 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); text-decoration: none; color: var(--ink); } .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); text-decoration: none; } .btn-ghost:active { transform: scale(0.97); } :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); } /* ── SERVICE DETAIL PAGE LAYOUT ── */ main { padding-top: 96px; } .hero + .grid-2, .hero + .section { margin-top: 0; } .hero .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; } .hero h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 64px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; max-width: 960px; margin-bottom: 18px; } .hero h1 em { font-style: italic; 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 p { font-size: 15px; line-height: 1.85; color: var(--text-soft); max-width: 760px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .cta-row .btn { text-decoration: none; } .grid-2 { padding: 88px 64px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); } .card { background: var(--ink-card); padding: 34px 30px; border: 1px solid var(--line-soft); } .card h2, .section h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 14px; } .card ul, .section ul { list-style: none; margin: 0; padding: 0; } .card li, .section li { position: relative; padding-left: 16px; margin: 0 0 9px; color: var(--text-soft); } .card li::before, .section li::before { content: "—"; position: absolute; left: 0; color: var(--teal); opacity: 0.65; } .section { padding: 88px 64px 0; } .section:last-of-type { padding-bottom: 88px; } .section p { color: var(--text-soft); line-height: 1.85; font-size: 15px; max-width: 940px; } .section p + p { margin-top: 14px; } .proof { margin-top: 18px; padding: 18px 20px; background: var(--ink-card); border: 1px solid var(--line-soft); border-left: 2px solid var(--teal); color: var(--text-soft); } .proof strong { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .faq-item { background: var(--ink-card); border: 1px solid var(--line-soft); padding: 20px 22px; margin-top: 10px; } .faq-item h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 6px; } .faq-item p { max-width: 100%; font-size: 14px; } /* Inner-page footer inside main */ main > footer { margin-top: 48px; } /* ── SECTION SHARED ── */ section { position: relative; } .section-wrap { padding: 96px 64px; } .section-wrap.alt { background: var(--ink-soft); } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; padding-bottom: 32px; 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: 16px; } .section-tag::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); } .section-title { font-family: var(--serif); font-size: clamp(28px,4vw,50px); 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; } :root.light .section-number { color: rgba(14,122,143,0.1); } /* ── SERVICE BENTO GRID ── */ .services-intro { font-size: 15px; line-height: 1.85; color: var(--text-soft); max-width: 620px; margin-bottom: 48px; } :root.light .services-intro { color: var(--text-soft); } .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); } .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; } .service-card:focus-visible { outline: 2px solid var(--teal-light); outline-offset: -2px; } .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::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); 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); } } :root.light .service-card { background: var(--ink-card); } :root.light .service-card:hover { background: rgba(14,122,143,0.06); } .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); } .service-title a { color: inherit; text-decoration: none; } .service-title a:hover { color: var(--teal); } .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; } :root.light .service-desc { color: var(--text-soft); } .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-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; } .service-arrow::after { content: '→'; transition: transform 0.25s; } @media (hover: hover) { .service-card:hover .service-arrow { opacity: 1; transform: translateX(0); } } /* ── PROCESS STEPS ── */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 64px; } .process-step { background: var(--ink-card); padding: 44px 32px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; } .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; } /* ── HOW WE WORK SECTION ── */ .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .work-card { background: var(--ink-card); border: 1px solid var(--line-soft); padding: 36px 32px; position: relative; overflow: hidden; } .work-card::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); } .work-card:hover::after { transform: scaleX(1); } .work-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 14px; letter-spacing: -0.01em; } .work-card p { font-size: 15px; line-height: 1.8; 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); } :root.light .footer-brand { color: var(--text-soft); } .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%; } :root.light .footer-links a { color: var(--text-muted); } .footer-copy { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(238,244,245,0.16); } :root.light .footer-copy { color: var(--text-muted); } /* ── 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); } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ── RESPONSIVE ── */ @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; } } @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.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; z-index: 199; list-style: none; isolation: isolate; background: transparent; scrollbar-gutter: stable; } .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%); } .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); } .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 { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } main { padding-top: 84px; } .grid-2, .section { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .grid-2 { grid-template-columns: 1fr; } .section-wrap { padding: 72px max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); } 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)); } .work-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hero { min-height: 70vh; } .hero-content { padding-top: 110px; padding-bottom: 56px; } .grid-2, .section { padding-top: 64px; } .section:last-of-type { padding-bottom: 64px; } .card { padding: 24px 20px; } .faq-item { padding: 18px; } .services-grid { display: block; background: transparent; border: none; } .service-card { margin-bottom: 1px; width: 100%; } .service-card:nth-child(1) { padding: 36px 24px; } .service-card:nth-child(n+2) { padding: 28px 20px; } .section-number { display: none; } .process-steps { grid-template-columns: 1fr; gap: 12px; background: transparent; border: none; } .process-step { margin-bottom: 1px; } .footer-links { flex-wrap: wrap; gap: 16px; } } @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: 88px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Orbit Diagram (Web Apps) ── */ .orbit-wrap { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .orbit-diagram { padding: 20px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--ink-soft); } .orbit-diagram--desktop { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .orbit-diagram--desktop .orbit-svg { min-width: min(100%, 920px); } .orbit-diagram--mobile { display: none; } .orbit-svg { width: 100%; height: auto; display: block; } .orbit-text { font-family: var(--sans); } .orbit-text-strong { fill: rgba(238,244,245,0.94); font-family: var(--sans); } .orbit-core-text { fill: rgba(238,244,245,0.96); font-family: var(--sans); } .orbit-text-sub { fill: rgba(238,244,245,0.68); font-family: var(--sans); } .orbit-text-firebase-title { fill: rgba(238,244,245,0.9); font-family: var(--sans); } .orbit-text-firebase-sub { fill: rgba(238,244,245,0.62); font-family: var(--sans); } .orbit-text-platform { fill: rgba(238,244,245,0.88); font-family: var(--sans); } .orbit-core text, .orbit-core rect { vector-effect: non-scaling-stroke; } .orbit-core-rect { stroke: rgba(200, 169, 110, 0.85); } .orbit-nodes { transform-origin: 500px 260px; } .orbit-connectors { transform-origin: 500px 260px; } .orbit-node-strong { fill: rgba(8, 18, 22, 0.55); stroke: rgba(29, 143, 163, 0.62); } .orbit-node-firebase { fill: rgba(29, 143, 163, 0.14); stroke: rgba(200, 169, 110, 0.45); } .orbit-node-platform { fill: rgba(6, 13, 15, 0.38); stroke: rgba(29, 143, 163, 0.42); } .orbit-path { stroke: rgba(29, 143, 163, 0.42); stroke-dasharray: 10 18; stroke-linecap: round; } .orbit-path--inner { animation: orbitDash 4.2s linear infinite; } .orbit-path--outer { stroke: rgba(29, 143, 163, 0.32); stroke-dasharray: 8 22; animation: orbitDashSlow 7.5s linear infinite; } @keyframes orbitDash { to { stroke-dashoffset: -180; } } @keyframes orbitDashSlow { to { stroke-dashoffset: -220; } } .orbit-nodes .orbit-node rect { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2)); transition: stroke 0.2s ease, filter 0.2s ease; } .orbit-node:focus { outline: none; } .orbit-node:focus-visible rect, .orbit-node:hover rect { stroke: rgba(200, 169, 110, 0.95); filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.28)); } /* Mobile stack */ .orbit-stack { display: flex; flex-direction: column; gap: 14px; } .orbit-stack-tier { display: flex; flex-direction: column; gap: 8px; } .orbit-stack-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-family: var(--sans); } .orbit-stack-chips { display: flex; flex-wrap: wrap; gap: 8px; } .orbit-chip { font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-soft); line-height: 1.35; } .orbit-chip--strong { background: rgba(6, 13, 15, 0.35); color: var(--paper); border-color: rgba(29, 143, 163, 0.45); } .orbit-chip--firebase { background: rgba(29, 143, 163, 0.12); color: var(--paper); border-color: rgba(200, 169, 110, 0.4); flex: 1 1 100%; } .orbit-chip--platform { background: rgba(6, 13, 15, 0.28); color: rgba(238, 244, 245, 0.88); border-color: rgba(29, 143, 163, 0.35); } .orbit-stack-core { margin-top: 4px; padding: 16px 18px; border-radius: 12px; text-align: center; border: 2px solid rgba(200, 169, 110, 0.75); background: linear-gradient(145deg, rgba(61, 81, 104, 0.55), rgba(90, 111, 136, 0.4)); } .orbit-stack-core--mobile-first { margin-top: 0; margin-bottom: 4px; } .orbit-stack-core-title { display: block; font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--paper); letter-spacing: 0.02em; } .orbit-stack-core-sub { display: block; margin-top: 6px; font-size: 12px; color: rgba(238, 244, 245, 0.7); font-family: var(--sans); } .orbit-legend { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-soft); font-family: var(--sans); } .orbit-legend strong { color: var(--paper); display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .orbit-legend-item { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; margin-bottom: 6px; vertical-align: middle; } .orbit-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(29, 143, 163, 0.45); } .orbit-legend-swatch--strong { background: rgba(8, 18, 22, 0.55); } .orbit-legend-swatch--firebase { background: rgba(29, 143, 163, 0.2); border-color: rgba(200, 169, 110, 0.5); } .orbit-legend-swatch--platform { background: rgba(6, 13, 15, 0.38); } .orbit-legend-note { display: block; margin-top: 10px; font-size: 12px; opacity: 0.92; } @media (max-width: 720px) { .orbit-diagram--desktop { display: none; } .orbit-diagram--mobile { display: block; } } @media (prefers-reduced-motion: reduce) { .orbit-path--inner, .orbit-path--outer { animation: none !important; } } :root.light .orbit-diagram { background: rgba(226, 238, 240, 0.82); } :root.light .orbit-text-sub { fill: rgba(13, 36, 40, 0.62); } :root.light .orbit-text-strong { fill: rgba(13, 36, 40, 0.88); } :root.light .orbit-core-text { fill: rgba(13, 36, 40, 0.9); } :root.light .orbit-text-firebase-title { fill: rgba(13, 36, 40, 0.88); } :root.light .orbit-text-firebase-sub { fill: rgba(13, 36, 40, 0.58); } :root.light .orbit-text-platform { fill: rgba(13, 36, 40, 0.82); } :root.light .orbit-core-rect { stroke: rgba(160, 130, 75, 0.9); } :root.light .orbit-node-strong { fill: rgba(13, 36, 40, 0.1); stroke: rgba(14, 122, 143, 0.65); } :root.light .orbit-node-firebase { fill: rgba(14, 122, 143, 0.1); stroke: rgba(160, 130, 75, 0.55); } :root.light .orbit-node-platform { fill: rgba(13, 36, 40, 0.08); stroke: rgba(14, 122, 143, 0.5); } :root.light .orbit-path { stroke: rgba(14, 122, 143, 0.38); } :root.light .orbit-path--outer { stroke: rgba(14, 122, 143, 0.28); } :root.light .orbit-chip--strong { background: rgba(13, 36, 40, 0.06); color: var(--paper); border-color: rgba(14, 122, 143, 0.4); } :root.light .orbit-chip--firebase { background: rgba(14, 122, 143, 0.08); color: var(--paper); border-color: rgba(160, 130, 75, 0.45); } :root.light .orbit-chip--platform { background: rgba(13, 36, 40, 0.05); color: rgba(13, 36, 40, 0.88); } :root.light .orbit-stack-core { border-color: rgba(160, 130, 75, 0.65); background: linear-gradient(145deg, rgba(226, 238, 240, 0.95), rgba(210, 228, 232, 0.85)); } :root.light .orbit-stack-core-title { color: rgba(13, 36, 40, 0.92); } :root.light .orbit-stack-core-sub { color: rgba(13, 36, 40, 0.62); } :root.light .orbit-node:focus-visible rect, :root.light .orbit-node:hover rect { stroke: rgba(160, 130, 75, 0.95); } /* ── Interactive Architecture Orbit (Web App — React component port) ── */ .arch-orbit { position: relative; margin-top: 28px; padding: 28px 24px 32px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--ink-card); overflow: hidden; } .arch-orbit__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 10% 15%, rgba(29, 143, 163, 0.12), transparent 55%), radial-gradient(ellipse 50% 40% at 92% 88%, rgba(200, 169, 110, 0.08), transparent 50%); opacity: 0.9; } .arch-orbit__intro { position: relative; z-index: 1; margin-bottom: 28px; text-align: center; } .arch-orbit__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .arch-orbit__eyebrow-icon { width: 20px; height: 20px; color: var(--teal-light); } .arch-orbit__subtitle { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 500; color: var(--paper); margin-bottom: 10px; letter-spacing: -0.02em; } .arch-orbit__lead { font-size: 15px; line-height: 1.65; color: var(--text-soft); max-width: 52ch; margin: 0 auto; } .arch-orbit__lead strong { color: var(--teal-light); font-weight: 600; } :root.light .arch-orbit__lead strong { color: var(--teal); } .arch-orbit__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 1024px) { .arch-orbit__grid { grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: 40px; } .arch-orbit__intro { text-align: left; } .arch-orbit__lead { margin: 0; } } .arch-orbit__visual { display: flex; flex-direction: column; align-items: center; gap: 20px; } .arch-orbit__stage { --arch-r: min(150px, 36vw); position: relative; width: min(100%, 420px); aspect-ratio: 1; max-width: 420px; } .arch-orbit__rotator { position: absolute; inset: 0; animation: archOrbitSpin 60s linear infinite; transform-origin: 50% 50%; } .arch-orbit--paused .arch-orbit__rotator { animation-play-state: paused; } @keyframes archOrbitSpin { to { transform: rotate(360deg); } } .arch-orbit__ring { position: absolute; inset: 8%; border: 1px solid var(--line-soft); border-radius: 50%; opacity: 0.65; } .arch-orbit__node { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: none; border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: rotate(var(--node-a)) translate(var(--arch-r)) rotate(calc(-1 * var(--node-a))); transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease; z-index: 2; } .arch-orbit__node svg { width: 26px; height: 26px; stroke: currentColor; } .arch-orbit__node--client { color: var(--teal-light); background: rgba(29, 143, 163, 0.12); border: 1px solid rgba(29, 143, 163, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); } .arch-orbit__node--auth { color: #e8b86a; background: rgba(200, 169, 110, 0.1); border: 1px solid rgba(200, 169, 110, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); } .arch-orbit__node--api { color: var(--green-light); background: rgba(126, 200, 50, 0.08); border: 1px solid rgba(126, 200, 50, 0.3); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); } .arch-orbit__node--storage { color: #8ab4e8; background: rgba(100, 140, 200, 0.1); border: 1px solid rgba(100, 140, 200, 0.35); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2); } .arch-orbit__node:hover, .arch-orbit__node:focus-visible { transform: rotate(var(--node-a)) translate(var(--arch-r)) rotate(calc(-1 * var(--node-a))) scale(1.08); z-index: 3; } .arch-orbit__node[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 12px 36px rgba(29, 143, 163, 0.35); } :root.light .arch-orbit__node[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--teal), 0 12px 36px rgba(14, 122, 143, 0.25); } .arch-orbit__core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4; pointer-events: none; } .arch-orbit__core-inner { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink-soft); border: 3px solid rgba(200, 169, 110, 0.55); box-shadow: 0 0 40px rgba(29, 143, 163, 0.22); color: var(--teal-light); } .arch-orbit__core-inner svg { width: 36px; height: 36px; stroke: currentColor; } :root.light .arch-orbit__core-inner { background: rgba(255, 255, 255, 0.85); border-color: rgba(160, 130, 75, 0.55); } .arch-orbit__controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .arch-orbit__btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(6, 13, 15, 0.35); color: var(--paper); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .arch-orbit__btn:hover, .arch-orbit__btn:focus-visible { border-color: var(--teal); background: rgba(29, 143, 163, 0.12); } .arch-orbit__btn--ghost { background: transparent; } :root.light .arch-orbit__btn { background: rgba(255, 255, 255, 0.65); color: var(--paper); border-color: var(--line-soft); } .arch-orbit__side { display: flex; flex-direction: column; gap: 28px; } .arch-orbit__panel { padding: 24px 22px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgba(6, 13, 15, 0.35); min-height: 200px; } .arch-orbit__panel--empty { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; border-style: dashed; background: transparent; } .arch-orbit__panel-icon { width: 44px; height: 44px; color: var(--muted); margin-bottom: 14px; opacity: 0.7; } .arch-orbit__panel-title { font-size: 17px; font-weight: 700; color: var(--paper); margin-bottom: 8px; } .arch-orbit__panel-text { font-size: 14px; color: var(--text-soft); max-width: 280px; line-height: 1.55; } .arch-orbit__panel-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; } .arch-orbit__badge { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; margin-top: 6px; } .arch-orbit__badge--client { background: rgba(29, 143, 163, 0.65); } .arch-orbit__badge--auth-edge { background: rgba(200, 169, 110, 0.75); } .arch-orbit__badge--core-api { background: rgba(126, 200, 50, 0.65); } .arch-orbit__badge--storage { background: rgba(120, 160, 220, 0.65); } .arch-orbit__panel-heading { font-size: 22px; font-weight: 700; color: var(--paper); margin-bottom: 8px; line-height: 1.25; } .arch-orbit__panel-desc { font-size: 14px; color: var(--text-soft); line-height: 1.55; } .arch-orbit__cards { display: flex; flex-direction: column; gap: 12px; } .arch-orbit__card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(6, 13, 15, 0.25); transition: border-color 0.2s; } .arch-orbit__card:hover { border-color: rgba(29, 143, 163, 0.35); } .arch-orbit__card-title { font-size: 14px; font-weight: 700; color: var(--paper); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .arch-orbit__card-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; } .arch-orbit__card-desc { font-size: 13px; color: var(--text-soft); line-height: 1.55; margin: 0; } :root.light .arch-orbit__panel { background: rgba(255, 255, 255, 0.55); } :root.light .arch-orbit__card { background: rgba(255, 255, 255, 0.7); } .arch-orbit__enhancers-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .arch-orbit__enhancer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .arch-orbit__enhancer { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; background: rgba(6, 13, 15, 0.2); transition: border-color 0.2s, background 0.2s; } .arch-orbit__enhancer:hover { border-color: var(--line-soft); background: rgba(6, 13, 15, 0.35); } .arch-orbit__enhancer-ico { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(29, 143, 163, 0.1); color: var(--teal); } .arch-orbit__enhancer-ico svg { width: 18px; height: 18px; stroke: currentColor; } .arch-orbit__enhancer strong { display: block; font-size: 14px; color: var(--paper); margin-bottom: 4px; } .arch-orbit__enhancer-desc { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.45; } :root.light .arch-orbit__enhancer { background: rgba(255, 255, 255, 0.45); } :root.light .arch-orbit__enhancer:hover { background: rgba(255, 255, 255, 0.75); } .arch-orbit__footer { position: relative; z-index: 1; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 18px; align-items: stretch; } @media (min-width: 640px) { .arch-orbit__footer { flex-direction: row; align-items: center; justify-content: space-between; } } .arch-orbit__footer-meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--text-soft); } .arch-orbit__status { display: inline-flex; align-items: center; gap: 8px; } .arch-orbit__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(126, 200, 50, 0.5); } .arch-orbit__version { display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; } .arch-orbit__cta svg { vertical-align: -3px; margin-left: 4px; } :root.light .arch-orbit { background: rgba(255, 255, 255, 0.55); } :root.light .arch-orbit__subtitle { color: var(--paper); } @media (prefers-reduced-motion: reduce) { .arch-orbit__rotator { animation: none !important; } } /* ── HERO BODY (service page hero content wrapper) ── */ .hero-body { position: relative; z-index: 3; padding-bottom: 72px; width: 100%; } /* ── STATS BAR ── */ .stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .stat { background: var(--ink-card); padding: 32px 40px; display: flex; flex-direction: column; gap: 8px; } .stat-num { font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); font-weight: 500; color: var(--teal-light); line-height: 1; letter-spacing: -0.02em; } :root.light .stat-num { color: var(--teal); } .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); } /* ── CARD ICON ── */ .card-icon { width: 40px; height: 40px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: rgba(29,143,163,0.08); border: 1px solid rgba(29,143,163,0.18); border-radius: 10px; flex-shrink: 0; } .card-icon svg { width: 20px; height: 20px; color: var(--teal); stroke: currentColor; } /* ── SECTION TAG (kicker above section h2) ── */ .section .section-tag, .grid-2 .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: 16px; } .section .section-tag::before, .grid-2 .section-tag::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); flex-shrink: 0; } @media (max-width: 640px) { .stats-bar { grid-template-columns: 1fr; } .stat { padding: 24px 20px; } } /* ── Network & Cyber Security Vendors ── */ .vendor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; } .vendor-card { padding: 28px 22px; } .vendor-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .vendor-logo img { width: 52px; height: 52px; object-fit: contain; filter: grayscale(1) brightness(1.15); transition: filter 0.25s ease, transform 0.25s ease; } .vendor-logo-placeholder { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--line-soft); background: rgba(29,143,163,0.05); } .vendor-overview { color: var(--text-soft); line-height: 1.85; font-size: 14px; margin-top: 6px; } .vendor-card:hover .vendor-logo img { filter: grayscale(0) brightness(1.05); transform: translateY(-2px); } :root.light .vendor-logo img { filter: grayscale(1) brightness(0.98) contrast(1.05); } :root.light .vendor-card:hover .vendor-logo img { filter: grayscale(0) brightness(1) contrast(1.05); } /* ── ERP FEATURES (EN/AR + home-like styling) ── */ .erp-feature-page { --erp-primary-darkest: #060d0f; --erp-primary-dark: #0b1f27; --erp-primary: var(--teal); --erp-primary-light: var(--teal-light); --erp-accent: var(--teal-light); --erp-accent-soft: rgba(29,143,163,0.15); --erp-bg: var(--ink); --erp-card: var(--ink-card); --erp-text: var(--paper); --erp-text-muted: var(--text-soft); --erp-border: var(--line-soft); } :root.light .erp-feature-page { --erp-primary-darkest: #f0f7f8; --erp-primary-dark: #e2eef0; --erp-bg: var(--ink); --erp-card: var(--ink-card); --erp-text: var(--paper); --erp-text-muted: var(--text-soft); --erp-border: var(--line-soft); } .erp-feature-page { direction: ltr; } .erp-feature-page[dir="rtl"] { direction: rtl; } :root.light .erp-feature-page { --erp-primary-darkest: #f0f7f8; --erp-primary-dark: #e2eef0; --erp-bg: var(--ink); --erp-card: var(--ink-card); --erp-text: var(--paper); --erp-text-muted: var(--text-soft); --erp-border: var(--line-soft); } .erp-feature-page [data-lang] { display: none; } .erp-feature-page[dir="ltr"] [data-lang="en"] { display: block; } .erp-feature-page[dir="rtl"] [data-lang="ar"] { display: block; } .erp-lang-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(6,13,15,0.35); border: 1px solid var(--line-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,0.22); margin-top: 18px; } .erp-lang-toggle button { appearance: none; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-out); } .erp-lang-toggle button.active { background: var(--teal); color: var(--ink); } .erp-lang-toggle button:hover { transform: translateY(-1px); } @media (max-width: 640px) { .erp-lang-toggle { width: 100%; justify-content: center; } } :root.light .erp-lang-toggle { background: rgba(240,247,248,0.85); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .erp-feature-page[dir="rtl"] .erp-lang-toggle { flex-direction: row-reverse; } .erp-feature-page[dir="rtl"] .card li, .erp-feature-page[dir="rtl"] .section li { padding-left: 0; padding-right: 16px; } .erp-feature-page[dir="rtl"] .card li::before, .erp-feature-page[dir="rtl"] .section li::before { left: auto; right: 0; } .erp-feature-page .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .erp-feature-page section.section { padding: 80px 0 0; } .erp-feature-page section.section:last-of-type { padding-bottom: 80px; } .erp-feature-page .highlight-box { background: rgba(29,143,163,0.08); border-left: 4px solid var(--teal); padding: 20px 22px; border-radius: 0 8px 8px 0; margin: 18px 0 28px; color: var(--text-soft); line-height: 1.8; } .erp-feature-page .highlight-box strong { color: var(--paper); } .erp-feature-page .diagram-container { border: 1px solid var(--line-soft); background: var(--ink-soft); padding: 18px; overflow-x: auto; margin: 18px 0 28px; border-radius: 10px; } .erp-feature-page .diagram-container svg .diagram-text { fill: #ffffff !important; opacity: 1 !important; text-anchor: middle !important; dominant-baseline: middle !important; alignment-baseline: middle !important; } .erp-feature-page .diagram-container svg .diagram-text-alt { /* Light boxes use `diagram-text-alt` in the source SVG. We force a dark fill so text stays readable in both themes. */ fill: #060d0f !important; opacity: 1 !important; text-anchor: middle !important; dominant-baseline: middle !important; alignment-baseline: middle !important; } .erp-feature-page .diagram-container svg .diagram-arrow { stroke: rgba(0, 0, 0, 0.68) !important; stroke-width: 2.2px !important; fill: none; } /* Some ERP module SVGs use semantic classes (diagram-box / diagram-box-alt) without explicit `fill="..."`. We set fills here so labels don't disappear. */ .erp-feature-page .diagram-container svg .diagram-box { fill: #485d75 !important; stroke: #7c92ae !important; stroke-width: 2px !important; } .erp-feature-page .diagram-container svg .diagram-box-alt { fill: #e5e6e3 !important; stroke: #7c92ae !important; stroke-width: 2px !important; } .erp-feature-page .grid-2 { padding: 0; margin: 0; background: transparent; border: none; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .erp-feature-page .card { background: var(--ink-card); border: 1px solid var(--line-soft); border-radius: 10px; padding: 28px 26px; } .erp-feature-page .back-link { color: var(--teal); text-decoration: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .erp-feature-page .back-link:hover { text-decoration: underline; } .erp-feature-page .card h4 { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; } .erp-feature-page .card p { color: var(--text-soft); line-height: 1.85; font-size: 14px; margin-bottom: 10px; } @media (max-width: 900px) { .erp-feature-page .section { padding-left: 0; padding-right: 0; } } @media (max-width: 640px) { .erp-feature-page .section { padding-top: 64px; } } /* Bilingual blocks (same pattern as home.css); html[lang] set by site-i18n / head script */ [data-lang="en"], [data-lang="ar"] { display: none !important; } html[lang="en"] [data-lang="en"], html[lang="ar"] [data-lang="ar"] { display: revert !important; } html[lang="ar"] body { font-family: "Tajawal", var(--sans); line-height: 1.65; }