@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/geist-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./assets/fonts/geist-mono-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --site-max-width: 90rem;
  --site-gutter: clamp(24px, 6vw, 96px);
  --ink: #05082d;
  --ink-soft: #34364a;
  --paper: #eaf6fc;
  --white: #ffffff;
  --sky: #b7ddf4;
  --blue: #2e7bc1;
  --gray-light: #f4f5f7;
  --text: #34364a;
  --muted: #b7ddf4;
  --line: rgba(255, 255, 255, 0.14);
  --line-dark: rgba(5, 8, 45, 0.14);
  --font-sans: "Geist", Inter, Arial, Helvetica, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: var(--font-sans);
  --body: var(--font-sans);
  --font-size-display: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-h2: clamp(2.125rem, 4vw, 3.25rem);
  --font-size-h3: clamp(1.5rem, 2vw, 1.875rem);
  --font-size-body: 1.0625rem;
  --font-size-lead: clamp(1.1875rem, 1.5vw, 1.375rem);
  --font-size-small: .8125rem;
  --line-height-display: 1.02;
  --line-height-heading: 1.1;
  --line-height-body: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-display: -.04em;
  --tracking-heading: -.03em;
  --button-primary: #2769f2;
  --button-primary-deep: #2f7fb7;
  --button-gradient: linear-gradient(100deg, #2f70e7 0%, #2f93c6 100%);
  --button-gradient-hover: linear-gradient(100deg, #2866dc 0%, #2887ba 100%);
  --button-gradient-border: rgba(151, 216, 255, .78);
  --button-gradient-shadow: 0 0 0 1px rgba(48, 132, 239, .16), 0 12px 30px rgba(39, 105, 242, .24);
  --button-border: #c7d8ea;
  --button-surface: rgba(255, 255, 255, .82);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--text); font-family: var(--body); font-size: var(--font-size-body); font-weight: var(--weight-regular); line-height: var(--line-height-body); font-synthesis: none; }
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--sky); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 82px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; gap: 36px; color: var(--white); border-bottom: 1px solid var(--line); transition: background .25s ease, height .25s ease; }
.site-header.scrolled { height: 68px; background: rgba(5, 8, 45, .92); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.brand-logo { display: block; width: 120px; height: auto; }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; }
.desktop-nav a { font-size: .9rem; color: rgba(255,255,255,.74); text-decoration: none; transition: color .2s; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--white); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; text-decoration: none; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.button-light { border-color: rgba(255,255,255,.35); color: var(--white); }
.button-light:hover { background: var(--white); color: var(--ink); }
.button-accent { background: var(--sky); color: var(--ink); box-shadow: 0 12px 40px rgba(183,221,244,.2); }
.menu-toggle, .mobile-nav { display: none; }

.hero { min-height: max(100vh, 1180px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); align-items: center; gap: clamp(40px, 7vw, 120px); padding: 116px clamp(24px, 6vw, 96px) 390px; color: var(--white); background: var(--ink); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -30% 42% auto -18%; aspect-ratio: 1; background: radial-gradient(circle, rgba(46,123,193,.38), transparent 67%); z-index: -2; }
.hero::after { content: ""; position: absolute; width: 32vw; min-width: 420px; aspect-ratio: 1; right: -8%; bottom: -35%; border-radius: 50%; background: var(--sky); filter: blur(120px); opacity: .16; z-index: -2; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 78%, transparent); z-index: -1; }
.eyebrow { margin: 0 0 26px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .75rem; color: rgba(255,255,255,.66); }
.eyebrow span { width: 28px; height: 2px; background: var(--blue); }
.eyebrow.dark { color: var(--text); opacity: .72; }
.hero h1 { margin: 0; max-width: 820px; font-family: var(--display); font-size: clamp(3.25rem, 6.4vw, 7rem); font-weight: 600; line-height: .93; letter-spacing: -.06em; }
.hero h1 em { color: var(--sky); font-style: normal; }
.hero-lead { max-width: 660px; margin: 32px 0 0; color: #c4c9d8; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 40px; }
.text-link { display: inline-flex; gap: 12px; text-underline-offset: 5px; font-weight: 600; }
.hero-visual { position: relative; width: min(100%, 560px); aspect-ratio: .92; justify-self: end; }
.orbit { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.orbit-two { inset: 21%; border-color: rgba(183,221,244,.55); }
.signal-card { position: absolute; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.signal-card-main { left: 3%; top: 13%; width: 62%; height: 58%; padding: 28px; color: var(--ink); background: var(--sky); transform: rotate(-7deg); }
.signal-label { font-family: var(--display); font-size: .74rem; letter-spacing: .14em; }
.signal-card-main strong { font-family: var(--display); font-size: clamp(2rem, 4vw, 4.6rem); line-height: .82; letter-spacing: -.08em; }
.signal-card-small { right: 0; bottom: 12%; width: 52%; height: 30%; padding: 22px; background: var(--blue); transform: rotate(6deg); }
.signal-card-small span { width: max-content; padding: 2px 6px; color: var(--ink); background: var(--white); font-size: .8rem; }
.signal-card-small strong { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1; }
.visual-dot { position: absolute; right: 16%; top: 6%; width: 18px; aspect-ratio: 1; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 12px rgba(183,221,244,.12); }
.hero-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(5,8,45,.9); box-shadow: 0 -30px 80px rgba(5,8,45,.25); backdrop-filter: blur(14px); }
.hero-services { padding: 0 clamp(24px, 4vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(183,221,244,.2); border-bottom: 1px solid rgba(183,221,244,.16); }
.hero-service-link { min-width: 0; min-height: 166px; padding: 22px clamp(20px, 2.4vw, 38px); display: flex; flex-direction: column; color: var(--white); text-decoration: none; border-left: 1px solid rgba(183,221,244,.14); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hero-service-link:last-child { border-right: 1px solid rgba(183,221,244,.14); }
.hero-service-link:hover, .hero-service-link:focus-visible, .hero-service-link:first-child { background: linear-gradient(135deg, rgba(46,123,193,.08), rgba(46,123,193,.2)); box-shadow: inset 0 -3px 0 var(--blue); border-color: rgba(183,221,244,.34); }
.hero-service-icon { width: 44px; height: 44px; margin-bottom: 12px; display: grid; place-items: center; color: #2e7bc1; background: rgba(255,255,255,.045); border-radius: 50%; }
.hero-service-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-service-link strong { font-family: var(--display); font-size: 1rem; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; }
.hero-service-link > span:not(.hero-service-icon) { margin-top: 3px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hero-service-link small { margin-top: auto; padding-top: 10px; color: #dce7ff; font-size: .72rem; }
.hero-service-link small i { margin-left: 10px; color: #2e7bc1; font-size: 1rem; font-style: normal; }
.hero-proof { background: rgba(4,7,27,.74); }
.proof-metrics { min-height: 126px; padding: 0 clamp(24px, 4vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.65fr); align-items: center; }
.proof-stat { min-width: 0; padding: 20px clamp(18px, 2vw, 34px); display: flex; flex-direction: column; gap: 3px; border-left: 1px solid rgba(183,221,244,.08); }
.proof-stat strong { font-family: var(--display); font-size: clamp(2rem, 2.5vw, 2.85rem); line-height: 1; letter-spacing: -.05em; }
.proof-stat span { color: var(--muted); font-size: .77rem; }
.proof-metrics > p { max-width: 520px; margin: 0; padding: 20px clamp(22px, 3vw, 48px); color: #dbe8f4; border-left: 1px solid rgba(183,221,244,.08); font-size: .9rem; line-height: 1.55; }
.proof-metrics > p::after { content: ""; width: 38px; height: 2px; margin-top: 14px; display: block; background: var(--blue); }
.proof-brands { min-height: 68px; padding: 0 clamp(24px, 4vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: clamp(22px, 3vw, 52px); overflow-x: auto; border-top: 1px solid rgba(183,221,244,.12); }
.proof-brands > * { flex: 0 0 auto; }
.proof-label { display: inline-flex; align-items: center; gap: 14px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.proof-label::after { content: ""; width: 44px; height: 1px; background: var(--blue); }
.proof-brands strong { color: #d9e3ef; font-family: var(--display); font-size: clamp(.95rem, 1.35vw, 1.3rem); opacity: .82; }
.proof-brands a { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .7rem; text-decoration: none; white-space: nowrap; }
.proof-brands a span { color: #2e7bc1; font-size: 1.1rem; }

.section { padding: clamp(86px, 11vw, 160px) clamp(24px, 6vw, 96px); }
.section-title em {
  color: #2e7bc1;
  font-style: normal;
}
.section-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); column-gap: 60px; align-items: end; margin-bottom: 64px; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; }
.section-heading > p:last-child { margin: 0 0 8px; color: var(--text); max-width: 500px; }
.service-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.service-card { grid-column: span 4; min-height: 390px; position: relative; padding: 28px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-dark); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 70px rgba(5,8,45,.1); }
.service-featured { grid-column: span 8; color: var(--white); background: var(--ink); }
.service-index { position: absolute; top: 26px; right: 26px; font-family: var(--display); font-size: .75rem; color: var(--text); opacity: .55; }
.service-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line-dark); font-size: 1.5rem; }
.service-featured .service-icon { color: var(--sky); border-color: var(--line); }
.kicker { margin: auto 0 12px; color: var(--text); font-size: .72rem; letter-spacing: .16em; font-weight: 800; }
.service-featured .kicker { color: var(--sky); }
.service-card h3 { max-width: 520px; margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.45rem, 2.1vw, 2.15rem); letter-spacing: -.035em; line-height: 1.08; }
.service-card > p:not(.kicker) { max-width: 510px; margin: 0; color: var(--text); }
.service-featured > p:not(.kicker) { color: var(--muted); }
.service-card a { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-decoration: none; font-size: .9rem; font-weight: 700; }

.about { padding-top: 0; color: var(--white); background: var(--ink); }
.about-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 8vw, 120px); padding-top: clamp(86px, 11vw, 150px); }
.about-statement h2 { margin: 0; max-width: 860px; font-family: var(--display); font-size: clamp(2.8rem, 5.2vw, 5.9rem); line-height: .98; letter-spacing: -.06em; font-weight: 600; }
.about-statement h2 em { color: var(--sky); font-style: normal; }
.about-copy { padding-top: 52px; }
.about-copy p { margin: 0 0 22px; color: var(--muted); font-size: 1.05rem; }
.about-copy a:not(.button) { color: var(--white); text-underline-offset: 4px; }
.button-outline { margin-top: 16px; border-color: rgba(255,255,255,.38); color: var(--white); }
.button-outline:hover { background: var(--white); color: var(--ink); }
.about-art { grid-column: 1 / -1; min-height: 470px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--blue); }
.about-art::before { content: "MTA GROUP"; position: absolute; left: -1vw; bottom: -5vw; color: rgba(255,255,255,.12); font-family: var(--display); font-size: clamp(5rem, 15vw, 15rem); font-weight: 700; letter-spacing: -.08em; white-space: nowrap; }
.about-art img { position: relative; z-index: 1; width: min(48%, 560px); max-height: 380px; object-fit: contain; filter: brightness(0) invert(1); opacity: .88; }
.about-badge { position: absolute; right: 5%; top: 10%; z-index: 2; width: 176px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 50%; color: var(--ink); background: var(--sky); transform: rotate(6deg); }
.about-badge strong { font-family: var(--display); font-size: 2rem; line-height: 1; letter-spacing: -.06em; }
.about-badge span { font-size: .7rem; line-height: 1.35; text-transform: uppercase; font-weight: 800; }

.projects { background: var(--paper); }
.project-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-card { min-height: 620px; position: relative; overflow: hidden; padding: 30px; display: flex; flex-direction: column; text-decoration: none; }
.project-card::after { content: ""; position: absolute; inset: auto -10% -34% auto; width: 72%; aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; opacity: .18; transition: transform .5s ease; }
.project-card:hover::after { transform: scale(1.15); }
.project-novakid { color: var(--white); background: var(--blue); }
.project-forell { color: var(--ink); background: var(--sky); }
.project-top { display: flex; justify-content: space-between; gap: 20px; font-size: .7rem; letter-spacing: .14em; font-weight: 800; }
.project-mark { margin: auto; font-family: var(--display); font-size: clamp(8rem, 18vw, 17rem); line-height: .7; font-weight: 700; letter-spacing: -.12em; opacity: .92; transform: translateY(-4%); }
.project-copy { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 30px; }
.project-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5.2rem); line-height: .85; letter-spacing: -.06em; }
.project-copy p { max-width: 460px; margin: 0; grid-row: 2; opacity: .75; }
.project-arrow { grid-row: 1 / 3; grid-column: 2; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.4rem; transition: transform .3s ease, background .3s ease; }
.project-card:hover .project-arrow { transform: rotate(45deg); background: var(--sky); color: var(--ink); border-color: var(--sky); }

.process { color: var(--white); background: var(--ink); }
.process-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.process-intro .eyebrow { align-self: start; }
.process-intro h2 { margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: .96; letter-spacing: -.06em; font-weight: 600; }
.process-intro em { color: var(--sky); font-style: normal; }
.process-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border-top: 1px solid var(--line); }
.process-step { min-height: 320px; padding: 28px 28px 36px 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.process-step:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.process-step span { color: var(--sky); font-family: var(--display); font-size: .76rem; }
.process-step h3 { margin: auto 0 14px; font-family: var(--display); font-size: 1.7rem; letter-spacing: -.035em; }
.process-step p { margin: 0; color: var(--muted); }

.trust { background: var(--white); }
.trust-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 70px; }
.trust-heading .eyebrow { max-width: 250px; }
.trust-heading h2 { margin: 0; max-width: 960px; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .96; letter-spacing: -.06em; font-weight: 600; }
.logo-strip { margin: 0 calc(clamp(24px, 6vw, 96px) * -1); padding: 30px clamp(24px, 6vw, 96px); display: flex; justify-content: space-between; gap: 36px; overflow-x: auto; color: var(--text); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); font-family: var(--display); font-weight: 700; letter-spacing: .08em; opacity: .58; }
.testimonial-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial { min-height: 440px; margin: 0; padding: 30px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line-dark); }
.testimonial.featured { color: var(--white); background: var(--ink); border-color: var(--blue); box-shadow: inset 0 6px 0 var(--blue); transform: translateY(-18px); }
.quote-mark { color: var(--blue); font-family: Georgia, serif; font-size: 5rem; line-height: 1; }
.testimonial.featured .quote-mark { color: var(--sky); }
.testimonial > p { margin: auto 0 36px; font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.38; letter-spacing: -.02em; }
.testimonial footer { display: flex; flex-direction: column; }
.testimonial footer strong { font-size: .9rem; }
.testimonial footer span { color: var(--text); font-size: .75rem; opacity: .72; }
.testimonial.featured footer span { color: var(--muted); opacity: 1; }

.insights { color: var(--white); background: var(--ink-soft); }
.insights-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 58px; }
.insights-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .96; letter-spacing: -.06em; font-weight: 600; }
.article-list { border-top: 1px solid var(--line); }
.article { min-height: 148px; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s ease, padding .25s ease; }
.article:hover { padding-left: 18px; background: rgba(255,255,255,.035); }
.article-number { color: var(--sky); font-family: var(--display); font-size: .78rem; }
.article p { margin: 0 0 8px; color: var(--muted); font-size: .68rem; letter-spacing: .16em; font-weight: 800; }
.article h3 { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 500; }
.article > span:last-child { font-size: 1.4rem; }

.contact { color: var(--white); background: var(--blue); }
.contact .eyebrow { width: max-content; padding: 6px 10px; color: var(--white); background: var(--ink); }
.contact-row { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; }
.contact h2 { margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 7vw, 8rem); line-height: .88; letter-spacing: -.07em; font-weight: 600; }
.contact h2 em { color: var(--sky); font-style: normal; }
.contact-action { padding-bottom: 12px; }
.contact-action p { margin: 0 0 28px; color: var(--white); font-size: 1.2rem; font-weight: 700; }
.site-footer { padding: 44px clamp(24px, 6vw, 96px); display: grid; grid-template-columns: 1fr auto; gap: 50px; color: var(--white); background: var(--ink); border-top: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); }
.footer-logo { display: block; width: 142px; height: auto; }
.footer-brand > span:last-child { color: var(--muted); font-family: var(--body); font-size: .78rem; }
.footer-nav { display: flex; gap: 24px; align-items: center; }
.footer-nav a, .footer-meta a { color: var(--muted); font-size: .82rem; text-decoration: none; }
.footer-meta { grid-column: 1 / -1; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.prototype-note { color: var(--muted); text-align: center; }

.reveal-ready { opacity: 0; transform: translateY(22px); }
.reveal-ready.revealed { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }
.hero .reveal-ready { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .desktop-nav, .header-actions { display: none; }
  .menu-toggle { margin-left: auto; width: 46px; height: 46px; display: grid; place-content: center; gap: 6px; color: var(--white); background: transparent; border: 1px solid var(--line); }
  .menu-toggle span { width: 20px; height: 1px; background: currentColor; }
  .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; padding: 24px; background: var(--ink); border-top: 1px solid var(--line); }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { padding: 12px 0; text-decoration: none; font-weight: 700; }
  .hero { min-height: 1420px; grid-template-columns: 1fr; align-items: start; padding-top: 140px; padding-bottom: 600px; }
  .hero-visual { position: absolute; width: 330px; min-width: 0; right: 5%; top: 590px; opacity: .82; z-index: -1; }
  .hero-copy { max-width: 740px; }
  .hero-services { padding: 0 24px; grid-template-columns: repeat(2, 1fr); }
  .hero-service-link { min-height: 150px; }
  .hero-service-link:nth-child(n + 3) { border-top: 1px solid rgba(183,221,244,.14); }
  .proof-metrics { min-height: 190px; padding: 0 24px; grid-template-columns: repeat(3, 1fr); }
  .proof-metrics > p { max-width: none; grid-column: 1 / -1; border-top: 1px solid rgba(183,221,244,.08); }
  .proof-brands { padding: 0 24px; }
  .service-card { grid-column: span 6; }
  .service-featured { grid-column: span 12; }
  .project-card { min-height: 540px; }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .process-step:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .process-step:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .testimonial:last-child { grid-column: 1 / -1; min-height: 330px; }
  .contact-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .site-header { height: 70px; }
  .brand-logo { width: 98px; }
  .hero { min-height: 1540px; padding-top: 118px; padding-bottom: 676px; align-items: start; }
  .hero h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .hero-visual { display: none; }
  .hero-copy { max-width: none; }
  .hero-services { padding: 0 18px; }
  .hero-service-link { min-height: 166px; padding: 18px 14px; }
  .hero-service-icon { width: 38px; height: 38px; }
  .hero-service-link strong { font-size: .9rem; }
  .hero-service-link > span:not(.hero-service-icon) { font-size: .72rem; }
  .proof-metrics { min-height: 236px; padding: 0 18px; }
  .proof-stat { padding: 18px 8px; }
  .proof-stat strong { font-size: 1.75rem; }
  .proof-stat span { font-size: .62rem; line-height: 1.3; }
  .proof-metrics > p { padding: 18px 8px; font-size: .78rem; }
  .proof-brands { min-height: 76px; padding: 0 18px; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .service-card, .service-featured { grid-column: span 12; min-height: 340px; }
  .about-layout, .process-intro { grid-template-columns: 1fr; gap: 34px; }
  .about-copy { padding-top: 0; }
  .about-art { min-height: 380px; }
  .about-art img { width: 78%; }
  .about-badge { width: 140px; }
  .project-list { grid-template-columns: 1fr; }
  .project-card { min-height: 500px; }
  .project-top span:last-child { display: none; }
  .process-list { grid-template-columns: 1fr; }
  .process-step, .process-step:nth-child(even) { min-height: 250px; padding: 26px 0; border-left: 0; }
  .trust-heading, .insights-heading { align-items: flex-start; flex-direction: column; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial, .testimonial.featured, .testimonial:last-child { grid-column: auto; min-height: 360px; transform: none; }
  .article { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 22px 0; }
  .article:hover { padding-left: 0; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-logo { width: 124px; }
  .footer-nav { flex-wrap: wrap; }
  .footer-meta { flex-wrap: wrap; }
  .prototype-note { order: 3; width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Light direction — hero and trust dock */
.site-header {
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(5, 8, 45, .1);
  backdrop-filter: blur(18px);
}
.site-header.scrolled { background: rgba(255, 255, 255, .94); box-shadow: 0 10px 40px rgba(5, 8, 45, .06); }
.brand-logo, .footer-logo { filter: brightness(0) saturate(100%) invert(7%) sepia(41%) saturate(2540%) hue-rotate(215deg) brightness(74%) contrast(119%); }
.desktop-nav a { color: rgba(5, 8, 45, .68); }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--ink); }
.header-cta { color: var(--ink); border-color: rgba(5, 8, 45, .2); background: var(--white); }
.header-cta:hover { color: var(--white); background: var(--ink); }

.hero {
  color: var(--ink);
  background: #f8fbff;
}
.hero::before { background: radial-gradient(circle, rgba(46, 123, 193, .16), transparent 67%); }
.hero::after { background: #2e7bc1; opacity: .24; }
.hero-grid { background-image: linear-gradient(rgba(5,8,45,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(5,8,45,.035) 1px, transparent 1px); }
.hero .eyebrow { color: rgba(5, 8, 45, .58); }
.hero h1 em { color: #2e7bc1; }
.hero-lead { color: #56617a; }
.button-accent { color: var(--white); background: #2769f2; box-shadow: 0 14px 38px rgba(39, 105, 242, .2); }
.orbit { border-color: rgba(5, 8, 45, .13); }
.orbit-two { border-color: rgba(46, 123, 193, .28); }
.signal-card { box-shadow: 0 24px 80px rgba(40, 76, 130, .15); }
.signal-card-main { background: #dceeff; }
.signal-card-small { color: var(--white); background: #2e7bc1; }
.signal-card-small span { color: var(--ink); background: var(--white); }
.visual-dot { background: #2e7bc1; box-shadow: 0 0 0 12px rgba(46,123,193,.1); }

.hero-dock { background: var(--white); box-shadow: 0 -24px 70px rgba(36, 64, 110, .08); backdrop-filter: none; }
.hero-services { gap: 12px; padding: 24px clamp(24px, 4vw, 72px); border: 0; }
.hero-service-link {
  min-height: 154px;
  position: relative;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(39, 76, 125, .035);
}
.hero-service-link:last-child { border-right: 1px solid #dfe6f0; }
.hero-service-link:hover, .hero-service-link:focus-visible, .hero-service-link:first-child { background: var(--white); border-color: #b7cdf5; box-shadow: 0 18px 42px rgba(46, 123, 193, .09); }
.hero-service-icon { width: 44px; height: 44px; margin: 0; color: #2e7bc1; background: #eef5ff; }
.hero-service-link strong { font-size: 1rem; text-decoration: none; }
.hero-service-link > span:not(.hero-service-icon) { grid-column: 1 / -1; align-self: start; margin: 0; color: #596780; font-size: .78rem; line-height: 1.45; }
.hero-service-link small { display: none; }
.service-arrow { color: #2e7bc1; font-size: 1.15rem; font-style: normal; }
.hero-proof { background: var(--white); }
.proof-brands { min-height: 88px; padding: 12px clamp(24px, 4vw, 72px); border-top: 0; border-bottom: 1px solid #e4eaf2; }
.proof-label { min-width: 164px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; color: #53617b; letter-spacing: 0; text-transform: none; }
.proof-label::after { display: none; }
.proof-label b { color: #2e7bc1; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.proof-label small { font-size: .76rem; }
.proof-brands strong { color: #46516a; font-size: clamp(.92rem, 1.2vw, 1.18rem); opacity: .78; }
.proof-metrics { min-height: 118px; padding: 0 clamp(24px, 4vw, 72px); grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(320px, 1.15fr); border-bottom: 1px solid #e4eaf2; }
.proof-stat { padding: 22px clamp(18px, 2.5vw, 42px); border-left: 0; border-right: 1px solid #dfe6f0; }
.proof-stat strong { color: var(--ink); }
.proof-stat span { color: #586680; }
.proof-support { min-width: 0; padding: 18px clamp(20px, 2.5vw, 42px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.proof-support > strong { color: #2e7bc1; font-family: var(--display); font-size: 4.4rem; font-weight: 500; line-height: .6; }
.proof-support span { color: #53617b; font-size: .76rem; line-height: 1.35; }
.proof-support em { color: #2e7bc1; font-family: var(--display); font-size: .7rem; font-style: italic; line-height: 1.3; transform: rotate(-5deg); }

@media (max-width: 1020px) {
  .menu-toggle { color: var(--ink); border-color: rgba(5, 8, 45, .16); }
  .mobile-nav { color: var(--ink); background: rgba(255, 255, 255, .98); border-top-color: rgba(5, 8, 45, .1); }
  .hero-service-link:nth-child(n + 3) { border-top-color: #dfe6f0; }
  .proof-metrics { grid-template-columns: repeat(3, 1fr); }
  .proof-support { grid-column: 1 / -1; border-top: 1px solid #e4eaf2; }
}

@media (max-width: 700px) {
  .hero-services { gap: 8px; padding: 16px 18px; }
  .hero-service-link { min-height: 156px; padding: 16px 14px; }
  .proof-brands { min-height: 86px; padding: 12px 18px; }
  .proof-label { min-width: 138px; }
  .proof-metrics { padding: 0 18px; }
  .proof-stat { padding: 18px 8px; }
  .proof-support { padding: 18px 8px; }
  .proof-support > strong { font-size: 3.6rem; }
}

/* Complete light system */
body { background: #f7faff; color: var(--ink-soft); }
.hero { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 980px; }
.services, .projects, .trust { background: #f7faff; }
.section-heading > p:last-child { color: #5b657a; }
.eyebrow.dark { color: #596780; opacity: 1; }

.service-card,
.service-featured {
  color: var(--ink);
  background: var(--white);
  border-color: #dfe6f0;
  border-radius: 10px;
  box-shadow: 0 12px 42px rgba(45, 75, 116, .045);
}
.service-featured { background: linear-gradient(135deg, #ffffff, #edf6ff); }
.service-featured .service-icon { color: #2e7bc1; background: #eef5ff; border-color: #d8e6f7; }
.service-featured .kicker { color: #2e7bc1; }
.service-card > p:not(.kicker), .service-featured > p:not(.kicker) { color: #5b657a; }
.service-card a { color: #2e7bc1; }

.about {
  color: var(--ink);
  background: #edf5fc;
  border-top: 1px solid #dfe8f2;
  border-bottom: 1px solid #dfe8f2;
}
.about .eyebrow { color: #596780; }
.about-statement h2 em { color: #2e7bc1; }
.about-copy p { color: #53617b; }
.about-copy a:not(.button) { color: var(--ink); }
.button-outline { color: var(--ink); border-color: rgba(5, 8, 45, .22); background: rgba(255, 255, 255, .5); }
.button-outline:hover { color: var(--white); background: var(--ink); }
.about-art { background: linear-gradient(135deg, #d8ebff, #bcdcff); border: 1px solid #c6daee; border-radius: 12px; }
.about-art::before { color: rgba(5, 8, 45, .07); }
.about-art img { filter: brightness(0) saturate(100%) invert(7%) sepia(41%) saturate(2540%) hue-rotate(215deg) brightness(74%) contrast(119%); opacity: .85; }
.about-badge { color: var(--white); background: #2e7bc1; box-shadow: 0 18px 44px rgba(46,123,193,.2); }

.project-card { border-radius: 12px; box-shadow: 0 18px 50px rgba(41, 73, 116, .08); }
.project-novakid { background: #2e7bc1; }
.project-forell { background: #d8ebff; }

.process {
  color: var(--ink);
  background: var(--white);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.process .eyebrow { color: #596780; }
.process-intro em { color: #2e7bc1; }
.process-list { border-top-color: #dfe6f0; }
.process-step { border-bottom-color: #dfe6f0; }
.process-step:not(:nth-child(3n + 1)) { border-left-color: #dfe6f0; }
.process-step span { color: #2e7bc1; }
.process-step p { color: #5b657a; }

.logo-strip { color: #46516a; border-color: #dfe6f0; opacity: .72; }
.testimonial { background: var(--white); border-color: #dfe6f0; border-radius: 10px; box-shadow: 0 12px 36px rgba(45, 75, 116, .045); }
.testimonial.featured { color: var(--ink); background: #edf6ff; border-color: #b7cdf5; box-shadow: inset 0 5px 0 #2e7bc1, 0 18px 48px rgba(46,123,193,.08); }
.quote-mark, .testimonial.featured .quote-mark { color: #2e7bc1; }
.testimonial footer span, .testimonial.featured footer span { color: #657086; opacity: 1; }

.insights {
  color: var(--ink);
  background: #edf5fc;
  border-top: 1px solid #dfe8f2;
  border-bottom: 1px solid #dfe8f2;
}
.insights .eyebrow { color: #596780; }
.insights .button-light { color: var(--ink); border-color: rgba(5, 8, 45, .2); background: rgba(255,255,255,.55); }
.insights .button-light:hover { color: var(--white); background: var(--ink); }
.article-list, .article { border-color: #d7e1eb; }
.article:hover { background: rgba(255,255,255,.56); }
.article-number, .article p { color: #2e7bc1; }

.contact {
  color: var(--ink);
  background: linear-gradient(135deg, #dceeff 0%, #eff7ff 62%, #ffffff 100%);
  border-bottom: 1px solid #d9e5f1;
}
.contact .eyebrow { color: var(--white); background: #2e7bc1; }
.contact h2 em { color: #2e7bc1; }
.contact-action p { color: #46536b; }

.site-footer { color: var(--ink); background: var(--white); border-top-color: #e0e7ef; }
.footer-brand > span:last-child,
.footer-nav a,
.footer-meta a,
.footer-meta,
.prototype-note { color: #657086; }
.footer-meta { border-top-color: #e0e7ef; }
.reveal-ready, .reveal-ready.revealed { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .hero { min-height: 1490px; padding-bottom: 700px; }
  .process-step:nth-child(even) { border-left-color: #dfe6f0; }
}

@media (max-width: 700px) {
  .hero { min-height: 1610px; padding-bottom: 742px; }
  .service-card, .service-featured, .project-card, .testimonial { border-radius: 8px; }
  .process-step, .process-step:nth-child(even) { border-left: 0; }
}

/* Geist typography system */
h1, h2, h3,
.hero-service-link strong,
.proof-brands strong,
.project-mark,
.logo-strip,
.testimonial > p,
.footer-brand {
  font-family: var(--font-sans);
}

h1, h2, h3 {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.hero h1 {
  max-width: 760px;
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
}

.section-heading h2,
.about-statement h2,
.process-intro h2,
.trust-heading h2,
.insights-heading h2 {
  font-size: var(--font-size-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-heading);
}

.contact h2 {
  font-size: var(--font-size-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.service-card h3,
.process-step h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
}

.article h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.project-copy h3 {
  font-size: clamp(2.5rem, 4.7vw, 4rem);
  line-height: .92;
  letter-spacing: var(--tracking-display);
}

.hero-lead {
  font-size: var(--font-size-lead);
  line-height: 1.6;
}

.about-copy p,
.section-heading > p:last-child,
.service-card > p:not(.kicker),
.process-step p,
.project-copy p {
  line-height: var(--line-height-body);
}

.desktop-nav a,
.mobile-nav a {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
}

.button,
.text-link,
.service-card a {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -.012em;
}

.eyebrow,
.kicker,
.service-index,
.project-top,
.process-step > span,
.article-number,
.article p,
.proof-label b,
.footer-meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: var(--weight-medium);
  letter-spacing: .11em;
}

.proof-stat strong {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: -.045em;
}

.proof-stat span,
.proof-label small,
.proof-support span,
.testimonial footer span,
.footer-brand > span:last-child,
.footer-nav a,
.footer-meta a {
  font-size: var(--font-size-small);
}

.proof-label small { font-family: var(--font-sans); }
.proof-support em {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-style: normal;
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}
.testimonial > p { font-weight: var(--weight-medium); }
.testimonial footer strong { font-weight: var(--weight-semibold); }
.contact-action p { font-size: var(--font-size-lead); font-weight: var(--weight-medium); line-height: 1.45; }
.quote-mark { font-family: var(--font-sans); font-weight: var(--weight-semibold); }

@media (max-width: 1020px) {
  .hero { min-height: 1380px; }
}

@media (max-width: 700px) {
  :root { --font-size-body: 1rem; }
  .hero { min-height: 1420px; padding-bottom: 700px; }
  .hero h1 { font-size: var(--font-size-display); }
}

/* Soft MTACU button system */
.icon-arrow {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 1.45rem;
  display: inline-block;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url("./assets/arrow-right.svg?v=bold-v2") center / contain no-repeat;
  mask: url("./assets/arrow-right.svg?v=bold-v2") center / contain no-repeat;
  transition: color .2s ease, transform .2s ease;
}

.icon-arrow-left {
  transform: rotate(180deg);
}

.icon-arrow-external {
  transform: rotate(-45deg);
}

.button {
  min-height: 54px;
  padding: 0 28px;
  gap: 14px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  box-shadow: none;
  transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.button > span:not(.button-play) {
  font-size: 1.25em;
  line-height: 1;
  transition: transform .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:hover > span:not(.button-play) {
  transform: translateX(3px);
}

.button-secondary .icon-arrow,
.button-light .icon-arrow,
.button-outline .icon-arrow {
  color: var(--button-primary);
}

.button:hover > .icon-arrow-external {
  transform: translate(3px, -2px) rotate(-45deg);
}

.button:focus-visible {
  outline: 3px solid rgba(39, 105, 242, .28);
  outline-offset: 3px;
}

.button-accent {
  color: var(--white);
  background: var(--button-gradient);
  border-color: var(--button-gradient-border);
  box-shadow: var(--button-gradient-shadow);
}

.button-accent:hover {
  color: var(--white);
  background: var(--button-gradient-hover);
  box-shadow: 0 18px 38px rgba(39, 105, 242, .28);
}

.button-secondary,
.button-light,
.button-outline {
  color: var(--ink);
  background: var(--button-surface);
  border-color: var(--button-border);
  box-shadow: 0 10px 28px rgba(39, 76, 125, .06);
  backdrop-filter: blur(10px);
}

.button-secondary:hover,
.button-light:hover,
.button-outline:hover,
.header-cta:hover,
.insights .button-light:hover {
  color: var(--ink);
  background: #eef6ff;
  border-color: #91b9e3;
  box-shadow: 0 14px 32px rgba(39, 105, 242, .12);
}

.button-play {
  color: var(--ink);
  font-size: .8rem;
  line-height: 1;
}

.button-small {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: .9375rem;
}

.header-cta {
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border-color: var(--button-border);
}

@media (max-width: 700px) {
  .hero-actions {
    align-items: stretch;
    gap: 12px;
  }

  .hero-actions .button {
    width: 100%;
  }
}

/* Cinematic CodeUnion hero */
.site-header {
  color: var(--white);
  background: rgba(2, 9, 31, .7);
  border-bottom-color: rgba(116, 174, 255, .12);
  backdrop-filter: blur(18px);
}

.site-header:not(.scrolled) {
  background: rgba(2, 9, 31, .24);
  border-bottom-color: rgba(116, 174, 255, .07);
  backdrop-filter: blur(8px);
}

.site-header:not(.scrolled) .brand-logo {
  filter: none;
}

.site-header:not(.scrolled) .desktop-nav a {
  color: rgba(228, 239, 255, .76);
}

.site-header:not(.scrolled) .desktop-nav a:hover,
.site-header:not(.scrolled) .desktop-nav a:focus-visible {
  color: var(--white);
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(5, 8, 45, .1);
}

.site-header.scrolled .desktop-nav a {
  color: rgba(5, 8, 45, .68);
}

.site-header .header-cta,
.site-header.scrolled .header-cta {
  color: var(--white);
  background: var(--button-gradient);
  border-color: var(--button-gradient-border);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(45, 132, 255, .18), 0 0 28px rgba(45, 132, 255, .34);
}

.header-cta img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-switcher {
  position: relative;
}

.language-toggle {
  min-width: 70px;
  height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--white);
  background: rgba(4, 18, 49, .58);
  border: 1px solid rgba(133, 202, 255, .42);
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.language-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.language-switcher.open .language-toggle svg {
  transform: rotate(180deg);
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-switcher.open .language-toggle {
  background: rgba(21, 65, 126, .8);
  border-color: rgba(151, 211, 255, .78);
}

.site-header.scrolled .language-toggle {
  color: var(--ink);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(5, 8, 45, .18);
}

.site-header.scrolled .language-toggle:hover,
.site-header.scrolled .language-toggle:focus-visible,
.site-header.scrolled .language-switcher.open .language-toggle {
  background: #eef6ff;
  border-color: #91b9e3;
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  width: 82px;
  padding: 6px;
  display: grid;
  gap: 3px;
  color: var(--white);
  background: rgba(2, 11, 34, .97);
  border: 1px solid rgba(123, 187, 255, .42);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 7, 25, .36);
  backdrop-filter: blur(16px);
}

.language-menu[hidden] {
  display: none;
}

.language-menu button {
  min-height: 34px;
  padding: 0 10px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: .8rem;
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
}

.language-menu button:hover,
.language-menu button:focus-visible,
.language-menu button[aria-checked="true"] {
  color: var(--white);
  background: rgba(52, 139, 255, .26);
}

@media (max-width: 1020px) {
  .header-actions {
    display: none;
  }
}

.site-header .header-cta:hover,
.site-header.scrolled .header-cta:hover {
  color: var(--white);
  background: var(--button-gradient-hover);
  border-color: #9ed8ff;
}

.hero {
  min-height: 1120px;
  display: block;
  padding: 150px clamp(24px, 6vw, 96px) 555px;
  color: var(--white);
  background:
    radial-gradient(ellipse at 50% 43%, rgba(31, 102, 224, .34) 0%, rgba(5, 20, 60, .2) 34%, transparent 60%),
    linear-gradient(180deg, #02091f 0%, #041334 57%, #02091f 100%);
  isolation: isolate;
}

.hero::before {
  inset: -48% -18% auto;
  height: 82%;
  aspect-ratio: auto;
  z-index: -2;
  border: 2px solid rgba(78, 157, 255, .62);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background: transparent;
  box-shadow: 0 18px 42px rgba(53, 142, 255, .38), inset 0 -12px 38px rgba(53, 142, 255, .18);
  transform: rotate(-1deg);
}

.hero::after {
  width: 118%;
  min-width: 0;
  height: 420px;
  right: auto;
  left: -9%;
  bottom: 342px;
  z-index: -1;
  border: 2px solid rgba(74, 157, 255, .76);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background: transparent;
  filter: none;
  opacity: 1;
  box-shadow: 0 22px 54px rgba(44, 137, 255, .48), inset 0 -18px 44px rgba(44, 137, 255, .2);
}

.hero-grid {
  inset: 82px 0 0;
  z-index: -3;
  opacity: .68;
  background-image:
    radial-gradient(circle at center, rgba(92, 160, 255, .36) 1px, transparent 1.4px),
    linear-gradient(rgba(80, 142, 235, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 142, 235, .045) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  mask-image: linear-gradient(to bottom, transparent 1%, #000 18%, #000 78%, transparent 96%);
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.hero .eyebrow {
  justify-content: center;
  margin-bottom: 28px;
  color: #2e7bc1;
}

.hero .eyebrow span {
  display: none;
}

.hero h1 {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  color: var(--white);
  font-size: clamp(3.1rem, 4.6vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 8px 36px rgba(0, 8, 35, .42);
}

.hero h1 > span,
.hero h1 > em {
  display: block;
  white-space: nowrap;
}

.hero h1 em {
  color: #a9ccff;
  background: linear-gradient(90deg, #f8fbff 0%, #9bc4ff 72%, #7cb2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 760px;
  margin: 26px auto 0;
  color: #b5c5df;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
}

.hero-actions {
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.hero-actions .button {
  min-width: 210px;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 999px;
}

.hero-actions .button-accent {
  border-color: rgba(119, 198, 255, .76);
  box-shadow: 0 0 0 1px rgba(40, 123, 255, .25), 0 0 30px rgba(39, 130, 255, .46), 0 16px 34px rgba(1, 8, 31, .42);
}

.hero-actions .button-accent img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.hero-actions .button-secondary {
  color: #e4edfb;
  background: rgba(3, 14, 43, .76);
  border-color: rgba(132, 175, 231, .5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 14px 30px rgba(0, 5, 25, .26);
  backdrop-filter: blur(12px);
}

.hero-actions .button-secondary img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.hero-actions .button-secondary:hover {
  color: var(--white);
  background: rgba(11, 35, 79, .92);
  border-color: rgba(139, 197, 255, .8);
  box-shadow: 0 0 24px rgba(39, 130, 255, .2);
}

.hero-actions .button-play {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  order: 2;
  margin-left: 2px;
  color: var(--white);
  background: rgba(77, 139, 225, .22);
  border-radius: 50%;
  font-size: .65rem;
  box-shadow: 0 0 18px rgba(65, 145, 255, .22);
}

.hero-dock {
  left: clamp(24px, 6vw, 96px);
  right: clamp(24px, 6vw, 96px);
  bottom: 48px;
  overflow: hidden;
  color: #d9e8ff;
  background: rgba(2, 11, 34, .92);
  border: 1px solid rgba(72, 154, 255, .7);
  border-radius: 28px;
  box-shadow: 0 0 0 8px rgba(26, 102, 205, .12), 0 0 42px rgba(44, 137, 255, .4), inset 0 0 60px rgba(29, 92, 188, .08);
  backdrop-filter: blur(18px);
}

.hero-console-header {
  min-height: 68px;
  padding: 0 28px;
  display: flex;
  align-items: center;
}

.hero-console-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-console-brand img {
  display: block;
  width: auto;
  height: 24px;
  object-fit: contain;
}

.hero-console-brand span {
  color: #2e7bc1;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
}

.hero-services {
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: 1.08fr repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(142px, 1fr));
  gap: 10px;
  border: 0;
}

.hero-service-link,
.hero-service-link:first-child,
.hero-service-link:last-child,
.hero-service-link:hover,
.hero-service-link:focus-visible {
  min-height: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  color: #e6f0ff;
  background: linear-gradient(145deg, rgba(13, 38, 82, .78), rgba(4, 17, 47, .92));
  border: 1px solid rgba(77, 139, 224, .28);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-service-link:hover,
.hero-service-link:focus-visible {
  background: linear-gradient(145deg, rgba(19, 56, 112, .9), rgba(7, 25, 61, .96));
  border-color: rgba(86, 168, 255, .72);
  box-shadow: 0 0 26px rgba(44, 137, 255, .16), inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-service-featured {
  grid-row: 1 / 3;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  background: linear-gradient(145deg, rgba(28, 104, 207, .88), rgba(5, 29, 73, .96));
}

.hero-service-featured .hero-service-icon {
  width: 52px;
  height: 52px;
}

.hero-service-featured strong {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 1.35rem;
}

.hero-service-featured > span:not(.hero-service-icon) {
  grid-column: 1 / -1;
  align-self: start;
  font-size: .85rem;
}

.hero-service-featured .service-arrow {
  grid-column: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(149, 205, 255, .8);
  border-radius: 50%;
}

.hero-service-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  color: #2e7bc1;
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 0 8px rgba(46, 123, 193, .55));
}

.hero-service-link strong {
  color: #f2f7ff;
  font-size: .98rem;
  text-decoration: none;
}

.hero-service-link > span:not(.hero-service-icon) {
  grid-column: 2 / -1;
  align-self: start;
  margin: 0;
  color: #91a6c5;
  font-size: .76rem;
  line-height: 1.45;
}

.service-arrow {
  color: #2e7bc1;
}

.hero-proof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 115% at 50% 118%, rgba(43, 132, 255, .1), transparent 68%),
    rgba(1, 8, 27, .76);
  border-top: 1px solid rgba(88, 155, 245, .16);
}

.hero .proof-metrics {
  min-height: 86px;
  padding: 0 20px;
  grid-template-columns: repeat(4, 1fr);
  border: 0;
}

.hero .proof-stage {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #c4d5ed;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  border-right: 1px solid rgba(88, 155, 245, .16);
  text-shadow: 0 1px 14px rgba(1, 8, 27, .9);
}

.hero .proof-stage::before {
  content: "";
  position: absolute;
  inset: 14% 12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(67, 155, 255, .14), rgba(33, 109, 235, .045) 42%, transparent 72%);
  filter: blur(8px);
  opacity: .82;
}

.hero .proof-stage:last-child {
  border-right: 0;
}

@media (max-width: 1180px) {
  .hero {
    min-height: auto;
    padding: 142px 28px 64px;
  }

  .hero::after {
    bottom: 42%;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 5.2vw, 3.9rem);
  }

  .hero-dock {
    position: relative;
    inset: auto;
    margin-top: 64px;
  }

  .hero-services {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hero-service-featured {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 220px;
  }

  .hero .proof-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .proof-stage:nth-child(2) {
    border-right: 0;
  }

  .hero .proof-stage:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(88, 155, 245, .16);
  }
}

@media (max-width: 1020px) {
  .site-header:not(.scrolled) .menu-toggle {
    color: var(--white);
    border-color: rgba(132, 175, 231, .32);
  }

  .site-header:not(.scrolled) .mobile-nav {
    color: var(--white);
    background: rgba(2, 9, 31, .98);
    border-top-color: rgba(116, 174, 255, .12);
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: auto;
    padding: 116px 16px 42px;
  }

  .hero::before {
    inset: -18% -70% auto;
    height: 44%;
  }

  .hero::after {
    left: -44%;
    bottom: 55%;
    width: 188%;
    height: 280px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .hero h1 > span,
  .hero h1 > em {
    white-space: normal;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .hero-actions .button {
    min-width: 0;
  }

  .hero-dock {
    margin-top: 50px;
    border-radius: 20px;
  }

  .hero-console-header {
    min-height: 62px;
    padding: 0 18px;
  }

  .hero-console-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .hero-services {
    padding: 0 10px 10px;
    grid-template-columns: 1fr;
  }

  .hero-service-featured {
    grid-column: auto;
  }

  .hero-service-link,
  .hero-service-link:first-child,
  .hero-service-link:last-child {
    min-height: 148px;
  }

  .hero .proof-metrics {
    padding: 8px 12px;
    grid-template-columns: 1fr;
  }

  .hero .proof-stage,
  .hero .proof-stage:nth-child(2) {
    min-height: 54px;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(88, 155, 245, .16);
  }

  .hero .proof-stage::before {
    inset: 12% 20%;
    opacity: .76;
  }

  .hero .proof-stage:last-child {
    border-bottom: 0;
  }
}

/* Premium hero background layers — decorative only */
.hero {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(1, 5, 17, .28) 72%, rgba(1, 4, 14, .72) 100%),
    radial-gradient(ellipse 58% 46% at 50% 27%, rgba(22, 119, 255, .17) 0%, rgba(22, 119, 255, .055) 42%, transparent 74%),
    radial-gradient(ellipse 38% 46% at 92% 36%, rgba(63, 191, 255, .1) 0%, transparent 72%),
    radial-gradient(ellipse 35% 38% at 8% 45%, rgba(99, 123, 255, .065) 0%, transparent 74%),
    linear-gradient(180deg, #020817 0%, #031126 55%, #020817 100%);
}

.hero::before,
.hero::after,
.hero-grid,
.hero-grid::before,
.hero-grid::after {
  pointer-events: none;
}

.hero::before {
  --hero-ambient-min: .68;
  --hero-ambient-max: 1;
  inset: -14%;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 46% 30% at 46% 28%, rgba(37, 133, 255, .13), transparent 72%),
    radial-gradient(ellipse 30% 34% at 86% 42%, rgba(105, 199, 255, .075), transparent 74%),
    radial-gradient(ellipse 32% 30% at 15% 54%, rgba(122, 143, 255, .05), transparent 76%);
  box-shadow: none;
  filter: blur(88px);
  opacity: var(--hero-ambient-min);
  transform: translate3d(-28px, -16px, 0) scale(1.02);
  will-change: transform, opacity;
  animation: heroAmbientDrift 18s cubic-bezier(.42, 0, .2, 1) infinite;
}

.hero::after {
  --hero-panel-glow-min: .68;
  --hero-panel-glow-max: 1;
  left: 50%;
  right: auto;
  bottom: -5%;
  width: min(1180px, 86vw);
  min-width: 0;
  height: 34%;
  aspect-ratio: auto;
  z-index: 1;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 125, 255, .17) 0%, rgba(20, 125, 255, .08) 38%, transparent 72%);
  box-shadow: none;
  filter: blur(88px);
  opacity: var(--hero-panel-glow-min);
  transform: translate3d(-50%, 0, 0);
  will-change: transform, opacity;
  animation: heroPanelGlow 14s cubic-bezier(.42, 0, .2, 1) infinite;
}

.hero-grid {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 1;
  background: none;
  mask-image: none;
}

.hero-grid::before,
.hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero-grid::before {
  inset: -3%;
  z-index: 1;
  background: url("./assets/hero-landscape.svg") center / 100% 100% no-repeat;
  opacity: .96;
  transform: translate3d(-22px, -10px, 0) scale(1.01);
  will-change: transform;
  animation: heroWaveFloat 22s cubic-bezier(.42, 0, .2, 1) infinite;
}

.hero-grid::after {
  --hero-grid-min: .32;
  --hero-grid-max: .62;
  inset: -2px;
  z-index: 2;
  background-image:
    radial-gradient(circle, rgba(77, 163, 255, .34) .75px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 26px 26px, 180px 180px;
  background-position: center, center;
  opacity: var(--hero-grid-min);
  mix-blend-mode: screen;
  will-change: opacity, background-position;
  animation: heroGridBreath 16s cubic-bezier(.42, 0, .2, 1) infinite;
  mask-image:
    radial-gradient(ellipse 78% 66% at 50% 43%, #000 0%, rgba(0, 0, 0, .82) 46%, transparent 88%),
    linear-gradient(to bottom, transparent 4%, #000 18%, #000 80%, transparent 98%);
  mask-composite: intersect;
}

@keyframes heroAmbientDrift {
  0%, 100% { transform: translate3d(-28px, -16px, 0) scale(1.02); opacity: var(--hero-ambient-min); }
  28% { transform: translate3d(3px, -4px, 0) scale(1.055); opacity: .88; }
  58% { transform: translate3d(30px, 19px, 0) scale(1.08); opacity: var(--hero-ambient-max); }
  82% { transform: translate3d(-5px, 13px, 0) scale(1.045); opacity: .82; }
}

@keyframes heroWaveFloat {
  0%, 100% { transform: translate3d(-22px, -10px, 0) scale(1.01); }
  34% { transform: translate3d(12px, 16px, 0) scale(1.028); }
  68% { transform: translate3d(27px, -7px, 0) scale(1.042); }
}

@keyframes heroPanelGlow {
  0%, 100% { transform: translate3d(-51.5%, 12px, 0) scale(.98); opacity: var(--hero-panel-glow-min); }
  50% { transform: translate3d(-48.5%, -12px, 0) scale(1.07); opacity: var(--hero-panel-glow-max); }
}

@keyframes heroGridBreath {
  0%, 100% { opacity: var(--hero-grid-min); background-position: 0 0, center; }
  50% { opacity: var(--hero-grid-max); background-position: 13px 13px, center; }
}

@media (max-width: 1180px) {
  .hero-grid::before {
    background-size: auto 100%;
    background-position: 50% center;
  }

  .hero-grid::after {
    --hero-grid-min: .34;
    --hero-grid-max: .4;
  }
}

@media (max-width: 700px) {
  .hero {
    background:
      radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(1, 5, 17, .32) 70%, rgba(1, 4, 14, .7) 100%),
      radial-gradient(ellipse 82% 32% at 50% 22%, rgba(22, 119, 255, .14) 0%, transparent 74%),
      radial-gradient(ellipse 66% 34% at 90% 58%, rgba(63, 191, 255, .07) 0%, transparent 76%),
      linear-gradient(180deg, #020817 0%, #031126 58%, #020817 100%);
  }

  .hero::before {
    inset: -8% -35%;
    background: radial-gradient(ellipse 62% 28% at 50% 24%, rgba(37, 133, 255, .11), transparent 74%);
    filter: blur(72px);
  }

  .hero::after {
    --hero-panel-glow-min: .64;
    --hero-panel-glow-max: .7;
    width: 120vw;
    height: 24%;
    filter: blur(72px);
  }

  .hero-grid::before {
    background-size: auto 88%;
    background-position: 48% 8%;
    opacity: .78;
  }

  .hero-grid::after {
    --hero-grid-min: .25;
    --hero-grid-max: .3;
    background-size: 30px 30px, 180px 180px;
    mask-image: radial-gradient(ellipse 94% 58% at 50% 34%, #000 0%, rgba(0, 0, 0, .74) 46%, transparent 90%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero-grid::before,
  .hero-grid::after {
    animation: none !important;
  }
}

/* Client logo wall directly below the hero */
.client-logos {
  position: relative;
  z-index: 3;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid #dfe7f1;
}

.client-logos-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: 32px clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 64px);
}

.client-logos-heading .eyebrow {
  margin: 0 0 10px;
}

.client-logos-heading h2 {
  max-width: 880px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.5vw, 3.7rem);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.client-logos-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid #dfe7f1;
  border-left: 1px solid #dfe7f1;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 24px 70px rgba(45, 76, 118, .055);
}

.client-logo-card {
  min-width: 0;
  height: clamp(112px, 10vw, 148px);
  padding: 25px 22px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .8);
  border-right: 1px solid #dfe7f1;
  border-bottom: 1px solid #dfe7f1;
  transition: background .24s ease, transform .24s ease, box-shadow .24s ease;
}

.client-logo-card:hover {
  z-index: 1;
  background: var(--white);
  box-shadow: 0 18px 42px rgba(46, 123, 193, .1);
  transform: translateY(-3px);
}

.client-logo-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 180px);
  max-height: 58px;
  object-fit: contain;
}

.client-logo-card .client-logo-tall {
  max-height: 76px;
}

@media (max-width: 1180px) {
  .client-logos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .client-logos {
    padding: 0;
  }

  .client-logos-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 32px;
  }

  .client-logos-heading .eyebrow {
    margin: 0;
  }

  .client-logos-heading h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .client-logos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-logo-card {
    height: 110px;
    padding: 22px 16px;
  }

  .client-logo-card img {
    max-height: 50px;
  }

  .client-logo-card .client-logo-tall {
    max-height: 64px;
  }
}

/* Hero services mosaic — icon-led, no product illustrations */
.hero-dock .hero-console-header {
  min-height: 60px;
}

.hero-services-mosaic {
  padding: 0 clamp(14px, 1.3vw, 18px) clamp(14px, 1.3vw, 18px);
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(128px, 1fr)) minmax(112px, .82fr);
  gap: 8px;
}

.hero-services-mosaic .hero-service-link {
  box-sizing: border-box;
  min-height: 0;
  padding: 20px 22px;
  color: #e9f3ff;
  background: linear-gradient(145deg, rgba(10, 36, 78, .82), rgba(3, 16, 45, .94));
  border: 1px solid rgba(75, 151, 255, .34);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  overflow: hidden;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  contain: layout paint;
  will-change: auto;
  transition: background .24s ease, border-color .24s ease;
}

.hero-services-mosaic .hero-service-link:hover,
.hero-services-mosaic .hero-service-link:focus-visible {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  background: linear-gradient(145deg, rgba(17, 54, 109, .92), rgba(6, 25, 61, .98));
  border-color: rgba(92, 177, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.hero-services-mosaic .hero-service-link > *,
.hero-services-mosaic .hero-service-link:hover > *,
.hero-services-mosaic .hero-service-link:focus-visible > * {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  will-change: auto;
}

.hero-services-mosaic .hero-service-icon {
  width: 44px;
  height: 44px;
  color: #79caff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(77, 177, 255, .8)) drop-shadow(0 0 12px rgba(38, 132, 255, .32));
  transition: color .24s ease, filter .24s ease;
}

.hero-services-mosaic .hero-service-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.6;
}

.hero-services-mosaic .hero-service-link:hover .hero-service-icon,
.hero-services-mosaic .hero-service-link:focus-visible .hero-service-icon {
  color: #c8edff;
  background: transparent;
  border-color: transparent;
  filter: drop-shadow(0 0 5px rgba(115, 207, 255, .92)) drop-shadow(0 0 14px rgba(45, 151, 255, .42));
  transform: none !important;
}

.hero-services-mosaic .hero-service-link strong {
  color: #f4f8ff;
  font-size: 1.125rem;
  line-height: 1.16;
}

.hero-services-mosaic .hero-service-copy {
  color: #9fb2ce;
  font-size: .76rem;
  line-height: 1.45;
}

.hero-services-mosaic .hero-service-featured {
  grid-column: 1 / 10;
  grid-row: 1 / 3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 2.3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 64%) 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 16px;
  background:
    radial-gradient(circle at 82% 48%, rgba(48, 139, 255, .13), transparent 38%),
    linear-gradient(145deg, rgba(12, 47, 99, .9), rgba(3, 17, 48, .97));
}

.hero-services-mosaic .hero-service-featured strong {
  grid-column: 1 / 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  align-self: end;
  font-size: clamp(2rem, 2.65vw, 3.05rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.hero-services-mosaic .hero-service-featured .hero-service-copy {
  grid-column: 1 / 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  max-width: min(365px, 100%);
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
}

.hero-services-mosaic .hero-service-featured .hero-service-art {
  position: absolute;
  z-index: 1;
  right: -8px;
  bottom: -44px;
  width: min(63%, 480px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 0 18px rgba(46, 144, 255, .26));
}

.hero-services-mosaic .hero-service-wide {
  grid-column: 10 / 16;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 4px 16px;
}

.hero-services-mosaic .hero-service-wide .hero-service-icon {
  width: 50px;
  height: 50px;
  grid-row: 1 / 3;
}

.hero-services-mosaic .hero-service-wide .hero-service-icon svg {
  width: 31px;
  height: 31px;
}

.hero-services-mosaic .hero-service-wide .hero-service-copy {
  grid-column: 2 / 3;
  grid-row: 2;
  align-self: start;
  margin: 0;
}

.hero-services-mosaic .hero-service-compact {
  grid-column: span 3;
  grid-row: 3;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 4px 12px;
  padding: 16px 18px;
}

.hero-services-mosaic .hero-service-compact .hero-service-icon {
  width: 44px;
  height: 44px;
  grid-row: 1 / 3;
  align-self: center;
}

.hero-services-mosaic .hero-service-compact strong {
  font-size: 1rem;
}

.hero-services-mosaic .hero-service-compact .hero-service-copy {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: .68rem;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .hero-services-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .hero-services-mosaic .hero-service-featured {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 300px;
  }

  .hero-services-mosaic .hero-service-featured .hero-service-art {
    right: -10px;
    bottom: -32px;
    width: min(56%, 480px);
  }

  .hero-services-mosaic .hero-service-wide,
  .hero-services-mosaic .hero-service-compact {
    grid-column: span 1;
    grid-row: auto;
    min-height: 148px;
  }

}

@media (max-width: 700px) {
  .hero-services-mosaic {
    grid-template-columns: 1fr;
  }

  .hero-services-mosaic .hero-service-featured,
  .hero-services-mosaic .hero-service-wide,
  .hero-services-mosaic .hero-service-compact {
    grid-column: auto;
    grid-row: auto;
  }

  .hero-services-mosaic .hero-service-featured {
    min-height: 330px;
    padding: 24px 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
  }

  .hero-services-mosaic .hero-service-featured strong,
  .hero-services-mosaic .hero-service-featured .hero-service-copy {
    grid-column: 1;
  }

  .hero-services-mosaic .hero-service-featured strong {
    align-self: start;
  }

  .hero-services-mosaic .hero-service-featured .hero-service-copy {
    max-width: 100%;
  }

  .hero-services-mosaic .hero-service-featured .hero-service-art {
    right: -4px;
    bottom: -6px;
    width: min(78%, 330px);
    opacity: .88;
  }

  .hero-services-mosaic .hero-service-wide,
  .hero-services-mosaic .hero-service-compact {
    min-height: 144px;
    padding: 18px;
  }

  .hero-services-mosaic .hero-service-featured strong {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
}

/* Offer sections — mockup-ready layout */
.offer-services {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f7faff;
}

.offer-services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(46, 123, 193, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .026) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, transparent 3%, #000 18%, rgba(0, 0, 0, .7) 72%, transparent 100%);
  pointer-events: none;
}

.offer-services > * {
  position: relative;
  z-index: 1;
}

.offer-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: start;
  margin-bottom: 54px;
}

.offer-heading .eyebrow,
.offer-more-heading .eyebrow {
  margin-bottom: 18px;
}

.offer-heading h2 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.35rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.06em;
}

.offer-heading h2 em {
  color: #2e7bc1;
  font-style: normal;
}

.offer-heading > div > p:last-child {
  max-width: 650px;
  margin: 24px 0 0;
  color: #475b7c;
  font-size: 1rem;
  line-height: 1.55;
}

.offer-heading-note {
  margin: 5px 0 0;
  padding-left: 20px;
  color: #2e7bc1;
  border-left: 2px solid #2e7bc1;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.offer-list {
  display: grid;
  gap: 16px;
}

#strony-www,
#aplikacje-webowe,
#dedykowane-systemy,
#platformy-edukacyjne,
#ux-ui,
#integracje,
#webcare {
  scroll-margin-top: 92px;
}

.offer-panel {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(440px, 1.12fr);
  background: #edf4ff;
  border: 1px solid #d9e6f8;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(26, 67, 130, .055);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .38s cubic-bezier(.22, 1, .36, 1);
}

.offer-panel::before,
.offer-more-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 2px;
  border-radius: calc(22px - 2px);
  box-shadow: inset 0 0 0 2.5px rgba(46, 123, 193, .68);
  clip-path: inset(0 100% 0 0 round 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .46s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease;
}

.offer-panel:hover,
.offer-panel:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(46, 123, 193, .32);
  box-shadow: 0 28px 62px rgba(26, 67, 130, .14);
}

.offer-panel:hover::before,
.offer-more-card:hover::before {
  clip-path: inset(0 round 20px);
  opacity: 1;
}

.offer-more-card::before {
  border-radius: 18px;
  clip-path: inset(0 100% 0 0 round 18px);
}

.offer-more-card:hover::before {
  clip-path: inset(0 round 18px);
}

.offer-panel:focus-visible,
.offer-more-card:focus-visible {
  outline: 3px solid rgba(46, 123, 193, .26);
  outline-offset: 4px;
}

.offer-panel-reverse {
  grid-template-columns: minmax(440px, 1.12fr) minmax(360px, .88fr);
}

.offer-content {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: clamp(34px, 4vw, 62px);
}

.offer-kicker {
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #2e7bc1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.offer-kicker span {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.offer-kicker i {
  width: 48px;
  height: 1px;
  flex: 0 0 auto;
  background: #2e7bc1;
}

.offer-content h3 {
  max-width: 590px;
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2rem, 3.15vw, 3.55rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.05em;
}

.offer-content > p:not(.offer-kicker) {
  max-width: 620px;
  margin: 0;
  color: #4f6383;
  font-size: .98rem;
  line-height: 1.55;
}

.offer-tags {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.offer-tags li {
  padding: 6px 13px;
  color: #2e7bc1;
  background: rgba(255, 255, 255, .52);
  border: 1px solid #b9cee9;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
}

.offer-button {
  width: max-content;
  min-width: 194px;
  min-height: 52px;
  margin-top: 30px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--white);
  background: var(--button-gradient);
  border: 1px solid var(--button-gradient-border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  transition:
    width .42s cubic-bezier(.22, 1, .36, 1),
    min-width .42s cubic-bezier(.22, 1, .36, 1),
    padding .42s cubic-bezier(.22, 1, .36, 1),
    gap .42s cubic-bezier(.22, 1, .36, 1),
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.offer-button-label {
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width .42s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    transform .42s cubic-bezier(.22, 1, .36, 1);
}

.offer-panel:hover .offer-button,
.offer-panel:focus-visible .offer-button,
.about-codeunion-panel:hover .about-codeunion-button,
.about-codeunion-panel:focus-within .about-codeunion-button,
.contact-card:hover .contact-offer-button,
.contact-card:focus-visible .contact-offer-button {
  background: var(--button-gradient-hover);
  box-shadow: var(--button-gradient-shadow);
  transform: translateY(-2px);
}

.offer-button .icon-arrow {
  font-size: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .offer-button {
    width: 52px;
    min-width: 52px;
    padding-inline: 14px;
    justify-content: center;
    gap: 0;
  }

  .offer-button-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }

  .offer-panel:hover .offer-button,
  .offer-panel:focus-visible .offer-button,
  .about-codeunion-panel:hover .about-codeunion-button,
  .about-codeunion-panel:focus-within .about-codeunion-button,
  .contact-card:hover .contact-offer-button,
  .contact-card:focus-visible .contact-offer-button {
    width: 194px;
    min-width: 194px;
    padding-inline: 22px;
    justify-content: space-between;
    gap: 28px;
  }

  .contact-card:hover .contact-offer-button,
  .contact-card:focus-visible .contact-offer-button {
    width: 220px;
    min-width: 220px;
    gap: 22px;
  }

  .offer-panel:hover .offer-button-label,
  .offer-panel:focus-visible .offer-button-label,
  .about-codeunion-panel:hover .about-codeunion-button .offer-button-label,
  .about-codeunion-panel:focus-within .about-codeunion-button .offer-button-label,
  .contact-card:hover .contact-offer-button .offer-button-label,
  .contact-card:focus-visible .contact-offer-button .offer-button-label {
    max-width: 126px;
    opacity: 1;
    transform: none;
  }

  .about-codeunion-panel:hover .about-codeunion-button,
  .about-codeunion-panel:focus-within .about-codeunion-button {
    width: 218px;
    min-width: 218px;
    gap: 22px;
  }

  .about-codeunion-panel:hover .about-codeunion-button .offer-button-label,
  .about-codeunion-panel:focus-within .about-codeunion-button .offer-button-label {
    max-width: 150px;
  }
}

.offer-more-card:hover .icon-arrow,
.offer-more-card:focus-visible .icon-arrow,
.project-slide:hover .project-cta .icon-arrow,
.project-slide:focus-within .project-cta .icon-arrow,
.project-cta:hover .icon-arrow,
.project-cta:focus-visible .icon-arrow {
  transform: translateX(3px);
}

.offer-visual-slot {
  min-width: 0;
  min-height: 430px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 46%, rgba(92, 151, 244, .16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, .46), rgba(218, 232, 253, .64));
}

.offer-visual-slot::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px dashed rgba(68, 119, 199, .24);
  border-radius: 18px;
}

.offer-visual-slot.has-media::before {
  display: none;
}

.offer-visual-slot.has-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

.offer-panel:hover .offer-visual-slot.has-media img,
.offer-panel:focus-visible .offer-visual-slot.has-media img {
  transform: scale(1.035);
}

#strony-www,
#dedykowane-systemy {
  background: linear-gradient(105deg, #eaf3ff 0%, #eef6ff 43%, #f7fbff 72%, #fbfdff 100%);
}

#aplikacje-webowe,
#platformy-edukacyjne {
  background: linear-gradient(255deg, #eaf3ff 0%, #eef6ff 43%, #f7fbff 72%, #fbfdff 100%);
}

#strony-www .offer-content,
#dedykowane-systemy .offer-content {
  z-index: 2;
  padding-right: clamp(24px, 2.6vw, 42px);
}

#strony-www .offer-visual-slot.has-media,
#dedykowane-systemy .offer-visual-slot.has-media {
  z-index: 1;
  margin-left: clamp(-74px, -4.8vw, -48px);
  background: transparent;
}

#strony-www .offer-visual-slot.has-media::after,
#dedykowane-systemy .offer-visual-slot.has-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(120px, 15vw, 210px);
  background: linear-gradient(90deg, #eef6ff 0%, rgba(238, 246, 255, .9) 24%, rgba(241, 248, 255, .46) 58%, transparent 100%);
  pointer-events: none;
}

#aplikacje-webowe .offer-content,
#platformy-edukacyjne .offer-content {
  z-index: 2;
  padding-left: clamp(24px, 2.6vw, 42px);
}

#aplikacje-webowe .offer-visual-slot.has-media,
#platformy-edukacyjne .offer-visual-slot.has-media {
  z-index: 1;
  margin-right: clamp(-74px, -4.8vw, -48px);
  background: transparent;
}

#aplikacje-webowe .offer-visual-slot.has-media::after,
#platformy-edukacyjne .offer-visual-slot.has-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  width: clamp(120px, 15vw, 210px);
  background: linear-gradient(270deg, #eef6ff 0%, rgba(238, 246, 255, .9) 24%, rgba(241, 248, 255, .46) 58%, transparent 100%);
  pointer-events: none;
}

.offer-more {
  padding-top: clamp(74px, 8vw, 112px);
}

.offer-more-heading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: 40px;
}

.offer-more-heading h3 {
  max-width: 780px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 3.55rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
}

.offer-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.offer-more-card {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  padding: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(242, 248, 255, .82));
  border: 1px solid #d3e1f4;
  border-radius: 20px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 20px 48px rgba(46, 105, 168, .055);
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    border-color .26s ease,
    box-shadow .34s cubic-bezier(.22, 1, .36, 1);
}

.offer-more-card:hover,
.offer-more-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(46, 123, 193, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 25px 54px rgba(36, 91, 153, .13);
}

#ux-ui {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(72, 153, 235, .13) 0%, rgba(72, 153, 235, 0) 48%),
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(243, 249, 255, .84));
}

#integracje {
  background:
    radial-gradient(105% 72% at 50% 108%, rgba(58, 126, 218, .11) 0%, rgba(58, 126, 218, 0) 54%),
    linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(240, 247, 255, .82));
}

#webcare {
  background:
    radial-gradient(112% 88% at 0% 0%, rgba(77, 171, 219, .11) 0%, rgba(77, 171, 219, 0) 47%),
    linear-gradient(140deg, rgba(255, 255, 255, .97), rgba(244, 249, 255, .83));
}

.offer-more-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #2e7bc1;
  background: #e3edfb;
  border-radius: 20px;
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 750;
}

.offer-more-icon.has-image {
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.offer-more-icon.has-image img {
  width: 80px;
  height: 80px;
  max-width: none;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.03);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.offer-more-card:hover .offer-more-icon.has-image img,
.offer-more-card:focus-visible .offer-more-icon.has-image img {
  transform: translateY(-2px) scale(1.055);
}

.offer-more-card h4 {
  margin: 18px 0 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -.035em;
}

.offer-more-card p {
  margin: 0;
  color: #587096;
  font-size: .86rem;
  line-height: 1.55;
}

.offer-more-link {
  width: max-content;
  min-width: 196px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  color: var(--blue);
  background: transparent;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1;
  transition:
    width .42s cubic-bezier(.22, 1, .36, 1),
    min-width .42s cubic-bezier(.22, 1, .36, 1),
    padding .42s cubic-bezier(.22, 1, .36, 1),
    gap .42s cubic-bezier(.22, 1, .36, 1),
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.offer-more-link-label {
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width .42s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    transform .42s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .offer-more-link {
    width: 44px;
    min-width: 44px;
    padding-inline: 10px;
    justify-content: center;
    gap: 0;
  }

  .offer-more-link-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }

  .offer-more-card:hover .offer-more-link,
  .offer-more-card:focus-visible .offer-more-link {
    width: 196px;
    min-width: 196px;
    padding-inline: 18px;
    justify-content: space-between;
    gap: 14px;
    color: var(--blue);
    background-color: rgba(46, 123, 193, .045);
    border-color: var(--blue);
    transform: translateY(-2px);
  }

  .offer-more-card:hover .offer-more-link-label,
  .offer-more-card:focus-visible .offer-more-link-label {
    max-width: 116px;
    opacity: 1;
    transform: none;
  }
}

.offer-more-card > div:last-child {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

@media (max-width: 1080px) {
  .offer-panel,
  .offer-panel-reverse {
    grid-template-columns: minmax(330px, .95fr) minmax(360px, 1.05fr);
  }

  .offer-content {
    padding: 36px;
  }

  .offer-more-grid {
    grid-template-columns: 1fr;
  }

  .offer-more-card {
    min-height: 0;
  }
}

@media (max-width: 800px) {
  .offer-heading,
  .offer-more-heading {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .offer-heading-note {
    width: max-content;
  }

  .offer-panel,
  .offer-panel-reverse {
    grid-template-columns: 1fr;
  }

  .offer-panel-reverse .offer-content {
    order: 1;
  }

  .offer-panel-reverse .offer-visual-slot {
    order: 2;
  }

  .offer-visual-slot {
    min-height: 270px;
  }

  #strony-www .offer-content,
  #dedykowane-systemy .offer-content {
    padding-right: 36px;
  }

  #aplikacje-webowe .offer-content,
  #platformy-edukacyjne .offer-content {
    padding-left: 36px;
  }

  #strony-www .offer-visual-slot.has-media,
  #dedykowane-systemy .offer-visual-slot.has-media {
    margin-top: -24px;
    margin-left: 0;
  }

  #aplikacje-webowe .offer-visual-slot.has-media,
  #platformy-edukacyjne .offer-visual-slot.has-media {
    margin-top: -24px;
    margin-right: 0;
  }

  #strony-www .offer-visual-slot.has-media::after,
  #dedykowane-systemy .offer-visual-slot.has-media::after {
    inset: 0 0 auto;
    width: auto;
    height: 112px;
    background: linear-gradient(180deg, #eef6ff 0%, rgba(238, 246, 255, .82) 32%, transparent 100%);
  }

  #aplikacje-webowe .offer-visual-slot.has-media::after,
  #platformy-edukacyjne .offer-visual-slot.has-media::after {
    inset: 0 0 auto;
    width: auto;
    height: 112px;
    background: linear-gradient(180deg, #eef6ff 0%, rgba(238, 246, 255, .82) 32%, transparent 100%);
  }
}

@media (max-width: 520px) {
  .offer-content {
    padding: 28px 22px 30px;
  }

  #strony-www .offer-content,
  #dedykowane-systemy .offer-content {
    padding-right: 22px;
  }

  #aplikacje-webowe .offer-content,
  #platformy-edukacyjne .offer-content {
    padding-left: 22px;
  }

  .offer-kicker {
    gap: 10px;
    font-size: .64rem;
    letter-spacing: .11em;
  }

  .offer-kicker i {
    width: 30px;
  }

  .offer-content h3 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
  }

  .offer-button {
    width: 100%;
  }

  .offer-visual-slot {
    min-height: 220px;
  }

  .offer-visual-slot::before {
    inset: 18px;
  }

  .offer-more-card {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-codeunion-panel,
  .about-codeunion-panel::after,
  .about-codeunion-media::before,
  .about-codeunion-media::after,
  .about-codeunion-collage,
  .offer-panel,
  .offer-panel::before,
  .offer-more-card,
  .offer-more-card::before,
  .offer-visual-slot.has-media img,
  .offer-more-icon.has-image img,
  .offer-button,
  .offer-button-label,
  .offer-more-link,
  .offer-more-link-label,
  .contact-card,
  .contact-card::after,
  .contact-art img,
  .contact-action .button,
  .contact-action .button > span {
    transition: none;
  }

  .offer-panel:hover,
  .offer-panel:focus-visible,
  .about-codeunion-panel:hover,
  .about-codeunion-panel:focus-within,
  .about-codeunion-panel:hover .about-codeunion-media::before,
  .about-codeunion-panel:focus-within .about-codeunion-media::before,
  .about-codeunion-panel:hover .about-codeunion-media::after,
  .about-codeunion-panel:focus-within .about-codeunion-media::after,
  .about-codeunion-panel:hover .about-codeunion-collage,
  .about-codeunion-panel:focus-within .about-codeunion-collage,
  .offer-more-card:hover,
  .offer-more-card:focus-visible,
  .offer-panel:hover .offer-visual-slot.has-media img,
  .offer-panel:focus-visible .offer-visual-slot.has-media img,
  .offer-more-card:hover .offer-more-icon.has-image img,
  .offer-more-card:focus-visible .offer-more-icon.has-image img,
  .contact-card:hover,
  .contact-card:focus-visible,
  .contact-card:hover .contact-art img,
  .contact-card:focus-visible .contact-art img,
  .contact-card:hover .contact-action .button,
  .contact-card:focus-visible .contact-action .button,
  .contact-card:hover .contact-action .button > span,
  .contact-card:focus-visible .contact-action .button > span {
    transform: none;
  }
}

/* Light project showcase */
.projects {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, rgba(142, 197, 255, .2), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(46, 123, 193, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .028) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 72% 64% at 18% 52%, #000 0%, rgba(0, 0, 0, .62) 54%, transparent 100%);
  pointer-events: none;
}

.projects > * {
  position: relative;
  z-index: 1;
}

.projects-showcase-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 46px;
}

.projects-showcase-heading .eyebrow {
  margin-bottom: 12px;
  color: #2e7bc1;
}

.projects-showcase-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.65rem, 5vw, 5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.055em;
}

.projects-showcase-heading p:last-child {
  max-width: 760px;
  margin: 18px 0 0;
  color: #587096;
  font-size: 1.03rem;
  line-height: 1.55;
}

.projects-all-link {
  min-height: 54px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 720;
  text-decoration: none;
  box-shadow: none;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}

.projects-all-link:hover,
.projects-all-link:focus-visible {
  color: var(--blue);
  background: rgba(46, 123, 193, .065);
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(46, 123, 193, .1);
  transform: translateY(-2px);
}

.projects-all-link .icon-arrow {
  color: var(--blue);
}

.projects-all-link:hover .icon-arrow,
.projects-all-link:focus-visible .icon-arrow {
  color: var(--blue);
  transform: translateX(3px);
}

.projects-carousel {
  position: relative;
}

.projects-viewport {
  overflow: hidden;
  margin: -12px 0 -24px;
  padding: 12px 0 24px;
}

.projects-track {
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform .62s cubic-bezier(.22, .8, .24, 1);
}

.project-slide {
  --project-tint: #e8f2ff;
  flex: 0 0 calc(100% - clamp(90px, 10vw, 154px));
  min-height: 530px;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(330px, .72fr);
  gap: 0;
  color: var(--ink);
  background: linear-gradient(135deg, #fff 0%, var(--project-tint) 100%);
  border: 1px solid #d5e3f4;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(51, 91, 148, .08);
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .38s cubic-bezier(.22, 1, .36, 1);
}

.project-slide::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 2px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2.5px rgba(46, 123, 193, .68);
  clip-path: inset(0 100% 0 0 round 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .46s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease;
}

.project-slide:hover,
.project-slide:focus-within {
  transform: translateY(-6px);
  border-color: rgba(46, 123, 193, .32);
  box-shadow: 0 28px 62px rgba(26, 67, 130, .14);
}

.project-slide:hover::after,
.project-slide:focus-within::after {
  clip-path: inset(0 round 20px);
  opacity: 1;
}

.project-slide-mint { --project-tint: #edf6ff; }
.project-slide-lilac { --project-tint: #eaf3ff; }
.project-slide-sand { --project-tint: #f1f7ff; }
.project-slide-rose { --project-tint: #e7f1ff; }

.project-visual-placeholder {
  min-height: 470px;
  position: relative;
  margin: 28px 0 28px 28px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(224, 238, 255, .72));
  border: 1px dashed #b8d0f2;
  border-radius: 18px;
}

.project-visual-placeholder::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(120, 161, 219, .15);
  border-radius: 12px;
}

.project-slide-content {
  padding: 54px clamp(30px, 4vw, 58px) 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-client-logo {
  width: 100%;
  min-height: 120px;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.project-client-logo img {
  display: block;
  width: min(320px, 90%);
  height: 108px;
  object-fit: contain;
  object-position: left center;
}

.project-client-logo-forell span {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.8rem, 4.2vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

.project-slide-content > p {
  max-width: 480px;
  margin: 0;
  color: #5c7091;
  font-size: 1rem;
  line-height: 1.55;
}

.project-tags {
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.project-tags li {
  padding: 6px 12px;
  color: #2e7bc1;
  background: rgba(255,255,255,.72);
  border: 1px solid #cbdcf0;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
}

.project-cta {
  width: max-content;
  min-width: 210px;
  min-height: 56px;
  margin-top: auto;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: #fff;
  background: var(--button-gradient);
  border: 1px solid var(--button-gradient-border);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 720;
  text-decoration: none;
  box-shadow: 0 15px 32px rgba(39, 105, 242, .22);
  overflow: hidden;
  transition:
    width .42s cubic-bezier(.22, 1, .36, 1),
    min-width .42s cubic-bezier(.22, 1, .36, 1),
    padding .42s cubic-bezier(.22, 1, .36, 1),
    gap .42s cubic-bezier(.22, 1, .36, 1),
    transform .2s ease,
    box-shadow .2s ease;
}

.project-cta-label {
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width .42s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    transform .42s cubic-bezier(.22, 1, .36, 1);
}

.project-slide:hover .project-cta,
.project-slide:focus-within .project-cta,
.project-cta:hover,
.project-cta:focus-visible {
  background: var(--button-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(39, 105, 242, .3);
}

@media (hover: hover) and (pointer: fine) {
  .project-cta {
    width: 56px;
    min-width: 56px;
    padding-inline: 15px;
    justify-content: center;
    gap: 0;
  }

  .project-cta-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }

  .project-slide:hover .project-cta,
  .project-slide:focus-within .project-cta {
    width: 210px;
    min-width: 210px;
    padding-inline: 22px;
    justify-content: space-between;
    gap: 22px;
  }

  .project-slide:hover .project-cta-label,
  .project-slide:focus-within .project-cta-label {
    max-width: 132px;
    opacity: 1;
    transform: none;
  }
}

.projects-arrow {
  width: 56px;
  height: 56px;
  position: absolute;
  top: 237px;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: rgba(255,255,255,.94);
  border: 1px solid #c8dbf2;
  border-radius: 50%;
  font-size: 1.35rem;
  box-shadow: 0 12px 30px rgba(46, 87, 145, .14);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.projects-arrow:hover,
.projects-arrow:focus-visible {
  color: #fff;
  background: var(--button-gradient);
  border-color: var(--button-gradient-border);
  box-shadow: var(--button-gradient-shadow);
  transform: scale(1.05);
}

.projects-arrow-prev { left: -28px; }
.projects-arrow-next { right: -28px; }

.projects-dots {
  min-height: 18px;
  margin: 22px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.projects-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: #cedcf0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.projects-dots button.is-active {
  width: 28px;
  background: #2e7bc1;
  border-radius: 999px;
}

@media (max-width: 1080px) {
  .project-slide {
    flex-basis: calc(100% - 74px);
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  }

  .project-slide-content {
    padding: 42px 30px 38px;
  }

}

@media (max-width: 800px) {
  .projects-showcase-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 26px;
  }

  .projects-all-link {
    width: max-content;
  }

  .project-slide {
    flex-basis: calc(100% - 42px);
    grid-template-columns: 1fr;
  }

  .project-visual-placeholder {
    min-height: 340px;
    margin: 20px 20px 0;
  }

  .project-slide-content {
    min-height: 360px;
    padding: 32px 24px 28px;
  }

  .projects-arrow {
    top: 180px;
  }

  .projects-arrow-prev { left: -18px; }
  .projects-arrow-next { right: -18px; }
}

@media (max-width: 520px) {
  .projects-showcase-heading h2 {
    font-size: clamp(2.45rem, 13vw, 3.5rem);
  }

  .projects-showcase-heading p:last-child {
    font-size: .94rem;
  }

  .projects-all-link {
    width: 100%;
  }

  .project-slide {
    flex-basis: calc(100% - 20px);
    border-radius: 18px;
  }

  .project-visual-placeholder {
    min-height: 250px;
    margin: 14px 14px 0;
    border-radius: 14px;
  }

  .project-visual-placeholder::before {
    inset: 16px;
  }

  .project-slide-content {
    min-height: 390px;
    padding: 28px 20px 24px;
  }

  .project-client-logo {
    min-height: 92px;
    margin-bottom: 18px;
  }

  .project-client-logo img {
    width: min(280px, 90%);
    height: 86px;
  }

  .project-client-logo-forell span {
    font-size: 2.55rem;
  }

  .project-cta {
    width: 100%;
    min-width: 0;
  }

  .projects-arrow {
    width: 46px;
    height: 46px;
    top: 118px;
  }

  .projects-arrow-prev { left: -12px; }
  .projects-arrow-next { right: -12px; }

  .projects-dots {
    margin-top: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .projects-track,
  .project-slide,
  .project-slide::after,
  .project-cta,
  .project-cta-label {
    transition: none;
  }

  .project-slide:hover,
  .project-slide:focus-within,
  .project-slide:hover .project-cta,
  .project-slide:focus-within .project-cta,
  .project-slide:hover .project-cta .icon-arrow,
  .project-slide:focus-within .project-cta .icon-arrow {
    transform: none;
  }
}

/* Client reviews */
.reviews {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 8%, rgba(198, 222, 255, .58), transparent 27%),
    #f7faff;
}

.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(46, 123, 193, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 78%, transparent 100%);
}

.reviews > * {
  position: relative;
  z-index: 1;
}

.reviews-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: end;
  margin-bottom: 44px;
}

.reviews-heading .eyebrow {
  margin-bottom: 18px;
}

.reviews-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.06em;
}

.reviews-heading h2 em {
  color: #2e7bc1;
  font-style: normal;
}

.reviews-heading-side {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 28px;
}

.reviews-arrows {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

.reviews-arrows button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #2769f2;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #c9daee;
  border-radius: 50%;
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.reviews-arrows button:hover,
.reviews-arrows button:focus-visible {
  color: #fff;
  background: var(--button-gradient);
  border-color: var(--button-gradient-border);
  box-shadow: var(--button-gradient-shadow);
  transform: translateY(-2px);
}

.reviews-viewport {
  --review-shadow-space: 72px;
  overflow: hidden;
  margin-block: calc(var(--review-shadow-space) * -1);
  padding-block: var(--review-shadow-space);
}

.reviews-track {
  --reviews-visible: 3;
  --reviews-gap: 16px;
  display: flex;
  gap: var(--reviews-gap);
  transition: transform .5s cubic-bezier(.22, .75, .25, 1);
  will-change: transform;
}

.review-card {
  position: relative;
  z-index: 0;
  min-width: 0;
  flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
  min-height: 340px;
  margin: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .86);
  border: 1px solid #d6e3f2;
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(51, 87, 135, .055);
  transition: transform .26s cubic-bezier(.22, .75, .25, 1);
  will-change: transform;
}

@media (hover: hover) {
  .review-card:hover {
    z-index: 2;
    transform: scale(1.008);
  }
}

.review-stars {
  color: #ffad24;
  font-size: .9rem;
  letter-spacing: .16em;
}

.review-card > p {
  margin: 26px 0 34px;
  color: #263957;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.52;
}

.review-card footer {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #dce6f3;
}

.review-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
  object-fit: cover;
  background: #edf5ff;
  border: 1px solid #c5dbf6;
  border-radius: 50%;
}

.review-card footer > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.review-card footer strong {
  color: var(--ink);
  font-size: .84rem;
}

.review-card footer small {
  margin-top: 3px;
  overflow: hidden;
  color: #6a7f9d;
  font-size: .69rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviews-dots {
  min-height: 18px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.reviews-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  background: #c7d8ee;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.reviews-dots button.is-active {
  width: 26px;
  background: #2e7bc1;
  border-radius: 999px;
}

#opinie {
  scroll-margin-top: 68px;
}

@media (max-width: 1080px) {
  .reviews-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .reviews-heading-side {
    align-items: center;
  }

  .reviews-track {
    --reviews-visible: 2;
  }
}

@media (max-width: 800px) {
  .reviews-track {
    --reviews-visible: 1;
  }
}

@media (max-width: 520px) {
  .reviews-heading h2 {
    font-size: clamp(2.45rem, 13vw, 3.5rem);
  }

  .reviews-heading-side {
    align-items: flex-start;
  }

  .review-card {
    min-height: 380px;
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    transition: none;
  }

  .review-card {
    transition: none;
  }
}

/* About CodeUnion */
.about-codeunion {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(198, 222, 255, .48), transparent 28%),
    #f7faff;
  border-top: 1px solid #dfe8f2;
  border-bottom: 1px solid #dfe8f2;
}

.about-codeunion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(46, 123, 193, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .024) 1px, transparent 1px);
  background-size: 106px 106px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .74) 42%, #000 100%);
  pointer-events: none;
}

.about-codeunion > * {
  position: relative;
  z-index: 1;
}

.about-codeunion-panel {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(0, 1.6fr);
  background: #f3f7fc;
  border: 1px solid #d3e1f4;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(51, 91, 148, .08);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .38s cubic-bezier(.22, 1, .36, 1);
}

.about-codeunion-panel::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 2px;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2.5px rgba(46, 123, 193, .68);
  clip-path: inset(0 100% 0 0 round 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .46s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease;
}

.about-codeunion-panel:hover,
.about-codeunion-panel:focus-within {
  transform: translateY(-6px);
  border-color: rgba(46, 123, 193, .32);
  box-shadow: 0 28px 62px rgba(26, 67, 130, .14);
}

.about-codeunion-panel:hover::after,
.about-codeunion-panel:focus-within::after {
  clip-path: inset(0 round 20px);
  opacity: 1;
}

.about-codeunion-copy {
  position: relative;
  z-index: 3;
  padding: clamp(40px, 3.1vw, 50px);
  background: transparent;
}

.about-codeunion .eyebrow {
  margin-bottom: 20px;
  color: #596780;
}

.about-codeunion h2 {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.45rem, 3vw, 3.75rem);
  font-weight: 620;
  line-height: .98;
  letter-spacing: -.058em;
}

.about-codeunion-lead {
  max-width: 690px;
  margin: 28px 0 0;
  color: #5a6d89;
  font-size: 1.05rem;
  line-height: 1.62;
}

.about-codeunion-button {
  margin-top: 34px;
}

.about-codeunion-media {
  margin: 0;
  min-height: 620px;
  position: relative;
  overflow: visible;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 14px 18px;
  background: transparent;
}

.about-codeunion-media::before {
  content: "";
  position: absolute;
  width: 112%;
  height: 220px;
  left: -9%;
  top: 31%;
  z-index: 0;
  background: linear-gradient(90deg, rgba(46, 123, 193, .025), rgba(64, 148, 235, .16) 40%, rgba(183, 221, 244, .24) 68%, rgba(46, 123, 193, .035));
  border-radius: 999px;
  box-shadow: 0 26px 62px rgba(46, 123, 193, .07);
  transform: rotate(-8deg);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

.about-codeunion-media::after {
  content: "";
  position: absolute;
  width: 78%;
  height: 160px;
  right: -5%;
  bottom: 12%;
  z-index: 0;
  background: linear-gradient(100deg, rgba(183, 221, 244, .035), rgba(92, 163, 229, .15) 42%, rgba(183, 221, 244, .24) 72%, rgba(46, 123, 193, .035));
  border-radius: 999px;
  box-shadow: 0 24px 58px rgba(46, 123, 193, .065);
  opacity: .9;
  transform: rotate(9deg);
  transition: transform .82s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.about-codeunion-collage {
  position: relative;
  z-index: 1;
  display: block;
  width: min(88%, 650px);
  max-width: none;
  max-height: calc(100% - 28px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(32, 72, 125, .16));
  transform: translateY(6px);
  transition: transform .45s ease, filter .45s ease;
}

.about-codeunion-panel:hover .about-codeunion-collage,
.about-codeunion-panel:focus-within .about-codeunion-collage {
  filter: drop-shadow(0 32px 34px rgba(32, 72, 125, .22));
  transform: translateY(-3px) scale(1.012);
}

.about-codeunion-panel:hover .about-codeunion-media::before,
.about-codeunion-panel:focus-within .about-codeunion-media::before {
  transform: rotate(-5deg) translateX(10px) scale(1.02);
}

.about-codeunion-panel:hover .about-codeunion-media::after,
.about-codeunion-panel:focus-within .about-codeunion-media::after {
  opacity: 1;
  transform: rotate(5deg) translateX(-8px);
}

@media (max-width: 1040px) {
  .about-codeunion-panel {
    grid-template-columns: 1fr;
  }

  .about-codeunion-media {
    min-height: clamp(390px, 64vw, 650px);
    padding: 18px 24px 10px;
  }

  .about-codeunion-collage {
    width: min(88%, 650px);
  }

}

@media (max-width: 620px) {
  .about-codeunion-copy {
    padding: 34px 22px 38px;
  }

  .about-codeunion h2 {
    font-size: clamp(2.45rem, 12vw, 3.55rem);
  }

  .about-codeunion-button {
    width: 100%;
  }

  .about-codeunion-media {
    min-height: clamp(300px, 84vw, 470px);
    padding: 14px 8px 8px;
  }

  .about-codeunion-media::before {
    width: 116%;
    height: 34%;
    left: -8%;
    top: 34%;
    transform: rotate(-7deg);
  }

  .about-codeunion-media::after {
    width: 84%;
    height: 28%;
    right: -8%;
    bottom: 13%;
    transform: rotate(8deg);
  }

  .about-codeunion-collage {
    width: min(90%, 440px);
  }

}

/* Full-bleed section backgrounds with a centered 1440px content canvas. */
.site-header {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  padding-inline: max(clamp(20px, 4vw, 64px), calc((100vw - var(--site-max-width)) / 2));
  transform: none;
}

.hero-dock {
  left: max(var(--site-gutter), calc((100% - var(--site-max-width)) / 2));
  right: max(var(--site-gutter), calc((100% - var(--site-max-width)) / 2));
}

.client-logos-grid,
.section > *,
.site-footer > * {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
}

/* Complete page navigation map */
.desktop-nav {
  gap: clamp(14px, 1.55vw, 28px);
}

.desktop-nav a {
  position: relative;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: #5caeff;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.desktop-nav a[aria-current="location"]::after {
  transform: scaleX(1);
}

.site-header:not(.scrolled) .desktop-nav a[aria-current="location"] {
  color: #ffffff;
}

.site-header.scrolled .desktop-nav a[aria-current="location"] {
  color: #1f6fba;
}

.mobile-nav a[aria-current="location"] {
  color: #1f6fba;
  background: rgba(46, 123, 193, .08);
}

#start,
#uslugi,
#realizacje,
#opinie,
#o-nas,
#proces,
#blog,
#kontakt {
  scroll-margin-top: 84px;
}

@media (max-width: 1240px) {
  .desktop-nav,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 6px;
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(5, 8, 45, .16);
  }

  .menu-toggle span {
    width: 20px;
    height: 1px;
    background: currentColor;
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 16px clamp(20px, 4vw, 64px) 22px;
    color: var(--ink);
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid rgba(5, 8, 45, .1);
    box-shadow: 0 22px 42px rgba(5, 8, 45, .12);
  }

  .mobile-nav.open {
    display: flex;
  }

  .mobile-nav a {
    padding: 10px 12px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 700;
  }

  .site-header:not(.scrolled) .menu-toggle {
    color: var(--white);
    border-color: rgba(132, 175, 231, .32);
  }

  .site-header:not(.scrolled) .mobile-nav {
    color: var(--white);
    background: rgba(2, 9, 31, .98);
    border-top-color: rgba(116, 174, 255, .12);
  }

  .site-header:not(.scrolled) .mobile-nav a[aria-current="location"] {
    color: #8dccff;
    background: rgba(80, 157, 255, .12);
  }
}

/* Unified lower-page sections */
.process {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 4%, rgba(198, 222, 255, .45), transparent 28%),
    #f7faff;
  border-color: #dfe8f2;
}

.process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(46, 123, 193, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .025) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 74% 58% at 78% 14%, #000 0%, rgba(0, 0, 0, .55) 52%, transparent 100%);
  pointer-events: none;
}

.process > * {
  position: relative;
  z-index: 1;
}

.process-intro {
  max-width: 980px;
  display: block;
  margin: 0 0 50px;
}

.process-intro .eyebrow {
  margin-bottom: 18px;
  color: #596780;
}

.process-intro h2 {
  max-width: 920px;
  color: var(--ink);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
}

.process-intro em {
  color: #2e7bc1;
}

.process-list {
  border-top-color: #d4e1f0;
}

.process-step {
  min-height: 286px;
  border-bottom-color: #d4e1f0;
}

.process-step:not(:nth-child(3n + 1)) {
  border-left-color: #d4e1f0;
}

.process-step h3 {
  color: var(--ink);
}

.process-step p {
  color: #5a6d89;
}

.insights {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 8%, rgba(210, 228, 252, .55), transparent 30%),
    #ffffff;
  border-color: #dfe8f2;
}

.insights::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(46, 123, 193, .023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 193, .023) 1px, transparent 1px);
  background-size: 98px 98px;
  mask-image: linear-gradient(115deg, transparent 6%, rgba(0, 0, 0, .68) 45%, #000 100%);
  pointer-events: none;
}

.insights > * {
  position: relative;
  z-index: 1;
}

.insights-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 56px;
  margin-bottom: 52px;
}

.insights-heading .eyebrow {
  margin-bottom: 18px;
  color: #596780;
}

.insights-heading h2 {
  max-width: 780px;
  color: var(--ink);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
}

.insights-lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: #61728c;
  font-size: 1.05rem;
  line-height: 1.6;
}

.insights-heading .button {
  min-width: 220px;
  border-radius: 999px;
}

.article-list {
  border-top: 0;
}

.article {
  min-height: 108px;
  padding: 0 20px;
  grid-template-columns: 74px 1fr auto;
  gap: 26px;
  color: var(--ink);
  border-color: #d9e4f1;
  border-radius: 14px;
}

.article + .article {
  margin-top: 4px;
}

.article:nth-child(even) {
  background: #f1f6fd;
}

.article:hover {
  padding-left: 28px;
  background: #e8f2ff;
}

.article-number {
  padding-right: 22px;
  color: #2e7bc1;
  border-right: 1px solid #d4e1f0;
  font-size: .9rem;
}

.article p {
  margin-bottom: 4px;
  color: #2e7bc1;
  font-family: var(--font-mono);
  font-size: .72rem;
}

.article h3 {
  color: var(--ink);
  font-size: clamp(1.1rem, 1.75vw, 1.55rem);
  font-weight: 520;
}

.article > span:last-child {
  color: #2e7bc1;
  font-size: 1.55rem;
}

.article:hover .icon-arrow-external,
.article:focus-visible .icon-arrow-external {
  transform: translate(2px, -2px) rotate(-45deg);
}

.contact {
  padding-top: clamp(56px, 7vw, 92px);
  padding-bottom: clamp(56px, 7vw, 92px);
  color: var(--ink);
  background: #f7faff;
  border: 0;
}

.contact-card {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 33vw, 610px);
  overflow: hidden;
  padding: clamp(48px, 5vw, 76px);
  display: grid;
  grid-template-columns: minmax(500px, 1.05fr) minmax(250px, .62fr) minmax(220px, .48fr);
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  background: #f6faff;
  border: 1px solid #d2e1f3;
  border-radius: 24px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 24px 70px rgba(44, 82, 137, .09);
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .38s cubic-bezier(.22, 1, .36, 1);
}

.contact-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 42%, transparent 66%);
  pointer-events: none;
}

.contact-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 2px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2.5px rgba(46, 123, 193, .68);
  clip-path: inset(0 100% 0 0 round 22px);
  opacity: 0;
  pointer-events: none;
  transition:
    clip-path .46s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease;
}

.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(46, 123, 193, .32);
  box-shadow: 0 30px 72px rgba(36, 91, 153, .15);
}

.contact-card:hover::after {
  clip-path: inset(0 round 22px);
  opacity: 1;
}

.contact-card:focus-visible {
  outline: 3px solid rgba(46, 123, 193, .26);
  outline-offset: 4px;
}

.contact-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.contact-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

.contact-card:hover .contact-art img,
.contact-card:focus-visible .contact-art img {
  transform: scale(1.025);
}

.contact-copy,
.contact-action {
  position: relative;
  z-index: 2;
}

.contact-copy {
  grid-column: 1;
  max-width: 680px;
}

.contact .eyebrow {
  width: auto;
  margin-bottom: 16px;
  padding: 0;
  color: #6680a7;
  background: transparent;
}

.contact h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.75rem, 4.25vw, 4.85rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.contact-copy > p:last-of-type {
  max-width: 650px;
  margin: 20px 0 0;
  color: #5d6e88;
  font-size: 1.05rem;
  line-height: 1.6;
}

.contact-benefits {
  max-width: 700px;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.contact-benefits li {
  min-width: 0;
  min-height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid rgba(127, 160, 202, .24);
}

.contact-benefits li:first-child {
  padding-left: 0;
}

.contact-benefits li:last-child {
  padding-right: 0;
  border-right: 0;
}

.contact-benefit-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #2d7ed5;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-benefit-icon img {
  width: 46px;
  height: 46px;
  display: block;
}

.contact-benefits strong {
  color: #5a6f90;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.45;
}

.contact-benefit-nowrap {
  white-space: nowrap;
}

.contact-action {
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.contact-action .contact-offer-button {
  margin-top: 0;
}

.site-footer {
  padding: clamp(54px, 7vw, 88px) clamp(24px, 6vw, 96px) 30px;
  display: block;
  color: var(--ink);
  background: #ffffff;
  border-top: 1px solid #dce6f2;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.15fr 1.08fr .9fr .9fr;
  gap: 0;
}

.footer-company {
  padding-right: clamp(28px, 4vw, 58px);
}

.footer-logo {
  width: 190px;
  margin-bottom: 20px;
}

.footer-company > strong {
  display: block;
  color: var(--ink);
  font-size: .94rem;
}

.footer-company > strong span {
  color: #526581;
  font-weight: 550;
}

.footer-company > p {
  max-width: 390px;
  margin: 10px 0 22px;
  color: #64758e;
  font-size: .9rem;
  line-height: 1.55;
}

.footer-contact-list {
  padding-top: 20px;
  display: grid;
  gap: 11px;
  border-top: 1px solid #dce6f2;
}

.footer-contact-list a,
.footer-contact-list p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #4f6280;
  font-size: .84rem;
  line-height: 1.45;
  text-decoration: none;
}

.footer-contact-list img {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  margin-top: 1px;
}

.footer-column {
  padding-left: clamp(24px, 3.4vw, 52px);
  padding-right: clamp(16px, 2.5vw, 38px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid #dce6f2;
}

.footer-column h2 {
  margin: 0 0 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--body);
  font-size: .83rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-brand-mark {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
  flex: 0 0 34px;
}

.footer-column > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #526581;
  font-size: .84rem;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.footer-column > a:hover,
.footer-column > a:focus-visible {
  color: #2e7bc1;
  transform: translateX(3px);
}

.footer-column > a .icon-arrow {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: #2e7bc1;
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}

.footer-column > a:hover .icon-arrow,
.footer-column > a:focus-visible .icon-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.footer-bottom {
  margin-top: 34px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 28px;
  color: #718099;
  border-top: 1px solid #dce6f2;
  font-size: .75rem;
}

.footer-legal {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.footer-legal a {
  color: #718099;
  text-decoration: none;
}

.footer-legal a[aria-disabled="true"] {
  cursor: default;
}

@media (max-width: 1120px) {
  .contact-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  }

  .footer-main {
    grid-template-columns: 1.1fr 1fr;
    row-gap: 44px;
  }

  .footer-column:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .footer-company {
    padding-right: 40px;
  }
}

@media (max-width: 850px) {
  .insights-heading,
  .contact-card {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-card::before {
    background: rgba(248, 252, 255, .66);
  }

  .contact-art {
    opacity: .48;
  }

  .contact-art img {
    object-position: 68% center;
  }

  .insights-heading .button {
    width: max-content;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .process-list {
    grid-template-columns: 1fr;
  }

  .process-step,
  .process-step:not(:nth-child(3n + 1)) {
    min-height: 220px;
    padding: 24px 0 28px;
    border-left: 0;
  }

  .article {
    min-height: 122px;
    padding: 14px 12px;
    grid-template-columns: 42px 1fr auto;
    gap: 14px;
  }

  .article:hover {
    padding-left: 16px;
  }

  .article-number {
    padding-right: 10px;
  }

  .contact-card {
    padding: 32px 22px;
    border-radius: 18px;
  }

  .contact-card::after {
    border-radius: 16px;
    clip-path: inset(0 100% 0 0 round 16px);
  }

  .contact-card:hover::after {
    clip-path: inset(0 round 16px);
  }

  .contact-benefits {
    margin-top: 26px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-benefits li,
  .contact-benefits li:first-child,
  .contact-benefits li:last-child {
    min-height: 54px;
    padding: 0;
    border-right: 0;
  }

  .contact-benefit-icon {
    width: 48px;
    height: 48px;
  }

  .contact-action {
    margin-top: 26px;
    width: 100%;
  }

  .footer-main {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }

  .footer-company,
  .footer-column,
  .footer-column:nth-child(3) {
    padding: 0;
    border-left: 0;
  }

  .footer-column {
    padding-top: 30px;
    border-top: 1px solid #dce6f2;
  }

  .footer-bottom {
    margin-top: 40px;
  }
}