:root { --ink: #111217; --muted: #62656d; --line: #e3e4e8; --canvas: #fff; --panel: #f7f8fc; --night: #090d13; --accent: #173661; --shell: min(1088px, calc(100% - 48px)); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } button { font: inherit; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-weight: 600; } .shell { width: var(--shell); margin: 0 auto; }
.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: fixed; top: -4rem; left: 1rem; z-index: 30; padding: .75rem 1rem; border-radius: 8px; color: white; background: var(--ink); }.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 94%); transition: box-shadow .2s, backdrop-filter .2s; }.site-header.is-scrolled { box-shadow: 0 1px 0 rgb(17 18 23 / 8%); backdrop-filter: blur(14px); }.header-content { position: relative; display: flex; align-items: center; min-height: 56px; }.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; }.brand-logo { display: block; width: 132px; height: auto; }.site-navigation { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2rem; font-size: .82rem; color: #585b62; }.site-navigation > a:not(.nav-contact):hover, .site-navigation > a:not(.nav-contact):focus-visible { color: var(--ink); }.nav-contact { position: absolute; top: 12px; right: 0; padding: .55rem 1rem; border-radius: 999px; color: white; background: var(--ink); font-weight: 620; transition: transform .2s, background .2s; }.nav-contact:hover, .nav-contact:focus-visible { background: #252a33; transform: translateY(-1px); }.menu-toggle { display: none; border: 0; background: none; cursor: pointer; }
.hero { min-height: 728px; padding: 147px 0 124px; border-bottom: 1px solid var(--line); }.hero-grid { display: block; }.hero-copy { max-width: 896px; } h1 { max-width: 896px; margin-bottom: 2rem; font-size: clamp(3.5rem, 6.3vw, 4.75rem); line-height: 1.05; letter-spacing: -.026em; }.hero-intro { max-width: 640px; margin-bottom: 2.3rem; color: #5d6067; font-size: 1.12rem; line-height: 1.62; letter-spacing: -.018em; }.hero-actions { display: flex; align-items: center; gap: 2rem; }.button { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.25rem; border-radius: 999px; font-size: .88rem; font-weight: 650; transition: transform .2s, background .2s; }.button:hover, .button:focus-visible { transform: translateY(-2px); }.button-primary { color: white; background: var(--ink); }.button-primary:hover, .button-primary:focus-visible { background: #252a33; }.text-link { color: var(--accent); font-size: .9rem; font-weight: 620; }.text-link span { display: inline-block; margin-left: .25rem; transition: transform .2s; }.text-link:hover span, .text-link:focus-visible span { transform: translateX(3px); }
.section { padding: clamp(6rem, 11vw, 9.5rem) 0; }.eyebrow { margin: 0 0 1.3rem; color: #595d65; font-size: .72rem; font-weight: 680; letter-spacing: .17em; text-transform: uppercase; }.section-heading { max-width: 610px; }.section-heading h2, .clients-heading h2, .contact h2, .ai-copy h2 { margin-bottom: 0; font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1.1; letter-spacing: -.026em; }
.competencies { background: var(--panel); }.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }.service-card { min-height: 300px; padding: 2.35rem 2rem; border-right: 1px solid var(--line); }.service-card:last-child { border-right: 0; }.service-number { color: var(--accent); font-size: .74rem; font-weight: 680; letter-spacing: .06em; }.service-card h3 { margin: 2.25rem 0 1.25rem; font-size: 1.16rem; line-height: 1.35; letter-spacing: -.028em; }.service-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.62; }.competencies-note { max-width: 640px; margin: 2.8rem auto 0; color: #5e6168; text-align: center; font-size: .9rem; line-height: 1.6; }
.ai-section { padding: clamp(6rem, 11vw, 9.5rem) 0; color: white; background: var(--night); }.ai-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); align-items: center; gap: 5rem; min-height: 500px; }.eyebrow-light { color: #9ba0ab; }.ai-copy h2 { max-width: 500px; margin-bottom: 1.5rem; }.ai-copy > p:last-child { max-width: 495px; margin: 0; color: #b4b7c0; font-size: 1rem; line-height: 1.65; }.ai-visual { min-height: 390px; }.ai-visual svg { display: block; width: 100%; height: 100%; }.ai-glow { fill: #4857ca; opacity: .55; animation: pulse 4s ease-in-out infinite; }.ai-lines path { stroke-width: 1.25; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.6s ease forwards; }.ai-lines path:nth-child(2) { animation-delay: .2s; }.ai-lines path:nth-child(3) { animation-delay: .4s; }.ai-lines path:nth-child(4) { animation-delay: .6s; }.ai-nodes { fill: #e0ebff; }.ai-nodes .core { fill: white; filter: drop-shadow(0 0 8px #b8cbff); animation: core 4s ease-in-out infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes pulse { 50% { opacity: .3; transform: scale(1.3); } } @keyframes core { 50% { opacity: .65; transform: scale(1.3); } }
.process { background: white; }.process-layout { display: block; }.process .section-heading { max-width: 810px; margin-bottom: 3.75rem; }.process-list { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; list-style: none; }.process-list li { padding: 2rem; border-right: 1px solid var(--line); }.process-list li:last-child { border-right: 0; }.process-list > li > span { color: var(--accent); font-size: .74rem; font-weight: 680; letter-spacing: .06em; }.process-list h3 { margin: 2rem 0 .8rem; font-size: 1.2rem; letter-spacing: -.03em; }.process-list p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.58; }
.clients { background: var(--panel); }.clients-heading h2 { max-width: 730px; }.client-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 4rem 0 0; list-style: none; }.client-brand { display: flex; height: 112px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid var(--line); border-radius: 12px; background: white; }.client-logo { display: block; width: auto; max-width: 80%; height: auto; max-height: 48px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s; }.client-brand:hover .client-logo { filter: grayscale(0); opacity: 1; }
.contact { padding: clamp(6rem, 11vw, 9rem) 0; color: white; background: var(--night); }.contact-content { max-width: 770px; }.contact h2 { max-width: 720px; margin-bottom: 2rem; }.button-light { color: var(--ink); background: white; }.site-footer { padding: 2rem 0; color: #aeb1b8; background: #05080c; font-size: .8rem; }.footer-content { display: flex; align-items: center; gap: 1.5rem; }.footer-content p { margin: 0; }.footer-content a:not(.brand) { color: white; }.footer-brand { margin-right: auto; }.footer-brand .brand-logo { filter: invert(1); }
:focus-visible { outline: 3px solid #416c9d; outline-offset: 3px; }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); }.service-card:nth-child(2) { border-right: 0; }.service-card:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }.ai-layout { grid-template-columns: 1fr; gap: 2rem; }.ai-visual { max-width: 560px; width: 100%; margin: 0 auto; }.client-list { grid-template-columns: repeat(3, 1fr); }.client-brand:last-child { grid-column: 2; } }
@media (max-width: 650px) { :root { --shell: min(100% - 40px, 1088px); }.header-content { min-height: 64px; }.menu-toggle { display: grid; gap: 5px; place-content: center; width: 40px; height: 40px; margin-left: auto; }.menu-toggle > span:not(.sr-only) { display: block; width: 19px; height: 1.5px; background: var(--ink); }.menu-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(3.25px) rotate(45deg); }.menu-toggle[aria-expanded="true"] > span:nth-of-type(3) { transform: translateY(-3.25px) rotate(-45deg); }.site-navigation { position: fixed; top: 64px; right: 0; left: 0; display: grid; gap: 0; max-height: 0; overflow: hidden; background: rgb(255 255 255 / 98%); opacity: 0; transition: max-height .25s, opacity .25s; }.site-navigation.is-open { max-height: 350px; border-bottom: 1px solid var(--line); opacity: 1; }.site-navigation a { padding: 1rem calc((100vw - var(--shell)) / 2); }.nav-contact { position: static; margin: .35rem calc((100vw - var(--shell)) / 2) 1rem; text-align: center; }.hero { min-height: auto; padding: 6.7rem 0 5.5rem; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }.section, .ai-section { padding: 5rem 0; }.service-grid, .process-list { grid-template-columns: 1fr; }.service-card, .service-card:nth-child(2), .process-list li { border-right: 0; border-bottom: 1px solid var(--line); }.service-card:last-child, .process-list li:last-child { border-bottom: 0; }.service-card { min-height: 0; padding: 1.8rem; }.service-card h3 { margin-top: 1.5rem; }.ai-layout { min-height: 0; }.ai-visual { min-height: 270px; }.client-list { grid-template-columns: repeat(2, 1fr); }.client-brand:last-child { grid-column: 1 / -1; }.footer-content { display: grid; gap: .8rem; }.footer-brand { margin: 0 0 .35rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }