@charset "UTF-8";
/* ============================================================
   APTIVOO · Animations + scroll effects + motion engine v2
   ============================================================ */

/* ── Reveal-on-scroll (fallback / no-JS) ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--e-out), transform 900ms var(--e-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* When motion.js is loaded, GSAP drives reveals; remove fallback transitions */
html.has-custom-cursor .reveal,
html.motion-on .reveal { transition: none; }

/* ── Headline split (motion.js writes these) ─────────────── */
.m-h1 { display: inline; }
.m-h1__line { display: block; }
.m-h1__line.em {
  display: block;
  font-style: italic;
  color: var(--ink-2);
}
.m-h1__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  line-height: 1;
}
.m-h1__inner {
  display: inline-block;
  will-change: transform;
}

/* Legacy headline-reveal (kept for back-compat) */
.headline-reveal .w {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.headline-reveal .w span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--e-out);
}
.headline-reveal.is-in .w span { transform: translateY(0); }

/* ── Hero floating clay dot ───────────────────────────────── */
@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8px, -12px) scale(1.04); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

/* ── Cursor magnet ────────────────────────────────────────── */
.magnet { transition: transform 180ms var(--e-out); will-change: transform; }
.magnet > span { transition: transform 180ms var(--e-out); will-change: transform; }

/* ── Page intro ──────────────────────────────────────────── */
.page-enter { animation: page-enter 900ms var(--e-out) both; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Curtain intro (home only, first load) ───────────────── */
.curtain {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  pointer-events: none;
  animation: curtain-out 1400ms var(--e-out) 600ms forwards;
}
.curtain svg { height: 56px; width: auto; }
@keyframes curtain-out {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
.curtain-mark { animation: curtain-fade 700ms var(--e-out) both; }
@keyframes curtain-fade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

[data-parallax] { will-change: transform; }

.ticker { font-variant-numeric: tabular-nums; display: inline-block; }

/* ── Accordion ────────────────────────────────────────────── */
.accordion__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: padding var(--d-fast) var(--e-out);
}
.accordion__head:hover { padding-left: 10px; }
.accordion__head h4 { transition: color var(--d-fast) var(--e-out); }
.accordion__head:hover h4 { color: var(--clay); }
.accordion__icon {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
  flex-shrink: 0;
}
.accordion.is-open .accordion__icon { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.accordion__body {
  max-height: 0; overflow: hidden;
  transition: max-height 500ms var(--e-in-out);
}
.accordion.is-open .accordion__body { max-height: 400px; }
.accordion__body-inner {
  padding: 0 0 var(--s-4) 0;
  max-width: 68ch;
  color: var(--ink-2);
}

/* ============================================================
   MOTION ENGINE V2 · Style layer
   ============================================================ */

/* ── Scroll progress bar (top, clay) ───────────────────────── */
.m-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clay), var(--clay-deep));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(204, 120, 92, 0.45);
}

/* ── WebGL hero canvas ─────────────────────────────────────── */
.m-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: m-mesh-in 1.6s var(--e-out) 0.4s forwards;
}
@keyframes m-mesh-in { to { opacity: 1; } }
.hero, .page-head { position: relative; isolation: isolate; }

/* Soft fade so content stays readable on top of mesh.
   z-index 0 sits above canvas (-1) but below content (auto/positive). */
.m-mesh-fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(245,241,234,0.35), transparent 70%),
    linear-gradient(to bottom, transparent 55%, rgba(245,241,234,0.92) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap, .hero > .hero__phone,
.page-head > .wrap { position: relative; z-index: 1; }

/* ── Ambient orbs (fixed bg) ───────────────────────────────── */
.m-orbs {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.m-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.m-orb--1 {
  width: 520px; height: 520px;
  top: -120px; left: -160px;
  background: radial-gradient(circle, rgba(204,120,92,0.32), transparent 65%);
  animation: m-orb-drift-1 24s var(--e-in-out) infinite;
}
.m-orb--2 {
  width: 620px; height: 620px;
  bottom: -200px; right: -200px;
  background: radial-gradient(circle, rgba(245,229,221,0.7), transparent 65%);
  animation: m-orb-drift-2 32s var(--e-in-out) infinite;
}
.m-orb--3 {
  width: 380px; height: 380px;
  top: 40%; left: 55%;
  background: radial-gradient(circle, rgba(168,95,70,0.22), transparent 65%);
  animation: m-orb-drift-3 28s var(--e-in-out) infinite;
}
@keyframes m-orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, 60px) scale(1.06); }
}
@keyframes m-orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-90px, -50px) scale(1.04); }
}
@keyframes m-orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  50%      { transform: translate(-60px, 50px) scale(0.92); opacity: 0.35; }
}
.m-noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Custom cursor ─────────────────────────────────────────── */
.m-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9000;
  border-radius: 999px;
  will-change: transform;
  mix-blend-mode: difference;
  transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease;
}
.m-cursor--dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--paper);
}
.m-cursor--ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid var(--paper);
  background: transparent;
  transition: opacity 180ms ease, border-color 280ms ease, background 280ms ease;
}
.m-cursor--ring.is-on {
  border-color: rgba(245, 241, 234, 0.0);
  background: rgba(245, 241, 234, 0.85);
}
.m-cursor--ring.is-text {
  border-color: var(--paper);
  background: transparent;
}

html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .magnet { cursor: none; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select { cursor: text; }

/* ── 3D tilt cards ─────────────────────────────────────────── */
.mock,
.phone-thumb,
.price-card,
.team-card,
.card {
  transform-style: preserve-3d;
  transition: transform 360ms var(--e-out), box-shadow 360ms var(--e-out);
}

/* ── Quote letter scrub (motion.js wraps each char) ──────── */
.m-q-ch {
  display: inline !important; /* fight GSAP's inline-block promotion */
  will-change: opacity;
}
.quote__text {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ── Eyebrow underline draw (uses --eb CSS var) ──────────── */
.eyebrow {
  --eb: 100%;
}
html.motion-on .eyebrow { --eb: 0%; }
.eyebrow::before {
  width: 24px;
  transform-origin: left center;
  transform: scaleX(calc(var(--eb) / 100%));
  transition: transform 80ms linear;
}

/* ── Page transition veil ──────────────────────────────────── */
.m-veil {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--ink);
  transform: translateY(-101%);
  pointer-events: none;
  will-change: transform;
}
.m-veil::after {
  content: "Aptivoo";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 8vw, 96px);
  color: rgba(245, 241, 234, 0.6);
  letter-spacing: -0.03em;
}

/* ============================================================
   PWA · Splash · Onboarding · Install banner
   ============================================================ */

/* Lock body scroll while splash/onboarding open */
html.pwa-splash-locked, html.pwa-onb-locked,
html.pwa-splash-locked body, html.pwa-onb-locked body {
  overflow: hidden;
  height: 100%;
}

/* ── Splash screen ─────────────────────────────────────────── */
.pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  animation: pwa-splash-in 600ms var(--e-out) both;
}
.pwa-splash.is-out {
  animation: pwa-splash-out 600ms var(--e-out) forwards;
}
@keyframes pwa-splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pwa-splash-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-3vh); }
}

.pwa-splash__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  pointer-events: none;
}
.pwa-splash__orb--1 {
  width: 70vmin; height: 70vmin;
  top: -10vmin; left: -10vmin;
  background: radial-gradient(circle, rgba(204,120,92,0.55), transparent 65%);
  animation: pwa-orb 8s var(--e-in-out) infinite alternate;
}
.pwa-splash__orb--2 {
  width: 60vmin; height: 60vmin;
  bottom: -12vmin; right: -12vmin;
  background: radial-gradient(circle, rgba(245,229,221,0.35), transparent 65%);
  animation: pwa-orb 10s var(--e-in-out) infinite alternate-reverse;
}
@keyframes pwa-orb {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(8vmin, 6vmin) scale(1.08); }
}

.pwa-splash__mark {
  position: relative;
  z-index: 2;
  animation: pwa-mark 1100ms var(--e-out) both;
}
.pwa-splash__mark svg {
  height: clamp(48px, 8vw, 80px);
  width: auto;
}
@keyframes pwa-mark {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.pwa-splash__tag {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 2.4vw, 22px);
  color: rgba(245, 241, 234, 0.7);
  letter-spacing: -0.01em;
  animation: pwa-tag 1200ms var(--e-out) 400ms both;
}
@keyframes pwa-tag {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Onboarding ────────────────────────────────────────────── */
.pwa-onb {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation: pwa-onb-in 480ms var(--e-out) both;
}
.pwa-onb.is-out {
  animation: pwa-onb-out 380ms var(--e-out) forwards;
}
@keyframes pwa-onb-in {
  from { opacity: 0; transform: translateY(2vh); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pwa-onb-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-1vh); }
}

.pwa-onb__skip {
  align-self: flex-end;
  margin: 22px 22px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.pwa-onb__skip:hover { background: var(--paper-deep); color: var(--ink); }

.pwa-onb__stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  overflow: hidden;
}
.pwa-onb__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 max(24px, env(safe-area-inset-left)) 0 max(24px, env(safe-area-inset-right));
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 360ms var(--e-out), transform 360ms var(--e-out);
  pointer-events: none;
}
.pwa-onb__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.pwa-onb__eb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--clay);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.pwa-onb__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 9vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.pwa-onb__h em {
  display: block;
  font-style: italic;
  color: var(--ink-2);
}
.pwa-onb__p {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

.pwa-onb__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
}
.pwa-onb__dot {
  width: 28px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background var(--d-fast) var(--e-out), width var(--d-base) var(--e-out);
}
.pwa-onb__dot.is-active {
  background: var(--clay);
  width: 38px;
}

.pwa-onb__actions {
  padding: 16px 24px max(24px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}
.pwa-onb__next {
  appearance: none;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 200px;
  justify-content: center;
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.pwa-onb__next:hover { background: var(--clay); transform: translateY(-1px); }
.pwa-onb__next:active { transform: translateY(0); }

/* ── Install banner (Chrome native) ────────────────────────── */
.pwa-install {
  position: fixed;
  z-index: 7000;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.4);
  transform: translateY(140%);
  transition: transform 380ms var(--e-out);
  flex-wrap: wrap;
}
.pwa-install.is-in { transform: translateY(0); }
.pwa-install__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.pwa-install__left strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.pwa-install__left span {
  display: block;
  font-size: 13px;
  color: rgba(245,241,234,0.65);
  margin-top: 2px;
}
.pwa-install__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pwa-install__close,
.pwa-install__accept {
  border: 0;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out);
}
.pwa-install__close {
  background: transparent;
  color: rgba(245,241,234,0.7);
}
.pwa-install__close:hover { background: rgba(245,241,234,0.08); color: var(--paper); }
.pwa-install__accept {
  background: var(--clay);
  color: var(--paper);
}
.pwa-install__accept:hover { background: var(--clay-deep); }

/* ── iOS Safari install guide ──────────────────────────────── */
.pwa-ios-guide {
  position: fixed;
  z-index: 7000;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 16px 36px -12px rgba(31,30,29,0.18);
  transform: translateY(140%);
  transition: transform 380ms var(--e-out);
}
.pwa-ios-guide.is-in { transform: translateY(0); }
.pwa-ios-guide__t strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pwa-ios-guide__t span {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.pwa-ios-guide__x {
  border: 1px solid var(--border);
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
}
.pwa-ios-guide__x:hover { background: var(--paper-deep); color: var(--ink); }

/* ── Mobile UX polish (animation-only concerns; layout lives in pages.css/components.css) ── */
@media (max-width: 600px) {
  .nav { padding: 12px 0; }
  .nav__logo svg { height: 18px; }
  .nav__cta {
    height: 28px;
    font-size: 11px;
    padding: 0 14px 0 16px;
    gap: 8px;
  }
  /* Mobile: hide ambient orbs to save GPU */
  .m-orbs { opacity: 0.3; }
  /* Section pad shrinks on phones to keep content density right */
  .section-pad { padding: var(--s-5) 0; }
  .section-pad-sm { padding: var(--s-4) 0; }
  .page-head { padding: calc(var(--s-5) + 60px) 0 var(--s-4); }
  /* Footer dense on phones */
  .footer { padding: var(--s-5) 0 var(--s-3); margin-top: var(--s-5); }
  .footer__top { gap: var(--s-3); padding-bottom: var(--s-4); }
  .footer__bigmark { padding: var(--s-3) 0 0; font-size: clamp(56px, 22vw, 120px); }
}

@media (max-width: 480px) {
  .pwa-onb__h { font-size: clamp(32px, 11vw, 56px); }
  .pwa-onb__p { font-size: 16px; }
  .pwa-install { padding: 12px 14px; gap: 10px; }
  .pwa-install__actions { width: 100%; justify-content: flex-end; }
  /* Avoid horizontal scroll on tiny screens — defensive */
  html, body { overflow-x: hidden; overflow-x: clip; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .headline-reveal .w span { transform: none; }
  .m-h1__inner { transform: none !important; }
  .m-mesh, .m-orbs, .m-cursor, .m-veil { display: none !important; }
  .m-progress { display: none; }
  .pwa-splash__orb, .pwa-splash__mark, .pwa-splash__tag {
    animation: none !important;
  }
}