/* ==========================================================================
   Page layout — Home, TecDoc, Contact
   ========================================================================== */

/* Generic layout helpers */
.section { max-width: var(--page-max); margin: 0 auto; padding: var(--site-section-pad) var(--page-gutter); display: flex; flex-direction: column; gap: var(--space-9); }
.section--tight { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--site-measure-headline); }
.section-head h2:where(:not(.eyebrow)) {
  font-family: var(--font-display-greek);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--site-tracking-headline);
  color: var(--text-strong);
}
.section-head--lg h2, .section-head--lg h3 { font: var(--type-title-serif); letter-spacing: var(--tracking-display-serif); color: var(--text-strong); }
.section-head p { color: var(--text-body); max-width: var(--site-measure-text); }
.section-head .badge { align-self: flex-start; }
/* Centered head (e.g. intro, video) and the serif statement variant */
.section-head--center { margin: 0 auto; align-items: center; text-align: center; }
.section-head--center p { font-size: var(--text-lg); }
.section-head--center .badge { align-self: center; }
.section-head--statement p {
  font: var(--weight-regular) var(--text-2xl)/1.35 var(--font-display-serif); /* multi-line statement: a touch more air than --leading-snug */
  letter-spacing: var(--site-tracking-headline);
  color: var(--text-strong);
  max-width: var(--site-measure-headline);
}

/* Full-width background bands around a .section (DESIGN.md §4) */
.band { background: var(--surface-page); }
.band--card { background: var(--surface-card); }

/* --text-muted on --surface-page is 4.4:1 — below AA for 12px labels.
   Section-level eyebrows sitting directly on the page ground use --text-body. */
main > .section .eyebrow:not(.card .eyebrow):not(.eyebrow--invert) { color: var(--text-body); }
.section-head--band {
  max-width: none; width: 100%;
  background: var(--gradient-brand); border-radius: var(--radius-xl);
  padding: var(--space-9); gap: 16px;
}
.section-head--band h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-4xl); line-height: var(--leading-tight);
  color: var(--white);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* Prevent CSS Grid blowout: grid items default to a content-based minimum
   width, which lets long text/wide images force the track (and the page)
   wider than the viewport. min-width: 0 lets them shrink to fit instead. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .tecdoc-feature > *, .hero-split__inner > *,
.tab-panel-grid > *, .benefits-band__inner > *, .audience-grid > *, .contact-grid > *,
.contact-info-grid > *, .form-row > *, .ai-hero__grid > *, .ai-tech__grid > * {
  min-width: 0;
}

/* Same overflow class, flex variant: these copy blocks use align-items:
   flex-start (column direction) so short elements like buttons and tags
   size to their own content instead of stretching full-width. But that
   same rule also lets a long heading size to its own one-line content
   width instead of the container's, pushing it past the viewport. Force
   just the text elements to stretch to the container width so they wrap. */
.hero-home__copy h1, .hero-home__copy p,
.hero-split__copy h1, .hero-split__copy p,
.tecdoc-feature__copy h3, .tecdoc-feature__copy p,
.ai-hero__copy h1, .ai-hero__copy p {
  align-self: stretch;
}

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { gap: var(--space-7); padding: var(--site-section-pad-mobile) var(--space-6); }
  .section-head h2:where(:not(.eyebrow)) { font-size: var(--text-2xl); }
  .section-head--lg h2, .section-head--lg h3 { font-size: var(--text-3xl); }
  .section-head--statement p { font-size: var(--text-xl); }
}

/* 4-up grid (e.g. TecDoc key figures): 2×2 until the full container width */
@media (max-width: 1180px) and (min-width: 561px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ---- Home: hero ---- */
/* Centered, typographic hero on a white band (DESIGN.md §10) */
.hero-home {
  position: relative; overflow: hidden;
  /* The bottom padding is the stage the motif stands on */
  padding: var(--site-hero-pad-top) var(--page-gutter) clamp(160px, 18vw, 260px);
}
.hero-home__inner {
  position: relative; z-index: 2;
  max-width: var(--page-max); margin: 0 auto;
}
/* Soft CI light pool on the floor of the stage, where the motif stands.
   Radial only, so there are no hard edges at the sides. */
.hero-home::before {
  content: ''; position: absolute; inset: 40% 0 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 42% 92%, rgba(22,73,255,0.13) 0%, rgba(22,73,255,0.05) 45%, transparent 72%),
    radial-gradient(36% 50% at 60% 95%, rgba(16,191,168,0.17) 0%, rgba(16,191,168,0.06) 45%, transparent 72%);
  transform: scale(calc(1 + var(--hero-p, 0) * 0.06));
  transform-origin: 50% 100%;
  animation: hero-glow-in 1400ms var(--ease-out) 200ms both;
}
.hero-home__copy {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  text-align: center;
}
.hero-home__copy .badge { margin-bottom: var(--space-3); }
.hero-home__copy h1, .hero-home__copy p { margin-inline: auto; }
.hero-home__copy h1 {
  font: var(--type-hero);
  letter-spacing: var(--tracking-display-serif);
  max-width: var(--site-measure-headline);
  font-synthesis: none; /* never a faux italic if the italic cut fails to load */
}
/* One italic accent word in the hero (DESIGN.md §3), true Source Serif 4 Italic */
.hero-home__copy h1 em { font-style: italic; }
.hero-home__copy p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-body);
  max-width: var(--site-measure-lead);
}
.hero-home__actions { display: flex; justify-content: center; gap: var(--gap-inline); padding-top: var(--space-4); flex-wrap: wrap; }

/* Entrance: copy rises in sequence, then the motif assembles (DESIGN.md §7) */
.hero-home__copy > * { animation: hero-rise 700ms var(--ease-out) both; }
.hero-home__copy > :nth-child(2) { animation-delay: 80ms; }
.hero-home__copy > :nth-child(3) { animation-delay: 160ms; }
.hero-home__copy > :nth-child(4) { animation-delay: 240ms; }

/* ---- Home: hero stage with the brand motif (DESIGN.md §13 Markenmotiv) ---- */
/* A large, very translucent cube behind the whole composition: its tip sits at
   the pill, it stands on the stage floor (the hero's bottom edge) and fades out
   towards the top so the headline stays free. The SVG scales to the stage
   height (xMidYMax meet), so the proportions hold at every width.
   --hero-p (0–1) is set by main.js from the scroll position. */
.hero-stage {
  position: absolute; z-index: 1;
  left: 0; right: 0; top: var(--site-hero-pad-top); bottom: 0;
  pointer-events: none;
  transform: translateY(calc(var(--hero-p, 0) * -16px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 22%, #000 62%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 22%, #000 62%);
}
.hero-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-mark polygon {
  fill: url(#heroMarkFill);
  transform: translate(calc(var(--hero-p, 0) * var(--dx)), calc(var(--hero-p, 0) * var(--dy)));
  will-change: transform;
}
.hero-mark__facet { animation: hero-facet-in var(--site-duration-hero) var(--ease-out) both; }
.hero-mark__facet--top   { --dx: 0px;   --dy: -36px; animation-delay: 320ms; }
.hero-mark__facet--left  { --dx: -30px; --dy: 18px;  animation-delay: 410ms; }
.hero-mark__facet--right { --dx: 30px;  --dy: 18px;  animation-delay: 500ms; }
.hero-mark__facet--top polygon { opacity: 0.8; }
.hero-mark__facet--right polygon { opacity: 0.9; }
.hero-mark__stop--a { stop-color: var(--blue-500); stop-opacity: calc(0.07 + var(--hero-p, 0) * 0.05); }
.hero-mark__stop--b { stop-color: var(--blue-500); stop-opacity: calc(0.09 + var(--hero-p, 0) * 0.05); }
.hero-mark__stop--c { stop-color: var(--teal-500); stop-opacity: calc(0.16 + var(--hero-p, 0) * 0.07); }

@keyframes hero-rise { from { opacity: 0; transform: translateY(var(--space-3)); } }
@keyframes hero-glow-in { from { opacity: 0; } }
@keyframes hero-facet-in {
  from { opacity: 0; transform: translate(calc(var(--dx) * 1.4), calc(var(--dy) * 1.4)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home::before, .hero-home__copy > *, .hero-mark__facet { animation: none; }
  .hero-mark polygon, .hero-home::before, .hero-stage { transform: none; }
}

.stats-strip { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); transform: translateY(-48px); position: relative; z-index: 1; }

/* ---- Home: TecDoc feature tile ---- */
.tecdoc-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10); align-items: center; }
.tecdoc-feature.card--pad-lg { padding: var(--space-10); }
.tecdoc-feature__media { aspect-ratio: 1/1; }
.tecdoc-feature__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.tecdoc-feature__copy h2 {
  font: var(--type-title-serif);
  letter-spacing: var(--tracking-display-serif);
  color: var(--white);
}
.tecdoc-feature__copy h3 {
  margin-top: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--white);
}
.tecdoc-feature__copy p { font-size: var(--text-md); color: rgba(255,255,255,0.78); max-width: 460px; }
.tecdoc-feature__copy h3 + p { margin-top: calc(var(--space-3) - var(--space-5)); }
.tecdoc-feature__copy .btn { margin-top: var(--space-3); }
@media (max-width: 860px) {
  .tecdoc-feature { grid-template-columns: 1fr; gap: var(--space-8); }
  .tecdoc-feature.card--pad-lg { padding: var(--space-7) var(--space-6); }
  .tecdoc-feature__copy h2 { font-size: var(--text-3xl); }
}

/* ---- Home: TecDoc search visualization ---- */
.search-viz {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: var(--space-7);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
}
.search-viz__row {
  height: 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
}
.search-viz__row--hit {
  position: relative;
  animation: search-viz-hit 3.6s ease-in-out infinite;
}
.search-viz__check {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%) scale(0);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-accent); color: var(--ink-900);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  animation: search-viz-check 3.6s ease-in-out infinite;
}
.search-viz__scanner {
  position: absolute; left: 0; right: 0; top: 4%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-accent) 45%, transparent);
  animation: search-viz-scan 3.6s ease-in-out infinite;
}
@keyframes search-viz-scan {
  0%   { top: 4%; opacity: 0; }
  8%   { opacity: 1; }
  52%  { top: 96%; opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; top: 4%; }
}
@keyframes search-viz-hit {
  0%, 45% { background: rgba(255,255,255,0.14); }
  55%, 90% { background: rgba(16,191,168,0.22); }
  100% { background: rgba(255,255,255,0.14); }
}
@keyframes search-viz-check {
  0%, 45% { transform: translateY(-50%) scale(0); }
  55%, 90% { transform: translateY(-50%) scale(1); }
  100% { transform: translateY(-50%) scale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .search-viz__scanner { display: none; }
  .search-viz__row--hit { background: rgba(16,191,168,0.22); animation: none; }
  .search-viz__check { transform: translateY(-50%) scale(1); animation: none; }
}

.why-card { display: flex; flex-direction: column; gap: var(--space-3); min-height: 240px; }
.why-card > .eyebrow { margin-bottom: auto; padding-bottom: var(--space-8); }
.why-card__title { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }
.why-card__body { font-size: var(--text-md); color: var(--text-body); }
.grid-3:has(> .why-card) { gap: var(--space-4); }

/* ---- Home: about (Ποιοι είμαστε) ---- */
.about-grid { align-items: center; gap: var(--space-10); }
.about-grid__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.about-grid__copy p:first-child { font-size: var(--text-lg); color: var(--text-strong); }

@media (max-width: 860px) {
  .about-grid { gap: var(--space-7); }
  .why-card { min-height: 0; }
  .why-card > .eyebrow { padding-bottom: var(--space-5); }
}

/* ---- TecDoc: split hero ---- */
.hero-split { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); padding: var(--space-11) var(--page-gutter) var(--space-10); }
.hero-split__inner { position: relative; z-index: 1; max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-10); align-items: center; }
.hero-split__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.hero-split__copy h1 { font: var(--type-title-serif); letter-spacing: var(--tracking-display-serif); color: var(--text-strong); }
.hero-split__copy p { font-size: var(--text-lg); color: var(--text-body); }
.hero-split__copy .btn { margin-top: var(--space-3); }
.tags-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero-split__inner { grid-template-columns: 1fr; }
  .stats-strip { transform: none; padding-top: var(--space-8); }
  .hero-home { padding: var(--space-10) var(--space-6) 160px; }
  .hero-stage { top: var(--space-10); }
  /* --text-6xl wraps to 6-8 lines on a narrow column, dwarfing the rest of
     the page. A smaller mobile-only size keeps headings to a few lines
     without touching desktop. */
  .hero-home__copy h1 { font-size: var(--text-4xl); }
  .hero-home__copy p { font-size: var(--text-lg); }
  .hero-home__actions { flex-direction: column; align-self: stretch; }
  .hero-split { padding: var(--space-10) var(--space-6) var(--space-9); }
  .hero-split__copy h1 { font-size: var(--text-3xl); }
}

/* ---- 404: copy left, brand motif right (reuses the hero-mark facets) ---- */
.error-404 {
  position: relative; overflow: hidden;
  background: var(--surface-card);
  padding: var(--space-11) var(--page-gutter);
  min-height: calc(100vh - var(--site-header-h));
  display: flex; align-items: center;
}
.error-404__inner {
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center;
}
.error-404__inner > * { min-width: 0; }
.error-404__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.error-404__copy h1 {
  font: var(--type-hero);
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-strong);
  font-synthesis: none;
}
.error-404__copy h1 em { font-style: italic; }
.error-404__code {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-primary);
}
.error-404__emoji { font-size: 0.8em; vertical-align: 0.08em; }
.error-404__copy p { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-body); max-width: 40ch; }
.error-404__actions { display: flex; gap: var(--gap-inline); padding-top: var(--space-4); flex-wrap: wrap; }
.error-404__copy > * { animation: hero-rise 700ms var(--ease-out) both; }
.error-404__copy > :nth-child(2) { animation-delay: 80ms; }
.error-404__copy > :nth-child(3) { animation-delay: 160ms; }
.error-404__copy > :nth-child(4) { animation-delay: 240ms; }

.error-404__stage { position: relative; aspect-ratio: 520 / 600; max-height: 70vh; justify-self: center; width: 100%; }
/* Same CI light pool as the home hero, under the motif */
.error-404__stage::before {
  content: ''; position: absolute; inset: 20% -20% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 45% at 40% 70%, rgba(22,73,255,0.14) 0%, transparent 70%),
    radial-gradient(40% 40% at 65% 80%, rgba(16,191,168,0.18) 0%, transparent 70%);
  animation: hero-glow-in 1400ms var(--ease-out) 200ms both;
}
.error-404__mark polygon { fill: url(#errorMarkFill); transform: none; }
.error-404__stop--a { stop-color: var(--blue-500); stop-opacity: 0.22; }
.error-404__stop--b { stop-color: var(--blue-500); stop-opacity: 0.32; }
.error-404__stop--c { stop-color: var(--teal-500); stop-opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .error-404__copy > *, .error-404__stage::before { animation: none; }
}
@media (max-width: 860px) {
  .error-404 { min-height: 0; padding: var(--space-10) var(--space-6); }
  .error-404__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .error-404__copy h1 { font-size: var(--text-4xl); }
  .error-404__code { font-size: var(--text-3xl); }
  .error-404__actions { flex-direction: column; align-self: stretch; }
  .error-404__stage { max-width: 280px; }
}

/* ---- TecDoc: text/media rows ---- */
.tab-panel-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-10); align-items: center; }
.tab-panel-grid > p { font-size: var(--text-lg); color: var(--text-body); }
.card > .tab-panel-grid > p { font-size: var(--text-lg); }

/* Lists with a short hairline dash instead of a dot */
.bullet-list { display: flex; flex-direction: column; gap: var(--space-3); }
.bullet-list li { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-md); color: var(--text-body); }
.bullet-list li::before { content: ''; flex: none; width: 12px; height: 1px; background: var(--border-strong); transform: translateY(-0.35em); }
.bullet-list--2col { display: block; columns: 2; column-gap: var(--space-10); }
.bullet-list--2col li { break-inside: avoid; margin-bottom: var(--space-4); }

/* Three benefits on a white band, each opened by a hairline */
.benefits-band { background: var(--surface-card); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--site-section-pad) var(--page-gutter); }
.benefits-band__inner { max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-9); }
.benefit { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.benefit h3 { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }
.benefit p { font-size: var(--text-md); color: var(--text-body); }

.audience-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; }

/* Workshop illustration (Claude Design import): no frame, sits on the page ground */
.workshop-illu { margin: 0; width: 100%; }
.workshop-illu__svg { display: block; width: 100%; height: auto; aspect-ratio: 900 / 650; }
@media (max-width: 860px) { .workshop-illu { max-width: 520px; margin-inline: auto; } }

/* The one loud moment of the TecDoc page */
.tecdoc-banner { display: flex; flex-direction: column; gap: var(--space-9); }
.tecdoc-banner h2 { font: var(--type-title-serif); letter-spacing: var(--tracking-display-serif); color: var(--white); }
.tecdoc-banner figcaption { margin-top: var(--space-4); font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--white); }

/* Feature cards: icon and title live in one glass card (not a tile with a
   loose caption under it). Icons share one canvas, so they keep one stroke
   weight; the card numbers them 01–03 in the eyebrow voice. */
.tecdoc-banner .grid-3 { counter-reset: banner-card; align-items: stretch; }
.tecdoc-banner .grid-3 > .cx-media--dark,
.tecdoc-banner .grid-3 > .cx-media--dark > .elementor-widget-container { height: 100%; }
.tecdoc-banner .cx-media--dark figure {
  counter-increment: banner-card;
  display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tecdoc-banner .cx-media--dark figure img {
  aspect-ratio: 3 / 2; padding: var(--space-5) var(--space-6);
  border: 0; border-radius: 0; background: none;
}
.tecdoc-banner .cx-media--dark figure img[src*="placeholder"] { padding: 0; }
.tecdoc-banner .cx-media--dark figcaption {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: left; text-wrap: balance;
}
.tecdoc-banner .cx-media--dark figcaption::before {
  content: counter(banner-card, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular);
  line-height: 1.4; letter-spacing: var(--tracking-label); color: var(--teal-200);
}
@media (max-width: 860px) {
  .tecdoc-banner .cx-media--dark figure img { aspect-ratio: 16 / 9; padding: var(--space-4) var(--space-6); }
  .tecdoc-banner .cx-media--dark figcaption { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Closing call to action, centered */
.cta-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.cta-card__heading { font: var(--type-title-serif); letter-spacing: var(--tracking-display-serif); color: var(--text-strong); max-width: var(--site-measure-headline); }
.cta-card__sub { font-size: var(--text-lg); color: var(--text-body); }
.cta-card .btn { margin-top: var(--space-3); }

@media (max-width: 860px) {
  .tab-panel-grid, .audience-grid, .benefits-band__inner { grid-template-columns: 1fr; }
  .tab-panel-grid { gap: var(--space-7); }
  .bullet-list--2col { columns: 1; }
  .benefits-band { padding: var(--site-section-pad-mobile) var(--space-6); }
  .benefits-band__inner { gap: var(--space-7); }
  .cta-card__heading { font-size: var(--text-3xl); }
  .tecdoc-banner h2 { font-size: var(--text-3xl); }
}

/* ---- Contact ---- */
/* Copy + contact details left, form card right (DESIGN.md §10 Kontakt) */
.contact-grid {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-11) var(--page-gutter) var(--gap-section);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8) var(--space-10); align-items: start;
  grid-template-areas: "copy form" "aside form";
  grid-template-rows: auto 1fr;
}
.contact-copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-aside { grid-area: aside; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-grid > .contact-form { grid-area: form; }
.contact-copy > .eyebrow { color: var(--text-body); }
.contact-copy h1 {
  font: var(--type-title-serif);
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-strong);
}
.contact-copy > p { font-size: var(--text-lg); color: var(--text-body); max-width: var(--site-measure-text); }

/* The one loud moment of this page: white logo on the CI gradient */
.brand-panel {
  background: var(--gradient-cover); border-radius: var(--radius-xl); overflow: hidden;
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4);
}
.brand-panel__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255,255,255,0.78); }

/* Contact details as a quiet hairline list, like the footer columns */
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
.contact-info-item {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
}
.contact-info-item .eyebrow { color: var(--text-body); }
.contact-info-item__value { font-size: var(--text-md); color: var(--text-strong); }
.contact-info-item__value a { color: var(--text-strong); transition: var(--transition-control); }
.contact-info-item__value a:hover { color: var(--text-link); }
.contact-info-item .footer__social { flex-direction: row; gap: var(--space-5); }
.contact-info-item .footer__social a { color: var(--text-strong); }
.contact-info-item .footer__social a:hover { color: var(--text-link); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-form__note { font-size: var(--text-sm); color: var(--text-body); }
.contact-form__note a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }

@media (max-width: 860px) {
  .contact-grid, .form-row, .contact-info-grid { grid-template-columns: 1fr; }
  /* Mobile: the form comes right after the headline, details follow */
  .contact-grid { padding-top: var(--space-10); gap: var(--space-8); grid-template-areas: "copy" "form" "aside"; grid-template-rows: auto; }
  .contact-copy h1 { font-size: var(--text-3xl); }
  .contact-form.card--pad-lg { padding: var(--space-6); }
}

/* ---- Solutions (ehemals AI & Software Development) ---- */
.ai-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-9); align-items: center; max-width: var(--page-max); margin: 0 auto; width: 100%; }
.ai-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); text-align: left; }
.ai-tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ai-tech__card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--pad-card); }

@media (max-width: 860px) {
  .ai-hero__grid, .ai-tech__grid { grid-template-columns: 1fr; }
}

/* ---- Hand-Illustration (Startseite „Ποιοι είμαστε“) -----------------------
   Markup: assets/illustrations/cokolex-hand.html. Aus Claude Design importiert
   (12.09.2026). Hand und Marke sind das SVG, die vier Kacheln liegen als HTML
   darüber: so skaliert ihre Schrift mit und bleibt auf jeder Größe lesbar
   (im SVG waren sie mobil nur ~11 px groß).
   Die --illu-*-Werte sind Schattierungen der Hand und gelten nur hier, sie
   sind keine neuen CI-Tokens (DESIGN.md §13). Die Schwebe-Animationen laufen
   mit ease-in-out: die CI-Kurven sind asymmetrisch und ruckeln in einer
   Endlosschleife.                                                          */
.hand-illu {
  --illu-skin-1: #FAFBFD;
  --illu-skin-2: #E4E8F0;
  --illu-skin-3: #B7C1D2;
  --illu-skin-4: #B4BECE;
  --illu-shade:  #8E9BB0;
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 860 / 780;
}
/* Das SVG füllt die Bühne und wird darin zentriert eingepasst */
.hand-illu__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.hand-illu__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-strong);
}
.hand-illu__chip-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-primary); }
.hand-illu__chip-dot--teal { background: var(--brand-accent); }
.hand-illu__chip--dark {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}
.hand-illu__chip-check { flex: none; width: 16px; height: 16px; color: var(--brand-accent); }

/* Lage der Kacheln: Prozente der Bühne, damit sie mitwandern */
.hand-illu__chip--a { top: 2%;  left: 0; }
.hand-illu__chip--b { top: 15%; right: 0; }
.hand-illu__chip--c { top: 27%; left: 0; }
.hand-illu__chip--d { bottom: 3%; right: 2%; }

.hand-illu--no-chips .hand-illu__chip { display: none; }

@keyframes ckx-mark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes ckx-chip-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ckx-chip-b { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(5px); } }
@keyframes ckx-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes ckx-shade { 0%, 100% { opacity: 0.22; transform: scale(1); } 50% { opacity: 0.13; transform: scale(1.07); } }

.hand-illu__mark { animation: ckx-mark 5.4s ease-in-out infinite; transform-origin: 586px 300px; }
.hand-illu__shade { animation: ckx-shade 5.4s ease-in-out infinite; transform-origin: 580px 480px; }
.hand-illu__chip--a { animation: ckx-chip-a 6s ease-in-out infinite; }
.hand-illu__chip--b { animation: ckx-chip-b 6.8s ease-in-out infinite; }
.hand-illu__chip--c { animation: ckx-chip-b 8s ease-in-out infinite; }
.hand-illu__chip--d { animation: ckx-chip-a 7.4s ease-in-out infinite; }
.hand-illu__dots { animation: ckx-dot 5.6s ease-in-out infinite; }

/* Tablet und kleine Fenster: der Abschnitt ist einspaltig, die Bühne also
   breiter — die Kacheln bleiben, nur etwas kompakter. */
@media (max-width: 860px) {
  .hand-illu { aspect-ratio: 860 / 640; }
  .hand-illu__chip { font-size: 14px; padding: 9px 14px; }
  /* Einspaltig steht die Bühne über die ganze Breite: Hand mittig setzen.
     Die CSS-Transform ersetzt die des transform-Attributs, darum ganz. */
  .hand-illu__art { transform: translate(86px, -70px) translate(-78px, 100px) scale(0.86); }
}

/* Handy: Die Bühne wird höher und die Kacheln sitzen in den vier Ecken um
   Hand und Marke herum, statt sie zu überdecken. */
@media (max-width: 560px) {
  .hand-illu { aspect-ratio: 1 / 1.2; }
  .hand-illu__chip { font-size: 12px; padding: 8px 12px; gap: 8px; letter-spacing: 0.06em; }
  .hand-illu__chip-dot { width: 7px; height: 7px; }
  .hand-illu__chip-check { width: 14px; height: 14px; }
  .hand-illu__chip--a { top: 0;    left: 0;  right: auto; }
  .hand-illu__chip--b { top: 13%;  right: 0; left: auto; }
  .hand-illu__chip--c { top: auto; bottom: 12%; left: 0; }
  .hand-illu__chip--d { bottom: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hand-illu__mark,
  .hand-illu__shade,
  .hand-illu__chip,
  .hand-illu__dots { animation: none; }
}

/* Zweispaltig: Text links, Illustration rechts, beide mittig auf einer Höhe
   — das macht .about-grid mit align-items: center. */