/* First-site hero: keep the original copy and actions, enrich the artwork. */
body[data-page="home"] .hero {
  background: #dff6b8 url("assets/hero-landscape.svg") center center / cover no-repeat;
}
.hero::before, .hero::after { display:none; }
.hero .hero-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-atmosphere::before, .hero-atmosphere::after {
  content:none;
}
.hero-atmosphere::after { left:-52%; top:44%; width:1700px; height:760px; transform:rotate(-20deg); border-color:#ffffff60; box-shadow:0 -25px 0 #ffffff08,0 -50px 0 #ffffff08; }
.hero .hero-right { position:relative; isolation:isolate; }
.hero .hero-right::before {
  content:""; position:absolute; width:470px; height:100px; bottom:4px; left:50%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse,#76b77b30 0%,#f2ffe75c 52%,transparent 72%); z-index:-1;
}
.hero .iphone-mockup { z-index:2; margin-right:164px; }
.hero .virtual-companion {
  position:absolute; width:340px; height:620px; object-fit:contain; right:-40px; bottom:0;
  z-index:1; pointer-events:none; filter:drop-shadow(14px 18px 15px #326b3626);
}
.hero .companion-greeting {
  display:none;
  position:absolute; z-index:4; right:-5px; top:-15px; padding:11px 18px;
  background:#fffffff0; border:1px solid #fff; border-radius:19px 19px 19px 5px;
  box-shadow:0 8px 26px #426c3910; color:var(--ink); font-size:14px; letter-spacing:.5px;
}
.hero .companion-greeting::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#89c851; margin-right:8px; vertical-align:2px; }

/* Keep the original button design; refine hover colors only. */
.hero .download-btn:first-child:hover {
  background-color:#35584b;
  color:#fff;
}
.hero .download-btn:last-child:hover {
  background-color:#f4ffe5;
  color:#203a30;
}
@media(min-width:1500px) { .hero .virtual-companion { width:350px; height:630px; right:-44px; } }
@media(max-width:1100px) and (min-width:969px) {
  .hero .iphone-mockup { margin-right:110px; }
  .hero .virtual-companion { right:-28px; width:300px; height:550px; }
  .hero .companion-greeting { right:-12px; top:12px; }
}
@media(max-width:968px) {
  body[data-page="home"] .hero { background-position:63% center; }
  .hero .hero-right { max-width:460px; }
  .hero .virtual-companion { right:-20px; }
  .hero .companion-greeting { right:8px; top:-30px; }
}
@media(max-width:600px) {
  body[data-page="home"] .hero { background-size:auto 100%; background-position:58% center; }
  .hero .hero-right:has(.iphone-mockup) { min-height:420px; max-width:355px; }
  .hero .iphone-mockup { width:195px; flex-basis:195px; margin-right:112px; padding:7px; border-radius:35px; }
  .hero .iphone-screen { border-radius:28px; }
  .hero .virtual-companion { width:185px; height:390px; right:-5px; bottom:0; }
  .hero .companion-greeting { right:0; top:-18px; font-size:12px; padding:8px 12px; }
  .hero .hero-right::before { width:340px; bottom:0; }
}