/* ==========================================================================
   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; }
}

/* ---- Home: trust band (partners, directly under the hero) ---- */
.trust-band { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

.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); }

.partners-row { display: flex; align-items: center; justify-content: center; gap: var(--space-9); flex-wrap: wrap; }
.partners-row__list { display: flex; align-items: center; gap: var(--space-9); flex-wrap: wrap; justify-content: center; }
.partners-row__name {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-xl); line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}
.partners-row__list li + li { padding-left: var(--space-9); border-left: 1px solid var(--border-default); }

/* ---- 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) {
  .partners-row { gap: var(--space-5); flex-direction: column; }
  .partners-row__list { gap: var(--space-6); }
  .partners-row__list li + li { padding-left: var(--space-6); }
  .partners-row__name { font-size: var(--text-lg); }
  .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); }
}

/* ---- 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; }

/* 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); }

/* 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); }
}

/* ---- 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; }
}