/* Keep the original mobile layout; correct the RTL desktop column placement. */
@media (min-width: 761px) {
  .demo { grid-template-areas: "copy media" "stats stats"; row-gap: 24px; }
  .demo-copy { grid-area: copy; }
  .demo-media { grid-area: media; }
  .stats { grid-area: stats; position: static; width: 100%; }
  .feature-card { grid-template-columns: minmax(0, 1fr) 46%; }
  .feature-copy { grid-column: 1; padding: 24px 28px 24px 64px; }
  .feature-card > button { position: absolute; left: 14px; }
  .feature-card.expanded .feature-detail { right: 28px; left: calc(46% + 24px); }
}
button { cursor: pointer; }
.reference-menu { display: grid; gap: 16px; padding: 20px; background: var(--surface); }
.reference-menu[hidden] { display: none; }
.demo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 3; }

.brand{display:flex;align-items:center;line-height:1}
.brand img{display:block;width:64px;height:64px;object-fit:contain}
.hero-content{width:min(1100px,100%)}
.hero-brand-logo{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto 20px}
.hero h1{white-space:nowrap;font-size:clamp(24px,3.5vw,48px)}
@media(max-width:760px){.brand img{width:52px;height:52px}.hero-brand-logo{width:120px;height:120px;margin-bottom:16px}.hero h1{font-size:clamp(12px,3.65vw,27px)}}
.hero-content .prompt{max-width:700px;margin-inline:auto}

/* Soft dark backdrop improves readability without a hard panel edge. */
.hero-content::before{content:"";position:absolute;inset:-30px -35px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,0) 76%);filter:blur(18px)}
.hero h1,.hero-content>p{text-shadow:0 2px 14px rgba(0,0,0,.8)}
@media(max-width:760px){.hero-content::before{inset:-20px -12px;filter:blur(12px)}}
.hero h1 strong{text-shadow:none}

@media(max-width:760px){
  .hero{justify-content:flex-start;padding:76px 18px 72px}
  .hero-brand-logo{width:200px;height:200px;margin:0 auto 4px}
  .hero h1{white-space:normal;font-size:clamp(25px,6.8vw,36px);line-height:1.6;text-wrap:balance}
  .hero-content>p{font-size:15px;line-height:1.9;margin:12px auto 22px}
  .hero-content .prompt{height:60px}
  .prompt input{font-size:16px;padding-inline:10px}
  .suggestions{gap:8px;margin-top:14px}
  .suggestions button{font-size:12px;padding:8px 12px}
}

.demo-qr{gap:18px;align-items:center}.demo-qr img{width:112px;height:112px;object-fit:contain;background:white;padding:8px;border-radius:12px}.demo-qr p{font-size:14px;line-height:1.9;color:var(--foreground);margin:0}.demo-qr small{display:block;font-size:11px;color:var(--muted-foreground);margin-top:4px}[data-ar-link]:disabled{opacity:.55;cursor:default}@media(max-width:760px){.demo-qr{display:none}}