/* TWO DOTS homepage only */
.twd-page.twd-home,
.twd-home-hero {
  background: transparent !important;
}

.twd-home-hero {
  padding: 118px 0 84px;
  overflow: hidden;
}

.twd-home-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
  gap: 48px;
  align-items: center;
}

.twd-home-hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.twd-home-hero__image-main {
  grid-row: span 2;
  min-height: 520px;
}

.twd-home-hero__image-small {
  min-height: 248px;
}

.twd-home-hero__media img {
  height: 100%;
  box-shadow: var(--twd-shadow);
}

.twd-home-hero .twd-btn-primary:hover,
.twd-home-hero .twd-btn-primary:focus-visible {
  background: var(--twd-navy);
  color: var(--twd-orange) !important;
  border-color: var(--twd-navy);
}

.twd-home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}

.twd-home-stat {
  padding: 20px;
  border: 1px solid var(--twd-border);
  border-radius: var(--twd-radius-sm);
  background: rgba(255, 255, 255, .78);
}

.twd-home-stat strong {
  display: block;
  color: var(--twd-navy);
  font-size: 34px;
  line-height: 1;
}

.twd-home-stat span {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
}

.twd-home-tech { padding: 34px 0; border-top: 1px solid var(--twd-border); border-bottom: 1px solid var(--twd-border); background: transparent; }
.twd-home-tech__row { display: grid; grid-template-columns: minmax(180px, .26fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.twd-home-tech__label { color: var(--twd-navy); font-weight: 800; line-height: 1.25; }
.twd-home-tech__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.twd-home-tech__brand { min-height: 82px; display: grid; place-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--twd-border); border-radius: var(--twd-radius-sm); background: #fff; box-shadow: 0 12px 28px rgba(3, 6, 51, .05); }
.twd-home-tech__brand img { width: auto; height: 32px; max-width: 112px; object-fit: contain; filter: saturate(1); }
.twd-home-tech__brand span { color: var(--twd-navy); font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; }

.twd-home-intro__layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 54px; align-items: center; }
.twd-home-intro__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.twd-home-intro__media img:first-child { grid-column: 1 / -1; max-height: 420px; }

.twd-home-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.twd-home-proof__item { padding: 20px; border-left: 3px solid var(--twd-orange); background: #f7f8fb; border-radius: var(--twd-radius-sm); }

.twd-home-services { background: transparent; }
.twd-home-section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 34px; }
.twd-home-section-head .twd-copy { max-width: 520px; }
.twd-home-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twd-home-service { position: relative; min-height: 260px; padding: 28px; overflow: hidden; }
.twd-home-service.border-animation { overflow: visible; }
.twd-home-service::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(252, 163, 17, .11), transparent 52%); pointer-events: none; }
.twd-home-service > * { position: relative; }
.twd-home-service__num { color: var(--twd-orange); font-weight: 800; }
.twd-home-service a { display: inline-flex; margin-top: 22px; color: var(--twd-navy); font-weight: 800; text-decoration: none; }

.twd-home-wide-cta { position: relative; overflow: hidden; border-radius: var(--twd-radius); background: linear-gradient(90deg, rgba(3, 6, 51, .92), rgba(3, 6, 51, .64), rgba(3, 6, 51, .14)), url('https://twodots.gr/wp-content/uploads/2026/03/pixel-perfect-designers-discussing-collaboration-twodots.jpg'); background-size: cover; background-position: center right; padding: 86px; min-height: 520px; display: flex; align-items: center; }
.twd-home-wide-cta__content { max-width: 650px; }
.twd-home-wide-cta .twd-btn-primary, .twd-home-support .twd-btn-primary { color: var(--twd-navy) !important; }
.twd-home-support .twd-btn-primary:hover,
.twd-home-support .twd-btn-primary:focus-visible {
  background: var(--twd-navy);
  color: var(--twd-orange) !important;
  border-color: var(--twd-navy);
}

.twd-home-solutions { background: transparent; color: var(--twd-text); }
.twd-home-solutions .twd-h2, .twd-home-solutions .twd-h3 { color: var(--twd-navy); }
.twd-home-solutions .twd-copy { color: var(--twd-text); }
.twd-home-solutions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twd-home-solution { padding: 28px; background: #fff; border: 1px solid var(--twd-border); border-radius: var(--twd-radius-sm); box-shadow: 0 14px 34px rgba(3, 6, 51, .06); }
.twd-home-solution strong { display: block; color: var(--twd-orange); margin-bottom: 10px; }

.twd-home-growth { background: transparent; }
.twd-home-growth__header { max-width: 820px; margin-bottom: 38px; }
.twd-home-growth__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 24px; align-items: stretch; }
.twd-home-growth__feature { position: relative; overflow: hidden; min-height: 620px; border-radius: var(--twd-radius); background: var(--twd-navy); box-shadow: var(--twd-shadow); }
.twd-home-growth__feature img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; opacity: .98; border-radius: var(--twd-radius); }
.twd-home-growth__feature::before { content: ""; display: block !important; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 51, .58) 0%, rgba(3, 6, 51, .38) 46%, rgba(3, 6, 51, .12) 100%), linear-gradient(180deg, rgba(3, 6, 51, .06) 0%, rgba(3, 6, 51, .52) 100%); z-index: 1; pointer-events: none; }

.twd-home-growth__feature-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(3, 6, 51, .28) 0%, rgba(3, 6, 51, .16) 48%, rgba(3, 6, 51, .03) 100%),
    linear-gradient(180deg, rgba(3, 6, 51, .02) 0%, rgba(3, 6, 51, .40) 100%);
}
.twd-home-growth__feature-content { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 4; color: var(--twd-gray); }
.twd-home-growth__feature-content span, .twd-home-growth__card span { color: var(--twd-orange); font-weight: 800; }
.twd-home-growth__feature-content .twd-h3 { color: var(--twd-gray); max-width: 640px; }
.twd-home-growth__feature-content .twd-copy { color: rgba(229, 229, 229, .82); max-width: 650px; }
.twd-home-growth__side { display: grid; gap: 24px; }
.twd-home-growth__card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--twd-border); border-radius: var(--twd-radius); background: #fff; box-shadow: 0 18px 45px rgba(3, 6, 51, .08); }
.twd-home-growth__card img { width: 100%; height: 170px; object-fit: cover; border-radius: var(--twd-radius-sm); }
.twd-home-growth__card h3 { margin: 6px 0 8px; color: var(--twd-navy); line-height: 1.2; }
.twd-home-growth__card p { margin: 0; line-height: 1.62; color: var(--twd-text); }
.twd-home-growth__benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.twd-home-growth__benefits div { padding: 18px; border: 1px solid var(--twd-border); border-radius: var(--twd-radius-sm); background: #fff; }
.twd-home-growth__benefits strong { display: block; margin-bottom: 8px; color: var(--twd-navy); }
.twd-home-growth__benefits span { color: var(--twd-text); line-height: 1.45; }

.twd-home-support { padding: 90px 0 110px; background: transparent; }
.twd-home-support__box { background: transparent; border-radius: 0; padding: 0; min-height: 0; }
.twd-home-support__box .twd-eyebrow { color: var(--twd-orange); }
.twd-home-support__box .twd-h2 { color: var(--twd-navy); max-width: 860px; }
.twd-home-support__box .twd-lead { color: rgba(3, 6, 51, .76); max-width: 800px; }
.twd-home-support__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 900px; }
.twd-home-support__list li { position: relative; padding: 16px 18px 16px 44px; border: 1px solid var(--twd-border); border-radius: var(--twd-radius-sm); background: #fff; color: var(--twd-text); line-height: 1.45; box-shadow: 0 14px 34px rgba(3, 6, 51, .06); }
.twd-home-support__list li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--twd-orange); box-shadow: 0 0 0 5px rgba(252, 163, 17, .14); }
.twd-home-support__note { margin: 18px 0 0; max-width: 650px; color: rgba(3, 6, 51, .68); }

@media (max-width: 1024px) {
  .twd-home-hero__layout, .twd-home-intro__layout, .twd-home-growth__layout { grid-template-columns: 1fr; }
  .twd-home-hero__media { grid-template-columns: 1fr 1fr; }
  .twd-home-hero__image-main { min-height: 360px; }
  .twd-home-services__grid, .twd-home-solutions__grid, .twd-home-support__list, .twd-home-growth__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twd-home-tech__row { grid-template-columns: 1fr; }
  .twd-home-tech__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .twd-home-growth__feature, .twd-home-growth__feature img { min-height: 460px; }
}

@media (max-width: 700px) {
  .twd-home-hero { padding-top: 82px; }
  .twd-home-hero__media, .twd-home-stats, .twd-home-proof, .twd-home-services__grid, .twd-home-solutions__grid, .twd-home-growth__benefits, .twd-home-support__list { grid-template-columns: 1fr; }
  .twd-home-tech__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .twd-home-tech__brand { min-height: 76px; }
  .twd-home-section-head { display: block; }
  .twd-home-intro__media { grid-template-columns: 1fr; }
  .twd-home-wide-cta { padding: 34px 24px; min-height: 0; background-image: linear-gradient(90deg, rgba(3, 6, 51, .94), rgba(3, 6, 51, .80)), url('https://twodots.gr/wp-content/uploads/2026/03/pixel-perfect-designers-discussing-collaboration-twodots.jpg'); background-position: center; }
  .twd-home-growth__feature, .twd-home-growth__feature img { min-height: 360px; }
  .twd-home-growth__feature-content { left: 22px; right: 22px; bottom: 22px; }
  .twd-home-growth__card { grid-template-columns: 1fr; }
  .twd-home-growth__card img { height: 220px; }
  .twd-home-support__box { padding: 0; min-height: 0; background: transparent; }
  .twd-home-hero__image-main, .twd-home-hero__image-small { min-height: 260px; }
}


/* TWO DOTS mobile overflow guard */
.twd-page.twd-home {
  max-width: 100%;
  overflow-x: clip;
}

.twd-home-hero,
.twd-home-hero__layout,
.twd-home-hero__media,
.twd-home-stats {
  max-width: 100%;
  min-width: 0;
}

.twd-home-hero__layout > *,
.twd-home-hero__media > *,
.twd-home-stats > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .twd-home-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .twd-page.twd-home,
  .twd-home-hero,
  .twd-home-hero__media,
  .twd-home-stats {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .twd-container.twd-home-hero__layout {
    width: min(100% - 56px, 720px);
    max-width: 720px;
    margin-inline: auto;
    overflow-x: clip;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px;
  }

  .twd-home-hero__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .twd-home-hero__media img,
  .twd-home-stats,
  .twd-home-stat {
    max-width: 100%;
  }
}

.twd-home-faq {
  background: transparent;
  padding-block: clamp(64px, 7vw, 112px);
}

.twd-home-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.twd-home-faq__item {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(3, 6, 51, .18);
  border-radius: var(--twd-radius-sm);
  background: #fff;
  box-shadow: 0 18px 44px rgba(3, 6, 51, .08);
}

.twd-home-faq__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: inherit;
  background: var(--twd-orange);
}

.twd-home-faq__item h3 {
  margin: 0 0 12px;
  color: var(--twd-navy);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.28;
}

.twd-home-faq__item p {
  margin: 0;
  color: #303247;
  font-weight: 500;
  line-height: 1.72;
}

@media (max-width: 800px) {
  .twd-home-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}