/* ============================================================
   aijo — site navigation
   Shared by index.html and pricing.html so the header is one
   component rather than two that drift apart.
   ============================================================ */

/* The nav's own palette, so this file stands alone on any page.
   index.html defines the same values in its :root and wins where both load. */
:root {
  --orange: #f0622a;
  --smoke: #8898b0;
  --line: rgba(255, 255, 255, 0.08);
  --oline: rgba(240, 98, 42, 0.25);
}

nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:1.8rem 4rem;display:flex;align-items:center;justify-content:space-between;transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.on{padding:1rem 4rem;background:rgba(5,13,26,.92);backdrop-filter:blur(24px);border-bottom-color:var(--line)}
.nav-left{display:flex;align-items:center;gap:1.5rem}
.nav-logo img{height:32px;width:auto;display:block}
.nav-tagline{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);border-left:1px solid var(--line);padding-left:1.5rem}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-apps{display:flex;align-items:center;gap:.65rem;margin-right:.35rem}
.nav-app-icon{width:2.5rem;height:2.5rem;border-radius:.8rem;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);display:grid;place-items:center;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.nav-app-icon img{width:100%;height:100%;object-fit:cover;display:block}
.nav-app-icon:hover{transform:translateY(-2px);border-color:rgba(240,98,42,.35);box-shadow:0 10px 28px rgba(0,0,0,.25);background:rgba(255,255,255,.05)}
.nav-app-icon.is-live{position:relative}
.nav-app-icon.is-live::after{content:'';position:absolute;top:.26rem;right:.26rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--orange);box-shadow:0 0 10px rgba(240,98,42,.6)}
.nav-btn{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem 1.4rem;text-decoration:none;border:1px solid var(--oline);color:var(--orange);transition:background .25s,color .25s,box-shadow .25s}
.nav-btn.filled{background:var(--orange);color:#fff;border-color:var(--orange)}
.nav-btn:hover{background:var(--orange);color:#fff;box-shadow:0 0 24px rgba(240,98,42,.4)}

/* ── 1024px: Tablet ── */
@media (max-width: 1024px) {
  nav { padding: 1.4rem 2rem; }
  nav.on { padding: .85rem 2rem; }
  .nav-tagline { display: none; }
  .nav-apps { gap: .45rem; margin-right: 0; }
  .nav-app-icon { width: 2.15rem; height: 2.15rem; border-radius: .65rem; }
}

/* ── 768px: Mobile ── */
@media (max-width: 768px) {
  nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: calc(.85rem + env(safe-area-inset-top)) 1.1rem .9rem;
    background: rgba(5,13,26,.9);
    backdrop-filter: blur(22px);
    border-bottom-color: rgba(255,255,255,.09);
  }
  nav.on { padding: calc(.7rem + env(safe-area-inset-top)) 1rem .8rem; }
  .nav-left { grid-column: 1; grid-row: 1; min-width: 0; }
  .nav-logo img { height: 27px; }
  .nav-right {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
  }
  .nav-right > .nav-btn:not(.filled) { display: none; }
  .nav-right > .nav-btn.filled {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: .64rem;
    letter-spacing: .09em;
    border-radius: 8px;
    white-space: nowrap;
  }
  .nav-apps {
    display: none;
  }
  .nav-app-icon {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: .95rem;
    background: rgba(255,255,255,.04);
  }
  .nav-app-icon.is-live::after { top: .24rem; right: .24rem; width: .38rem; height: .38rem; }
  .nav-apps .is-desktop-app {
    opacity: .68;
    filter: saturate(.7);
  }
  .nav-apps .is-desktop-app.is-live::after {
    background: rgba(136,152,176,.75);
    box-shadow: none;
  }
}