/* Intro page (/intro/, /de/intro/) — the short problem → solution pitch.
   Builds on landing.css; only what the pitch adds lives here. */

.hero.intro { min-height: 88dvh; }
.hero.intro h1 { font-size: clamp(2.8rem, 8.4vw, 6.4rem); }
.hero.intro .hero-sub { max-width: 600px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }

/* ── globe: dark band right under the hero ────────────────── */
.globe {
  position: relative;
  height: min(92dvh, 860px);
  min-height: 560px;
  padding: 0;
  background: #010409;
  color: #e9fbff;
  overflow: hidden;
  isolation: isolate;
}
.globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  opacity: 0;
  transition: opacity 1.2s var(--ease-spring);
}
.globe.globe-ready canvas { opacity: 1; }
.globe canvas:active { cursor: grabbing; }
@media (pointer: coarse) { .globe canvas { cursor: auto; } }
/* soft fades so the band melts into the page instead of cutting it */
.globe::before, .globe::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
}
.globe::before { top: 0; height: 18%; background: linear-gradient(#010409, rgba(1, 4, 9, 0)); }
.globe::after { bottom: 0; height: 22%; background: linear-gradient(rgba(1, 4, 9, 0), #010409 85%); }

/* wide: copy on the left, vertically centred; the globe sits right (globe.js) */
.globe-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.globe-copy > div { max-width: 520px; }
.globe-copy .kicker {
  background: none;
  color: #00e5ff;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.globe-copy h2 { color: #fff; }
.globe-copy p { margin-top: 16px; color: rgba(233, 251, 255, 0.72); }

/* labels pinned to cities by globe.js */
.glabel {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-spring);
  will-change: transform;
}
.glabel.on { opacity: 1; }
.glabel span {
  position: absolute;
  bottom: 14px;
  left: 0;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 123, 28, 0.55);
  background: rgba(6, 10, 18, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 123, 28, 0.22);
}
.glabel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 1px;
  height: 9px;
  background: rgba(255, 123, 28, 0.8);
}
.glabel small { font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-left: 6px; font-size: 12px; }

.globe-foot {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 34px;
  font-size: 14px;
  color: rgba(233, 251, 255, 0.6);
  pointer-events: none;
}
.globe-foot b { color: #fff; font-weight: 600; }
.globe-legend { display: inline-flex; gap: 18px; margin-top: 8px; font-size: 12.5px; }
.globe-legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.globe-legend .o { background: #ff7b1c; box-shadow: 0 0 8px #ff7b1c; }
.globe-legend .c { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }

/* ── problem → solution rows ──────────────────────────────── */
.ps { margin-top: 56px; display: grid; gap: 18px; }
.ps-head, .ps-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
}
.ps-head {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 30px;
}
.ps-head span:last-child { grid-column: 3; padding-left: 30px; color: var(--ink); }
.ps-card { border-radius: 22px; padding: 26px 30px; }
.ps-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.ps-card p { font-size: 15.5px; }
.ps-card.before { background: var(--bg-soft); color: var(--ink-2); border: 1px dashed var(--line-strong); }
.ps-card.before h3 { color: var(--ink); }
.ps-card.after { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.ps-card.after p { color: var(--ink-2); }
.ps-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7b1c;
}

/* three steps, one line each */
.oneline {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: s;
}
.oneline li {
  list-style: none;
  counter-increment: s;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  font-size: 17px;
  font-weight: 600;
}
.oneline li::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.oneline li span { display: block; font-weight: 400; font-size: 15.5px; color: var(--ink-2); margin-top: 4px; }

@media (max-width: 760px) {
  .ps-head { display: none; }
  .ps-row { grid-template-columns: 1fr; }
  .ps-arrow { height: 34px; transform: rotate(90deg); }
  .oneline { grid-template-columns: 1fr; }
  .globe { height: auto; min-height: 780px; }
  .glabel span { font-size: 12px; padding: 5px 10px; }
  .glabel small { display: none; }
}

/* narrow (same breakpoint as globe.js: width < 1.1 × height): copy on top */
@media (max-aspect-ratio: 11/10) {
  .globe-copy { height: auto; padding-top: 72px; text-align: center; }
  .globe-copy > div { max-width: 560px; margin: 0 auto; }
  .globe-foot { text-align: center; }
  .globe::before { height: 46%; background: linear-gradient(#010409 30%, rgba(1, 4, 9, 0)); }
}

/* ── contact form (contact-form.js) inside the contact banner ── */
.cform {
  max-width: 640px;
  margin: 32px auto 0;
  display: grid;
  gap: 14px;
  text-align: left;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.cform label input, .cform label textarea { display: block; margin-top: 6px; }
.cform label small { font-weight: 500; color: var(--ink-3); }
.cform input, .cform textarea {
  font: inherit;
  font-size: 16px; /* no zoom-in on iOS */
  font-weight: 400;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
}
.cform textarea { resize: vertical; min-height: 110px; }
.cform input:focus, .cform textarea:focus { outline: 2px solid #ff7b1c; outline-offset: 1px; border-color: transparent; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-check:empty { display: none; }
.cf-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cf-note { font-size: 13px; color: var(--ink-3); }
.cf-note a, .cf-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cf-status { font-size: 15px; font-weight: 600; min-height: 1.4em; }
.cf-status.err { color: #c2410c; }
.cf-status.ok { color: #2c8a55; font-size: 17px; }
.cform.cf-done > :not(.cf-status) { display: none; }
.cf-alt { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 560px) {
  .cf-row { grid-template-columns: 1fr; }
}