/* Cyquila — shared dark "Minds in Flight" theme for the homepage and per-app pages. */
:root{
  --space:#0B0E26; --indigo:#1B2160; --cyan:#7FF0EE; --sky:#5AB8F2; --violet:#9A6BFF;
  --ink:#EAF0FF; --muted:#9AA0C4; --line:#ffffff1a; --panel:#ffffff0a;
}
*{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:radial-gradient(120% 70% at 50% 0%, #1B2160 0%, #0B0E26 55%, #06081A 100%) fixed;
  line-height:1.6; overflow-x:hidden;
}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;
  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:0 12px 48px #6A5CF055}
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:0 18px 50px #00000066}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--violet);
       background:#9A6BFF22;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.badge.status{color:var(--cyan);background:#7FF0EE1a}
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:#6A6F94;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:#0B0E26;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:0 8px 24px #6A5CF055}
.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:blur(6px)}
.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:blur(6px);text-decoration:none;color:inherit;
          transition:transform .15s ease, border-color .15s ease}
.app-card:hover{transform:translateY(-2px);border-color:#ffffff33}
.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:#6A6F94;font-size:13px;
       padding:28px 24px 44px;text-align:center}
footer a{color:#8FA2D8;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .legal{margin-top:8px;color:#5A5F80}

.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}
}