/* apps.qubba.ai v2: two icons on the stage floor, panels over a gold horizon. */

/* ===== Hero world ===== */
.hero { position: relative; }
.hero { --hero-h: clamp(640px, 82svh, 840px); }
.hero-world { height: var(--hero-h); background: #060708 url(shared/video/stage.jpg) center / cover no-repeat; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-world .world-shade { z-index: 1; background: linear-gradient(to top, rgba(6, 7, 8, .9), rgba(6, 7, 8, .55) 48%, rgba(6, 7, 8, .15) 72%); }
.hero-dim { position: absolute; inset: 0; z-index: 1; background: rgba(10, 11, 13, 1); opacity: 0; pointer-events: none; }
.hero-kicker { position: absolute; top: calc(var(--nav-h) + 1.25rem); left: 0; right: 0; z-index: 4; text-align: center; color: var(--gold); font-size: .9rem; letter-spacing: .01em; }
.hero-giant-wrap { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; pointer-events: none; padding-bottom: 50vh; }
.hero-giant { text-shadow: 0 30px 90px rgba(0, 0, 0, .55); }

/* Tiles */
.hero-tiles { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-46%); display: flex; justify-content: center; gap: clamp(1.25rem, 10vw, 12rem); padding: 0 var(--gutter); }
.tile { min-width: 0; position: relative; isolation: isolate; display: grid; justify-items: center; gap: .55rem; text-align: center; width: min(100%, 300px); will-change: transform; }
.tile-body { position: relative; width: 180px; }
.tile-icon { width: 180px; height: 180px; border-radius: 22%; box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.tile-reflection { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; height: 3rem; overflow: hidden; opacity: .35; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 100%); pointer-events: none; filter: blur(.4px); }
.tile-reflection img { width: 180px; height: 180px; border-radius: 22%; transform: scaleY(-1); }
.tile-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; margin-top: 3.9rem; letter-spacing: -.01em; }
.tile-line { color: var(--ink-2); font-size: .95rem; line-height: 1.4; max-width: 24ch; }
.tile-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; margin-top: .35rem; }
.tile-actions .btn { min-height: 44px; padding: .72rem 1.15rem; font-size: .9rem; }

/* App Store badge, official black shape, shown dimmed: not a link yet */
.store-badge { display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .75rem 0 .6rem; border-radius: 7px; background: #000; color: #fff; border: 1px solid #a6a6a6; opacity: .55; cursor: default; user-select: none; }
.store-badge svg { width: 22px; height: 22px; flex: none; }
.store-badge-text { display: grid; text-align: left; line-height: 1; font-family: var(--sans); white-space: nowrap; }
.store-badge-text span { font-size: .55rem; letter-spacing: .01em; margin-bottom: 2px; }
.store-badge-text strong { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; }

/* Desktop: the word reads above the icons. The tiles stand on the bottom of a full height hero, the word rests on the icons'
   top edge (after their 72px lift, sunk .18em behind it) and grows upward from there, sized so that at its 1.14 scroll scale the script word above it still
   clears the nav. 26rem is the tile stack from icon top to the last button; 1.15 is cap height plus script at full scale. */
@media (min-width: 701px) {
  .hero { --hero-h: clamp(640px, 100svh, 1000px); --tiles-b: clamp(1rem, 3vh, 2rem); }
  .hero-tiles { top: auto; bottom: var(--tiles-b); transform: none; }
  .hero-giant-wrap { place-items: end center; padding: 0 0 calc(var(--tiles-b) + 26rem + 72px); }
  .hero-giant { transform-origin: 50% 100%; margin-bottom: calc(-1 * var(--ink-b) - .18em); font-size: max(5rem, min(20vw, 24rem, calc((var(--hero-h) - 26rem - 148px - 3rem) / 1.15))); }
}

/* ===== App panels over the gold horizon ===== */
.app-world { position: relative; }
.app-sky { position: relative; height: clamp(24px, 4vw, 64px); z-index: 1; background: var(--bg); }
/* A short gold transition keeps the app content close together. */
.app-plate { top: 0; height: 100%; object-position: 50% 90%; transform-origin: 50% 90%; }
.app-sky .world-shade { background: linear-gradient(to bottom, var(--bg), transparent 50%, var(--bg)); }
.app-panel { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; margin-top: 0; padding-block: clamp(3rem, 5vw, 5rem); }
.app-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.app-copy { display: grid; gap: 1.4rem; justify-items: start; }
/* Which app this is, before the big word: icon, name, where it stands */
.app-head { display: flex; align-items: center; gap: .85rem; }
.app-icon { width: 52px; height: 52px; border-radius: 22%; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.app-name { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; letter-spacing: -.01em; }
.app-status { color: var(--ink-2); font-size: .85rem; margin-top: .15rem; }
.giant-panel { font-size: clamp(3.5rem, 10vw, 10rem); margin-left: calc(-.04em - var(--ink-x)); }
.app-bullets { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); width: min(100%, 34ch); }
.app-bullets li { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.0625rem; }
.app-emblem { min-width: 0; display: grid; place-items: center; min-height: 320px; }

/* Orby: a cyan sphere made from gradients, breathing slowly */
.orb { position: relative; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #e6fdff 0%, #8ff0f6 14%, #19D3E0 42%, #0b97a7 72%, #05414b 100%);
  box-shadow: 0 0 52px rgba(25, 211, 224, .75), 0 0 150px rgba(25, 211, 224, .48), 0 40px 70px rgba(0, 0, 0, .5), inset -18px -22px 40px rgba(0, 25, 35, .5), inset 10px 12px 28px rgba(255, 255, 255, .35);
  animation: orb-breathe 10s ease-in-out infinite; }
.orb::before { content: ""; position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, rgba(25, 211, 224, .5) 0%, rgba(25, 211, 224, .22) 35%, transparent 62%); z-index: -1; animation: orb-halo 10s ease-in-out infinite; }
.orb::after { content: ""; position: absolute; left: 22%; top: 12%; width: 30%; height: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 70%); filter: blur(2px); }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orb-halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* Quix: high-resolution frame with an eye-only blink. */
.quix { position: relative; mix-blend-mode: lighten; width: min(100%, 420px); min-width: 0; height: auto; animation: quix-float 7s ease-in-out infinite; }
.quix img { width: 100%; height: auto; }
.quix-eyelids { position: absolute; inset: 0; opacity: 0; clip-path: polygon(28% 14%, 71% 14%, 71% 30%, 28% 30%); animation: quix-blink 9s linear infinite; }
@keyframes quix-blink { 0%, 42%, 45%, 100% { opacity: 0; } 42.5%, 44.5% { opacity: 1; } }
@keyframes quix-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-1.2deg); } }

/* Waitlist */
.waitlist { display: grid; gap: .6rem; padding: 1.35rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(16, 18, 21, .8); width: min(100%, 560px); margin-top: .5rem; }
.waitlist label { font-family: var(--display); font-size: 1.35rem; }
.waitlist-row { display: flex; gap: .6rem; }
.waitlist-row input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px; padding: .9rem 1.2rem; color: var(--ink); }
.waitlist-row input:focus { border-color: var(--gold); outline: none; }

/* Why: one line on paper */
.why { text-align: center; }
.why h2 { max-width: 22ch; margin-inline: auto; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.75rem); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--sans); font-size: 1.4rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ink-2); margin-top: .75rem; max-width: 60ch; }

/* ===== Phones and tablets: each app is one product card ===== */
/* The card: identity row with the emblem beside it, then the word, the line, the three points and the waitlist. The
   gold horizon strip and the full-screen emblem above a full-screen word are gone; the app's own colour glows from
   the corner instead. */
@media (max-width: 900px) {
  .app-studyos { --glow: rgba(25, 211, 224, .2); }
  .app-qscan { --glow: rgba(126, 206, 120, .18); }
  .app-sky { display: none; }
  .app-panel { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; margin-top: 0; padding: 1.25rem 0; border-top: 0; }
  .app-qscan .app-panel { padding-bottom: 3rem; }
  .app-grid { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head emblem"; column-gap: 1rem; row-gap: 0; align-items: center;
    padding: 1.5rem 1.35rem 1.6rem; border: 1px solid var(--line-soft); border-radius: 24px; overflow: hidden;
    background: radial-gradient(90% 55% at 100% 0%, var(--glow), transparent 70%), var(--bg-2); }
  .app-copy { display: contents; }
  .app-head { grid-area: head; }
  .app-emblem { grid-area: emblem; min-height: 0; }
  .app-copy > :not(.app-head) { grid-column: 1 / -1; }
  .app-grid .giant-panel { margin-top: 1.5rem; font-size: clamp(3.6rem, 19vw, 6rem); }
  .app-grid .line { margin-top: .75rem; }
  .app-bullets { margin-top: 1.4rem; width: 100%; }
  .app-bullets li { display: flex; align-items: center; gap: .75rem; }
  .app-bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
  .app-grid .waitlist { margin-top: 1.5rem; width: 100%; padding: 0; border: 0; background: none; }
  .app-grid .waitlist label { font-size: 1.1rem; }
  .orb { width: 76px; height: 76px; }
  .quix { width: 112px; margin: -.5rem -.4rem -.75rem 0; }
  .waitlist-row { flex-direction: column; }
}
@media (max-width: 700px) {
  /* Hero: plain flow, top to bottom. The kicker, the script and the word under the nav, then the two app tiles side
     by side under the word. Nothing is positioned over anything else, so nothing can cover the word. */
  .hero-world { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--nav-h) + 1.25rem) 1rem 2.25rem; }
  .hero-kicker { position: relative; top: auto; left: auto; right: auto; margin-bottom: .5rem; }
  .hero-giant-wrap { position: relative; inset: auto; display: grid; justify-items: center; padding: 0; overflow: visible; }
  .hero-giant { white-space: nowrap; font-size: min(21vw, 6.5rem); }
  .hero-tiles { position: relative; top: auto; left: auto; right: auto; transform: none; margin-top: auto; padding: 2rem 0 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .tile { width: auto; gap: .4rem; }
  .tile-body { width: 104px; }
  .tile-reflection { height: 1.5rem; }
  .tile-icon, .tile-reflection img { width: 104px; height: 104px; }
  .tile-name { font-size: 1.5rem; margin-top: 2.1rem; }
  .tile-line { font-size: .85rem; min-height: 3.6em; }
  .tile-actions { flex-direction: column; gap: .45rem; width: 100%; }
  .store-badge { height: 36px; }
  .store-badge svg { width: 18px; height: 18px; }
  .store-badge-text strong { font-size: .92rem; }
  .tile-actions .btn { width: 100%; min-height: 44px; padding: .6rem 1rem; font-size: .88rem; }
}

/* Reduced motion: emblems hold still, hero shows its final state (set in the markup) */
@media (prefers-reduced-motion: reduce) {
  .orb, .orb::before, .quix, .quix-eyelids { animation: none; }
  .hero-video { display: none; }
}