: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 : "DM Sans", sans-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)!important;
  transform :translateY(-2px)
}
.btn-sun {
  background :var(--sun);
  color :var(--ink)
}
  .btn-sun:hover {
  background :var(--sun-deep);
  color :var(--ink);
  transform :translateY(-2px)
}
.btn-outline-am {
  background :transparent;
  color :var(--ink);
  border :2px solid var(--ink);
  border-radius :999px;
  padding :13px 24px;
  font-weight :600;
  display :inline-flex;
  align-items :center;
  gap :8px
}
  .btn-outline-am:hover {
  background :var(--ink);
  color :var(--cream)!important
}
.btn-lg-am {
  padding :15px 26px;
  font-size :15px
}
.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
}
  @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%)
}
}.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:64px 0 96px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
.eyebrow-c{text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#7b3aa1}
.sec h2{font-size:clamp(30px,4vw,48px);text-align:center;margin-top:10px}
.sec .intro{text-align:center;color:var(--ink-soft);max-width:760px;margin:16px auto 40px;font-size:15.5px}
.hero {
  padding :50px 0 50px;
  position :relative
}
.grid-paper {
  background-image :linear-gradient(to right, rgba(74, 27, 95, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(74, 27, 95, .06) 1px, transparent 1px);
  background-size :32px 32px;
}
.chip {
  display :inline-flex;
  align-items :center;
  gap :8px;
  background :var(--ink);
  color :var(--cream);
  border-radius :999px;
  padding :6px 14px;
  font-size :12px;
  font-weight :500;
  animation :fadeUp .6s ease both;
}
.chip .spark {
  color :var(--sun)
}
.hero h1 {
  margin-top :24px;
  font-size :clamp(40px, 7vw, 76px);
  font-weight :900;
  animation :fadeUp .7s .1s ease both
}
.hl {
  position :relative;
  display :inline-block
}
  .hl::after {
  content :"";
  position :absolute;
  left :0;
  right :0;
  bottom :6px;
  height :14px;
  background :var(--sun);
  z-index :-1;
  transform-origin :left;
  transform :scaleX(0);
  animation :hl 1s .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes hl {
  to{transform :scaleX(1)
}
}.hero-sub {
  margin-top :22px;
  color :var(--ink-muted);
  font-size :18px;
  max-width :600px;
  animation :fadeUp .7s .35s ease both
}
.hero-sub b {
  color :var(--ink)
}
.hero-ctas {
  margin-top :30px;
  display :flex;
  flex-wrap :wrap;
  gap :12px;
  animation :fadeUp .7s .5s ease both
}
.proof {
  margin-top :30px;
  display :flex;
  align-items :center;
  gap :18px;
  font-size :14px;
  color :var(--ink-muted)
}
.avatars {
  display :flex
}
.avatars span {
  width :36px;
  height :36px;
  border-radius :999px;
  border :2px solid var(--bg);
  margin-left :-8px
}
  .avatars span:nth-child(odd) {
  background :var(--sun)
}
  .avatars span:nth-child(even) {
  background :#1f2937
}
.proof-stars {
  color :var(--ink);
  font-weight :600;
  display :flex;
  align-items :center;
  gap :4px
}
.proof-stars .s {
  color :var(--sun)
}
.wheel-wrap {
  position :relative;
  height :520px;
  display :grid;
  place-items :center
}
.wheel {
  position :relative;
  width :480px;
  height :480px;
  max-width :90vw;
  max-height :90vw;
  aspect-ratio :1
}
.wheel .glow {
  position :absolute;
  inset :40px;
  border-radius :999px;
  background :var(--sun);
  filter :blur(60px);
  opacity :.55
}
.ring {
  position :absolute;
  inset :0;
  border-radius :999px
}
.ring-outer {
  border :2px dashed rgba(74, 27, 95, .28);
  animation :spin 40s linear infinite
}
.ring-inner {
  inset :80px;
  border :1px solid rgba(74, 27, 95, .18);
  animation :spin 40s linear infinite reverse
}
.zod, .planet {
  position :absolute;
  top :50%;
  left :50%;
  display :grid;
  place-items :center;
  font-weight :700;--r :0deg;
  transform :translate(-50%, -50%) rotate(var(--r)) translateY(var(--d)) rotate(calc(var(--r) * -1));
}
.zod {
  width :42px;
  height :42px;
  border-radius :999px;
  background :var(--card);
  border :1px solid var(--ink-line);
  font-size :18px;
  box-shadow :0 2px 6px rgba(0, 0, 0, .05);--d :-220px
}
.planet {
  width :34px;
  height :34px;
  border-radius :999px;
  background :var(--ink);
  color :var(--sun);
  font-size :14px;--d :-150px
}
.sun-core {
  position :absolute;
  inset :0;
  display :grid;
  place-items :center;
  animation :spin 30s linear infinite
}
.sun-rays {
  width :200px;
  height :200px;
  border-radius :999px;
  display :grid;
  place-items :center;
  box-shadow :0 30px 60px -20px rgba(241, 225, 53, .6);
  background :radial-gradient(circle at 50% 50%, var(--sun) 0%, var(--sun) 32%, transparent 33%), repeating-conic-gradient(from 0deg, var(--sun) 0deg 8deg, transparent 8deg 16deg);
}
.sun-core-inner {
  width :140px;
  height :140px;
  border-radius :999px;
  background :var(--sun);
  display :grid;
  place-items :center
}
.float-card {
  position :absolute;
  background :var(--card);
  border :1px solid var(--ink-line);
  border-radius :18px;
  padding :12px 16px;
  box-shadow :0 20px 50px -20px rgba(0, 0, 0, .25);
  animation :float 5s ease-in-out infinite;
  display :flex;
  align-items :center;
  gap :10px;
}
.float-card.dark {
  background :var(--ink);
  color :var(--cream);
  border-color :transparent;
  animation-delay :1s
}
.dot {
  position :relative;
  width :10px;
  height :10px;
  border-radius :999px;
  background :#10b981
}
  .dot::after {
  content :"";
  position :absolute;
  inset :0;
  border-radius :999px;
  background :#10b981;
  animation :ping 1.4s cubic-bezier(0, 0, .2, 1) infinite
}
.fc-1 {
  top :0;
  left :-10px
}
.fc-2 {
  bottom :0;
  right :-10px
}
.fc-label {
  font-size :11px;
  color :var(--ink-muted);
  text-transform :uppercase;
  letter-spacing :.08em
}
.float-card.dark .fc-label {
  color :rgba(250, 248, 239, .65)
}
.fc-val {
  font-size :14px;
  font-weight :700
}
@keyframes spin {
  to{transform :rotate(360deg)
}
}@keyframes float {
  0%, 100%{transform :translateY(0)
}
50% {
  transform :translateY(-12px)
}
}@keyframes ping {
  75%, 100%{transform :scale(2);
  opacity :0
}
}@keyframes fadeUp {
  from{opacity :0;
  transform :translateY(20px)
}
to {
  opacity :1;
  transform :translateY(0)
}
}.stats {
  background :var(--ink);
  color :var(--cream);
  padding :42px 0
}
.stat-v {
  font-family :var(--display);
  font-size :clamp(34px, 4vw, 50px);
  font-weight :700;
  color :var(--sun)
}
.stat-l {
  margin-top :4px;
  font-size :11px;
  text-transform :uppercase;
  letter-spacing :.18em;
  opacity :.7
}
.sec {
  padding :96px 0
}
.eyebrow {
  font-size :12px;
  letter-spacing :.2em;
  text-transform :uppercase;
  font-weight :700;
  color :var(--ink-soft)
}
.eyebrow.gold {
  color :var(--sun)
}
.sec h2 {
  font-size :clamp(34px, 4.5vw, 52px);
  margin-top :12px
}
.sec-sub {
  margin-top :14px;
  color :var(--ink-muted);
  font-size :16px;
  max-width :560px
}
.reveal {
  opacity :0;
  transform :translateY(28px);
  transition :opacity .7s ease, transform .7s ease
}
.reveal.in {
  opacity :1;
  transform :none
}
.svc {
  position :relative;
  background :var(--card);
  border :1px solid var(--ink-line);
  border-radius :18px;
  padding :26px;
  overflow :hidden;
  display :block;
  color :var(--ink);
  transition :transform .3s, border-color .3s, box-shadow .3s;
  height :100%;
}
  .svc::after {
  content :"";
  position :absolute;
  left :0;
  right :0;
  bottom :0;
  height :4px;
  background :var(--sun);
  transform :scaleX(0);
  transform-origin :left;
  transition :transform .35s ease
}
  .svc:hover {
  transform :translateY(-6px);
  border-color :var(--ink);
  box-shadow :0 20px 40px -20px rgba(0, 0, 0, .15);
  color :var(--ink)
}
  .svc:hover::after {
  transform :scaleX(1)
}
  .svc:hover .svc-ico {
  transform :rotate(8deg)
}
.svc-ico {
  width :48px;
  height :48px;
  border-radius :14px;
  background :var(--sun);
  display :grid;
  place-items :center;
  margin-bottom :18px;
  transition :transform .3s
}
.svc h3 {
  font-size :22px;
  font-weight :700
}
.svc p {
  margin-top :8px;
  color :var(--ink-muted);
  font-size :14px
}
.svc-link {
  margin-top :16px;
  display :inline-flex;
  align-items :center;
  gap :6px;
  font-size :14px;
  font-weight :600
}
  .svc:hover .svc-link svg {
  transform :translateX(4px)
}
.svc-link svg {
  transition :transform .25s
}
.how {
  background :var(--ink);
  color :var(--cream)
}
.steps-wrap {
  position :relative;
  margin-top :56px
}
.step-n {
  width :64px;
  height :64px;
  border-radius :999px;
  background :var(--sun);
  color :var(--ink);
  font-family :var(--display);
  font-weight :700;
  font-size :22px;
  display :grid;
  place-items :center;
  margin-bottom :18px;
  position :relative;
  z-index :1;
}
.step h3 {
  font-size :22px
}
.step p {
  margin-top :8px;
  font-size :14px;
  color :rgba(250, 248, 239, .7)
}
.how-cta {
  margin-top :56px;
  text-align :center
}
.pulse-glow {
  animation :pulseGlow 2.6s ease-in-out infinite
}
@keyframes pulseGlow {
  0%, 100%{box-shadow :0 0 0 0 rgba(241, 225, 53, .6)
}
50% {
  box-shadow :0 0 40px 12px rgba(241, 225, 53, .25)
}
}.see-all {
  font-size :14px;
  font-weight :600;
  text-decoration :underline;
  text-decoration-color :var(--sun);
  text-decoration-thickness :4px;
  text-underline-offset :6px;
  color :var(--ink)
}
.astro {
  background :var(--card);
  border :1px solid var(--ink-line);
  border-radius :18px;
  padding :20px;
  transition :box-shadow .3s, transform .3s;
  height :100%
}
  .astro:hover {
  box-shadow :0 24px 50px -20px rgba(0, 0, 0, .18);
  transform :translateY(-4px)
}
.avatar-wrap {
  position :relative;
  width :96px;
  margin :0 auto
}
.avatar-ring {
  width :96px;
  height :96px;
  border-radius :999px;
  padding :4px;
  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 :24px;
  font-weight :700;
  color :var(--sun)
}
.online {
  position :absolute;
  bottom :4px;
  right :4px;
  width :16px;
  height :16px;
  border-radius :999px;
  background :#10b981;
  border :2px solid var(--bg)
}
.astro-meta {
  margin-top :16px;
  text-align :center
}
.astro-meta h4 {
  font-size :18px
}
.astro-meta .role {
  font-size :12px;
  color :var(--ink-muted)
}
.astro-meta .row-x {
  margin-top :8px;
  display :flex;
  justify-content :center;
  gap :12px;
  font-size :12px
}
.astro-meta .lang {
  margin-top :4px;
  font-size :11px;
  color :var(--ink-muted)
}
.astro .btn-am {
  margin-top :16px;
  display :flex;
  justify-content :center;
  background :var(--ink);
  color :var(--cream);
  padding :10px;
  width :100%;
  transition :background .2s, color .2s
}
  .astro:hover .btn-am {
  background :var(--sun);
  color :var(--ink)
}
.testimonials {
  background :rgba(241, 225, 53, .2)
}
.t-card {
  background :var(--bg);
  border :1px solid var(--ink-line);
  border-radius :18px;
  padding :26px;
  transition :transform .3s;
  height :100%
}
  .t-card:hover {
  transform :translateY(-4px)
}
.t-stars {
  color :var(--sun);
  margin-bottom :10px;
  letter-spacing :2px
}
.t-quote {
  color :rgba(74, 27, 95, .9);
  line-height :1.6
}
.t-author {
  margin-top :20px;
  display :flex;
  align-items :center;
  gap :12px
}
.t-avatar {
  width :40px;
  height :40px;
  border-radius :999px;
  background :var(--ink);
  color :var(--sun);
  display :grid;
  place-items :center;
  font-weight :700
}
.t-name {
  font-size :14px;
  font-weight :600
}
.t-city {
  font-size :12px;
  color :var(--ink-muted)
}
.contact {
  padding :96px 0;
  position :relative;
  overflow :hidden
}
.contact-glow {
  position :absolute;
  top :-130px;
  right :-130px;
  width :380px;
  height :380px;
  border-radius :999px;
  background :var(--sun);
  filter :blur(80px);
  opacity :.4
}
.tag {
  display :inline-flex;
  align-items :center;
  gap :8px;
  background :var(--sun);
  color :var(--ink);
  border-radius :999px;
  padding :6px 14px;
  font-size :12px;
  font-weight :700
}
.contact h2 {
  margin-top :18px;
  font-size :clamp(40px, 5vw, 60px)
}
.contact h2 .mark {
  background :var(--sun);
  padding :0 10px
}
.contact p.lead {
  margin-top :18px;
  color :var(--description-color);
  font-size :18px;
  max-width :540px
}
.check-list {
  margin-top :28px;
  display :grid;
  gap :12px
}
.check-list li {
  display :flex;
  gap :12px;
  align-items :flex-start
}
.check-list svg {
  flex-shrink :0;
  margin-top :2px
}
.three {
  margin-top :36px;
  display :grid;
  grid-template-columns :repeat(3, 1fr);
  gap :12px
}
.three a {
  display :flex;
  flex-direction :column;
  align-items :center;
  gap :6px;
  border :2px solid var(--ink);
  border-radius :18px;
  padding :18px;
  font-size :12px;
  font-weight :600;
  color :var(--ink);
  transition :background .2s, color .2s
}
  .three a:hover {
  background :var(--ink);
  color :var(--cream)!important;
}
.form-am {
  background :var(--ink);
  color :var(--cream);
  border-radius :28px;
  padding :36px;
  box-shadow :0 40px 80px -30px rgba(0, 0, 0, .4)
}
.form-am h3 {
  font-size :30px;
  font-family :var(--display);
  font-weight :700
}
.form-am .lead {
  margin-top :8px;
  font-size :14px;
  color :rgba(250, 248, 239, .7)
}
.fields {
  margin-top :24px;
  display :grid;
  gap :16px
}
.field label {
  font-size :11px;
  letter-spacing :.1em;
  text-transform :uppercase;
  color :rgba(250, 248, 239, .7);
  font-weight :600
}
.field input, .field textarea {
  margin-top :6px;
  width :100%;
  background :rgba(250, 248, 239, .05);
  border :1px solid rgba(250, 248, 239, .15);
  border-radius :14px;
  padding :14px 16px;
  font-size :14px;
  color :var(--cream);
  transition :border-color .2s, background .2s;
}
  .field input::placeholder, .field textarea::placeholder {
  color :rgba(250, 248, 239, .4)
}
  .field input:focus, .field textarea:focus {
  outline :none;
  border-color :var(--sun);
  background :rgba(250, 248, 239, .1)
}
.submit {
  margin-top :28px;
  width :100%;
  background :var(--sun);
  color :var(--ink);
  border-radius :999px;
  padding :16px;
  font-weight :700;
  font-size :15px;
  display :flex;
  align-items :center;
  justify-content :center;
  gap :10px;
  cursor :pointer;
  border :none;
  transition :background .2s, transform .2s;
}
  .submit:hover {
  background :var(--sun-deep);
  transform :translateY(-2px)
}
.disclaimer {
  margin-top :12px;
  text-align :center;
  font-size :12px;
  color :rgba(250, 248, 239, .5)
}
.footer {
  border-top :1px solid var(--ink-line);
  background :var(--bg)
}
.footer p {
  margin-top :12px;
  color :var(--ink-muted);
  font-size :14px;
  max-width :280px
}
.footer h4 {
  font-family :var(--body);
  font-size :13px;
  text-transform :uppercase;
  letter-spacing :.12em;
  font-weight :700
}
.footer ul {
  margin-top :16px;
  display :grid;
  gap :8px
}
.footer ul a {
  font-size :14px;
  color :var(--ink-muted);
  transition :color .2s
}
  .footer ul a:hover {
  color :var(--ink)
}
.subscribe {
  margin-top :16px;
  display :flex;
  gap :8px
}
.subscribe input {
  flex :1;
  border :1px solid rgba(74, 27, 95, .2);
  background :var(--bg);
  border-radius :999px;
  padding :8px 16px;
  font-size :14px;
  color :var(--ink)
}
  .subscribe input:focus {
  outline :none;
  border-color :var(--ink)
}
.subscribe button {
  background :var(--sun);
  color :var(--ink);
  border-radius :999px;
  padding :8px 18px;
  font-size :14px;
  font-weight :700;
  border :none;
  cursor :pointer
}
.copy {
  border-top :1px solid var(--ink-line);
  text-align :center;
  padding :20px 0;
  font-size :12px;
  color :var(--ink-muted)
}
.ico {
  width :18px;
  height :18px;
  stroke-width :2;
  stroke :currentColor;
  fill :none;
  stroke-linecap :round;
  stroke-linejoin :round
}
.ico-lg {
  width :24px;
  height :24px
}
.ico-xs {
  width :14px;
  height :14px
}
  @media (prefers-reduced-motion :reduce) {
  *{animation :none!important;
  transition :none!important
}
  }@media(max-width :767px) {
  .hero{padding : 40px 0 60px;
}
.hero .btn-outline-am, .hero .btn-lg-am {
  width : 100%;
  justify-content : center;
}
.wheel {
  width : 366px;
  height : 366px;
  max-width : 62vw;
  max-height : 62vw;
}
.zod {
  --d : -180px;
}
.planet {
  --d : -128px;
}
.wheel-wrap {
  height : 390px;
}
.form-am {
  padding : 36px 25px 30px;
}
.contact h2 {
  line-height : 45px !important;
}
.contact {
  padding : 40px 0 !important;
}
}