/* aircoded.app — EXPERIMENT: the mirror of site.css.
   Light header with navy titles and navy buttons; navy page with white
   titles and mint buttons; the outro stays light, as in site.css; white footer.
   Loaded after site.css. Remove the <link> in index.html to go back. */

/* ---------- header: light ---------- */

.nav {
  color: var(--navy);
}

.nav-aircode {
  color: var(--muted);
}

.nav-aircode:hover {
  color: var(--navy);
}

.hero {
  color: var(--text);
}

.hero :focus-visible {
  outline-color: var(--navy);
}

.hero-bg {
  background: linear-gradient(150deg, #fff 10%, #f6f8fa 55%, #eef1fb 82%, var(--mint) 96%);
}

.hero-bg span {
  background: rgba(9, 29, 112, 0.035);
}

.hero-bg span:nth-child(2) {
  background: rgba(9, 29, 112, 0.05);
}

.hero-bg span:nth-child(3) {
  background: rgba(9, 29, 112, 0.03);
}

.hero .eyebrow {
  color: var(--mint-dark);
}

.hero-url {
  color: var(--navy);
}

.hero-domain {
  color: var(--muted);
}

.caret {
  color: var(--mint-dark);
}

.hero-lede {
  color: var(--muted);
}

.hero-lede strong {
  color: var(--navy);
}

.hero .btn-mint {
  background: var(--navy);
  color: #fff;
}

.hero .btn-mint:hover {
  background: var(--navy-deep);
}

.hero .btn-ghost {
  border-color: rgba(9, 29, 112, 0.3);
  color: var(--navy);
}

.hero .btn-ghost:hover {
  border-color: var(--navy);
  background: rgba(9, 29, 112, 0.05);
}

.tile-art {
  box-shadow:
    0 0 28px 4px rgba(56, 236, 170, 0.12),
    0 0 0 1px rgba(9, 29, 112, 0.08),
    0 12px 30px rgba(9, 29, 112, 0.18);
}

.tile:hover .tile-art {
  box-shadow:
    0 0 28px 4px rgba(56, 236, 170, 0.12),
    0 0 0 2px var(--mint-dark),
    0 16px 34px rgba(9, 29, 112, 0.22);
}

.tile-name {
  color: var(--text);
}

.tile:hover .tile-name {
  color: var(--navy);
}

/* ---------- page: navy ---------- */

body {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.75);
}

:focus-visible {
  outline-color: var(--mint);
}

.eyebrow {
  color: var(--mint);
}

.section-title,
.app-domain .app-name,
.app-tagline,
.tool-list .app-name {
  color: #fff;
}

.domain .suffix,
.section-count,
.app-meta .price {
  color: rgba(255, 255, 255, 0.45);
}

.app-domain a:hover .suffix,
.tool-list a:hover .suffix {
  color: rgba(255, 255, 255, 0.75);
}

.app-meta {
  color: var(--mint);
}

.app-desc,
.tool-desc {
  color: rgba(255, 255, 255, 0.72);
}

.app,
.tool-list,
.tool-list li {
  border-color: rgba(255, 255, 255, 0.1);
}

.app-cta {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.app-cta:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy-deep);
}

/* app visuals on navy: a mint pool of light, black shadows */
:root {
  --image-glow: rgba(56, 236, 170, 0.12);
  --small-image-glow: var(--image-glow);
  --shadow-shot:
    0 24px 48px -12px rgba(0, 0, 0, 0.3),
    0 8px 16px -6px rgba(0, 0, 0, 0.2);
  --shadow-shot-hover:
    0 34px 64px -14px rgba(0, 0, 0, 0.35),
    0 12px 24px -8px rgba(0, 0, 0, 0.24);
  --device-body: #0a0d18;
  --device-rim: rgba(255, 255, 255, 0.22);
}

/* ---------- outro: light, as in site.css ---------- */

.outro .eyebrow {
  color: var(--mint-dark);
}

.outro :focus-visible {
  outline-color: var(--navy);
}

/* ---------- footer: white ---------- */

.footer {
  background: #fff;
  color: var(--navy);
  border-top: 1px solid var(--hairline);
}

.footer :focus-visible {
  outline-color: var(--navy);
}

.footer h4 {
  color: var(--mint-dark);
}

.footer-brand p,
.footer ul {
  color: var(--text);
}

.footer ul a:hover {
  color: var(--navy);
}

.footer-legal {
  border-color: var(--hairline);
  color: var(--faint);
}