/* Site-wide frosted glass + mirror highlights; 3D background behind content */

.apple-site {
  background: transparent;
}

.glass-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 20% 20%, rgba(186, 230, 253, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 100% 70% at 85% 30%, rgba(233, 213, 255, 0.45) 0%, transparent 48%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 207, 232, 0.35) 0%, transparent 45%),
    linear-gradient(165deg, #eef6fc 0%, #f4f0ff 42%, #fdf2f8 100%);
  perspective: 1200px;
  perspective-origin: 50% 35%;
}

.dark .glass-scene-bg {
  background:
    radial-gradient(ellipse 120% 80% at 20% 15%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 70% at 85% 25%, rgba(167, 139, 250, 0.14) 0%, transparent 48%),
    radial-gradient(ellipse 80% 55% at 50% 95%, rgba(244, 114, 182, 0.1) 0%, transparent 45%),
    linear-gradient(165deg, #050508 0%, #0c0a12 45%, #080c10 100%);
}

.glass-scene-floor {
  position: absolute;
  left: -55%;
  right: -55%;
  bottom: -38%;
  height: 72%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotateX(74deg) translateZ(-100px);
  transform-origin: center bottom;
  mask-image: radial-gradient(ellipse 58% 72% at 50% 100%, black 0%, transparent 74%);
  opacity: 0.55;
}

.dark .glass-scene-floor {
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.1) 1px, transparent 1px);
  opacity: 0.4;
}

.glass-scene-orb {
  position: absolute;
  border-radius: 50%;
}

.glass-scene-orb--1 {
  width: min(44vw, 340px);
  height: min(44vw, 340px);
  top: 6%;
  right: -6%;
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.5), transparent 58%);
  box-shadow:
    0 0 100px rgba(125, 211, 252, 0.25),
    inset 0 0 80px rgba(255, 255, 255, 0.35);
}

.dark .glass-scene-orb--1 {
  background: radial-gradient(circle at 32% 32%, rgba(34, 211, 238, 0.35), transparent 58%);
  box-shadow:
    0 0 90px rgba(34, 211, 238, 0.2),
    inset 0 0 60px rgba(255, 255, 255, 0.06);
}

.glass-scene-orb--2 {
  width: min(30vw, 260px);
  height: min(30vw, 260px);
  bottom: 12%;
  left: -7%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.42), transparent 55%);
  box-shadow: 0 0 80px rgba(196, 181, 253, 0.22);
}

.dark .glass-scene-orb--2 {
  background: radial-gradient(circle at 40% 40%, rgba(167, 139, 250, 0.28), transparent 55%);
}

.glass-scene-orb--3 {
  width: 140px;
  height: 140px;
  top: 42%;
  left: 8%;
  background: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.55), transparent 52%);
  box-shadow: inset -8px -8px 24px rgba(255, 255, 255, 0.4);
}

.dark .glass-scene-orb--3 {
  background: radial-gradient(circle at 28% 28%, rgba(244, 114, 182, 0.35), transparent 52%);
}

/* Content sits above scene */
.apple-content {
  position: relative;
  z-index: 1;
}

/* ---- Mirror glass surfaces ---- */
.apple-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dark .apple-nav {
  background: linear-gradient(180deg, rgba(28, 28, 32, 0.55) 0%, rgba(18, 18, 22, 0.35) 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.apple-nav .glass-panel-dropdown {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.38) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 16px 48px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.dark .apple-nav .glass-panel-dropdown {
  background: linear-gradient(145deg, rgba(40, 40, 48, 0.75) 0%, rgba(24, 24, 30, 0.55) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.apple-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dark .apple-footer {
  background: linear-gradient(180deg, rgba(22, 22, 28, 0.6) 0%, rgba(12, 12, 16, 0.45) 100%) !important;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.apple-section-alt {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dark .apple-section-alt {
  background: rgba(255, 255, 255, 0.03) !important;
}

.apple-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.apple-card:hover {
  box-shadow:
    0 20px 56px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dark .apple-card {
  background: linear-gradient(145deg, rgba(42, 42, 50, 0.55) 0%, rgba(24, 24, 30, 0.38) 100%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dark .apple-card:hover {
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.apple-tile {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.18) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 32px rgba(15, 23, 42, 0.06);
}

.apple-tile:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 40px rgba(15, 23, 42, 0.1);
}

.dark .apple-tile {
  background: linear-gradient(145deg, rgba(38, 38, 46, 0.52) 0%, rgba(22, 22, 28, 0.36) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

.dark .apple-tile:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

.apple-tile-avatar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dark .apple-tile-avatar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

.apple-page-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.dark .apple-page-header {
  background: linear-gradient(180deg, rgba(32, 32, 38, 0.55) 0%, rgba(18, 18, 22, 0.35) 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.apple-prose {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.16) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 16px 48px rgba(15, 23, 42, 0.06);
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.dark .apple-prose {
  background: linear-gradient(180deg, rgba(36, 36, 44, 0.5) 0%, rgba(20, 20, 26, 0.35) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

.apple-media-glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 40px rgba(15, 23, 42, 0.08);
}

.dark .apple-media-glass {
  background: linear-gradient(145deg, rgba(40, 40, 48, 0.45) 0%, rgba(24, 24, 30, 0.3) 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

.apple-media-glass img {
  border-radius: 1rem;
}

/* CTA — dark mirror slab */
.apple-cta {
  background: linear-gradient(165deg, rgba(15, 15, 20, 0.88) 0%, rgba(25, 22, 35, 0.82) 50%, rgba(12, 18, 28, 0.9) 100%) !important;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 -20px 60px rgba(0, 0, 0, 0.2);
}

.apple-cta .apple-btn-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 247, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.apple-cta .apple-btn-primary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
}

/* Buttons — glassy */
.apple-btn-primary {
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.95) 0%, rgba(0, 97, 200, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 24px rgba(0, 113, 227, 0.25);
}

.apple-btn-primary:hover {
  background: linear-gradient(180deg, #0077ed 0%, #0066cc 100%);
}

.apple-btn-secondary {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(0, 113, 227, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dark .apple-btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Plain sections: slight lift so grid shows through */
.apple-section:not(.apple-section-alt) {
  background: transparent;
}