/* Echo story sections. Base rules scoped to .echo-story so they don't touch the rest of the site. */
.echo-story{
  --ink:#0b0f0e;
  --ink-2:#121917;
  --ink-3:#182220;
  --teal:#17b8ab;
  --teal-bright:#3fd6c8;
  --teal-deep:#0a5850;
  --sky:#2f9bd6;
  --violet:#7a6ff0;
  --amber:#e0a23b;
  --paper:#f3f5f4;
  --muted:#8b958f;
  --hair:#243330;
  --ink-on-light:#0d1f1c;
  --muted-on-light:#5b6b66;
  --hair-on-light:rgba(13, 31, 28, 0.14);
  --display:'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'Inter', system-ui, -apple-system, sans-serif;
  --jakarta:'Inter Tight', 'Inter', system-ui, sans-serif;
  --caveat:'Caveat', cursive;
}
.echo-story{
  position:relative;
  width:calc(100% + var(--eo-pad, 2rem) * 2);
  margin:calc(var(--eo-pad, 2rem) * -3) calc(var(--eo-pad, 2rem) * -1) 0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  line-height:normal;
  overflow-x:clip;
  z-index:2;
}
:where(.echo-story) *{box-sizing:border-box;}
:where(.echo-story) h1,:where(.echo-story) h2,:where(.echo-story) h3{
  font-family:var(--display);
  text-wrap:balance;
  margin:0;
  font-weight:500;
  letter-spacing:-0.022em;
}
:where(.echo-story) p{margin:0;}
:where(.echo-story) em{font-style:italic;color:var(--teal-bright);}

:where(.echo-story) .eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal);
}

:where(.echo-story) > section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vh 8vw;
  position:relative;
}

:where(.echo-story) .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
:where(.echo-story) .reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  :where(.echo-story) .reveal{transition:none; transform:none; opacity:1;}
}

@media (max-width: 720px){
  :where(.echo-story) > section{padding:10vh 7vw;}
}

/* ---- 01-hero ---- */
.hero-v2{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:12vh 8vw 10vh;
  background:
    radial-gradient(ellipse 60% 50% at 15% 8%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(160deg, #eef8f6 0%, #e3f1fb 46%, #dce9ff 100%);
  overflow:hidden;
}

.hero-v2::before,
.hero-v2::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
  pointer-events:none;
}
.hero-v2::before{
  width:420px; height:420px;
  top:-140px; right:-80px;
  background:radial-gradient(circle, #ffffff, rgba(255,255,255,0));
}
.hero-v2::after{
  width:360px; height:360px;
  bottom:-160px; left:8%;
  background:radial-gradient(circle, rgba(23,184,171,0.35), rgba(23,184,171,0));
}

.hero-v2__inner{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:4vw;
  align-items:center;
}

.hero-v2__eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin:0 0 1.1rem;
}

.hero-v2__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-0.022em;
  text-wrap:balance;
  margin:0;
}
.hero-v2__title span{display:block;}
.hero-v2__title .is-muted{color:#a9b7b2;}
.hero-v2__title .is-bold{color:var(--ink-on-light);}

.hero-v2__sub{
  margin:1.3rem 0 0;
  max-width:42ch;
  color:var(--muted-on-light);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.6;
}

.hero-v2__actions{
  margin-top:2.1rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.hero-v2__cta{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:var(--ink-on-light);
  color:#ffffff;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.95rem;
  padding:0.85rem 1.5rem;
  border-radius:100px;
  text-decoration:none;
  transition:transform 0.15s ease, background 0.15s ease;
  letter-spacing:-0.022em;
}
.hero-v2__cta:hover{background:var(--teal-deep); transform:translateY(-2px);}
.hero-v2__cta:focus-visible{outline:2px solid var(--ink-on-light); outline-offset:3px;}

.hero-v2__demo{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:transparent;
  border:none;
  color:var(--ink-on-light);
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.92rem;
  cursor:pointer;
  padding:0.4rem 0;
  letter-spacing:-0.022em;
}
.hero-v2__play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:#ffffff;
  color:var(--teal-deep);
  box-shadow:0 4px 14px rgba(13,31,28,0.14);
}
.hero-v2__demo:hover .hero-v2__play{color:var(--teal);}
.hero-v2__demo:focus-visible{outline:2px solid var(--ink-on-light); outline-offset:3px;}

.hero-v2__proof{
  margin:2.2rem 0 0;
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--body);
  font-size:0.85rem;
  color:var(--muted-on-light);
}
.hero-v2__proof--top{
  margin:0 0 1.1rem;
}
.hero-v2__proof-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(23,184,171,0.18);
  flex:none;
}

/* ---------- stage: UFO + floating cards ---------- */
.hero-v2__stage{
  position:relative;
  height:clamp(460px, 50vw, 580px);
}

.hero-v2__ufo-wrap{
  position:absolute;
  top:0; left:56%;
  transform:translateX(-50%);
  width:56%;
  z-index:2;
  animation:ufo-float 5s ease-in-out infinite;
}
.hero-v2__ufo-wrap canvas{
  display:block;
  width:100%;
  height:auto;
  transform:rotate(8deg);
}
@keyframes ufo-float{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-10px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-v2__ufo-wrap{animation:none;}
}

.hero-v2__ufo-beam{
  position:absolute;
  top:16%;
  left:56%;
  transform-origin:50% 0%;
  transform:translateX(-50%) rotate(8deg);
  width:40%;
  height:50%;
  background:linear-gradient(180deg, rgba(190,230,255,0.6), rgba(130,195,255,0.22) 55%, rgba(130,195,255,0) 100%);
  clip-path:polygon(45% 0%, 55% 0%, 94% 100%, 6% 100%);
  filter:blur(3px);
  pointer-events:none;
  z-index:1;
}

.hero-v2__card{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:rotate(var(--tilt));
  display:flex;
  align-items:center;
  gap:0.7rem;
  background:#ffffff;
  border-radius:14px;
  padding:0.7rem 0.9rem;
  box-shadow:0 14px 30px rgba(13,31,28,0.14);
  min-width:220px;
  z-index:3;
  animation:card-float 4.5s ease-in-out infinite;
  animation-delay:var(--delay);
}
@keyframes card-float{
  0%,100%{transform:rotate(var(--tilt)) translateY(0);}
  50%{transform:rotate(var(--tilt)) translateY(-8px);}
}

.hero-v2__card--sm{
  min-width:184px;
  padding:0.55rem 0.75rem;
  gap:0.55rem;
}
.hero-v2__card--sm .hero-v2__card-icon{width:26px; height:26px; border-radius:7px;}
.hero-v2__card--sm .hero-v2__card-title{font-size:0.78rem;}
.hero-v2__card--sm .hero-v2__card-meta{font-size:0.72rem;}
.hero-v2__card--faint{opacity:0.7;}

.hero-v2__card-icon{
  flex:none;
  width:32px; height:32px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}
.hero-v2__card-icon--call{background:var(--teal);}
.hero-v2__card-icon--chat{background:#2f9bd6;}
.hero-v2__card-icon--check{background:var(--teal-deep);}
.hero-v2__card-icon--memory{background:#7a6ff0;}
.hero-v2__card-icon--reminder{background:#e0a23b;}

.hero-v2__card-text{flex:1; min-width:0;}
.hero-v2__card-title{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.86rem;
  color:var(--ink-on-light);
  white-space:nowrap;
  letter-spacing:-0.022em;
}
.hero-v2__card-meta{
  margin:0.15rem 0 0;
  font-family:var(--body);
  font-size:0.78rem;
  color:var(--muted-on-light);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-v2__card-time{
  flex:none;
  font-family:var(--mono);
  font-size:0.68rem;
  color:#a9b7b2;
}

@media (prefers-reduced-motion: reduce){
  .hero-v2__card{animation:none;}
}

@media (max-width: 880px){
  .hero-v2{padding-top:16vh;}
  .hero-v2__inner{grid-template-columns:1fr; gap:4rem;}
  .hero-v2__stage{height:340px;}
  .hero-v2__card{min-width:190px;}
}

@media (max-width: 480px){
  .hero-v2__card{min-width:0; padding:0.6rem 0.7rem;}
  .hero-v2__card-title{white-space:normal;}
}

/* ---- 02-channels ---- */
section.channels-track{
  position:relative;
  height:300vh;
  min-height:0;
  display:block;
  padding:0;
}

.channels-viewport{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.channels-header{
  text-align:center;
  position:absolute;
  top:12vh;
  left:8vw;
  right:8vw;
  z-index:10;
  pointer-events:none;
  will-change:transform, opacity;
}

.channels-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin:0 0 0.9rem;
}

.channels-title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing:-0.022em;
  color:#a9b7b2;
  text-wrap:balance;
  margin:0;
}
.channels-title span{
  color:var(--ink-on-light);
  display:block;
}

.channels-sub{
  margin:0.9rem auto 0;
  max-width:44ch;
  color:var(--muted-on-light);
  font-family:var(--body);
  font-size:0.98rem;
  line-height:1.6;
}

.channels-stage{
  position:relative;
  width:min(1040px, 98vw);
  height:min(460px, 64vw);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:2vh;
  opacity:0;
  transform:scale(0.82);
}
.channels-stage.is-popped{
  animation:channels-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes channels-pop{
  0%{opacity:0; transform:scale(0.82);}
  60%{opacity:1; transform:scale(1.04);}
  100%{opacity:1; transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .channels-stage{opacity:1; transform:none;}
  .channels-stage.is-popped{animation:none;}
}
@media (max-width: 680px){
  .channels-stage{transform:scale(0.7);}
  .channels-stage.is-popped{animation-name:channels-pop-sm;}
}
@keyframes channels-pop-sm{
  0%{opacity:0; transform:scale(0.58);}
  60%{opacity:1; transform:scale(0.74);}
  100%{opacity:1; transform:scale(0.7);}
}
@media (max-width: 420px){
  .channels-stage{transform:scale(0.5);}
  .channels-stage.is-popped{animation-name:channels-pop-xs;}
}
@keyframes channels-pop-xs{
  0%{opacity:0; transform:scale(0.4);}
  60%{opacity:1; transform:scale(0.54);}
  100%{opacity:1; transform:scale(0.5);}
}

.channels-ambient{
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(200,235,255,0.4) 50%, rgba(23,184,171,0.08) 80%);
  box-shadow:0 20px 60px rgba(10,88,80,0.1);
  pointer-events:none;
  z-index:1;
}

.channels-icon{
  position:absolute;
  width:54px;
  height:54px;
  border-radius:16px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px -4px rgba(13,31,28,0.14), 0 4px 10px -2px rgba(13,31,28,0.06);
  border:1px solid rgba(255,255,255,0.8);
  z-index:3;
  will-change:transform, opacity;
}
.channels-icon svg{width:26px; height:26px;}

.echo-badge-wrap{
  position:absolute;
  bottom:-140px;
  width:180px;
  height:180px;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:4;
  pointer-events:none;
}

.echo-badge-glow{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,184,171,0.35), rgba(23,184,171,0) 70%);
  filter:blur(6px);
  z-index:1;
  animation:badge-pulse 3.2s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%,100%{transform:scale(1); opacity:0.8;}
  50%{transform:scale(1.08); opacity:1;}
}

.echo-badge{
  position:relative;
  width:132px;
  height:132px;
  border-radius:30px;
  background:linear-gradient(160deg, #1f8f83 0%, var(--teal-deep) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  box-shadow:0 20px 40px rgba(10,88,80,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.25);
  z-index:2;
}
.echo-badge img{
  width:46px;
  height:46px;
  border-radius:11px;
  display:block;
}
.echo-badge span{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.82rem;
  color:#ffffff;
  letter-spacing:0.01em;
}

.echo-badge-shadow{
  position:absolute;
  bottom:-14px;
  width:150px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(10,88,80,0.3) 0%, rgba(10,88,80,0) 70%);
  filter:blur(4px);
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .echo-badge-glow{animation:none;}
}

/* ---- 03-story-intro ---- */
section.story-track{
  position:relative;
  height:420vh;
  min-height:0;
  display:block;
  padding:0;
}
section.story-track.story-track--short{
  height:340vh;
}

.story-viewport{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.story-lines{
  width:100%;
  max-width:1300px;
  padding:0 5vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  text-align:center;
}

.story-line{
  font-family:var(--jakarta);
  font-weight:500;
  margin:0 auto;
  max-width:640px;
  line-height:1.35;
  letter-spacing:-0.022em;
  text-wrap:balance;
  will-change:transform, opacity, font-size, max-width;
}

@media (prefers-reduced-motion: reduce){
  .story-line{transform:none !important;}
}

/* ---- 04-missed-call ---- */
:root{
  --mc-warn:#d94a3a;
  --mc-warn-deep:#a83527;
}

section.mc-track{
  position:relative;
  height:320vh;
  min-height:0;
  display:block;
  padding:0;
}

.mc-viewport{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.mc-audio-btn{
  position:absolute;
  top:24px;
  right:28px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:rgba(255, 255, 255, 0.7);
  border:1px solid var(--hair-on-light);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:0.5rem 0.9rem;
  border-radius:100px;
  color:var(--ink-on-light);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
  cursor:pointer;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.mc-audio-btn:hover{
  border-color:var(--teal-deep);
  transform:translateY(-1px);
}
.mc-audio-btn:focus-visible{
  outline:2px solid var(--ink-on-light);
  outline-offset:2px;
}

.mc-audio-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mc-warn);
  transition:background 0.3s ease, box-shadow 0.3s ease;
}
.mc-audio-btn.is-enabled .mc-audio-dot{
  background:var(--teal);
  box-shadow:0 0 8px rgba(23,184,171,0.6);
}

.mc-ambient{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,184,171,0.28) 0%, rgba(23,184,171,0) 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:1;
  transition:background 0.4s ease;
}

.mc-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:10;
  max-width:820px;
  padding:0 6vw;
  text-align:center;
}

.mc-call-pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  background:#ffffff;
  border:1px solid var(--hair-on-light);
  padding:0.7rem 1.6rem 0.7rem 0.7rem;
  border-radius:100px;
  box-shadow:0 16px 40px rgba(13,31,28,0.14);
  margin-bottom:2rem;
  will-change:transform, opacity;
}

.mc-phone-wrap{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--teal);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 0 0 6px rgba(23,184,171,0.12);
  transition:background 0.4s ease, box-shadow 0.4s ease;
}
.mc-phone-wrap svg{
  transition:transform 0.3s ease;
}

.mc-pulse-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(23,184,171,0.5);
  animation:mc-pulse 1.6s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes mc-pulse{
  0%{transform:scale(0.9); opacity:1;}
  100%{transform:scale(1.6); opacity:0;}
}

.mc-call-info{
  text-align:left;
}
.mc-caller-name{
  font-family:var(--jakarta);
  font-size:1rem;
  font-weight:500;
  color:var(--ink-on-light);
  margin:0;
  letter-spacing:-0.022em;
}
.mc-call-status{
  font-family:var(--body);
  font-size:0.8rem;
  color:var(--muted-on-light);
  margin:0.15rem 0 0;
}

.mc-stat-number{
  font-family:var(--jakarta);
  font-size:clamp(4rem, 12vw, 7.5rem);
  font-weight:500;
  letter-spacing:-0.022em;
  line-height:1;
  margin:0 0 1.2rem;
  background:linear-gradient(135deg, var(--mc-warn) 0%, var(--mc-warn-deep) 55%, #e0a23b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  will-change:transform, opacity;
}

.mc-statement{
  max-width:640px;
  will-change:transform, opacity;
}

.mc-headline{
  font-family:var(--jakarta);
  font-size:clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight:500;
  line-height:1.35;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
  margin:0;
}

.mc-highlight{
  color:var(--mc-warn);
  text-decoration:underline;
  text-decoration-color:rgba(217,74,58,0.4);
  text-underline-offset:6px;
}

.mc-sub{
  margin-top:1rem;
  font-family:var(--body);
  font-size:1.1rem;
  line-height:1.6;
  color:var(--muted-on-light);
  font-weight:400;
}
.mc-sub strong{
  color:var(--ink-on-light);
  font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  .mc-pulse-ring{animation:none;}
}

@media (max-width: 560px){
  .mc-audio-btn span:not(.mc-audio-dot){display:none;}
  .mc-call-pill{padding:0.6rem 1.1rem 0.6rem 0.6rem;}
}

/* ---- 05-tools ---- */
.tools-v2{
  align-items:center;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 20%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
  overflow:hidden;
}

.tools-v2 .eyebrow{
  font-size:0.9rem;
  margin-bottom:0.3rem;
}

.tools-v2__heading{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:22ch;
  text-wrap:balance;
  margin:0;
}

.tools-v2__highlight{
  position:relative;
  display:inline-block;
}

.tools-v2__brush{
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:8px;
}

/* ---------- stage: trail, orbit, dots, cards ---------- */
.tools-v2__stage{
  position:relative;
  width:min(900px, 96vw);
  height:clamp(360px, 40vw, 440px);
  margin-top:4vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tools-v2__trail{
  position:absolute;
  left:-6%;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:112%;
  height:200px;
  pointer-events:none;
  z-index:1;
}

.tools-v2__orbit{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(480px, 90%);
  height:min(480px, 90%);
  pointer-events:none;
  z-index:1;
}

.tools-v2__dot{
  position:absolute;
  border-radius:50%;
  z-index:2;
}
.tools-v2__dot--teal{width:14px; height:14px; background:var(--teal); top:14%; left:40%;}
.tools-v2__dot--violet{width:20px; height:20px; background:#7a6ff0; bottom:16%; left:36%;}
.tools-v2__dot--sky{width:16px; height:16px; background:#2f9bd6; top:20%; right:34%;}
.tools-v2__dot--amber{width:9px; height:9px; background:#e0a23b; bottom:24%; right:42%;}

/* ---------- cards ---------- */
.tools-v2__cards{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2rem;
  z-index:5;
  perspective:1000px;
}

.tools-v2__card{
  width:190px;
  background:#ffffff;
  border-radius:20px;
  padding:1.6rem 1.1rem 1.3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:0 16px 36px -4px rgba(13,31,28,0.1), 0 0 1px 1px rgba(13,31,28,0.04);
  cursor:default;
  transition:transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
  will-change:transform, box-shadow;
}

.tools-v2__card--1{transform:translateY(12px) rotate(-5deg);}
.tools-v2__card--2{transform:translateY(-8px) rotate(1deg); z-index:2;}
.tools-v2__card--3{transform:translateY(16px) rotate(6deg);}

.tools-v2__card:hover{
  transform:translateY(-16px) rotate(0deg) scale(1.05) !important;
  box-shadow:0 24px 45px -5px rgba(13,31,28,0.16), 0 0 0 1.5px var(--teal);
  z-index:10;
}

.tools-v2__avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  margin-bottom:1rem;
  overflow:hidden;
  background:var(--hair-on-light);
  box-shadow:inset 0 0 0 1px rgba(13,31,28,0.06);
}
.tools-v2__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tools-v2__name{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.02rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
  margin:0 0 0.35rem;
}

.tools-v2__verdict{
  font-family:var(--body);
  font-size:0.82rem;
  line-height:1.45;
  color:var(--muted-on-light);
  margin:0;
}

@media (prefers-reduced-motion: reduce){
  .tools-v2__card{transition:none;}
}

@media (max-width: 720px){
  .tools-v2__cards{gap:1rem;}
  .tools-v2__card{width:150px; padding:1.2rem 0.8rem 1rem;}
  .tools-v2__card--1, .tools-v2__card--2, .tools-v2__card--3{transform:translateY(0) rotate(0deg);}
  .tools-v2__card:hover{transform:translateY(-10px) scale(1.03) !important;}
}

/* ---- 07-meet-echo ---- */
.reveal-v2{
  align-items:center;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 15%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.reveal-v2__headline{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.9rem;
  margin:0;
}

.reveal-v2__row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.7rem;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.7rem, 4.6vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
}

.reveal-v2__chip{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

/* voice-wave chip */
.reveal-v2__chip--wave{
  height:0.95em;
  padding:0 0.5em;
  gap:0.12em;
  border-radius:100px;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  box-shadow:0 0.3em 0.7em rgba(23,184,171,0.35);
}
.reveal-v2__wave-bar{
  width:0.1em;
  border-radius:0.1em;
  background:#ffffff;
  animation:reveal-v2-wave 1.2s ease-in-out infinite alternate;
}
.reveal-v2__wave-bar:nth-child(1){height:0.3em; animation-delay:0.1s;}
.reveal-v2__wave-bar:nth-child(2){height:0.55em; animation-delay:0.3s;}
.reveal-v2__wave-bar:nth-child(3){height:0.7em; animation-delay:0.2s;}
.reveal-v2__wave-bar:nth-child(4){height:0.42em; animation-delay:0.4s;}
.reveal-v2__wave-bar:nth-child(5){height:0.6em; animation-delay:0.15s;}
@keyframes reveal-v2-wave{
  0%{transform:scaleY(0.4); opacity:0.7;}
  100%{transform:scaleY(1.15); opacity:1;}
}

/* echo employee-badge chip */
.reveal-v2__chip--echo{
  gap:0.4em;
  background:#ffffff;
  border:1.5px solid rgba(13,31,28,0.1);
  border-radius:100px;
  padding:0.16em 0.6em 0.16em 0.16em;
  box-shadow:0 0.3em 0.8em rgba(13,31,28,0.1);
}
.reveal-v2__echo-avatar{
  position:relative;
  width:1.3em;
  height:1.3em;
  border-radius:50%;
  overflow:hidden;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reveal-v2__echo-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.reveal-v2__online-dot{
  position:absolute;
  bottom:-0.02em;
  right:-0.02em;
  width:0.26em;
  height:0.26em;
  border-radius:50%;
  background:var(--teal);
  border:0.06em solid #ffffff;
}
.reveal-v2__echo-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}
.reveal-v2__echo-name{
  font-size:0.62em;
  font-weight:800;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink-on-light);
}
.reveal-v2__echo-role{
  font-size:0.28em;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-top:0.1em;
}

/* sparkle chip */
.reveal-v2__chip--sparkle{
  position:relative;
  width:1.9em;
  height:0.95em;
  justify-content:center;
}
.reveal-v2__sparkle-orb{
  position:absolute;
  width:0.85em;
  height:0.85em;
  border-radius:50%;
}
.reveal-v2__sparkle-orb--a{
  left:0.05em;
  background:radial-gradient(circle at 35% 35%, #b7aef8, #7a6ff0, #5b4fd6);
  box-shadow:0 0.12em 0.3em rgba(122,111,240,0.35);
}
.reveal-v2__sparkle-orb--b{
  right:0.05em;
  background:radial-gradient(circle at 35% 35%, #7fe3d8, var(--teal), var(--teal-deep));
  opacity:0.9;
}
.reveal-v2__sparkle-glass{
  position:relative;
  z-index:2;
  width:1.25em;
  height:0.6em;
  border-radius:100px;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-on-light);
}

@media (prefers-reduced-motion: reduce){
  .reveal-v2__wave-bar{animation:none;}
}


/* ---------- pinned note cards ---------- */
.pin-cards{
  position:relative;
  margin-top:3.6rem;
  width:100%;
  max-width:1100px;
  padding:2.4rem 0 1.4rem;
}

.pin-cards__line{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

.pin-cards__row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}

.pin-card{
  position:relative;
  background:#ffffff;
  border-radius:22px;
  padding:0.9rem;
  text-align:left;
  box-shadow:
    0 18px 32px -10px rgba(13,31,28,0.16),
    0 6px 14px -4px rgba(13,31,28,0.07);
  transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.pin-card:hover{
  transform:translateY(-10px) scale(1.04) rotate(0deg) !important;
  box-shadow:
    0 26px 46px -12px rgba(13,31,28,0.22),
    0 10px 20px -6px rgba(13,31,28,0.08);
  z-index:10;
}

.pin-card--1{transform:translateY(8px) rotate(-3deg);}
.pin-card--2{transform:translateY(-6px) rotate(2deg);}
.pin-card--3{transform:translateY(10px) rotate(-1.6deg);}
.pin-card--4{transform:translateY(-4px) rotate(2.8deg);}

.pin-card__box{
  border-radius:16px;
  padding:1.3rem 1rem 1.2rem;
  min-height:200px;
  display:flex;
  flex-direction:column;
}
.pin-card--1 .pin-card__box{background:#e6f7f5;}
.pin-card--2 .pin-card__box{background:#e9f3fb;}
.pin-card--3 .pin-card__box{background:#f1eefd;}
.pin-card--4 .pin-card__box{background:#fdf3e3;}

.pin-card__num{
  font-family:var(--caveat);
  font-size:2rem;
  font-weight:700;
  line-height:1;
  margin:0 0 0.3rem;
}
.pin-card--1 .pin-card__num{color:var(--teal-deep);}
.pin-card--2 .pin-card__num{color:#1f6fa8;}
.pin-card--3 .pin-card__num{color:#5b4fd6;}
.pin-card--4 .pin-card__num{color:#a97a1f;}

.pin-card__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
  margin:0 0 0.5rem;
}

.pin-card__copy{
  font-family:var(--body);
  font-size:0.84rem;
  line-height:1.55;
  color:var(--muted-on-light);
  margin:0;
}

.pin-card__pin{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:24px;
  z-index:10;
  pointer-events:none;
}
.pin-card__pin-head{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.6);
}
.pin-card__pin-knob{
  position:absolute;
  top:4px; left:4px; right:4px; bottom:4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), transparent 60%);
}
.pin-card__pin-shadow{
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:7px;
  border-radius:50%;
  filter:blur(3px);
  z-index:-1;
}
.pin-card--1 .pin-card__pin-head{background:radial-gradient(circle at 35% 35%, #6be6da, var(--teal) 55%, var(--teal-deep) 100%); box-shadow:0 6px 12px rgba(23,184,171,0.4), inset 0 -2px 4px rgba(0,0,0,0.25);}
.pin-card--1 .pin-card__pin-shadow{background:rgba(10,88,80,0.4);}
.pin-card--2 .pin-card__pin-head{background:radial-gradient(circle at 35% 35%, #8ec8f2, #2f9bd6 55%, #145d8c 100%); box-shadow:0 6px 12px rgba(47,155,214,0.4), inset 0 -2px 4px rgba(0,0,0,0.25);}
.pin-card--2 .pin-card__pin-shadow{background:rgba(20,93,140,0.4);}
.pin-card--3 .pin-card__pin-head{background:radial-gradient(circle at 35% 35%, #c1b8fa, #7a6ff0 55%, #4a3fb0 100%); box-shadow:0 6px 12px rgba(122,111,240,0.4), inset 0 -2px 4px rgba(0,0,0,0.25);}
.pin-card--3 .pin-card__pin-shadow{background:rgba(74,63,176,0.4);}
.pin-card--4 .pin-card__pin-head{background:radial-gradient(circle at 35% 35%, #f3cf8f, #e0a23b 55%, #96691c 100%); box-shadow:0 6px 12px rgba(224,162,59,0.4), inset 0 -2px 4px rgba(0,0,0,0.25);}
.pin-card--4 .pin-card__pin-shadow{background:rgba(150,105,28,0.4);}

@media (max-width: 980px){
  .pin-cards__row{grid-template-columns:repeat(2, 1fr); gap:2rem;}
  .pin-cards__line{display:none;}
}
@media (max-width: 560px){
  .pin-cards__row{grid-template-columns:1fr;}
}

/* ---- 08-memory ---- */
.memory-v2{
  align-items:center;
  text-align:center;
  background:
    radial-gradient(ellipse 55% 55% at 50% 35%, rgba(122,111,240,0.1), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.memory-v2__eyebrow{
  color:var(--teal-deep);
  font-size:0.95rem;
  font-weight:600;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.memory-v2__eyebrow.is-visible{
  opacity:1;
  transform:translateY(0);
}

.memory-v2__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3rem);
  line-height:1.2;
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:18ch;
  text-wrap:balance;
  margin:0.7rem 0 0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.memory-v2__title.is-visible{
  opacity:1;
  transform:translateY(0);
}

.memory-v2__stage{
  position:relative;
  width:min(820px, 96vw);
  height:clamp(380px, 46vw, 480px);
  margin-top:0.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.memory-v2__brain{
  width:min(500px, 80%);
  height:auto;
  z-index:1;
  transform:translateY(-48px);
}

.memory-v2__brain-path{
  fill:none;
  stroke:#7a6ff0;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  stroke-dasharray:4000;
  stroke-dashoffset:4000;
}

.memory-v2__brain.is-drawing .memory-v2__brain-path{
  animation:memory-v2-draw 2.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes memory-v2-draw{
  to{stroke-dashoffset:0;}
}

.memory-v2__chip{
  position:absolute;
  z-index:2;
  max-width:168px;
  background:#ffffff;
  border-radius:14px;
  padding:0.7rem 0.95rem;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.86rem;
  line-height:1.4;
  color:var(--ink-on-light);
  text-align:left;
  box-shadow:0 14px 30px rgba(13,31,28,0.1);
  opacity:0;
  transform:scale(0.7) rotate(var(--r, 0deg));
  transition:opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing:-0.022em;
}
.memory-v2__chip.is-visible{
  opacity:1;
  animation:memory-v2-float 4.5s ease-in-out infinite;
  animation-delay:inherit;
}

.memory-v2__chip--1{top:2%; left:0; --r:-4deg;}
.memory-v2__chip--2{top:6%; right:0; --r:3deg;}
.memory-v2__chip--3{bottom:8%; left:2%; --r:3deg;}
.memory-v2__chip--4{bottom:2%; right:4%; --r:-3deg;}

@keyframes memory-v2-float{
  0%,100%{transform:translateY(0) rotate(var(--r, 0deg));}
  50%{transform:translateY(-8px) rotate(var(--r, 0deg));}
}

@media (prefers-reduced-motion: reduce){
  .memory-v2__brain-path{stroke-dashoffset:0;}
  .memory-v2__brain.is-drawing .memory-v2__brain-path{animation:none;}
  .memory-v2__eyebrow, .memory-v2__title{opacity:1; transform:none; transition:none;}
  .memory-v2__chip{opacity:1; transform:rotate(var(--r, 0deg)); animation:none; transition:none;}
}

@media (max-width: 720px){
  .memory-v2__stage{height:auto; flex-direction:column; gap:1.4rem; padding:2rem 0;}
  .memory-v2__brain{width:76%;}
  .memory-v2__chip{position:static; transform:none !important; margin:0 auto; animation:none; opacity:1;}
}

/* ---- 09-feature-cards ---- */
section.stack-features{
  display:block;
  min-height:0;
  padding:10vh 7vw;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.stack-features__cards{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:16vh;
}

.stack-card{
  position:sticky;
  top:96px;
  border-radius:28px;
  padding:2.6rem 2.8rem;
  height:clamp(400px, 44vw, 460px);
  box-shadow:
    0 -10px 30px rgba(13,31,28,0.06),
    0 22px 44px rgba(13,31,28,0.14);
}

.stack-card--1{z-index:1; background:radial-gradient(circle at 100% 100%, #cdeee9 0%, #e3edfd 50%, #eafbf7 100%);}
.stack-card--2{z-index:2; background:radial-gradient(circle at 0% 100%, #dbeafe 0%, #e0f2fe 45%, #eef8f6 100%);}
.stack-card--3{z-index:3; background:radial-gradient(circle at 100% 0%, #ece8fd 0%, #dbeafe 50%, #f5f0fe 100%);}
.stack-card--4{z-index:4; background:radial-gradient(circle at 0% 0%, #fdf0d8 0%, #eafbf7 50%, #dbeafe 100%);}
.stack-card--5{z-index:5; background:radial-gradient(circle at 50% 100%, #cdeee9 0%, #dbeafe 55%, #ece8fd 100%);}

.stack-card__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2.5rem;
  height:100%;
}

.stack-card__copy .eyebrow{margin-bottom:0.7rem;}

.stack-card__heading{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  line-height:1.22;
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:16ch;
  text-wrap:balance;
  margin:0;
}

.stack-card__desc{
  margin-top:1rem;
  max-width:32ch;
  font-family:var(--body);
  font-size:0.92rem;
  line-height:1.6;
  color:var(--muted-on-light);
}

.stack-card__mock{
  width:100%;
  max-width:340px;
  justify-self:center;
}

@media (max-width: 860px){
  .stack-card{padding:2rem 1.6rem; top:76px; height:auto;}
  .stack-card__grid{grid-template-columns:1fr; gap:1.4rem;}
  .stack-card__desc{max-width:none;}
  .stack-card__mock{max-width:none; justify-self:stretch;}
}


.call-loop{
  position:relative;
  width:100%;
  max-width:320px;
  height:280px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.call-loop__pill{
  position:absolute;
  top:0;
  background:var(--ink-on-light);
  border-radius:40px;
  display:flex;
  align-items:center;
  box-shadow:0 16px 34px rgba(13,31,28,0.28);
  overflow:hidden;
  transition:all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:2;
}

.call-loop__pill--loading{
  width:104px;
  height:40px;
  padding:0 20px;
  justify-content:center;
  gap:10px;
}

.call-loop__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 8px var(--teal-bright);
  animation:call-loop-dot 1.2s infinite ease-in-out;
}
.call-loop__dot:nth-child(2){animation-delay:0.2s;}
.call-loop__dot:nth-child(3){animation-delay:0.4s;}
@keyframes call-loop-dot{
  0%,100%{transform:scale(0.7); opacity:0.5;}
  50%{transform:scale(1.15); opacity:1;}
}

.call-loop__pill--expanded{
  width:100%;
  max-width:300px;
  height:64px;
  padding:8px 12px 8px 10px;
  justify-content:space-between;
}

.call-loop__lead{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

.call-loop__avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.05rem;
  border:2px solid var(--teal-bright);
  box-shadow:0 0 12px rgba(63,214,200,0.4);
  flex-shrink:0;
  letter-spacing:-0.022em;
}

.call-loop__text{
  display:flex;
  flex-direction:column;
  text-align:left;
}

.call-loop__title{
  color:#ffffff;
  font-family:var(--jakarta);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:-0.022em;
}

.call-loop__subtitle{
  color:var(--teal-bright);
  font-family:var(--body);
  font-size:0.7rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:2px;
}

.call-loop__waves{
  display:flex;
  align-items:center;
  gap:2px;
  height:10px;
}
.call-loop__wave{
  width:2px;
  height:100%;
  background:var(--teal-bright);
  border-radius:2px;
  animation:call-loop-wave 1s ease-in-out infinite alternate;
}
.call-loop__wave:nth-child(1){animation-delay:0.1s; height:5px;}
.call-loop__wave:nth-child(2){animation-delay:0.3s; height:10px;}
.call-loop__wave:nth-child(3){animation-delay:0.2s; height:7px;}
.call-loop__wave:nth-child(4){animation-delay:0.4s; height:9px;}
@keyframes call-loop-wave{
  0%{transform:scaleY(0.3);}
  100%{transform:scaleY(1.1);}
}

.call-loop__action{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 14px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
  flex-shrink:0;
}
.call-loop__action svg{
  width:18px;
  height:18px;
  fill:#ffffff;
  transition:transform 0.3s ease;
}

.call-loop__dialogue{
  position:absolute;
  top:82px;
  width:100%;
  max-width:300px;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  z-index:1;
}

.call-loop__bubble{
  padding:0.75rem 1rem;
  border-radius:16px;
  font-family:var(--body);
  font-size:0.82rem;
  line-height:1.4;
  max-width:88%;
  box-shadow:0 8px 20px rgba(13,31,28,0.06);
  opacity:0;
  transform:translateY(16px) scale(0.96);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.call-loop__bubble--customer{
  align-self:flex-start;
  background:#eef1f2;
  color:var(--ink-on-light);
  border-bottom-left-radius:4px;
}

.call-loop__bubble--store{
  align-self:flex-end;
  background:rgba(23,184,171,0.16);
  color:var(--teal-deep);
  border-bottom-right-radius:4px;
  font-weight:500;
}

.call-loop__bubble-tag{
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:700;
  color:var(--muted-on-light);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.3rem;
}
.call-loop__bubble--store .call-loop__bubble-tag{color:var(--teal-deep);}

@media (prefers-reduced-motion: reduce){
  .call-loop__dot, .call-loop__wave{animation:none;}
}


.wa-loop{
  position:relative;
  width:100%;
  max-width:300px;
  height:280px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.wa-loop__logo{
  position:absolute;
  width:58px;
  height:58px;
  border-radius:17px;
  background:var(--sky);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 26px rgba(47,155,214,0.4);
  z-index:3;
  transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wa-loop__modal{
  position:absolute;
  width:100%;
  max-width:260px;
  background:#ffffff;
  border-radius:22px;
  padding:1rem 1rem 0.9rem;
  box-shadow:0 20px 40px rgba(13,31,28,0.12);
  border:1px solid rgba(13,31,28,0.05);
  z-index:2;
  opacity:0;
  transform:scale(0.6) translateY(16px);
  pointer-events:none;
  transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wa-loop__modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.9rem;
}
.wa-loop__modal-title{
  font-family:var(--jakarta);
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}

.wa-loop__contacts{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.7rem;
}

.wa-loop__contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  position:relative;
}

.wa-loop__avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#eef1f2;
  color:var(--ink-on-light);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:-0.022em;
}

.wa-loop__avatar--active{
  box-shadow:0 0 0 3px #ffffff, 0 0 0 5px var(--sky);
  animation:wa-loop-ring 1.6s infinite ease-in-out;
}
@keyframes wa-loop-ring{
  0%,100%{box-shadow:0 0 0 3px #ffffff, 0 0 0 5px var(--sky);}
  50%{box-shadow:0 0 0 3px #ffffff, 0 0 0 7px rgba(47,155,214,0.4);}
}

.wa-loop__name{
  font-family:var(--body);
  font-size:0.66rem;
  font-weight:600;
  color:var(--muted-on-light);
}

.wa-loop__auto-tag{
  position:absolute;
  top:-5px;
  right:-8px;
  background:var(--sky);
  color:#ffffff;
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:700;
  padding:0.1rem 0.35rem;
  border-radius:8px;
  border:1.5px solid #ffffff;
  letter-spacing:0.03em;
}

.wa-loop__bubble{
  position:absolute;
  bottom:6px;
  background:rgba(47,155,214,0.14);
  color:var(--ink-on-light);
  padding:0.75rem 1rem;
  border-radius:16px;
  border-bottom-right-radius:4px;
  box-shadow:0 10px 24px rgba(13,31,28,0.06);
  font-family:var(--body);
  font-size:0.8rem;
  line-height:1.4;
  max-width:280px;
  opacity:0;
  transform:translateY(16px) scale(0.96);
  transition:all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:4;
}

.wa-loop__bubble-tag{
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  color:#1f6fa8;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.3rem;
  display:flex;
  align-items:center;
  gap:0.3rem;
}

@media (prefers-reduced-motion: reduce){
  .wa-loop__avatar--active{animation:none;}
}


.mloop{
  position:relative;
  width:100%;
  max-width:320px;
  height:280px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mloop__glow{
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,111,240,0.16) 0%, rgba(47,155,214,0.1) 45%, transparent 70%);
  filter:blur(30px);
  pointer-events:none;
  z-index:1;
}

.mloop__brain{
  position:relative;
  width:150px;
  height:auto;
  z-index:2;
}

.mloop__brain-track{
  fill:none;
  stroke:rgba(13,31,28,0.08);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mloop__brain-pulse{
  fill:none;
  stroke:url(#mloopGradient);
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:4500;
  stroke-dashoffset:4500;
  animation:mloop-draw 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes mloop-draw{
  0%{stroke-dashoffset:4500; opacity:0;}
  15%{opacity:1;}
  85%{stroke-dashoffset:0; opacity:1;}
  100%{stroke-dashoffset:0; opacity:0;}
}

.mloop__card{
  position:absolute;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(13,31,28,0.06);
  border-radius:14px;
  padding:0.45rem 0.7rem 0.45rem 0.5rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
  box-shadow:0 12px 24px -6px rgba(13,31,28,0.1);
  z-index:5;
  opacity:0;
  transform:scale(0.7) translateY(10px);
  transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width:170px;
}

.mloop__card--1{top:2%; left:0;}
.mloop__card--2{top:14%; right:0;}
.mloop__card--3{bottom:16%; left:0;}
.mloop__card--4{bottom:2%; right:2%;}

.mloop__card.is-active{
  opacity:1;
  transform:scale(1) translateY(0);
  border-color:rgba(47,155,214,0.5);
  box-shadow:0 16px 30px -6px rgba(47,155,214,0.22);
}

.mloop__dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--sky);
  box-shadow:0 0 8px rgba(47,155,214,0.6);
}
.mloop__card--1 .mloop__dot{bottom:-10px; right:14px;}
.mloop__card--2 .mloop__dot{bottom:-10px; left:14px;}
.mloop__card--3 .mloop__dot{top:-10px; right:14px;}
.mloop__card--4 .mloop__dot{top:-10px; left:14px;}

.mloop__avatar{
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}
.mloop__avatar--teal{background:var(--teal);}
.mloop__avatar--sky{background:var(--sky);}
.mloop__avatar--violet{background:var(--violet);}
.mloop__avatar--amber{background:var(--amber);}

.mloop__info{
  display:flex;
  flex-direction:column;
  text-align:left;
  min-width:0;
}

.mloop__name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.68rem;
  color:var(--ink-on-light);
  display:flex;
  align-items:center;
  gap:0.3rem;
  white-space:nowrap;
  letter-spacing:-0.022em;
}

.mloop__badge{
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:700;
  color:#1f6fa8;
  background:rgba(47,155,214,0.14);
  padding:0.08rem 0.35rem;
  border-radius:8px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

.mloop__detail{
  margin:0.15rem 0 0;
  font-family:var(--body);
  font-size:0.62rem;
  color:var(--muted-on-light);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mloop__detail strong{color:var(--ink-on-light);}

@media (prefers-reduced-motion: reduce){
  .mloop__brain-pulse{animation:none; stroke-dashoffset:0; opacity:1;}
}


.cloop{
  position:relative;
  width:100%;
  max-width:300px;
  height:280px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.cloop__glow{
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,184,171,0.2) 0%, rgba(23,184,171,0.04) 50%, transparent 70%);
  filter:blur(28px);
  pointer-events:none;
  z-index:1;
}

.cloop__widget{
  position:relative;
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cloop__ring{
  position:absolute;
  border-radius:50%;
  border:1.5px solid var(--teal);
  pointer-events:none;
  opacity:0;
  animation:cloop-pulse 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
.cloop__ring:nth-child(1){width:100%; height:100%; animation-delay:0s;}
.cloop__ring:nth-child(2){width:125%; height:125%; animation-delay:0.6s;}
.cloop__ring:nth-child(3){width:150%; height:150%; animation-delay:1.2s;}
@keyframes cloop-pulse{
  0%{transform:scale(0.7); opacity:0.8;}
  50%{opacity:0.4;}
  100%{transform:scale(1.3); opacity:0;}
}

.cloop__core{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--teal-deep), var(--teal));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  box-shadow:0 10px 22px rgba(23,184,171,0.35), inset 0 2px 4px rgba(255,255,255,0.3);
  position:relative;
  z-index:2;
  border:3px solid #ffffff;
}
.cloop__core svg{
  animation:cloop-wiggle 1.8s ease-in-out infinite;
}
@keyframes cloop-wiggle{
  0%,100%{transform:rotate(0deg);}
  15%{transform:rotate(14deg);}
  30%{transform:rotate(-14deg);}
  45%{transform:rotate(10deg);}
  60%{transform:rotate(-6deg);}
  75%{transform:rotate(0deg);}
}

.cloop__pill{
  position:absolute;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:0.7rem;
  background:rgba(23,184,171,0.14);
  border:1px solid rgba(255,255,255,0.7);
  padding:0.6rem 1.1rem 0.6rem 0.7rem;
  border-radius:100px;
  box-shadow:0 12px 26px rgba(23,184,171,0.16);
  z-index:3;
  max-width:270px;
  opacity:0;
  transform:translateY(18px) scale(0.9);
  transition:all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cloop__pill.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.cloop__bell{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(23,184,171,0.35);
  flex-shrink:0;
  animation:cloop-bell-swing 2s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes cloop-bell-swing{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(12deg);}
  40%{transform:rotate(-12deg);}
  60%{transform:rotate(6deg);}
  80%{transform:rotate(-6deg);}
}

.cloop__pill-text{
  display:flex;
  flex-direction:column;
  text-align:left;
  min-width:0;
}

.cloop__pill-title{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.78rem;
  color:var(--teal-deep);
  letter-spacing:-0.022em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cloop__pill-desc{
  margin:0.15rem 0 0;
  font-family:var(--body);
  font-size:0.68rem;
  font-weight:600;
  color:#0f6f65;
  opacity:0.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (prefers-reduced-motion: reduce){
  .cloop__ring, .cloop__core svg, .cloop__bell{animation:none;}
}


.bloop{
  position:relative;
  width:100%;
  max-width:300px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bloop__glow{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,184,171,0.14) 0%, rgba(23,184,171,0) 70%);
  filter:blur(28px);
  pointer-events:none;
  z-index:1;
}

.bloop__card{
  position:relative;
  width:100%;
  background:#ffffff;
  border-radius:20px;
  padding:1.1rem 1rem 1rem;
  box-shadow:0 18px 38px -8px rgba(13,31,28,0.14);
  z-index:2;
}

.bloop__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.9rem;
}
.bloop__month{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.82rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.bloop__badge{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:700;
  background:rgba(23,184,171,0.12);
  color:var(--teal-deep);
  border:1px solid rgba(23,184,171,0.25);
  padding:0.2rem 0.5rem;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:0.3rem;
}
.bloop__badge-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--teal);
  animation:bloop-badge-pulse 1.5s infinite;
}
@keyframes bloop-badge-pulse{
  0%,100%{opacity:0.4; transform:scale(0.8);}
  50%{opacity:1; transform:scale(1.2);}
}

.bloop__days{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  text-align:center;
  gap:0.3rem;
  margin-bottom:0.35rem;
}
.bloop__days span{
  font-family:var(--body);
  font-size:0.6rem;
  font-weight:600;
  color:var(--muted-on-light);
}

.bloop__dates{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:0.3rem;
  text-align:center;
}
.bloop__date{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--body);
  font-size:0.66rem;
  font-weight:600;
  color:var(--ink-on-light);
  border-radius:7px;
  transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bloop__date--muted{color:#c3ccc9;}
.bloop__date--target.is-active{
  background:var(--teal);
  color:#ffffff;
  box-shadow:0 6px 14px rgba(23,184,171,0.35);
  transform:scale(1.08);
}

.bloop__slots{
  margin-top:0.9rem;
  padding-top:0.8rem;
  border-top:1px solid var(--hair-on-light);
  display:flex;
  gap:0.4rem;
}
.bloop__slot{
  flex:1;
  text-align:center;
  padding:0.4rem 0.2rem;
  border-radius:8px;
  font-family:var(--body);
  font-size:0.6rem;
  font-weight:700;
  color:var(--muted-on-light);
  background:#f4f7f6;
  border:1px solid var(--hair-on-light);
  transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bloop__slot.is-active{
  background:rgba(23,184,171,0.12);
  border-color:var(--teal);
  color:var(--teal-deep);
  box-shadow:0 3px 8px rgba(23,184,171,0.18);
  transform:translateY(-2px);
}

.bloop__cursor{
  position:absolute;
  top:0;
  left:0;
  width:18px;
  height:18px;
  z-index:5;
  color:var(--ink-on-light);
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(13,31,28,0.25));
  transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  transform:translate(220px, 220px);
}

.bloop__toast{
  position:absolute;
  bottom:-14px;
  background:#ffffff;
  border:1px solid var(--hair-on-light);
  border-radius:16px;
  padding:0.6rem 0.9rem 0.6rem 0.6rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
  box-shadow:0 14px 30px rgba(13,31,28,0.14);
  z-index:6;
  max-width:260px;
  opacity:0;
  transform:translateY(20px) scale(0.9);
  transition:all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bloop__toast.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.bloop__toast-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--teal);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 5px 12px rgba(23,184,171,0.35);
}

.bloop__toast-text{
  display:flex;
  flex-direction:column;
  text-align:left;
  min-width:0;
}
.bloop__toast-title{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.68rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.bloop__toast-desc{
  margin:0.1rem 0 0;
  font-family:var(--body);
  font-size:0.6rem;
  color:var(--muted-on-light);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (prefers-reduced-motion: reduce){
  .bloop__badge-dot{animation:none;}
  .bloop__cursor{transition:none;}
}

/* ---- 10-language-switch ---- */
.lang-v2{
  align-items:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 15%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.lang-v2__inner{
  max-width:1080px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
}

.lang-v2__eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal-deep);
  background:rgba(23,184,171,0.12);
  border:1px solid rgba(23,184,171,0.25);
  padding:0.35rem 0.9rem;
  border-radius:100px;
  margin:0 0 1.1rem;
}

.lang-v2__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:18ch;
  text-wrap:balance;
  margin:0;
}

.lang-v2__sub{
  margin:1rem 0 0;
  max-width:46ch;
  color:var(--muted-on-light);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
}

.lang-v2__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lang-v2__glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,184,171,0.16) 0%, rgba(122,111,240,0.08) 45%, transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:1;
}

@media (max-width: 860px){
  .lang-v2__inner{grid-template-columns:1fr; gap:3rem; justify-items:center; text-align:center;}
}


/* ---------- phone chassis ---------- */
.phone{
  position:relative;
  width:300px;
  height:610px;
  background:linear-gradient(160deg, #f4f6f5, #dfe6e4);
  border-radius:44px;
  padding:10px;
  box-shadow:
    0 0 0 3px #c7d0cd,
    0 0 0 5px #eef1f0,
    0 30px 70px rgba(13,31,28,0.22),
    0 10px 26px rgba(13,31,28,0.14);
  z-index:2;
}

.phone__btn{
  position:absolute;
  background:#b6c0bd;
  border-radius:3px;
}
.phone__btn--silent{left:-8px; top:92px; width:3px; height:22px; border-radius:3px 0 0 3px;}
.phone__btn--vol-up{left:-8px; top:128px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--vol-down{left:-8px; top:176px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--power{right:-8px; top:144px; width:3px; height:56px; border-radius:0 3px 3px 0;}

.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  background:#ffffff;
  border-radius:36px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0.7rem 0.9rem 1.1rem;
  color:var(--ink-on-light);
}

.phone__status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:26px;
  font-family:var(--jakarta);
  font-size:0.68rem;
  font-weight:500;
  color:var(--muted-on-light);
  letter-spacing:-0.022em;
}

.phone__island{
  height:24px;
  background:#0d1f1c;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:0.4rem;
  padding:0 0.6rem;
}
.phone__island-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 6px var(--teal-bright);
  flex-shrink:0;
}
.phone__island-text{
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:700;
  color:var(--teal-bright);
  white-space:nowrap;
  transition:color 0.3s ease;
}
.phone__island-text.is-detected{color:#c9862c;}

.phone__caller{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:0.2rem;
}
.phone__avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.15rem;
  color:#ffffff;
  box-shadow:0 8px 18px rgba(23,184,171,0.32);
  margin-bottom:0.4rem;
  letter-spacing:-0.022em;
}
.phone__name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.98rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.phone__meta{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.15rem;
}
.phone__status-text{
  font-family:var(--body);
  font-size:0.68rem;
  color:var(--muted-on-light);
}
.phone__timer{
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:600;
  color:var(--teal-deep);
}

.phone__detect-pill{
  align-self:center;
  background:rgba(224,162,59,0.14);
  border:1px solid rgba(224,162,59,0.35);
  padding:0.35rem 0.75rem;
  border-radius:100px;
  display:flex;
  align-items:center;
  gap:0.35rem;
  font-family:var(--body);
  font-size:0.62rem;
  font-weight:700;
  color:#8a5f1a;
  margin:0.55rem 0 0.3rem;
  opacity:0;
  transform:scale(0.9);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__detect-pill.is-visible{
  opacity:1;
  transform:scale(1);
}
.phone__detect-pill strong{color:#6b4712;}

.phone__stream{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.55rem;
  padding:0.3rem 0;
}

.phone__turn{
  background:#f4f7f6;
  border:1px solid var(--hair-on-light);
  border-radius:14px;
  padding:0.55rem 0.7rem;
  opacity:0;
  transform:translateY(10px) scale(0.97);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__turn.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}

.phone__turn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.25rem;
}
.phone__speaker{
  display:flex;
  align-items:center;
  gap:0.3rem;
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.phone__speaker--caller{color:var(--muted-on-light);}
.phone__speaker--switch{color:#a97a1f;}
.phone__speaker--ai{color:var(--teal-deep);}

.phone__speech{
  margin:0;
  font-family:var(--body);
  font-size:0.72rem;
  line-height:1.4;
  color:var(--ink-on-light);
  font-weight:500;
}

.phone__wave{
  display:flex;
  align-items:center;
  gap:2px;
  height:9px;
}
.phone__wave i{
  width:2px;
  background:var(--teal);
  border-radius:2px;
  height:100%;
  animation:phone-wave 0.6s infinite alternate;
  font-style:normal;
}
.phone__wave i:nth-child(2){animation-delay:0.2s; height:60%;}
.phone__wave i:nth-child(3){animation-delay:0.4s; height:90%;}
@keyframes phone-wave{
  0%{transform:scaleY(0.3);}
  100%{transform:scaleY(1.1);}
}

.phone__controls{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.6rem;
  margin-bottom:0.7rem;
}
.phone__ctrl{
  background:#f0f3f2;
  border:1px solid var(--hair-on-light);
  border-radius:50%;
  width:48px;
  height:48px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink-on-light);
  font-family:var(--body);
  font-size:0.52rem;
  font-weight:600;
  gap:0.1rem;
}
.phone__ctrl--active{
  background:var(--teal-deep);
  color:#ffffff;
  border-color:var(--teal-deep);
}

.phone__end-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:0.2rem;
}
.phone__end{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#d94a3a;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(217,74,58,0.4);
  cursor:pointer;
}

.phone__home{
  width:100px;
  height:4px;
  background:rgba(13,31,28,0.2);
  border-radius:10px;
  margin:0.4rem auto 0;
}

@media (prefers-reduced-motion: reduce){
  .phone__wave i{animation:none;}
}

@media (max-width: 480px){
  .phone{width:88vw; max-width:300px;}
}

/* ---- 11-agent-handoff ---- */
/* ---------- phone chassis ---------- */
.phone{
  position:relative;
  width:300px;
  height:610px;
  background:linear-gradient(160deg, #f4f6f5, #dfe6e4);
  border-radius:44px;
  padding:10px;
  box-shadow:
    0 0 0 3px #c7d0cd,
    0 0 0 5px #eef1f0,
    0 30px 70px rgba(13,31,28,0.22),
    0 10px 26px rgba(13,31,28,0.14);
  z-index:2;
}

.phone__btn{
  position:absolute;
  background:#b6c0bd;
  border-radius:3px;
}
.phone__btn--silent{left:-8px; top:92px; width:3px; height:22px; border-radius:3px 0 0 3px;}
.phone__btn--vol-up{left:-8px; top:128px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--vol-down{left:-8px; top:176px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--power{right:-8px; top:144px; width:3px; height:56px; border-radius:0 3px 3px 0;}

.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  background:#ffffff;
  border-radius:36px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0.7rem 0.9rem 1.1rem;
  color:var(--ink-on-light);
}

.phone__status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:26px;
  font-family:var(--jakarta);
  font-size:0.68rem;
  font-weight:500;
  color:var(--muted-on-light);
  letter-spacing:-0.022em;
}

.phone__island{
  height:24px;
  background:#0d1f1c;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:0.4rem;
  padding:0 0.6rem;
}
.phone__island-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 6px var(--teal-bright);
  flex-shrink:0;
}
.phone__island-text{
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:700;
  color:var(--teal-bright);
  white-space:nowrap;
  transition:color 0.3s ease;
}
.phone__island-text.is-detected{color:#c9862c;}

.phone__caller{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:0.2rem;
}
.phone__avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.15rem;
  color:#ffffff;
  box-shadow:0 8px 18px rgba(23,184,171,0.32);
  margin-bottom:0.4rem;
  letter-spacing:-0.022em;
}
.phone__name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.98rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.phone__meta{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.15rem;
}
.phone__status-text{
  font-family:var(--body);
  font-size:0.68rem;
  color:var(--muted-on-light);
}
.phone__timer{
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:600;
  color:var(--teal-deep);
}

.phone__detect-pill{
  align-self:center;
  background:rgba(224,162,59,0.14);
  border:1px solid rgba(224,162,59,0.35);
  padding:0.35rem 0.75rem;
  border-radius:100px;
  display:flex;
  align-items:center;
  gap:0.35rem;
  font-family:var(--body);
  font-size:0.62rem;
  font-weight:700;
  color:#8a5f1a;
  margin:0.55rem 0 0.3rem;
  opacity:0;
  transform:scale(0.9);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__detect-pill.is-visible{
  opacity:1;
  transform:scale(1);
}
.phone__detect-pill strong{color:#6b4712;}

.phone__stream{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.55rem;
  padding:0.3rem 0;
}

.phone__turn{
  background:#f4f7f6;
  border:1px solid var(--hair-on-light);
  border-radius:14px;
  padding:0.55rem 0.7rem;
  opacity:0;
  transform:translateY(10px) scale(0.97);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__turn.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}

.phone__turn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.25rem;
}
.phone__speaker{
  display:flex;
  align-items:center;
  gap:0.3rem;
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.phone__speaker--caller{color:var(--muted-on-light);}
.phone__speaker--switch{color:#a97a1f;}
.phone__speaker--ai{color:var(--teal-deep);}

.phone__speech{
  margin:0;
  font-family:var(--body);
  font-size:0.72rem;
  line-height:1.4;
  color:var(--ink-on-light);
  font-weight:500;
}

.phone__wave{
  display:flex;
  align-items:center;
  gap:2px;
  height:9px;
}
.phone__wave i{
  width:2px;
  background:var(--teal);
  border-radius:2px;
  height:100%;
  animation:phone-wave 0.6s infinite alternate;
  font-style:normal;
}
.phone__wave i:nth-child(2){animation-delay:0.2s; height:60%;}
.phone__wave i:nth-child(3){animation-delay:0.4s; height:90%;}
@keyframes phone-wave{
  0%{transform:scaleY(0.3);}
  100%{transform:scaleY(1.1);}
}

.phone__controls{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.6rem;
  margin-bottom:0.7rem;
}
.phone__ctrl{
  background:#f0f3f2;
  border:1px solid var(--hair-on-light);
  border-radius:50%;
  width:48px;
  height:48px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink-on-light);
  font-family:var(--body);
  font-size:0.52rem;
  font-weight:600;
  gap:0.1rem;
}
.phone__ctrl--active{
  background:var(--teal-deep);
  color:#ffffff;
  border-color:var(--teal-deep);
}

.phone__end-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:0.2rem;
}
.phone__end{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#d94a3a;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(217,74,58,0.4);
  cursor:pointer;
}

.phone__home{
  width:100px;
  height:4px;
  background:rgba(13,31,28,0.2);
  border-radius:10px;
  margin:0.4rem auto 0;
}

@media (prefers-reduced-motion: reduce){
  .phone__wave i{animation:none;}
}

@media (max-width: 480px){
  .phone{width:88vw; max-width:300px;}
}


.handoff-v2{
  align-items:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 20%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.handoff-v2__inner{
  max-width:1080px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
}

.handoff-v2__stage{
  order:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.handoff-v2__copy{
  order:2;
}

.handoff-v2__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  line-height:1.24;
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:16ch;
  text-wrap:balance;
  margin:0.7rem 0 0;
}

.handoff-v2__sub{
  margin-top:1.1rem;
  max-width:40ch;
  color:var(--muted-on-light);
  font-family:var(--body);
  font-size:1.02rem;
  line-height:1.6;
}

.handoff-v2__note{
  margin-top:1rem;
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--muted-on-light);
}

/* ---------- agent hot-swap carousel (inside .phone__screen) ---------- */
.swap__arena{
  position:relative;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0.2rem;
}

.swap__beam{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  border:2px dashed var(--violet);
  opacity:0;
  transform:scale(0.6) rotate(0deg);
  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events:none;
}
.swap__beam.is-active{
  opacity:1;
  transform:scale(1.1) rotate(180deg);
  box-shadow:0 0 24px rgba(122,111,240,0.35), inset 0 0 14px rgba(23,184,171,0.25);
  animation:swap-beam-spin 2s linear infinite;
}
@keyframes swap-beam-spin{
  100%{transform:scale(1.1) rotate(540deg);}
}

.swap__agent{
  position:absolute;
  width:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity:0;
  transform:translateX(120px) scale(0.7);
  filter:blur(4px);
}
.swap__agent--a{transform:translateX(-120px) scale(0.7);}
.swap__agent.is-active{
  opacity:1;
  transform:translateX(0) scale(1);
  filter:blur(0);
}

.swap__avatar{
  position:relative;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.25rem;
  color:#ffffff;
  margin-bottom:0.4rem;
  letter-spacing:-0.022em;
}
.swap__avatar--a{background:radial-gradient(circle at 35% 35%, var(--teal-bright), var(--teal) 60%, var(--teal-deep)); box-shadow:0 0 18px rgba(23,184,171,0.35);}
.swap__avatar--b{background:radial-gradient(circle at 35% 35%, #c1b8fa, var(--violet) 60%, #4a3fb0); box-shadow:0 0 18px rgba(122,111,240,0.35);}

.swap__hop{
  position:absolute;
  top:-4px;
  right:-8px;
  background:#ffffff;
  border:1.5px solid var(--teal);
  color:var(--teal-deep);
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:800;
  padding:0.1rem 0.4rem;
  border-radius:10px;
}
.swap__avatar--b .swap__hop{border-color:var(--violet); color:var(--violet);}

.swap__name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.86rem;
  color:var(--ink-on-light);
  display:flex;
  align-items:center;
  gap:0.35rem;
  letter-spacing:-0.022em;
}
.swap__role{
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  color:var(--muted-on-light);
  background:#f0f3f2;
  border:1px solid var(--hair-on-light);
  padding:0.1rem 0.4rem;
  border-radius:10px;
}
.swap__pill-text{
  margin:0.3rem 0 0;
  font-family:var(--body);
  font-size:0.62rem;
  color:var(--muted-on-light);
}

.swap__speaker--a{color:var(--teal-deep) !important;}
.swap__speaker--b{color:var(--violet) !important;}

.swap__hud{
  align-self:center;
  background:rgba(122,111,240,0.1);
  border:1px dashed var(--violet);
  color:#4a3fb0;
  padding:0.35rem 0.8rem;
  border-radius:100px;
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--body);
  font-size:0.62rem;
  font-weight:700;
  opacity:0;
  transform:scale(0.9);
  transition:all 0.35s ease;
}
.swap__hud.is-visible{
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 14px rgba(122,111,240,0.22);
}
.swap__hud svg{animation:swap-spin 1.2s infinite linear;}
@keyframes swap-spin{100%{transform:rotate(360deg);}}

@media (prefers-reduced-motion: reduce){
  .swap__beam{animation:none;}
  .swap__hud svg{animation:none;}
}

@media (max-width: 860px){
  .handoff-v2__inner{grid-template-columns:1fr; gap:3rem; justify-items:center; text-align:center;}
  .handoff-v2__title, .handoff-v2__sub{max-width:none;}
}

/* ---- 12-warm-transfer ---- */
/* ---------- phone chassis ---------- */
.phone{
  position:relative;
  width:300px;
  height:610px;
  background:linear-gradient(160deg, #f4f6f5, #dfe6e4);
  border-radius:44px;
  padding:10px;
  box-shadow:
    0 0 0 3px #c7d0cd,
    0 0 0 5px #eef1f0,
    0 30px 70px rgba(13,31,28,0.22),
    0 10px 26px rgba(13,31,28,0.14);
  z-index:2;
}

.phone__btn{
  position:absolute;
  background:#b6c0bd;
  border-radius:3px;
}
.phone__btn--silent{left:-8px; top:92px; width:3px; height:22px; border-radius:3px 0 0 3px;}
.phone__btn--vol-up{left:-8px; top:128px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--vol-down{left:-8px; top:176px; width:3px; height:40px; border-radius:3px 0 0 3px;}
.phone__btn--power{right:-8px; top:144px; width:3px; height:56px; border-radius:0 3px 3px 0;}

.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  background:#ffffff;
  border-radius:36px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0.7rem 0.9rem 1.1rem;
  color:var(--ink-on-light);
}

.phone__status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:26px;
  font-family:var(--jakarta);
  font-size:0.68rem;
  font-weight:500;
  color:var(--muted-on-light);
  letter-spacing:-0.022em;
}

.phone__island{
  height:24px;
  background:#0d1f1c;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:0.4rem;
  padding:0 0.6rem;
}
.phone__island-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 6px var(--teal-bright);
  flex-shrink:0;
}
.phone__island-text{
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:700;
  color:var(--teal-bright);
  white-space:nowrap;
  transition:color 0.3s ease;
}
.phone__island-text.is-detected{color:#c9862c;}

.phone__caller{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:0.2rem;
}
.phone__avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.15rem;
  color:#ffffff;
  box-shadow:0 8px 18px rgba(23,184,171,0.32);
  margin-bottom:0.4rem;
  letter-spacing:-0.022em;
}
.phone__name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.98rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.phone__meta{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.15rem;
}
.phone__status-text{
  font-family:var(--body);
  font-size:0.68rem;
  color:var(--muted-on-light);
}
.phone__timer{
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:600;
  color:var(--teal-deep);
}

.phone__detect-pill{
  align-self:center;
  background:rgba(224,162,59,0.14);
  border:1px solid rgba(224,162,59,0.35);
  padding:0.35rem 0.75rem;
  border-radius:100px;
  display:flex;
  align-items:center;
  gap:0.35rem;
  font-family:var(--body);
  font-size:0.62rem;
  font-weight:700;
  color:#8a5f1a;
  margin:0.55rem 0 0.3rem;
  opacity:0;
  transform:scale(0.9);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__detect-pill.is-visible{
  opacity:1;
  transform:scale(1);
}
.phone__detect-pill strong{color:#6b4712;}

.phone__stream{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0.55rem;
  padding:0.3rem 0;
}

.phone__turn{
  background:#f4f7f6;
  border:1px solid var(--hair-on-light);
  border-radius:14px;
  padding:0.55rem 0.7rem;
  opacity:0;
  transform:translateY(10px) scale(0.97);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone__turn.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}

.phone__turn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.25rem;
}
.phone__speaker{
  display:flex;
  align-items:center;
  gap:0.3rem;
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.phone__speaker--caller{color:var(--muted-on-light);}
.phone__speaker--switch{color:#a97a1f;}
.phone__speaker--ai{color:var(--teal-deep);}

.phone__speech{
  margin:0;
  font-family:var(--body);
  font-size:0.72rem;
  line-height:1.4;
  color:var(--ink-on-light);
  font-weight:500;
}

.phone__wave{
  display:flex;
  align-items:center;
  gap:2px;
  height:9px;
}
.phone__wave i{
  width:2px;
  background:var(--teal);
  border-radius:2px;
  height:100%;
  animation:phone-wave 0.6s infinite alternate;
  font-style:normal;
}
.phone__wave i:nth-child(2){animation-delay:0.2s; height:60%;}
.phone__wave i:nth-child(3){animation-delay:0.4s; height:90%;}
@keyframes phone-wave{
  0%{transform:scaleY(0.3);}
  100%{transform:scaleY(1.1);}
}

.phone__controls{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.6rem;
  margin-bottom:0.7rem;
}
.phone__ctrl{
  background:#f0f3f2;
  border:1px solid var(--hair-on-light);
  border-radius:50%;
  width:48px;
  height:48px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--ink-on-light);
  font-family:var(--body);
  font-size:0.52rem;
  font-weight:600;
  gap:0.1rem;
}
.phone__ctrl--active{
  background:var(--teal-deep);
  color:#ffffff;
  border-color:var(--teal-deep);
}

.phone__end-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:0.2rem;
}
.phone__end{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#d94a3a;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(217,74,58,0.4);
  cursor:pointer;
}

.phone__home{
  width:100px;
  height:4px;
  background:rgba(13,31,28,0.2);
  border-radius:10px;
  margin:0.4rem auto 0;
}

@media (prefers-reduced-motion: reduce){
  .phone__wave i{animation:none;}
}

@media (max-width: 480px){
  .phone{width:88vw; max-width:300px;}
}


.warm-v2{
  align-items:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 20%, rgba(255,255,255,0.9), transparent 65%),
    linear-gradient(160deg, #eef8f6 0%, #e6f2fb 50%, #dce9ff 100%);
}

.warm-v2__inner{
  max-width:1080px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw;
  align-items:center;
}

.warm-v2__eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin:0 0 0.8rem;
}

.warm-v2__title{
  font-family:var(--jakarta);
  font-weight:500;
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  line-height:1.24;
  letter-spacing:-0.022em;
  color:var(--ink-on-light);
  max-width:17ch;
  text-wrap:balance;
  margin:0;
}

.warm-v2__sub{
  margin-top:1.1rem;
  max-width:40ch;
  color:var(--muted-on-light);
  font-family:var(--body);
  font-size:1.02rem;
  line-height:1.6;
}

.warm-v2__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.warm-v2__glow{
  position:absolute;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(224,162,59,0.16) 0%, rgba(23,184,171,0.08) 45%, transparent 70%);
  filter:blur(50px);
  pointer-events:none;
  z-index:1;
}

/* ---------- AI screen ---------- */
.warm__ai-screen{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:10;
}
.warm__ai-screen.is-removed{
  transform:translateY(70px) scale(0.7);
  opacity:0;
  pointer-events:none;
  filter:blur(6px);
}

.warm__ai-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:0.2rem;
}
.warm__ai-avatar{
  width:60px;
  height:60px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--teal-bright), var(--teal-deep) 75%);
  border:3px solid rgba(23,184,171,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  margin-bottom:0.4rem;
  box-shadow:0 8px 18px rgba(23,184,171,0.28);
}
.warm__ai-name{
  margin:0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:0.92rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}
.warm__ai-pill{
  margin:0.2rem 0 0;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:700;
  color:var(--muted-on-light);
  background:#f4f7f6;
  border:1px solid var(--hair-on-light);
  padding:0.1rem 0.5rem;
  border-radius:10px;
}

.warm__speaker--ai{color:var(--teal-deep) !important;}
.phone__end-inline{background:#d94a3a; border-color:#d94a3a;}

/* ---------- human reveal ---------- */
.warm__human{
  position:absolute;
  inset:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  padding:0 0.8rem;
  opacity:0;
  transform:scale(0.7) translateY(30px);
  pointer-events:none;
  transition:all 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:20;
}
.warm__human.is-active{
  opacity:1;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}

.warm__avatar-frame{
  position:relative;
  width:100px;
  height:100px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--amber), var(--teal));
  padding:3px;
  box-shadow:0 16px 34px rgba(224,162,59,0.3), 0 0 24px rgba(23,184,171,0.16);
  animation:warm-breathe 3s ease-in-out infinite alternate;
  display:flex;
  align-items:center;
  justify-content:center;
}
@keyframes warm-breathe{
  0%{transform:translateY(0);}
  100%{transform:translateY(-6px);}
}

.warm__avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:3px solid #ffffff;
}

.warm__orbit{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px dashed var(--amber);
  animation:warm-orbit 8s linear infinite;
}
@keyframes warm-orbit{100%{transform:rotate(360deg);}}

.warm__headset{
  position:absolute;
  bottom:0;
  right:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--amber);
  border:2.5px solid #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  box-shadow:0 4px 10px rgba(224,162,59,0.4);
}

.warm__name{
  margin:0.8rem 0 0;
  font-family:var(--jakarta);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink-on-light);
  letter-spacing:-0.022em;
}

.warm__role{
  margin:0.3rem 0 0;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:700;
  color:#8a5f1a;
  background:rgba(224,162,59,0.14);
  border:1px solid rgba(224,162,59,0.32);
  padding:0.25rem 0.65rem;
  border-radius:100px;
}
.warm__live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 6px rgba(224,162,59,0.6);
  animation:warm-blink 1.2s infinite;
}
@keyframes warm-blink{
  0%,100%{opacity:1;}
  50%{opacity:0.3;}
}

.warm__speech{
  margin-top:0.9rem;
  width:100%;
  max-width:230px;
  background:#ffffff;
  border:1.5px solid rgba(224,162,59,0.3);
  border-radius:16px;
  padding:0.7rem 0.85rem;
  box-shadow:0 14px 28px rgba(224,162,59,0.1);
  text-align:left;
}
.warm__speech-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.3rem;
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#8a5f1a;
}
.warm__speech p{
  margin:0;
  font-family:var(--body);
  font-size:0.74rem;
  line-height:1.42;
  color:var(--ink-on-light);
  font-weight:600;
}

@media (prefers-reduced-motion: reduce){
  .warm__avatar-frame, .warm__orbit, .warm__live-dot{animation:none;}
}

@media (max-width: 860px){
  .warm-v2__inner{grid-template-columns:1fr; gap:3rem; justify-items:center; text-align:center;}
  .warm-v2__title, .warm-v2__sub{max-width:none;}
}

/* Phone: the three tool cards no longer fit side by side, so they wrap into two
   columns and the stage grows with them instead of clipping the first card. */
@media (max-width: 560px){
  .tools-v2__stage{width:100%; height:auto; min-height:0; padding:1rem 0 1.5rem;}
  .tools-v2__cards{flex-wrap:wrap; gap:.75rem; width:100%;}
  .tools-v2__card{width:calc(50% - .375rem); max-width:170px;}
}