/* Project page — extends style.css. Each app page sets --brand on <body>. */
.p-back{display:inline-flex;align-items:center;gap:8px;color:var(--fg-3);text-decoration:none;font-size:15px;margin-top:8px}
.p-back:hover{color:var(--amber)}
.p-back::before{content:"→"}
[dir=ltr] .p-back::before{content:"←"}

.p-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:40px 80px}
.p-hero .copy{display:flex;flex-direction:column;gap:22px}
.wordmark{align-self:flex-start;background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wordmark img{height:38px;width:auto}
.p-hero h1{font-weight:900;font-size:clamp(34px,4.6vw,64px);line-height:1.35}
.p-hero h1 em{font-style:normal;color:var(--brand-text,var(--brand))}
.p-hero .lede{font-size:19px;color:var(--fg-2);max-width:34em}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.fact{border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--fg-3)}
.fact b{color:var(--fg);font-weight:600}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{color:#fff;filter:brightness(1.1)}

.duo{position:relative;height:620px}
.duo img{position:absolute;width:46%;max-width:250px;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:float-ph 7s ease-in-out infinite}
.duo .a{inset-inline-end:8%;top:0;--r:4deg;z-index:2}
.duo .b{inset-inline-start:8%;top:70px;--r:-5deg;animation-delay:-3.5s}
@keyframes float-ph{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(var(--r))}}
.duo .glow{position:absolute;inset:10% 10%;border-radius:50%;background:radial-gradient(closest-side,var(--brand-glow),transparent);filter:blur(10px)}

.p-sec{padding-block:80px}
.p-sec.alt{background:var(--bg-2)}
.p-sec h2{font-weight:900;font-size:clamp(28px,3.8vw,46px);margin-bottom:14px}
.p-sec .sub{color:var(--fg-2);font-size:18px;max-width:40em}
.kicker{display:block;color:var(--amber);font-size:14px;margin-bottom:8px;font-weight:500}

.story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.story .card{background:var(--panel);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px}
.story .card h3{font-size:22px;font-weight:800}
.story .card p{color:var(--fg-2)}
.story .card.sol{background:var(--brand);color:#fff}
.story .card.sol p{color:rgba(255,255,255,.88)}
.story .card.sol .kicker{color:#fff;opacity:.8}

.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,260px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:28px 18px;margin-top:8px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.gallery figure{margin:0;scroll-snap-align:start}
.gallery img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .3s ease}
.gallery img:hover{transform:translateY(-6px)}
.gallery-hint{color:var(--fg-4);font-size:14px}

.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.feat{border-top:2px solid var(--brand);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.feat h3{font-size:19px;font-weight:800}
.feat p{color:var(--fg-2);font-size:15px}

.video{border-radius:24px;overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.4);margin-top:24px;aspect-ratio:16/9;max-width:100%}
.video video{width:100%;height:100%;display:block}

.aud{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
.aud-copy{min-width:0}
.aud .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
.aud-phone{position:sticky;top:110px;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.nums{align-self:flex-start;margin-top:4px;background:var(--panel);color:var(--fg-3);border-radius:999px;padding:3px 12px;font-size:13px}
.p-sec.alt .nums{background:var(--bg)}

.refs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ref{background:var(--panel);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;min-width:150px}
.ref b{font-family:var(--display);font-size:18px}
.ref span{color:var(--fg-3);font-size:13px}
.note{color:var(--fg-4);font-size:14px;margin-top:22px;max-width:46em}

.p-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:var(--panel);border-radius:32px;padding:clamp(24px,4vw,48px)}
.p-cta h2{margin:0}

@media (max-width:900px){
  .p-hero{grid-template-columns:1fr}
  .duo{height:clamp(380px,110vw,560px)}
  .story,.feats,.aud .feats{grid-template-columns:1fr}
  .aud{grid-template-columns:1fr;gap:32px}
  .aud-phone{position:static;width:min(240px,62%);margin:0 auto;order:-1}
}


/* app icon badge (used instead of a wordmark) */
.app-badge{display:flex;align-items:center;gap:14px}
.app-badge img{width:72px;height:72px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.app-badge span{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.4}
.app-badge small{display:block;font-family:var(--body);font-weight:400;font-size:14px;color:var(--fg-3)}

/* vertical video beside text */
.vid-row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center;margin-top:24px}
.video.vertical{aspect-ratio:9/16;margin-top:0;border-radius:32px;border:6px solid #0a1f20}
.vid-points{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0}
.vid-points li{display:flex;gap:12px;align-items:baseline;color:var(--fg-2);font-size:17px}
.vid-points li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--brand-text,var(--brand));transform:translateY(-2px)}
@media (max-width:900px){.vid-row{grid-template-columns:1fr;gap:28px}.video.vertical{width:min(340px,100%);margin-inline:auto}}

/* browser-frame screenshots for web apps */
.browser{background:#0a1f20;border-radius:18px;padding:34px 8px 8px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:100%}
.browser::before{content:"";position:absolute;top:13px;inset-inline-start:16px;width:10px;height:10px;border-radius:50%;background:#E86A4F;box-shadow:16px 0 0 #F2B544,32px 0 0 #3BB273}
[dir=rtl] .browser::before{box-shadow:-16px 0 0 #F2B544,-32px 0 0 #3BB273}
.browser .url{position:absolute;top:8px;inset-inline:70px 70px;height:20px;border-radius:999px;background:#13302f;color:var(--fg-3);font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--body)}
.browser img{width:100%;height:auto;border-radius:10px;display:block}
.web-hero{position:relative}
.web-hero .browser{transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .6s ease}
[dir=ltr] .web-hero .browser{transform:perspective(1400px) rotateY(8deg) rotateX(3deg)}
.web-hero .browser:hover{transform:none}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:12px}
.shots figcaption{color:var(--fg-2);font-size:15px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.rule{background:var(--panel);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:8px}
.rule b{font-family:var(--display);font-size:18px}
.rule p{color:var(--fg-2);font-size:15px}
.p-sec.alt .rule{background:var(--bg)}
@media (max-width:900px){.shots,.rules{grid-template-columns:1fr}.web-hero .browser,[dir=ltr] .web-hero .browser{transform:none}}