/* =========================================================
   TechKraft - Design system (white + blue)
   ========================================================= */
:root {
  --blue-950: #061a3a;
  --blue-900: #0a2a5e;
  --blue-700: #1446a8;
  --blue-600: #1d5fe0;
  --blue-500: #3b7bf6;
  --blue-100: #e3edff;
  --blue-50:  #f3f7ff;
  --ink: #0d1b33;
  --muted: #56647d;
  --line: #e2e8f2;
  --white: #fff;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(10,42,94,.06), 0 2px 8px rgba(10,42,94,.04);
  --shadow-lg: 0 20px 50px -20px rgba(10,42,94,.25);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Manrope', 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* off-canvas mobile menu must not widen the page */
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--blue-600); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--blue-950); }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.container { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 1rem; background: var(--blue-600); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon-xs { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font: 600 .92rem/1 var(--font); letter-spacing: .01em; padding: .85rem 1.35rem; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s, box-shadow .18s; white-space: nowrap; }
.btn-sm { padding: .7rem 1.1rem; font-size: .86rem; }
.btn-lg { padding: 1rem 1.7rem; font-size: .98rem; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(10,42,94,.25); }
.btn-primary:hover { background: var(--blue-700); }
.btn-primary:active { background: var(--blue-900); }
.btn-outline { border-color: var(--blue-600); color: var(--blue-700); background: var(--white); }
.btn-outline:hover { background: var(--blue-600); color: #fff; }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.header-top { display: flex; align-items: flex-start; justify-content: space-between; height: 100px; padding-top: 16px; gap: 1.5rem; }
.header-top .logo, .header-top .nav-cta { min-height: 42px; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--blue-950); font-family: var(--display); font-size: 1.35rem; letter-spacing: -.02em; }
.logo strong { color: var(--blue-600); font-weight: 800; }
.logo-mark { width: 34px; height: 34px; color: var(--blue-600); }
:root { --header-h: 100px; }
.main-nav { position: absolute; left: 0; right: 0; bottom: 0; }
.main-nav ul { display: flex; gap: 2.25rem; list-style: none; margin: 0; padding: 0; height: 44px; align-items: stretch; justify-content: center; }
.main-nav ul a { display: flex; align-items: center; height: 100%; color: var(--muted); font-weight: 500; font-size: .93rem; position: relative; transition: color .2s; }
.main-nav ul a:hover, .main-nav ul a[aria-current="page"] { color: var(--blue-700); }
.main-nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-600); transform: scaleX(0); transition: transform .25s var(--ease); }
.main-nav ul a:hover::after, .main-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: .6rem; }
.nav-cta-mobile { display: none; }
/* Shifts the centred menu left (shift = half the padding); adjust to taste */
@media (min-width: 861px) and (max-width: 1239px) { .main-nav ul { padding-left: 14rem; gap: 1.6rem; } }
@media (min-width: 1240px) { .main-nav ul { padding-right: 8rem; } }
.hero-screen .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.hero-heading { text-align: center; }
.eyebrow-left { justify-self: start; }
.eyebrow-right { justify-self: end; }
@media (max-width: 860px) {
  .hero-screen .hero-top { grid-template-columns: 1fr 1fr; row-gap: .9rem; }
  .hero-heading { grid-column: 1 / -1; grid-row: 2; }
}
.hero-lede { margin: .35rem 0 0; color: var(--muted); font-size: clamp(.92rem, 1.1vw, 1.02rem); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--blue-950); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  :root { --header-h: 76px; }
  .header-top { height: 76px; padding-top: 0; align-items: center; }
  .nav-toggle { display: flex; }
  .header-top > .nav-cta { display: none; }
  .main-nav { position: fixed; inset: 76px 0 0; background: var(--white); padding: 1.5rem 0; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; overflow-y: auto; }
  .menu-open .main-nav { transform: none; visibility: visible; }
  .main-nav ul { flex-direction: column; height: auto; gap: 0; }
  .main-nav ul a { font-size: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .main-nav ul a::after { display: none; }
  .nav-cta-mobile { display: flex; flex-direction: column; margin-top: 1.5rem; }
  .nav-cta-mobile .btn { justify-content: center; padding: 1rem; font-size: 1rem; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-alt { background: var(--blue-50); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-100); padding: .4rem .85rem; border-radius: 999px; margin-bottom: 1.1rem; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { text-align: center; margin-inline: auto; }
.lead { font-size: 1.12rem; color: var(--muted); }

/* Page hero (subpages) */
.page-hero { position: relative; padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4rem); background: radial-gradient(1200px 400px at 80% -10%, var(--blue-100), transparent 70%), linear-gradient(180deg, var(--blue-50), var(--white)); overflow: hidden; }
.page-hero::before, .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 65%); opacity: .6; pointer-events: none; }
.page-hero .container { position: relative; }
.page-hero p { max-width: 680px; }

/* ---------- Home hero ---------- */
.hero { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 0; background: linear-gradient(180deg, var(--blue-50), var(--white) 70%); overflow: hidden; }
.hero-top { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.hero-top h1 span { background: linear-gradient(120deg, var(--blue-600), var(--blue-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.hero-badges li { display: inline-flex; align-items: center; gap: .4rem; background: var(--white); border: 1px solid var(--line); padding: .45rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--blue-900); box-shadow: var(--shadow-sm); }
.hero-badges .icon { color: var(--blue-600); width: 16px; height: 16px; }

/* Home hero fills exactly one screen: title row + full-width slider */
.hero-screen { height: calc(100svh - var(--header-h)); min-height: 520px; display: flex; flex-direction: column; padding-top: clamp(1.5rem, 4vh, 3rem); }
.hero-screen .hero-top { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.hero-screen h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin: 0; }
.hero-screen .eyebrow { margin-bottom: .8rem; }
.hero-sub { max-width: 380px; color: var(--muted); margin: 0; }
.marquee { position: relative; flex: 1; min-height: 0; overflow: hidden; padding-bottom: clamp(1.25rem, 3vh, 2rem); }
.marquee-track { display: flex; gap: 1rem; height: 100%; width: max-content; animation: scroll-left 45s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee figure { position: relative; margin: 0; height: 100%; width: clamp(300px, 34vw, 640px); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.marquee img { width: 100%; height: 100%; object-fit: cover; }
.marquee figcaption { position: absolute; left: 1rem; bottom: 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--blue-950); font-size: .82rem; font-weight: 700; padding: .45rem .8rem; border-radius: 999px; }
.marquee figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,26,58,.35)); }
.marquee figcaption { z-index: 1; }
@keyframes scroll-left { to { transform: translateX(calc(-50% - .5rem)); } }

/* Full-width hero slider: one image per screen, dots, auto-advance */
.hero-screen .hero-top { gap: 1.5rem; }
.hero-screen h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); white-space: nowrap; }
.hero-screen .hero-top .eyebrow { margin: 0; font-size: .68rem; padding: .35rem .75rem; white-space: nowrap; }
.hero-slider { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hero-track { display: flex; height: 100%; transition: transform .9s var(--ease); }
.hero-slide { position: relative; margin: 0; min-width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(6,26,58,.45)); }
.hero-slide figcaption { position: absolute; z-index: 1; left: max(1.5rem, calc((100% - 1200px) / 2)); bottom: 2rem; background: rgba(255,255,255,.95); color: var(--blue-950); font-size: .85rem; font-weight: 700; padding: .5rem .9rem; border-radius: 6px; }
.hero-dots { position: absolute; z-index: 2; left: 50%; bottom: 2.1rem; transform: translateX(-50%); display: flex; gap: .6rem; }
.hero-dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.hero-dots button[aria-selected="true"] { width: 32px; background: #fff; }
@media (max-width: 860px) {
  .hero-screen h1 { white-space: normal; }
  .hero-slide figcaption { bottom: 4rem; }
}

.hero-stat { position: absolute; left: -2rem; top: 50%; transform: translate(-100%, -50%); width: 280px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-lg); }
.hero-stat .icon { color: var(--blue-600); width: 32px; height: 32px; margin-bottom: .75rem; }
.hero-stat strong { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--blue-950); margin-bottom: .3rem; }
.hero-stat p { font-size: .9rem; color: var(--muted); margin: 0; }

.hero-intro { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; padding: 2rem 0 1rem; }
.section-tight-top { padding-top: 2.5rem; }
.hero-intro p { font-size: 1.15rem; color: var(--muted); margin: 0; }
.hero-intro .actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1024px) {
  .marquee-wrap { width: 100%; }
  .hero-stat { display: none; }
  .hero-top, .hero-intro { grid-template-columns: 1fr; }
  .hero-intro .actions { justify-content: flex-start; }
}

/* Pillars strip */
.pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; padding: 1.4rem 0; border-block: 1px solid var(--line); color: var(--blue-900); font-weight: 600; font-size: .95rem; list-style: none; margin: 0; }
.pillars li { display: inline-flex; align-items: center; gap: .5rem; }
.pillars li::before { content: ''; width: 6px; height: 6px; background: var(--blue-500); border-radius: 50%; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

.service-card, .industry-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; overflow: hidden; display: flex; flex-direction: column; }
.service-card::before, .industry-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue-600), var(--blue-500)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.service-card:hover, .industry-card:hover, .service-card.open { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.service-card:hover::before, .industry-card:hover::before, .service-card.open::before { transform: scaleX(1); }
.card-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); color: var(--blue-600); margin-bottom: 1.4rem; transition: background .35s, color .35s; }
.service-card:hover .card-icon, .industry-card:hover .card-icon { background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #fff; }
.card-num { position: absolute; top: 1.6rem; right: 1.8rem; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--blue-100); }
.card-short, .industry-card p { color: var(--muted); font-size: .96rem; }
.card-long { border-top: 1px dashed var(--line); padding-top: 1rem; margin-bottom: .5rem; color: var(--ink); font-size: .94rem; animation: fade-in .4s var(--ease); }
.link-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .3rem 0; font: 600 .92rem var(--font); color: var(--blue-600); cursor: pointer; }
.link-btn[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.link-btn .icon { transition: transform .3s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } }

.industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

/* Trust features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; background: var(--white); border-radius: 14px; border: 1px solid var(--line); }
.feature .icon { color: var(--blue-600); margin-top: .2rem; }
.feature strong { display: block; color: var(--blue-950); }
.feature span { color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Packages ---------- */
.packages { display: flex; flex-direction: column; gap: 1.5rem; }
.package-card { display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: 2.5rem; align-items: center; padding: 2.5rem; background: var(--white); border: 1px solid var(--line); border-radius: 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.package-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.package-card.featured { background: linear-gradient(135deg, var(--blue-950), var(--blue-900) 60%, var(--blue-700)); border-color: transparent; color: #cfdcf5; }
.package-card.featured h3, .package-card.featured h4, .package-card.featured strong { color: #fff; }
.package-card.featured .pkg-tag { background: rgba(255,255,255,.12); color: #fff; }
.package-card.featured .pkg-price { color: #fff; }
.package-card.featured .check-list .icon { color: #8fb4ff; }
.package-card.featured .btn-primary { background: #fff; color: var(--blue-700); }
.pkg-tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-50); padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1rem; }
.pkg-head h3 { font-size: 1.6rem; }
.pkg-intro { color: inherit; opacity: .9; }
.pkg-price { font-family: var(--display); font-weight: 700; color: var(--blue-700); margin: 0; }
.pkg-body { border-left: 1px solid var(--line); padding-left: 2.5rem; }
.featured .pkg-body { border-color: rgba(255,255,255,.15); }
.pkg-body h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 1.2rem 0 .7rem; }
.check-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.check-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .93rem; }
.check-list .icon { color: var(--blue-600); margin-top: .25rem; }
.pkg-suitable { font-size: .9rem; margin: 0; }
@media (max-width: 1024px) {
  .package-card { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
  .pkg-body { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; }
}
@media (max-width: 560px) { .check-list { grid-template-columns: 1fr; } .pkg-action .btn { width: 100%; justify-content: center; } }

/* ---------- About slider ---------- */
.slider { position: relative; border-radius: 28px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.slides { display: flex; transition: transform .7s var(--ease); }
.slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.slide-text { padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.slide-text .slide-num { font-family: var(--display); font-weight: 800; color: var(--blue-100); font-size: 4rem; line-height: 1; margin-bottom: 1rem; }
.slide-text p { color: var(--muted); font-size: 1.07rem; }
.slide-text > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; }
.slide.active .slide-text > * { opacity: 1; transform: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-controls { position: absolute; left: clamp(2rem, 5vw, 4rem); bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.slider-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--blue-700); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s; }
.slider-btn:hover { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.slider-btn.prev .icon { transform: rotate(180deg); }
.dots { display: flex; gap: .5rem; }
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 0; background: var(--blue-100); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.dots button[aria-selected="true"] { width: 30px; background: var(--blue-600); }
@media (max-width: 860px) {
  .slide { grid-template-columns: 1fr; min-height: 0; }
  .slide img { height: 240px; order: -1; }
  .slide-text { padding-bottom: 6rem; }
}

/* Values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.values div { padding: 1.5rem; }
.values strong { display: block; font-family: var(--display); font-size: 2.4rem; color: var(--blue-600); }
.values span { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .values { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; }
.contact-aside { position: sticky; top: 100px; }
.contact-aside ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.contact-aside li { display: flex; gap: .8rem; align-items: flex-start; color: var(--muted); }
.contact-aside li .icon { color: var(--blue-600); }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--blue-950); }
.req { color: #c62828; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: .97rem; color: var(--ink); background: var(--blue-50); border: 1.5px solid var(--line); border-radius: 12px; padding: .8rem 1rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); background: var(--white); box-shadow: 0 0 0 4px rgba(59,123,246,.15); }
[aria-invalid="true"] { border-color: #c62828 !important; background: #fff6f6 !important; }
.error { color: #c62828; font-size: .83rem; margin: .35rem 0 0; min-height: 1em; }
.error:empty { display: none; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--muted); margin-top: 1.25rem; }
.consent input { margin-top: .3rem; accent-color: var(--blue-600); width: 18px; height: 18px; }
.form-note { font-size: .83rem; color: var(--muted); margin: .75rem 0 1.25rem; }
.form-success { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.5rem; padding: 1.25rem; border-radius: 14px; background: #ecfdf3; border: 1px solid #b7ebc9; color: #14532d; animation: fade-in .4s var(--ease); }
.form-success p { margin: .2rem 0 0; }
.package-banner { display: flex; gap: .6rem; align-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-900); padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .93rem; }
.package-banner .icon { color: var(--blue-600); }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } .contact-aside { position: static; } }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(2.5rem, 6vw, 4rem); background: linear-gradient(135deg, var(--blue-950), var(--blue-700)); color: #cfdcf5; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band::after { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(59,123,246,.5), transparent 70%); }
.cta-band h2 { color: #fff; margin-bottom: .3rem; }
.cta-band p { margin: 0; }
.cta-band .btn-primary { background: #fff; color: var(--blue-700); position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-950); color: #9fb1d1; padding: 4.5rem 0 1.5rem; margin-top: 0; }
.site-footer .logo { color: #fff; }
.site-footer .logo strong, .site-footer .logo-mark { color: #6c9cff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: 2.5rem; }
.footer-brand p { margin-top: 1.2rem; max-width: 320px; font-size: .94rem; }
.footer-domain { font-size: .85rem !important; color: #6c86b3; }
.footer-title { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer a { color: #9fb1d1; font-size: .93rem; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .87rem; }
.footer-bottom p { margin: 0; }
.legal { display: flex !important; gap: 1.5rem !important; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Classy tiles (service + industry cards) ----------
   Light cards: soft blue corner glow, cursor-following highlight, gradient border on hover. */
.service-card, .industry-card {
  isolation: isolate;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid transparent;
  background:
    radial-gradient(360px circle at var(--mx, 100%) var(--my, 0%), rgba(59,123,246,.08), transparent 65%) padding-box,
    linear-gradient(180deg, #fff, #f8fbff) padding-box,
    linear-gradient(160deg, #dbe6f7, #eef3fb 40%, #dbe6f7) border-box;
  box-shadow: 0 1px 2px rgba(10,42,94,.04), 0 8px 24px -12px rgba(10,42,94,.10);
}
.service-card::before, .industry-card::before { display: none; }
.service-card:hover, .industry-card:hover, .service-card.open {
  background:
    radial-gradient(360px circle at var(--mx, 100%) var(--my, 0%), rgba(59,123,246,.10), transparent 65%) padding-box,
    linear-gradient(180deg, #fff, #f8fbff) padding-box,
    linear-gradient(135deg, var(--blue-500), #9cc0ff 45%, var(--blue-600)) border-box;
  box-shadow: 0 2px 4px rgba(10,42,94,.04), 0 22px 44px -22px rgba(29,95,224,.35);
}
.card-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-600); }
.card-icon .icon { width: 22px; height: 22px; }
.service-card:hover .card-icon, .industry-card:hover .card-icon { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.card-num { top: 1.75rem; right: 1.75rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--blue-500); font-family: var(--font); line-height: 44px; }
.service-card h3, .industry-card h3 { margin-bottom: .45rem; }
.card-short, .industry-card p { margin-bottom: 1rem; }
.link-btn { padding-top: .75rem; border-top: 1px solid var(--line); width: 100%; }

/* ---------- Graphic section backdrop (services) ----------
   Pleasant hospital blue: soft gradient, medical-cross pattern, moving heartbeat line, drifting light. */
.section-graphic {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(800px 480px at 0% 0%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(700px 520px at 100% 100%, rgba(120,190,240,.45), transparent 65%),
    linear-gradient(160deg, #eaf5fd 0%, #d6ebfa 50%, #c4e2f7 100%);
}
.section-graphic.section-tight-top { padding-top: clamp(3.5rem, 7vw, 5rem); }
.section-graphic { padding-bottom: calc(clamp(4rem, 9vw, 7rem) + 150px); } /* room for the heartbeat line + bottom fade */
.platform { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- Why section: soft backdrop + image slider ---------- */
.why { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(800px 480px at 100% 0%, rgba(120,190,240,.45), transparent 70%),
    radial-gradient(700px 480px at 0% 100%, rgba(160,214,250,.5), transparent 70%),
    linear-gradient(160deg, #f1f8fe 0%, #e2f0fb 55%, #d3e9f9 100%); }
/* Background-beams grid (21st.dev style): fine grid + light beams travelling along the lines */
.why::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(47,134,214,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(47,134,214,.11) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 85%); }
.why-beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(460px 380px at 78% 52%, rgba(59,143,224,.22), transparent 70%); } /* glow behind the slider */
.why-beams i { position: absolute; display: block; border-radius: 1px; }
.why-beams i:nth-child(-n+3) { left: 0; width: 240px; height: 1px; background: linear-gradient(90deg, transparent, #3b8fe0, #9fd0ff, transparent); animation: beam-x 9s linear infinite; }
.why-beams i:nth-child(1) { top: 240px; }
.why-beams i:nth-child(2) { top: 480px; animation-duration: 12s; animation-delay: -4s; }
.why-beams i:nth-child(3) { top: 720px; animation-duration: 10s; animation-delay: -7s; }
.why-beams i:nth-child(n+4) { top: 0; width: 1px; height: 220px; background: linear-gradient(180deg, transparent, #3b8fe0, #9fd0ff, transparent); animation: beam-y 11s linear infinite; }
.why-beams i:nth-child(4) { left: 288px; }
.why-beams i:nth-child(5) { left: 960px; animation-duration: 14s; animation-delay: -6s; }
@keyframes beam-x { from { transform: translateX(-260px); } to { transform: translateX(100vw); } }
@keyframes beam-y { from { transform: translateY(-240px); } to { transform: translateY(1200px); } }
@media (prefers-reduced-motion: reduce) { .why-beams i { display: none; } }
/* Blend top + bottom into the white neighbours; deepen text for contrast on blue */
.why::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #fff 0, rgba(255,255,255,0) 160px, rgba(255,255,255,0) calc(100% - 160px), #fff 100%); }
.why { padding-block: clamp(6rem, 11vw, 9rem); }
.why .section-head h2 { color: #082c52; }
.why .section-head .lead { color: #2e5578; }
.why .eyebrow { background: #fff; color: #1a62b0; border: 1px solid rgba(47,134,214,.25); }
.why-points h3 { color: #082c52; }
.why-points p { color: #3a5c7c; }
.why-points li:nth-child(odd) { border-right-color: rgba(47,134,214,.22); }
.why-slider { box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 30px 60px -30px rgba(11,58,107,.45); }

/* Why section - dark hospital blue theme (overrides the light values above) */
.why {
  background:
    radial-gradient(800px 480px at 100% 0%, rgba(59,143,224,.35), transparent 70%),
    radial-gradient(700px 480px at 0% 100%, rgba(30,110,190,.35), transparent 70%),
    linear-gradient(160deg, #0d3b6e 0%, #0a2f5a 55%, #082647 100%);
}
/* Flowing wave lines (replaces the grid): two layers drifting in opposite directions */
.why::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400' fill='none' stroke='%239fd0ff' stroke-width='1.4'%3E%3Cpath d='M0 150C200 90 400 210 600 150S1000 90 1200 150' stroke-opacity='.28'/%3E%3Cpath d='M0 185C200 125 400 245 600 185S1000 125 1200 185' stroke-opacity='.2'/%3E%3Cpath d='M0 220C200 160 400 280 600 220S1000 160 1200 220' stroke-opacity='.14'/%3E%3Cpath d='M0 255C200 195 400 315 600 255S1000 195 1200 255' stroke-opacity='.09'/%3E%3C/svg%3E") repeat-x 0 50% / 1200px 400px;
  mask-image: none; -webkit-mask-image: none;
  animation: wave-drift 40s linear infinite;
}
@keyframes wave-drift { to { background-position: -1200px 50%; } }
.why::after { background: linear-gradient(180deg, #fff 0, rgba(255,255,255,0) 120px, rgba(255,255,255,0) calc(100% - 120px), #fff 100%); }
.why-beams {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='500' viewBox='0 0 1600 500' fill='none' stroke='%236cb0ff' stroke-width='1.2'%3E%3Cpath d='M0 260C260 340 540 180 800 260S1340 340 1600 260' stroke-opacity='.3'/%3E%3Cpath d='M0 300C260 380 540 220 800 300S1340 380 1600 300' stroke-opacity='.18'/%3E%3Cpath d='M0 340C260 420 540 260 800 340S1340 420 1600 340' stroke-opacity='.1'/%3E%3C/svg%3E") repeat-x 0 65% / 1600px 500px,
    radial-gradient(460px 380px at 78% 52%, rgba(108,176,255,.28), transparent 70%);
  animation: wave-drift-rev 60s linear infinite;
}
@keyframes wave-drift-rev { to { background-position: 1600px 65%, 0 0; } }
.why-beams i { display: none; } /* beams retired with the grid */
@media (prefers-reduced-motion: reduce) { .why::before, .why-beams { animation: none; } }
.why .section-head h2 { color: #fff; }
.why .section-head .lead { color: #fff; }
.why .eyebrow { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.why .why-points h3 { color: #fff; }
.why .why-points p { color: rgba(255,255,255,.9); }
.why .why-points li:nth-child(odd) { border-right-color: rgba(159,208,255,.2); }
.why .why-points li::before { background: #6cb0ff; box-shadow: 0 0 0 4px rgba(108,176,255,.22); }
.why-slider { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 30px 60px -25px rgba(0,0,0,.55); }

/* Platform heading centred on one line */
.platform-head { max-width: none; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1000px) { .platform-head h2 { white-space: nowrap; font-size: clamp(1.8rem, 2.6vw, 2.5rem); } }

.why-slider { position: relative; border-radius: 20px; overflow: hidden; min-height: 460px; box-shadow: 0 30px 60px -30px rgba(11,58,107,.4); }
.why-track { position: absolute; inset: 0; display: flex; transition: transform .8s var(--ease); }
.why-slide { margin: 0; min-width: 100%; height: 100%; }
.why-slide img { width: 100%; height: 100%; object-fit: cover; }
.why-dots { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 1; }
.why-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.6); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.why-dots button[aria-selected="true"] { width: 28px; background: #fff; }
@media (max-width: 960px) { .why-slider { min-height: 340px; } }

/* ---------- Client portfolio (home) ---------- */
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.clients-grid > .industry-card:first-child { grid-column: span 2; }
.clients-grid > .industry-card:first-child, .clients-grid > .industry-card:first-child:hover {
  background: radial-gradient(400px circle at var(--mx, 90%) var(--my, 0%), rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, var(--blue-600), var(--blue-900));
  color: #dbe7ff; }
.clients-grid > .industry-card:first-child h3 { color: #fff; font-size: 1.4rem; }
.clients-grid > .industry-card:first-child p { color: #dbe7ff; max-width: 48ch; }
.clients-grid > .industry-card:first-child .card-icon { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.clients-more { text-align: center; margin: 2.25rem 0 0; }
@media (max-width: 1024px) { .clients-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .clients-grid { grid-template-columns: 1fr; } .clients-grid > .industry-card:first-child { grid-column: auto; } }
/* Aurora mesh: large blurred hospital-blue light fields drifting slowly behind the tiles */
.section-graphic::before {
  content: ''; position: absolute; inset: -25% -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(120,196,245,.55), transparent 70%),
    radial-gradient(34% 40% at 82% 30%, rgba(76,160,230,.35), transparent 70%),
    radial-gradient(40% 45% at 60% 78%, rgba(160,214,250,.55), transparent 70%),
    radial-gradient(30% 34% at 12% 85%, rgba(255,255,255,.9), transparent 70%);
  filter: blur(40px);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
  50% { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.05); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.02); }
}
/* Soft white fade at the top so the section blends out of the white intro above */
.section-graphic > .container::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -50vw; right: -50vw; top: calc(-1 * clamp(3.5rem, 7vw, 5rem)); height: 140px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0));
}

/* Large healthcare / security / compliance / tech line motifs (SVGs injected by main.js) */
.svc-motifs {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  background-size: 400px 400px, 280px 280px, 420px 420px, 340px 340px;
  background-position: left -70px top 70px, right 3% top 50px, right -50px bottom 170px, left 2% bottom 210px;
  animation: motif-float 18s ease-in-out infinite alternate;
}
@keyframes motif-float { to { transform: translate3d(0, -16px, 0); } }
/* Bottom fade to white, mirroring the top */
.svc-motifs::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -30px; height: 200px; /* extends past the float so no blue strip shows */
  background: linear-gradient(0deg, #fff 22%, rgba(255,255,255,0));
}
@media (max-width: 860px) {
  .svc-motifs { background-size: 240px 240px, 170px 170px, 250px 250px, 200px 200px; background-position: left -60px top 40px, right -30px top 30%, right -60px bottom 160px, left -40px bottom 45%; }
}

/* Conversion panel under the service tiles */
.svc-convert {
  margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 24px 50px -28px rgba(11,58,107,.35);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.svc-convert h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: #0b3a6b; margin-bottom: .4rem; }
.svc-convert p { color: #3f6485; margin: 0 0 1rem; max-width: 60ch; }
.svc-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.svc-trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: #0b3a6b; }
.svc-trust .icon { color: var(--blue-600); }
.svc-convert-actions { display: grid; justify-items: center; gap: .6rem; }
.svc-convert-actions small { color: #3f6485; font-size: .85rem; }
.svc-convert-actions small a { font-weight: 600; }
@media (max-width: 860px) { .svc-convert { grid-template-columns: 1fr; } .svc-convert-actions { justify-items: start; } }
@media (prefers-reduced-transparency: reduce) { .svc-convert { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Heartbeat (ECG) line gliding across + soft light orb */
.section-graphic::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 90px; height: 120px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120' viewBox='0 0 600 120'%3E%3Cpath d='M0 60h230l12-20 14 46 18-82 16 74 12-18h298' fill='none' stroke='%232f86d6' stroke-opacity='.35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0 / 600px 120px;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  animation: ecg-glide 14s linear infinite;
}
@keyframes ecg-glide { to { background-position: -600px 0; } }
.section-graphic .container { position: relative; }
.section-graphic .container::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; top: -140px; right: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 65%);
  animation: orb-drift 16s ease-in-out infinite alternate;
}
@keyframes orb-drift { to { transform: translate(-160px, 140px) scale(1.15); } }
.section-graphic .section-head h2 { color: #0b3a6b; }
.section-graphic .section-head .lead { color: #3f6485; }
.section-graphic .eyebrow { background: rgba(255,255,255,.75); color: #1f6fb8; border: 1px solid rgba(47,134,214,.25); }
.section-graphic .service-card { box-shadow: 0 1px 2px rgba(11,58,107,.06), 0 18px 40px -20px rgba(11,58,107,.28); }

/* ---------- Expanding service tiles ----------
   Clicked tile spans the full row; the rest flow below it. */
.grid-3 { grid-auto-flow: row dense; }
.service-card { cursor: pointer; }
.service-card.open { grid-column: 1 / -1; cursor: default; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 3rem; align-content: start; padding: 2.25rem; }
.service-card.open > .card-icon, .service-card.open > h3, .service-card.open > .card-short, .service-card.open > .link-btn { grid-column: 1; }
.service-card.open > h3 { font-size: 1.5rem; }
.service-card.open > .card-long { grid-column: 2; grid-row: 1 / span 4; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 3rem; margin: 0; font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.card-long .btn { margin-top: .5rem; }
.service-card.open > .card-long { padding-right: 3.5rem; } /* keep clear of the tile number */
.service-card.open > .link-btn { align-self: end; }
@media (max-width: 760px) {
  .service-card.open { grid-template-columns: 1fr; }
  .service-card.open > .card-long { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; margin-bottom: 1rem; }
}
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- Our Platform ---------- */
.platform-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.free-badge { display: flex; gap: 1rem; align-items: flex-start; margin: 1.75rem 0; padding: 1.1rem 1.25rem; border-radius: 14px; background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #dbe7ff; box-shadow: 0 16px 36px -18px rgba(29,95,224,.6); }
.free-badge .icon { color: #fff; width: 28px; height: 28px; margin-top: .1rem; }
.free-badge strong { display: block; color: #fff; font-family: var(--display); font-size: 1.08rem; }
.free-badge span { font-size: .92rem; }
.platform-features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.platform-features li { padding-left: 1rem; border-left: 2px solid var(--blue-100); }
.platform-features strong { display: block; color: var(--blue-950); font-size: .95rem; }
.platform-features span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.platform-shot { margin: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(10,42,94,.45); overflow: hidden; }
.platform-shot > img { display: block; width: 100%; }
.browser-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: var(--blue-50); border-bottom: 1px solid var(--line); }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfdcf0; }
.browser-bar em { margin-left: .75rem; font-style: normal; font-size: .75rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .2rem .7rem; }
.mock-screen { display: grid; grid-template-columns: 56px 1fr; min-height: 340px; }
.mock-side { background: var(--blue-950); padding: 1rem .8rem; display: grid; align-content: start; gap: .8rem; }
.mock-side i { height: 28px; border-radius: 8px; background: rgba(143,180,255,.18); }
.mock-side i:first-child { background: var(--blue-600); }
.mock-main { padding: 1.25rem; display: grid; gap: 1rem; background: linear-gradient(180deg, #fff, var(--blue-50)); }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.mock-kpis div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }
.mock-kpis b { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--blue-700); }
.mock-kpis small { color: var(--muted); font-size: .72rem; }
.mock-chart { height: 120px; display: flex; align-items: flex-end; gap: 8px; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.mock-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue-500), var(--blue-100)); }
.mock-rows { display: grid; gap: .5rem; }
.mock-rows i { height: 12px; border-radius: 6px; background: #e3ecf8; }
.mock-rows i:nth-child(2) { width: 80%; } .mock-rows i:nth-child(3) { width: 60%; }
.platform-shot figcaption { text-align: center; font-size: .8rem; color: var(--muted); padding: .6rem; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .platform-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .platform-features { grid-template-columns: 1fr; } }

/* ---------- Why choose us (text + 2x2 points + image) ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.why-text .section-head { margin-bottom: 2.75rem; }
.why-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; row-gap: 2.75rem; }
.why-points li { position: relative; padding: 0 2rem 0 1.75rem; }
.why-points li:nth-child(odd) { border-right: 1px solid var(--line); }
.why-points li:nth-child(even) { padding-left: 3.25rem; }
.why-points li::before { content: ''; position: absolute; left: 0; top: .5rem; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); }
.why-points li:nth-child(even)::before { left: 1.5rem; }
.why-points h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.why-points p { color: var(--muted); font-size: .96rem; margin: 0; }
.why-image { margin: 0; border-radius: 20px; overflow: hidden; min-height: 420px; }
.why-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr; } .why-image { min-height: 320px; } }
@media (max-width: 600px) {
  .why-points { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .why-points li, .why-points li:nth-child(even) { border-right: 0; padding: 0 0 0 1.75rem; }
  .why-points li:nth-child(even)::before { left: 0; }
}

/* ---------- Reveal ---------- */
/* Scroll reveal (BizSpace-style): headings rise 28px, items rise 18px with a stagger, once per element */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.25,.1,.25,1) var(--d, 0ms), transform .6s cubic-bezier(.25,.1,.25,1) var(--d, 0ms), box-shadow .35s var(--ease), border-color .35s; }
.reveal.reveal-head { transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; }
.service-card.in:hover, .industry-card.in:hover { transform: translateY(-4px); }
.package-card.in:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Brand logo (image supplied by TechKraft) ---------- */
.logo img { display: block; height: 64px; width: auto; }
.site-footer .logo { background: #fff; border-radius: 12px; padding: .35rem .6rem; }
.site-footer .logo img { height: 56px; }
@media (max-width: 860px) { .site-header .logo img { height: 52px; } }
/* Larger logo: scale up and trim the image's built-in white margins so the name + tagline read bigger */
.site-header .logo img { height: 86px; margin: -12px -19px -6px -19px; }
.site-footer .logo img { height: 76px; margin: -10px -16px -5px -16px; }
@media (max-width: 860px) { .site-header .logo img { height: 70px; margin: -10px -15px -5px -15px; } }
.logo img { max-width: none; width: auto; aspect-ratio: auto; } /* never squash the logo */

/* Logo drawn from the supplied image in two parts so the shield can be sized independently of the text.
   Pixel boxes inside techkraft-logo.webp (2000x749): shield 175,100 500x589 - wordmark+tagline 753,229 1116x295.
   --k = text scale, --ks = shield scale (ks < k makes the shield smaller). */
.logo { --k: .1148; --ks: .092; gap: .7rem; }
.logo-shield, .logo-word { display: block; flex-shrink: 0; background: url("../images/techkraft-logo.webp") no-repeat; }
.logo-shield { width: calc(500px * var(--ks)); height: calc(589px * var(--ks)); background-size: calc(2000px * var(--ks)) auto; background-position: calc(-175px * var(--ks)) calc(-100px * var(--ks)); }
.logo-word { width: calc(1116px * var(--k)); height: calc(295px * var(--k)); background-size: calc(2000px * var(--k)) auto; background-position: calc(-753px * var(--k)) calc(-229px * var(--k)); }
.site-footer .logo { --k: .1; --ks: .08; padding: .6rem .8rem; }
@media (max-width: 860px) { .site-header .logo { --k: .095; --ks: .076; } }

/* Wordmark and tagline as separate pieces so the tagline can be enlarged.
   Boxes in techkraft-logo.webp: name 753,229 1116x187 - tagline 761,475 1024x50. --kt = tagline scale. */
.logo { --kt: calc(var(--k) * 1.18); }
.logo-text { display: flex; flex-direction: column; gap: calc(55px * var(--k)); }
.logo-word { height: calc(187px * var(--k)); }
.logo-tag { display: block; width: calc(1024px * var(--kt)); height: calc(50px * var(--kt)); background: url("../images/techkraft-logo.webp") no-repeat; background-size: calc(2000px * var(--kt)) auto; background-position: calc(-761px * var(--kt)) calc(-475px * var(--kt)); }

/* Why section: slightly lighter hospital blue */
.why {
  background:
    radial-gradient(800px 480px at 100% 0%, rgba(90,170,240,.35), transparent 70%),
    radial-gradient(700px 480px at 0% 100%, rgba(60,140,220,.35), transparent 70%),
    linear-gradient(160deg, #1a5a9c 0%, #164f8a 55%, #134478 100%);
}

/* Why slider: match the photos' 3:2 shape so they aren't cropped/zoomed */
.why-slider { min-height: 0; aspect-ratio: 3 / 2; align-self: center; }
@media (max-width: 960px) { .why-slider { min-height: 0; } }
.why-slide:nth-child(1) img { object-position: 70% 30%; } /* keep the doctor in frame */

/* Client tiles: title sits beside its icon, description below */
.industry-card { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; align-content: start; }
.industry-card .card-icon { margin-bottom: 0; }
.industry-card h3 { margin: 0; }
.industry-card p { grid-column: 1 / -1; margin: 1rem 0 0; }

/* Why section: lighter hospital blue + long, eased fades into white at top and bottom */
.why {
  padding-block: clamp(14rem, 18vw, 15rem);
  background:
    radial-gradient(800px 480px at 100% 30%, rgba(120,190,245,.35), transparent 70%),
    radial-gradient(700px 480px at 0% 70%, rgba(90,165,235,.3), transparent 70%),
    linear-gradient(160deg, #2a74bb 0%, #286dae 55%, #2565a5 100%);
}
.why::after {
  background: linear-gradient(180deg,
    #fff 0, rgba(255,255,255,.85) 50px, rgba(255,255,255,.55) 100px, rgba(255,255,255,.25) 150px, rgba(255,255,255,.08) 190px, rgba(255,255,255,0) 220px,
    rgba(255,255,255,0) calc(100% - 220px), rgba(255,255,255,.08) calc(100% - 190px), rgba(255,255,255,.25) calc(100% - 150px), rgba(255,255,255,.55) calc(100% - 100px), rgba(255,255,255,.85) calc(100% - 50px), #fff 100%);
}


/* ---------- Compliance on Autopilot ---------- */
.compliance { padding-top: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(180deg, #fff 0, #f1f5fb 18%, #f1f5fb 82%, #fff 100%); }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem; }
.reg-tile { background: #f8fafd; border: 1px solid #e6ecf5; border-radius: 12px; padding: 2rem 1.25rem 1.6rem; text-align: center; box-shadow: 0 10px 28px -20px rgba(10,42,94,.25); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.reg-tile.in:hover { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: 0 22px 40px -24px rgba(29,95,224,.35); }
.reg-badge { width: 84px; height: 84px; margin: 0 auto 1.25rem; display: block; }
.reg-tile h3 { font-size: 1.12rem; color: #1b2233; margin: 0 0 .3rem; }
.reg-tile p { font-size: .84rem; color: var(--muted); margin: 0; }
@media (max-width: 520px) { .reg-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; } .reg-badge { width: 64px; height: 64px; } .reg-tile { padding: 1.4rem .9rem; } }
.reg-grid { display: flex; flex-wrap: wrap; justify-content: center; } /* centres the last, shorter row */
.reg-tile { flex: 0 1 205px; }
@media (max-width: 520px) { .reg-tile { flex-basis: calc(50% - .5rem); } }

/* ---------- Mega menu (Our Services) ---------- */
.main-nav li.has-mega { position: static; }
.mega { position: absolute; left: 50%; top: 100%; width: min(1240px, calc(100vw - 2rem)); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 60; }
.main-nav li.has-mega:hover > .mega, .main-nav li.has-mega:focus-within > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega-inner { display: grid; grid-template-columns: 250px minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, .8fr); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(10,42,94,.35); padding: 1.25rem; max-height: calc(100vh - 130px); overflow-y: auto; }
.mega-card { background: var(--blue-50); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem; align-self: start; }
.mega-card h3 { font-size: 1.5rem; margin: 0; }
.mega-card p { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.main-nav .mega-card .btn { display: flex; justify-content: center; height: auto; }
.main-nav .mega-card .btn::after { display: none; }
.mega-col { padding: .5rem 1.4rem; border-left: 1px solid var(--line); }
.mega-card + .mega-col { border-left: 0; }
.mega-col h4 { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-950); margin: .4rem 0 .9rem; }
.mega-sub { font-size: .8rem; color: var(--muted); margin: -.5rem 0 .9rem; }
.mega-list { display: grid; gap: .35rem; }
.mega-list-2 { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.main-nav .mega a.mega-item { display: flex; align-items: flex-start; gap: .6rem; height: auto; padding: .5rem .55rem; border-radius: 10px; color: var(--ink); font-size: .9rem; }
.main-nav .mega a.mega-item::after { display: none; }
.main-nav .mega a.mega-item:hover { background: var(--blue-50); color: var(--blue-700); }
.mega-item .icon { color: var(--blue-600); margin-top: .2rem; }
.mega-item strong { display: block; font-weight: 600; line-height: 1.3; }
.mega-item small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.4; }
@media (max-width: 860px) { .mega { display: none; } }
.main-nav .mega-card .btn-primary { color: #fff; }
.main-nav .mega-card .btn-outline { color: var(--blue-700); }
.main-nav .mega-card .btn-outline:hover { color: #fff; }
@media (max-width: 1199px) { .mega-col-empty { display: none; } .mega-inner { grid-template-columns: 220px minmax(0, 1.8fr) minmax(0, 1fr); } .mega-col { padding: .5rem 1rem; } }
/* Mega menu v2: card + Regulations + IT Services + Digitalization */
.mega-inner { grid-template-columns: 250px repeat(3, minmax(0, 1fr)); }
.main-nav .mega a.mega-more { display: inline-flex; align-items: center; gap: .4rem; height: auto; margin: .8rem 0 0 .55rem; font-weight: 600; font-size: .88rem; color: var(--blue-600); }
.main-nav .mega a.mega-more::after { display: none; }
.main-nav .mega a.mega-more:hover { color: var(--blue-700); }
@media (max-width: 1199px) { .mega-inner { grid-template-columns: 210px repeat(3, minmax(0, 1fr)); } .mega-col { padding: .5rem .8rem; } }
.mega-inner.mega-inner-2 { grid-template-columns: 250px repeat(2, minmax(0, 1fr)); }
.mega-inner-2 .mega-list { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
@media (max-width: 1199px) { .mega-inner.mega-inner-2 { grid-template-columns: 210px repeat(2, minmax(0, 1fr)); } .mega-inner-2 .mega-list { grid-template-columns: 1fr; } }
/* Platform menu: single-column lists + empty third column */
.mega-inner.mega-inner-3 { grid-template-columns: 250px repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .mega-inner.mega-inner-3 { grid-template-columns: 210px repeat(3, minmax(0, 1fr)); } }
.hero-intro-text p { margin: 0 0 1rem; }
.hero-intro-text p:last-child { margin-bottom: 0; }
.hero-intro { align-items: start; }
.hero-intro .actions { align-self: center; }
/* Intro: justified text + stacked, equal-width buttons */
.hero-intro { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-intro-text p { text-align: justify; hyphens: auto; line-height: 1.75; max-width: 72ch; }
.hero-intro .actions { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; }
.hero-intro .actions .btn { justify-content: center; }
@media (max-width: 1024px) { .hero-intro { grid-template-columns: 1fr; } .hero-intro .actions { flex-direction: row; flex-wrap: wrap; } .hero-intro-text p { text-align: left; } }
/* Intro: smaller text, taglines above the stacked buttons */
.hero-intro .hero-intro-text p { font-size: 1rem; }
.intro-taglines { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .55rem; }
.intro-taglines li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--blue-900); }
.intro-taglines .icon { color: var(--blue-600); flex-shrink: 0; }
@media (max-width: 1024px) { .intro-taglines { width: 100%; } }
.intro-values { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .4rem; }
.intro-values span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); font-size: .8rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.intro-values .icon { width: 14px; height: 14px; }
.pillars { gap: .6rem 1.4rem; font-size: .9rem; } /* 7 focus areas on one line at desktop */
/* Intro side column v3: tiles, words, compact buttons */
.intro-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.intro-tile { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px -16px rgba(10,42,94,.35); }
.intro-tile strong { font-size: .92rem; line-height: 1.3; color: var(--blue-950); }
.intro-tile-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--blue-600); color: #fff; }
.intro-tile-icon .icon { width: 20px; height: 20px; }
.intro-words { display: flex; flex-wrap: wrap; align-items: center; margin: .35rem 0 .25rem; font-size: .92rem; font-weight: 600; color: var(--blue-700); letter-spacing: .01em; }
.intro-words span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; background: var(--blue-100); margin: 0 .8rem; vertical-align: -.1em; }
.intro-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.hero-intro .actions { gap: 1rem; }
@media (max-width: 1024px) { .intro-buttons { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 480px) { .intro-tiles { grid-template-columns: 1fr; } }
.hero-intro .intro-words { font-size: .92rem; line-height: 1.4; color: var(--blue-700); } .intro-words span { white-space: nowrap; }
/* Intro side column v4: square tiles, centred statement + buttons */
.hero-intro .actions { align-items: center; text-align: center; }
.intro-tiles { grid-template-columns: repeat(2, 150px); justify-content: center; gap: 1rem; }
.intro-tile { aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; gap: .75rem; padding: 1rem; border-radius: 16px; }
.intro-tile-icon { width: 48px; height: 48px; border-radius: 14px; }
.intro-tile-icon .icon { width: 24px; height: 24px; }
.intro-tile strong { font-size: .95rem; text-align: center; }
.hero-intro .intro-words { justify-content: center; margin: .4rem 0; padding: .7rem 0; border-top: 1px solid var(--blue-100); border-bottom: 1px solid var(--blue-100); font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-950); width: 100%; }
.intro-words span + span::before { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); margin: 0 .75rem; vertical-align: .15em; }
.intro-words span:last-child { color: var(--blue-600); }
.intro-buttons { align-items: center; }
@media (max-width: 1024px) { .intro-buttons { justify-content: center; } }
.hero-intro .intro-words { order: 1; } .hero-intro .intro-tiles { order: 2; } .hero-intro .intro-buttons { order: 3; } /* words, tiles, buttons */
/* Intro side column: boxed with a soft photo background */
.hero-intro .actions { padding: 1.75rem 1.75rem 2rem; border-radius: 22px; border: 1px solid var(--blue-100); background: linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(240,246,255,.8) 60%, rgba(226,238,252,.86) 100%), url("../images/intro-cyber-shield.png") center / cover no-repeat; box-shadow: 0 30px 60px -34px rgba(10,42,94,.45); }
.hero-intro .intro-words { border-color: rgba(29,95,224,.18); }
.intro-tile { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Box matches paragraph height, evenly spaced content, crisp edges */
.hero-intro { align-items: stretch; }
.hero-intro .actions { align-self: stretch; justify-content: space-evenly; gap: 1.5rem; border-radius: 6px; border: 1px solid rgba(29,95,224,.28); box-shadow: 0 1px 2px rgba(10,42,94,.08), 0 12px 24px -18px rgba(10,42,94,.35); padding: 2rem; }
.hero-intro .intro-words { padding: 1rem 0; margin: 0; }
.intro-tiles { gap: 1.25rem; }
.intro-tile { border-radius: 6px; border-color: rgba(29,95,224,.22); box-shadow: 0 1px 2px rgba(10,42,94,.06); }
.intro-tile-icon { border-radius: 6px; }
.intro-buttons { gap: .9rem; }
@media (max-width: 1024px) { .hero-intro .actions { align-self: auto; } }
/* Intro box: no edge - background fades into white; content stays crisp */
.hero-intro .actions { position: relative; isolation: isolate; border: 0; box-shadow: none; background: none; }
.hero-intro .actions::before { content: ""; position: absolute; inset: -1.5rem; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.84) 0%, rgba(240,246,255,.78) 60%, rgba(226,238,252,.84) 100%), url("../images/intro-cyber-shield.png") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 45%, transparent 100%); }
/* Even fade along all four sides (soft frame) */
.hero-intro .actions::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect; }
/* Compliance tiles: compact so all 14 fit on one screen (7 per row at desktop) */
.compliance { padding-top: 2.5rem; padding-bottom: 3rem; }
.compliance .section-head { margin-bottom: 1.75rem; }
.reg-grid { gap: .9rem; }
.reg-tile { flex: 0 1 152px; padding: 1.1rem .7rem 1rem; border-radius: 10px; }
.reg-badge { width: 54px; height: 54px; margin-bottom: .7rem; }
.reg-tile h3 { font-size: .9rem; line-height: 1.25; }
.reg-tile p { font-size: .74rem; line-height: 1.35; }
@media (max-width: 520px) { .reg-tile { flex-basis: calc(50% - .45rem); } }
/* Compliance tiles: identical size (equal width + equal row heights) */
.reg-grid { display: grid; grid-template-columns: repeat(7, 152px); grid-auto-rows: 1fr; justify-content: center; }
.reg-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%; }
@media (max-width: 1150px) { .reg-grid { grid-template-columns: repeat(5, 152px); } }
@media (max-width: 860px) { .reg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
/* Regulations button */
.reg-more { text-align: center; margin: 2rem 0 0; }

/* Who We Work With: light patterned background + new tile layout (icon left, 3 per row) */
.clients { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0%, #f4f9fe 20%, #eef6fd 80%, #fff 100%); }
.clients::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27%3E%3Cg fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.10%27 stroke-width=%271.4%27%3E%3Cpath d=%27M8 32h12l4-9 6 18 5-12 3 3h18%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 128px 128px; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.clients::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 420px; height: 420px; right: -120px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(120,190,240,.28), transparent 70%); }
.clients-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.clients-grid > .industry-card { grid-column: auto !important; display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 1rem; text-align: left; padding: 1.4rem 1.5rem; border-radius: 10px; background: rgba(255,255,255,.92) !important; color: var(--ink) !important; backdrop-filter: blur(4px); }
.clients-grid > .industry-card .card-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-50) !important; border: 1px solid var(--blue-100) !important; color: var(--blue-600) !important; margin: 0; grid-row: span 2; }
.clients-grid > .industry-card:hover .card-icon { background: var(--blue-600) !important; color: #fff !important; }
.clients-grid > .industry-card h3 { font-size: 1.05rem !important; color: var(--blue-950) !important; align-self: center; margin: 0; }
.clients-grid > .industry-card p { grid-column: 2; color: var(--muted) !important; font-size: .88rem; margin: .35rem 0 0; max-width: none; }
@media (max-width: 900px) { .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .clients-grid { grid-template-columns: 1fr; } }
/* Who We Work With v2: honeycomb backdrop + staggered card layout */
.clients::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2796%27%3E%3Cg fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.12%27 stroke-width=%271.3%27%3E%3Cpath d=%27M28 2 52 16v28L28 58 4 44V16z%27/%3E%3Cpath d=%27M28 50 52 64v28L28 106 4 92V64z%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 112px 192px; }
.clients::after { right: auto; left: -140px; top: auto; bottom: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(93,163,226,.22), transparent 70%); }
.clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.clients-grid > .industry-card { display: block; text-align: left; padding: 1.5rem 1.35rem; border-radius: 14px; border: 1px solid rgba(47,134,214,.16) !important; box-shadow: 0 14px 30px -24px rgba(11,58,107,.45); }
.clients-grid > .industry-card:nth-child(even) { margin-top: 2.2rem; }
.clients-grid > .industry-card .card-icon { width: 42px; height: 42px; border-radius: 12px; margin: 0 0 .9rem; grid-row: auto; }
.clients-grid > .industry-card h3 { font-size: 1rem !important; margin: 0 0 .35rem; }
.clients-grid > .industry-card p { font-size: .85rem; margin: 0; }
@media (max-width: 1100px) { .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .clients-grid > .industry-card:nth-child(even) { margin-top: 0; } .clients-grid > .industry-card:nth-child(3n+2) { margin-top: 2rem; } }
@media (max-width: 760px) { .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clients-grid > .industry-card:nth-child(3n+2) { margin-top: 0; } }
@media (max-width: 520px) { .clients-grid { grid-template-columns: 1fr; } }
/* Who We Work With v3: diverse large motifs + photo tiles */
.clients::before { background-image:
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27 fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.22%27 stroke-width=%272%27%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2790%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2760%27 stroke-opacity=%27.14%27/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27 fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.2%27 stroke-width=%272%27%3E%3Cpath d=%27M100 10 180 55v90l-80 45-80-45V55z%27/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27 fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.3%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-dasharray=%272 14%27%3E%3Cpath d=%27M10 170A120 120 0 0 1 190 60%27/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 200%27 fill=%27none%27 stroke=%27%232f86d6%27 stroke-opacity=%27.18%27 stroke-width=%272%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M75 20h50v55h55v50h-55v55H75v-55H20V75h55z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 360px 360px, 260px 260px, 300px 300px, 220px 220px;
  background-position: left -120px top 40px, right -60px top 90px, left 22% bottom -80px, right 18% bottom -40px; }
.clients-grid > .industry-card.has-photo { position: relative; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; border: 0 !important; background: var(--photo) center / cover no-repeat !important; box-shadow: 0 18px 36px -24px rgba(11,58,107,.55); }
.clients-grid > .industry-card.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,58,.15) 0%, rgba(6,26,58,.55) 45%, rgba(6,26,58,.88) 100%); transition: background .3s var(--ease); }
.clients-grid > .industry-card.has-photo:hover::after { background: linear-gradient(180deg, rgba(6,26,58,.3) 0%, rgba(10,42,94,.7) 45%, rgba(10,42,94,.92) 100%); }
.clients-grid > .industry-card.has-photo h3, .clients-grid > .industry-card.has-photo p { position: relative; z-index: 1; color: #fff !important; text-shadow: 0 1px 12px rgba(6,26,58,.5); }
.clients-grid > .industry-card.has-photo h3 { font-size: 1.05rem !important; margin-bottom: .3rem; }
.clients-grid > .industry-card.has-photo p { font-size: .84rem; color: rgba(255,255,255,.92) !important; }
/* Closing banner: centred heading + button */
.cta-band { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.cta-band h2 { margin-bottom: 0; }
/* Closing banner: new backdrop (mesh + angled gradient) */
.cta-band { background: radial-gradient(600px 300px at 12% 0%, rgba(108,176,255,.35), transparent 65%), radial-gradient(500px 320px at 88% 100%, rgba(59,143,224,.4), transparent 65%), linear-gradient(115deg, #0b2f5a 0%, #12508f 55%, #1a6cc8 100%); position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(60deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px); mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 85%); }
/* Closing banner: lighter blue */
.cta-band { background: radial-gradient(600px 300px at 12% 0%, rgba(160,210,255,.45), transparent 65%), radial-gradient(500px 320px at 88% 100%, rgba(120,185,245,.45), transparent 65%), linear-gradient(115deg, #2a74bb 0%, #3f8fd8 55%, #5aa6e8 100%); }

/* ---------- Regulation detail page ---------- */
.reg-tile-link { display: block; text-decoration: none; color: inherit; }
.reg-tile-link:hover .reg-tile { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: 0 22px 40px -24px rgba(29,95,224,.35); }
.reg-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.reg-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin-bottom: 1.25rem; }
.reg-back .icon { transform: rotate(180deg); }
.reg-hero-head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.reg-badge-lg { width: 96px; height: 96px; flex-shrink: 0; }
.reg-hero-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 .3rem; }
.reg-hero-head .lead { margin: 0; }
.reg-body { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.reg-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.reg-intro { font-size: 1.06rem; line-height: 1.8; color: var(--muted); max-width: 70ch; }
.reg-body h2 { font-size: 1.4rem; margin: 2rem 0 1rem; }
.reg-covers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.reg-covers li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.reg-covers .icon { color: var(--blue-600); margin-top: .3rem; flex-shrink: 0; }
.reg-aside { position: sticky; top: 130px; display: grid; gap: .8rem; padding: 1.75rem; border-radius: 14px; background: var(--blue-50); border: 1px solid var(--blue-100); }
.reg-aside h2 { font-size: 1.15rem; margin: 0; }
.reg-aside p { color: var(--muted); font-size: .92rem; margin: 0; }
.reg-aside .btn { justify-content: center; }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; } .reg-aside { position: static; } .reg-covers { grid-template-columns: 1fr; } }
/* Regulation page: tiles act as buttons, selected one highlighted */
.reg-tile-btn { font: inherit; cursor: pointer; text-align: center; }
.reg-tile-btn.selected { border-color: var(--blue-600); box-shadow: 0 0 0 2px rgba(29,95,224,.25), 0 22px 40px -24px rgba(29,95,224,.4); background: #fff; }
.reg-tile-btn:hover { transform: translateY(-3px); }
.reg-picker { padding-bottom: 2rem; }
.reg-body { padding-top: 1rem; }
.reg-info-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; }
.reg-info-head h2 { margin: 0 0 .2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.reg-info-note { margin: 0; color: var(--muted); font-size: .95rem; }
.reg-covers-title { font-size: 1.15rem; margin: 1.75rem 0 1rem; }
/* Regulation detail: badge left + text right, covers below with CTA beside */
.reg-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; margin-bottom: 2.5rem; }
.reg-top .reg-badge-lg { width: 120px; height: 120px; }
.reg-top-text h2 { margin: 0 0 .25rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.reg-top-text .reg-info-note { margin: 0 0 1rem; color: var(--blue-600); font-weight: 600; font-size: .95rem; }
.reg-bottom { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.reg-covers-block .reg-covers-title { margin-top: 0; }
@media (max-width: 900px) { .reg-top { grid-template-columns: 1fr; } .reg-bottom { grid-template-columns: 1fr; } .reg-top .reg-badge-lg { width: 88px; height: 88px; } }
/* Regulation detail: two columns with a thin divider */
.reg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.reg-split-right { border-left: 1px solid var(--line); padding-left: clamp(2rem, 5vw, 4rem); }
.reg-split .reg-top { margin-bottom: 1.25rem; }
.reg-split .reg-aside { margin-top: 2rem; }
.reg-split .reg-covers { grid-template-columns: 1fr; }
@media (max-width: 900px) { .reg-split { grid-template-columns: 1fr; } .reg-split-right { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2rem; } }
/* Regulation page: compact "Need help" box */
.reg-bottom { grid-template-columns: minmax(0, 2.3fr) minmax(0, 260px); }
.reg-bottom .reg-aside { padding: 1.1rem 1.2rem; gap: .55rem; border-radius: 10px; }
.reg-bottom .reg-aside h3 { font-size: .98rem; line-height: 1.3; }
.reg-bottom .reg-aside p { font-size: .82rem; line-height: 1.45; }
.reg-bottom .reg-aside .btn { padding: .6rem .9rem; font-size: .82rem; }
.reg-covers-implications .icon { color: var(--blue-500); }
.reg-covers-block .reg-covers-title + .reg-covers { margin-bottom: 1.75rem; }
/* Regulation detail: tighter description, centred list headings */
.reg-body .reg-intro { font-size: .95rem; line-height: 1.6; margin-bottom: 0; }
.reg-top { margin-bottom: 2rem; }
.reg-covers-title { text-align: center; font-size: 1.05rem; letter-spacing: .01em; margin: 0 0 1rem; }
.reg-covers-block .reg-covers-title + .reg-covers { margin-bottom: 2rem; }
.reg-covers li { font-size: .9rem; line-height: 1.45; }
/* Regulation detail: use the full width */
.reg-body .reg-intro { max-width: none; }
.reg-top { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.reg-top .reg-badge-lg { width: 96px; height: 96px; }
/* Breathing room under the list headings */
.reg-covers-title { margin: 0 0 1.9rem; }
.reg-covers-block .reg-covers-title + .reg-covers { margin-bottom: 2.75rem; }
.reg-covers-block .reg-covers-title:not(:first-child) { margin-top: .5rem; }
/* Description stops 1 inch before the CTA column */
.reg-top { padding-right: calc(260px + clamp(2rem, 5vw, 3.5rem) + 96px); }
@media (max-width: 900px) { .reg-top { padding-right: 0; } }
/* Platform box on the regulation page */
.reg-bottom { grid-template-columns: minmax(0, 1.9fr) minmax(0, 320px); }
.reg-top { padding-right: calc(320px + clamp(2rem, 5vw, 3.5rem) + 96px); }
@media (max-width: 900px) { .reg-top { padding-right: 0; } }
.reg-bottom .reg-aside { padding: 1.4rem 1.4rem 1.5rem; gap: .7rem; }
.reg-bottom .reg-aside h3 { font-size: 1.15rem; color: var(--blue-950); }
.reg-aside-lead { font-weight: 600; color: var(--blue-700) !important; font-size: .86rem !important; }
.reg-bottom .reg-aside .btn { margin-top: .4rem; padding: .7rem 1rem; font-size: .85rem; text-align: center; }
/* Platform box: bigger, centred heading */
.reg-bottom .reg-aside h3 { font-size: 1.45rem; line-height: 1.25; text-align: center; margin-bottom: .2rem; }
.reg-aside-lead { text-align: center; }
/* Description reaches closer to the CTA column */
.reg-top { padding-right: calc(320px + clamp(2rem, 5vw, 3.5rem) - 40px); }
@media (max-width: 900px) { .reg-top { padding-right: 0; } }
/* Regulation page: CTA box is a full-height right column beside description + lists */
.reg-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.reg-top { padding-right: 0; }
.reg-page-grid .reg-aside { position: sticky; top: 130px; }
@media (max-width: 900px) { .reg-page-grid { grid-template-columns: 1fr; } .reg-page-grid .reg-aside { position: static; } }

/* ---------- Services: heading + tiles fit one screen ---------- */
.svc-screen { padding-top: clamp(1.25rem, 3.5vh, 2.5rem); }
.svc-screen-inner {
  min-height: calc(100svh - var(--header-h) - clamp(1.25rem, 3.5vh, 2.5rem));
  display: flex; flex-direction: column; justify-content: center;
}
.svc-screen .section-head { margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
@media (max-width: 1024px) { .svc-screen-inner { min-height: 0; } }
/* Short screens: compact the heading and tiles so they still share one screen */
@media (min-width: 1025px) and (max-height: 860px) {
  .svc-screen .section-head { margin-bottom: 1.25rem; }
  .svc-screen .section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
  .svc-screen .section-head .lead { font-size: .98rem; }
  .svc-screen .grid-3 { gap: 1rem; }
  .svc-screen .service-card { padding: 1.25rem 1.35rem; }
  .svc-screen .card-short { margin-bottom: .75rem; }
  .svc-screen .link-btn { padding-top: .5rem; }
}
@media (min-width: 1025px) and (max-height: 720px) {
  .svc-screen .section-head { margin-bottom: 1rem; }
  .svc-screen .section-head .lead { font-size: .92rem; max-width: 62ch; margin-inline: auto; }
  .svc-screen .service-card { padding: 1rem 1.15rem; }
}
@media (min-width: 1025px) and (max-height: 720px) {
  .svc-screen .section-head { margin-bottom: .85rem; }
  .svc-screen .section-head h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
  .svc-screen .section-head .lead { font-size: .88rem; }
  .svc-screen .grid-3 { gap: .8rem; }
  .svc-screen .service-card { padding: .9rem 1.05rem; }
  .svc-screen .card-short { margin-bottom: .6rem; }
}

/* Multi-paragraph expanded service copy */
.card-long p + p { margin-top: .85em; }
.card-long-lead { font-weight: 600; color: var(--blue-700, #0b3a6b); font-size: 1.05em; }
.card-long-kicker { font-weight: 700; color: var(--blue-600); letter-spacing: .01em; }
/* Long copy: slim the title column and flow the text in two columns so the panel fills its width */
@media (min-width: 1100px) {
  .service-card.open:has(.card-long-rich) { grid-template-columns: minmax(220px, .55fr) minmax(0, 2.4fr); column-gap: 2.25rem; }
  .service-card.open > .card-long-rich { padding-left: 2.25rem; padding-right: 0; columns: 2; column-gap: 2.5rem; }
  .card-long-rich p { break-inside: avoid; margin-top: 0; }
  .card-long-rich p + p { margin-top: .85em; }
  .card-long-rich .card-long-lead { column-span: all; margin-bottom: 1rem; font-size: 1.12em; }
  .card-long-rich .btn { column-span: all; margin-top: 1.25rem; }
}

/* Bullet lists inside expanded service copy */
.card-long-list { list-style: none; padding: 0; margin: .25rem 0 0; }
.card-long-list li { position: relative; padding-left: 1.1rem; margin-top: .35rem; break-inside: avoid; }
.card-long-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }
.card-long-rich .card-long-kicker { margin-top: 1rem; }
/* Keep the "Our services include:" heading with its list, full width under the prose */
@media (min-width: 1100px) {
  .card-long-rich .card-long-kicker, .card-long-rich .card-long-list { column-span: all; }
  .card-long-rich .card-long-list { columns: 2; column-gap: 2.5rem; margin-top: .5rem; }
}

/* Roomier edges on the expanded service panels */
.service-card.open { padding: 2.75rem 3rem; }
@media (min-width: 1100px) {
  .service-card.open:has(.card-long-rich) { padding: 3rem 3.5rem; column-gap: 3rem; }
  .service-card.open > .card-long-rich { padding-left: 3rem; }
}
@media (max-width: 640px) { .service-card.open { padding: 1.75rem 1.5rem; } }

/* Every expanded service panel keeps the same size */
@media (min-width: 1100px) { .service-card.open { min-height: 560px; } }

/* Home closing CTA: a more compact band */
.cta-band { max-width: 860px; margin-inline: auto; padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 4vw, 3rem); border-radius: 22px; gap: 1.25rem; }
.cta-band h2 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.cta-band .btn-lg { padding: .7rem 1.4rem; font-size: .98rem; }

/* ---------- Platform mock dashboard (detailed admin-console preview) ---------- */
.mock-screen { grid-template-columns: 132px 1fr; min-height: 390px; font-size: 10px; line-height: 1.35; }
.mock-side { background: var(--blue-950); padding: .8rem .6rem; display: block; color: #cfdcf5; }
.mock-brand { display: flex; align-items: center; gap: .35rem; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.15em; margin-bottom: .9rem; }
.mock-logo { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); flex: none; }
.mock-side-label { margin: .8rem 0 .3rem; font-size: .85em; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-500); font-weight: 700; }
.mock-side-label em { display: block; font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 400; font-size: .9em; color: rgba(207,220,245,.45); margin-top: .1rem; }
.mock-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.mock-nav li { position: relative; padding: .3rem .45rem; border-radius: 6px; color: rgba(255,255,255,.75); white-space: nowrap; font-size: 1.05em; }
.mock-nav li.is-active { background: var(--blue-600); color: #fff; font-weight: 600; }
.mock-caret { position: absolute; right: .45rem; top: 50%; width: 4px; height: 4px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .8; }

.mock-main { padding: 0; background: #f4f7fc; display: grid; grid-template-rows: auto 1fr; }
.mock-topbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: #fff; border-bottom: 1px solid var(--line); }
.mock-burger { display: grid; gap: 2px; }
.mock-burger i { display: block; width: 11px; height: 1.5px; border-radius: 2px; background: #6b7f9c; }
.mock-chip { padding: .22rem .5rem; border-radius: 6px; background: #eef2f8; color: #5b6e8b; font-weight: 600; }
.mock-user { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.mock-bell { position: relative; width: 11px; height: 12px; border-radius: 4px 4px 2px 2px; background: #dbe6f6; }
.mock-bell b { position: absolute; top: -4px; right: -4px; min-width: 9px; height: 9px; border-radius: 50%; background: #e3604f; color: #fff; font-size: .62em; line-height: 9px; text-align: center; font-weight: 700; }
.mock-avatar { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); flex: none; }
.mock-who { display: grid; line-height: 1.25; }
.mock-who strong { color: var(--ink); font-size: 1.02em; }
.mock-who em { font-style: normal; color: var(--muted); font-size: .92em; }

.mock-body { padding: .6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: .55rem; align-items: start; }
.mock-col { display: grid; gap: .55rem; align-content: start; }
.mock-card { background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 1px 2px rgba(11,58,107,.05); }
.mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mock-stats > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .35rem; padding: .45rem .3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mock-stats > div:nth-child(3n) { border-right: 0; }
.mock-stats > div:nth-child(n+4) { border-bottom: 0; }
.mock-ico { grid-row: span 2; width: 14px; height: 14px; border-radius: 5px; background: #e7eefb; border: 1px solid #d4e2f7; }
.mock-stats b { font-family: var(--display); font-size: 1.25em; color: var(--ink); align-self: end; }
.mock-stats small { color: var(--muted); font-size: .8em; letter-spacing: 0; text-transform: uppercase; align-self: start; }

.mock-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.mock-mini .mock-card { padding: .55rem .6rem; display: grid; gap: .25rem; align-content: start; overflow: hidden; }
.mock-mini b { font-family: var(--display); font-size: 1.6em; color: var(--ink); line-height: 1.1; }
.mock-mini-label { color: var(--blue-600); font-weight: 600; }
.mock-mini p { color: var(--muted); margin: 0; font-size: .95em; }
.mock-spark { height: 30px; margin: .15rem -.6rem -.1rem; }
.mock-spark svg { width: 100%; height: 100%; display: block; }
.mock-spark path { fill: rgba(47,134,214,.18); stroke: var(--blue-500); stroke-width: 1.5; }
.mock-bars { height: 30px; display: flex; align-items: flex-end; gap: 3px; margin-top: .2rem; }
.mock-bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--blue-500), var(--blue-100)); }
.mock-mini-figs { display: flex; justify-content: space-between; gap: .3rem; margin-top: .2rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.mock-mini-figs span { display: grid; }
.mock-mini-figs b { font-size: 1.05em; }
.mock-mini-figs em { font-style: normal; color: var(--muted); font-size: .9em; }

.mock-panel { display: grid; grid-template-rows: auto 1fr; align-content: start; }
.mock-panel-head { font-weight: 700; color: var(--ink); font-size: 1.1em; padding: .55rem .65rem; border-bottom: 1px solid var(--line); }
.mock-panel-body { padding: .55rem .65rem; display: grid; gap: .3rem; align-content: start; }
.mock-figures { display: flex; gap: 1rem; }
.mock-figures b { display: block; font-family: var(--display); font-size: 1.55em; color: var(--ink); line-height: 1.15; }
.mock-figures small { color: var(--muted); font-size: .95em; }
.mock-tools { display: flex; justify-content: flex-end; gap: .35rem; }
.mock-tools i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #c3d3e8; }
.mock-tools i:nth-child(3) { background: #dbe8f8; }
.mock-plot { display: grid; grid-template-columns: 16px 1fr; gap: .25rem; }
.mock-yaxis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: .85em; text-align: right; height: 118px; }
.mock-graph { width: 100%; height: 118px; display: block; overflow: visible; }
.mock-graph .grid line { stroke: #e7eef8; stroke-width: 1; }
.mock-graph .bars rect { fill: var(--blue-500); rx: 2; }
.mock-graph .trend { fill: none; stroke: #a8cdf3; stroke-width: 2.5; stroke-linecap: round; }
.mock-xaxis { list-style: none; display: flex; margin: 0 0 0 18px; padding: 0; color: var(--muted); font-size: .78em; }
.mock-xaxis li { flex: 1; text-align: center; }
.mock-legend { list-style: none; display: flex; justify-content: center; gap: 1rem; padding: .25rem 0 0; margin: 0; color: var(--blue-600); font-size: .95em; }
.mock-legend li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--blue-500); margin-right: .3rem; }
.mock-legend .is-muted { color: var(--muted); }
.mock-legend .is-muted::before { background: #a8cdf3; }
@media (max-width: 600px) {
  .mock-screen { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-mini { grid-template-columns: 1fr; }
}

/* Why section: subhead + closing line per point */
.why-subhead { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: #0b3a6b; margin: -.35rem 0 .9rem; }
.why .why-subhead { color: #fff; }
.why-text .section-head .lead + .lead { margin-top: .85rem; }
.why-points p + .why-kicker { margin-top: .6rem; font-weight: 600; }
.why .why-points .why-kicker { color: #fff; font-weight: 700; }
.mock-body > *, .mock-col > *, .mock-mini > * { min-width: 0; }


/* Why section: intro + slider on top, the four points as full-width cards below */
.why-grid { align-items: center; }
.why-text .section-head { margin-bottom: 0; }
.why-points-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.why-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; row-gap: 1.25rem; }
.why-cards li { padding: 1.5rem 1.4rem; border-radius: var(--radius); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; }
.why-cards li, .why-cards li:nth-child(even) { border-right: 1px solid rgba(255,255,255,.22); }
.why-cards li::before { position: static; display: block; margin-bottom: .9rem; box-shadow: 0 0 0 4px rgba(108,176,255,.22); }
.why-cards li:nth-child(even)::before { left: auto; }
.why-cards h3 { font-size: 1.05rem; }
.why-cards p { font-size: .92rem; }
.why-cards li p + .why-kicker { margin-top: auto; padding-top: .75rem; }
@media (max-width: 1100px) { .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .why-cards { grid-template-columns: 1fr; } .why-cards li, .why-cards li:nth-child(even) { padding: 1.35rem 1.25rem; } }
@media (prefers-reduced-transparency: reduce) { .why-cards li { background: rgba(255,255,255,.16); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.why-cards li::before, .why-cards li:nth-child(even)::before { content: none; }
.why-cards h3 { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }

/* Platform: CTA sits above the dashboard preview */
.platform-shot-col { display: grid; gap: 1rem; justify-items: center; }
.platform-cta { justify-self: center; }

/* ---------- Packages as vertical tiles ---------- */
.packages { display: grid; flex-direction: unset; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.package-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 1.25rem; align-items: start; padding: 2rem 1.75rem; border-radius: 20px; }
.pkg-head h3 { font-size: 1.3rem; }
.pkg-price { margin-top: .75rem; }
.pkg-body { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.featured .pkg-body { border-top-color: rgba(255,255,255,.15); }
.pkg-body p { font-size: .94rem; }
.pkg-body .check-list { grid-template-columns: 1fr; }
.pkg-action { align-self: end; }
.pkg-action .btn { width: 100%; justify-content: center; }
@media (max-width: 1024px) { .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .packages > :last-child { grid-column: auto; } }
@media (max-width: 600px) { .packages { grid-template-columns: 1fr; } }

/* ---------- Calmer page headings on inner pages ---------- */
.page-hero { padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.page-hero h1 { font-size: clamp(1.7rem, 2.3vw, 2.1rem); }
.page-hero .lead { font-size: 1.02rem; }


/* About: home-page style introduction (text left, actions right) */
.about-intro { padding-top: 0; padding-bottom: clamp(2rem, 4vw, 3rem); }
.about-intro .hero-intro { padding-top: 0; }
.page-hero-center { text-align: center; }
.page-hero-center p, .page-hero-center .lead { margin-inline: auto; }

/* About: values cards */
.value-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.value-cards li { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(11,58,107,.05); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.value-cards li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.value-num { font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .16em; color: var(--blue-500); }
.value-cards strong { font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--blue-950); letter-spacing: -.01em; }
.value-cards p { margin: 0; color: var(--muted); font-size: .94rem; }
.section-head.center .lead + .lead { margin-top: .75rem; }
@media (max-width: 1024px) { .value-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .value-cards { grid-template-columns: 1fr; } }

/* Packages: tailored-service call to action */
.tailored-cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 20px; background: linear-gradient(135deg, var(--blue-50), #fff); border: 1px solid var(--blue-100); box-shadow: 0 1px 2px rgba(11,58,107,.05), 0 24px 44px -34px rgba(11,58,107,.4); }
.tailored-cta h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: .35rem; }
.tailored-cta p { margin: 0; color: var(--muted); max-width: 62ch; }
@media (max-width: 720px) { .tailored-cta { flex-direction: column; align-items: flex-start; } .tailored-cta .btn { width: 100%; justify-content: center; } }
/* Packages: tighter gap between the intro and the tiles */
.page-hero-center + .section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.page-hero-center .lead { max-width: 640px; }
.pkg-tagline { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--blue-600); margin: 0 0 .5rem; }
.featured .pkg-tagline { color: #8fb4ff; }
.tailored-cta { align-items: center; }
.tailored-cta .eyebrow { margin-bottom: .6rem; }
.tailored-cta-actions { display: grid; gap: .6rem; justify-items: stretch; min-width: 280px; }
.tailored-cta-actions .btn { justify-content: center; }
@media (max-width: 720px) { .tailored-cta-actions { min-width: 0; width: 100%; } }
.tailored-cta { flex-wrap: nowrap; gap: clamp(1.5rem, 4vw, 3rem); }
.tailored-cta > div:first-child { flex: 1 1 auto; min-width: 0; }
.tailored-cta p { max-width: none; }
.tailored-cta-actions { flex: 0 0 auto; }
@media (max-width: 860px) { .tailored-cta { flex-wrap: wrap; } }

/* ---------- Contact page: tighter, calmer form ---------- */
.contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 4vw, 3rem); }
.contact-aside h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.contact-aside .lead { font-size: 1rem; }
.contact-aside ul { margin-top: 1.5rem; gap: .85rem; font-size: .94rem; }
.contact-form { padding: clamp(1.35rem, 2.5vw, 2rem); border-radius: 18px; box-shadow: 0 1px 2px rgba(11,58,107,.05), 0 24px 44px -34px rgba(11,58,107,.4); }
.form-grid { gap: .8rem .9rem; }
.field label { font-size: .82rem; margin-bottom: .25rem; }
.field input, .field select, .field textarea { font-size: .92rem; padding: .55rem .75rem; border-radius: 9px; border-width: 1px; }
.field textarea { min-height: 96px; }
.contact-form .consent { font-size: .85rem; margin-top: 1rem; }
.contact-form .form-note { font-size: .8rem; margin: .5rem 0 .9rem; }
.contact-form .btn-lg { padding: .7rem 1.4rem; font-size: .98rem; }
.package-banner[hidden] { display: none; }

/* Contact form: multi-select dropdown with checkboxes */
.ms-label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: .25rem; color: var(--blue-950); }
.multiselect { position: relative; }
.ms-toggle { width: 100%; text-align: left; font: inherit; font-size: .92rem; color: var(--muted); background: var(--blue-50); border: 1px solid var(--line); border-radius: 9px; padding: .55rem 2rem .55rem .75rem; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.multiselect.has-value .ms-toggle { color: var(--ink); }
.ms-toggle::after { content: ''; position: absolute; right: .85rem; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ms-toggle:focus-visible { outline: none; border-color: var(--blue-500); background: var(--white); box-shadow: 0 0 0 4px rgba(59,123,246,.15); }
.ms-toggle[aria-invalid="true"] { border-color: #d64545; }
.ms-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(11,58,107,.45); padding: .35rem; display: grid; gap: .1rem; max-height: 260px; overflow: auto; }
.ms-panel[hidden] { display: none; }
.ms-option { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 7px; font-size: .9rem; color: var(--ink); cursor: pointer; }
.ms-option:hover { background: var(--blue-50); }
.ms-option input { width: 15px; height: 15px; accent-color: var(--blue-600); flex: none; }
/* The hidden attribute must win over component display rules */
[hidden] { display: none !important; }

/* ── Legal pages (Impressum / Datenschutz) ───────────────────────────── */
.legal-prose { max-width: 820px; }
.legal-prose h2 { margin: 2.5rem 0 .75rem; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin-bottom: 1rem; line-height: 1.75; }
.legal-prose a { text-decoration: underline; }
.legal-list { margin: 0 0 1.25rem 1.25rem; padding: 0; list-style: disc; }
.legal-list li { margin-bottom: .45rem; line-height: 1.7; }
.legal-meta { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .92rem; opacity: .8; }
.consent a { text-decoration: underline; }
/* Honeypot: hidden from humans without display:none (some bots skip those) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Submit failure notice (network / server / rate-limit) */
.form-error-box { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #f0c2c2; border-left: 4px solid #d24545; border-radius: 8px; background: #fdf3f3; color: #8f2b2b; font-size: .95rem; line-height: 1.6; }

/* ---------- Language switcher (EN / DE) ---------- */
.lang-switch { position: relative; }
.lang-toggle { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-950); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .55rem .28rem .4rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lang-toggle:hover { border-color: var(--blue-100); box-shadow: 0 2px 8px -4px rgba(11,58,107,.4); }
.lang-flag { width: 16px; height: 11px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(11,58,107,.12); }
.lang-menu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 60; min-width: 132px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(11,58,107,.45); padding: .25rem; display: grid; gap: .1rem; }
.lang-option { display: flex; align-items: center; gap: .5rem; width: 100%; font: inherit; font-size: .85rem; color: var(--ink); background: none; border: 0; border-radius: 7px; padding: .4rem .5rem; cursor: pointer; text-align: left; }
.lang-option:hover { background: var(--blue-50); }
.lang-option.is-active { color: var(--blue-700); font-weight: 700; background: var(--blue-50); }
.nav-cta { align-items: center; }
@media (max-width: 900px) { .nav-cta-mobile .lang-switch { margin-top: .25rem; } }
/* Language switcher sits on its own line, under the header buttons */
.nav-cta { flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }
.nav-cta .lang-switch { flex-basis: 100%; display: flex; justify-content: flex-end; }
.nav-cta-mobile .lang-switch { justify-content: flex-start; }
/* Two-language segmented switch (EN | DE) with a dropdown for the full names */
.lang-switch { display: inline-flex; align-items: center; gap: .25rem; }
.lang-segs { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-seg { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: .2rem .5rem; cursor: pointer; transition: background .2s, color .2s; }
.lang-seg:hover { color: var(--blue-700); }
.lang-seg.is-active { background: var(--blue-50); color: var(--blue-700); cursor: default; }
.lang-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer; }
.lang-toggle i { width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.lang-toggle:hover i { border-color: var(--blue-600); }
/* Language dropdown button */
.lang-switch { display: inline-block; }
.lang-toggle { display: inline-flex; align-items: center; gap: .35rem; width: auto; height: auto; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-950); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .55rem .28rem .4rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lang-toggle:hover { border-color: var(--blue-100); box-shadow: 0 2px 8px -4px rgba(11,58,107,.4); }
.lang-toggle i { width: 5px; height: 5px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
/* German version: the hero eyebrows are English-only */
html[lang="de"] .hero-top .eyebrow-left, html[lang="de"] .hero-top .eyebrow-right { display: none; }
/* German hero: with the eyebrows hidden, centre the heading block in the row */
html[lang="de"] .hero-screen .hero-top { grid-template-columns: 1fr; justify-items: center; }
html[lang="de"] .hero-heading { text-align: center; max-width: 960px; }
html[lang="de"] .hero-lede { text-align: center; margin-inline: auto; }
/* German hero lede on one line where there is room */
html[lang="de"] .hero-heading { max-width: none; }
@media (min-width: 1200px) { html[lang="de"] .hero-lede { white-space: nowrap; } }
/* Keep the intro panel the same size in German as in English (longer strings must wrap, not widen it) */
@media (min-width: 961px) {
  html[lang="de"] .hero-intro { grid-template-columns: minmax(0, 1fr) 535px; }
  html[lang="de"] .hero-intro .actions { width: auto; max-width: 535px; }
  html[lang="de"] .hero-intro .intro-words { justify-content: center; text-align: center; }
  html[lang="de"] .hero-intro .intro-buttons .btn { white-space: normal; text-align: center; }
}
/* Language switch: inside the button row on desktop, beside the burger on small screens */
.header-top > .lang-switch { display: none; align-self: center; }
@media (max-width: 900px) {
  .header-top > .lang-switch { display: inline-block; margin-left: auto; margin-right: .5rem; }
  .nav-cta-mobile .lang-switch { display: none; }
  .header-top > .lang-switch .lang-menu { right: 0; }
}

/* ---------- German layout refinements (home page) ---------- */
html[lang="de"] .hero-intro .intro-words { flex-wrap: nowrap; white-space: nowrap; font-size: .78rem; justify-content: center; }
html[lang="de"] .hero-intro .intro-words span + span::before { margin: 0 .5rem; }
html[lang="de"] .intro-tiles { grid-template-columns: repeat(2, 132px); gap: .8rem; }
html[lang="de"] .intro-tile { aspect-ratio: 1 / 1; height: 132px; padding: .7rem; gap: .5rem; }
html[lang="de"] .intro-tile strong { font-size: .8rem; line-height: 1.25; }
html[lang="de"] .intro-tile .intro-tile-icon .icon { width: 20px; height: 20px; }
@media (min-width: 961px) {
  html[lang="de"] .hero-intro { grid-template-columns: minmax(0, 1fr) 430px; }
  html[lang="de"] .hero-intro .actions { max-width: 430px; padding: 1.25rem 1.25rem 1.4rem; }
  html[lang="de"] .hero-intro .intro-buttons .btn { font-size: .88rem; padding: .6rem 1rem; }
}
html[lang="de"] .hero-intro-text p { font-size: 1rem; }
html[lang="de"] .section-graphic .section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
html[lang="de"] .section-graphic .section-head .lead { font-size: .95rem; }
html[lang="de"] .service-card .card-short { font-size: .82rem; }
html[lang="de"] .service-card .card-long, html[lang="de"] .service-card .card-long p, html[lang="de"] .card-long-list li { font-size: .84rem; }
html[lang="de"] .svc-trust { flex-wrap: nowrap; white-space: nowrap; gap: 1rem; }
html[lang="de"] .svc-trust li { font-size: .8rem; }
html[lang="de"] .platform-text .lead { font-size: .98rem; }
html[lang="de"] .free-badge strong { font-size: .98rem; }
html[lang="de"] .free-badge span { font-size: .85rem; }
html[lang="de"] .platform-features li strong { font-size: .95rem; }
html[lang="de"] .platform-features li span { font-size: .88rem; }
html[lang="de"] .hero-intro .intro-words { font-size: .72rem; gap: 0; }
html[lang="de"] .hero-intro .intro-words span + span::before { margin: 0 .4rem; }
html[lang="de"] .intro-tile { width: 132px; min-width: 0; }
html[lang="de"] .intro-tile strong { font-size: .76rem; }
/* Language menu: never let it be clipped or collapse */
.lang-menu { min-width: 140px; max-width: calc(100vw - 1rem); }
.lang-option { white-space: nowrap; }
/* German why-cards: the closing one-liners are English-only */
html[lang="de"] .why-cards .why-kicker { display: none; }
/* Why section: heading block centred above the text + photo row */
.why-head { max-width: 900px; margin-inline: auto; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.why-head .why-subhead { margin-bottom: 0; }
.why-text .section-head { margin-bottom: 0; }

/* ---------- Home refinements ---------- */
/* 2. No grid pattern behind the hero headline */
.hero::before { display: none; }
/* 4. Smaller Made-in-Germany / Healthcare-IT tiles in both languages */
.intro-tiles { grid-template-columns: repeat(2, 128px); gap: .7rem; }
.intro-tile { width: 128px; height: 128px; min-width: 0; padding: .7rem; gap: .45rem; }
.intro-tile strong { font-size: .76rem; line-height: 1.25; }
.intro-tile .intro-tile-icon .icon { width: 20px; height: 20px; }
/* 5. Home service tiles show only the heading until they are opened */
#services-preview .service-card > .card-short,
#services-preview .service-card > .link-btn { display: none; }
#services-preview .service-card { cursor: pointer; justify-content: center; min-height: 118px; }
#services-preview .service-card.open { justify-content: start; min-height: 0; }
#services-preview .service-card.open > .card-short,
#services-preview .service-card.open > .link-btn { display: block; }
#services-preview .service-card.open > .link-btn { display: flex; }
/* Intro badge tiles: one clearly smaller size in both languages */
.intro-tiles, html[lang="de"] .intro-tiles { grid-template-columns: repeat(2, 112px); gap: .6rem; }
.intro-tile, html[lang="de"] .intro-tile { width: 112px; height: 112px; padding: .6rem; gap: .35rem; }
.intro-tile strong, html[lang="de"] .intro-tile strong { font-size: .7rem; }
.intro-tile .intro-tile-icon .icon, html[lang="de"] .intro-tile .intro-tile-icon .icon { width: 18px; height: 18px; }

/* Language switch must sit above the absolutely positioned nav bar */
.nav-cta .lang-switch, .header-top > .lang-switch { position: relative; z-index: 60; }

/* Home service tiles: square, heading at the top, Learn More pinned to the bottom */
#services-preview .service-card { aspect-ratio: 1 / 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
#services-preview .service-card > h3 { margin-bottom: 0; }
#services-preview .service-card > .link-btn { display: flex; margin-top: auto; }
#services-preview .service-card.open { aspect-ratio: auto; }
#services-preview .service-card.open > .link-btn { margin-top: auto; }

/* Home services: compact square tiles so the whole block fits one screen */
#services-preview { max-width: 880px; margin-inline: auto; gap: 1.1rem; }
#services-preview .service-card { padding: 1.15rem 1.25rem; }
#services-preview .service-card > h3 { font-size: 1.02rem; line-height: 1.25; }
#services-preview .service-card > .link-btn { padding-top: .5rem; font-size: .85rem; }
.section-graphic .section-head { margin-bottom: 1.5rem; }
@media (max-height: 860px) and (min-width: 1025px) {
  #services-preview { max-width: 760px; gap: .9rem; }
  #services-preview .service-card { padding: .95rem 1rem; }
  #services-preview .service-card > h3 { font-size: .95rem; }
  .section-graphic .section-head { margin-bottom: 1.1rem; }
  .section-graphic .section-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
  .section-graphic .section-head .lead { font-size: .92rem; }
}
@media (max-height: 800px) and (min-width: 1025px) {
  #services-preview { max-width: 680px; gap: .8rem; }
  #services-preview .service-card { padding: .85rem .9rem; }
  #services-preview .service-card > h3 { font-size: .9rem; }
  #services-preview .service-card > .link-btn { font-size: .8rem; padding-top: .4rem; }
  .section-graphic .section-head { margin-bottom: .9rem; }
}

/* Platform mock: shapes-only look (labels replaced by placeholder bars) */
.mock-nav li i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.28); }
.mock-nav li.is-active i { background: #fff; }
.mock-nav li { padding: .38rem .5rem; }
.mock-chip { width: 54px; height: 14px; }
.mock-who i { display: block; height: 6px; border-radius: 3px; background: #dbe6f6; }
.mock-who i:first-child { width: 42px; margin-bottom: 3px; }
.mock-who i:last-child { width: 30px; }
.mock-stats small { display: block; height: 5px; border-radius: 3px; background: #e3ecf8; width: 70%; }
.mock-mini-label { display: block; height: 6px; border-radius: 3px; background: #dbe8f8; width: 60%; }
.mock-mini p { height: 5px; border-radius: 3px; background: #eef3fb; width: 85%; }
.mock-mini-figs b { display: block; height: 6px; border-radius: 3px; background: #e3ecf8; width: 22px; }
.mock-mini-figs em { display: block; height: 4px; border-radius: 2px; background: #eef3fb; width: 16px; margin-top: 3px; }
.mock-figures small { display: block; height: 5px; border-radius: 3px; background: #e3ecf8; width: 52px; }
.mock-yaxis li { width: 12px; height: 4px; border-radius: 2px; background: #e7eef8; margin-left: auto; }
.mock-xaxis li { height: 4px; border-radius: 2px; background: #e7eef8; margin: 0 3px; }
.mock-legend li { width: 46px; height: 6px; border-radius: 3px; background: var(--blue-500); }
.mock-legend li::before { display: none; }
.mock-legend .is-muted { background: #cfe0f4; }
.mock-side .mock-nav li i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); }
.mock-side .mock-nav li.is-active i { background: #fff; }
.mock-side .mock-nav li.is-active { background: var(--blue-600); }
.mock-side .mock-nav li:nth-child(2) i { width: 78%; }
.mock-side .mock-nav li:nth-child(4) i { width: 84%; }
.mock-side .mock-nav li:nth-child(6) i { width: 72%; }

/* Home services: 4 + 2 layout, centred headings, bigger type */
#services-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; gap: 1rem; }
#services-preview .service-card { text-align: center; align-items: center; justify-content: center; }
#services-preview .service-card > h3 { font-size: 1.22rem; line-height: 1.3; margin: auto 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
#services-preview .service-card > .link-btn { margin-top: 0; justify-content: center; text-align: center; }
/* superseded by nth-of-type rules below */
#services-preview .service-card.open { grid-column: 1 / -1 !important; text-align: left; align-items: stretch; }
#services-preview .service-card.open > h3 { display: block; margin: 0 0 .45rem; font-size: 1.4rem; }
#services-preview .service-card.open > .link-btn { justify-content: flex-start; text-align: left; }
@media (max-height: 800px) and (min-width: 1025px) {
  #services-preview { max-width: 900px; }
  #services-preview .service-card > h3 { font-size: 1.05rem; }
}
@media (max-width: 1024px) { #services-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } #services-preview .service-card:nth-child(5) { grid-column: auto; } }
@media (max-width: 640px) { #services-preview { grid-template-columns: 1fr; } }

/* German mega menus: buttons and subtitles sized to fit */
html[lang="de"] .mega .btn { font-size: .82rem; padding: .55rem .9rem; white-space: normal; line-height: 1.25; }
html[lang="de"] .mega-item small, html[lang="de"] .mega p { font-size: .78rem; line-height: 1.5; letter-spacing: .01em; }
html[lang="de"] .mega-item strong { font-size: .88rem; }
html[lang="de"] .mega .btn { font-size: .76rem; white-space: nowrap; padding: .5rem .85rem; }
html[lang="de"] .mega-item small, html[lang="de"] .mega p { font-size: .74rem; line-height: 1.6; letter-spacing: .02em; }

/* Lighter grey for every dropdown subtitle */
.mega-item small { color: #8b97ab; }
.mega p, .mega .mega-lead { color: #7f8b9e; }
/* German header buttons: smaller so the longer labels fit */
html[lang="de"] .nav-cta .btn-sm { font-size: .78rem; padding: .7rem 1.1rem; }
html[lang="de"] .nav-cta .btn-sm .icon-xs { width: 13px; height: 13px; }

/* ---------- Service tiles: icon, number and a livelier surface ---------- */
.service-card { position: relative; overflow: hidden; }
.card-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--blue-50), #dceaff); border: 1px solid var(--blue-100); color: var(--blue-600); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.card-ico .icon { width: 21px; height: 21px; }
.service-card:hover .card-ico { background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #fff; transform: translateY(-2px); }
.card-index { position: absolute; top: .85rem; right: 1rem; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .14em; color: var(--blue-500); opacity: .55; }
.service-card::after { content: ''; position: absolute; right: -60px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(47,134,214,.16), rgba(47,134,214,0) 68%); pointer-events: none; transition: transform .45s var(--ease), opacity .45s; opacity: .85; }
.service-card:hover::after { transform: scale(1.18) translate(-6px, -6px); opacity: 1; }
.service-card.open .card-index { opacity: .35; }

/* Home tiles: icon above the centred heading, last row aligned left */
#services-preview .service-card { gap: .55rem; }
#services-preview .service-card > .card-ico { margin: 0 auto; }
#services-preview .service-card > h3 { margin: .2rem 0 auto; }
/* superseded by nth-of-type rules below */
#services-preview .service-card.open > .card-ico { margin: 0 0 .6rem; }

/* ---------- Service tiles: clean look, no icon / number / glow ---------- */
.card-ico, .card-index { display: none !important; }
.service-card::after { content: none !important; }
#services-preview .service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11,58,107,.05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
/* A thin brand rule grows under the heading instead of the icon/number */
#services-preview .service-card > h3 { position: relative; padding-bottom: .85rem; }
#services-preview .service-card > h3::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px; background: var(--blue-500);
  transition: width .3s var(--ease), background .3s var(--ease);
}
#services-preview .service-card:hover { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: 0 18px 40px -24px rgba(11,58,107,.45); }
#services-preview .service-card:hover > h3::after { width: 48px; background: var(--blue-600); }
#services-preview .service-card.open > h3 { padding-bottom: .5rem; }
#services-preview .service-card.open > h3::after { left: 0; transform: none; width: 40px; }
/* Bottom row sits under the middle two tiles */
/* superseded by nth-of-type rules below */

/* Platform: narrower preview, wider copy, CTA under the image */
.platform-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.92fr); }
.platform-shot-col { gap: 1.1rem; }
.platform-cta { order: 2; }
.platform-shot { order: 1; }
.platform-shot figcaption { display: none; }

/* Why section: subtitle styling for the second line */
.why-subhead { font-family: var(--font); font-weight: 500; font-size: clamp(.95rem, 1.4vw, 1.08rem); letter-spacing: .01em; opacity: .9; }
.why .why-subhead { color: rgba(255,255,255,.88); }

/* Why cards: centred headings, softer body text */
.why-cards li { align-items: center; text-align: center; }
.why-cards h3 { text-align: center; }
.why .why-cards p { color: rgba(255,255,255,.78); }
.why .why-cards .why-kicker { color: rgba(255,255,255,.92); }

/* Services grid: no dense packing, so tiles 5 and 6 stay under 2 and 3 */
#services-preview { grid-auto-flow: row; }
/* superseded by nth-of-type rules below */


/* Platform feature list: smaller, lighter descriptions */
.platform-features li span { font-size: .86rem; line-height: 1.55; color: #8b97ab; }
.platform-features li strong { font-size: .97rem; }
html[lang="de"] .platform-features li span { font-size: .82rem; color: #93a0b3; }
.hero-intro-text p + p { margin-top: .85rem; }

/* Free platform access badge: narrower box, lighter subtitle */
.free-badge { max-width: 460px; }
.free-badge span { color: rgba(255,255,255,.75); font-weight: 400; }
html[lang="de"] .free-badge span { font-size: .82rem; color: rgba(255,255,255,.72); }

/* Dashboard preview: shorter */
.mock-screen { min-height: 300px; }

/* Home services tiles: text centred in the tile */
#services-preview .service-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
#services-preview .service-card > p,
#services-preview .service-card > h3 { width: 100%; }
#services-preview .service-card > h3 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }

/* Tile subtitles: smaller and lighter */
#services-grid .card-short, #services-preview .card-short { font-size: .88rem; color: #8b97ab; }
html[lang="de"] #services-grid .card-short { font-size: .85rem; }
.clients-grid > .industry-card p { color: #8b97ab !important; }
.clients-grid > .industry-card.has-photo p { color: rgba(255,255,255,.72) !important; font-weight: 400; }

/* ---------- Packages: compact card ---------- */
.package-card { padding: 1.5rem 1.4rem; gap: .9rem; }
.pkg-head h3 { font-size: 1.16rem; }
.pkg-tag { font-size: .68rem; }
.pkg-tagline { font-size: .92rem; margin-top: .3rem; }
.pkg-intro { font-size: .88rem; line-height: 1.55; color: var(--muted); margin-top: .5rem; }
.pkg-body { padding-top: 1rem; }
.pkg-body h4 { font-size: .7rem; letter-spacing: .12em; }
.check-list li { font-size: .85rem; line-height: 1.45; gap: .5rem; margin-bottom: .45rem; }
.pkg-details { margin-top: .9rem; border-top: 1px dashed var(--line); padding-top: .75rem; }
.pkg-details > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--blue-600);
}
.pkg-details > summary::-webkit-details-marker { display: none; }
.pkg-details > summary .icon { transition: transform .2s ease; }
.pkg-details[open] > summary .icon { transform: rotate(90deg); }
.pkg-details p { font-size: .84rem; line-height: 1.6; color: var(--muted); margin-top: .7rem; }
.pkg-details .pkg-suitable strong { color: var(--blue-950); }
.pkg-action .btn { font-size: .82rem; padding: .7rem 1.1rem; }
html[lang="de"] .pkg-head h3 { font-size: 1.08rem; }
html[lang="de"] .pkg-intro, html[lang="de"] .check-list li { font-size: .82rem; }

/* ---------- Home services: tiles hold their place, detail opens in a full-width row below ---------- */

















#services-preview .service-card:nth-of-type(5) { grid-column: 2; }
#services-preview .service-card:nth-of-type(6) { grid-column: 3; }
@media (max-width: 1024px) {
  #services-preview .service-card:nth-of-type(5),
  #services-preview .service-card:nth-of-type(6) { grid-column: auto; }
}
/* Home intro: lighter stroke (Inter ships as a variable font here) */
.hero-intro-text p { font-variation-settings: 'wght' 330; font-weight: 400; color: #5f6c81; }

/* Home services panel: same two-column look the open tile used to have */









/* Why section heading: smaller, subtitle-weight, evenly balanced centring */
.why-head h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.3; text-wrap: balance; max-width: 30ch; margin-inline: auto;
}
.why-head .why-subhead { text-wrap: balance; max-width: 46ch; margin-inline: auto; }
.why-cards h3 { text-wrap: balance; }

/* Regulation aside: one consistent alignment for the whole box */
.reg-page-grid .reg-aside { text-align: center; justify-items: center; padding: 1.6rem 1.5rem; }
.reg-page-grid .reg-aside h3 { font-size: 1.32rem; line-height: 1.25; color: var(--blue-950); margin: 0 0 .1rem; }
.reg-page-grid .reg-aside p { text-align: center; max-width: 34ch; margin-inline: auto; }
.reg-page-grid .reg-aside .btn { width: 100%; margin-top: .4rem; }
html[lang="de"] .reg-page-grid .reg-aside h3 { font-size: 1.24rem; }
html[lang="de"] .reg-page-grid .reg-aside p { font-size: .86rem; line-height: 1.6; }
.reg-page-grid .reg-aside p { font-size: .84rem; line-height: 1.6; }
.reg-page-grid .reg-aside .reg-aside-lead { font-size: .82rem !important; }
html[lang="de"] .reg-page-grid .reg-aside p { font-size: .82rem; }

/* ---------- Regulation page: platform CTA card ---------- */
.reg-page-grid .reg-aside {
  background: linear-gradient(160deg, var(--blue-600), var(--blue-700) 70%);
  border: 0; border-radius: 18px; padding: 1.75rem 1.5rem 1.6rem;
  gap: .75rem; box-shadow: 0 24px 48px -24px rgba(29,95,224,.65);
  color: rgba(255,255,255,.82);
}
.reg-page-grid .reg-aside::before {
  content: ''; width: 42px; height: 42px; border-radius: 12px; margin-bottom: .35rem;
  background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 1px solid rgba(255,255,255,.28);
}
.reg-page-grid .reg-aside h3 { color: #fff; font-size: 1.28rem; line-height: 1.25; margin: 0; }
.reg-page-grid .reg-aside .reg-aside-lead {
  color: #bcd6ff !important; font-weight: 600; font-size: .82rem !important;
  padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: .1rem;
}
.reg-page-grid .reg-aside p { color: rgba(255,255,255,.8); font-size: .84rem; line-height: 1.6; max-width: 32ch; }
.reg-page-grid .reg-aside .btn {
  width: 100%; margin-top: .75rem; background: #fff; color: var(--blue-700);
  border-color: #fff; font-size: .86rem; padding: .75rem 1rem;
}
.reg-page-grid .reg-aside .btn:hover { background: #eaf1ff; color: var(--blue-800, #0b3a6b); }
.reg-page-grid .reg-aside .btn .icon { color: currentColor; }
html[lang="de"] .reg-page-grid .reg-aside h3 { font-size: 1.2rem; }
html[lang="de"] .reg-page-grid .reg-aside p { font-size: .82rem; }

/* =========================================================
   RESPONSIVE OVERRIDES - kept last so they win over any
   desktop rule appended after the original media queries.
   ========================================================= */
/* never let a child force a grid/flex track wider than the screen */
.platform-grid > *, .contact-layout > *, .reg-page-grid > *, .hero-intro > *,
.why-grid > *, .footer-grid > *, .packages > * { min-width: 0; }
img, svg, figure, video { max-width: 100%; }

@media (max-width: 1024px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-shot-col { order: 2; width: 100%; max-width: 620px; margin-inline: auto; }
  .platform-text { order: 1; }
  .hero-intro { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .reg-page-grid { grid-template-columns: 1fr; }
  .reg-page-grid .reg-aside { position: static; max-width: 460px; margin-inline: auto; }
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-convert, .tailored-cta { grid-template-columns: 1fr; }
  .tailored-cta-actions, .svc-convert-actions { align-items: stretch; }
}

@media (max-width: 720px) {
  .packages { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .intro-tiles { grid-template-columns: 1fr; }
  .mock-screen { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .platform-shot { max-width: 100%; }
}

@media (max-width: 600px) {
  .clients-grid, .features, #services-preview, #services-grid,
  .why-cards, .footer-grid { grid-template-columns: 1fr; }
  #services-preview .service-card { aspect-ratio: auto; min-height: 0; padding: 1.35rem 1.25rem; }
  .btn-lg, .tailored-cta-actions .btn, .svc-convert-actions .btn { width: 100%; justify-content: center; }
  .hero-intro-text p { text-align: left; }
}

/* =========================================================
   LARGE DISPLAYS - let the layout use the extra width
   instead of stranding it in the margins (e.g. 2256x1504).
   ========================================================= */
:root { --maxw: 1200px; }
.container { width: min(var(--maxw), 100% - 3rem); }

@media (min-width: 1500px) {
  :root { --maxw: 1320px; }
  #services-preview { max-width: 1150px; }
  .hero-intro-text p { max-width: 78ch; }
}
@media (min-width: 1800px) {
  :root { --maxw: 1440px; }
  html { font-size: 17px; }
  #services-preview { max-width: 1260px; }
  .reg-page-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
@media (min-width: 2200px) {
  :root { --maxw: 1560px; }
  html { font-size: 18px; }
  #services-preview { max-width: 1380px; }
}
.hero-slide figcaption { left: max(1.5rem, calc((100% - var(--maxw)) / 2)); }

/* =========================================================
   LARGE DISPLAYS - header + content track the screen width
   ========================================================= */
@media (min-width: 1500px) { :root { --maxw: min(88vw, 1440px); } }
@media (min-width: 1800px) { :root { --maxw: min(87vw, 1680px); } }
@media (min-width: 2200px) { :root { --maxw: min(86vw, 1920px); } }
@media (min-width: 1500px) { #services-preview { max-width: min(78vw, 1280px); } }
@media (min-width: 1800px) { #services-preview { max-width: min(76vw, 1480px); } }
@media (min-width: 2200px) { #services-preview { max-width: min(74vw, 1660px); } }

@media (min-width: 861px) {
  /* header grows with the viewport instead of staying at a fixed 100px */
  /* --header-h stays 100px: the header sizes to its content, and the hero height math depends on it */
  /* --k/--ks are unitless multipliers, so they step per breakpoint (clamp() cannot mix vw with a number) */
  .main-nav ul { gap: clamp(1.6rem, 1.9vw, 3.25rem); justify-content: center; padding: 0; }
  /* menu link size left as-is (.93rem from the base rule) */
  .nav-cta .btn-sm { font-size: clamp(.78rem, .22vw + .72rem, .95rem); padding: .7rem clamp(1.1rem, .8vw, 1.6rem); }
  .lang-toggle { font-size: clamp(.78rem, .2vw + .72rem, .92rem); }
}
@media (min-width: 1500px) { .site-header .logo { --k: .128; --ks: .1025; } }
@media (min-width: 1800px) { .site-header .logo { --k: .140; --ks: .1120; } }
@media (min-width: 2200px) { .site-header .logo { --k: .152; --ks: .1215; } }
/* =========================================================
   One step up in size for the sections below
   ========================================================= */
/* 1. Regulation "Compliance auf Autopilot" card */
.reg-page-grid .reg-aside h3 { font-size: 1.45rem; }
.reg-page-grid .reg-aside .reg-aside-lead { font-size: .92rem !important; }
.reg-page-grid .reg-aside p { font-size: .94rem; }
html[lang="de"] .reg-page-grid .reg-aside h3 { font-size: 1.36rem; }
html[lang="de"] .reg-page-grid .reg-aside p { font-size: .92rem; }

/* 2. Service tile titles (home + services page) */
.service-card > h3, #services-preview .service-card > h3, #services-grid .service-card > h3 { font-size: 1.32rem; }
#services-grid .card-short, #services-preview .card-short { font-size: .96rem; }
html[lang="de"] #services-grid .card-short { font-size: .94rem; }

/* 3. "Sie wissen nicht, wo Sie anfangen sollen?" band */
.svc-convert h3 { font-size: 1.88rem; }
.svc-convert p { font-size: 1.06rem; }
.svc-trust li { font-size: .96rem; }
.svc-convert-actions .btn { font-size: 1rem; }
.svc-convert-actions small { font-size: .92rem; }

/* 4. Platform section (main heading and the free-access badge keep their size) */
.platform-text > .lead { font-size: 1.18rem; }
.platform-features li strong { font-size: 1.05rem; }
.platform-features li span { font-size: .94rem; }
html[lang="de"] .platform-features li strong { font-size: 1.02rem; }
html[lang="de"] .platform-features li span { font-size: .92rem; }

/* 5. Why TechKraft cards */
.why-cards h3 { font-size: 1.2rem; }
.why .why-cards p, .why-cards p { font-size: 1rem; }
.why-cards .why-kicker { font-size: .92rem; }

/* 6. Who we work with tiles */
.clients-grid > .industry-card h3 { font-size: 1.16rem !important; }
.clients-grid > .industry-card p, .clients-grid > .industry-card.has-photo p { font-size: .94rem !important; }
.clients-grid > .industry-card.has-photo h3 { font-size: 1.16rem !important; }

/* =========================================================
   2200px+ (e.g. 2256x1504 at 100% OS scaling): render the
   page at the size a 125% browser zoom used to produce.
   ========================================================= */
@media (min-width: 2200px) {
  html { font-size: 21.25px; }
  :root { --maxw: min(87.7vw, 2000px); }
  #services-preview { max-width: min(76.6vw, 1750px); }
  .site-header .logo { --k: .175; --ks: .140; }
}

/* =========================================================
   2200px+ : render the whole page exactly as a 125% browser
   zoom did - every length, not just type. body zoom scales
   layout without affecting media queries; percentages are
   used instead of vw inside, since vw still resolves against
   the unzoomed viewport.
   ========================================================= */
@media (min-width: 2200px) {
  body { zoom: 1.25; }
  html { font-size: 17px; }
  :root { --maxw: min(87.7%, 1680px); }
  #services-preview { max-width: min(87.3%, 1372px); }
  .site-header .logo { --k: .140; --ks: .1120; }
  .main-nav ul { gap: 2.02rem; }
  .reg-page-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}

/* Regulation tiles: fluid tracks so they fill any screen width
   (they were pinned to a fixed 152px, leaving dead space). */
.reg-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); justify-content: stretch; }
@media (max-width: 1150px) { .reg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .reg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Expanded service tile: body copy two points larger
   (buttons, the tile title and the bold lead/kicker lines stay as they are) */
.service-card.open > .card-long p:not(.card-long-lead):not(.card-long-kicker),
.service-card.open > .card-long li,
.service-card.open > .card-long > div > p:not(.card-long-lead) {
  font-size: calc(1.1424rem + 2px);
}
.service-card.open > .card-long .btn { font-size: .86rem; }

/* =========================================================
   Cookie / storage consent
   ========================================================= */
.consent-bar {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 2000;
  width: min(1000px, calc(100% - 2rem)); display: flex; align-items: center; gap: 1.5rem;
  background: #fff; border: 1px solid var(--blue-100); border-radius: 16px;
  padding: 1.1rem 1.35rem; box-shadow: 0 28px 60px -24px rgba(10,42,94,.45);
  animation: consent-in .35s var(--ease);
}
@keyframes consent-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.consent-bar-text strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--blue-950); margin-bottom: .2rem; }
.consent-bar-text p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.consent-bar-text a { color: var(--blue-600); text-decoration: underline; }
.consent-bar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.consent-bar-actions .btn { white-space: nowrap; }

.consent-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(9,22,48,.55); backdrop-filter: blur(2px); }
.consent-panel {
  position: fixed; z-index: 2001; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 2rem)); max-height: min(86vh, 720px); overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 1.6rem 1.7rem 1.4rem;
  box-shadow: 0 40px 80px -30px rgba(10,42,94,.6);
}
.consent-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-panel-head h2 { margin: 0; font-size: 1.3rem; }
.consent-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .25rem; }
.consent-close:hover { color: var(--blue-950); }
.consent-intro { font-size: .88rem; color: var(--muted); margin: .5rem 0 1.1rem; line-height: 1.6; }
.consent-group { border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.05rem; margin-bottom: .75rem; }
.consent-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.consent-group-head strong { font-size: .98rem; color: var(--blue-950); }
.consent-group p { margin: 0; font-size: .83rem; line-height: 1.6; color: var(--muted); }
.consent-always { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); }

.consent-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.consent-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.consent-switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.consent-slider { width: 44px; height: 24px; border-radius: 999px; background: #cbd5e5; transition: background .2s var(--ease); }
.consent-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.consent-switch input:checked + .consent-slider { background: var(--blue-600); }
.consent-switch input:checked + .consent-slider::after { transform: translateX(20px); }
.consent-switch input:focus-visible + .consent-slider { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.consent-panel-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }

@media (max-width: 860px) {
  .consent-bar { flex-direction: column; align-items: stretch; gap: .9rem; bottom: .75rem; padding: 1rem 1.1rem; }
  .consent-bar-actions { flex-wrap: wrap; }
  .consent-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .consent-panel-actions { flex-direction: column-reverse; }
  .consent-panel-actions .btn { width: 100%; justify-content: center; }
}

/* Header CTA: keep the language switch on the same line as the buttons.
   When it wrapped onto a second line it spanned the full CTA width at
   z-index 60 and swallowed hover/clicks on the nav links beneath it
   ("Unsere Pakete", "Kontakt"). */
.nav-cta { flex-wrap: nowrap; align-items: center; }
.nav-cta > .lang-switch { flex: 0 0 auto; width: auto; align-self: center; }
/* Language switch sits under the Request Consultation button again, but as a
   small right-aligned box - not a full-width line that covered the nav links. */
.nav-cta { flex-wrap: wrap; justify-content: flex-end; }
.nav-cta > .lang-switch { flex: 0 0 auto; width: auto; margin-left: auto; align-self: flex-end; }
/* Force it onto its own line under the buttons. The full-width wrapper is
   click-through, so it can no longer intercept the nav links beneath it;
   only the toggle and its menu take pointer events. */
.nav-cta > .lang-switch { flex: 0 0 100%; width: 100%; display: flex; justify-content: flex-end; pointer-events: none; }
.nav-cta > .lang-switch > * { pointer-events: auto; }

/* Logo shield: the artwork in the sprite is 492x590 (ratio 0.834), noticeably
   narrower than the real mark (0.909), so it read as squished. Stretch the
   sprite on the X axis only (x1.09) to restore the correct proportions.
   Measured crop: x 174-665, y 100-689 of the 2000x749 sprite. */
.logo-shield {
  width: calc(536px * var(--ks));
  height: calc(590px * var(--ks));
  background-size: calc(2180px * var(--ks)) calc(749px * var(--ks));
  background-position: calc(-189.7px * var(--ks)) calc(-100px * var(--ks));
}

/* Client portfolio tiles: smaller body text, heading unchanged */
.clients-grid > .industry-card p,
.clients-grid > .industry-card.has-photo p { font-size: .85rem !important; line-height: 1.55; }
html[lang="de"] .clients-grid > .industry-card p,
html[lang="de"] .clients-grid > .industry-card.has-photo p { font-size: .82rem !important; }

/* =========================================================
   FLUID SCALING - single continuous system, no dead zones.
   Previously the layout only changed at 1500/1800/2200px, so
   e.g. 1366 and 1440 rendered identically (container 1200,
   logo 199, root 16px) while the full-bleed images stretched.
   Everything below scales continuously with the viewport.
   ========================================================= */
/* Type: 16px at 1280 -> 21.25px at 2256 (the size a 125% zoom gave), capped 22 */
html { font-size: clamp(16px, 0.538vw + 9.12px, 22px); }
body { zoom: normal; }

/* Content column: always a share of the viewport */
:root { --maxw: min(88vw, 2000px); }

/* Inner grids follow the container instead of fixed pixel caps */
#services-preview { max-width: min(87%, 1750px); }

/* Logo sprite expressed in rem, so it scales with the fluid type
   instead of stepping at breakpoints (values = old px / 16). */
.site-header .logo, .site-footer .logo { --k: .1148; --ks: .092; }
.site-footer .logo { --k: .1; --ks: .08; }
.logo-shield {
  width: calc(33.5rem * var(--ks));
  height: calc(36.875rem * var(--ks));
  background-size: calc(136.25rem * var(--ks)) calc(46.8125rem * var(--ks));
  background-position: calc(-11.85625rem * var(--ks)) calc(-6.25rem * var(--ks));
}
.logo-word {
  width: calc(69.75rem * var(--k));
  height: calc(11.6875rem * var(--k));
  background-size: calc(125rem * var(--k)) auto;
  background-position: calc(-47.0625rem * var(--k)) calc(-14.3125rem * var(--k));
}
.logo-tag {
  width: calc(64rem * var(--kt));
  height: calc(3.125rem * var(--kt));
  background-size: calc(125rem * var(--kt)) auto;
  background-position: calc(-47.5625rem * var(--kt)) calc(-29.6875rem * var(--kt));
}
.logo-text { gap: calc(3.4375rem * var(--k)); }
@media (max-width: 860px) { .site-header .logo { --k: .095; --ks: .076; } }

/* =========================================================
   Header: logo + action buttons get their own fluid scale.
   The sprite is sized in em and driven by .logo's font-size,
   so one clamp controls how fast the whole mark grows - the
   rem-based version only moved ~5% across laptop widths.
   ========================================================= */
.logo { font-size: clamp(11px, 0.92vw, 21px); }
.site-footer .logo { font-size: clamp(9.6px, 0.62vw, 15px); }
@media (max-width: 860px) { .site-header .logo { font-size: 9.6px; } }

.logo-shield {
  width: 4.482em; height: 4.936em;
  background-size: 18.236em 6.264em;
  background-position: -1.586em -0.836em;
}
.logo-word {
  width: 11.645em; height: 1.955em;
  background-size: 20.87em auto;
  background-position: -7.855em -2.391em;
}
.logo-tag {
  width: 12.61em; height: 0.616em;
  background-size: 24.64em auto;
  background-position: -9.373em -5.855em;
}
.logo-text { gap: 0.574em; }
.logo { gap: 0.62em; }

/* Header buttons follow the viewport at the same rate */
.nav-cta .btn-sm {
  font-size: clamp(.78rem, .42vw + .62rem, 1.02rem);
  padding: clamp(.6rem, .5vw, .95rem) clamp(1.05rem, 1vw, 1.85rem);
}
.lang-toggle { font-size: clamp(.78rem, .34vw + .66rem, .98rem); }
/* The bar has to grow with the logo, or the mark overflows its 100px box. */
:root { --header-h: clamp(100px, 5.4vw, 140px); }
.header-top { height: var(--header-h); padding-top: clamp(12px, 0.8vw, 20px); }
.logo { font-size: clamp(11px, 0.86vw, 19px); }
@media (max-width: 860px) {
  :root { --header-h: 76px; }
  .header-top { height: 76px; padding-top: 0; }
  .site-header .logo { font-size: 9.6px; }
}

/* Logo shield, corrected: an earlier scan only searched the left third of the
   sprite (x < 666) and clipped the mark at 492x590, so it looked narrow - the
   x1.09 stretch applied to "fix" that made it fat and cut the right corners.
   True artwork is x 174-676, y 100-689 => 503x590 (ratio 0.8525). No stretch,
   full crop. Height is unchanged, so the logo keeps its current size. */
.logo-shield {
  width: 4.2082em;
  height: 4.936em;
  background-size: 16.7322em 6.2662em;
  background-position: -1.4557em -0.83661em;
}

/* Hero eyebrows: the side tracks were minmax(0,1fr), so they could shrink
   below the pill's own width - the nowrap pills then spilled into the centre
   column and sat on top of the heading (English only; they are hidden in DE).
   Sizing the side tracks to their content fixes it at every width. */
@media (min-width: 861px) {
  .hero-screen .hero-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hero-screen .hero-top > .eyebrow { max-width: 22ch; }
}

/* Hero headline: it was forced onto one line (white-space: nowrap) while its
   grid column can be narrower than the text, so the text ran out of its column
   and across the right-hand "Healthcare IT" pill - the box never overlapped,
   only the rendered text, which is why a box-based check looked clean.
   Let it wrap and balance the lines instead. */
.hero-screen h1 { white-space: normal; text-wrap: balance; }

/* Hero eyebrows nudged outward, into the gutter beside the content column.
   The shift is capped by the gutter itself, so the pills always keep at least
   14px clear of the viewport edge however wide or narrow the window is. */
@media (min-width: 861px) {
  .hero-screen .hero-top {
    --pill-out: max(0px, min(4vw, (100vw - var(--maxw)) / 2 - 14px));
  }
  .hero-screen .hero-top > .eyebrow-left  { margin-left:  calc(-1 * var(--pill-out)); }
  .hero-screen .hero-top > .eyebrow-right { margin-right: calc(-1 * var(--pill-out)); }
}
/* Pulled back inwards: outward shift reduced from 4vw to 1.3vw (~1cm less
   travel at 1440). Raise/lower this one value to move the pills out or in. */
@media (min-width: 861px) {
  .hero-screen .hero-top {
    --pill-out: max(0px, min(1.3vw, (100vw - var(--maxw)) / 2 - 14px));
  }
}

/* Headline back on one line. Instead of nowrap at a fixed size (which used to
   run the text out of its column and across the right pill), the size is tied
   to the viewport so the line always fits the space between the two pills.
   Below 861px the hero stacks, so wrapping is allowed again. */
@media (min-width: 861px) {
  .hero-screen h1 {
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: clamp(1.05rem, 3.6vw - 16px, 2.5rem);
  }
}
@media (max-width: 860px) {
  .hero-screen h1 { white-space: normal; text-wrap: balance; }
}


/* Header: logo pinned to the left edge of the page, Client Portal / Request Consultation
   (and the language switch) pinned to the right edge — not inside the centred content column. */
.site-header .header-top.container { width: 100%; max-width: none; padding-inline: clamp(16px, 2vw, 32px); }

/* German CTA band on mobile: html[lang="de"] .svc-trust forces the three
   trust items onto a single nowrap row. That row's min-content (~800px)
   inflated the band's grid track, so every child overflowed the phone
   viewport. Keep the one-line look on desktop, wrap on small screens. */
@media (max-width: 860px) {
  html[lang="de"] .svc-trust { flex-wrap: wrap; white-space: normal; gap: .5rem 1.25rem; }
  html[lang="de"] .svc-trust li { white-space: normal; }
  .svc-convert, .tailored-cta { grid-template-columns: minmax(0, 1fr); }
  .svc-convert > *, .tailored-cta > * { min-width: 0; }
  /* same trap in the hero intro word list */
  html[lang="de"] .hero-intro .intro-words { flex-wrap: wrap; white-space: normal; }
}