/* ============================================================
   jathol.org — 2026 layer (site v17): "See the app" phone stage,
   real app screens in cards, compact header, extra motion.
   Loaded last. Reduced-motion visitors get the same layout, still.
   ============================================================ */

/* ——— Header: compact + soft shadow once the page scrolls ——— */
.nav{ transition:background .3s ease, box-shadow .3s ease; }
.nav-inner{ transition:padding .3s ease; }
html.scrolled .nav{ box-shadow:0 10px 30px -18px rgba(14,31,22,.35); background:rgba(250,247,242,.86); }
html.scrolled .nav-inner{ padding:9px 0; }
.brand img{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.brand:hover img{ transform:rotate(-8deg) scale(1.06); }

/* ——— "See the app" ——— */
.tour{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(52,199,123,.18), transparent 60%),
    radial-gradient(60% 50% at 85% 100%, rgba(232,195,106,.12), transparent 60%),
    linear-gradient(180deg, #0B2419 0%, #071A12 100%);
  padding-bottom:clamp(56px, 7vw, 96px);
}
.tour-glow{
  position:absolute; inset:-30% -10% auto; height:70%; pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%, transparent, rgba(52,199,123,.16), transparent 40%);
  filter:blur(40px); opacity:.8;
}
.tour .kicker{ color:#7FE0AE; }
.tour .sec-title{ color:#fff; max-width:18ch; }
.tour .sec-sub{ color:rgba(255,255,255,.72); max-width:58ch; }
.tour-head{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }

.tour-stage{
  --spread:clamp(120px, 15vw, 210px);
  position:relative; height:clamp(460px, 52vw, 660px); margin-top:clamp(28px, 4vw, 48px);
  perspective:1600px; display:flex; justify-content:center; align-items:center;
}
.phone{
  --i:0; --z:0px; --ry:0deg; --py:0px;
  position:absolute; margin:0; width:clamp(170px, 19vw, 262px); aspect-ratio:390/844;
  padding:clamp(6px, .8vw, 10px); border-radius:clamp(26px, 3vw, 40px);
  background:linear-gradient(145deg, #2A2A2E, #0A0A0B 40%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -20px rgba(0,0,0,.65), 0 18px 40px -18px rgba(0,0,0,.55);
  transform:
    translateX(calc(var(--i) * var(--spread)))
    translateY(calc(var(--py) * (0.5 - var(--tp, .5))))
    translateZ(var(--z)) rotateY(var(--ry));
  transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s ease, box-shadow .5s ease, filter .5s ease;
  z-index:calc(10 - var(--d, 0));
  cursor:pointer;
}
.phone img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:clamp(20px, 2.3vw, 31px); display:block; }
.phone::before{ /* the camera pill */
  content:""; position:absolute; top:clamp(12px, 1.4vw, 18px); left:50%; width:26%; height:clamp(14px, 1.6vw, 20px);
  transform:translateX(-50%); background:#000; border-radius:999px; z-index:2;
}
.phone figcaption{
  position:absolute; left:50%; bottom:-46px; transform:translate(-50%, 6px);
  padding:7px 14px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s ease, transform .4s ease;
}
.phone.p1{ --i:-2; --d:2; --z:-160px; --ry:18deg;  --py:90px; }
.phone.p2{ --i:-1; --d:1; --z:-70px;  --ry:9deg;   --py:45px; }
.phone.p3{ --i:0;  --d:0; --z:0px;    --ry:0deg;   --py:0px; }
.phone.p4{ --i:1;  --d:1; --z:-70px;  --ry:-9deg;  --py:45px; }
.phone.p5{ --i:2;  --d:2; --z:-160px; --ry:-18deg; --py:90px; }
.phone.spot{
  z-index:20; filter:none;
  transform:
    translateX(calc(var(--i) * var(--spread)))
    translateY(calc(var(--py) * (0.5 - var(--tp, .5)) - 18px))
    translateZ(60px) rotateY(0deg) scale(1.03);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 50px 100px -24px rgba(0,0,0,.7), 0 0 60px -10px rgba(52,199,123,.45);
}
.phone.spot figcaption{ opacity:1; transform:translate(-50%, 0); }
.tour-stage.in .phone:not(.spot){ filter:brightness(.82) saturate(.95); }

/* Entrance: phones rise out of a stack and fan open (JS adds .in). */
@media (prefers-reduced-motion:no-preference){
  html.js26 .tour-stage:not(.in) .phone{
    opacity:0; transform:translateX(0) translateY(120px) translateZ(-200px) rotateY(0deg) scale(.9);
  }
  .tour-stage.in .phone{ transition-delay:calc(var(--d) * 90ms); }
  .tour-stage.in .phone.spot, .tour-stage.in .phone:hover{ transition-delay:0s; }
  .tour-glow{ animation:tourSpin 18s linear infinite; }
  @keyframes tourSpin{ to{ transform:rotate(360deg) } }
  /* idle float on the hero phone */
  .tour-stage.in .phone.p3 img{ animation:none; }
}

.tour-points{
  list-style:none; position:relative; margin-top:clamp(64px, 7vw, 92px) !important;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.tour-points li{
  padding:18px 18px 16px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.tour-points li:hover{ transform:translateY(-4px); background:rgba(255,255,255,.1); }
.tour-points b{ display:block; font-size:16px; color:#fff; }
.tour-points span{ display:block; margin-top:4px; color:rgba(255,255,255,.66); font-size:14px; line-height:1.45; }

/* Tablets: four phones, tighter. Phones: a swipeable row. */
@media (max-width:980px){
  .tour-points{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .tour-stage{
    height:auto; perspective:none; display:flex; justify-content:flex-start; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 20px 64px; margin-inline:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tour-stage::-webkit-scrollbar{ display:none; }
  .phone, .phone.spot, html.js26 .tour-stage:not(.in) .phone{
    position:relative; flex:0 0 62vw; width:62vw; transform:none !important; opacity:1; filter:none !important;
    scroll-snap-align:center;
  }
  .phone figcaption{ opacity:1; transform:translate(-50%, 0); bottom:-42px; }
  .tour-points{ grid-template-columns:1fr; margin-top:20px !important; }
}

/* ——— Real app screens inside feature cards ——— */
.card img.is-screen{ height:150px; object-fit:cover; object-position:50% 24%; background:#F2F2F7; }
.entry-shot img.is-screen{
  object-fit:contain; object-position:50% 100%; padding-top:26px;
  background:radial-gradient(70% 80% at 50% 0%, #1B5A40 0%, #0C2E21 60%, #06170F 100%);
}

/* ——— Small delights ——— */
@media (prefers-reduced-motion:no-preference){
  .sec-title{ transition:letter-spacing .6s ease; }
  .store-badge{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important; }
  .store-badge:hover{ transform:translateY(-3px) !important; box-shadow:0 12px 26px rgba(0,0,0,.28) !important; }
  .faq details[open] > p{ animation:faqIn .35s ease both; }
  @keyframes faqIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
}
@media (prefers-reduced-motion:reduce){
  .phone, .tour-points li{ transition:none; }
}