/* Apple-inspired presentation layer for the Deepvizor glass prototype. */

body.apple-pro {
  --apple-bg: #000;
  --apple-panel: #101010;
  --apple-text: #f5f5f7;
  --apple-muted: #86868b;
  --apple-blue: #2997ff;
  background: var(--page);
  color: var(--apple-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.apple-pro .section-wide {
  width: min(calc(100% - 88px), 1280px);
}

.apple-pro .eyebrow {
  color: #86868b;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}

.apple-pro .detector-section {
  margin: 0;
  padding: clamp(110px, 11vw, 170px) 0;
  border-radius: 0;
  background: #000;
  color: #f5f5f7;
}
.apple-pro .detector-heading-row {
  align-items: flex-start;
  margin-bottom: 68px;
}
.apple-pro .detector-heading-row h2 {
  max-width: 880px;
  margin: 16px 0 13px;
  font-size: clamp(54px, 6vw, 92px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.065em;
}
.apple-pro .detector-heading-row p { color: #86868b; font-size: 18px; }
.apple-pro .detector-total strong {
  font-size: clamp(90px, 10vw, 150px);
  color: #f5f5f7;
  -webkit-text-stroke: 0;
}
.apple-pro .detector-total strong span { color: #f5f5f7; -webkit-text-stroke: 0; }
.apple-pro .detector-total > span { color: #86868b; }
.apple-pro .detector-carousel { gap: 22px; overflow-x: auto; }
.apple-pro .detector-card {
  min-width: calc((100% - 44px) / 3);
  height: 600px;
  border: 0;
  border-radius: 30px;
  background: #111;
  box-shadow: 0 20px 55px rgba(0,0,0,.13);
}
.apple-pro .detector-card>a>img { filter: saturate(.82) brightness(.78); }
.apple-pro .detector-card:hover img,
.apple-pro .detector-card:focus-within img { filter: saturate(.9) brightness(.83); transform: scale(1.025); }
.apple-pro .detector-photo-shade { background: linear-gradient(180deg,#0002 0%,transparent 28%,#0006 62%,#050505 100%); }
.apple-pro .detector-category {
  border: 0;
  background: rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.apple-pro .detector-signal { display: none; }
.apple-pro .detector-target { border-color: rgba(255,255,255,.76); }
.apple-pro .detector-target span { background: #fff; color: #111; }
.apple-pro .detector-content { min-height: 175px; padding: 30px; }
.apple-pro .detector-content strong { font-size: 29px; }
.apple-pro .detector-content small { color: #b8b8bd; font-size: 13px; }
.apple-pro .detector-open { color: #2997ff; opacity: 1; transform: none; }
.apple-pro .outline-link {
  min-height: 45px;
  border-color: #424245;
  border-radius: 999px;
  color: #f5f5f7;
}
.apple-pro .outline-link:hover { background: #f5f5f7; border-color: #f5f5f7; color: #1d1d1f; }
.apple-pro .carousel-controls { color: #f5f5f7; }
.apple-pro .carousel-controls button {
  border: 0;
  background: #1c1c1e;
  color: #f5f5f7;
}

.apple-pro .parallax-glass-section {
  min-height: 100vh;
  padding-block: clamp(130px, 15vw, 220px);
  background:
    radial-gradient(circle at 70% 16%, rgba(55,85,158,.14), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(31,64,128,.12), transparent 33%),
    #000;
}
.apple-pro .parallax-glass-section > .section-wide {
  width: min(calc(100% - 110px), 1180px);
  padding: clamp(58px, 7vw, 100px);
  border-color: rgba(255,255,255,.13);
  border-radius: clamp(30px, 4vw, 54px);
  background: linear-gradient(145deg, rgba(37,37,41,.54), rgba(10,10,12,.38));
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow: 0 60px 180px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06);
}
.apple-pro .parallax-glass-section > .section-wide::before { display: none; }
.apple-pro .parallax-grid { opacity: .13; background-size: 68px 68px; }
.apple-pro .parallax-float {
  border-color: rgba(255,255,255,.14);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(48,48,54,.82), rgba(11,11,14,.75));
  box-shadow: 0 34px 100px rgba(0,0,0,.42);
}
.apple-pro .parallax-float .pf-head { color: #a1a1a6; }
.apple-pro .parallax-float .pf-head::after { color: #2997ff; }
.apple-pro .parallax-float .pf-lines i { background: linear-gradient(90deg, rgba(41,151,255,.88), rgba(41,151,255,.08)); }

.apple-pro .overview-intro {
  display: block;
  margin: 24px 0 70px;
}
.apple-pro .overview-intro h2,
.apple-pro .workflow-section h2,
.apple-pro .practice-section h2 {
  max-width: 980px;
  margin: 0 0 32px;
  color: #f5f5f7;
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 650;
  line-height: .96;
  letter-spacing: -.065em;
}
.apple-pro .overview-intro p,
.apple-pro .workflow-heading > p {
  max-width: 660px;
  margin: 0;
  color: #a1a1a6;
  font-size: 19px;
  line-height: 1.5;
}
.apple-pro .overview-grid { gap: 18px; }
.apple-pro .overview-grid article {
  min-height: 320px;
  padding: 30px;
  border-color: rgba(255,255,255,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
}
.apple-pro .overview-grid article > span,
.apple-pro .workflow-steps article span,
.apple-pro .practice-grid article span { color: #2997ff; }
.apple-pro .overview-grid h3 { margin-top: 78px; font-size: 28px; }
.apple-pro .overview-grid p { color: #a1a1a6; }

.apple-pro .faq-section,
.apple-pro .compat-section,
.apple-pro .scenario-section,
.apple-pro .use-cases-section {
  padding: clamp(110px, 11vw, 170px) 0;
  background: #000;
  color: #f5f5f7;
}
.apple-pro .faq-layout { align-items: stretch; gap: 70px; }
.apple-pro .faq-illustration {
  min-height: 620px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 32px;
  background: #141416;
}
.apple-pro .faq-illustration img { filter: invert(1) grayscale(1); mix-blend-mode: screen; opacity: .82; }
.apple-pro .faq-copy h2,
.apple-pro .scenario-section h2,
.apple-pro .compat-section h2,
.apple-pro .use-cases-section h2 {
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.06em;
}
.apple-pro .faq-item { border-color: #333336; }
.apple-pro .faq-item summary { color: #f5f5f7; font-size: 18px; }
.apple-pro .faq-item summary span { color: #86868b; }
.apple-pro .faq-item p { color: #a1a1a6; }

.apple-pro .workflow-heading { display: block; }
.apple-pro .workflow-heading h2 { margin: 0 0 28px; }
.apple-pro .workflow-heading > p { margin: 0 0 70px; }
.apple-pro .workflow-graphic { opacity: .7; }
.apple-pro .workflow-steps { gap: 12px; border: 0; }
.apple-pro .workflow-steps article {
  min-height: 330px;
  margin: 0;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
}
.apple-pro .workflow-steps h3 { margin-top: 100px; font-size: 23px; }
.apple-pro .workflow-steps p { color: #a1a1a6; }

.apple-pro .scenario-section { overflow: hidden; }
.apple-pro .scenario-section .section-wide:first-child { margin-bottom: 48px; }
.apple-pro .scenario-intro { color: #a1a1a6; font-size: 19px; }
.apple-pro .scenario-track {
  gap: 22px;
  padding-left: max(44px, calc((100vw - 1280px)/2));
  padding-right: max(44px, calc((100vw - 1280px)/2));
}
.apple-pro .scenario-card {
  flex-basis: clamp(280px, 28vw, 390px);
  height: 300px;
  border-radius: 24px;
  background: #111;
}
.apple-pro .scenario-card:after { background: linear-gradient(transparent 40%, rgba(0,0,0,.82)); }
.apple-pro .scenario-card strong { left: 24px; bottom: 26px; font-size: clamp(21px, 2vw, 28px); }
.apple-pro .scenario-card span { left: 24px; top: 22px; color: rgba(255,255,255,.75); }
.apple-pro .scenario-actions { color: #86868b; }
.apple-pro .scenario-actions button { border: 0; background: #1c1c1e; color: #f5f5f7; }

.apple-pro .compat-section { border-top: 1px solid rgba(255,255,255,.06); }
.apple-pro .compat-section .eyebrow,
.apple-pro .use-cases-section .eyebrow { color: #86868b; }
.apple-pro .compat-intro p,
.apple-pro .use-cases-heading > p { color: #a1a1a6; font-size: 18px; }
.apple-pro .compat-section .text-link,
.apple-pro .use-cases-section .text-link { color: #2997ff; border-color: transparent; }
.apple-pro .integration-brands,
.apple-pro .integration-technologies article,
.apple-pro .compat-protocols,
.apple-pro .use-cases-grid > a {
  border-color: rgba(255,255,255,.09);
  border-radius: 26px;
  background: #111113;
  color: #f5f5f7;
}
.apple-pro .integration-brands-heading,
.apple-pro .integration-technologies-heading,
.apple-pro .compat-protocols,
.apple-pro .use-cases-grid > a p { color: #a1a1a6; }
.apple-pro .integration-brand img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .36;
}
.apple-pro .integration-brand {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.apple-pro .brand-controls button {
  border-color: #3a3a3c;
  background: #1c1c1e;
  color: #f5f5f7;
}
.apple-pro .technology-index,
.apple-pro .technology-tag,
.apple-pro .use-cases-grid > a > span { color: #86868b; }
.apple-pro .integration-technologies h3,
.apple-pro .use-cases-grid h3 { color: #f5f5f7; }
.apple-pro .integration-technologies p { color: #a1a1a6; }

.apple-pro .practice-section.parallax-glass-section {
  background:
    radial-gradient(circle at 75% 25%, rgba(35,84,158,.13), transparent 32%),
    #000;
}
.apple-pro .practice-section.parallax-glass-section > .section-wide {
  background: linear-gradient(145deg, rgba(32,32,36,.56), rgba(8,8,10,.40));
}
.apple-pro .practice-heading { display: block; }
.apple-pro .practice-heading h2 { margin: 22px 0 28px; }
.apple-pro .practice-heading .text-link {
  margin: 0 0 52px;
  color: #2997ff;
  border: 0;
  font-size: 16px;
}
.apple-pro .practice-grid { gap: 18px; }
.apple-pro .practice-grid article {
  min-height: 390px;
  padding: 34px;
  border-color: rgba(255,255,255,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
}
.apple-pro .practice-grid h3 { margin-top: 120px; font-size: 30px; }
.apple-pro .practice-grid p { color: #a1a1a6; font-size: 15px; }

/* Workflow: linear data-flow motion behind the frosted panel. */
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(34,112,220,.10), transparent 38%),
    #020508;
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .parallax-behind::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,165,255,.18), rgba(255,255,255,.35), rgba(88,165,255,.18), transparent);
  box-shadow: 0 0 34px rgba(41,151,255,.20);
  transform: translateY(var(--pg-grid-y));
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .parallax-grid {
  opacity: .08;
  background-size: 84px 84px;
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .pf-a {
  left: 1%; top: 20%; width: min(23vw, 320px); height: 185px;
  transform: translate3d(var(--pg-a-x), var(--pg-a-y), 80px) rotate(-2deg);
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .pf-b {
  right: 6%; top: 15%; width: min(19vw, 260px); height: 145px;
  transform: translate3d(var(--pg-b-x), var(--pg-b-y), 120px) rotate(2deg);
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .pf-c {
  left: 10%; bottom: 12%; width: min(18vw, 250px); height: 140px;
  transform: translate3d(var(--pg-c-x), var(--pg-c-y), 110px) rotate(1deg);
}
.apple-pro .workflow-section[data-glass-parallax="flow-glass"] .pf-d {
  right: 2%; bottom: 13%; width: min(24vw, 340px); height: 190px;
  transform: translate3d(var(--pg-d-x), var(--pg-d-y), 70px) rotate(-2deg);
}

/* Practice: orbiting depth layers, softer and more organic than workflow. */
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .parallax-behind::before,
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .parallax-behind::after {
  content: "";
  position: absolute;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(108,134,255,.11);
  box-shadow: inset 0 0 100px rgba(41,151,255,.055), 0 0 90px rgba(41,151,255,.04);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .parallax-behind::before {
  left: -8vw;
  top: 5%;
  transform: translate3d(var(--pg-a-x), var(--pg-a-y), 0) rotate(18deg);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .parallax-behind::after {
  right: -10vw;
  bottom: -8%;
  transform: translate3d(var(--pg-d-x), var(--pg-d-y), 0) scale(.78);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .parallax-grid {
  opacity: .06;
  transform: translate3d(0, var(--pg-grid-y), -180px) scale(1.22) rotate(4deg);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .pf-a {
  left: 4%; top: 7%; width: min(25vw, 350px); height: 210px;
  transform: translate3d(var(--pg-a-x), var(--pg-a-y), 110px) rotate(-10deg);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .pf-b {
  right: 7%; top: 11%; width: min(20vw, 280px); height: 150px;
  transform: translate3d(var(--pg-b-x), var(--pg-b-y), 150px) rotate(12deg);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .pf-c {
  left: 5%; bottom: 4%; width: min(20vw, 280px); height: 150px;
  transform: translate3d(var(--pg-c-x), var(--pg-c-y), 140px) rotate(9deg);
}
.apple-pro .practice-section[data-glass-parallax="orbit-glass"] .pf-d {
  right: 3%; bottom: 5%; width: min(27vw, 380px); height: 205px;
  transform: translate3d(var(--pg-d-x), var(--pg-d-y), 90px) rotate(-11deg);
}

.apple-pro .integration-strip {
  padding: 32px 0;
  border-block: 1px solid rgba(255,255,255,.06);
  background: #0a0a0a;
  color: #a1a1a6;
  font-size: clamp(16px, 1.7vw, 25px);
}
.apple-pro .integration-strip i { color: #424245; }

.apple-pro .bottom-cta {
  min-height: 82vh;
  display: grid;
  align-items: center;
  padding: 120px 0;
  background:
    radial-gradient(circle at 72% 50%, rgba(41,151,255,.18), transparent 30%),
    #000;
}
.apple-pro .bottom-cta-inner { align-items: end; }
.apple-pro .bottom-cta h2 {
  max-width: 900px;
  margin-top: 18px;
  color: #f5f5f7;
  font-size: clamp(60px, 7.2vw, 108px);
  line-height: .94;
  letter-spacing: -.067em;
}
.apple-pro .bottom-cta p { color: #a1a1a6; font-size: 18px; }
.apple-pro .cta-graphic { opacity: .26; }
.apple-pro .site-footer {
  border-top-color: rgba(255,255,255,.08);
  background: #000;
}

@media (max-width: 1100px) {
  .apple-pro .section-wide { width: min(calc(100% - 48px), 1280px); }
  .apple-pro .detector-carousel { overflow-x: auto; }
  .apple-pro .detector-card { min-width: 58vw; }
  .apple-pro .parallax-glass-section > .section-wide { width: min(calc(100% - 48px), 1180px); }
}

@media (max-width: 700px) {
  .apple-pro .section-wide { width: min(calc(100% - 34px), 1280px); }
  .apple-pro .detector-section { padding: 90px 0; }
  .apple-pro .detector-heading-row { display: block; }
  .apple-pro .detector-total { margin-top: 42px; }
  .apple-pro .detector-card { min-width: 86%; height: 500px; border-radius: 24px; }
  .apple-pro .parallax-glass-section { min-height: auto; padding-block: 92px; }
  .apple-pro .parallax-glass-section > .section-wide {
    width: calc(100% - 28px);
    padding: 34px 22px;
    border-radius: 26px;
  }
  .apple-pro .overview-intro h2,
  .apple-pro .workflow-section h2,
  .apple-pro .practice-section h2,
  .apple-pro .faq-copy h2,
  .apple-pro .scenario-section h2,
  .apple-pro .compat-section h2,
  .apple-pro .use-cases-section h2 { font-size: clamp(44px, 12vw, 62px); }
  .apple-pro .workflow-steps article { min-height: 250px; }
  .apple-pro .workflow-steps h3 { margin-top: 60px; }
  .apple-pro .scenario-card { flex-basis: 74vw; height: 260px; }
  .apple-pro .faq-illustration { min-height: 360px; }
  .apple-pro .practice-grid article { min-height: 310px; }
  .apple-pro .practice-grid h3 { margin-top: 75px; }
  .apple-pro .bottom-cta { min-height: 70vh; }
  .apple-pro .bottom-cta-inner { align-items: flex-start; }
}

/* Brand rail without heading/controls. */
.apple-pro .integration-brands { padding-block: 18px; }
.apple-pro .brand-viewport { mask-image: linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); }
.apple-pro .integration-brand { width: 190px; flex-basis: 190px; height: 84px; padding: 14px 22px; }
.apple-pro .integration-brand img { width: 150px; max-height: 38px; }
.apple-pro .technology-graphic { color: #78868e; }
.apple-pro .technology-graphic .signal-accent { stroke: #6ea9d9; }
.apple-pro .technology-graphic .signal-dot { fill: #6ea9d9; }
.apple-pro .technology-graphic .tech-code { fill: rgba(41,151,255,.08); stroke: rgba(110,169,217,.72); }
.apple-pro .technology-graphic .tech-code-text { fill: #8fc5ef; }
.apple-pro .technology-graphic .tech-subtext,.apple-pro .technology-graphic .tech-bus { fill: #788d9d; }