/* polecat.live — the suite front door.
   Builds on the craft of the original polecat marketing site (dark, warm
   amber brand, soft glows) but speaks for the whole fleet. Static, no fonts
   loaded — system stack keeps first paint instant. */

:root {
  --bg: #0b0a10; --bg-2: #110f18; --surface: #16131f; --surface-2: #1d1928;
  --border: #2c2738; --text: #f1edf7; --text-2: #a59fb8; --text-3: #6b6480;
  --brand-a: #9C6B3F; --brand-b: #e08a45; --blush: #F4A6A6; --cream: #F5E9D6;
  --ok: #34d399; --warn: #f0a830;
  --r: 16px; --r-sm: 10px; --maxw: 1080px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-b); outline-offset: 2px; border-radius: 4px; }
.grad { background: linear-gradient(110deg, var(--brand-a), var(--brand-b) 45%, var(--blush)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }
.center { text-align: center; }
h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; }
h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.lead { font-size: clamp(15px, 2vw, 18px); color: var(--text-2); margin-top: 12px; }
.kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-b); margin-bottom: 8px; }
section[id] { scroll-margin-top: 76px; }
section.wrap { padding-top: 80px; padding-bottom: 80px; }
.band { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
.section-head { margin-bottom: 40px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 100px; font-family: inherit; font-weight: 700; font-size: 14px; padding: 10px 18px; cursor: pointer; text-decoration: none; transition: transform .12s, opacity .12s; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: linear-gradient(110deg, var(--brand-a), var(--brand-b)); color: #fff; box-shadow: 0 6px 22px rgba(224,138,69,.28); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: none; border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); }
.btn-lg { font-size: 16px; padding: 13px 26px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; background: rgba(11,10,16,.78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: -.4px; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav-links a { color: var(--text-2); text-decoration: none; transition: color .12s; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 640px) {
  .nav-links a:not(.btn) { display: none; }
  /* touch target: ~44px minimum (WCAG 2.5.5) — the nav-cta buttons are wide
     enough already, just short */
  .btn:not(.icon) { min-height: 44px; }
}

/* hero */
.hero { text-align: center; padding: 70px 22px 80px; max-width: 860px; margin: 0 auto; position: relative; }
.hero-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 680px; height: 480px; background: radial-gradient(closest-side, rgba(176,112,240,.16), rgba(224,138,69,.10), transparent 70%); pointer-events: none; z-index: -1; }
.hero-mascot { filter: drop-shadow(0 12px 34px rgba(156,107,63,.4)); animation: float 4.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero h1 { margin: 14px 0 6px; }
.hero-sub { font-size: clamp(15px, 2.2vw, 19px); color: var(--text-2); max-width: 640px; margin: 16px auto 0; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero-note { font-size: 13px; color: var(--text-2); margin-top: 18px; }

/* app grid — the launcher */
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .apps-grid { grid-template-columns: 1fr; } }
.app-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px; text-decoration: none; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.app-card::after { /* accent wash that breathes in on hover */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%);
  transition: opacity .2s ease;
}
.app-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 0 14px 38px rgba(0,0,0,.35); }
.app-card:hover::after { opacity: 1; }
.app-top { display: flex; align-items: center; gap: 12px; }
.app-glyph {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(140deg, var(--c), var(--c2, var(--c)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.app-glyph svg { display: block; }
.app-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.app-fun {
  margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; vertical-align: middle;
  padding: 2px 7px; border-radius: 100px; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.app-host { font-size: 12px; color: var(--text-3); }
.app-tagline { font-size: 14px; color: var(--text-2); flex: 1; }
.app-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); min-height: 18px; }
.app-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); flex-shrink: 0; }
.app-dot.soon { background: var(--text-3); box-shadow: none; }
.app-open { position: absolute; top: 18px; right: 18px; color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: opacity .16s, transform .16s; }
.app-card:hover .app-open { opacity: 1; transform: none; color: var(--c); }

/* principles */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }
.prin { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.prin b { color: var(--text); font-size: 15px; }
.prin-ic { font-size: 20px; }

/* final cta + footer */
.cta-final { text-align: center; padding: 90px 22px; }
.cta-final h2 { margin-bottom: 24px; }
.foot { display: flex; align-items: center; justify-content: space-between; padding: 26px 22px; border-top: 1px solid var(--border); max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; gap: 12px; }
.foot-brand { font-weight: 800; }
.foot-links { display: flex; gap: 20px; font-size: 14px; }
.foot-links a { color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-meta { width: 100%; text-align: center; font-size: 12px; color: var(--text-3); order: 3; }

/* reveal + motion hygiene */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero-mascot { animation: none; }
  .app-card, .app-card:hover { transform: none; }
}

@media (max-width: 520px) {
  .nav { padding: 10px 14px; }
  .hero { padding: 46px 16px 56px; }
  section.wrap, .band { padding-top: 56px; padding-bottom: 56px; }
}

/* dialog primitives — the vendored shell ui.js builds .modal-back/.modal for
   the Sign-in panel (auth-ui.js), but this page doesn't load shell.css (its
   .btn would fight the marketing buttons), so the modal family is styled
   here on the marketing tokens. Keep in sync with vendor ui.js class names. */
.modal-back { position: fixed; inset: 0; background: rgba(5, 4, 10, .65); backdrop-filter: blur(5px); z-index: 100; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .2s; }
.modal-back.in { opacity: 1; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 24px 70px rgba(0,0,0,.55); width: min(480px, 100%); max-height: 88vh; display: flex; flex-direction: column; transform: translateY(12px) scale(.98); transition: transform .2s; }
.modal-back.in .modal { transform: none; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; flex: 1; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.modal-body b { color: var(--text); }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.modal .btn.icon { padding: 6px 10px; font-size: 18px; line-height: 1; color: var(--text-2); background: none; border-color: transparent; box-shadow: none; }
.modal .btn.icon:hover { color: var(--text); transform: none; }
@media (max-width: 520px) {
  .modal-back { padding: 12px; }
  /* touch target: the close (×) button measured 37×32 on phones — WCAG 2.5.5 wants ~44px */
  .modal .btn.icon { width: 44px; height: 44px; }
}

/* ---- the idea + stats band ---- */
.idea-cols { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; font-size: clamp(15px, 2vw, 17px); color: var(--text-2); }
.idea-cols p { line-height: 1.75; }
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 880px; margin: 44px auto 0; }
@media (max-width: 640px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 12px; text-align: center; }
.stat b { display: block; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -1px; background: linear-gradient(110deg, var(--brand-b), var(--blush)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); }

/* ---- method grid ---- */
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 880px; margin: 0 auto; }
@media (max-width: 720px) { .method-grid { grid-template-columns: 1fr; } }
.method { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 8px; }
.method b { color: var(--text); font-size: 15.5px; }
.method-foot { max-width: 640px; margin: 34px auto 0; font-size: 15px; color: var(--text-2); }
.method-foot em { color: var(--brand-b); font-style: normal; font-weight: 700; }

/* ---- expertise grid + advantage band ---- */
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px) { .xp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .xp-grid { grid-template-columns: 1fr; } }
.xp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 8px; transition: border-color .16s ease, transform .16s ease; }
.xp:hover { border-color: color-mix(in srgb, var(--brand-b) 40%, var(--border)); transform: translateY(-2px); }
.xp b { color: var(--text); font-size: 15.5px; }
.adv { max-width: 780px; margin: 44px auto 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand-b) 35%, var(--border)); border-radius: var(--r); padding: 28px; text-align: center; }
.adv p { color: var(--text-2); font-size: 15px; max-width: 620px; margin: 0 auto; }
.adv-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
.adv-pill { padding: 8px 16px; border-radius: 100px; font-size: 13.5px; font-weight: 700; color: var(--cream); background: color-mix(in srgb, var(--brand-a) 32%, transparent); border: 1px solid color-mix(in srgb, var(--brand-b) 45%, transparent); }
.adv .muted-line { font-size: 13.5px; color: var(--text-3); }

/* ---- about ---- */
.about-wrap { max-width: 880px; }
.about-cols { display: flex; flex-direction: column; gap: 16px; font-size: clamp(15px, 2vw, 16.5px); color: var(--text-2); }
.about-cols p { line-height: 1.75; }
.about-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ================= glamour layer ================= */
/* living gradient text — slow hue drift on every .grad */
.grad { background-size: 200% 100%; animation: gradShift 9s ease-in-out infinite; }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* aurora: three blurred color fields drifting behind everything — the same
   treatment the Manager and JobTracker apps wear (blob field, screen blend). */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px); opacity: .28; mix-blend-mode: screen;
  animation: drift 30s ease-in-out infinite;
}
.aurora span:nth-child(1) { background: #b070f0;         top: -24vmax; left: -14vmax; }
.aurora span:nth-child(2) { background: var(--brand-b);  bottom: -28vmax; right: -12vmax; animation-delay: -10s; }
.aurora span:nth-child(3) { background: var(--blush);    top: 26vmax; right: 22vmax; opacity: .18; animation-delay: -18s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(7vmax,4vmax) scale(1.12); } 66% { transform: translate(-5vmax,3vmax) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }

/* kickers get a gradient tick */
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-a), var(--brand-b), var(--blush)); }

/* nav links: sliding underline */
.nav-links a:not(.btn) { position: relative; padding-bottom: 2px; }
.nav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-b), var(--blush)); transition: width .22s ease; }
.nav-links a:not(.btn):hover::after { width: 100%; }

/* advantage card: gradient border + breathing glow */
.adv { position: relative; border: 1px solid transparent; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  linear-gradient(120deg, color-mix(in srgb, var(--brand-a) 70%, transparent), color-mix(in srgb, #b070f0 55%, transparent), color-mix(in srgb, var(--brand-b) 70%, transparent)) border-box;
  animation: advGlow 6s ease-in-out infinite; }
@keyframes advGlow { 0%,100% { box-shadow: 0 0 34px rgba(224,138,69,.10); } 50% { box-shadow: 0 0 54px rgba(176,112,240,.16); } }
.adv-pill { transition: transform .14s ease, box-shadow .14s ease; }
.adv-pill:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 18px rgba(224,138,69,.25); }

/* stat cards: lift + shine */
.stat { transition: transform .16s ease, border-color .16s ease; position: relative; overflow: hidden; }
.stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-b) 40%, var(--border)); }
.stat::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); transition: left .5s ease; }
.stat:hover::after { left: 120%; }

/* method/xp cards pick up an accent wash like the app cards */
.method, .xp { position: relative; overflow: hidden; }
.method::after, .xp::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 15% 0%, rgba(224,138,69,.10), transparent 60%); transition: opacity .2s ease; }
.method:hover::after, .xp:hover::after { opacity: 1; }

/* hero: a touch more drama */
.hero h1 { font-size: clamp(38px, 6.4vw, 66px); }
.hero-cta .btn-primary { box-shadow: 0 6px 22px rgba(224,138,69,.28), 0 0 0 0 rgba(224,138,69,.35); animation: ctaPulse 3.2s ease-in-out infinite; }
@keyframes ctaPulse { 0%,100% { box-shadow: 0 6px 22px rgba(224,138,69,.28), 0 0 0 0 rgba(224,138,69,.25); } 50% { box-shadow: 0 6px 26px rgba(224,138,69,.38), 0 0 0 9px rgba(224,138,69,0); } }
::selection { background: color-mix(in srgb, var(--brand-b) 55%, transparent); color: #fff; }

/* ================= glamour layer v2 — punchier, calibr8-inspired ================= */

/* film grain: a whisper of texture over everything */
.grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(4) infinite; }
@keyframes grainShift { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1.2%, .8%); } 50% { transform: translate(.9%, -1%); } 75% { transform: translate(-.7%, -.6%); } }

/* scroll progress: a thin gradient thread across the very top */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; z-index: 70;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b), var(--blush), #b070f0);
  transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); pointer-events: none; }

/* hero: staggered entrance — each child rises in on load */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero > * { animation: riseIn .7s cubic-bezier(.22,.8,.3,1) both; }
.hero .hero-mascot { animation: riseIn .7s cubic-bezier(.22,.8,.3,1) both, float 4.5s ease-in-out 1s infinite; }
.hero h1 { animation-delay: .08s; }
.hero .hero-sub { animation-delay: .18s; }
.hero .hero-cta { animation-delay: .28s; }
.hero .hero-note { animation-delay: .38s; }
.hero .scroll-cue { animation-delay: .55s; }

/* mascot: playful wiggle when you poke it */
.hero-mascot:hover { animation: riseIn .7s cubic-bezier(.22,.8,.3,1) both, wiggle .6s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.06); } 65% { transform: rotate(6deg) scale(1.04); } }

/* scroll cue */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 34px;
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-3); text-decoration: none; transition: color .2s; }
.scroll-cue span { font-size: 16px; animation: cueBob 1.6s ease-in-out infinite; }
.scroll-cue:hover { color: var(--brand-b); }
@keyframes cueBob { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(5px); opacity: 1; } }

/* the ticker: an endless drift of the stack, edge-faded, pauses on hover */
.ticker { overflow: hidden; border-block: 1px solid var(--border); padding: 13px 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: flex; gap: 44px; width: max-content; animation: tickerRoll 44s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); white-space: nowrap; position: relative; transition: color .2s; }
.ticker-track span:hover { color: var(--brand-b); }
.ticker-track span::after { content: '·'; position: absolute; right: -26px; color: var(--brand-a); opacity: .6; }
@keyframes tickerRoll { to { transform: translateX(-50%); } }

/* staggered reveals: children of a revealed grid cascade in */
.method-grid .reveal, .xp-grid .reveal { transition-duration: .55s; }
.method-grid .reveal:nth-child(2), .xp-grid .reveal:nth-child(2) { transition-delay: .08s; }
.method-grid .reveal:nth-child(3), .xp-grid .reveal:nth-child(3) { transition-delay: .16s; }
.method-grid .reveal:nth-child(4), .xp-grid .reveal:nth-child(4) { transition-delay: .24s; }
.xp-grid .reveal:nth-child(5) { transition-delay: .32s; }
.xp-grid .reveal:nth-child(6) { transition-delay: .4s; }
.reveal { transform: translateY(24px); filter: blur(4px); }
.reveal.in { filter: none; }

/* method cards: big ghost numbers */
.method { position: relative; }
.mnum { position: absolute; top: 10px; right: 16px; font-style: normal; font-weight: 800; font-size: 40px; letter-spacing: -2px; line-height: 1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand-b) 55%, transparent), color-mix(in srgb, #b070f0 35%, transparent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .5; transition: opacity .2s, transform .2s; }
.method:hover .mnum { opacity: 1; transform: scale(1.08) rotate(3deg); }

/* app cards: 3D tilt (JS sets --rx/--ry on pointer:fine) + glyph pop + shine */
.apps-grid { perspective: 1100px; }
.app-card { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(0); will-change: transform; }
.app-card:hover { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px); }
.app-card::before { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent); transition: left .55s ease; }
.app-card:hover::before { left: 130%; }
.app-glyph { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.app-card:hover .app-glyph { transform: scale(1.12) rotate(-5deg); }

/* buttons: shine sweep on the primary, arrow nudge on ghosts */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .45s ease; }
.btn-primary:hover::after { left: 140%; }

/* final CTA: halo ring */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before { content: ''; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; transform: translate(-50%,-50%); z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(224,138,69,.10), rgba(176,112,240,.06) 45%, transparent 68%); animation: haloBreathe 6s ease-in-out infinite; }
@keyframes haloBreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .8; } 50% { transform: translate(-50%,-50%) scale(1.18); opacity: 1; } }

/* the hidden bonus mark — tucked bottom-right, nearly invisible until found */
.mystery {
  position: fixed; right: 14px; bottom: 12px; z-index: 80;
  font-size: 13px; line-height: 1; text-decoration: none;
  color: var(--text-3); opacity: .12; transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.mystery:hover, .mystery:focus-visible {
  opacity: .9; color: var(--brand-b); transform: rotate(45deg) scale(1.25); outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .grad, body::before, body::after, .adv, .hero-cta .btn-primary { animation: none; }
  .stat::after { display: none; }
  .grain, .scroll-cue span, .cta-final::before { animation: none; }
  .hero > *, .hero .hero-mascot { animation: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .reveal { transform: none; filter: none; }
  .app-card, .app-card:hover { transform: none; }
  .app-card::before, .btn-primary::after { display: none; }
  .mystery:hover, .mystery:focus-visible { transform: none; }
}

/* ── Connect-with-us form ───────────────────────────────────────────────── */
.connect-wrap { max-width: 640px; }
.connect-form { display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700;
  color: var(--text-2); letter-spacing: .2px; }
.cf-field input, .cf-field select, .cf-field textarea {
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s; width: 100%; }
.cf-field textarea { resize: vertical; min-height: 96px; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--text-3); font-weight: 400; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--brand-b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-b) 26%, transparent); }
.cf-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.cf-status { font-size: 14px; color: var(--text-2); }
.connect-thanks { display: flex; align-items: center; gap: 14px; padding: 22px 24px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
  border-radius: var(--r); max-width: 640px; margin: 0 auto; }
.connect-thanks svg { width: 26px; height: 26px; color: var(--ok); flex: none; }
.connect-thanks p { margin: 0; color: var(--text); font-size: 15px; }