/* SaddleUp Mobile App section */
:root{
  --bg-deep:#0e0e0e;
  --edge:#1a1a1a;
  --text-primary:#f7f7f7;
  --text-muted:#9b9b9b;
  --accent-amber:#C47B2A;
  --accent-neon:#FFC06A;
  --ring-amber:rgba(196,123,42,.25);
}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Section background and layout */
.appTeaser{position:relative;color:var(--text-primary);background:
  radial-gradient(900px 600px at 20% 30%, rgba(196,123,42,.12), rgba(196,123,42,0) 60%),
  linear-gradient(180deg,#111316,#0b0d10);
}
.appTeaser__inner{max-width:1200px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1rem;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:768px){.appTeaser__inner{grid-template-columns:1.08fr .92fr}}

/* Ambient headline line */
.appTeaser__copy h2{font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.01em;margin:0}
.appTeaser__copy h2::after{content:"";display:block;margin-top:.6rem;height:2px;background:linear-gradient(90deg, rgba(255,192,106,.9), rgba(255,192,106,0));opacity:.6}
.appTeaser__copy p{color:var(--text-muted);margin:.9rem 0 1.2rem}

/* Title row (heading + dev badge) */
.appTeaser__title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .6rem}
.appTeaser__title .devBadge{position:static;top:auto;left:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* Device 3D wrapper */
.device3D{position:relative;display:flex;align-items:center;justify-content:center;padding:1rem 0;opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.appTeaser.is-visible .device3D{opacity:1;transform:none}

.phone{perspective:1200px;will-change:transform}
.phone__bezel{position:relative;width:min(68vw,420px);height:min(78vh,620px);max-width:420px;border-radius:28px;background:#0b0e12;border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:filter .3s ease}
.phone__bezel::before{content:"";position:absolute;inset:1px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08), rgba(255,255,255,.02));pointer-events:none}
.phone__screen{position:relative;overflow:hidden;border-radius:22px;width:90%;height:88%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone__screen img, .phone__screen video{display:block;width:100%;height:100%;object-fit:cover}

/* Optional notch */
.phone__bezel::after{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:30%;height:10px;background:#0d1014;border-radius:0 0 14px 14px;box-shadow:0 1px 0 rgba(255,255,255,.04)}

/* Badge */
.devBadge{position:absolute;top:.25rem;left:.25rem;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .6rem;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 20px rgba(0,0,0,.35);font-weight:600;z-index:20}
.devBadge__dot{width:8px;height:8px;border-radius:999px;background:var(--accent-amber);box-shadow:0 0 0 0 rgba(196,123,42,.6);animation:devPulse 2s ease-in-out infinite}
.devBadge__text{white-space:nowrap;overflow:hidden;display:inline-block;border-right:2px solid rgba(255,255,255,.0)}
@keyframes devPulse{0%{box-shadow:0 0 0 0 rgba(196,123,42,.6)}100%{box-shadow:0 0 0 10px rgba(196,123,42,0)}}

/* Copy column */
.appTeaser__copy{opacity:0;transform:translateY(12px);transition:opacity .6s ease .1s, transform .6s ease .1s}
.appTeaser.is-visible .appTeaser__copy{opacity:1;transform:none}

/* Progress shimmer */
.devProgress{margin:1rem 0 1.25rem;height:8px;border-radius:999px;overflow:hidden;position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);max-width:460px}
.devProgress__bar{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg, rgba(196,123,42,.65) 0 14px, rgba(196,123,42,.28) 14px 28px);background-size:200% 100%;animation:barber 9s linear infinite}
@keyframes barber{to{background-position:200% 0}}

/* Store CTAs */
.storeCtas{display:flex;gap:.65rem;flex-wrap:wrap}
.storeBtn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e5e7eb;text-decoration:none;transition:transform .2s ease, box-shadow .25s ease}
.storeBtn:hover{transform:scale(1.02);box-shadow:0 0 0 4px var(--ring-amber), 0 16px 40px rgba(0,0,0,.45)}
.storeBtn:focus-visible{outline:3px solid var(--accent-amber);outline-offset:3px}
.storeBtn[aria-disabled="true"]{cursor:not-allowed}
.storeBtn img{width:18px;height:18px;display:inline-block;filter:brightness(0) invert(1)}

/* Interactions */
.appTeaser .phone[data-tilt]:hover .phone__bezel{filter:brightness(1.04)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .device3D,.appTeaser__copy{opacity:1 !important;transform:none !important}
  .devBadge__dot{animation:none}
  .devProgress__bar{animation-duration:16s}
}

/* Breakpoints */
@media(min-width:1024px){
  .phone__bezel{height:600px}
}
@media(min-width:768px) and (max-width:1023.98px){
  .phone__bezel{height:520px}
}
@media(max-width:767.98px){
  .devBadge{left:.5rem;top:.5rem}
  /* Tighter, more realistic device size/aspect on small screens */
  .phone__bezel{width:min(82vw,360px);height:auto;aspect-ratio:10/16}
  .phone__screen{width:88%;height:84%}
  .phone__bezel::after{top:8px;height:8px}
}