/* === Ateliss — shared styles === */
:root {
  --bg:    #060A10;
  --sf:    #0D1724;
  --sf2:   #121F30;
  --br:    #1C2E42;
  --tx:    #DCE8F6;
  --mu:    #7A9AB8;
  --mu2:   #4F6A86;
  --cy:    #00C8B5;
  --vi:    #7C62FF;
  --go:    #EDB84B;
  --rd:    #FF4260;
  --nav-h: 64px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--tx);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
}

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.5rem,5vw,4rem);
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--br);
}
.nav-logo {
  display:flex; flex-direction:column; line-height:1.1;
  text-decoration:none;
}
.nav-logo-main {
  font-size:1.15rem; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--cy),var(--vi));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-logo-sub { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mu2); }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a {
  font-size:.85rem; color:var(--mu); text-decoration:none;
  transition:color .2s; letter-spacing:.02em;
}
.nav-links a:hover, .nav-links a.active { color:var(--tx); }
.nav-cta {
  display:inline-flex; align-items:center;
  padding:.45rem 1.1rem;
  background:var(--cy); color:var(--bg);
  font-size:.82rem; font-weight:700; text-decoration:none;
  border-radius:6px; transition:opacity .2s;
}
.nav-cta:hover { opacity:.85; }
.nav-burger { display:none; background:none; border:none; color:var(--mu); font-size:1.4rem; cursor:pointer; }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--br);
  padding:2.5rem clamp(1.5rem,5vw,4rem);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-logo { font-size:.85rem; font-weight:700; color:var(--mu2); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.78rem; color:var(--mu2); text-decoration:none; }
.footer-links a:hover { color:var(--cy); }
.footer-legal { font-size:.72rem; color:var(--mu2); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.4rem; border-radius:7px;
  font-size:.9rem; font-weight:700; text-decoration:none;
  transition:all .2s; cursor:pointer;
}
.btn-primary { background:var(--cy); color:var(--bg); }
.btn-primary:hover { opacity:.85; }
.btn-outline { border:1.5px solid var(--br); color:var(--tx); background:transparent; }
.btn-outline:hover { border-color:var(--cy); color:var(--cy); }

/* ── SECTIONS ── */
section { padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); }
.section-inner { max-width:1100px; margin:0 auto; }

/* ── LABELS ── */
.eyebrow {
  display:inline-block;
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cy); margin-bottom:.65rem;
}
.section-heading {
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.15;
  text-wrap:balance; margin-bottom:1rem;
}
.section-sub {
  font-size:1rem; color:var(--mu); max-width:52ch; line-height:1.8;
}

/* ── CARDS ── */
.card {
  background:var(--sf); border:1px solid var(--br);
  border-radius:10px; padding:1.5rem;
}
.card:hover { border-color:var(--cy); }
.card-title { font-size:.9rem; font-weight:700; margin-bottom:.5rem; }
.card-body  { font-size:.85rem; color:var(--mu); line-height:1.7; }

/* ── PILLS ── */
.pill {
  display:inline-flex; align-items:center;
  padding:.28rem .7rem; border-radius:999px;
  font-size:.7rem; font-weight:700; border:1px solid;
}
.pill-cy { color:var(--cy); border-color:var(--cy); background:color-mix(in srgb,var(--cy) 10%,transparent); }
.pill-vi { color:var(--vi); border-color:var(--vi); background:color-mix(in srgb,var(--vi) 10%,transparent); }
.pill-go { color:var(--go); border-color:var(--go); background:color-mix(in srgb,var(--go) 10%,transparent); }
.pill-mu { color:var(--mu); border-color:var(--br); background:transparent; }

/* ── GRID HELPERS ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/* ── DOT BG ── */
.dot-bg {
  background-image:radial-gradient(var(--br) 1px,transparent 1px);
  background-size:30px 30px;
}

/* ── STAT ── */
.stat-val { font-size:clamp(2.2rem,5vw,3.5rem); font-weight:900; letter-spacing:-.06em; line-height:1; }
.stat-lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mu); margin-top:.3rem; }

@media(max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .nav-burger { display:block; }
  footer { flex-direction:column; text-align:center; }
}