/* ========================================================================== ITOS — Design System Built on the "Industry" blueprint aesthetic approved in Claude Design. Steel-blue-on-light wireframe cards, square corners, thin-stroke icons. Logical properties are used throughout so the entire system mirrors automatically under [dir="rtl"] with no duplicated rulesets. ========================================================================== */ /* Web fonts are loaded via tags in index.html (faster than @import — fetched in parallel with the stylesheet instead of after it). */ :root { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #27aae1; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eaf6fc; --color-accent-200: #cdebf8; --color-accent-300: #a3dbf2; --color-accent-400: #6fc5ea; --color-accent-500: #27aae1; --color-accent-600: #1e8dbd; --color-accent-700: #146795; --color-accent-800: #0e4a6e; --color-accent-900: #071e41; --font-heading: 'Barlow Condensed', system-ui, sans-serif; --font-heading-weight: 600; --font-body: 'Barlow', system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 16px 40px color-mix(in srgb, #2b2b2d 26%, transparent); --container: 1280px; --header-h: 76px; color-scheme: light; } /* [dir="rtl"] gets its heading/body fonts swapped to Tajawal via inline custom properties set on by js/main.js (keeps one source of truth with the language switcher instead of duplicating font rules here). */ html[dir='rtl'] { --font-heading: 'Tajawal', system-ui, sans-serif; --font-body: 'Tajawal', system-ui, sans-serif; --font-heading-weight: 700; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3, html[dir='rtl'] h4, html[dir='rtl'] h5, html[dir='rtl'] h6 { letter-spacing: 0; } h1 { font-size: 54px; } h2 { font-size: 34px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } html[dir='rtl'] h6 { letter-spacing: 0.01em; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration: none; } a:hover { color: var(--color-accent-800); } img { display: block; max-width: 100%; } svg { flex-shrink: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--color-accent-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); transition: top 0.15s ease; } .skip-link:focus { top: 12px; } .container { max-width: var(--container); margin: 0 auto; padding-inline: 40px; } .section { padding-block: 64px; } .section-divider { border-top: 1px solid var(--color-divider); } .kicker { color: var(--color-accent-700); margin: 0 0 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.12; } html[dir='rtl'] .kicker { letter-spacing: 0.01em; } /* ── blueprint frame — wireframe cards with corner registration marks ── */ .blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; } .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; } .blueprint > .corner::before, .blueprint > .corner::after { content: ''; position: absolute; background: currentColor; } .blueprint > .corner::before { inset-inline-start: 5px; top: 0; width: 1px; height: 100%; } .blueprint > .corner::after { top: 5px; inset-inline-start: 0; width: 100%; height: 1px; } .blueprint > .corner.tl { top: -6px; inset-inline-start: -6px; } .blueprint > .corner.tr { top: -6px; inset-inline-end: -6px; } .blueprint > .corner.bl { bottom: -6px; inset-inline-start: -6px; } .blueprint > .corner.br { bottom: -6px; inset-inline-end: -6px; } /* ── buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); padding: 10px 20px; border-radius: 0; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); background: transparent; color: var(--color-text); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .btn-ghost { border-color: transparent; color: var(--color-accent-700); padding-inline: 6px; } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-icon { width: 38px; height: 38px; padding: 0; } .btn-sm { padding: 7px 14px; font-size: 12.5px; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── tags ── */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 4px 11px; border-radius: 2px; } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); } /* ── segmented control ── */ .seg { display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--color-divider); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; cursor: pointer; background: transparent; border: none; border-inline-start: 1px solid var(--color-divider); color: inherit; } .seg-opt:first-child { border-inline-start: none; } .seg-opt[aria-pressed='true'] { background: var(--color-accent); color: #fff; } .seg-opt[aria-pressed='false']:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* ── cards ── */ .card { padding: var(--space-5); background: transparent; display: flex; flex-direction: column; gap: var(--space-2); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; line-height: 1.2; } .card-body { margin: 0; font-size: 13.5px; color: var(--color-neutral-700); flex: 1; } /* ── forms ── */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: 12.5px; font-weight: 500; color: var(--color-neutral-700); } .field > .required { color: var(--color-accent-700); } .input, select.input, textarea.input { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); appearance: none; } select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398989b' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 32px; } html[dir='rtl'] select.input { background-position: left 12px center; } textarea.input { min-height: 64px; resize: vertical; } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } .field-error { font-size: 12px; color: #c23b3b; min-height: 15px; } .form-note { font-size: 12px; color: var(--color-neutral-700); } .form-success { display: flex; align-items: flex-start; gap: 10px; padding: 16px; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 14px; border: 1px solid var(--color-accent-300); } /* ========================================================================== HEADER ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; } .site-header.is-scrolled { border-bottom-color: var(--color-divider); } .nav-row { max-width: var(--container); margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); } .nav-brand { display: flex; align-items: center; flex: none; } .nav-brand img { height: 42px; width: auto; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { font-size: 13.5px; color: var(--color-text); white-space: nowrap; } .nav-links a:hover { color: var(--color-accent-700); } .nav-actions { display: flex; align-items: center; gap: 10px; flex: none; } .lang-switch { font-size: 10.5px; } .lang-switch .seg-opt { padding: 6px 9px; font-weight: 600; letter-spacing: 0.03em; } .nav-cta-primary { padding: 8px 14px; font-size: 12.5px; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-divider); cursor: pointer; } .nav-toggle svg { pointer-events: none; } /* ========================================================================== HERO ========================================================================== */ .hero { padding-block: 72px 96px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero-copy h1 { font-size: 54px; line-height: 1.06; margin: 20px 0 24px; max-width: 620px; } .hero-copy p { font-size: 17px; line-height: 1.6; color: var(--color-neutral-700); max-width: 520px; margin: 0 0 36px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-ctas .btn { padding: 13px 24px; font-size: 15px; } .fade-up { opacity: 0; transform: translateY(16px); animation: fadeInUp 0.7s ease both; } .fade-up.d1 { animation-delay: 0.08s; } .fade-up.d2 { animation-delay: 0.16s; } .fade-up.d3 { animation-delay: 0.24s; } .fade-up.d4 { animation-delay: 0.2s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero-diagram { display: flex; flex-direction: column; align-items: center; } .diagram-plate { width: 100%; max-width: 340px; padding: 15px 20px; text-align: center; font-size: 13px; } .diagram-plate.is-solid { background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 15px; } .diagram-connector { width: 1px; height: 24px; background: var(--color-divider); position: relative; } .diagram-connector .dot { position: absolute; inset-inline-start: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); animation: flowDot 2.4s linear infinite; } @keyframes flowDot { 0% { top: -2px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ========================================================================== BUSINESS OUTCOMES ========================================================================== */ .outcomes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; } .outcome-item { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .outcome-item svg { color: var(--color-accent); } html[dir='rtl'] .flip-rtl { transform: scaleX(-1); } .outcome-item span { font-size: 14px; font-weight: 500; } /* ========================================================================== SOLUTIONS / CAPABILITIES ========================================================================== */ .solutions-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .solution-card { min-height: 220px; padding: 22px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; text-align: start; background: transparent; border: 1px solid var(--color-divider); width: 100%; } .solution-card:hover, .solution-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); } .solution-card svg { color: var(--color-accent); margin-bottom: 14px; } .solution-card .card-title { margin-bottom: 8px; } .solution-card .card-body { margin-bottom: 16px; } .solution-card .card-link { font-size: 12.5px; font-weight: 600; color: var(--color-accent-700); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; } /* ========================================================================== SEE IT IN MOTION ========================================================================== */ .motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .motion-card { padding: 0; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; background: transparent; } .motion-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .motion-visual { position: relative; height: 200px; background: var(--color-surface); overflow: hidden; } .motion-live { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500); } .motion-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: pulseGlow 2s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent) 0%, transparent); } } .motion-caption { padding: 14px 16px; } .motion-caption .card-title { font-size: 15px; } .kpi-stack { display: flex; flex-direction: column; gap: 12px; justify-content: center; height: 100%; padding: 18px; } .kpi-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-neutral-700); } .kpi-track { height: 6px; background: var(--color-neutral-200); position: relative; overflow: hidden; } .kpi-fill { height: 100%; background: var(--color-accent); animation: barFill 3.6s ease-in-out infinite; } @keyframes barFill { 0% { width: 0; } 45% { width: var(--bar-w); } 85% { width: var(--bar-w); } 100% { width: 0; } } .scan-line { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--color-accent) 60%, transparent); animation: scanX 3.6s linear infinite; inset-inline-start: 0; } @keyframes scanX { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } } html[dir='rtl'] .scan-line { animation-name: scanXRtl; } @keyframes scanXRtl { 0% { right: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { right: 100%; opacity: 0; } } .chat-stack { display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: center; padding: 16px; } .chat-bubble { max-width: 78%; padding: 8px 12px; font-size: 11.5px; } .chat-bubble.q { align-self: flex-start; background: var(--color-neutral-200); animation: chat1 6s ease-in-out infinite; } .chat-bubble.a { align-self: flex-end; background: var(--color-accent); color: #fff; animation: chat2 6s ease-in-out infinite; } .chat-bubble.q2 { align-self: flex-start; background: var(--color-neutral-200); animation: chat3 6s ease-in-out infinite; } html[dir='rtl'] .chat-bubble.q, html[dir='rtl'] .chat-bubble.q2 { align-self: flex-end; } html[dir='rtl'] .chat-bubble.a { align-self: flex-start; } @keyframes chat1 { 0% { opacity: 0; transform: translateY(6px); } 6% { opacity: 1; transform: translateY(0); } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } } @keyframes chat2 { 0%, 33% { opacity: 0; transform: translateY(6px); } 39% { opacity: 1; transform: translateY(0); } 63% { opacity: 1; } 69% { opacity: 0; } 100% { opacity: 0; } } @keyframes chat3 { 0%, 66% { opacity: 0; transform: translateY(6px); } 72% { opacity: 1; transform: translateY(0); } 96% { opacity: 1; } 100% { opacity: 0; } } .flow-visual { position: relative; height: 200px; background-color: var(--color-surface); background-image: radial-gradient(var(--color-neutral-300) 1px, transparent 1px); background-size: 14px 14px; overflow: hidden; } .flow-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; } html[dir='rtl'] .flow-node { transform: translate(50%, -50%); } .flow-node .box { width: 40px; height: 40px; border-radius: 9px; border: 1.5px solid var(--color-divider); background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-accent); animation: nodePulse 5.6s linear infinite; } .flow-node span { font-size: 7.5px; font-weight: 600; color: var(--color-text); } @keyframes nodePulse { 0% { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); } 8% { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } 18% { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); } 100% { background: var(--color-surface); color: var(--color-text); border-color: var(--color-divider); } } /* ========================================================================== AI AGENTS ========================================================================== */ .dept-nodes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 8px; } .dept-node { padding: 15px 8px; text-align: center; font-size: 13px; font-weight: 500; cursor: pointer; background: transparent; width: 100%; transition: transform 0.15s ease, background 0.15s ease; } .dept-node:hover, .dept-node:focus-visible { background: var(--color-accent-100); transform: translateY(-2px); } .flow-center { display: flex; justify-content: center; } .ai-layer { background: var(--color-accent-900); color: #fff; text-align: center; padding: 22px; font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; animation: pulseGlowLayer 2.8s ease-in-out infinite; } @keyframes pulseGlowLayer { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 0%, transparent); } } .ai-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* ========================================================================== HOW EVERYTHING CONNECTS ========================================================================== */ .connect-section { background: var(--color-accent-900); color: #fff; padding-block: 72px; } .connect-section h2 { color: #fff; max-width: 700px; margin-bottom: 48px; } .connect-section .kicker { color: var(--color-accent-300); } .stage-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .stage { flex: 1; min-width: 150px; text-align: center; padding: 15px 8px; font-size: 13px; border: 1px solid color-mix(in srgb, #fff 30%, transparent); } .stage.is-solid { background: var(--color-accent); font-weight: 600; border-color: var(--color-accent); } .stage-arrow { color: color-mix(in srgb, #fff 45%, transparent); font-size: 20px; padding-inline: 6px; } /* ========================================================================== WHAT WE'VE BUILT ========================================================================== */ .built-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } .built-card { padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; transition: transform 0.2s ease, box-shadow 0.2s ease; background: transparent; width: 100%; text-align: start; cursor: pointer; } .built-card:hover, .built-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); } .built-card.single { grid-template-columns: 1fr; } .built-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .built-copy .card-title { font-size: 22px; margin-bottom: 8px; } .built-copy .card-body { font-size: 14px; margin-bottom: 16px; max-width: 640px; } .built-cta { font-size: 12.5px; font-weight: 600; color: var(--color-accent-700); display: inline-flex; align-items: center; gap: 4px; } .built-visual { border: 1px solid var(--color-divider); padding: 18px; background: var(--color-surface); } .built-visual-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 14px; } .built-bars { display: flex; flex-direction: column; gap: 12px; } .built-bar-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } .built-bar-track { height: 5px; background: var(--color-neutral-200); } .built-bar-fill { height: 100%; background: var(--color-accent); } .built-chat { display: flex; flex-direction: column; gap: 10px; } .built-chat .chat-bubble { animation: none; max-width: 82%; padding: 10px 14px; font-size: 13px; } .chain-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 8px; } .chain-step { flex: 1; min-width: 110px; text-align: center; padding: 12px 6px; border: 1px solid var(--color-divider); font-size: 12px; } .chain-step.is-solid { background: var(--color-accent); color: #fff; font-weight: 600; border-color: var(--color-accent); } .chain-arrow { color: var(--color-neutral-500); font-size: 16px; padding-inline: 4px; } /* ========================================================================== USE CASES BY DEPARTMENT ========================================================================== */ .dept-picker { margin-bottom: 36px; } .usecases-panel { padding: 32px; } .usecases-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; } .usecase-item { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); } .usecase-item svg { color: var(--color-accent); flex: none; } /* ========================================================================== HOW WE WORK ========================================================================== */ .process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .process-step { border-top: 2px solid var(--color-accent); padding-top: 14px; } .process-num { font-family: var(--font-heading); font-size: 28px; color: var(--color-accent-400); margin-bottom: 10px; } .process-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; margin-bottom: 6px; } .process-body { font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.45; } /* ========================================================================== IMPACT ========================================================================== */ .impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .impact-tile { padding: 24px; } .impact-value { font-family: var(--font-heading); font-weight: 600; font-size: 42px; color: var(--color-accent-700); line-height: 1; margin-bottom: 6px; } .impact-unit { font-size: 11px; color: var(--color-neutral-700); margin-bottom: 14px; } .impact-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; } .impact-note { font-size: 10px; color: var(--color-neutral-700); } /* ========================================================================== ABOUT ========================================================================== */ .about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .about-copy p { color: var(--color-neutral-700); font-size: 15.5px; max-width: 520px; } .about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .about-fact { padding: 18px; } .about-fact-label { font-size: 12px; color: var(--color-neutral-700); margin-bottom: 6px; } .about-fact-value { font-family: var(--font-heading); font-weight: 600; font-size: 18px; } /* ========================================================================== FINAL CTA ========================================================================== */ .final-cta { background: var(--color-accent-900); color: #fff; padding-block: 84px; text-align: center; } .final-cta h2 { color: #fff; max-width: 720px; margin: 0 auto 16px; } .final-cta p { color: color-mix(in srgb, #fff 75%, transparent); max-width: 520px; margin: 0 auto 36px; } .final-cta .hero-ctas { justify-content: center; } .final-cta .btn-secondary { border-color: color-mix(in srgb, #fff 40%, transparent); color: #fff; } .final-cta .btn-secondary:hover { background: color-mix(in srgb, #fff 10%, transparent); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { padding-block: 56px 0; border-top: 1px solid var(--color-divider); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .footer-brand img { height: 32px; width: auto; margin-bottom: 12px; } .footer-tagline { font-size: 12.5px; color: var(--color-neutral-700); max-width: 240px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col-header { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } .footer-col a { font-size: 13px; color: var(--color-text); } .footer-address { font-size: 13px; color: var(--color-neutral-700); } .footer-social { display: flex; gap: 8px; margin-top: 6px; } .footer-bottom { padding: 28px 0 32px; font-size: 11.5px; color: var(--color-neutral-700); } /* Hover/focus tooltip — shows the app name above social icons (and any other .has-tooltip element). Centered horizontally, so it needs no RTL-specific mirroring beyond the rest of the page's dir switching. */ .has-tooltip { position: relative; } .has-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-accent-900); color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; padding: 5px 10px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5; } .has-tooltip::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-accent-900); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 5; } .has-tooltip:hover::after, .has-tooltip:hover::before, .has-tooltip:focus-visible::after, .has-tooltip:focus-visible::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ========================================================================== MODAL / POPUP — reusable across all detail views ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 64px 24px; background: color-mix(in srgb, var(--color-accent-900) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow-y: auto; } .modal-backdrop.is-open { display: flex; } .modal-panel { width: 100%; max-width: 720px; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); position: relative; max-height: calc(100vh - 128px); display: flex; flex-direction: column; animation: modalIn 0.22s ease both; } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 18px; border-bottom: 1px solid var(--color-divider); flex: none; } .modal-head-text .tag { margin-bottom: 10px; } .modal-head-text h3 { font-size: 26px; margin-bottom: 4px; } .modal-head-text p { margin: 0; color: var(--color-neutral-700); font-size: 14px; } .modal-close { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-divider); cursor: pointer; color: var(--color-text); } .modal-close:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .modal-body { padding: 24px 28px 32px; overflow-y: auto; } .modal-body h4 { font-size: 15px; color: var(--color-accent-700); margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-heading); } .modal-body h4:first-child { margin-top: 0; } .modal-body p { font-size: 14.5px; color: var(--color-neutral-800); line-height: 1.65; } .modal-list { display: flex; flex-direction: column; gap: 0; margin: 4px 0 8px; } .modal-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); } .modal-list li svg { color: var(--color-accent); margin-top: 3px; flex: none; } .modal-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; } .modal-visual { border: 1px solid var(--color-divider); background: var(--color-surface); padding: 18px; margin: 4px 0 8px; } .modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* dept-agent modal chip grid (systems it connects to) */ .connects-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } /* body scroll lock while a modal is open */ body.modal-open { overflow: hidden; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-diagram { max-width: 420px; margin-inline: auto; } .solutions-grid { grid-template-columns: repeat(3, 1fr); } .outcomes-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } .motion-grid { grid-template-columns: 1fr 1fr; } .dept-nodes { grid-template-columns: repeat(3, 1fr); row-gap: 10px; } .process-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } .impact-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; gap: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .built-card { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .nav-links { display: none; } .nav-toggle { display: flex; } } @media (max-width: 860px) { .nav-row { padding: 12px 20px; } .container { padding-inline: 20px; } .hero { padding-block: 40px 56px; } .section { padding-block: 48px; } } /* Below ~600px there isn't room for logo + lang switch + primary CTA + hamburger on one row — collapse to logo + hamburger only; the mobile menu panel carries the language switch and the CTA. */ @media (max-width: 600px) { .nav-cta-primary, .nav-actions .lang-switch { display: none; } } .mobile-menu { display: none; position: fixed; inset: 0; z-index: 60; background: var(--color-bg); padding: 20px; overflow-y: auto; } .mobile-menu.is-open { display: block; } .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; } .mobile-menu-links a { font-size: 20px; font-family: var(--font-heading); font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); } .mobile-menu-actions { display: flex; flex-direction: column; gap: 12px; } .mobile-menu-actions .btn { width: 100%; padding: 13px; font-size: 14px; } @media (max-width: 640px) { h1 { font-size: 36px; } h2 { font-size: 26px; } .hero-copy h1 { font-size: 36px; } .hero-copy p { font-size: 15.5px; } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; } .solutions-grid, .outcomes-grid, .motion-grid, .dept-nodes, .process-grid, .impact-grid { grid-template-columns: 1fr 1fr; } .usecases-list { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .about-facts { grid-template-columns: 1fr 1fr; } .stage-flow { flex-direction: column; align-items: stretch; } .stage-arrow { text-align: center; padding-block: 4px; transform: rotate(90deg); } .modal-grid-2 { grid-template-columns: 1fr; } /* Full-screen popup panel on mobile, per spec */ .modal-backdrop { padding: 0; } .modal-panel { max-width: none; width: 100%; height: 100%; max-height: 100%; border: none; } .modal-head { padding: 20px 18px 16px; } .modal-head-text h3 { font-size: 22px; } .modal-body { padding: 18px 18px 28px; } } @media (max-width: 420px) { .solutions-grid, .outcomes-grid, .motion-grid, .dept-nodes, .process-grid, .impact-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }