/* 23 Sep 2026 — hero imagery: real client sites on phones + founder chip.
   Keeps the existing identity (teal #4DD9D5, dark card). Remove this file + the
   markup marked HERO-PROOF in index.html to revert. */
.hero-visual{position:relative;display:block}
.proof{position:relative;height:540px;max-width:540px;margin:0 auto}
.phone{position:absolute;width:210px;height:420px;padding:8px;border-radius:30px;background:#141414;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.phone .screen{position:relative;width:100%;height:100%;border-radius:23px;overflow:hidden;background:#222}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.phone.a{left:0;top:52px;transform:rotate(-7deg);z-index:1}
.phone.b{left:165px;top:0;z-index:2}
.phone.c{left:330px;top:52px;transform:rotate(7deg);z-index:1}
.phone.x2 img{animation:pf2 10s infinite}
.phone.x3 img{animation:pf3 15s infinite}
.phone.x2 img:nth-child(1){animation-delay:-.6s}.phone.x2 img:nth-child(2){animation-delay:4.4s}
.phone.x3 img:nth-child(1){animation-delay:-.6s}.phone.x3 img:nth-child(2){animation-delay:4.4s}.phone.x3 img:nth-child(3){animation-delay:9.4s}
.phone.a img:nth-child(1){animation-delay:-2.2s}.phone.a img:nth-child(2){animation-delay:2.8s}.phone.a img:nth-child(3){animation-delay:7.8s}
.phone.c img:nth-child(1){animation-delay:-3.8s}.phone.c img:nth-child(2){animation-delay:1.2s}.phone.c img:nth-child(3){animation-delay:6.2s}
@keyframes pf2{0%{opacity:0}6%{opacity:1}50%{opacity:1}56%{opacity:0}100%{opacity:0}}
@keyframes pf3{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
.proof .hero-card{position:absolute;right:-70px;bottom:-8px;width:330px;z-index:3;transform:scale(.62);transform-origin:bottom right}
.proof-cap{text-align:center;margin:1.6rem 0 0;font-size:.85rem;color:#666}
.proof-cap a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hero-founder{display:flex;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.hero-founder img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #4DD9D5}
.hero-founder p{margin:0;font-size:.95rem;line-height:1.4;color:#555}
.hero-founder strong{color:#111}
@media (max-width:1100px){.proof{transform:scale(.88);transform-origin:top center}}
@media (max-width:768px){
  .hero-visual{display:block}
  .proof{height:300px;max-width:292px;transform:none}
  .phone{width:112px;height:224px;padding:5px;border-radius:18px}.phone .screen{border-radius:14px}
  .phone.a{left:4px;top:26px}.phone.b{left:90px}.phone.c{left:176px;top:26px}
  .proof-cap{margin-top:1rem}
  .proof .hero-card{display:none}
}
@media (prefers-reduced-motion:reduce){.phone img{animation:none!important}.phone img:first-child{opacity:1}}

/* 23 Sep pm: pills + client cards */
.hero-pills{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0}
.hero-pills li{font-size:.85rem;font-weight:600;color:#0F766E;background:#E0FAF9;border:1px solid #bdeeed;border-radius:999px;padding:.35rem .8rem}
.clients-bar .container{flex-direction:column;align-items:stretch;gap:1rem}
.clients-bar .trust-label{text-align:center}
.client-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}
.client-card{display:flex;flex-direction:column;justify-content:space-between;min-height:108px;padding:.9rem .8rem .7rem;border-radius:12px;
  background:var(--bg);border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:transform .2s,box-shadow .2s}
.client-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(77,217,213,.55)}
.cc-mark{display:flex;align-items:center;justify-content:center;flex:1}
.cc-mark img{max-height:52px;max-width:100%;width:auto;height:auto}
.cc-desc{display:block;text-align:center;font-size:.72rem;margin-top:.5rem;color:#8a8a8a}
.wm{font-weight:800;font-size:1.05rem;line-height:1.1;text-align:center}
.wm-z{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:1.2rem}
.wm-p{font-family:Georgia,serif;font-weight:600}
.wm-j{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem}
.wm-s{font-family:Georgia,serif;font-weight:400;letter-spacing:.28em;text-transform:uppercase;font-size:.8rem}
.wm-t{font-family:Impact,'Arial Narrow',sans-serif;font-size:1.3rem}
.wm-o{font-family:Georgia,serif;font-style:italic}
@media (max-width:900px){.client-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.client-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 23 Sep pm: Tk photos */
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1rem}
.tk-badge{margin:0;text-align:center;flex:0 0 auto}
.tk-badge img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #4DD9D5,0 18px 40px -18px rgba(0,0,0,.45);transform:rotate(-3deg)}
.tk-badge figcaption{margin-top:.6rem;font-weight:700;font-size:.9rem;color:#0F766E}
.lane-teaser{background:#0d0f10;padding:0}
.lane-teaser-inner{position:relative;display:block;max-width:1200px;margin:0 auto;overflow:hidden;text-decoration:none}
.lane-teaser-inner img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:50% 40%;filter:saturate(1.05)}
.lane-teaser-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,15,16,.92) 0%,rgba(13,15,16,.55) 45%,rgba(13,15,16,0) 75%)}
.lt-text{position:absolute;left:clamp(1rem,5vw,4rem);top:50%;transform:translateY(-50%);z-index:1;max-width:30rem}
.lt-eyebrow{display:block;color:#4DD9D5;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;margin-bottom:.8rem}
.lt-title{display:block;color:#fff;font-weight:800;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.1}
.lt-go{display:inline-block;margin-top:1.2rem;color:#111;background:#4DD9D5;font-weight:700;padding:.7rem 1.2rem;border-radius:8px}
.lane-teaser-inner:hover .lt-go{background:#fff}
.cta-photo{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;object-position:50% 25%;border-radius:12px;margin-bottom:1.2rem}
@media (max-width:768px){
  .how-head{flex-direction:column-reverse;align-items:flex-start}
  .tk-badge img{width:110px;height:110px}
  .cta-visual{display:block}
  .lane-teaser-inner img{min-height:360px}
  .lane-teaser-inner::after{background:linear-gradient(0deg,rgba(13,15,16,.95) 0%,rgba(13,15,16,.4) 60%,rgba(13,15,16,.1) 100%)}
  .lt-text{top:auto;bottom:1.5rem;transform:none}
}

/* 23 Sep pm: client cards as a moving strip (static grid when motion is reduced) */
.client-cards{display:block;overflow:hidden;min-width:0;width:100%;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cc-track{display:flex;gap:.75rem;width:max-content;animation:cc-move 45s linear infinite}
.cc-copy{display:flex;gap:.75rem}
.cc-track .client-card{flex:0 0 190px}
.client-cards:hover .cc-track,.client-cards:focus-within .cc-track{animation-play-state:paused}
@keyframes cc-move{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .375rem))}}
@media (max-width:480px){.cc-track .client-card{flex-basis:150px}.cc-track{animation-duration:35s}}
@media (prefers-reduced-motion:reduce){
  .client-cards{-webkit-mask-image:none;mask-image:none}
  .cc-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .cc-copy{display:none}
}

/* 23 Sep: phones sit lower, level with the headline (Director) */
@media (min-width:1101px){.proof{margin-top:56px}}
@media (min-width:768px) and (max-width:1100px){.proof{margin-top:32px}}