/* Home hero (hero-only redesign). Part A: the GEO & KI Check card component
   (verbatim from the approved design — provides the glowing background). */
#geo-domain-analysis-v7 {
    --geo-base: rgba(35, 23, 61, 0.6);
    --geo-panel: #0f0d25;
    --geo-border: rgba(255, 255, 255, 0.11);
    --geo-border-soft: rgba(255, 255, 255, 0.065);
    --geo-text: #ffffff;
    --geo-muted: rgba(255, 255, 255, 0.52);
    --geo-pink: #e54a92;
    --geo-purple: #6d52e7;
    --geo-green: #6bef69;

    width: 100%;
    min-width: 0;
    height: auto;
    color: var(--geo-text);
    font-family: "Urbanist", sans-serif;
    container-type: inline-size;
  }

  #geo-domain-analysis-v7,
  #geo-domain-analysis-v7 * {
    box-sizing: border-box;
  }

  #geo-domain-analysis-v7 .geo-v7-shell {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--geo-border);
    border-radius: 10px;
    background:
      radial-gradient(
        circle at 10% 4%,
        rgba(104, 18, 190, 0.26) 0%,
        rgba(74, 20, 94, 0.18) 24%,
        transparent 50%
      ),
      radial-gradient(
        circle at 96% 92%,
        rgba(104, 18, 190, 0.18) 0%,
        rgba(42, 7, 62, 0.28) 28%,
        transparent 56%
      ),
      var(--geo-base);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  #geo-domain-analysis-v7 .geo-v7-shell::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -170px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(104, 18, 190, 0.18);
    filter: blur(95px);
    pointer-events: none;
  }

  #geo-domain-analysis-v7 .geo-v7-shell::after {
    content: "";
    position: absolute;
    right: -190px;
    bottom: -210px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: rgba(74, 20, 94, 0.22);
    filter: blur(110px);
    pointer-events: none;
  }

  #geo-domain-analysis-v7 .geo-v7-topbar,
  #geo-domain-analysis-v7 .geo-v7-content {
    position: relative;
    z-index: 1;
  }

  #geo-domain-analysis-v7 .geo-v7-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--geo-border-soft);
    background: rgba(35, 23, 61, 0.48);
  }

  #geo-domain-analysis-v7 .geo-v7-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #geo-domain-analysis-v7 .geo-v7-dots {
    display: flex;
    gap: 6px;
  }

  #geo-domain-analysis-v7 .geo-v7-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
  }

  #geo-domain-analysis-v7 .geo-v7-dot:first-child {
    background: var(--geo-pink);
  }

  #geo-domain-analysis-v7 .geo-v7-dot:last-child {
    background: var(--geo-purple);
  }

  #geo-domain-analysis-v7 .geo-v7-name {
    font-size: 13px;
    font-weight: 650;
  }

  #geo-domain-analysis-v7 .geo-v7-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--geo-muted);
    font-size: 10px;
  }

  #geo-domain-analysis-v7 .geo-v7-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--geo-green);
    box-shadow: 0 0 12px rgba(107, 239, 105, 0.65);
    animation: geoV7Live 2.4s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-content {
    display: grid;
    gap: 16px;
    padding: 22px;
  }

  #geo-domain-analysis-v7 .geo-v7-domain,
  #geo-domain-analysis-v7 .geo-v7-scan {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    background: rgba(15, 13, 37, 0.9);
    box-shadow: none;
  }

  #geo-domain-analysis-v7 .geo-v7-label {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-bottom: 13px;
    padding: 6px 10px;
    border: 1px solid rgba(229, 74, 146, 0.28);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(229, 74, 146, 0.09);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  #geo-domain-analysis-v7 .geo-v7-domain h3,
  #geo-domain-analysis-v7 .geo-v7-scan h3 {
    margin: 0;
    font-family: "Urbanist", sans-serif;
    font-size: clamp(20px, 3.4cqw, 28px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.025em;
  }

  #geo-domain-analysis-v7 .geo-v7-domain p {
    max-width: 560px;
    margin: 9px 0 18px;
    color: var(--geo-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
  }

  #geo-domain-analysis-v7 .geo-v7-domain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  #geo-domain-analysis-v7 .geo-v7-input {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(109, 82, 231, 0.28);
    border-radius: 10px;
    background:
      linear-gradient(
        90deg,
        rgba(229, 74, 146, 0.07),
        rgba(109, 82, 231, 0.1)
      ),
      rgba(35, 23, 61, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 8px 24px rgba(0, 0, 0, 0.1);
  }

  #geo-domain-analysis-v7 .geo-v7-search {
    flex: 0 0 auto;
    margin-right: 9px;
    color: rgba(229, 74, 146, 0.82);
    font-size: 12px;
  }

  #geo-domain-analysis-v7 .geo-v7-domain-text {
    display: block;
    width: 0;
    overflow: hidden;
    color: #f3efff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 0 14px rgba(109, 82, 231, 0.2);
    animation: geoV7Typing 10s steps(19, end) infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-domain-text::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--geo-pink);
    animation: geoV7Cursor 0.8s step-end infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 48px;
    padding: 0 17px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(
      90deg,
      var(--geo-pink) 0%,
      var(--geo-purple) 100%
    );
    font-size: 11px;
    font-weight: 650;
    box-shadow: 0 10px 26px rgba(109, 82, 231, 0.2);
    animation: geoV7Button 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
  }

  #geo-domain-analysis-v7 .geo-v7-tag {
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.48);
    background: rgba(35, 23, 61, 0.7);
    font-size: 8px;
  }

  #geo-domain-analysis-v7 .geo-v7-scan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }

  #geo-domain-analysis-v7 .geo-v7-live-badge {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(109, 82, 231, 0.28);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(109, 82, 231, 0.11);
    font-size: 9px;
  }

  #geo-domain-analysis-v7 .geo-v7-progress {
    width: 100%;
    height: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.065);
  }

  #geo-domain-analysis-v7 .geo-v7-progress-fill {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(
      90deg,
      var(--geo-pink) 0%,
      var(--geo-purple) 100%
    );
    box-shadow: 0 0 16px rgba(109, 82, 231, 0.32);
    transform: scaleX(0);
    transform-origin: left center;
    animation: geoV7Progress 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-list {
    display: grid;
    gap: 8px;
  }

  #geo-domain-analysis-v7 .geo-v7-row {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 11px;
    overflow: hidden;
    border: 1px solid var(--geo-border-soft);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.42);
    background: rgba(35, 23, 61, 0.52);
  }

  #geo-domain-analysis-v7 .geo-v7-row::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
      90deg,
      rgba(74, 20, 94, 0.34),
      rgba(104, 18, 190, 0.18)
    );
  }

  #geo-domain-analysis-v7 .geo-v7-check {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
    isolation: isolate;
  }

  #geo-domain-analysis-v7 .geo-v7-check::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(
      90deg,
      var(--geo-pink) 0%,
      var(--geo-purple) 100%
    );
  }

  #geo-domain-analysis-v7 .geo-v7-row-content {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  #geo-domain-analysis-v7 .geo-v7-row-title {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 600;
  }

  #geo-domain-analysis-v7 .geo-v7-row-detail {
    display: block;
    color: rgba(255, 255, 255, 0.3);
    font-size: 8px;
    line-height: 1.45;
  }

  #geo-domain-analysis-v7 .geo-v7-row-status {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.29);
    font-size: 8px;
    font-weight: 600;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(1) {
    animation: geoV7RowOne 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(2) {
    animation: geoV7RowTwo 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(3) {
    animation: geoV7RowThree 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(4) {
    animation: geoV7RowFour 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(1)::before {
    animation: geoV7GlowOne 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(2)::before {
    animation: geoV7GlowTwo 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(3)::before {
    animation: geoV7GlowThree 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(4)::before {
    animation: geoV7GlowFour 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(1) .geo-v7-check {
    animation: geoV7CheckTextOne 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(2) .geo-v7-check {
    animation: geoV7CheckTextTwo 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(3) .geo-v7-check {
    animation: geoV7CheckTextThree 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(4) .geo-v7-check {
    animation: geoV7CheckTextFour 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(1) .geo-v7-check::before {
    animation: geoV7CheckFillOne 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(2) .geo-v7-check::before {
    animation: geoV7CheckFillTwo 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(3) .geo-v7-check::before {
    animation: geoV7CheckFillThree 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(4) .geo-v7-check::before {
    animation: geoV7CheckFillFour 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(1) .geo-v7-row-status {
    animation: geoV7StatusOne 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(2) .geo-v7-row-status {
    animation: geoV7StatusTwo 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(3) .geo-v7-row-status {
    animation: geoV7StatusThree 10s ease-in-out infinite;
  }

  #geo-domain-analysis-v7 .geo-v7-row:nth-child(4) .geo-v7-row-status {
    animation: geoV7StatusFour 10s ease-in-out infinite;
  }

  @keyframes geoV7Typing {
    0%,
    7% {
      width: 0;
    }

    23%,
    92% {
      width: 19ch;
    }

    100% {
      width: 0;
    }
  }

  @keyframes geoV7Cursor {
    50% {
      opacity: 0;
    }
  }

  @keyframes geoV7Button {
    0%,
    21%,
    100% {
      transform: scale(1);
    }

    26% {
      transform: scale(1.018);
      box-shadow:
        0 13px 32px rgba(229, 74, 146, 0.24),
        0 0 18px rgba(109, 82, 231, 0.18);
    }

    32% {
      transform: scale(1);
    }
  }

  @keyframes geoV7Progress {
    0%,
    28% {
      transform: scaleX(0);
    }

    82%,
    94% {
      transform: scaleX(1);
    }

    100% {
      transform: scaleX(0);
    }
  }

  @keyframes geoV7Live {
    0%,
    100% {
      opacity: 0.45;
      transform: scale(0.86);
    }

    50% {
      opacity: 1;
      transform: scale(1.15);
    }
  }

  @keyframes geoV7RowOne {
    0%,
    28%,
    100% {
      color: rgba(255, 255, 255, 0.42);
      border-color: var(--geo-border-soft);
    }

    35%,
    94% {
      color: rgba(255, 255, 255, 0.94);
      border-color: rgba(109, 82, 231, 0.26);
    }
  }

  @keyframes geoV7RowTwo {
    0%,
    41%,
    100% {
      color: rgba(255, 255, 255, 0.42);
      border-color: var(--geo-border-soft);
    }

    48%,
    94% {
      color: rgba(255, 255, 255, 0.94);
      border-color: rgba(109, 82, 231, 0.26);
    }
  }

  @keyframes geoV7RowThree {
    0%,
    54%,
    100% {
      color: rgba(255, 255, 255, 0.42);
      border-color: var(--geo-border-soft);
    }

    61%,
    94% {
      color: rgba(255, 255, 255, 0.94);
      border-color: rgba(109, 82, 231, 0.26);
    }
  }

  @keyframes geoV7RowFour {
    0%,
    67%,
    100% {
      color: rgba(255, 255, 255, 0.42);
      border-color: var(--geo-border-soft);
    }

    74%,
    94% {
      color: rgba(255, 255, 255, 0.94);
      border-color: rgba(109, 82, 231, 0.26);
    }
  }

  @keyframes geoV7GlowOne {
    0%,
    28%,
    100% {
      opacity: 0;
    }

    35%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7GlowTwo {
    0%,
    41%,
    100% {
      opacity: 0;
    }

    48%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7GlowThree {
    0%,
    54%,
    100% {
      opacity: 0;
    }

    61%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7GlowFour {
    0%,
    67%,
    100% {
      opacity: 0;
    }

    74%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7CheckTextOne {
    0%,
    28%,
    100% {
      color: transparent;
      border-color: rgba(255, 255, 255, 0.1);
    }

    35%,
    94% {
      color: #ffffff;
      border-color: transparent;
    }
  }

  @keyframes geoV7CheckTextTwo {
    0%,
    41%,
    100% {
      color: transparent;
      border-color: rgba(255, 255, 255, 0.1);
    }

    48%,
    94% {
      color: #ffffff;
      border-color: transparent;
    }
  }

  @keyframes geoV7CheckTextThree {
    0%,
    54%,
    100% {
      color: transparent;
      border-color: rgba(255, 255, 255, 0.1);
    }

    61%,
    94% {
      color: #ffffff;
      border-color: transparent;
    }
  }

  @keyframes geoV7CheckTextFour {
    0%,
    67%,
    100% {
      color: transparent;
      border-color: rgba(255, 255, 255, 0.1);
    }

    74%,
    94% {
      color: #ffffff;
      border-color: transparent;
    }
  }

  @keyframes geoV7CheckFillOne {
    0%,
    28%,
    100% {
      opacity: 0;
    }

    35%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7CheckFillTwo {
    0%,
    41%,
    100% {
      opacity: 0;
    }

    48%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7CheckFillThree {
    0%,
    54%,
    100% {
      opacity: 0;
    }

    61%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7CheckFillFour {
    0%,
    67%,
    100% {
      opacity: 0;
    }

    74%,
    94% {
      opacity: 1;
    }
  }

  @keyframes geoV7StatusOne {
    0%,
    28%,
    100% {
      color: rgba(255, 255, 255, 0.29);
    }

    35%,
    94% {
      color: var(--geo-green);
    }
  }

  @keyframes geoV7StatusTwo {
    0%,
    41%,
    100% {
      color: rgba(255, 255, 255, 0.29);
    }

    48%,
    94% {
      color: var(--geo-green);
    }
  }

  @keyframes geoV7StatusThree {
    0%,
    54%,
    100% {
      color: rgba(255, 255, 255, 0.29);
    }

    61%,
    94% {
      color: var(--geo-green);
    }
  }

  @keyframes geoV7StatusFour {
    0%,
    67%,
    100% {
      color: rgba(255, 255, 255, 0.29);
    }

    74%,
    94% {
      color: var(--geo-green);
    }
  }

  @container (max-width: 520px) {
    #geo-domain-analysis-v7 .geo-v7-content {
      padding: 13px;
    }

    #geo-domain-analysis-v7 .geo-v7-domain,
    #geo-domain-analysis-v7 .geo-v7-scan {
      padding: 16px;
    }

    #geo-domain-analysis-v7 .geo-v7-domain-row {
      grid-template-columns: 1fr;
    }

    #geo-domain-analysis-v7 .geo-v7-button {
      width: 100%;
    }

    #geo-domain-analysis-v7 .geo-v7-row {
      grid-template-columns: 28px minmax(0, 1fr);
    }

    #geo-domain-analysis-v7 .geo-v7-row-status {
      display: none;
    }

    #geo-domain-analysis-v7 .geo-v7-live-badge {
      display: none;
    }
  }

  @container (max-width: 390px) {
    #geo-domain-analysis-v7 .geo-v7-status span:last-child {
      display: none;
    }

    #geo-domain-analysis-v7 .geo-v7-domain h3,
    #geo-domain-analysis-v7 .geo-v7-scan h3 {
      font-size: 21px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #geo-domain-analysis-v7 *,
    #geo-domain-analysis-v7 *::before,
    #geo-domain-analysis-v7 *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
/* ---------------------------------------------------------------------------
 * Part B: the dark hero SECTION around the card. Scoped to .geo-hero-section so
 * it only restyles the hero — header, footer and the rest of the page are
 * untouched. Uses the self-hosted Urbanist font from home-redesign.css.
 * ------------------------------------------------------------------------- */
.geo-hero-section {
    --gh-pink: #e54a92; --gh-purple: #6d52e7;
    --gh-text: #ffffff; --gh-muted: rgba(255,255,255,0.55);
    position: relative;
    background:
        radial-gradient(circle at 10% 0%, rgba(104,18,190,0.28) 0%, transparent 46%),
        radial-gradient(circle at 96% 8%, rgba(229,74,146,0.16) 0%, transparent 44%),
        #15102b;
    color: var(--gh-text);
    font-family: 'Urbanist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 0 0 3.4rem;
    overflow: hidden;
}
.geo-hero-section * { box-sizing: border-box; }
.geo-hero-inner { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start; }

.gh-ai-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.gh-ai { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-size: .82rem; font-weight: 500; }
/* Force the (differently coloured) AI SVGs to a clean white — brightness(0)
   flattens each logo to black, invert(1) turns it white, independent of the
   SVG's own fills. Matches the white label next to it. */
.gh-ai img { height: 20px; width: 20px; object-fit: contain; filter: brightness(0) invert(1); }

/* H1 typography copied verbatim from the original AD Promotion page
   (measured: 85px Urbanist, weight 600, line-height 95px, letter-spacing
   -0.03rem, #fff). Same responsive steps as the original (70/50/40px). */
.gh-h1 { font-family: "Urbanist", sans-serif; font-size: 5.3125rem; line-height: 5.9375rem;
    font-weight: 600; letter-spacing: -0.03rem; color: #fff; margin: 0 0 1.4rem; }
@media (max-width: 991px) { .gh-h1 { font-size: 4.375rem; line-height: 5rem; } }
@media (max-width: 767px) { .gh-h1 { font-size: 3.125rem; line-height: 3.75rem; } }
@media (max-width: 479px) { .gh-h1 { font-size: 2.5rem; line-height: 2.8rem; } }
.gh-grad { background: linear-gradient(90deg,#6d52e7,#e54a92); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gh-sub { color: rgba(255,255,255,0.66); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.7rem; max-width: 33rem; }
.gh-sub p { margin: 0 0 .9rem; }

.gh-form { max-width: 31rem; }
.gh-input { width: 100%; height: 3.5rem; padding: 0 1.1rem; margin-bottom: .85rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
    color: #fff; font: inherit; font-size: 1rem; }
.gh-input::placeholder { color: rgba(255,255,255,0.42); }
.gh-input:focus { outline: none; border-color: var(--gh-pink); background: rgba(255,255,255,0.07); }
.gh-btn { width: 100%; height: 3.5rem; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(90deg,#6d52e7,#e54a92); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700;
    transition: filter .15s ease, transform .1s ease; }
.gh-btn:hover { filter: brightness(1.08); }
.gh-btn:active { transform: translateY(1px); }
.gh-trust { color: rgba(255,255,255,0.82); font-size: .9rem; font-weight: 700; letter-spacing: .01em; margin: .85rem 0 0; }
.gh-disclaimer { color: rgba(255,255,255,0.4); font-size: .76rem; line-height: 1.5; margin: .8rem 0 0; max-width: 31rem; }
.gh-error { background: rgba(229,74,146,0.12); border: 1px solid var(--gh-pink); color: #ffd9e8; border-radius: 10px; padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem; max-width: 31rem; }

.gh-partners { max-width: 1300px; margin: 3.6rem auto 0; padding: 0 1.6rem; text-align: center; }
.gh-partners__label { color: var(--gh-muted); font-size: 1rem; margin: 0 0 1.6rem; }
.gh-partners__row { display: flex; align-items: center; justify-content: center; gap: 2.6rem 3rem; flex-wrap: wrap; }
.gh-partners__row img { height: 30px; width: auto; opacity: .72; filter: grayscale(1) brightness(0) invert(1); transition: opacity .15s ease; }
.gh-partners__row img:hover { opacity: 1; }

@media (max-width: 1340px) {
    /* Below the 1300px column + gutter, restore side padding so content
       never touches the viewport edge. */
    .geo-hero-inner { padding: 0 1.6rem; }
}

@media (max-width: 900px) {
    .geo-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .geo-hero-section .gh-right { order: 2; }
}

/* Logo bar at the top of the hero — centred. Logo sized to match the original
   AD Promotion page exactly: the wordmark renders at width 105px there
   (.adp-logo / width="105"). The bottom padding sets the ~100px gap from the
   logo's underside to the start of the hero content (align-items:start keeps
   that gap deterministic instead of letting vertical centring stretch it). */
.geo-hero-section .gh-topbar { width: 100%; text-align: center; padding: 1rem 1.6rem 7.375rem; }
.geo-hero-section .gh-logo { display: inline-block; }
.geo-hero-section .gh-logo img { width: 105px; height: auto; display: block; margin: 0 auto; }

/* Button: arrow + centred (matches the "Jetzt GEO-Check starten" CTA). */
.geo-hero-section .gh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.geo-hero-section .gh-btn__arrow { font-size: 1.15em; line-height: 1; transition: transform .15s ease; }
.geo-hero-section .gh-btn:hover .gh-btn__arrow { transform: translateX(3px); }

/* Status palette — exact hex confirmed from the design screenshots.
   Used for "Stärke"/check = green, "Verbessern"/warning = red, and tinted card backgrounds.
   References the page-wide canonical tokens (see the :root block at the end of this
   file) so the hero shares one single colour world with every section below it. */
.geo-hero-section {
    --geo-status-green: var(--geo-green, #6bef69);
    --geo-status-red: var(--geo-red, #e6035b);
    --geo-card-bg: #181228;
    --geo-card-bg-green: rgba(107, 239, 105, 0.08);
    --geo-card-bg-red: rgba(230, 3, 91, 0.08);
}

/* ---------------------------------------------------------------------------
   PAGE-WIDE COLOUR WORLD — single source of truth.

   One consistent palette is applied from the top of the page to the bottom:
   the hero, the explainer cards, the "GEO Preview erklärt" section, the
   brand marquee and the footer all draw their accent colours from these
   canonical tokens. Exact values confirmed from the design screenshots:

     • green  #6bef69  — positive / "Stärke" / checks
     • red    #e6035b  — negative / "Verbessern" + brand red accents
     • purple #6d52e7  — the partner colour of every gradient
     • pink   #e54a92  — the lighter gradient end used on the CTA buttons

   The two gradient families that already exist on the page are kept and
   pinned to these tokens, so they no longer drift apart between sections:
     • CTA buttons:        purple -> pink   (Hero + footer "Jetzt anklopfen")
     • Headlines / bars:   red    -> purple ("colored-text", score bars)
--------------------------------------------------------------------------- */
:root {
    --geo-green: #6bef69;
    --geo-red: #e6035b;
    --geo-purple: #6d52e7;
    --geo-pink: #e54a92;
    /* Shared gradients reused by every section. */
    --geo-grad-cta: linear-gradient(90deg, var(--geo-purple), var(--geo-pink));
    --geo-grad-accent: linear-gradient(107deg, var(--geo-red), var(--geo-purple));
}

/* Pin the vendor headline accent ("Hast du Fragen?", "sichtbar machen", …)
   to the canonical red so the deep-red brand accent is identical everywhere.
   home-hero.css loads last, so this overrides the vendor adp-website.css rule
   without touching that immutable file. */
.colored-text,
.colored-text.logo {
    background-image: var(--geo-grad-accent);
}

/* ---------------------------------------------------------------------------
   PAGE-WIDE CONTENT WIDTH — every section column is 1300px wide, top to
   bottom. Without this the sections drift: hero 1300, tablet explainer
   ~1330 (83.125em), preview-score 1100, and the brand marquee + footer only
   940 (the Webflow .w-container default). Pin them all to one 1300px column
   so the hero, the boxes below it and any later report line up on the same
   left/right edges. home-hero.css loads last, so these win over the vendor
   widths without editing the immutable Webflow CSS. */
.geo-hero-inner,
.kgcp-tablet-explainer .container-video,
.kgcp-preview-explain-inner,
.home-three-partners-section .container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
/* NOTE: the footer (.footer-two-container / .footer-bottom-container) is
   deliberately NOT pinned to 1300px — it keeps its original AD Promotion
   widths (1290 / 1618) so it renders 1:1 like the source footer. */

/* The tablet-explainer container adds its own large horizontal padding, which
   would inset its two boxes to ~1188. Zero it (with a small gutter only when
   the viewport is narrower than the column) so the boxes fill the full 1300px
   like every other section. */
.kgcp-tablet-explainer .container-video {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 1340px) {
    .kgcp-tablet-explainer .container-video { padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* ---------------------------------------------------------------------------
   Hero: single centred entry column (right mock-up hidden).
   The animated dashboard mock-up on the right is hidden and the domain-entry
   column is centred in the viewport, so the page focuses on the input field.
   Scoped to .geo-hero-section; loads last so it wins over the 2-column grid.
   --------------------------------------------------------------------------- */
.geo-hero-section .gh-right { display: none; }
.geo-hero-section .geo-hero-inner { grid-template-columns: 1fr; justify-items: center; }
.geo-hero-section .gh-left {
    max-width: 1300px;
    margin-inline: auto;
    text-align: center;
}
.geo-hero-section .gh-ai-row { justify-content: center; }
/* Description text: wider, airy block (no longer the cramped narrow cap) with a
   comfortable 50–100px side padding so it never runs edge to edge. */
.geo-hero-section .gh-sub {
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: clamp(50px, 5vw, 100px);
}
.geo-hero-section .gh-form,
.geo-hero-section .gh-disclaimer,
.geo-hero-section .gh-error { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   MOBILE PHONES (<= 767px): three requested tweaks for the customer send-out.
   Phone layout only — tablet and desktop stay exactly as they are.
     1. Remove the large empty gap between the logo and the hero content.
     2. Put the search form ABOVE the description text (act first, read later).
     3. Let the text/content use the full width (no big side inset).
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* 1. Tighten the top: the logo bar no longer reserves ~118px below it. */
    .geo-hero-section .gh-topbar { padding-top: .6rem; padding-bottom: 1.4rem; }

    /* 2. Reorder the entry column so the form comes right after the headline,
          before the descriptive paragraphs. */
    .geo-hero-section .gh-left { display: flex; flex-direction: column; }
    .geo-hero-section .gh-ai-row     { order: 1; }
    .geo-hero-section .gh-h1         { order: 2; margin-bottom: 1.1rem; }
    .geo-hero-section .gh-error      { order: 3; }
    .geo-hero-section .gh-form       { order: 4; margin-bottom: .2rem; }
    .geo-hero-section .gh-trust      { order: 5; }
    .geo-hero-section .gh-disclaimer { order: 6; }
    .geo-hero-section .gh-sub        { order: 7; margin: 1.6rem 0 0; }

    /* 3. Full-width content: near-edge side padding and no inner width caps,
          so the text reaches out instead of sitting in a narrow column. */
    .geo-hero-inner { padding-left: 1rem; padding-right: 1rem; }
    .geo-hero-section .gh-sub {
        max-width: none;
        padding-inline: 0;
    }
    .geo-hero-section .gh-left,
    .geo-hero-section .gh-form,
    .geo-hero-section .gh-disclaimer,
    .geo-hero-section .gh-error { max-width: none; width: 100%; }
    .gh-partners { padding-left: 1rem; padding-right: 1rem; }
}