/* Inner marketing pages: examples gallery, /websites-for/, legal pages and the 404.
   Loaded after site.css by those pages only. Tokens, buttons, .page-hero, .glow, .rise and .reveal live in site.css;
   motion comes from /assets/motion.mjs. Only transform / opacity / translate / scale are animated. */

/* ---------- dark page hero ---------- */
.page-hero{padding:clamp(30px,4.6vw,60px) 0 clamp(56px,7vw,96px)}
.page-hero h1{font-size:clamp(2.25rem,5.2vw,4.3rem);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:18px 0 22px;overflow-wrap:break-word}
.page-hero .lead{color:#c6cbd9;font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:620px}
.page-hero .kicker{color:var(--accent-2)}
.page-hero .btn:not(.primary){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.page-hero .btn:not(.primary)::before{background:#fff}
.page-hero .btn:not(.primary):hover{color:#0B1F44;border-color:#fff}
.page-hero .link{color:var(--accent-2)}
.page-hero .link:hover{color:#fff}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-ctas .btn{padding:16px 28px;font-size:1.02rem}
.crumbs{font-size:.86rem;color:var(--on-dark-2)}
.crumbs a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;display:inline-block;padding:4px 0}
.crumbs a:hover{color:#fff;text-decoration-color:#fff}
/* a few fixed stars in the night part of the hero */
.stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1.2px 1.2px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 31% 9%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 54% 17%,#cfd6ff 50%,transparent 51%),radial-gradient(1px 1px at 68% 6%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 83% 24%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 11%,#ffd9a8 50%,transparent 51%),radial-gradient(1px 1px at 44% 31%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 41%,#fff 50%,transparent 51%);
  -webkit-mask-image:linear-gradient(#000 30%,transparent 75%);mask-image:linear-gradient(#000 30%,transparent 75%)}
/* entrances: half a second, a small rise, no blur; --d (written in ms on the element) is compressed so the stagger stays short */
.fade-up{animation:in-fu .5s var(--ease) both;animation-delay:calc(var(--d,0)*.4ms)}
@keyframes in-fu{from{opacity:0;transform:translateY(14px)}}

/* ---------- device frames ---------- */
.browser{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -24px rgba(0,0,0,.6)}
.browser .bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#8FA3B8;flex:none}
.browser .bar span{margin-inline:auto;flex:0 1 60%;height:20px;border-radius:10px;background:#fff;font-size:.84rem;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0 10px;overflow:hidden;white-space:nowrap}
.browser .scr{display:block;overflow:hidden;aspect-ratio:16/9;background:#eef0f4}
.browser .scr img{width:100%;height:auto;aspect-ratio:16/10;will-change:transform}
.phone{display:block;border-radius:24px;border:6px solid #05060a;background:#05060a;overflow:hidden;aspect-ratio:9/17;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 34px 70px -14px rgba(0,0,0,.7)}
.phone img{width:100%;height:auto;aspect-ratio:520/1125;border-radius:17px 17px 0 0;will-change:transform}

/* ---------- section bits ---------- */
/* nothing that carries meaning is set under 13px on the inner pages */
.kicker{font-size:.84rem;letter-spacing:.14em}
.sec-head{max-width:760px}
.sec-head.c{text-align:center;margin-inline:auto}
.sec-head.c .lead{margin-inline:auto}
.sw{display:flex}
.sw i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(11,31,68,.14);margin-left:-6px;transition:transform .45s var(--ease)}
.sw i:first-child{margin-left:0}
.feats{display:flex;flex-wrap:wrap;gap:6px}
.feats span{font-size:.84rem;background:var(--bg-soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px}

/* ---------- closing call-to-action band ---------- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(34px,6vw,80px) clamp(22px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 44px;align-items:end;box-shadow:var(--shadow)}
.cta-band::before{content:"";position:absolute;z-index:-1;inset:auto -20% -75% 18%;aspect-ratio:1.7;border-radius:50%;background:radial-gradient(closest-side,var(--accent),var(--coral) 28%,var(--violet) 56%,var(--accent) 74%,transparent);filter:blur(46px);opacity:.8;animation:cta-drift 14s ease-in-out infinite alternate paused}
/* the glow only drifts while the band is on screen (page scripts toggle .live with an IntersectionObserver) */
.cta-band.live::before{animation-play-state:running}
@keyframes cta-drift{to{transform:translate(-9%,-7%) scale(1.1)}}
.cta-band h2{font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;max-width:760px}
.cta-band h2 em{font-family:var(--serif);font-weight:800;font-style:italic}
.cta-band p{color:#d5d9e6;margin-top:16px;max-width:620px;font-size:1.05rem}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn{padding:16px 28px;font-size:1.02rem}
.cta-band .btn.primary{background:#fff;border-color:#fff;color:#0B1F44;box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.cta-band .btn.primary::before{background:var(--accent)}
.cta-band .btn.primary:hover{color:#0B1F44;border-color:var(--accent)}
.cta-band .btn.ghost{background:rgba(11,31,68,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

@media (max-width:900px){
  .cta-band{grid-template-columns:1fr;align-items:start}
}
@media (max-width:640px){
  .hero-ctas .btn,.cta-band .btn{flex:1 1 100%}
  /* links and buttons are at least 44px tall on phones */
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .btn.small{min-height:44px}
  .browser{border-radius:11px}
  .browser .bar{height:28px;padding:0 10px;gap:5px}
  .browser .bar i{width:6px;height:6px}
  .browser .bar span{height:18px;flex-basis:68%;justify-content:flex-start;text-overflow:ellipsis}
  .phone{border-width:4px;border-radius:17px}
  .phone img{border-radius:12px 12px 0 0}
}
/* on the narrowest phones the header shows the logo mark only (site.css); the footer has room for the name, so it stays readable there */
@media (max-width:350px){.site-footer .logo span{position:static;width:auto;height:auto;clip:auto}}

/* App imagery uses its native ratio: no cropping, logos or badge artwork. */
.app-icon{width:48px;height:48px;border-radius:22%;flex:none}
.app-identity{display:flex;align-items:center;gap:12px;min-width:0}
.app-identity>div{min-width:0;overflow-wrap:anywhere}
.app-category{font-size:.8rem;color:var(--muted);margin-top:4px}
.app-phone{display:block;background:var(--ink);padding:5px;border:1px solid #343947;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);width:100%;max-width:210px}
.app-phone img{width:100%;height:auto;aspect-ratio:600/1300;border-radius:16px}
.app-store{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;gap:6px}
.apps-actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:22px}
.apps-actions .link{display:inline-flex;align-items:center;min-height:44px}
.apps-actions .btn{white-space:normal;text-align:center}
.apps-note{color:var(--muted);font-size:.86rem;margin-top:16px}

.apps-page .app-hero{max-width:860px;min-height:280px}
.apps-page .app-rows{min-height:600px}
.apps-page .app-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:48px;align-items:center;padding-block:44px;border-bottom:1px solid var(--line)}
.apps-page .app-row h3{font-size:1.8rem}
.apps-page .app-description{color:var(--muted);margin-block:22px}
.apps-page .app-shots{display:flex;gap:14px;min-width:0;align-items:flex-start;padding:6px 4px 22px}
.apps-page .app-shots .app-phone{flex:1;min-width:0}
.apps-page .app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin-top:30px}
.apps-page .app-grid li{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:20px}
.apps-page .app-steps{counter-reset:app-step;grid-template-columns:repeat(4,minmax(0,1fr))}
.apps-page .app-steps li{counter-increment:app-step}
.apps-page .app-steps li::before{content:counter(app-step,decimal-leading-zero);display:block;color:var(--accent-ink);font-weight:700;margin-bottom:20px}
.apps-page .app-price{margin-top:32px;padding:28px;border:1px solid var(--line);border-radius:20px;max-width:780px}
.apps-page .app-price p+p{color:var(--muted);margin-top:10px}
.apps-page .app-ticks{list-style:none;margin-block:20px}
.apps-page .app-ticks li{display:flex;gap:10px;margin-top:10px}
.apps-page .app-ticks li::before{content:"✓";color:var(--accent-ink)}
@media(max-width:900px){.apps-page .app-row{grid-template-columns:1fr;gap:24px}.apps-page .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.apps-page .app-grid{grid-template-columns:1fr}.apps-page .app-shots{overflow-x:auto;scroll-snap-type:x mandatory}.apps-page .app-shots .app-phone{flex:0 0 68%;scroll-snap-align:start}.apps-page .app-row{padding-block:30px}}
@media(prefers-reduced-motion:reduce){.apps-page .app-shots{scroll-behavior:auto;scroll-snap-type:none}}

.apps-page .dark .apps-actions .link{color:var(--on-dark)}

.cta-band{background-image:var(--brand-stripes);background-position:right top;background-size:88px 26px;background-repeat:no-repeat}