:root {
  --cream : #FAF8EF; --ink : #4A1B5F; --ink-soft : rgba(74, 27, 95, .7);--ink-muted : rgba(74, 27, 95, .55); --ink-line : rgba(74, 27, 95, .12);--sun : #F1E135; --sun-deep : #E5C82A; --bg : var(--cream); --card : #ffffff;--display : "Fraunces", "Cormorant Garamond", Georgia, serif;--body : "Inter", system-ui, sans-serif;
}
* {
  margin : 0;
  padding : 0;
  box-sizing : border-box
}
html, body {
  overflow-x : hidden
}
img, svg {
  display : block;
  max-width : 100%
}
a {
  color : inherit;
  text-decoration : none
}
ul {
  list-style : none;
  padding : 0;
  margin : 0
}
body {
  font-family : var(--body);
  background : var(--bg);
  color : var(--ink);
  line-height : 1.5;-webkit-font-smoothing : antialiased
}
h1, h2, h3, h4 {
  font-family : var(--display);
  letter-spacing : -.02em;
  line-height : 1.05;
  font-weight : 900
}
.btn-am {
  display : inline-flex;
  align-items : center;
  gap : 8px;
  border : none;
  cursor : pointer;
  font-weight : 600;
  font-size : 14px;
  border-radius : 999px;
  padding : 10px 18px;
  transition : transform .2s, background .2s, color .2s, box-shadow .2s
}
.btn-dark-am {
  background : var(--ink);
  color : var(--cream)
}
  .btn-dark-am:hover {
  background : #2a0e38;
  color : var(--cream);
  transform : translateY(-2px)
}
.nav-am {
  position : sticky;
  top : 0;
  z-index : 50;
  backdrop-filter : blur(12px);
  background : rgba(250, 248, 239, .85);
  border-bottom : 1px solid var(--ink-line)
}
.nav-inner {
  display : flex;
  align-items : center;
  justify-content : space-between;
  height : 64px
}
.logo {
  display : flex;
  align-items : center;
  gap : 10px;
  font-family : var(--display);
  font-size : 22px;
  font-weight : 700;
  color : var(--ink)
}
.logo-mark {
  width : 36px;
  height : 36px;
  border-radius : 999px;
  background : var(--sun);
  display : grid;
  place-items : center;
  animation : spin 18s linear infinite
}
.nav-links {
  display : none;
  gap : 32px;
  font-size : 14px;
  font-weight : 500;
  align-items : center
}
.nav-links a {
  transition : opacity .2s;
  color : var(--ink)
}
  .nav-links a:hover {
  opacity : .6
}
.nav-links a.active {
  font-weight : 700;
  border-bottom : 2px solid var(--sun)
}
  @media(min-width : 900px) {
  .nav-links{display : flex
}
}.marquee {
  background : var(--sun);
  border-top : 1px solid rgba(0, 0,0, .06);
  border-bottom : 1px solid rgba(0, 0,0, .06);
  overflow : hidden
}
.marquee-track {
  display : flex;
  white-space : nowrap;
  padding : 11px 0;
  animation : marquee 35s linear infinite;
  width : max-content
}
.marquee-item {
  display : inline-flex;
  align-items : center;
  gap : 10px;
  padding : 0 26px;
  font-size : 14px;
  font-weight : 600;
  color : var(--ink)
}
  .marquee-item ::before {
  content : "★";
  color : var(--ink)
}
@keyframes marquee {
  from{transform : translateX(0)
}
to {
  transform : translateX(-50%)
}
}@keyframes spin {
  to{transform : rotate(360deg)
}
}@keyframes fadeUp {
  from{opacity : 0;
  transform : translateY(20px)
}
to {
  opacity : 1;
  transform : translateY(0)
}
}.page-head {
  padding : 64px 0 24px;
  text-align : center;
  background : linear-gradient(180deg, rgba(241, 225, 53, .15), transparent)
}
.page-head .eyebrow {
  font-size : 12px;
  letter-spacing : .2em;
  text-transform : uppercase;
  font-weight : 700;
  color : var(--ink-soft)
}
.page-head h1 {
  margin-top : 12px;
  font-size : clamp(40px, 6vw, 64px);
  animation : fadeUp .7s ease both
}
.page-head h1 em {
  font-style : italic;
  color : var(--ink);
  background : var(--sun);
  padding : 0 10px
}
.page-head p {
  margin : 18px auto 0;
  color : var(--ink-muted);
  max-width : 620px;
  font-size : 16px
}
.sec {
  padding : 48px 0 96px
}
.reveal {
  opacity : 0;
  transform : translateY(28px);
  transition : opacity .7s ease, transform .7s ease
}
.reveal.in {
  opacity : 1;
  transform : none
}
.astro-filters {
  display : flex;
  flex-wrap : wrap;
  gap : 10px;
  margin : 8px 0 24px;
  justify-content : center
}
.astro-filters .chip {
  border : 1.5px solid var(--ink-line);
  background : var(--bg);
  color : var(--ink);
  padding : 9px 20px;
  border-radius : 999px;
  font-size : 13px;
  font-weight : 600;
  cursor : pointer;
  transition : all .2s
}
  .astro-filters .chip:hover {
  border-color : var(--ink)
}
.astro-filters .chip.active {
  background : var(--ink);
  color : var(--cream);
  border-color : var(--ink)
}
.astro {
  position : relative;
  background : var(--card);
  border : 1px solid var(--ink-line);
  border-radius : 22px;
  padding : 22px;
  transition : box-shadow .3s, transform .3s, border-color .3s;
  height : 100%;
  display : flex;
  flex-direction : column
}
  .astro:hover {
  box-shadow : 0 24px 50px -20px rgba(0, 0,0, .18);
  transform : translateY(-4px);
  border-color : var(--ink)
}
.verified {
  position : absolute;
  top : 14px;
  right : 14px;
  width : 26px;
  height : 26px;
  border-radius : 999px;
  background : #10b981;
  color : #fff;
  display : grid;
  place-items : center;
  font-size : 13px;
  font-weight : 900;
  box-shadow : 0 4px 12px rgba(16, 185, 129, .35)
}
.astro-top {
  display : flex;
  gap : 16px;
  align-items : center
}
.avatar-wrap {
  position : relative;
  flex-shrink : 0
}
.avatar-ring {
  width : 78px;
  height : 78px;
  border-radius : 999px;
  padding : 3px;
  background : linear-gradient(135deg, var(--sun), #fcd34d)
}
.avatar-inner {
  width : 100%;
  height : 100%;
  border-radius : 999px;
  background : var(--ink);
  display : grid;
  place-items : center;
  font-family : var(--display);
  font-size : 22px;
  font-weight : 700;
  color : var(--sun)
}
.online {
  position : absolute;
  bottom : 2px;
  right : 2px;
  width : 14px;
  height : 14px;
  border-radius : 999px;
  background : #10b981;
  border : 2px solid var(--bg)
}
.astro-name {
  font-family : var(--display);
  font-size : 20px;
  font-weight : 700;
  line-height : 1.15
}
.astro-skills {
  margin-top : 4px;
  font-size : 13px;
  color : var(--ink-muted);
  font-weight : 600
}
.astro-lang {
  margin-top : 2px;
  font-size : 12px;
  color : var(--ink-muted)
}
.astro-stats {
  margin-top : 16px;
  padding-top : 16px;
  border-top : 1px dashed var(--ink-line);
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 10px;
  font-size : 13px
}
.astro-stats .stat-i .lbl {
  font-size : 10.5px;
  letter-spacing : .08em;
  text-transform : uppercase;
  color : var(--ink-muted);
  font-weight : 700;
  display : block
}
.astro-stats .stat-i .val {
  font-weight : 700;
  color : var(--ink)
}
.astro-rating {
  margin-top : 12px;
  display : flex;
  align-items : center;
  justify-content : space-between;
  font-size : 13px
}
.astro-rating .stars {
  color : #f59e0b;
  letter-spacing : 1px;
  font-size : 14px
}
.astro-rating .orders {
  color : var(--ink-muted);
  font-size : 12px;
  font-weight : 600
}
.astro .book {
  margin-top : 18px;
  display : flex;
  justify-content : center;
  align-items : center;
  gap : 8px;
  background : var(--ink);
  color : var(--cream);
  padding : 12px;
  width : 100%;
  border-radius : 14px;
  font-weight : 700;
  font-size : 14px;
  transition : background .2s, color .2s, transform .2s;
  text-decoration : none
}
  .astro:hover .book {
  background : var(--sun);
  color : var(--ink);
  transform : translateY(-1px)
}
.empty-state {
  text-align : center;
  padding : 60px 0;
  color : var(--ink-muted)
}