/* Scope most styles to .saxapple to avoid conflicts */
:root{
  --brand: var(--saxapple-brand, #f79421);
  --glass-blur: 16px;
  --glass-radius: 22px;
  --container-max: 1200px;
}
.saxapple .container{ max-width: var(--container-max); }
a{ text-decoration: none; }

/* Glass & header/footer are already scoped */
.glass-pane{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius: var(--glass-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* Header - Apple-like */
.saxapple-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}
.saxapple-header .navbar{ padding-block:.5rem }
.saxapple-header .navbar-brand{ font-weight:800; letter-spacing:-.02em }
.saxapple-header .navbar-nav .nav-link{ color:#0b1220; font-weight:600; border-radius:14px; padding:.5rem .75rem }
.saxapple-header .navbar-nav .nav-link:hover{ background: rgba(0,0,0,.06); color:#0b1220 }
.saxapple-header .btn{ border-radius:16px }

/* Hero Apple */
.hero-apple{ padding: clamp(48px, 10vw, 120px) 0; position: relative }
.hero-apple .hero-shape{
  position:absolute; inset:auto -10% -30% -10%; height:40vh;
  background: radial-gradient(60% 60% at 50% 50%, rgba(247,148,33,.25), rgba(247,148,33,0));
  filter: blur(40px);
}
.device-mock .bg-gradient{
  background: linear-gradient(135deg, rgba(247,148,33,.35), rgba(99,102,241,.25));
  border-radius: 16px;
}

/* Section head */
.saxapple .section-head h2{ font-weight:800; letter-spacing:-.02em }
.saxapple .section-head p{ color: rgba(0,0,0,.6) }

/* Footer */
.saxapple-footer{ background: rgba(255,255,255,.6); backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,.65) }
.saxapple-footer .nav-link{ color: inherit }
.saxapple-footer .nav-link:hover{ text-decoration: underline }

/* Dark mode (scoped on body class to avoid other plugins) */
body.saxapple-dark{ background-color:#0b1220; color:#e7ecf3 }
body.saxapple-dark .glass-pane{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); box-shadow:0 10px 30px rgba(0,0,0,.45) }
body.saxapple-dark .saxapple-header{ background: rgba(10,14,22,.65); border-color: rgba(255,255,255,.12) }
body.saxapple-dark .navbar .nav-link{ color:#e7ecf3 }
body.saxapple-dark .navbar .nav-link:hover{ background: rgba(255,255,255,.06) }
body.saxapple-dark .saxapple-footer{ background: rgba(10,14,22,.65); border-color: rgba(255,255,255,.12) }
body.saxapple-dark .text-muted{ color: rgba(231,236,243,.75) !important }

/* Animations */
.reveal{ opacity:0; transform: translateY(12px); transition: all .5s cubic-bezier(.2,.7,0,1) }
.reveal.in{ opacity:1; transform:none }

/* Buttons */
.btn-primary{ background: var(--brand); border-color: var(--brand) }
.btn-primary:hover{ filter: brightness(1.05) }
.btn-outline-secondary{ border-color: rgba(0,0,0,.25) }
body.saxapple-dark .btn-outline-secondary{ color:#e7ecf3; border-color: rgba(255,255,255,.25) }

/* Helpers */
.object-fit-cover{ object-fit: cover; }