/* DOT App page. Builds on home.css (tokens, type, buttons) and contact.css (the form). */
.app-root .hero-eyebrow { margin-bottom: 1.25rem; }
.app-root .app-status { color: var(--wh); }

/* ── Hero ── */
.app-root .app-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem; min-height: calc(100svh - 4.5rem);
  padding: 4rem var(--pad); border-bottom: 1px solid var(--d3); overflow: hidden;
  background: radial-gradient(ellipse 45% 60% at 75% 50%, rgba(255, 34, 0, .1), transparent 70%), var(--bk);
}
.app-root .app-h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(4rem, 8vw, 9rem); line-height: .86; letter-spacing: 2px; margin: 0 0 1rem; }
.app-root .app-h1 span { display: block; }

/* ── Preview: a tilted phone on the DOT network, with floating labels ── */
.app-root .app-preview { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; perspective: 1200px; }
.app-root .app-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-root .app-net line { stroke: rgba(240, 235, 224, .16); stroke-width: 1; }
.app-root .app-net circle { fill: var(--m1); }
.app-root .app-phone {
  position: relative; width: 44%; aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 10px;
  background: linear-gradient(160deg, #2a2a2a, #0b0b0b); border: 1px solid #3a3a3a;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 34, 0, .18);
  transform: rotateY(-18deg) rotateX(8deg); transform-style: preserve-3d; animation: app-tilt 8s ease-in-out infinite;
}
.app-root .app-screen {
  height: 100%; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: radial-gradient(circle at 50% 42%, rgba(255, 34, 0, .22), transparent 55%), #050505;
}
.app-root .app-core { width: 26px; height: 26px; border-radius: 50%; background: var(--red3); box-shadow: 0 0 30px rgba(255, 34, 0, .9); margin-bottom: 1rem; }
.app-root .app-bar { width: 52%; height: 6px; border-radius: 3px; background: var(--d4); }
.app-root .app-bar--s { width: 34%; }
.app-root .app-chip {
  position: absolute; z-index: 1;
  padding: .55rem 1rem; border: 1px solid var(--d4); border-radius: 999px; background: rgba(17, 17, 17, .85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--m3);
  animation: app-float 5s ease-in-out var(--d) infinite;
}
.app-root .app-chip::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--red3); vertical-align: middle; }
@keyframes app-tilt { 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-8px); } }
@keyframes app-float { 50% { transform: translateY(-14px); } }

/* ── Access timeline ── */
.app-root .app-steps { border-bottom: 1px solid var(--d3); }
.app-root .app-steps-head { padding: 5rem var(--pad) 3rem; }
.app-root .app-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--d3); }
.app-root .app-timeline li { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 2.5rem 2rem 3rem; border-right: 1px solid var(--d3); }
.app-root .app-timeline li:last-child { border-right: none; }
.app-root .app-timeline li::before { content: ''; position: absolute; top: -6px; left: 2rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bk); border: 1px solid var(--m1); }
.app-root .app-timeline li:nth-child(2)::before { background: var(--red3); border-color: var(--red3); box-shadow: 0 0 14px rgba(255, 34, 0, .8); }
.app-root .app-when { font-size: .75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--red3); }
.app-root .app-timeline b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: 2px; line-height: 1; }
.app-root .app-timeline p { font-family: 'Inter', sans-serif; font-size: .95rem; line-height: 1.6; color: var(--m2); margin: 0 0 .5rem; }

/* ── Early access ── */
.app-root .app-access { display: grid; grid-template-columns: 1fr 1.3fr; border-bottom: 1px solid var(--d3); scroll-margin-top: 4rem; }
.app-root .app-access-l { padding: 5rem var(--pad); border-right: 1px solid var(--d3); }
.app-root .app-access-r { padding: 4rem var(--pad); background: var(--d1); }
.app-root .app-more { margin: 2rem 0 0; font-family: 'Inter', sans-serif; font-size: .9rem; color: var(--m2); }
.app-root .app-more a { color: var(--wh); text-decoration: underline; }

@media (max-width: 900px) {
  .app-root .app-hero, .app-root .app-access { grid-template-columns: 1fr; }
  .app-root .app-hero { min-height: auto; padding-top: 3rem; }
  .app-root .app-preview { max-width: 360px; }
  .app-root .app-timeline { grid-template-columns: 1fr; }
  .app-root .app-timeline li { border-right: none; border-bottom: 1px solid var(--d3); }
  .app-root .app-access-l { border-right: none; border-bottom: 1px solid var(--d3); padding: 3.5rem var(--pad) 2rem; }
  .app-root .app-access-r { padding: 2.5rem var(--pad) 3.5rem; }
  .app-root .app-steps-head { padding-top: 3.5rem; padding-bottom: 2rem; }
}
@media (max-width: 480px) {
  .app-root .app-chip { font-size: .6rem; letter-spacing: 2px; padding: .45rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-root .app-phone, .app-root .app-chip { animation: none; }
}