/* ════════════════════════════════════════════════════════════
   ASTROVIBE — main.css v4 ID
   Bahasa Indonesia · SEO 100 · Animasi Spektakuler · WCAG AA
   ════════════════════════════════════════════════════════════ */

:root {
  --bg-overlay:   rgba(4,0,18,.82);
  --c-text:       #ffffff;
  --c-sub:        #e8d8ff;
  --c-muted:      #c4aae8;
  --c-hint:       #a889d0;
  --c-neon:       #cc44ff;
  --c-neon2:      #7733ff;
  --c-pink:       #ff44dd;
  --c-cyan:       #22eeff;
  --c-gold:       #ffd700;
  --c-card:       rgba(14,0,40,.75);
  --c-border:     rgba(180,80,255,.30);
  --glow-sm:      0 0 14px rgba(204,68,255,.5);
  --glow-md:      0 0 28px rgba(204,68,255,.55),0 0 56px rgba(204,68,255,.22);
  --glow-lg:      0 0 44px rgba(204,68,255,.65),0 0 88px rgba(204,68,255,.28);
  --f-display:    'Cinzel Decorative',serif;
  --f-body:       'Raleway',sans-serif;
  --f-serif:      'Playfair Display',serif;
  --hh:           68px;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:36px; --r-full:9999px;
  --t: .3s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
body{
  font-family:var(--f-body);color:var(--c-text);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:
    linear-gradient(var(--bg-overlay),var(--bg-overlay)),
    url('../galaxy-bg.jpg') center center/cover fixed;
  background-attachment:fixed,fixed;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── SKIP LINK ── */
.skip-link{
  position:fixed;top:-100%;left:1rem;z-index:9999;
  background:var(--c-neon);color:#fff;padding:.6rem 1.4rem;
  border-radius:var(--r-full);font-weight:700;transition:top .2s;
}
.skip-link:focus{top:1rem;outline:3px solid #fff;outline-offset:2px}
:focus-visible{outline:3px solid var(--c-cyan);outline-offset:3px;border-radius:4px}

/* ── STARS CANVAS ── */
#galaxy{display:none}

/* ── PARTIKEL BINTANG CSS MURNI ── */
.stars-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.star{
  position:absolute;border-radius:50%;
  background:#fff;
  animation:twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
  opacity:0;
}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.8)}
  50%{opacity:var(--op,.8);transform:scale(1)}
}

/* ── ORBS ── */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px);animation:float-orb 20s ease-in-out infinite;will-change:transform}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(204,68,255,.2) 0%,transparent 70%);top:-120px;left:-120px;animation-duration:22s}
.orb-2{width:580px;height:580px;background:radial-gradient(circle,rgba(119,51,255,.15) 0%,transparent 70%);bottom:-180px;right:-180px;animation-duration:28s;animation-delay:-8s}
.orb-3{width:360px;height:360px;background:radial-gradient(circle,rgba(255,68,221,.11) 0%,transparent 70%);top:50%;left:50%;animation-duration:16s;animation-delay:-4s;animation-name:float-orb-c}
@keyframes float-orb{0%,100%{transform:translate(0,0)}33%{transform:translate(28px,-18px)}66%{transform:translate(-18px,28px)}}
@keyframes float-orb-c{0%,100%{transform:translate(-50%,-50%)}33%{transform:translate(calc(-50% + 28px),calc(-50% - 18px))}66%{transform:translate(calc(-50% - 18px),calc(-50% + 28px))}}

/* ── CONTAINER ── */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 1.25rem}

/* ════ HEADER ════ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;padding:0;
  transition:background var(--t),box-shadow var(--t);
}
.site-header.scrolled{
  background:rgba(4,0,18,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--c-border),var(--glow-sm);
}
.header-inner{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Logo */
.logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.logo-star{font-size:1.5rem;color:var(--c-neon);text-shadow:var(--glow-sm);display:inline-block;animation:spin-star 24s linear infinite}
@keyframes spin-star{to{transform:rotate(360deg)}}
.logo-text{
  font-family:var(--f-display);font-size:1.25rem;font-weight:700;
  background:linear-gradient(135deg,var(--c-neon),var(--c-pink),#e8d8ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.04em;
}

/* Nav */
.main-nav{display:none;align-items:center;gap:.15rem}
@media(min-width:1024px){.main-nav{display:flex}}
.nav-link{
  display:block;padding:.48rem .85rem;font-size:.85rem;font-weight:600;
  color:#e8d8ff;border-radius:var(--r-sm);transition:all var(--t);white-space:nowrap;
}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(204,68,255,.14);text-shadow:var(--glow-sm)}
.btn-nav-cta{
  background:linear-gradient(135deg,var(--c-neon),var(--c-neon2))!important;
  color:#fff!important;border-radius:var(--r-full)!important;
  padding:.48rem 1.25rem!important;font-weight:700!important;box-shadow:var(--glow-sm);
}
.btn-nav-cta:hover{box-shadow:var(--glow-md)!important;transform:translateY(-1px)}

/* Dropdown */
.nav-drop{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:rgba(4,0,18,.97);backdrop-filter:blur(20px);
  border:1px solid var(--c-border);border-radius:var(--r-md);padding:.5rem;min-width:200px;
  opacity:0;pointer-events:none;transition:all var(--t);
  box-shadow:0 16px 48px rgba(0,0,0,.7),var(--glow-sm);z-index:100;
}
.nav-drop:hover .dropdown,.nav-drop:focus-within .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown a{display:block;padding:.5rem .9rem;font-size:.83rem;color:#e8d8ff;border-radius:var(--r-sm);transition:all var(--t)}
.dropdown a:hover{background:rgba(204,68,255,.15);color:#fff}

/* Hamburger */
.hamburger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:rgba(204,68,255,.12);
  border:1px solid var(--c-border);border-radius:var(--r-sm);padding:10px;transition:all var(--t);
}
@media(min-width:1024px){.hamburger{display:none}}
.hamburger span{width:100%;height:2px;background:#fff;border-radius:2px;transition:all var(--t);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburger:hover{border-color:var(--c-neon);box-shadow:var(--glow-sm)}

/* Mobile nav */
.mobile-nav{
  position:fixed;top:var(--hh);left:0;right:0;
  background:rgba(4,0,18,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  z-index:999;padding:1rem 1.5rem;border-bottom:1px solid var(--c-border);
  display:flex;flex-direction:column;gap:.3rem;
  transform:translateY(-110%);opacity:0;pointer-events:none;transition:all var(--t);
}
.mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-nav a{display:block;padding:.8rem 1rem;border-radius:var(--r-sm);color:#e8d8ff;font-size:.95rem;font-weight:600;transition:all var(--t)}
.mobile-nav a:hover{color:#fff;background:rgba(204,68,255,.12)}

/* ════ BUTTONS ════ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,var(--c-neon),var(--c-neon2));
  color:#fff;padding:.85rem 2.2rem;border-radius:var(--r-full);
  font-size:.92rem;font-weight:700;border:none;
  box-shadow:var(--glow-sm);transition:all var(--t);letter-spacing:.02em;
  position:relative;overflow:hidden;
}
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-100%);
  transition:transform .6s;
}
.btn-primary:hover::after{transform:translateX(100%)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--glow-md);color:#fff}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(255,255,255,.08);color:#fff;
  padding:.85rem 2.2rem;border-radius:var(--r-full);
  font-size:.92rem;font-weight:600;border:1.5px solid rgba(204,68,255,.5);
  transition:all var(--t);letter-spacing:.02em;
}
.btn-secondary:hover{background:rgba(204,68,255,.18);border-color:var(--c-neon);box-shadow:var(--glow-sm);color:#fff}
.btn-full{width:100%}
.btn-lg{padding:1.1rem 2.8rem;font-size:1.02rem}

/* ════ SECTIONS ════ */
.section{position:relative;z-index:1;padding:5.5rem 0}
.section-head{text-align:center;margin-bottom:2.8rem}
.section-badge{
  display:inline-block;
  background:rgba(204,68,255,.15);border:1px solid rgba(204,68,255,.4);
  color:#e8d8ff;padding:.35rem 1.1rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.85rem;box-shadow:var(--glow-sm);
  animation:badge-pulse 3s ease-in-out infinite;
}
@keyframes badge-pulse{0%,100%{box-shadow:var(--glow-sm)}50%{box-shadow:var(--glow-md)}}
.section-head h2{
  font-family:var(--f-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;
  color:#fff;margin-bottom:.7rem;line-height:1.2;
  text-shadow:0 0 40px rgba(204,68,255,.35);
}
.section-sub{color:var(--c-sub);font-size:.94rem;max-width:500px;margin:0 auto}

/* ════ HERO ════ */
.hero{
  position:relative;z-index:1;min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--hh) + 2rem) 0 4rem;
}
.hero .container{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:1024px){.hero .container{grid-template-columns:1fr 440px}}

/* Typing cursor effect pada hero badge */
.hero-badge{
  display:inline-block;
  background:rgba(204,68,255,.14);border:1px solid rgba(204,68,255,.4);
  color:#e8d8ff;padding:.45rem 1.35rem;border-radius:var(--r-full);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.5rem;
  box-shadow:var(--glow-sm);
  animation:reveal .75s ease both,badge-pulse 3s ease-in-out 1s infinite;
}
.hero-title{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,6vw,4.8rem);
  font-weight:900;line-height:1.08;margin-bottom:1.1rem;color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.8);
}

/* Animasi karakter per kata */
.hero-title .word{
  display:inline-block;
  opacity:0;transform:translateY(30px);
  animation:word-in .7s ease forwards;
}
.hero-title .word:nth-child(1){animation-delay:.2s}
.hero-title .word:nth-child(2){animation-delay:.45s}
.hero-title .word:nth-child(3){animation-delay:.7s}
@keyframes word-in{to{opacity:1;transform:translateY(0)}}

.grad-text{
  background:linear-gradient(135deg,var(--c-neon),var(--c-pink),var(--c-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(204,68,255,.5));
  background-size:200% 200%;
  animation:grad-shift 4s ease infinite;
}
@keyframes grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-sub{font-size:1.05rem;color:#e8d8ff;margin-bottom:2rem;font-weight:500;letter-spacing:.02em}
.zodiac-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.zodiac-pills a{
  background:rgba(255,255,255,.08);border:1px solid rgba(204,68,255,.28);
  color:#e8d8ff;padding:.35rem .9rem;border-radius:var(--r-full);
  font-size:.79rem;font-weight:600;backdrop-filter:blur(12px);transition:all var(--t);
}
.zodiac-pills a:hover{background:rgba(204,68,255,.25);border-color:var(--c-neon);color:#fff;box-shadow:var(--glow-sm);transform:translateY(-2px) scale(1.05)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}

/* Zodiac Wheel */
.zodiac-wheel-3d{display:flex;align-items:center;justify-content:center;perspective:800px}
.wheel-scene{
  position:relative;width:360px;height:360px;
  transform-style:preserve-3d;animation:wheel-spin 40s linear infinite;
}
@media(min-width:1024px){.wheel-scene{width:420px;height:420px}}
@keyframes wheel-spin{to{transform:rotateY(360deg) rotateX(15deg)}}
.wheel-ring{
  position:absolute;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border:2px solid rgba(204,68,255,.4);
}
.r1{
  width:100%;height:100%;border-color:rgba(204,68,255,.6);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:repeating-conic-gradient(rgba(204,68,255,.06) 0deg 30deg,transparent 30deg 60deg);
}
.r1 span{position:absolute;transform-origin:0 0;color:#fff;text-shadow:var(--glow-sm)}
.r1 span:nth-child(1){transform:rotate(0deg) translateY(-180px)}
.r1 span:nth-child(2){transform:rotate(30deg) translateY(-180px)}
.r1 span:nth-child(3){transform:rotate(60deg) translateY(-180px)}
.r1 span:nth-child(4){transform:rotate(90deg) translateY(-180px)}
.r1 span:nth-child(5){transform:rotate(120deg) translateY(-180px)}
.r1 span:nth-child(6){transform:rotate(150deg) translateY(-180px)}
.r1 span:nth-child(7){transform:rotate(180deg) translateY(-180px)}
.r1 span:nth-child(8){transform:rotate(210deg) translateY(-180px)}
.r1 span:nth-child(9){transform:rotate(240deg) translateY(-180px)}
.r1 span:nth-child(10){transform:rotate(270deg) translateY(-180px)}
.r1 span:nth-child(11){transform:rotate(300deg) translateY(-180px)}
.r1 span:nth-child(12){transform:rotate(330deg) translateY(-180px)}
.r2{width:65%;height:65%;border-color:rgba(119,51,255,.5);animation:inner-spin 25s linear infinite reverse}
.r3{width:35%;height:35%;border-color:rgba(255,68,221,.45)}
@keyframes inner-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.wheel-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:2.5rem;color:var(--c-neon);text-shadow:var(--glow-lg);
  animation:pulse-center 3s ease-in-out infinite;
}
@keyframes pulse-center{0%,100%{text-shadow:var(--glow-sm)}50%{text-shadow:var(--glow-lg)}}

/* ════ FEATURES ════ */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}
.feat-card{
  background:var(--c-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--c-border);border-radius:var(--r-lg);padding:2.2rem;
  transition:all var(--t);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.7rem;cursor:pointer;
}
/* Shimmer sweep */
.feat-card::after{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(204,68,255,.08),transparent);
  transform:skewX(-15deg);
  transition:left .7s ease;
}
.feat-card:hover::after{left:140%}
.feat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--c-neon),transparent);
  opacity:0;transition:opacity var(--t);
}
.feat-card:hover{border-color:rgba(204,68,255,.6);transform:translateY(-8px);box-shadow:0 24px 64px rgba(204,68,255,.2)}
.feat-card:hover::before{opacity:1}
.feat-icon{
  font-size:2.6rem;filter:drop-shadow(0 0 12px rgba(204,68,255,.5));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.feat-card:hover .feat-icon{transform:scale(1.2) rotate(-8deg)}
.feat-card h3{font-family:var(--f-display);font-size:.96rem;color:#fff;font-weight:700}
.feat-card p{font-size:.87rem;color:#e8d8ff;line-height:1.8;flex:1}
.feat-link{font-size:.82rem;font-weight:700;color:var(--c-neon);transition:all var(--t)}
.feat-card:hover .feat-link{letter-spacing:.06em;text-shadow:var(--glow-sm)}

/* ════ ZODIAC GRID ════ */
.zodiac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:1rem}
.zcard{
  background:var(--c-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--c-border);border-radius:var(--r-md);padding:1.5rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  text-align:center;transition:all var(--t);position:relative;overflow:hidden;
}
.zcard::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(204,68,255,.12),transparent 70%);
  opacity:0;transition:opacity var(--t);
}
.zcard:hover{border-color:rgba(204,68,255,.6);transform:translateY(-6px) scale(1.03);box-shadow:0 16px 40px rgba(204,68,255,.22)}
.zcard:hover::before{opacity:1}
.zc-sym{
  font-size:2.1rem;filter:drop-shadow(0 0 10px rgba(204,68,255,.55));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.zcard:hover .zc-sym{transform:scale(1.25) rotate(15deg)}
.zc-name{font-weight:700;font-size:.9rem;color:#fff}
.zc-date{font-size:.71rem;color:#e8d8ff}
.zc-el{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.18rem .65rem;border-radius:var(--r-full);margin-top:.25rem}
.zc-el.fire  {background:rgba(255,90,0,.2);color:#ff9060;border:1px solid rgba(255,90,0,.4)}
.zc-el.earth {background:rgba(80,210,0,.18);color:#90d050;border:1px solid rgba(80,210,0,.35)}
.zc-el.air   {background:rgba(0,210,255,.18);color:#50d0ff;border:1px solid rgba(0,210,255,.35)}
.zc-el.water {background:rgba(40,100,255,.2);color:#70a0ff;border:1px solid rgba(40,100,255,.4)}

/* ════ STATS COUNTER ════ */
.stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;
  background:rgba(204,68,255,.06);border:1px solid rgba(204,68,255,.2);
  border-radius:var(--r-xl);padding:2rem;margin:3rem 0;
}
.stat-item{text-align:center}
.stat-num{
  font-family:var(--f-display);font-size:2.5rem;font-weight:900;
  background:linear-gradient(135deg,var(--c-neon),var(--c-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:.3rem;
}
.stat-lbl{font-size:.78rem;color:var(--c-sub);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ════ CTA BAND ════ */
.cta-band{background:transparent}
.cta-inner{
  background:linear-gradient(135deg,rgba(20,0,55,.85),rgba(50,0,100,.5));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(204,68,255,.35);border-radius:var(--r-xl);
  padding:4.5rem 2rem;text-align:center;
  box-shadow:0 0 80px rgba(204,68,255,.12);
  position:relative;overflow:hidden;
}
.cta-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(204,68,255,.12),transparent 60%);pointer-events:none}
/* scan line animasi */
.cta-inner::after{
  content:'';position:absolute;top:-100%;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--c-neon),transparent);
  animation:scan-line 4s linear infinite;
}
@keyframes scan-line{to{top:110%}}
.cta-orb{font-size:3.8rem;margin-bottom:1.35rem;display:block;filter:drop-shadow(0 0 24px rgba(204,68,255,.7));animation:float-cta 4s ease-in-out infinite}
@keyframes float-cta{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.05)}}
.cta-inner h2{font-family:var(--f-display);font-size:clamp(1.6rem,4vw,2.6rem);color:#fff;margin-bottom:.85rem}
.cta-inner p{color:#e8d8ff;max-width:500px;margin:0 auto 1.75rem;font-size:.97rem;line-height:1.85}
.cta-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin-bottom:2.2rem;font-size:.84rem;color:#fff;font-weight:600}

/* ════ FOOTER ════ */
.site-footer{
  background:rgba(4,0,18,.96);backdrop-filter:blur(24px);
  border-top:1px solid var(--c-border);padding:4.5rem 0 0;position:relative;z-index:1;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-bottom:3rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-brand{max-width:320px}
.footer-logo{font-family:var(--f-display);font-size:1.25rem;color:var(--c-neon);text-shadow:var(--glow-sm);margin-bottom:.85rem}
.footer-brand p{font-size:.85rem;color:#e8d8ff;line-height:1.85;margin-bottom:1.4rem}
.footer-social{display:flex;gap:.75rem}
.footer-social a{
  width:40px;height:40px;background:rgba(204,68,255,.1);border:1px solid var(--c-border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.88rem;font-weight:700;color:#e8d8ff;transition:all var(--t);
}
.footer-social a:hover{border-color:var(--c-neon);color:#fff;box-shadow:var(--glow-sm);background:rgba(204,68,255,.2);transform:translateY(-3px)}
.footer-col h3{font-family:var(--f-display);font-size:.84rem;color:#fff;margin-bottom:1rem;letter-spacing:.05em}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.82rem;color:#e8d8ff;transition:color var(--t)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--c-border);padding:1.75rem 0;text-align:center}
.footer-bottom p{font-size:.74rem;color:#e8d8ff}

/* ════ BACK TO TOP ════ */
.back-top{
  position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;
  background:linear-gradient(135deg,var(--c-neon),var(--c-neon2));
  border:none;border-radius:50%;color:#fff;font-size:1.15rem;
  box-shadow:var(--glow-sm);opacity:0;pointer-events:none;
  transition:all var(--t);z-index:999;
  display:flex;align-items:center;justify-content:center;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{box-shadow:var(--glow-md);transform:translateY(-4px) scale(1.1)}

/* ════ PAGE HERO ════ */
.page-hero{
  position:relative;z-index:1;
  padding:calc(var(--hh) + 3rem) 0 4rem;
  text-align:center;min-height:40svh;display:flex;align-items:center;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-family:var(--f-display);font-size:clamp(2rem,5vw,4rem);font-weight:900;color:#fff;margin:1rem 0}
.page-hero p{color:#e8d8ff;font-size:1.02rem;max-width:560px;margin:0 auto;line-height:1.85}

/* ════ CARD ════ */
.card{
  background:var(--c-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--c-border);border-radius:var(--r-lg);padding:2.2rem;
  box-shadow:0 0 40px rgba(204,68,255,.06);transition:all var(--t);
}
.card:hover{border-color:rgba(204,68,255,.4)}

/* ════ FORM ════ */
.form-group{display:flex;flex-direction:column;gap:.45rem}
.form-group label{font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{
  background:rgba(255,255,255,.06);border:1px solid var(--c-border);
  border-radius:var(--r-sm);color:#fff;padding:.8rem 1rem;
  font-size:.92rem;font-family:var(--f-body);width:100%;
  transition:border-color var(--t),box-shadow var(--t);color-scheme:dark;
}
.form-group input::placeholder{color:#a889d0}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--c-neon);box-shadow:0 0 0 3px rgba(204,68,255,.2)
}
.form-row{display:grid;grid-template-columns:1fr;gap:1.3rem}
@media(min-width:600px){.form-row{grid-template-columns:1fr 1fr}}
.form-full{grid-column:1/-1}

/* ════ METER ════ */
.meter-wrap{display:grid;grid-template-columns:64px 1fr 44px;align-items:center;gap:.8rem;font-size:.8rem;color:#e8d8ff}
.meter{height:6px;background:rgba(204,68,255,.15);border-radius:var(--r-full);overflow:hidden}
.meter-bar{
  height:100%;background:linear-gradient(90deg,var(--c-neon2),var(--c-neon));
  border-radius:var(--r-full);box-shadow:0 0 10px rgba(204,68,255,.55);
  width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1);
}

/* ════ REVEAL ANIMATIONS ════ */
.reveal-up{
  opacity:0;transform:translateY(22px);
  animation:reveal .75s ease both;
  animation-delay:var(--d,0s);
}
@keyframes reveal{to{opacity:1;transform:none}}

.scroll-reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.scroll-reveal.in{opacity:1;transform:none}

/* Stagger scroll reveal */
.scroll-reveal:nth-child(1){transition-delay:.05s}
.scroll-reveal:nth-child(2){transition-delay:.1s}
.scroll-reveal:nth-child(3){transition-delay:.15s}
.scroll-reveal:nth-child(4){transition-delay:.2s}
.scroll-reveal:nth-child(5){transition-delay:.25s}
.scroll-reveal:nth-child(6){transition-delay:.3s}

/* ════ GLOW RING ANIMASI ════ */
@property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow-ring{
  position:relative;border-radius:var(--r-lg);
}
.glow-ring::before{
  content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--glow-angle),transparent 0deg,var(--c-neon) 60deg,transparent 120deg);
  animation:glow-rotate 4s linear infinite paused;
  opacity:0;transition:opacity .4s;
}
.glow-ring:hover::before{opacity:1;animation-play-state:running}
@keyframes glow-rotate{to{--glow-angle:360deg}}

/* ════ BREADCRUMB ════ */
.breadcrumb ol{display:flex;align-items:center;gap:.5rem;list-style:none;font-size:.8rem;color:#e8d8ff;margin-bottom:1.35rem}
.breadcrumb a{color:#e8d8ff}
.breadcrumb a:hover{color:#fff}

/* ════ TABS ════ */
.tab-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tab-btn{
  padding:.38rem 1.05rem;border:1px solid var(--c-border);border-radius:var(--r-full);
  background:transparent;color:#e8d8ff;font-size:.82rem;cursor:pointer;
  transition:all var(--t);font-family:var(--f-body);
}
.tab-btn.active,.tab-btn:hover{border-color:var(--c-neon);color:#fff;background:rgba(204,68,255,.15)}

/* ════ PERF BADGE ════ */
.perf-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(34,238,255,.1);border:1px solid rgba(34,238,255,.3);
  color:#fff;padding:.3rem .9rem;border-radius:var(--r-full);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.perf-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-cyan);box-shadow:0 0 8px var(--c-cyan);
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ════ FLOATING PARTICLES ════ */
.particle{
  position:fixed;pointer-events:none;z-index:0;
  border-radius:50%;
  animation:particle-float var(--pf-dur,8s) ease-in-out infinite var(--pf-delay,0s);
  opacity:0;
}
@keyframes particle-float{
  0%{opacity:0;transform:translateY(0) scale(0)}
  20%{opacity:.6}
  80%{opacity:.4}
  100%{opacity:0;transform:translateY(-120vh) scale(.5)}
}

/* ════ TYPING ANIMATION ════ */
.typing-text::after{
  content:'|';color:var(--c-neon);
  animation:blink .8s step-end infinite;
}

/* ════ CARD HOVER MAGNETIC ════ */
.magnetic{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}

/* ════ RESPONSIVE ════ */
@media(max-width:480px){
  .hero-ctas{flex-direction:column}
  .btn-primary,.btn-secondary{width:100%}
  .wheel-scene{width:270px;height:270px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(prefers-contrast:more){
  :root{--c-sub:#ffffff;--c-muted:#ffffff;--c-hint:#eeeeee;--c-border:rgba(255,255,255,.6)}
}

/* ════ SVG LOGO ════ */
.logo-svg{
  flex-shrink:0;
  animation:logo-svg-spin 30s linear infinite;
  filter:drop-shadow(0 0 8px rgba(204,68,255,.7));
  transition:filter .3s ease;
}
.logo:hover .logo-svg{
  filter:drop-shadow(0 0 18px rgba(204,68,255,1));
}
@keyframes logo-svg-spin{to{transform:rotate(360deg)}}

/* ════ HERO PARALLAX RINGS ════ */
.hero-parallax-rings{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden;
}
.hpr{
  position:absolute;border-radius:50%;
  border:1px solid rgba(204,68,255,.14);
  animation:hpr-pulse 12s ease-in-out infinite;
}
.hpr-1{width:300px;height:300px;animation-delay:0s}
.hpr-2{width:550px;height:550px;animation-delay:-3s;border-color:rgba(119,51,255,.1)}
.hpr-3{width:900px;height:900px;animation-delay:-6s;border-color:rgba(255,68,221,.07)}
.hpr-4{width:1300px;height:1300px;animation-delay:-9s;border-color:rgba(204,68,255,.04)}
@keyframes hpr-pulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.05);opacity:1}
}

/* ════ WHEEL SVG OVERRIDE ════ */
.wheel-svg{
  width:100%;height:100%;
  filter:drop-shadow(0 0 22px rgba(204,68,255,.45));
  animation:none; /* controlled by parallax.js */
  transform:rotateY(0deg) rotateX(8deg);
  animation:wheel-svg-orbit 45s linear infinite;
  transform-origin:center;
}
@keyframes wheel-svg-orbit{
  from{transform:rotateY(0deg) rotateX(8deg)}
  to{transform:rotateY(360deg) rotateX(8deg)}
}
.wheel-scene{
  width:420px;height:420px;
  perspective:1000px;transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:640px){.wheel-scene{width:280px;height:280px}}

/* ════ SCROLL HINT ════ */
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(232,216,255,.45);font-size:.65rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;pointer-events:none;
}
.scroll-line{
  width:1px;height:48px;
  background:linear-gradient(to bottom,rgba(204,68,255,.7),transparent);
  animation:scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%,100%{transform:scaleY(1);opacity:.5}
  50%{transform:scaleY(1.4);opacity:1}
}

/* ════ FOOTER LOGO LINK ════ */
.footer-logo-link{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.85rem;text-decoration:none;
}
.footer-logo-link svg{flex-shrink:0}
.footer-logo-link .footer-logo{margin-bottom:0}

@media(max-width:640px){
  .hpr-3,.hpr-4{display:none}
  .scroll-hint{display:none}
}

/* ===== LUCKY SPIN WHEEL ===== */
.lucky-spin-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.spin-pointer {
  color: #ff44dd;
  font-size: 2rem;
  text-shadow: 0 0 16px #ff44dd, 0 0 32px #cc44ff;
  animation: pointer-pulse 1.2s ease-in-out infinite;
  z-index: 10;
  margin-bottom: -8px;
}

@keyframes pointer-pulse {
  0%, 100% { transform: translateY(0) scale(1); text-shadow: 0 0 16px #ff44dd; }
  50% { transform: translateY(4px) scale(1.15); text-shadow: 0 0 32px #ff44dd, 0 0 60px #cc44ff; }
}

.lucky-spin-container {
  position: relative;
  width: 420px;
  height: 420px;
  cursor: pointer;
  user-select: none;
}

#zodiacSpinCanvas {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(120,40,220,0.65)) drop-shadow(0 0 55px rgba(80,20,160,0.4));
  transition: filter 0.3s;
  display: block;
  max-width: 100%;
}

.lucky-spin-container:hover #zodiacSpinCanvas {
  filter: drop-shadow(0 0 45px rgba(150,60,255,0.85)) drop-shadow(0 0 80px rgba(100,30,200,0.55));
}

.spin-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a0033 0%, #0a0014 70%);
  border: 2.5px solid #cc44ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cc44ff;
  font-size: 1rem;
  text-align: center;
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(204,68,255,0.6), inset 0 0 20px rgba(204,68,255,0.1);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s, box-shadow 0.2s;
  pointer-events: none;
}

.spin-btn-inner { line-height: 1.2; }
.spin-btn-inner small { font-size: 0.6rem; letter-spacing: 2px; opacity: 0.8; }

.lucky-spin-container:hover .spin-center-btn {
  box-shadow: 0 0 35px rgba(204,68,255,0.9), inset 0 0 25px rgba(204,68,255,0.2);
  transform: translate(-50%, -50%) scale(1.08);
}

.spin-hint-text {
  color: rgba(204,68,255,0.7);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  margin-top: 4px;
}

.lucky-spin-container.spinning #zodiacSpinCanvas {
  filter: drop-shadow(0 0 60px rgba(255,68,221,0.9)) drop-shadow(0 0 100px rgba(204,68,255,0.6));
}

/* ===== ZODIAC RESULT MODAL ===== */
.zodiac-result-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: modal-fadein 0.3s ease;
}

.zodiac-result-modal.active { display: flex; }

@keyframes modal-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.zodiac-result-card {
  position: relative;
  background: linear-gradient(145deg, #0f0020 0%, #150030 50%, #0a0018 100%);
  border: 1.5px solid rgba(204,68,255,0.5);
  border-radius: 24px;
  padding: 48px 40px 40px;
  max-width: 460px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 60px rgba(204,68,255,0.3), 0 30px 80px rgba(0,0,0,0.6);
  animation: card-popin 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes card-popin {
  from { transform: scale(0.7) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none; border: none;
  color: rgba(204,68,255,0.6);
  font-size: 1.2rem; cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.modal-close:hover { color: #fff; background: rgba(204,68,255,0.2); }

.result-glow-ring {
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 26px;
  border: 2px solid transparent;
  background: linear-gradient(var(--glow-angle, 0deg), #cc44ff, #7733ff, #ff44dd, #cc44ff) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ring-rotate 3s linear infinite;
}
@keyframes ring-rotate {
  to { --glow-angle: 360deg; }
}

.result-symbol {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 20px rgba(204,68,255,0.8));
  animation: symbol-float 2s ease-in-out infinite;
}
@keyframes symbol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.result-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 0 20px rgba(204,68,255,0.6);
}

.result-meta {
  color: rgba(204,68,255,0.8);
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  margin-bottom: 16px;
}

.result-desc {
  color: rgba(255,255,255,0.82);
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.result-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.result-traits span {
  background: rgba(204,68,255,0.12);
  border: 1px solid rgba(204,68,255,0.3);
  color: #cc44ff;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.5px;
}

.result-cta {
  display: inline-block;
  background: linear-gradient(135deg, #cc44ff, #7733ff);
  color: #fff;
  padding: 12px 28px;
  border-radius: 99px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(204,68,255,0.4);
}
.result-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(204,68,255,0.6);
}

@media(max-width:768px) {
  .lucky-spin-container { width: 300px; height: 300px; }
  #zodiacSpinCanvas { width: 300px; height: 300px; }
}
@media(max-width:480px) {
  .lucky-spin-container { width: 260px; height: 260px; }
  #zodiacSpinCanvas { width: 260px; height: 260px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE PERFORMANCE OVERHAUL — Target 95 Lighthouse Score
   ══════════════════════════════════════════════════════════ */

/* 1. Disable heavy desktop animations on mobile */
@media (max-width: 768px) {
  /* Kill heavy parallax animations */
  .parallax-layer,
  .layer-stars,
  .layer-nebula-1,
  .layer-nebula-2,
  .layer-constellations { animation: none !important; transform: none !important; }

  /* Kill orb animations — replace with static */
  .orb { animation: none !important; }
  .orb-1 { opacity: 0.15; }
  .orb-2 { opacity: 0.1; }
  .orb-3 { opacity: 0.08; }

  /* Kill hero parallax rings */
  .hero-parallax-rings { display: none; }

  /* Kill logo spin */
  .logo-svg { animation: none !important; }

  /* Simplify glow-ring animation */
  .glow-ring::before { animation: none !important; }
  .glow-ring::after  { animation: none !important; }

  /* Kill grad-shift text animation */
  .grad-text { animation: none !important; background-position: 0% 50% !important; }

  /* Kill stars layer animation (reduce DOM stars) */
  .star { animation-duration: 6s !important; }

  /* Kill shooting stars */
  .shooting-star { display: none !important; }

  /* Hero layout: stack vertically, wheel first on mobile */
  .hero .container {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }

  .hero { padding-top: calc(var(--hh, 64px) + 1.5rem) !important; min-height: auto !important; }

  .hero-inner { text-align: center; }
  .zodiac-pills { justify-content: center; }
  .hero-ctas { justify-content: center; }

  /* Lucky spin wheel — compact for mobile */
  .lucky-spin-wrapper { width: 100%; align-items: center; }
  .lucky-spin-container { width: 280px !important; height: 280px !important; }
  #zodiacSpinCanvas { width: 280px !important; height: 280px !important; }
  .spin-center-btn { width: 58px !important; height: 58px !important; font-size: 0.8rem !important; }

  /* Features grid — 2 col on mobile */
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
  .feat-card { padding: 1.2rem 1rem !important; }
  .feat-icon { font-size: 1.8rem !important; }

  /* Zodiac grid — 4 col on mobile */
  .zodiac-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; }
  .zcard { padding: 0.8rem 0.4rem !important; }
  .zc-sym { font-size: 1.4rem !important; }
  .zc-name { font-size: 0.65rem !important; }
  .zc-date, .zc-el { font-size: 0.55rem !important; }

  /* Stats row — 2x2 grid */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .stat-num { font-size: 1.8rem !important; }

  /* Section padding reduction */
  .section { padding: 2.5rem 0 !important; }
  .features-section.section { padding: 2rem 0 !important; }

  /* Hero title smaller */
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }

  /* Reduce hero sub padding */
  .hero-sub { font-size: 0.88rem !important; margin-bottom: 1.2rem !important; }

  /* Zodiac pills smaller */
  .zodiac-pills a { padding: 0.28rem 0.7rem !important; font-size: 0.72rem !important; }

  /* Modal full-screen on mobile */
  .zodiac-result-card {
    padding: 36px 20px 28px !important;
    border-radius: 18px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .result-name { font-size: 1.5rem !important; }
  .result-symbol { font-size: 3rem !important; }

  /* Spin pointer smaller */
  .spin-pointer { font-size: 1.4rem !important; }

  /* CTA band */
  .cta-inner { padding: 2rem 1.2rem !important; }
  .cta-pills { flex-wrap: wrap; gap: 0.4rem; }

  /* Footer simplify */
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .footer-col { display: none; } /* hide extra cols on mobile to save render */
  .footer-brand { text-align: center; }
  .footer-social { justify-content: center; }
}

/* 2. Small phones */
@media (max-width: 380px) {
  .lucky-spin-container { width: 240px !important; height: 240px !important; }
  #zodiacSpinCanvas { width: 240px !important; height: 240px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .zodiac-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hero-title { font-size: 1.7rem !important; }
}

/* 3. Reduce repaints — contain layout */
.feat-card, .zcard, .stat-item {
  contain: layout style;
  will-change: auto;
}
.hero { contain: layout; }
.lucky-spin-container { contain: strict; }

/* 4. Font display swap already handled by Google Fonts preload,
   but ensure body text fallback is good */
body { font-display: swap; }

/* 5. Optimize scroll-reveal — use transform instead of expensive properties */
.scroll-reveal {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.scroll-reveal.in {
  transform: translateY(0);
  opacity: 1;
}

/* 6. Touch targets — minimum 44px */
@media (max-width: 768px) {
  .nav-link, .btn-primary, .btn-secondary, .zcard, .feat-card {
    min-height: 44px;
  }
  .zodiac-pills a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}