*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --background:222 47% 7%;
  --foreground:210 40% 96%;
  --primary:262 80% 70%;
  --radius:0.875rem;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:hsl(222 47% 7%);
  color:hsl(210 40% 96%);
  line-height:1.5;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.no-underline{text-decoration:none}

.container{width:100%;max-width:1280px;margin:0 auto}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.py-32{padding-top:8rem;padding-bottom:8rem}
.pt-10{padding-top:2.5rem}
.pt-20{padding-top:5rem}
.pb-20{padding-bottom:5rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-7{padding:1.75rem}
.p-8{padding:2rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-8{margin-top:2rem}
.mt-16{margin-top:4rem}
.mt-20{margin-top:5rem}
.mb-05{margin-bottom:.125rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-9{margin-bottom:2.25rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}

.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.hidden{display:none}

.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-15{gap:.375rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.z-0{z-index:0}
.z-10{z-index:10}
.z-50{z-index:50}
.neg-z-10{z-index:-10}

.w-full{width:100%}
.w-1{width:.25rem}
.w-3{width:.75rem}
.w-35{width:.875rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-12{width:3rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-64{width:16rem}
.h-1{height:.25rem}
.h-3{height:.75rem}
.h-35{height:.875rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-px{height:1px}

.min-h-screen{min-height:100vh}
.min-h-90vh{min-height:80vh}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}

.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.overflow-visible{overflow:visible}

.text-center{text-align:center}
.text-left{text-align:left}
.text-balance{text-wrap:balance}
.leading-105{line-height:1.05}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.tracking-02em{letter-spacing:.2em}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.select-none{user-select:none}

.text-10{font-size:.625rem;line-height:1}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1.1}

.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}

.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-t-3rem{border-radius:1.5rem 1.5rem 0 0}

.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-x{border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid}
.border-l-2{border-left:2px solid}
.border-white-5{border-color:rgba(255,255,255,.05)}
.border-white-6{border-color:rgba(255,255,255,.06)}
.border-white-10{border-color:rgba(255,255,255,.1)}
.border-violet-500-30{border-color:rgba(139,92,246,.3)}
.last-border-0:last-child{border-bottom:none}

.bg-background-80{background:hsla(222,47%,7%,.8)}
.bg-white-2{background:rgba(255,255,255,.02)}
.bg-white-4{background:rgba(255,255,255,.04)}
.bg-white-5{background:rgba(255,255,255,.05)}
.bg-violet-5{background:rgba(139,92,246,.05)}

.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.blur-80{filter:blur(80px)}

.pointer-events-none{pointer-events:none}
.cursor-default{cursor:default}
.cursor-pointer{cursor:pointer}
.shrink-0{flex-shrink:0}

.text-white{color:#fff}
.text-white-15{color:rgba(255,255,255,.15)}
.text-white-25{color:rgba(255,255,255,.25)}
.text-white-30{color:rgba(255,255,255,.3)}
.text-white-35{color:rgba(255,255,255,.35)}
.text-white-40{color:rgba(255,255,255,.4)}
.text-white-45{color:rgba(255,255,255,.45)}
.text-white-60{color:rgba(255,255,255,.6)}
.text-white-70{color:rgba(255,255,255,.7)}
.text-white-80{color:rgba(255,255,255,.8)}

.text-violet-400{color:#a78bfa}
.text-pink-400{color:#f472b6}
.text-emerald-400{color:#34d399}
.text-blue-400{color:#60a5fa}
.text-amber-400{color:#fbbf24}
.text-dark{color:hsl(222 47% 7%)}

.selection-violet ::selection{background:rgba(139,92,246,.3)}
.selection-violet::selection{background:rgba(139,92,246,.3)}

.opacity-40{opacity:.4}
.opacity-60{opacity:.6}
.object-cover{object-fit:cover}
.grayscale{filter:grayscale(1)}

.hover-opacity:hover{opacity:.7}
.hover-scale:hover{transform:scale(1.03)}
.hover-bg-white-10:hover{background:rgba(255,255,255,.1)}
.hover-bg-white-2:hover{background:rgba(255,255,255,.02)}
.group-hover-scale{transition:transform .2s}
.group:hover .group-hover-scale{transform:scale(1.05)}
.group-hover-translate-x{transition:transform .2s}
.group:hover .group-hover-translate-x{transform:translateX(4px)}

.transition-all{transition:all .3s ease}
.transition-colors{transition:color .2s,background .2s,border-color .2s}
.transition-transform{transition:transform .2s ease}
.transition-opacity{transition:opacity .2s ease}

.space-y-2>*+*{margin-top:.5rem}

.text-foreground{color:hsl(210 40% 96%)}

.gradient-mesh{
  background:
    radial-gradient(ellipse at 20% 20%,hsl(262 80% 25%/.25) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 80%,hsl(285 60% 20%/.2) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 100%,hsl(220 70% 15%/.3) 0%,transparent 60%),
    hsl(222 47% 7%);
}

.noise-overlay::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:.4;
}

.gradient-text{
  background:linear-gradient(135deg,#a78bfa 0%,#e879f9 40%,#fb923c 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

.shimmer-btn{
  background:linear-gradient(90deg,hsl(262 80% 70%) 0%,hsl(262 80% 80%) 30%,hsl(320 80% 75%) 50%,hsl(262 80% 80%) 70%,hsl(262 80% 70%) 100%);
  background-size:200% auto;
  animation:shimmer 3s linear infinite;
  border:none;
}
.btn-wide{min-width:340px;max-width:90vw;text-align:center}
@media(min-width:768px){.btn-wide{min-width:480px}}

.glass-card{
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.07);
}

.hover-glow{
  transition:border-color .3s,box-shadow .3s,transform .2s;
}
.hover-glow:hover{
  border-color:rgba(167,139,250,.4);
  box-shadow:0 0 24px 4px rgba(167,139,250,.1);
  transform:translateY(-2px);
}

@keyframes pulse-soft{
  0%,100%{box-shadow:0 0 20px hsl(262 80% 70%/.3),0 4px 24px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 40px hsl(262 80% 70%/.5),0 4px 32px rgba(0,0,0,.4)}
}
.animate-pulse-soft{animation:pulse-soft 2.5s ease-in-out infinite}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:.15;
  animation:orb-float 20s ease-in-out infinite;
}
.orb-1{width:500px;height:500px;top:-10%;left:10%;background:hsl(262 80% 50%)}
.orb-2{width:400px;height:400px;bottom:10%;right:5%;background:hsl(285 60% 40%);animation-delay:-10s}
@keyframes orb-float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(30px,-20px)}
  50%{transform:translate(-20px,30px)}
  75%{transform:translate(-30px,-10px)}
}

.aspect-hero,.aspect-hero-slim{position:relative}
.aspect-hero{padding-bottom:42.86%}
.aspect-hero-slim{padding-bottom:22%}
.aspect-hero>.hero-img-wrap,.aspect-hero>.hero-gradient-overlay,
.aspect-hero-slim>.hero-img-wrap,.aspect-hero-slim>.hero-gradient-overlay{position:absolute;inset:0}
@media(max-width:767px){
  .aspect-hero{padding-bottom:62.5%}
  .aspect-hero-slim{padding-bottom:38%}
}

.bg-gradient-to-t-fade{
  background:linear-gradient(to top,hsl(222 47% 7%) 0%,hsl(222 47% 7%/.6) 30%,transparent 80%);
}
.bg-gradient-via-violet{
  background:radial-gradient(ellipse at center,hsl(262 80% 30%/.12) 0%,transparent 60%);
}

.scan-line{
  position:absolute;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.4),transparent);
  top:0;
  animation:scan 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{top:0;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}

.top-10{top:10%}
.right-neg4{right:-1rem}
.bottom-40{bottom:40%}
.left-neg8{left:-2rem}
.bottom-5{bottom:5%}
.right-neg12{right:-3rem}
.neg-top-20{top:-5rem}
.neg-right-20{right:-5rem}
.top-half{top:50%}
.py-25{padding-top:.625rem;padding-bottom:.625rem}
.neg-rotate-90{transform:rotate(-90deg)}
.pt-4{padding-top:1rem}

.lang-switcher{
  display:flex;
  gap:2px;
  border-radius:9999px;
  background:rgba(255,255,255,.05);
  padding:2px;
}
.lang-link{
  display:block;
  padding:.375rem .625rem;
  border-radius:9999px;
  font-size:.75rem;
  font-weight:600;
  color:rgba(255,255,255,.4);
  transition:all .2s;
}
.lang-link.active{
  background:rgba(139,92,246,.15);
  color:#a78bfa;
}
.lang-link:hover{color:rgba(255,255,255,.7)}

a:focus-visible,button:focus-visible,
.showcase-tab:focus-visible,.faq-trigger:focus-visible,.lang-link:focus-visible,
.locked-row:focus-visible,.shimmer-btn:focus-visible{
  outline:2px solid #a78bfa;
  outline-offset:2px;
  border-radius:.5rem;
}
textarea:focus-visible,input:focus-visible{
  outline:2px solid #a78bfa;
  outline-offset:1px;
  border-color:rgba(167,139,250,.5);
}

.popular-badge{
  position:absolute;
  top:.5rem;
  right:.75rem;
  background:linear-gradient(90deg,#a78bfa,#e879f9);
  color:#0a0a14;
  font-size:.625rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.25rem .625rem;
  border-radius:9999px;
  box-shadow:0 4px 12px rgba(167,139,250,.35);
  z-index:2;
  pointer-events:none;
}
.gap-x-6{column-gap:1.5rem}
.gap-y-2{row-gap:.5rem}
.mt-12{margin-top:3rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}

.showcase-tab{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.5rem 1rem;
  border-radius:9999px;
  font-size:.8125rem;
  font-weight:600;
  color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:all .25s;
}
.showcase-tab.active{
  border-color:rgba(139,92,246,.4);
  color:#fff;
  box-shadow:0 0 16px 2px rgba(139,92,246,.15);
}
.showcase-tab.active[data-color="pink"]{border-color:rgba(236,72,153,.4);box-shadow:0 0 16px 2px rgba(236,72,153,.15)}
.showcase-tab.active[data-color="emerald"]{border-color:rgba(16,185,129,.4);box-shadow:0 0 16px 2px rgba(16,185,129,.15)}
.showcase-tab.active[data-color="blue"]{border-color:rgba(59,130,246,.4);box-shadow:0 0 16px 2px rgba(59,130,246,.15)}
.showcase-tab.active[data-color="violet"]{border-color:rgba(139,92,246,.4);box-shadow:0 0 16px 2px rgba(139,92,246,.15)}
.showcase-tab:hover{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}

.showcase-panel{display:none}
.showcase-panel.active{display:block}

.tag-pink{background:rgba(236,72,153,.1);color:#f9a8d4;border:1px solid rgba(236,72,153,.2)}
.tag-emerald{background:rgba(16,185,129,.1);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
.tag-blue{background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.2)}
.tag-violet{background:rgba(139,92,246,.1);color:#c4b5fd;border:1px solid rgba(139,92,246,.2)}

.ring-circle{transition:stroke-dashoffset .6s ease}

.locked-row{
  position:relative;
  overflow:hidden;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  transition:border-color .3s,background .3s;
}
.locked-row:hover{
  background:rgba(139,92,246,.08);
  border-color:rgba(139,92,246,.25);
}
.locked-row .locked-row-icon{
  transition:color .3s;
  color:rgba(255,255,255,.25);
}
.locked-row:hover .locked-row-icon{color:#a78bfa}
.locked-row .locked-row-text{
  transition:color .3s;
  color:rgba(255,255,255,.3);
}
.locked-row:hover .locked-row-text{color:rgba(255,255,255,.6)}
.locked-row .locked-row-lock{
  transition:color .3s,transform .2s;
  color:rgba(255,255,255,.15);
}
.locked-row:hover .locked-row-lock{color:#a78bfa;transform:rotate(15deg)}
.locked-row .locked-row-hint{
  position:absolute;
  right:2.5rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.625rem;
  font-weight:600;
  color:#a78bfa;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.locked-row:hover .locked-row-hint{opacity:1}
.locked-row::after{
  content:'';
  position:absolute;
  inset:0;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  background:hsla(222,47%,7%,.5);
  pointer-events:none;
  transition:opacity .25s;
}
.locked-row:hover::after{opacity:0}

.features-cta-link{
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s,background .3s;
}
.features-cta-link:hover{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}

.feat-violet{background:rgba(139,92,246,.1);color:#a78bfa}
.feat-blue{background:rgba(59,130,246,.1);color:#60a5fa}
.feat-emerald{background:rgba(16,185,129,.1);color:#34d399}

.steps-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  justify-content:center;
}
@media(min-width:640px){
  .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
}
@media(min-width:1024px){
  .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;max-width:64rem;margin-left:auto;margin-right:auto}
}
.step-card-inner{
  padding:2.25rem 1.5rem 2rem;
}
@media(min-width:640px){
  .step-card-inner{padding:2.75rem 2rem 2.25rem}
}
@media(min-width:1024px){
  .step-card-inner{padding:3rem 2rem 2.5rem}
}
.py-15{padding-top:.375rem;padding-bottom:.375rem}
.step-card-inner .step-title{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;color:#fff}
.step-card-inner .step-desc{font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.5);margin-bottom:1.5rem}
.step-card-inner .step-tip{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.5rem 1rem;border-radius:9999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:.6875rem;font-weight:700;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:.05em;
}
.step-card-inner .step-icon-box{
  width:4.5rem;height:4.5rem;border-radius:1rem;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.15);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;
}

.step-number{
  position:absolute;
  top:-1rem;
  left:-1rem;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:#7c3aed;
  color:#fff;
  font-size:.875rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px -5px rgba(124,58,237,.2);
  z-index:10;
}

.grid-cols-comp{grid-template-columns:1.4fr 1fr 1fr}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}

.emotion-card{
  transition:transform .3s,border-color .3s;
  min-height:200px;
}
.emotion-card:hover{
  transform:translateY(-4px);
}
.emotion-card-violet:hover{border-color:rgba(139,92,246,.3)}
.emotion-card-amber:hover{border-color:rgba(245,158,11,.3)}
.emotion-card-emerald:hover{border-color:rgba(16,185,129,.3)}

.emotion-num{
  position:absolute;
  top:1rem;
  right:1rem;
  font-size:3rem;
  font-weight:900;
  opacity:.06;
  line-height:1;
}
.emotion-icon{
  width:2.5rem;
  height:2.5rem;
  border-radius:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
.emotion-icon-violet{background:rgba(139,92,246,.1);color:#a78bfa}
.emotion-icon-amber{background:rgba(245,158,11,.1);color:#fbbf24}
.emotion-icon-emerald{background:rgba(16,185,129,.1);color:#34d399}

.text-violet-400{color:#a78bfa}
.text-amber-400{color:#fbbf24}
.text-emerald-400{color:#34d399}

.emotion-reveal{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .4s ease,opacity .3s ease;
}
.emotion-card:hover .emotion-reveal{
  max-height:200px;
  opacity:1;
}
.emotion-hint{
  margin-top:.75rem;
  padding:.375rem .75rem;
  border-radius:9999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  font-size:.6875rem;
  transition:opacity .2s;
}
.emotion-card:hover .emotion-hint{opacity:0}

@keyframes marquee-move{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.marquee-container{
  overflow:hidden;
  position:relative;
}
.marquee-track{
  display:flex;
  gap:1.5rem;
  width:max-content;
  animation:marquee-move 40s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-fade-left,.marquee-fade-right{
  position:absolute;
  top:0;bottom:0;
  width:6rem;
  z-index:10;
  pointer-events:none;
}
.marquee-fade-left{left:0;background:linear-gradient(to right,hsl(222 47% 7%),transparent)}
.marquee-fade-right{right:0;background:linear-gradient(to left,hsl(222 47% 7%),transparent)}
.testimonial-card{
  flex-shrink:0;
  width:20rem;
}

.faq-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:1.25rem 0;
  font-size:1.0625rem;
  font-weight:500;
  color:hsl(210 40% 90%);
  text-align:left;
  transition:color .2s;
  gap:1rem;
}
.faq-trigger:hover{color:#fff}
.faq-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-item.open .faq-content{
  max-height:500px;
}
.faq-chevron{
  transition:transform .25s ease;
}
.faq-item.open .faq-chevron{
  transform:rotate(180deg);
}

.pt-6{padding-top:1.5rem}

@media(min-width:768px){
  .md-block{display:block}
  .md-grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md-grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .md-grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .md-grid-cols-auto-1fr{grid-template-columns:auto 1fr}
  .md-px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md-p-6{padding:1.5rem}
  .md-p-10{padding:2.5rem}
  .md-text-2xl{font-size:1.5rem;line-height:2rem}
  .md-text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md-text-5xl{font-size:3rem;line-height:1.1}
  .md-text-6xl{font-size:3.75rem;line-height:1.05}
  .md-text-8xl{font-size:6rem;line-height:1}
  .md-text-base{font-size:1rem;line-height:1.5rem}
  .md-text-xs{font-size:.75rem;line-height:1rem}
  .md-gap-12{gap:3rem}
}

@media(max-width:767px){
  .hidden{display:none}
  .md-block{display:none}
  .grid-cols-comp{grid-template-columns:1fr}
  .grid-cols-comp>div:first-child{font-weight:700;border-bottom:1px solid rgba(255,255,255,.06)}
  .grid-cols-comp>div:nth-child(2),
  .grid-cols-comp>div:nth-child(3){text-align:left}
}

/* ===== Card Encyclopedia ===== */
.enc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem}
.enc-tab{padding:.625rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:700;color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);border:none;cursor:pointer;transition:all .2s ease}
.enc-tab:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.enc-tab.active{background:#7c3aed;color:#fff;box-shadow:0 10px 25px rgba(124,58,237,.25)}
.enc-grid{display:none;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:72rem;margin:0 auto}
.enc-grid.active{display:grid}
.enc-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:0;font:inherit}
.enc-card-img{position:relative;width:100%;aspect-ratio:2/3;border-radius:.75rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);transition:all .2s ease;display:block}
.enc-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.enc-card:hover .enc-card-img{border-color:rgba(167,139,250,.6);box-shadow:0 12px 25px rgba(124,58,237,.2);transform:translateY(-4px)}
.enc-card-name{font-size:.6875rem;color:rgba(255,255,255,.6);text-align:center;line-height:1.2}
.enc-card:hover .enc-card-name{color:#fff}

.enc-modal-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1rem}
.enc-modal-overlay.open{display:flex}
.enc-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.enc-modal-card{position:relative;z-index:10;width:100%;max-width:42rem;max-height:90vh;overflow-y:auto;border-radius:1.5rem;padding:1.75rem;background:rgba(20,8,40,.92);border:1px solid rgba(196,158,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.5);animation:encPop .25s ease}
@keyframes encPop{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.enc-modal-close{position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;border-radius:999px;background:rgba(255,255,255,.05);border:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);cursor:pointer;transition:all .2s ease}
.enc-modal-close:hover{background:rgba(255,255,255,.15);color:#fff}
.enc-modal-head{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}
.enc-modal-img{width:8rem;align-self:center;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);object-fit:cover}
.enc-modal-name{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .75rem;padding-right:2rem}
.enc-modal-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.enc-badge{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600}
.enc-badge-element{background:rgba(124,58,237,.2);border:1px solid rgba(167,139,250,.3);color:#ddd6fe}
.enc-badge-zodiac{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.enc-modal-section{margin-bottom:1.25rem}
.enc-modal-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin:0 0 .375rem}
.enc-modal-meaning{color:rgba(255,255,255,.8);line-height:1.6;margin:0}
.enc-modal-sphere{color:rgba(255,255,255,.7);line-height:1.6;margin:0}
.enc-modal-keywords{display:flex;flex-wrap:wrap;gap:.5rem}
.enc-tag{padding:.25rem .75rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:.75rem}
.enc-modal-spreads{display:grid;grid-template-columns:1fr;gap:.75rem}
.enc-spread-cell{border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:1rem}
.enc-spread-title{color:#c4b5fd;font-size:.75rem;font-weight:700;margin-bottom:.25rem}
.enc-spread-body{color:rgba(255,255,255,.7);font-size:.875rem;line-height:1.5;margin:0}
.enc-modal-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem;border-radius:1rem;font-weight:700;text-decoration:none;margin-top:.5rem;transition:transform .15s ease}
.enc-modal-cta:hover{transform:scale(1.02)}

@media(min-width:640px){
  .enc-grid{grid-template-columns:repeat(4,1fr)}
  .enc-modal-head{flex-direction:row}
  .enc-modal-img{align-self:flex-start;margin:0}
  .enc-modal-spreads{grid-template-columns:1fr 1fr}
}
@media(min-width:768px){
  .enc-grid{grid-template-columns:repeat(6,1fr);gap:1rem}
}
@media(min-width:1024px){
  .enc-grid{grid-template-columns:repeat(7,1fr)}
}