/* Cyquila — shared theme for the homepage and per-app pages.
   Light by default (matching legal.css and foliowright.com); the original
   "Minds in Flight" dark treatment is preserved for anyone whose system asks
   for it. Every colour is a token so the two themes stay in step.

   The old build painted a `radial-gradient(...) fixed` body background under a
   `position:fixed` starfield with `backdrop-filter:blur()` cards on top — three
   compositing-heavy layers that made some monitors flicker on scroll. The
   gradient no longer scrolls with attachment:fixed, and the blur is dark-only. */
:root{
  /* surfaces */
  --space:#F6F8FC; --glow:#E9EFFA; --deep:#F6F8FC;
  --panel:#FFFFFF; --line:#E1E6F2; --line-strong:#C9D2E6;
  /* text */
  --ink:#1B1F3B; --muted:#5B6080; --faint:#6A6F94; --footer-link:#3D5A99;
  /* brand accents, darkened for contrast on a light ground */
  --indigo:#1B2160; --cyan:#0F7A86; --sky:#1E6FA8; --violet:#6B3FC4;
  --badge-bg:#6B3FC418; --status-bg:#0F7A8618; --soon-fg:#8A5A00; --soon-bg:#8A5A0018;
  /* effects */
  --card-shadow:0 6px 24px #0b0e2610; --shot-shadow:0 14px 36px #0b0e2620; --glow-shadow:0 12px 40px #6B3FC42e;
  --btn-fg:#FFFFFF; --stars-opacity:0; --card-blur:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --space:#0B0E26; --glow:#1B2160; --deep:#06081A;
    --panel:#ffffff0a; --line:#ffffff1a; --line-strong:#ffffff33;
    --ink:#EAF0FF; --muted:#9AA0C4; --faint:#6A6F94; --footer-link:#8FA2D8;
    --indigo:#1B2160; --cyan:#7FF0EE; --sky:#5AB8F2; --violet:#9A6BFF;
    --badge-bg:#9A6BFF22; --status-bg:#7FF0EE1a; --soon-fg:#F2A65A; --soon-bg:#F2A65A1a;
    --card-shadow:none; --shot-shadow:0 18px 50px #00000066; --glow-shadow:0 12px 48px #6A5CF055;
    --btn-fg:#0B0E26; --stars-opacity:1; --card-blur:blur(6px);
  }
}
:root[data-theme="dark"]{
  --space:#0B0E26; --glow:#1B2160; --deep:#06081A;
  --panel:#ffffff0a; --line:#ffffff1a; --line-strong:#ffffff33;
  --ink:#EAF0FF; --muted:#9AA0C4; --faint:#6A6F94; --footer-link:#8FA2D8;
  --indigo:#1B2160; --cyan:#7FF0EE; --sky:#5AB8F2; --violet:#9A6BFF;
  --badge-bg:#9A6BFF22; --status-bg:#7FF0EE1a; --soon-fg:#F2A65A; --soon-bg:#F2A65A1a;
  --card-shadow:none; --shot-shadow:0 18px 50px #00000066; --glow-shadow:0 12px 48px #6A5CF055;
  --btn-fg:#0B0E26; --stars-opacity:1; --card-blur:blur(6px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,'Avenir Next','Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--space);
  background-image:radial-gradient(120% 70% at 50% 0%, var(--glow) 0%, var(--space) 55%, var(--deep) 100%);
  background-repeat:no-repeat;
  line-height:1.6; overflow-x:hidden;
}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--stars-opacity);
  background-image:
    radial-gradient(1.5px 1.5px at 20% 12%, #BFE9FF88, transparent),
    radial-gradient(1.5px 1.5px at 80% 8%,  #BFE9FF66, transparent),
    radial-gradient(2px 2px   at 65% 22%, #BFE9FF55, transparent),
    radial-gradient(1.5px 1.5px at 35% 28%, #BFE9FF66, transparent),
    radial-gradient(1.5px 1.5px at 92% 30%, #BFE9FF44, transparent);}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 24px}

nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    max-width:1000px;margin:0 auto;padding:22px 24px;gap:16px;flex-wrap:wrap}
nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px;color:var(--ink);text-decoration:none}
nav .brand img{width:32px;height:32px;border-radius:8px}
nav .links{display:flex;gap:22px;font-size:15px}
nav a{color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink)}

header{text-align:center;padding:9vh 0 60px}
.hero-mark{width:112px;height:112px;border-radius:26px;box-shadow:var(--glow-shadow)}
h1{font-size:clamp(32px,6vw,54px);font-weight:800;margin:22px 0 8px;letter-spacing:-1.2px}
.tag{font-size:clamp(12px,3vw,15px);color:var(--cyan);font-weight:700;letter-spacing:4px;text-transform:uppercase}
.lead{color:var(--muted);font-size:clamp(16px,3.4vw,19px);margin:24px auto 0;max-width:620px}

section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(22px,4vw,30px);font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.sub{color:var(--muted);margin-bottom:30px;max-width:680px}
h3{font-size:18px;margin-bottom:6px}
p{color:var(--muted)}
p + p{margin-top:14px}
strong{color:var(--ink);font-weight:600}

.app{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.shots{display:flex;gap:12px;justify-content:center}
.shots img{width:31%;max-width:170px;border-radius:14px;border:1px solid var(--line);
           box-shadow:var(--shot-shadow)}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--violet);
       background:var(--badge-bg);padding:4px 10px;border-radius:20px;margin-bottom:12px}
.badge.status{color:var(--cyan);background:var(--status-bg)}
.badge.soon{color:var(--soon-fg);background:var(--soon-bg)}
.app-card.soon{border-style:dashed}
ul{list-style:none;margin-top:16px}
li{color:var(--muted);padding-left:22px;position:relative;margin-bottom:8px;font-size:15px}
li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
           background:linear-gradient(135deg,var(--cyan),var(--violet))}
.note{font-size:13px;color:var(--faint);margin-top:18px}

.store-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.store-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:var(--btn-fg);font-weight:700;
  font-size:14px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.store-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-shadow)}
.store-btn.disabled{background:var(--panel);color:var(--muted);border:1px solid var(--line);
  cursor:default;pointer-events:none}
.store-btn.disabled:hover{transform:none;box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;backdrop-filter:var(--card-blur);box-shadow:var(--card-shadow)}
.card p{font-size:14px}

/* App portfolio cards (homepage #apps grid — distinct from the generic .card above:
   clickable, with an icon/name/tagline/status header) */
.app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:26px}
.app-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;
          padding:24px;backdrop-filter:var(--card-blur);box-shadow:var(--card-shadow);text-decoration:none;color:inherit;
          transition:transform .15s ease, border-color .15s ease}
.app-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.app-card .icon{width:48px;height:48px;border-radius:12px;margin-bottom:14px;display:block}
.app-card h3{color:var(--ink);margin-bottom:4px}
.app-card .platform{font-size:12px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.app-card p{font-size:14px;margin-bottom:14px}
.app-card .cta{font-size:14px;font-weight:700;color:var(--sky)}

a.link{color:var(--sky);text-decoration:none;font-weight:600}
a.link:hover{text-decoration:underline}

footer{position:relative;z-index:1;border-top:1px solid var(--line);color:var(--faint);font-size:13px;
       padding:28px 24px 44px;text-align:center}
footer a{color:var(--footer-link);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .legal{margin-top:8px;color:var(--muted)}

.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
           font-size:14px;margin-bottom:8px}
.back-link:hover{color:var(--ink)}

@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .shots{order:-1}
  nav .links{gap:16px;font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .app-card:hover,.store-btn:hover{transform:none}
}