/* ===== WaTo — homepage-only styles (home.css) =====
   Loaded only on index.html, alongside the shared styles.css.
   Inner/service-page styles live in pages.css.

   Modern CSS: nesting, logical properties, :is(), fluid units. */

/* ---------- Hero (light, grid texture) ---------- */
.hero {
  position: relative; overflow: hidden; padding-block-start: 1.5em;
  background:
    radial-gradient(51.25rem 28.75rem at 86% -10%, rgba(55,189,242,.30), transparent 60%),
    radial-gradient(42.5rem 30rem at -6% 112%, rgba(55,189,242,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ecf6fe 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.625rem), 0 100%);

  &::before { /* diamond lattice texture */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(45deg, rgba(55,189,242,.16) 0 1px, transparent 1px 1.6875rem),
      repeating-linear-gradient(-45deg, rgba(55,189,242,.16) 0 1px, transparent 1px 1.6875rem);
    mask-image: linear-gradient(170deg, rgba(0,0,0,.55), transparent 80%);
  }
  &::after { /* soft cyan blob behind photo */
    content: ""; position: absolute; right: -4%; top: 4%; width: 35rem; height: 35rem; border-radius: 999px;
    background: radial-gradient(circle, rgba(55,189,242,.22), transparent 64%); filter: blur(0.5rem); pointer-events: none;
  }

  & h1 { color: #050505; }
  & h1 span { display: block; color: var(--cyan-text); }
  & .lead { font-size: 1.05rem; color: #2b3440; max-width: 50ch; margin-block-start: 0.625rem; }
}
.hero-inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16.25rem, .8fr);
  gap: 2.5rem; align-items: start; padding-block: 0.75rem 1.375rem;
}

/* rotating tagline banner (visual showpiece — not the H1) */
.hero-head { margin: 0 0 .25em; font-weight: 800; }
.hero-rotator {
  display: block; position: relative; min-height: 3.3em;
  font-family: var(--display); font-size: clamp(1.55rem, 3.1vw, 2.3rem);
  line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: #050505;

  & .rot-line {
    position: absolute; left: 0; right: 0; top: 0; margin: 0; opacity: 0;
    transform: translateY(0.5rem); transition: opacity .55s ease, transform .55s ease;
    pointer-events: none; color: #050505;

    &.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  }
}
/* static keyword H1 — the real headline for people & Google */
.hero-h1 {
  font-family: var(--head); font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight: 800;
  text-transform: none; letter-spacing: -.01em; line-height: 1.25; color: var(--ink);
  margin: 0.625rem 0 0; max-width: 26ch;
}
.rot-dots {
  display: flex; gap: 0.5625rem; margin-block-start: 0.375rem;

  & button {
    width: 0.6875rem; height: 0.6875rem; padding: 0; border-radius: 999px; border: 0;
    background: rgba(18,23,42,.22); cursor: pointer; transition: background .2s, transform .2s;

    &:hover { background: rgba(18,23,42,.4); }
    &.on { background: var(--cyan); transform: scale(1.15); }
  }
}
@media (max-width: 980px) { .hero-rotator { min-height: 4.8em; } }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-block-start: 1rem; }
.hero-pills {
  display: flex; flex-wrap: wrap; gap: 0.5625rem; margin-block-start: 0.875rem;

  & :is(a, span) {
    font-family: var(--head); font-size: .78rem; font-weight: 600; color: var(--cyan-text);
    background: rgba(55,189,242,.12); padding: 0.4375rem 0.9375rem; border-radius: 999px;
    text-decoration: none; transition: background .2s, color .2s;
  }
  & a:hover { background: var(--cyan); color: #fff; }
}
.hero-call { display: none !important; }

/* hero photo on cyan circle */
.hero-photo {
  position: relative; display: grid; place-items: center;

  & .ring {
    position: absolute; width: min(110%, 23.25rem); aspect-ratio: 1;
    border: 2px dashed rgba(18,152,207,.45); border-radius: 999px;
    animation: spin 44s linear infinite; pointer-events: none;
  }
  & .dots {
    position: absolute; right: 2%; bottom: 6%; width: 7.5rem; height: 7.5rem;
    z-index: 2; pointer-events: none;
    background-image: radial-gradient(rgba(18,152,207,.55) 2px, transparent 2px);
    background-size: 1rem 1rem;
  }
  & .disc {
    position: relative; z-index: 1; width: min(100%, 20.75rem); aspect-ratio: 1; border-radius: 999px;
    background: var(--cyan); display: grid; place-items: end center; overflow: hidden;
    box-shadow: 1rem 1rem 0 0 rgba(55,189,242,.28), var(--shadow-lg, var(--shadow));

    & img { width: 92%; height: auto; align-self: end; }
  }
  & .tagchip {
    position: absolute; z-index: 3; bottom: 1.125rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; font-family: var(--head); font-weight: 700; font-size: .8rem;
    letter-spacing: .04em; text-transform: uppercase; padding: 0.5rem 1.125rem; border-radius: 999px; white-space: nowrap;
  }
}

/* ---------- Brand logo band ---------- */
.logo-band {
  padding: 0; margin-block-start: -3rem; position: relative; z-index: 4;

  & .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.375rem; }

  & :is(a, .cell) {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 1.875rem 1.625rem; text-align: center;
    transition: transform .18s, box-shadow .18s, border-color .18s; display: block;
  }
  & a:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(55,189,242,.55); }
  & img { height: 4.875rem; width: auto; margin: 0 auto 0.875rem; object-fit: contain; }
  & p { margin: 0; color: var(--muted); font-size: .95rem; }
}

/* ---------- Hero motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }
.hero-inner > div { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > .hero-photo { animation-delay: .12s; }
.logo-band a { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.logo-band a:nth-child(2) { animation-delay: .08s; }
.logo-band a:nth-child(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  :is(.hero-inner > div, .logo-band a) { animation: none; }
  .hero-photo .ring { animation: none; }
}

/* ---------- How it works (steps) ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.375rem; position: relative;
}
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.875rem 1.625rem; box-shadow: var(--shadow-sm); position: relative; z-index: 1;

  & .step-no {
    font-family: var(--head); display: inline-grid; place-items: center;
    width: 2.875rem; height: 2.875rem; border-radius: 999px;
    background: var(--ink); color: #fff; font-weight: 800; margin-block-end: 1rem;
  }
  & h3 { text-transform: uppercase; font-size: 1.1rem; }
  & p { color: var(--muted); font-size: .95rem; margin: 0; }
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Pain-point cards ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.375rem; }
.pain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem 1.625rem; box-shadow: var(--shadow-sm); border-left: 5px solid var(--cyan);

  & h3 { font-size: 1.08rem; text-transform: uppercase; letter-spacing: -.01em; }
  & p { color: var(--muted); font-size: .96rem; margin: 0; }
}
.pain-line {
  text-align: center; margin: 2.25rem auto 0; max-width: 60ch;
  font-family: var(--head); font-weight: 700; font-size: 1.25rem; color: var(--ink); line-height: 1.25;

  & span { color: var(--cyan-text); }
}
@media (max-width: 980px) { .pain-grid { grid-template-columns: 1fr; } }
.char-thinking { width: 7.5rem; height: auto; margin: 0 auto 0.5rem; display: block; filter: drop-shadow(0 0.625rem 1.125rem rgba(17,24,39,.12)); }

/* ---------- About / WaTo character ---------- */
.about {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 3rem; align-items: center;
}
.about-art {
  position: relative; display: grid; place-items: center;

  &::before { content: ""; position: absolute; width: min(90%, 26.25rem); aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, rgba(55,189,242,.20), transparent 66%); }
  & img { position: relative; width: 100%; max-width: 28.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
}
.about-copy h2 span { color: var(--cyan-text); }
.checklist {
  list-style: none; padding: 0; margin: 0 0 1.5rem;

  & li { position: relative; padding-inline-start: 1.875rem; margin-block-end: .6em; }
  & li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(55,189,242,.18); }
  & li::after { content: "✓"; position: absolute; left: 3px; top: 0; color: var(--cyan-text); font-weight: 800; }
}
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: 1.625rem; }
  .about-art { order: -1; }
  .about-art img { max-width: 18.75rem; }
}

/* ---------- Stats ---------- */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 4rem; align-items: center;

  & .stat { text-align: center; }
  & .stat b { font-family: var(--head); display: block; font-size: 2.4rem; color: var(--ink); line-height: 1; }
  & .stat span { font-size: .9rem; color: var(--muted); }
}

/* ---------- Intro / promise / triage ---------- */
.promobar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem 1.875rem; margin: 0 0 1.75rem;

  & span {
    display: inline-flex; align-items: center; gap: 0.5625rem;
    font-family: var(--head); font-weight: 600; font-size: .92rem; color: var(--ink);

    &::before {
      content: "✓"; display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
      border-radius: 999px; background: rgba(55,189,242,.16); color: var(--cyan-text); font-weight: 800; font-size: .78rem;
    }
  }
}
.triage {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin-block-start: 1.75rem;
}
.triage-label { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--muted); }
.triage-btn {
  font-family: var(--head); font-weight: 700; font-size: .9rem; padding: 0.6875rem 1.25rem;
  border-radius: 999px; border: 2px solid var(--line); color: var(--ink);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;

  &:hover { border-color: var(--blue); background: var(--blue); color: #fff; transform: translateY(-2px); }
}

/* ---------- Tech partner badges ---------- */
.techbar { text-align: center; }
.techbar .tlist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  margin-block-start: 0.625rem; position: relative; z-index: 1;

  & span {
    font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--body);
    background: #fff; border: 1px solid var(--line); padding: 0.5625rem 1rem;
    border-radius: 999px; box-shadow: var(--shadow-sm);
  }
}

/* ---------- Whosts hosting band ---------- */
.hostband {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.75rem; align-items: center;
}
.hostband-art {
  position: relative; display: grid; place-items: center;

  &::before { content: ""; position: absolute; width: min(80%, 18.75rem); aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, rgba(55,189,242,.18), transparent 66%); }
  & img { position: relative; width: 100%; max-width: 21.25rem; }
}
.hostband-text h2 span { color: var(--cyan-text); }
@media (max-width: 980px) {
  .hostband { grid-template-columns: 1fr; gap: 1.625rem; }
  .hostband-art { order: -1; }
  .hostband-art img { max-width: 16.25rem; }
}

/* ---------- How-it-works timeline connector ---------- */
@media (min-width: 761px) {
  .steps::before {
    content: ""; position: absolute; top: 3.25rem; left: 14%; right: 14%; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--cyan) 0 0.5625rem, transparent 0.5625rem 1.125rem);
  }
}

/* ---------- Homepage responsive (must live here so it beats the base hero rules above) ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { order: 2; margin-block-start: 0.5rem; }
  .hero-photo .disc { width: min(72%, 20rem); }
  .logo-band .grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero-photo { display: none; }                 /* hide John's photo on phones — lead with the phone number */
  .hero-call { display: inline-flex !important; }
  .hero-inner { padding-block-start: 1.375rem; }
}

/* ---------- Viewport-fill hero + logo-band peek (large desktops) ----------
   Hero stretches to fill the screen so the logo-band cards sit with
   just their logos peeking above the fold. The cyan blob behind John's
   photo moves with the content because it's anchored to the grid.
   Kicks in only when the screen is wide AND tall enough to look right. */
@media (min-width: 1100px) and (min-height: 680px) {
  .hero {
    min-height: 84dvh;                  /* blue extends to just under card tops — dvh for mobile accuracy */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;                    /* flexbox handles vertical centering now */
  }
  .hero > .container {
    padding-block-end: 5rem;           /* offset so content centres above the logo overlap zone */
  }
  /* cyan blob tracks the vertically-centred content instead of fixed top */
  .hero::after {
    top: 50%;
    transform: translateY(-55%);
  }
  .logo-band {
    margin-block-start: -10.5vh;       /* vh-based overlap scales with screen height */
  }
}