/* AI Footprint site styles (shared) */
:root{
  --bg:#05091a;
  --panel: rgba(7,12,35,.78);
  --panel2: rgba(7,12,35,.55);
  --text:#f6f7ff;
  --muted:#a5afd9;
  --border: rgba(255,255,255,.10);
  --accent:#3fe4ff;
  --accent2:#7cfbff;
  --max:1080px;
  --r:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;color:var(--text);}
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(63,228,255,.16), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(124,251,255,.10), transparent 40%),
    radial-gradient(circle at 50% 0%, #0d1430 0, #05091a 55%, #020310 100%);
  min-height:100vh;
}

a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:28px 18px 42px;}
.header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 12px;border-radius:999px;border:1px solid var(--border);
  background:rgba(7,12,35,.55);backdrop-filter: blur(8px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.dot{
  width:28px;height:28px;border-radius:50%;
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #8af5ff 15%, #14d0ff 40%, #047bff 100%);
  box-shadow: 0 0 16px rgba(63,228,255,.7);
}
.brand b{letter-spacing:.02em;font-weight:650}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav a{
  text-decoration:none;color:var(--muted);font-size:13px;padding:7px 10px;border-radius:999px;border:1px solid transparent;
}
.nav a:hover{color:var(--text);border-color:var(--border);background:rgba(7,12,35,.65)}
.pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;border:1px solid var(--border);
  background:rgba(7,12,35,.7);color:var(--muted);font-size:13px;white-space:nowrap;
}
.pill i{width:6px;height:6px;border-radius:999px;background:#4cffc2;box-shadow:0 0 10px rgba(76,255,194,.6);display:inline-block}

.hero{
  margin-top:22px;
  display:grid;grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;
}
@media (max-width: 860px){ .hero{grid-template-columns:1fr} }

.h1{font-size:clamp(2.1rem,3.2vw,2.85rem);line-height:1.05;margin:0 0 12px}
.sub{color:var(--muted);font-size:1rem;line-height:1.55;max-width:42rem;margin:0 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.badge{
  font-size:12px;padding:6px 10px;border-radius:999px;
  background:rgba(63,228,255,.10);border:1px solid rgba(63,228,255,.25);color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
}
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;text-decoration:none;font-size:14px;border:1px solid transparent;
}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#041021;font-weight:750;box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.btn.ghost{
  background:rgba(7,12,35,.72);border-color:var(--border);color:var(--text);
}
.btn.ghost:hover{background:rgba(7,12,35,.92)}

.storeRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.store{
  min-width:230px;max-width:280px;flex: 1 1 230px;
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:11px 12px;border-radius:16px;border:1px solid var(--border);
  background:rgba(7,12,35,.75);
}
.store:hover{background:rgba(7,12,35,.92);border-color:rgba(255,255,255,.16)}
.store .ic{
  width:34px;height:34px;border-radius:12px;
  background:rgba(63,228,255,.12);border:1px solid rgba(63,228,255,.22);
  display:grid;place-items:center;color:var(--accent);font-weight:800
}
.store .meta{display:flex;flex-direction:column;line-height:1.1}
.store .meta small{color:var(--muted);font-size:12px}
.store .meta b{font-size:14px}

.card{
  border-radius: 28px;border:1px solid rgba(125,224,255,.18);
  background: radial-gradient(circle at top, #192457 0, #050814 55%, #02030a);
  box-shadow: 0 20px 60px rgba(0,0,0,.65);
  padding:16px;
}
.card img{width:100%;display:block;border-radius:22px}

.sectionGrid{
  margin-top:26px;
  display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:14px;
}
@media (max-width: 900px){ .sectionGrid{grid-template-columns:1fr} }
.tile{
  border-radius: var(--r);border:1px solid var(--border);
  background:rgba(7,12,35,.72);
  padding:14px 14px 12px;
}
.tile b{display:block;margin-bottom:6px}
.tile p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}

.footer{
  margin-top:28px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:12px
}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{text-decoration:underline}

.pageTitle{margin:20px 0 8px;font-size:1.8rem}
.pageLead{margin:0 0 16px;color:var(--muted);line-height:1.6}
.pagePanel{
  border-radius: var(--r);border:1px solid var(--border);
  background:rgba(7,12,35,.72);padding:16px;
}
.h3{margin:0 0 6px;font-size:1.05rem}
.p{margin:0 0 12px;color:var(--muted);line-height:1.7}
.ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.75}
.hr{height:1px;background:rgba(255,255,255,.08);border:0;margin:14px 0}









/* Mobile header tuning
   On narrow phones the brand + pill often cannot fit on a single row.
   Instead of letting flex-wrap place the pill in an awkward third line,
   we intentionally stack: Brand → Nav → Pill, and center the nav/pill.
*/
@media (max-width: 720px){
  .wrap{padding:22px 14px 36px;}

  .header{
    display:grid !important;
    grid-template-columns: 1fr;
    gap:10px;
    padding:12px 14px;
    align-items:center;
    justify-items:center;
  }

  .brand{
    order:1;
    justify-content:center;
  }

  .nav{
    order:2;
    width:100%;
    justify-content:center;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}

  .pill{
    order:3;
    width:fit-content;
    justify-self:center;
    margin:0;
    font-size:12px;
    padding:7px 10px;
  }
}

@media (max-width: 420px){
  .brand b{font-size:15px}
  .dot{width:26px;height:26px}
  .nav a{padding:7px 9px}
  .pill{font-size:12px}
}