:root {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --fg: #fafafa;
  --dim: rgba(250, 250, 250, 0.55);
  --muted: rgba(250, 250, 250, 0.32);
  --accent: #ffd133;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: radial-gradient(circle at 35% 25%, #1a1a1a 0%, var(--bg) 70%);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Top bar (privacy / sub pages) ---- */

.top-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  z-index: 50;
  pointer-events: none;
}

.top-bar .app-icon-link {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.25s ease;
  pointer-events: auto;
}
.top-bar .app-icon-link:hover { transform: scale(1.05); }
.top-bar .app-icon { width: 100%; height: 100%; display: block; }

/* ---- Hero: two columns, phone left, text right ---- */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 70px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 48px;
}

.phone-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

/* ---- Phone mockup ---- */

/* The PNG is 1206x2622 (iPhone 16 Pro proportions) and the viewfinder
   rectangle is already transparent in the source files. So the memory
   image goes BEHIND every frame, fills the whole phone, and shows
   through the cutout naturally with no black bars. */

.phone-stage {
  --phone-w: min(310px, 38vw);
  perspective: 1700px;
  width: var(--phone-w);
}

.phone-tilt {
  position: relative;
  width: 100%;
  aspect-ratio: 1206 / 2622;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(0) rotateY(0);
  /* Three stacked shadows. The first is a tight contact shadow that grounds
     the phone; the second the volumetric body shadow; the third the diffuse
     ambient halo. Together they read as physical weight, not flat card. */
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45))
    drop-shadow(0 60px 90px rgba(0, 0, 0, 0.32));
}

/* iPhone 16 Pro device corner radius is roughly 11.5% of body width.
   Using a length value (not %) so the corner is circular, not stretched. */
.phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-w) * 0.115);
  overflow: hidden;
  background: #000;
  /* Inner edge cues. Top hairline is a soft highlight, suggesting where the
     bezel catches light. Bottom hairline is a darker line, suggesting the
     bezel-to-screen seam. Plus a hairline outer border to crisp the edge. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Specular sheen layer that floats above the frame. Position is driven by
   CSS variables updated by the tilt loop: as the phone rotates, the
   highlight shifts the way it would on real glass. mix-blend-mode: screen
   brightens whatever sits underneath without adding a color cast. */
.phone-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    ellipse 70% 55% at var(--sheen-x, 50%) var(--sheen-y, 28%),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Viewfinder rectangle, measured directly from the source PNGs.
   The viewfinder is already transparent in every frame. The memory
   image is sized to fit exactly inside this rect, so its 0.75 aspect
   ratio nearly matches the viewfinder's 0.749 and no black bars show. */
.viewfinder {
  position: absolute;
  top: 8.58%;
  left: 6.22%;
  width: 87.48%;
  height: 53.74%;
  overflow: hidden;
  z-index: 1;
}

.memory {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 2;
}
.frame.frame-active { display: block; }

/* ---- Text column: icon, headline, tagline, CTA ---- */

.big-icon {
  width: 92px;
  height: 92px;
  border-radius: 22%;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.headline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.headline .line {
  font-family: 'Bebas Neue', 'Helvetica Neue Condensed', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(54px, 8.4vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.headline .line-accent {
  color: var(--accent);
  text-shadow:
    0 2px 30px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(255, 209, 51, 0.18);
}

.tagline {
  margin-top: -22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.1;
  color: var(--fg);
  letter-spacing: -0.01em;
  opacity: 0.95;
}

/* ---- App Store button (Apple-badge-style) ---- */

.appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 22px 13px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.appstore-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.45);
  background: #0a0a0a;
}
.appstore-btn:active {
  transform: translateY(0);
}

.appstore-apple {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.appstore-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.appstore-pretitle {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  opacity: 0.92;
}
.appstore-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Enable tilt button (iOS gyro permission prompt) ---- */

.enable-tilt {
  margin-top: 6px;
  padding: 10px 18px;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s ease;
}
.enable-tilt:hover { transform: scale(1.04); }
.enable-tilt:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Footer ---- */

footer {
  padding: 32px 24px 36px;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
}

footer a {
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
footer a:hover { color: var(--fg); }
footer .dot { margin: 0 10px; opacity: 0.5; }
footer .copyright { margin-top: 8px; opacity: 0.55; font-size: 11px; }

/* ---- Responsive: stack on tablet/mobile ---- */

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 48px 28px;
    text-align: center;
  }
  .text-col {
    align-items: center;
    gap: 22px;
  }
  .phone-stage { --phone-w: min(260px, 62vw); }
  .big-icon { width: 80px; height: 80px; }
  .headline .line {
    font-size: clamp(44px, 11vw, 84px);
  }
}

@media (max-width: 420px) {
  .phone-stage { --phone-w: min(220px, 64vw); }
  .big-icon { width: 72px; height: 72px; border-radius: 20%; }
  .headline .line { font-size: clamp(38px, 12vw, 64px); }
  .tagline { font-size: 30px; }
  .appstore-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-tilt { transform: none !important; }
}