/* Home page: hero phones, bigger sample cards, before/after slider, scroll animations. Loaded after /styles.css. */

/* Hero with sample-site phones */
.hero2 { padding: calc(24px + env(safe-area-inset-top)) 0 8px; overflow: hidden; }
.hero2-grid { display: grid; gap: 18px; }
.hero2 h1 { font-size: clamp(30px, 8.4vw, 64px); margin-top: 16px; }
.hero2 .lead { font-size: 17px; margin-top: 12px; }
.hero2 .hero-sub { margin-top: 12px; }
.hero2 .hero-actions { margin-top: 18px; }
.stage { position: relative; height: 470px; display: flex; justify-content: center; align-items: center; }
.stage::before { content: ""; position: absolute; inset: 40px 6% 30px; border-radius: 40px; background: radial-gradient(circle at 50% 40%, rgba(228, 87, 46, .22), transparent 65%); }
.ph { position: absolute; display: block; width: 200px; height: 412px; padding: 7px; border-radius: 34px; background: var(--ink); box-shadow: 0 30px 50px -18px rgba(30, 27, 24, .45); text-decoration: none; transition: transform .4s ease; }
.ph::before { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 58px; height: 16px; border-radius: 10px; background: #000; z-index: 2; }
.ph-screen { display: block; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; }
.ph-screen img { width: 100%; height: auto; }
.ph-main { z-index: 2; width: 216px; height: 444px; animation: ph-float 6s ease-in-out infinite; }
.ph-main .ph-screen img { animation: ph-scroll 22s ease-in-out 1.2s infinite alternate; }
.ph-side { width: 176px; height: 362px; opacity: .96; }
.ph-l { transform: translateX(-112px) rotate(-8deg); animation: ph-float-l 7s ease-in-out infinite; }
.ph-r { transform: translateX(112px) rotate(8deg); animation: ph-float-r 7.5s ease-in-out infinite; }
.stage-note { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(30, 27, 24, .12); }
@keyframes ph-float { 50% { transform: translateY(-10px); } }
@keyframes ph-float-l { 0%, 100% { transform: translateX(-112px) rotate(-8deg); } 50% { transform: translateX(-112px) translateY(8px) rotate(-7deg); } }
@keyframes ph-float-r { 0%, 100% { transform: translateX(112px) rotate(8deg); } 50% { transform: translateX(112px) translateY(-8px) rotate(7deg); } }
@keyframes ph-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 430px)); } }

/* Bigger, clickable sample previews that scroll on hover or when on screen */
.cards2 { display: grid; gap: 18px; margin-top: 26px; }
.card2 { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; background: var(--card); border-radius: var(--radius); padding: 14px; text-decoration: none; box-shadow: 0 1px 0 rgba(30, 27, 24, .06), 0 14px 32px rgba(30, 27, 24, .08); transition: transform .25s, box-shadow .25s; }
.card2:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(30, 27, 24, .06), 0 22px 40px rgba(30, 27, 24, .14); }
.card2-shot { position: relative; display: block; height: 300px; border-radius: 22px; border: 5px solid var(--ink); overflow: hidden; background: #fff; }
.card2-shot img { width: 100%; height: auto; transition: transform 9s ease-in-out; }
.card2:hover .card2-shot img, .card2.play .card2-shot img { transform: translateY(calc(-100% + 290px)); }
.card2 .badge { z-index: 1; left: 6px; bottom: 6px; }
.card2-body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); line-height: 1.35; padding-top: 4px; }
.card2-body b { font-size: 19px; color: var(--ink); font-family: var(--head); font-weight: 800; }
.card2 .card-link { padding-top: 14px; }

/* Before / after slider */
.ba-sec { margin-top: 64px; }
.ba-sec .intro { color: var(--on-dark); }
.ba { position: relative; width: min(100%, 360px); aspect-ratio: 780 / 1520; margin: 28px auto 0; border-radius: 30px; overflow: hidden; border: 7px solid #000; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--red); pointer-events: none; }
.ba-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; font: 800 18px/46px var(--head); text-align: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-tag { position: absolute; top: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; pointer-events: none; }
.ba-tag-l { left: 12px; } .ba-tag-r { right: 12px; }
.ba .badge { left: 12px; bottom: 12px; background: var(--red-text); color: #fff; pointer-events: none; }
.ba:focus-within { outline: 3px solid var(--red); outline-offset: 4px; }

/* AI receptionist with the example call */
.ai2 { display: grid; gap: 8px; background: var(--ink); color: var(--cream); border-radius: 28px; padding: 28px 18px 24px; }
.ai2 .kicker { color: var(--red); }
.ai2 h2 { color: var(--cream); }
.ai2 p { margin-top: 12px; color: var(--on-dark); }
.ai2 .ai-trial { color: var(--cream); font-weight: 700; }
.ai2 .cd-foot { color: var(--on-dark); }
.ai2 .cd-replay { color: #FFB59E; }
.ai2 .cd-tabs { background: #3A342F; }

/* Scroll animations (only when JS runs; v2.js adds .in) */
.js .reveal, .js .reveal-kids > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in, .js .reveal-kids.in > * { opacity: 1; transform: none; }
.js .reveal-kids.in > *:nth-child(2) { transition-delay: .06s; } .js .reveal-kids.in > *:nth-child(3) { transition-delay: .12s; }
.js .reveal-kids.in > *:nth-child(4) { transition-delay: .18s; } .js .reveal-kids.in > *:nth-child(n+5) { transition-delay: .24s; }
.who li, .get li { transition: transform .25s, box-shadow .25s; }
.who li:hover, .get li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(30, 27, 24, .08); }

@media (max-width: 380px) {
  .ph-l { display: none; } .ph-r { display: none; }
  .card2 { grid-template-columns: 120px 1fr; } .card2-shot { height: 250px; }
}
@media (min-width: 760px) {
  .hero2 { padding-top: 56px; }
  .hero2-grid { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .stage { height: 560px; }
  .ph-main { width: 250px; height: 514px; }
  .ph-side { width: 200px; height: 412px; }
  .ph-l { transform: translateX(-150px) rotate(-8deg); } .ph-r { transform: translateX(150px) rotate(8deg); }
  @keyframes ph-float-l { 0%, 100% { transform: translateX(-150px) rotate(-8deg); } 50% { transform: translateX(-150px) translateY(8px) rotate(-7deg); } }
  @keyframes ph-float-r { 0%, 100% { transform: translateX(150px) rotate(8deg); } 50% { transform: translateX(150px) translateY(-8px) rotate(7deg); } }
  @keyframes ph-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 500px)); } }
  .wrap.hero2-grid { max-width: 1120px; }
  .cards2 { grid-template-columns: repeat(3, 1fr); }
  .card2 { grid-template-columns: 1fr; }
  .card2-shot { height: 420px; }
  .card2:hover .card2-shot img, .card2.play .card2-shot img { transform: translateY(calc(-100% + 410px)); }
  .ai2 { grid-template-columns: 1fr 340px; gap: 32px; padding: 40px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ph, .ph-main, .ph-l, .ph-r, .ph-main .ph-screen img { animation: none; }
  .card2-shot img { transition: none; }
  .js .reveal, .js .reveal-kids > * { opacity: 1; transform: none; transition: none; }
}