:root{
  --bg:#050818;
  --bg-2:#080d22;
  --panel:rgba(14,20,46,.74);
  --panel-soft:rgba(19,25,57,.56);
  --line:rgba(255,255,255,.08);
  --line-pink:rgba(225,74,184,.28);
  --text:#fff7fb;
  --muted:#bfc3d5;
  --muted-2:#878da8;
  --pink:#e356b8;
  --pink-2:#bd42df;
  --violet:#7a55ff;
  --gold:#ffb86c;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --sidebar:270px;

  /* Replace these URLs later with real assets on your server */
  --hero-image:url("assets/index-hero.png");
  --sidebar-image:none;
  --astrology-image:url("assets/index-astro.png");
  --tarot-image:url("assets/index-tarot.png");
  --palm-image:url("assets/index-palm.png");
  --moon-image:url("assets/index-moon.png");
  --newsletter-image:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 16%, rgba(138,69,255,.32), transparent 31%),
    radial-gradient(circle at 64% 44%, rgba(227,86,184,.16), transparent 34%),
    linear-gradient(135deg,#030614 0%,#071025 54%,#0b0d24 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.orb{position:fixed;border-radius:50%;filter:blur(50px);opacity:.34;pointer-events:none;z-index:0}.orb-one{width:360px;height:360px;right:9%;top:8%;background:#7b3dff}.orb-two{width:250px;height:250px;left:7%;bottom:7%;background:#e356b8}
.sidebar{position:fixed;z-index:40;left:0;top:0;bottom:0;width:var(--sidebar);background:linear-gradient(180deg,rgba(8,12,32,.98),rgba(7,10,28,.94));border-right:1px solid var(--line);box-shadow:16px 0 60px rgba(0,0,0,.32);padding:30px 22px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(227,86,184,.45) transparent}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:rgba(227,86,184,.45);border-radius:999px}.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(227,86,184,.7)}
.sidebar:after{content:"";position:absolute;right:-1px;top:15.2%;width:8px;height:48px;border-radius:20px 0 0 20px;background:linear-gradient(180deg,var(--pink),var(--pink-2));box-shadow:0 0 22px rgba(227,86,184,.75)}
.brand{text-align:center;margin-bottom:34px}.brand-mark{width:94px;height:94px;border:1px solid rgba(227,86,184,.45);border-radius:50%;display:grid;place-items:center;margin:0 auto 17px;background:radial-gradient(circle,rgba(227,86,184,.22),rgba(255,255,255,.03) 52%,transparent 53%);box-shadow:0 0 45px rgba(227,86,184,.15),inset 0 0 26px rgba(122,85,255,.14);position:relative}.brand-mark:before,.brand-mark:after{content:"";position:absolute;inset:17px;border:1px solid rgba(255,255,255,.16);transform:rotate(45deg)}.brand-mark:after{inset:29px;border-color:rgba(227,86,184,.45)}.brand-star{font-size:31px;color:#ff90db;text-shadow:0 0 18px rgba(255,144,219,.8);z-index:1}.brand-name{font-family:Cinzel,serif;font-size:29px;letter-spacing:9px;font-weight:500}.brand-tag{margin-top:7px;color:#ff77c7;font-size:10px;letter-spacing:2.5px;font-weight:800}
.side-nav{display:flex;flex-direction:column;gap:7px}.side-link{height:48px;display:flex;align-items:center;gap:14px;padding:0 17px;border-radius:12px;color:#f2f0fb;font-size:15px;font-weight:600;transition:.25s ease;position:relative}.side-link span{width:20px;text-align:center;color:#d9c9e6;font-size:18px}.side-link:hover,.side-link.active{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(227,86,184,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.side-link.active span{color:#ff83d4;text-shadow:0 0 12px rgba(255,131,212,.9)}
.sidebar-card{margin:35px 8px 0;padding:27px 26px 26px;border-radius:16px;background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid var(--line);box-shadow:var(--shadow)}.sidebar-card-icon{color:#ff8ed7;font-size:25px;margin-bottom:17px}.sidebar-card h3{text-transform:uppercase;letter-spacing:2.8px;font-size:16px;line-height:1.52;margin:0 0 17px}.sidebar-card p{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 22px}.mini-button{display:inline-flex;align-items:center;justify-content:center;height:39px;padding:0 30px;border-radius:999px;background:linear-gradient(135deg,#e65bac,#b841d9);font-size:12px;text-transform:uppercase;font-weight:800;box-shadow:0 10px 30px rgba(227,86,184,.26)}.sidebar-moon{position:absolute;left:0;right:0;bottom:0;height:220px;background-image:linear-gradient(180deg,transparent,rgba(7,10,28,.2)),radial-gradient(circle at 45% 44%,rgba(255,150,199,.78) 0 18px,transparent 45px),linear-gradient(180deg,transparent 0 45%,rgba(68,46,108,.36) 62%,rgba(9,14,35,.95)),var(--sidebar-image);background-size:cover;background-position:center;opacity:.78;z-index:-1}
.page-shell{position:relative;z-index:1;margin-left:var(--sidebar);padding:0 48px 16px;min-height:100vh}.topbar{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:30px;position:relative;z-index:10}.top-nav{grid-column:2;justify-self:center;display:flex;align-items:center;gap:62px;text-transform:uppercase;letter-spacing:1.6px;font-size:12px;font-weight:800}.top-nav a{opacity:.92;transition:.25s ease}.top-nav a:hover{color:#ff83d4;text-shadow:0 0 14px rgba(255,131,212,.55)}.top-actions{grid-column:3;justify-self:end;display:flex;gap:20px}.ghost-button,.primary-button{height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-transform:uppercase;font-size:12px;letter-spacing:.8px;font-weight:900;white-space:nowrap}.ghost-button{min-width:108px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.02)}.primary-button{min-width:132px;background:linear-gradient(135deg,#e65bac,#bd42df);box-shadow:0 12px 38px rgba(227,86,184,.34)}.primary-button.large{height:55px;min-width:246px;padding:0 28px;gap:17px}.menu-toggle{grid-column:1;justify-self:start;display:none;background:rgba(255,255,255,.06);border:1px solid var(--line);width:46px;height:42px;border-radius:12px;padding:10px}.menu-toggle span{display:block;height:2px;background:white;margin:5px 0;border-radius:10px}
.hero{min-height:522px;border-radius:0 0 18px 18px;position:relative;overflow:hidden;background-image:linear-gradient(90deg,rgba(4,7,19,.98) 0%,rgba(5,8,22,.86) 31%,rgba(7,10,27,.33) 67%,rgba(4,7,19,.08)),radial-gradient(circle at 70% 36%,rgba(251,160,91,.36),transparent 8%),radial-gradient(circle at 74% 35%,rgba(154,96,255,.27),transparent 30%),linear-gradient(180deg,transparent 0 61%,rgba(5,8,22,.92) 100%),var(--hero-image);background-size:cover;background-position:center}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(0deg,rgba(5,8,22,.98),transparent);pointer-events:none}.stars-layer{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.8) 0 1px,transparent 1.6px),radial-gradient(circle at 73% 17%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),radial-gradient(circle at 88% 44%,rgba(255,190,238,.65) 0 1px,transparent 1.6px),radial-gradient(circle at 49% 30%,rgba(255,255,255,.45) 0 1px,transparent 1.5px);background-size:190px 170px,230px 230px,280px 200px,310px 290px;animation:twinkle 8s linear infinite;opacity:.55}.hero-content{position:relative;z-index:3;width:min(560px,54%);padding:48px 0 0 35px}.eyebrow,.section-kicker,.dashboard-copy span,.newsletter-card span{color:#ff76c8;text-transform:uppercase;letter-spacing:4px;font-size:12px;font-weight:900}.hero h1{font-family:Cinzel,Georgia,serif;font-size:62px;line-height:1.05;font-weight:400;margin:27px 0 22px;text-shadow:0 16px 34px rgba(0,0,0,.3)}.hero h1 span{color:#e85fbd}.hero-copy{width:450px;max-width:100%;font-size:17px;line-height:1.72;color:#f1edf7;margin:0 0 32px}.hero-actions{display:flex;align-items:center;gap:27px}.play-link{display:flex;align-items:center;gap:15px;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.9px}.play-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 0 24px rgba(255,255,255,.04);font-size:13px}.members{display:flex;align-items:center;gap:18px;margin-top:35px;font-size:15px}.members strong{font-size:19px}.members span{color:#cfd2df}.avatars{display:flex}.avatars span{width:39px;height:39px;border-radius:50%;margin-left:-9px;border:2px solid rgba(6,9,25,.95);background:linear-gradient(135deg,#72d4ff,#f4b38b)}.avatars span:first-child{margin-left:0}.avatars span:nth-child(2){background:linear-gradient(135deg,#e5c1a9,#243d70)}.avatars span:nth-child(3){background:linear-gradient(135deg,#ffd1d1,#2d3561)}.avatars span:nth-child(4){background:linear-gradient(135deg,#7650e4,#f5b7a2)}
.zodiac-wheel{position:absolute;z-index:2;right:70px;top:62px;width:520px;height:520px;border-radius:50%;opacity:.82;filter:drop-shadow(0 0 45px rgba(167,80,255,.32));animation:floatWheel 7s ease-in-out infinite}.wheel-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,127,219,.25);box-shadow:inset 0 0 60px rgba(122,85,255,.1)}.ring-two{inset:60px}.ring-three{inset:125px;border-color:rgba(255,184,108,.24)}.zodiac-wheel:before{content:"";position:absolute;inset:38px;border-radius:50%;background:repeating-conic-gradient(from 6deg,rgba(255,120,218,.22) 0 1deg,transparent 1deg 15deg)}.zodiac-wheel:after{content:"";position:absolute;inset:95px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(255,127,219,.25),transparent,rgba(255,184,108,.22),transparent);mask:radial-gradient(circle,transparent 0 45%,#000 46%)}.sun-core{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0 12%,#ffc083 34%,rgba(255,184,108,.18) 68%,transparent);box-shadow:0 0 55px #ffb86c,0 0 125px rgba(227,86,184,.42)}.z{position:absolute;color:#ff9ddd;font-size:31px;text-shadow:0 0 20px rgba(255,157,221,.62)}.s1{left:26%;top:8%}.s2{left:47%;top:4%}.s3{right:24%;top:9%}.s4{right:8%;top:24%}.s5{right:5%;top:43%}.s6{right:9%;bottom:26%}.s7{right:25%;bottom:10%}.s8{left:13%;bottom:27%}.s9{left:5%;top:42%}.s10{left:14%;top:24%}
.glass{background:linear-gradient(135deg,rgba(20,26,58,.72),rgba(12,17,41,.58));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.quick-tools{position:relative;z-index:5;margin:-3px 0 28px;padding:24px 24px;border-radius:14px;display:grid;grid-template-columns:repeat(8,1fr)}.tool-card{min-height:125px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border-right:1px solid var(--line);transition:.25s ease}.tool-card:last-child{border-right:0}.tool-card:hover{transform:translateY(-7px);color:#fff}.tool-icon{height:47px;margin-bottom:13px;font-size:41px;color:#d94fc2;text-shadow:0 0 24px rgba(227,86,184,.62)}.tool-card strong{font-size:14px;margin-bottom:8px}.tool-card small{color:var(--muted);font-size:12px}
.explore-section{margin-top:18px}.section-kicker{text-align:center;margin:0 0 22px}.explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{min-height:226px;padding:41px 34px 30px;border-radius:13px;border:1px solid var(--line-pink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;background-size:cover;background-position:center}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,24,.93) 0%,rgba(8,12,28,.66) 55%,rgba(12,15,36,.28)),radial-gradient(circle at 85% 20%,rgba(227,86,184,.28),transparent 35%)}.feature-card>*{position:relative}.feature-card h2{font-family:Cinzel,serif;font-weight:400;font-size:25px;margin:0 0 13px}.feature-card p{max-width:220px;margin:0;color:#e5e3ef;font-size:14px;line-height:1.65}.round-link{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(227,86,184,.78);color:white;box-shadow:0 0 22px rgba(227,86,184,.28);font-size:20px}.astrology-card{background-image:radial-gradient(circle at 78% 38%,rgba(149,49,255,.8) 0 42px,transparent 95px),linear-gradient(135deg,rgba(117,42,179,.35),rgba(12,15,36,.72)),var(--astrology-image)}.tarot-card{background-image:radial-gradient(circle at 66% 45%,rgba(255,151,79,.3),transparent 34%),linear-gradient(120deg,rgba(69,41,31,.58),rgba(5,8,22,.8)),var(--tarot-image)}.palm-card{background-image:radial-gradient(circle at 68% 45%,rgba(255,198,116,.34),transparent 24%),linear-gradient(120deg,rgba(44,22,28,.7),rgba(5,8,22,.75)),var(--palm-image)}.moon-card{background-image:radial-gradient(circle at 77% 26%,rgba(216,151,255,.78) 0 34px,transparent 80px),linear-gradient(120deg,rgba(31,20,62,.6),rgba(5,8,22,.78)),var(--moon-image)}
.lower-grid{display:grid;grid-template-columns:1.55fr 1.05fr;gap:20px;margin-top:23px}.dashboard-card,.newsletter-card{border-radius:14px;min-height:205px;overflow:hidden}.dashboard-card{display:grid;grid-template-columns:.8fr 1.2fr}.dashboard-copy{padding:32px 35px}.dashboard-copy span,.newsletter-card span{color:#ffb86c;letter-spacing:2.6px}.dashboard-copy h2,.newsletter-card h2{font-family:Cinzel,serif;font-weight:400;font-size:27px;line-height:1.15;margin:12px 0 18px}.dashboard-copy p{font-size:13px;line-height:1.65;color:#d9d8e5;margin:0}.dashboard-widget{margin:30px 30px 30px 0;border-radius:14px;background:rgba(3,7,20,.45);border:1px solid rgba(255,255,255,.05);display:grid;grid-template-columns:.8fr 110px 1.2fr;align-items:center;padding:22px 24px}.energy-block small{display:block;color:#e5e3ef;font-size:12px;margin-bottom:8px}.energy-block strong{font-size:14px;font-weight:500}.score-circle{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) 82%,rgba(255,255,255,.08) 0);position:relative}.score-circle:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#0b1025}.score-circle span{position:relative;font-size:25px}.transits{list-style:none;margin:0;padding:0}.transits li{display:flex;justify-content:space-between;gap:20px;font-size:13px;margin:0 0 15px}.transits li:first-child{color:#fff;margin-bottom:11px}.transits small{color:#bfc3d5}.transits em{color:#bfc3d5;font-style:normal}.newsletter-card{position:relative;padding:35px 38px;background-image:linear-gradient(90deg,rgba(20,26,58,.8),rgba(14,19,45,.58)),var(--newsletter-image);background-size:cover;background-position:center}.newsletter-card h2{font-size:26px}.newsletter-form{display:flex;width:min(300px,100%);height:42px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);overflow:hidden}.newsletter-form input{flex:1;min-width:0;background:transparent;border:0;color:white;padding:0 18px;outline:0}.newsletter-form input::placeholder{color:#9398ad}.newsletter-form button{width:48px;border:0;color:white;background:linear-gradient(135deg,#e65bac,#bd42df);cursor:pointer}.newsletter-card small{display:block;margin-top:12px;color:#bec2d1}.envelope{position:absolute;right:48px;top:42px;font-size:118px;color:transparent;-webkit-text-stroke:1px rgba(255,184,108,.52);text-shadow:0 0 28px rgba(255,184,108,.25);transform:rotate(-14deg)}
.stats-footer{min-height:82px;margin-top:18px;border-radius:13px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}.stats-footer div{height:52px;display:grid;grid-template-columns:54px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:0 28px;border-right:1px solid var(--line)}.stats-footer div:last-child{border-right:0}.stats-footer span{grid-row:1/3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(227,86,184,.08);color:#ff75cc;font-size:24px;text-shadow:0 0 18px rgba(227,86,184,.54)}.stats-footer strong{font-size:18px}.stats-footer small{font-size:13px;color:#bdc1d0}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@keyframes twinkle{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.85;transform:translateY(-8px)}}@keyframes floatWheel{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.015)}}
@media (max-width:1500px){:root{--sidebar:250px}.page-shell{padding:0 34px 16px}.top-nav{gap:42px}.hero h1{font-size:55px}.zodiac-wheel{right:24px;width:480px;height:480px}.quick-tools{grid-template-columns:repeat(4,1fr)}.tool-card:nth-child(4){border-right:0}.tool-card:nth-child(n+5){border-top:1px solid var(--line)}}
@media (max-width:1180px){.sidebar{transform:translateX(-104%);transition:.3s ease}.sidebar.open{transform:none}.page-shell{margin-left:0;padding:0 22px 18px}.menu-toggle{display:block}.zodiac-wheel{opacity:.55;right:-96px}.hero-content{width:min(620px,75%)}.explore-grid{grid-template-columns:repeat(2,1fr)}.lower-grid{grid-template-columns:1fr}.stats-footer{grid-template-columns:repeat(3,1fr)}.stats-footer div:nth-child(3){border-right:0}.stats-footer div:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:820px){.page-shell{padding:0 14px 18px}.topbar{height:78px}.top-nav{display:none}.ghost-button{display:none}.primary-button{min-width:112px;height:42px}.hero{min-height:660px;border-radius:0 0 16px 16px}.hero-content{width:100%;padding:54px 18px 0}.hero h1{font-size:42px}.hero-copy{font-size:15px}.hero-actions{flex-direction:column;align-items:flex-start}.zodiac-wheel{top:280px;right:50%;transform:translateX(50%);width:350px;height:350px;animation:none}.quick-tools{grid-template-columns:repeat(2,1fr);padding:12px}.tool-card{border-right:0!important;border-top:1px solid var(--line);min-height:108px}.tool-card:nth-child(-n+2){border-top:0}.explore-grid{grid-template-columns:1fr}.feature-card{min-height:200px}.dashboard-card{grid-template-columns:1fr}.dashboard-widget{margin:0 18px 22px;grid-template-columns:1fr;gap:20px}.score-circle{margin:auto}.newsletter-card{padding:30px 26px}.envelope{right:26px;top:54px;font-size:76px;opacity:.42}.stats-footer{grid-template-columns:1fr}.stats-footer div{border-right:0!important;border-top:1px solid var(--line);padding:14px 24px}.stats-footer div:first-child{border-top:0}.brand-name{font-size:25px}.sidebar{width:268px}}
@media (max-width:480px){.top-actions .primary-button{min-width:105px}.hero h1{font-size:35px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2.6px}.primary-button.large{min-width:100%;justify-content:center}.play-link{width:100%;justify-content:center}.members{align-items:flex-start}.zodiac-wheel{width:280px;height:280px;top:340px}.z{font-size:22px}.feature-card{padding:31px 25px}.dashboard-copy{padding:28px 25px}.newsletter-form{width:100%}.tool-icon{font-size:34px}.sidebar-card{margin-top:26px}}
.feature-card:after,.tool-card:after,.dashboard-card:after,.newsletter-card:after,.stats-footer div:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 32%);transition:opacity .25s ease}.feature-card:hover:after,.tool-card:hover:after,.dashboard-card:hover:after,.newsletter-card:hover:after,.stats-footer div:hover:after{opacity:1}.tool-card,.dashboard-card,.newsletter-card,.stats-footer div{position:relative;overflow:hidden}.newsletter-form.shake{animation:shake .42s ease}.newsletter-form.sent{border-color:rgba(104,255,195,.38)}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* =========================================================
   ASTROVIA — HOROSCOPE PAGE
   Additions for horoscope.html
========================================================= */

.horoscope-page {
  --hero-horoscope-image: url("assets/horoscope-hero.jpg");
  --sidebar-bottom-image: url("assets/sidebar-moon.jpg");
  --guidance-wheel-image: url("assets/guidance-wheel.png");
  --guidance-moon-image: url("assets/guidance-moon.png");
  --guidance-stars-image: url("assets/guidance-stars.png");
}

.horoscope-page .page-shell {
  position: relative;
  min-height: 100vh;
  padding-bottom: 32px;
}

.horoscope-page .page-shell::before {
  content: "";
  position: fixed;
  inset: 0 0 0 190px;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 16%, rgba(233, 91, 195, 0.2), transparent 30%),
    radial-gradient(circle at 40% 25%, rgba(133, 71, 255, 0.16), transparent 35%),
    linear-gradient(180deg, rgba(9, 12, 30, 0.2), rgba(5, 8, 22, 0.92));
  z-index: -1;
}

.horoscope-hero {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  align-items: center;
  gap: 28px;
  padding: 34px 48px 26px 48px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.horoscope-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 25, 1) 0%, rgba(7, 10, 25, 0.88) 31%, rgba(7, 10, 25, 0.25) 62%, rgba(7, 10, 25, 0.76) 100%),
    var(--hero-horoscope-image);
  background-size: cover;
  background-position: center right;
  opacity: 0.95;
  z-index: 0;
}

.horoscope-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(6, 9, 25, 0.98));
  z-index: 1;
}

.horoscope-hero > * {
  position: relative;
  z-index: 2;
}

.hero-copy {
  max-width: 500px;
}

.hero-copy .eyebrow {
  margin-bottom: 18px;
}

.horoscope-hero h2 {
  margin: 0 0 16px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 5.1vw, 72px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.horoscope-hero .hero-copy > p:not(.eyebrow) {
  max-width: 455px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.78;
}

.horoscope-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.date-select,
.share-btn {
  height: 52px;
  border-radius: 11px;
  border: 1px solid rgba(255, 185, 132, 0.32);
  background: rgba(9, 10, 26, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: 0.25s ease;
}

.date-select {
  min-width: 225px;
}

.date-select:hover,
.share-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 89, 207, 0.6);
  box-shadow: 0 12px 30px rgba(196, 61, 178, 0.18);
}

.chevron {
  margin-left: auto;
  opacity: 0.8;
}

.hero-zodiac-placeholder {
  min-height: 310px;
  position: relative;
  display: grid;
  place-items: center;
}

.zodiac-glow {
  width: min(370px, 75vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 201, 115, 0.98) 0 4%, rgba(255, 152, 99, 0.5) 7%, rgba(198, 82, 189, 0.18) 33%, transparent 64%),
    repeating-radial-gradient(circle, rgba(255,255,255,.17) 0 1px, transparent 1px 31px);
  border: 1px solid rgba(255, 167, 230, 0.24);
  box-shadow:
    0 0 70px rgba(237, 76, 194, 0.22),
    inset 0 0 54px rgba(255, 255, 255, 0.04);
  animation: zodiacPulse 5s ease-in-out infinite;
}

.zodiac-ring {
  position: absolute;
  width: min(400px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: slowRotate 55s linear infinite;
}

.zodiac-ring span {
  position: absolute;
  color: rgba(255, 165, 219, 0.95);
  font-size: 26px;
  text-shadow: 0 0 18px rgba(255, 82, 204, 0.75);
}

.zodiac-ring span:nth-child(1) { top: 3%; left: 47%; }
.zodiac-ring span:nth-child(2) { top: 12%; right: 21%; }
.zodiac-ring span:nth-child(3) { top: 34%; right: 4%; }
.zodiac-ring span:nth-child(4) { bottom: 28%; right: 9%; }
.zodiac-ring span:nth-child(5) { bottom: 8%; left: 49%; }
.zodiac-ring span:nth-child(6) { bottom: 23%; left: 7%; }
.zodiac-ring span:nth-child(7) { top: 34%; left: 4%; }
.zodiac-ring span:nth-child(8) { top: 12%; left: 21%; }

.zodiac-carousel-section {
  position: relative;
  margin: 22px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.zodiac-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(125px, 1fr);
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: none;
}

.zodiac-tabs::-webkit-scrollbar {
  display: none;
}

.zodiac-tab {
  min-height: 82px;
  border-radius: 11px;
  border: 1px solid rgba(255, 183, 228, 0.16);
  background:
    linear-gradient(145deg, rgba(23, 18, 45, 0.82), rgba(7, 10, 25, 0.88));
  color: #fff;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  transition: 0.24s ease;
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.02);
}

.zodiac-tab:hover,
.zodiac-tab.active {
  border-color: rgba(241, 77, 206, 0.78);
  background:
    radial-gradient(circle at 18% 20%, rgba(244, 72, 211, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(41, 20, 59, 0.96), rgba(10, 13, 32, 0.95));
  box-shadow:
    0 0 0 1px rgba(241, 77, 206, 0.16),
    0 16px 38px rgba(228, 70, 195, 0.13);
}

.zodiac-icon {
  grid-row: 1 / 3;
  color: #ff4ad8;
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 76, 209, 0.7);
}

.zodiac-tab strong {
  align-self: end;
  font-size: 15px;
  font-weight: 700;
}

.zodiac-tab small {
  align-self: start;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
}

.carousel-arrow {
  width: 33px;
  min-width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 11, 28, 0.78);
  color: white;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: 0.22s ease;
}

.carousel-arrow:hover {
  border-color: rgba(244, 82, 210, 0.9);
  box-shadow: 0 0 22px rgba(244, 82, 210, 0.24);
}

.glass-card {
  border: 1px solid rgba(255, 180, 230, 0.15);
  background:
    linear-gradient(145deg, rgba(22, 17, 43, 0.76), rgba(8, 11, 30, 0.86));
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.32),
    inset 0 0 28px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(18px);
}

.daily-sign-card {
  margin: 0 24px 22px;
  border-radius: 15px;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(250px, 0.65fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  position: relative;
}

.daily-sign-card::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 70, 211, 0.16), transparent 66%);
  pointer-events: none;
}

.sign-reading,
.sign-illustration-placeholder,
.sign-facts {
  position: relative;
  z-index: 1;
}

.sign-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.huge-sign {
  color: #ff42d2;
  font-size: 76px;
  line-height: 0.8;
  text-shadow: 0 0 25px rgba(255, 66, 210, 0.75);
}

.sign-title-row h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 43px;
  font-weight: 400;
}

.sign-title-row p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.8);
}

.sign-description {
  max-width: 400px;
  color: rgba(255,255,255,.83);
  font-size: 15px;
  line-height: 1.9;
}

.energy-widget {
  margin-top: 28px;
  max-width: 350px;
  min-height: 125px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 109, 216, 0.22);
  background:
    radial-gradient(circle at 95% 12%, rgba(255, 65, 209, 0.22), transparent 42%),
    rgba(16, 13, 35, 0.82);
}

.energy-circle {
  --p: 84;
  width: 84px;
  min-width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(#ff6ea8 calc(var(--p) * 1%), #9f5cff calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
  position: relative;
}

.energy-circle::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #17142d;
}

.energy-circle span {
  position: relative;
  color: #fff;
  font-size: 26px;
  font-family: Georgia, "Times New Roman", serif;
}

.energy-widget h4 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 400;
}

.energy-widget strong {
  display: block;
  margin-bottom: 6px;
  color: #ff5ad3;
}

.energy-widget p {
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.6;
  font-size: 13px;
}

.sign-illustration-placeholder {
  min-height: 300px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(243, 68, 211, 0.13), transparent 60%),
    repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 32px);
}

.sign-illustration-placeholder::before {
  content: "";
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 143, 221, 0.28);
  box-shadow: 0 0 50px rgba(247, 79, 213, 0.18);
}

.ram-symbol {
  position: absolute;
  color: rgba(255, 77, 211, 0.68);
  font-size: 120px;
  text-shadow: 0 0 36px rgba(255, 77, 211, 0.6);
  opacity: 0.78;
}

.constellation-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffa5e7;
  border-radius: 50%;
  box-shadow: 0 0 14px #ff62d8;
  animation: twinkle 2.4s ease-in-out infinite;
}

.dot-1 { top: 18%; left: 35%; }
.dot-2 { top: 30%; right: 22%; animation-delay: .4s; }
.dot-3 { bottom: 28%; left: 22%; animation-delay: .7s; }
.dot-4 { bottom: 18%; right: 36%; animation-delay: 1.1s; }

.sign-facts {
  border-radius: 12px;
  border: 1px solid rgba(255, 151, 221, 0.14);
  background:
    radial-gradient(circle at top right, rgba(232, 73, 200, 0.15), transparent 46%),
    rgba(15, 13, 32, 0.82);
  overflow: hidden;
}

.fact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fact-row:last-child {
  border-bottom: 0;
}

.fact-row span {
  color: #fff;
  font-weight: 700;
}

.fact-row strong {
  color: rgba(255,255,255,.82);
  font-weight: 400;
  line-height: 1.55;
}

.color-dot {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e24bd7, #8a4eff);
  vertical-align: -3px;
}

.horoscope-block {
  margin: 0 24px 22px;
  border-radius: 15px;
  padding: 24px;
}

.horoscope-block h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  font-family: Georgia, "Times New Roman", serif;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.expect-card,
.day-card,
.guidance-card {
  border: 1px solid rgba(255, 185, 232, 0.15);
  background:
    linear-gradient(145deg, rgba(30, 20, 53, 0.72), rgba(8, 11, 30, 0.76));
  border-radius: 12px;
  transition: 0.24s ease;
}

.expect-card {
  min-height: 158px;
  padding: 20px;
  position: relative;
}

.expect-card:hover,
.day-card:hover,
.guidance-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 85, 206, 0.48);
  box-shadow: 0 18px 36px rgba(215, 57, 190, 0.12);
}

.expect-icon {
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  font-size: 29px;
  line-height: 1;
}

.expect-icon.heart { color: #ff52cf; }
.expect-icon.career { color: #ffc06d; }
.expect-icon.money { color: #ffd25e; }
.expect-icon.health { color: #99d676; }

.expect-card h4 {
  position: absolute;
  top: 23px;
  left: 84px;
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
}

.stars {
  position: absolute;
  top: 52px;
  left: 84px;
  color: #ffc759;
  letter-spacing: 2px;
  font-size: 14px;
}

.expect-card p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  font-size: 14px;
}

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
}

.day-card {
  min-height: 146px;
  padding: 16px 10px;
  text-align: center;
}

.day-card strong {
  display: block;
  color: #fff;
  font-size: 17px;
  margin-bottom: 4px;
}

.day-card span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.day-card i {
  display: block;
  margin: 18px 0 12px;
  color: #ffc460;
  font-style: normal;
  font-size: 38px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 196, 96, 0.35);
}

.day-card:nth-child(3) i,
.day-card:nth-child(6) i {
  color: #c78bff;
}

.day-card:nth-child(5) i {
  color: #fff;
}

.day-card p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.guidance-card {
  min-height: 150px;
  padding: 22px;
  overflow: hidden;
  position: relative;
}

.guidance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  opacity: 0.58;
  mix-blend-mode: screen;
}

.guidance-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,14,32,.95), rgba(12,14,32,.52), rgba(12,14,32,.18));
}

.guidance-bg-wheel::before {
  background-image: var(--guidance-wheel-image);
}

.guidance-bg-moon::before {
  background-image: var(--guidance-moon-image);
}

.guidance-bg-stars::before {
  background-image: var(--guidance-stars-image);
}

.guidance-card > * {
  position: relative;
  z-index: 1;
}

.guidance-card span {
  display: block;
  margin-bottom: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.guidance-card h4 {
  margin: 0 0 13px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
}

.guidance-card p {
  max-width: 270px;
  margin: 0;
  color: rgba(255,255,255,.77);
  line-height: 1.65;
  font-size: 14px;
}

.reading-btn {
  min-width: 310px;
  height: 58px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #d444ab, #7d2cc2);
  box-shadow: 0 18px 40px rgba(204, 61, 177, 0.25);
  transition: 0.24s ease;
}

.reading-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(204, 61, 177, 0.36);
}



/* Animations */

@keyframes zodiacPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.16);
  }
}

@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: .35;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* Responsive */

@media (max-width: 1240px) {
  .daily-sign-card {
    grid-template-columns: 1fr 1fr;
  }

  .sign-facts {
    grid-column: 1 / -1;
  }

  .expect-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekly-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .guidance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1020px) {
  .horoscope-page .page-shell::before {
    inset-left: 0;
  }

  .horoscope-hero {
    grid-template-columns: 1fr;
    padding: 104px 24px 28px;
  }

  .hero-zodiac-placeholder {
    min-height: 260px;
  }

  .zodiac-carousel-section,
  .daily-sign-card,
  .horoscope-block {
    margin-left: 16px;
    margin-right: 16px;
  }

  .zodiac-tabs {
    grid-auto-columns: 150px;
  }

  .daily-sign-card {
    grid-template-columns: 1fr;
  }

  .sign-illustration-placeholder {
    min-height: 230px;
  }

  .weekly-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reading-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .horoscope-hero {
    min-height: auto;
    padding-top: 92px;
  }

  .horoscope-hero h2 {
    font-size: 45px;
  }

  .horoscope-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .date-select,
  .share-btn {
    width: 100%;
  }

  .zodiac-carousel-section {
    gap: 8px;
  }

  .carousel-arrow {
    display: none;
  }

  .zodiac-tabs {
    grid-template-columns: repeat(7, 142px);
  }

  .daily-sign-card,
  .horoscope-block {
    padding: 18px;
  }

  .sign-title-row {
    align-items: flex-start;
  }

  .huge-sign {
    font-size: 58px;
  }

  .sign-title-row h2 {
    font-size: 34px;
  }

  .energy-widget {
    flex-direction: column;
    align-items: flex-start;
  }

  .fact-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .expect-grid,
  .weekly-grid,
  .guidance-grid {
    grid-template-columns: 1fr;
  }

  .expect-card h4,
  .stars {
    position: static;
    margin-left: 0;
  }

  .expect-card h4 {
    margin-top: 8px;
  }

  .stars {
    margin-top: 4px;
  }

}
/* Horoscope page should inherit the global Astrovia layout */
.horoscope-page .topbar {
  margin-bottom: 0;
}

.horoscope-page .horoscope-hero {
  margin-top: 0;
}

.horoscope-page .sidebar .sidebar-card {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ASTROVIA — ASTROLOGY PAGE
   Additions for astrology.html
========================================================= */

.astrology-page {
  --astrology-hero-image: url("assets/astrology-hero.jpg");
  --astrology-wheel-image: url("assets/astrology-wheel.jpg");
  --birth-chart-image: url("assets/birth-chart.jpg");
}

.astrology-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.astrology-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 54px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, 0.85);
}

.astrology-page .page-shell {
  padding-bottom: 24px;
}

.astrology-hero {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(430px, 0.82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: 24px;
  padding: 12px 42px 22px;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.83) 38%, rgba(5,8,22,.24) 66%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 79% 30%, rgba(255, 184, 108, 0.34), transparent 8%),
    radial-gradient(circle at 72% 42%, rgba(227, 86, 184, 0.28), transparent 38%),
    var(--astrology-hero-image);
  background-size: cover;
  background-position: center right;
}

.astrology-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 130px;
  background: linear-gradient(0deg, rgba(5,8,22,.95), transparent);
  pointer-events: none;
}

.astrology-hero > * {
  position: relative;
  z-index: 2;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

.breadcrumb a {
  color: #ff6fc7;
}

.breadcrumb strong {
  color: rgba(255,255,255,.78);
  font-weight: 500;
}

.astrology-hero h1 {
  margin: 0 0 17px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(54px, 5vw, 74px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.astrology-hero-content > p {
  width: 440px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.75;
}

.astrology-feature-tabs {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  gap: 26px;
  margin-top: 31px;
}

.astrology-feature-tabs article {
  text-align: center;
}

.astrology-feature-tabs span {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff67cf;
  border: 1px solid rgba(255, 103, 207, 0.32);
  background: rgba(255,255,255,.035);
  font-size: 28px;
  text-shadow: 0 0 17px rgba(255, 103, 207, 0.7);
}

.astrology-feature-tabs strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.astrology-hero-wheel {
  min-height: 290px;
  display: grid;
  place-items: center;
}

.astro-wheel-placeholder {
  width: min(430px, 80vw);
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 214, 123, 0.95) 0 4%, rgba(255, 156, 89, 0.45) 7%, rgba(214, 65, 192, 0.16) 30%, transparent 59%),
    repeating-radial-gradient(circle, rgba(255,255,255,.15) 0 1px, transparent 1px 43px),
    repeating-conic-gradient(from 8deg, rgba(255, 133, 226, 0.18) 0 1deg, transparent 1deg 15deg);
  border: 1px solid rgba(255, 137, 220, 0.22);
  box-shadow:
    0 0 80px rgba(209, 73, 190, 0.25),
    inset 0 0 70px rgba(255,255,255,.04);
  animation: astrologyWheelFloat 7s ease-in-out infinite;
}

.astro-wheel-placeholder::before {
  content: "";
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 127, 219, 0.24);
}

.astro-wheel-placeholder::after {
  content: "";
  position: absolute;
  inset: 97px;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 108, 0.25);
}

.astro-wheel-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 16%, #ffd166 45%, rgba(255, 184, 108, 0.25) 70%, transparent);
  box-shadow: 0 0 42px #ffb86c, 0 0 90px rgba(227,86,184,.45);
}

.astro-wheel-signs {
  position: absolute;
  inset: 0;
  animation: astrologySpin 60s linear infinite;
}

.astro-wheel-signs span {
  position: absolute;
  color: #ff9ee2;
  font-size: 25px;
  text-shadow: 0 0 20px rgba(255, 100, 215, 0.75);
}

.astro-wheel-signs span:nth-child(1) { left: 31%; top: 10%; }
.astro-wheel-signs span:nth-child(2) { left: 55%; top: 11%; }
.astro-wheel-signs span:nth-child(3) { right: 11%; top: 30%; }
.astro-wheel-signs span:nth-child(4) { right: 20%; bottom: 25%; }
.astro-wheel-signs span:nth-child(5) { left: 50%; bottom: 9%; }
.astro-wheel-signs span:nth-child(6) { left: 20%; bottom: 25%; }
.astro-wheel-signs span:nth-child(7) { left: 10%; top: 39%; }
.astro-wheel-signs span:nth-child(8) { left: 22%; top: 20%; }

.planet {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  box-shadow: inset -8px -10px 18px rgba(0,0,0,.32), 0 0 32px rgba(255, 148, 216, .2);
}

.planet-one {
  width: 45px;
  height: 45px;
  left: -28px;
  top: 31%;
  background: linear-gradient(135deg, #e1b499, #49355d);
}

.planet-two {
  width: 34px;
  height: 34px;
  right: -21px;
  top: 7%;
  background: linear-gradient(135deg, #ff9c8e, #532257);
}

.planet-three {
  width: 38px;
  height: 38px;
  right: -11px;
  top: 54%;
  background: linear-gradient(135deg, #f6a073, #32255e);
}

.astrology-panel {
  border-radius: 14px;
  border: 1px solid rgba(255, 160, 224, 0.14);
  background:
    linear-gradient(135deg, rgba(26, 20, 53, 0.70), rgba(7, 11, 30, 0.82));
  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    inset 0 0 28px rgba(255,255,255,.022);
}

.astrology-section-label {
  margin: 0;
  color: #ff75d2;
  text-transform: uppercase;
  letter-spacing: 3.1px;
  font-size: 12px;
  font-weight: 900;
}

.cosmic-weather {
  margin: 0 0 18px;
  padding: 25px 30px;
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 34px;
}

.weather-content {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 34px;
  margin-top: 14px;
}

.energy-big-ring {
  width: 175px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  background: conic-gradient(#ffb86c 0 30%, #e356b8 30% 72%, #873be4 72% 82%, rgba(255,255,255,.1) 82% 100%);
  box-shadow: 0 0 42px rgba(227, 86, 184, .28);
}

.energy-big-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #0b1026;
}

.energy-big-ring span,
.energy-big-ring strong,
.energy-big-ring em {
  position: relative;
  z-index: 1;
}

.energy-big-ring span {
  align-self: end;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.energy-big-ring strong {
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 60px;
  line-height: 0.8;
  font-weight: 400;
}

.energy-big-ring small {
  font-family: Inter, sans-serif;
  font-size: 21px;
}

.energy-big-ring em {
  align-self: start;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-style: normal;
}

.today-advice h3 {
  margin: 0 0 9px;
  color: rgba(255,255,255,.87);
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.today-advice ul {
  list-style: none;
  margin: 0 0 13px;
  padding: 0;
}

.today-advice li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 26px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

.today-advice li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.positive-list li::before {
  content: "✓";
  color: #9beb7d;
  border: 1px solid #9beb7d;
}

.avoid-list li::before {
  content: "×";
  color: #ff606f;
  border: 1px solid #ff606f;
}

.today-vibe {
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8, 12, 31, .58);
  padding: 20px 22px;
}

.today-vibe h3 {
  margin: 0;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.sun-vibe {
  margin: 8px 0;
  text-align: center;
  color: #ffbb64;
  font-size: 42px;
  text-shadow: 0 0 22px rgba(255, 187, 100, .45);
}

.today-vibe p {
  margin: 0 0 22px;
  text-align: center;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

.today-vibe p span {
  color: #ff88d7;
  padding: 0 4px;
}

.vibe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.vibe-row strong {
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-weight: 500;
}

.vibe-row span {
  color: rgba(255,255,255,.78);
}

.amethyst-dot {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  background: linear-gradient(135deg, #ea4ee8, #7d55ff);
  vertical-align: -2px;
}

.astrology-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.astrology-grid-main {
  grid-template-columns: 1.28fr 1fr .95fr;
}

.astrology-grid-secondary {
  grid-template-columns: 1fr 1.08fr;
}

.astrology-grid-bottom {
  grid-template-columns: .95fr .82fr 1.3fr;
}

.astrology-grid .astrology-panel {
  padding: 21px 22px;
}

.panel-heading,
.month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-heading a {
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.planet-list {
  margin-top: 13px;
}

.planet-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.planet-row:last-child {
  border-bottom: 0;
}

.planet-thumb {
  width: 36px;
  height: 36px;
  display: inline-block;
  border-radius: 50%;
  box-shadow:
    inset -8px -9px 16px rgba(0,0,0,.35),
    0 0 18px rgba(255,255,255,.1);
}

.moon-thumb {
  background:
    radial-gradient(circle at 34% 32%, #fff, #cac5cb 18%, #575365 45%, #161a2a 78%);
}

.sun-thumb {
  background:
    radial-gradient(circle at 36% 33%, #fff7c3, #ffb64c 25%, #ff6b2b 58%, #472048 100%);
}

.venus-thumb {
  background:
    radial-gradient(circle at 32% 30%, #ffd1bd, #c86456 32%, #6e283f 72%, #21132e 100%);
}

.mars-thumb {
  background:
    radial-gradient(circle at 30% 28%, #ffb195, #bd4e38 38%, #5b1b22 72%, #1d1326 100%);
}

.mercury-thumb {
  background:
    radial-gradient(circle at 33% 30%, #fff1db, #a69a86 32%, #555564 66%, #181b2c 100%);
}

.jupiter-thumb {
  background:
    radial-gradient(circle at 35% 28%, #ebf7c7, #9aa86c 30%, #505944 64%, #171b26 100%);
}

.saturn-thumb {
  background:
    radial-gradient(circle at 35% 30%, #d5c3a8, #89715d 34%, #45384a 68%, #161827 100%);
}

.planet-row strong,
.active-planet-row strong,
.timeline-list strong,
.month-event strong,
.alert-row strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.planet-row small,
.active-planet-row small,
.timeline-list small,
.month-event small {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  margin-top: 2px;
}

.planet-row p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.38;
}

.planet-row em {
  color: #99ee74;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.planet-row em.moderate {
  color: #ffbf61;
}

.planet-row em.low {
  color: #ff6674;
}

.active-planet-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 12px 0;
}

.active-planet-row i {
  display: block;
  height: 3px;
  margin-top: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}

.active-planet-row i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9ce777, #6ee4b3);
  border-radius: inherit;
}

.active-planet-row i.negative b {
  background: linear-gradient(90deg, #ff5b74, #ff8b91);
}

.active-planet-row em {
  color: #9beb7d;
  font-style: normal;
}

.active-planet-row .negative-text {
  color: #ff6674;
}

.panel-button {
  height: 43px;
  margin-top: 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(5,8,22,.52);
  color: rgba(255,255,255,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .22s ease;
}

.panel-button:hover {
  border-color: rgba(255, 99, 206, .42);
  box-shadow: 0 0 26px rgba(227,86,184,.13);
  transform: translateY(-2px);
}

.timeline-list {
  position: relative;
  margin-top: 16px;
  padding-left: 13px;
}

.timeline-list::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 99, 206, .7), transparent);
}

.timeline-list article {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 17px 0;
}

.timeline-list article > span {
  position: relative;
  z-index: 2;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff6fcd;
  border: 1px solid rgba(255, 111, 205, .32);
  background: #0b1026;
  font-size: 24px;
}

.timeline-list article.active {
  margin-left: -5px;
  padding: 18px 14px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 99, 206, .24), transparent 42%),
    rgba(227, 86, 184, .14);
  border: 1px solid rgba(255, 99, 206, .16);
}

.timeline-list p,
.month-event p,
.alert-row p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.birth-chart-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  margin-top: 20px;
  align-items: center;
}

.birth-chart-wheel {
  position: relative;
  width: 205px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.09) 0 1px, transparent 1px 27px),
    repeating-conic-gradient(rgba(255, 93, 208, .16) 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle at center, rgba(255,93,208,.08), transparent 65%),
    var(--birth-chart-image);
  background-size: cover;
  border: 1px solid rgba(255, 99, 206, .18);
}

.birth-chart-wheel span {
  position: absolute;
  color: #ffc06f;
  font-size: 20px;
  text-shadow: 0 0 15px rgba(255,192,111,.5);
}

.birth-chart-wheel span:nth-child(1) { top: 12%; left: 43%; }
.birth-chart-wheel span:nth-child(2) { top: 17%; right: 20%; }
.birth-chart-wheel span:nth-child(3) { right: 10%; top: 45%; }
.birth-chart-wheel span:nth-child(4) { right: 26%; bottom: 12%; }
.birth-chart-wheel span:nth-child(5) { left: 44%; bottom: 9%; }
.birth-chart-wheel span:nth-child(6) { left: 14%; top: 43%; }

.birth-chart-wheel svg {
  position: absolute;
  inset: 32px;
  fill: rgba(255, 99, 206, .06);
  stroke: rgba(255, 99, 206, .75);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 10px rgba(255, 99, 206, .45));
}

.birth-chart-details h3 {
  margin: 0 0 16px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  font-weight: 500;
}

.birth-chart-details div {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.birth-chart-details span {
  color: #ffbd66;
  font-size: 19px;
}

.birth-chart-details strong {
  font-weight: 500;
}

.birth-chart-details em {
  font-style: normal;
}

.change-comparison {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 14px;
  margin-top: 19px;
  align-items: center;
}

.change-comparison article {
  min-height: 145px;
  padding: 17px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,31,.48);
}

.change-comparison small {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.62);
}

.change-comparison strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.change-icons {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 13px 0;
}

.change-icons b {
  color: #ff646f;
  font-weight: 400;
}

.change-arrow {
  color: #ff64ce;
  font-size: 34px;
  text-align: center;
}

.change-comparison p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.good-news {
  margin-top: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(5,8,22,.42);
  border: 1px solid rgba(255,255,255,.075);
}

.good-news strong {
  color: #caff73;
  font-size: 12px;
}

.good-news span {
  color: rgba(255,255,255,.73);
  font-size: 12px;
}

.good-news ul {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.good-news li {
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.good-news li::before {
  content: "⊙";
  color: #ffd36b;
  margin-right: 6px;
}

.hours-list {
  margin-top: 18px;
}

.hours-list div {
  display: grid;
  grid-template-columns: 106px 90px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.hours-list div:last-child {
  border-bottom: 0;
}

.hours-list span {
  color: #ffd35d;
  letter-spacing: 2px;
  font-size: 12px;
}

.hours-list em {
  color: rgba(255,255,255,.62);
  font-style: normal;
}

.alert-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.alert-row:last-of-type {
  border-bottom: 0;
}

.alert-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
}

.pink-alert {
  background: radial-gradient(circle, rgba(255, 98, 203, .52), rgba(255, 98, 203, .14));
  color: #ff80d3;
}

.blue-alert {
  background: radial-gradient(circle, rgba(82, 223, 220, .45), rgba(82, 223, 220, .12));
  color: #84f1ec;
}

.month-heading {
  margin-bottom: 12px;
}

.month-heading div {
  display: flex;
  align-items: center;
  gap: 18px;
}

.month-heading button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  cursor: pointer;
}

.month-heading strong {
  color: rgba(255,255,255,.82);
  font-size: 12px;
  letter-spacing: 1px;
}

.month-event {
  display: grid;
  grid-template-columns: 36px 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.month-event:last-of-type {
  border-bottom: 0;
}

.month-event small {
  color: rgba(255,255,255,.74);
}

/* Effects */

@keyframes astrologyWheelFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.018);
  }
}

@keyframes astrologySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .astrology-hero {
    grid-template-columns: minmax(350px, .86fr) minmax(390px, 1fr);
  }

  .astrology-feature-tabs {
    grid-template-columns: repeat(4, 102px);
    gap: 18px;
  }

  .astrology-grid-main {
    grid-template-columns: 1.2fr 1fr;
  }

  .planetary-timeline {
    grid-column: 1 / -1;
  }

  .astrology-grid-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .monthly-overview-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .astrology-hero {
    grid-template-columns: 1fr;
    padding: 26px 24px 26px;
  }

  .astrology-hero-wheel {
    min-height: 250px;
  }

  .astro-wheel-placeholder {
    width: min(360px, 78vw);
  }

  .cosmic-weather,
  .astrology-grid-main,
  .astrology-grid-secondary,
  .astrology-grid-bottom {
    grid-template-columns: 1fr;
  }

  .birth-chart-inner,
  .weather-content {
    grid-template-columns: 1fr;
  }

  .energy-big-ring {
    margin: auto;
  }

}

@media (max-width: 820px) {
  .astrology-hero {
    padding-top: 34px;
  }

  .astrology-hero h1 {
    font-size: 48px;
  }

  .astrology-feature-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .cosmic-weather {
    padding: 20px;
  }

  .today-vibe {
    padding: 18px;
  }

  .change-comparison {
    grid-template-columns: 1fr;
  }

  .change-arrow {
    transform: rotate(90deg);
  }

  .good-news {
    grid-template-columns: 1fr;
  }

  .good-news ul {
    grid-column: auto;
    gap: 10px;
  }

  .hours-list div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .month-event {
    grid-template-columns: 36px 1fr;
  }

  .month-event small {
    grid-column: 2;
    grid-row: 1;
  }

  .month-event div {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .astrology-hero h1 {
    font-size: 39px;
  }

  .astrology-section-label {
    font-size: 10px;
    letter-spacing: 2.2px;
  }

  .astrology-feature-tabs {
    gap: 14px;
  }

  .planet-row,
  .active-planet-row {
    grid-template-columns: 36px 1fr;
  }

  .planet-row em,
  .active-planet-row em {
    grid-column: 2;
  }

  .birth-chart-wheel {
    width: 180px;
    margin: auto;
  }

  .birth-chart-details div {
    grid-template-columns: 24px 1fr;
  }

  .birth-chart-details em {
    grid-column: 2;
  }

  .astrology-grid .astrology-panel {
    padding: 18px;
  }
}

.month-card-pulse {
  animation: monthPulse .35s ease both;
}

@keyframes monthPulse {
  from {
    transform: translateY(4px) scale(.995);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* =========================================================
   ASTROVIA — TAROT PAGE
   Additions for tarot.html
========================================================= */

.tarot-page {
  --tarot-hero-image: url("assets/tarot-hero.jpg");
  --tarot-card-back-image: url("assets/tarot-card-back.jpg");
  --tarot-card-star-image: url("assets/tarot-card-star.jpg");
  --tarot-shuffle-image: url("assets/tarot-shuffle-deck.jpg");
}

.tarot-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.tarot-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 48px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, 0.85);
}

.tarot-hero {
  min-height: 214px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 18px 30px 28px;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.86) 39%, rgba(5,8,22,.34) 65%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 73% 45%, rgba(255, 152, 91, .25), transparent 18%),
    radial-gradient(circle at 74% 42%, rgba(227, 86, 184, .2), transparent 38%),
    var(--tarot-hero-image);
  background-size: cover;
  background-position: center right;
}

.tarot-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.tarot-hero-content {
  position: relative;
  z-index: 2;
}

.tarot-hero h1 {
  margin: 18px 0 15px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.2vw, 59px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.tarot-hero p {
  width: 445px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.72;
}

.tarot-guidance-strip {
  min-height: 112px;
  margin: 0 0 18px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 95px 1fr 355px;
  align-items: center;
  padding: 18px 28px;
  background:
    linear-gradient(135deg, rgba(53, 24, 66, .84), rgba(9, 13, 32, .78));
  border: 1px solid rgba(255, 111, 207, .17);
}

.guidance-emblem {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff8ed7;
  border: 1px solid rgba(255, 111, 207, .34);
  background:
    repeating-conic-gradient(rgba(255, 111, 207, .26) 0 1deg, transparent 1deg 30deg),
    rgba(255,255,255,.025);
  font-size: 36px;
  text-shadow: 0 0 18px rgba(255, 111, 207, .55);
}

.tarot-guidance-strip h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.tarot-guidance-strip p {
  max-width: 530px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.55;
}

.best-today {
  padding-left: 35px;
  border-left: 1px solid rgba(255,255,255,.08);
}

.best-today span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.best-today strong {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.best-today i {
  color: #ff5fc9;
  font-style: normal;
  font-size: 25px;
}

.best-today em {
  display: inline-flex;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255, 184, 108, .18);
  color: #ffc071;
  font-size: 11px;
  font-style: normal;
}

.tarot-step {
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: 13px;
  border: 1px solid rgba(255, 160, 224, 0.13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

/* =========================================================
   TAROT — guided-flow gate + step locking/spotlight
========================================================= */

.tarot-gate {
  margin-bottom: 18px;
  padding: 46px 24px;
  border-radius: 13px;
  text-align: center;
  border: 1px solid rgba(255, 111, 207, .28);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 111, 207, .16), transparent 55%),
    linear-gradient(135deg, rgba(22, 17, 43, .9), rgba(8, 12, 31, .92));
  box-shadow: 0 20px 60px rgba(0,0,0,.32), 0 0 60px rgba(255,111,207,.08);
  transition: opacity .4s ease, transform .4s ease, margin .4s ease, padding .4s ease;
}

.tarot-gate.dismissed {
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.tarot-gate-orb {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 111, 207, .45);
  background: radial-gradient(circle, rgba(255,111,207,.22), rgba(255,255,255,.03) 55%, transparent 60%);
  box-shadow: 0 0 30px rgba(255,111,207,.28);
  font-size: 26px;
  color: #ff90db;
  animation: tarotGatePulse 2.4s ease-in-out infinite;
}

.tarot-gate h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}

.tarot-gate p {
  max-width: 460px;
  margin: 0 auto 26px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.6;
}

.tarot-gate-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6fcf, #bd42df);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  cursor: pointer;
  animation:
    tarotGateButtonPulse 2.4s ease-in-out infinite,
    tarotHeartbeat 1.8s ease-in-out infinite;
}

@keyframes tarotGatePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes tarotGateButtonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,111,207,.45); }
  50% { box-shadow: 0 0 0 14px rgba(255,111,207,0); }
}

.tarot-step.step-locked {
  opacity: .38;
  pointer-events: none;
  filter: saturate(.6);
  transition: opacity .4s ease, filter .4s ease;
}

.tarot-step.step-active {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 111, 207, .22), transparent 55%),
    linear-gradient(135deg, rgba(58, 40, 92, .78), rgba(35, 24, 66, .82));
  border-color: rgba(255, 111, 207, .55);
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    0 0 55px rgba(255, 111, 207, .18),
    inset 0 0 30px rgba(255,255,255,.03);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}

.tarot-step.step-active .step-heading > span {
  color: #fff;
  border-color: rgba(255, 111, 207, .9);
  background: linear-gradient(135deg, #ff6fcf, #bd42df);
  box-shadow: 0 0 18px rgba(255,111,207,.55);
}

/* Step 4 wraps two separate panels (draw-cards-panel + first-card-panel)
   rather than a single .tarot-step, so lock/spotlight both together. */
#stepDraw.step-locked .draw-cards-panel,
#stepDraw.step-locked .first-card-panel {
  opacity: .38;
  pointer-events: none;
  filter: saturate(.6);
  transition: opacity .4s ease, filter .4s ease;
}

#stepDraw.step-active .draw-cards-panel,
#stepDraw.step-active .first-card-panel {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 111, 207, .22), transparent 55%),
    linear-gradient(135deg, rgba(58, 40, 92, .78), rgba(35, 24, 66, .82));
  border-color: rgba(255, 111, 207, .55);
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    0 0 55px rgba(255, 111, 207, .18);
  transition: background .5s ease, border-color .5s ease;
}

#stepDraw.step-active .draw-cards-panel .step-heading > span {
  color: #fff;
  border-color: rgba(255, 111, 207, .9);
  background: linear-gradient(135deg, #ff6fcf, #bd42df);
  box-shadow: 0 0 18px rgba(255,111,207,.55);
}

/* Heartbeat "lub-dub" pump on whatever the guided flow wants clicked next -
   the shuffle button while step 3 is active, each undrawn card while step 4
   is active. Stops on its own once the class is gone (shuffled / revealed). */
@keyframes tarotHeartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.07); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
  62% { transform: scale(1); }
}

#stepShuffle.step-active .shuffle-button {
  animation: tarotHeartbeat 1.8s ease-in-out infinite;
}

#stepDraw.step-active .draw-card:not(.revealed) {
  animation: tarotHeartbeat 1.8s ease-in-out infinite;
}

/* =========================================================
   CONTENT GATE — login-required blur + register/login overlay.
   Reused across every gated tool page (horoscope, astrology,
   numerology, moon-calendar, guidance, compatibility, tarot,
   dreams-cat, palm-reading). Rendered by includes/gate.php's
   astrovia_gate_start()/astrovia_gate_end() - a no-op for logged-in
   users, so this CSS only ever matters for guests.
========================================================= */

.content-gate {
  position: relative;
}

.content-gate.gated .content-gate-inner {
  position: relative;
  filter: blur(7px) brightness(.65) saturate(.7);
  pointer-events: none;
  user-select: none;
}

.gate-overlay {
  position: sticky;
  top: 120px;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
}

.gate-card {
  width: min(440px, 100%);
  padding: 44px 36px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(255, 111, 207, .32);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 111, 207, .18), transparent 55%),
    linear-gradient(135deg, rgba(22, 17, 43, .96), rgba(8, 12, 31, .97));
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(255,111,207,.14);
}

.gate-orb {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 111, 207, .45);
  background: radial-gradient(circle, rgba(255,111,207,.22), rgba(255,255,255,.03) 55%, transparent 60%);
  box-shadow: 0 0 30px rgba(255,111,207,.28);
  font-size: 24px;
  color: #ff90db;
}

.gate-card h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.gate-card p {
  max-width: 340px;
  margin: 0 auto 26px;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  line-height: 1.6;
}

.gate-actions {
  display: grid;
  gap: 12px;
}

.gate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6fcf, #bd42df);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
}

.gate-login-link {
  margin: 18px 0 0;
  color: rgba(255,255,255,.6);
  font-size: 12.5px;
}

.gate-login-link a {
  color: #ff8ed8;
}

.content-gate.gate-compact .gate-overlay {
  top: 90px;
}

.content-gate.gate-compact .gate-card {
  padding: 30px 26px;
}

.content-gate.gate-compact .gate-orb {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  font-size: 19px;
}

.content-gate.gate-compact .gate-card h2 {
  font-size: 18px;
}

.content-gate.gate-compact .gate-card p {
  margin-bottom: 20px;
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .gate-overlay {
    top: 90px;
  }

  .gate-card {
    padding: 32px 24px;
  }
}

.step-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.step-heading > span {
  width: 29px;
  height: 29px;
  min-width: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff76d0;
  border: 1px solid rgba(255, 111, 207, .36);
  background: rgba(255, 111, 207, .08);
  font-size: 14px;
}

.step-heading h2 {
  margin: 0 0 5px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}

.step-heading p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

.topic-card {
  min-height: 154px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(25, 19, 47, .7), rgba(8, 12, 31, .82));
  color: #fff;
  padding: 20px 13px;
  text-align: center;
  cursor: pointer;
  transition: .24s ease;
}

.topic-card span {
  display: block;
  height: 44px;
  margin-bottom: 12px;
  color: #ff68cf;
  font-size: 39px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 104, 207, .58);
}

.topic-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: Cinzel, Georgia, serif;
  font-size: 15px;
  font-weight: 400;
}

.topic-card small {
  display: block;
  color: rgba(255,255,255,.68);
  line-height: 1.45;
  font-size: 11px;
}

.topic-card:hover,
.topic-card.active {
  border-color: rgba(255, 77, 202, .9);
  box-shadow:
    0 0 0 1px rgba(255, 77, 202, .18),
    0 18px 36px rgba(227,86,184,.16);
  transform: translateY(-3px);
}

.spread-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.spread-card {
  min-height: 235px;
  position: relative;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(26, 20, 49, .68), rgba(8, 12, 31, .82));
  color: #fff;
  text-align: center;
  padding: 24px 18px 20px;
  cursor: pointer;
  transition: .24s ease;
}

.spread-card.active,
.spread-card:hover {
  border-color: rgba(255, 77, 202, .92);
  box-shadow:
    0 0 0 1px rgba(255, 77, 202, .16),
    0 18px 36px rgba(227,86,184,.13);
  transform: translateY(-3px);
}

.spread-card.locked {
  opacity: .55;
  filter: saturate(.55);
}

.spread-card.locked:hover {
  border-color: rgba(255,255,255,.105);
  box-shadow: none;
  transform: none;
}

.spread-card em,
.spread-card b {
  position: absolute;
  top: 12px;
  font-style: normal;
  font-size: 10px;
  border-radius: 4px;
  padding: 4px 8px;
}

.spread-card em {
  left: 12px;
  background: linear-gradient(135deg, #ff64c8, #9d48de);
  color: #fff;
}

.spread-card b {
  right: 12px;
  background: rgba(255, 184, 108, .16);
  color: #ffc071;
  font-weight: 700;
}

.mini-card-stack {
  height: 92px;
  margin: 4px auto 18px;
  position: relative;
  width: 120px;
}

.mini-card-stack i,
.draw-card i,
.summary-card-img {
  display: block;
  width: 42px;
  height: 67px;
  border-radius: 5px;
  border: 1px solid rgba(255, 145, 108, .62);
  background:
    radial-gradient(circle at center, rgba(255, 184, 108, .16), transparent 34%),
    repeating-conic-gradient(rgba(255, 184, 108, .17) 0 1deg, transparent 1deg 45deg),
    linear-gradient(145deg, #1b1431, #090d22),
    var(--tarot-card-back-image);
  background-size: cover;
  box-shadow: 0 0 18px rgba(255, 111, 207, .18);
}

.mini-card-stack.single i {
  margin: 12px auto 0;
}

.mini-card-stack.three i {
  position: absolute;
  top: 14px;
}

.mini-card-stack.three i:nth-child(1) { left: 8px; }
.mini-card-stack.three i:nth-child(2) { left: 39px; }
.mini-card-stack.three i:nth-child(3) { left: 70px; }

.mini-card-stack.cross,
.mini-card-stack.celtic {
  height: 138px;
}

.mini-card-stack.cross i,
.mini-card-stack.celtic i {
  position: absolute;
  width: 31px;
  height: 48px;
}

.mini-card-stack.cross i:nth-child(1),
.mini-card-stack.celtic i:nth-child(1) { left: 44px; top: 0; }

.mini-card-stack.cross i:nth-child(2),
.mini-card-stack.celtic i:nth-child(2) { left: 44px; top: 44px; }

.mini-card-stack.cross i:nth-child(3),
.mini-card-stack.celtic i:nth-child(3) { left: 10px; top: 32px; }

.mini-card-stack.cross i:nth-child(4),
.mini-card-stack.celtic i:nth-child(4) { right: 10px; top: 32px; }

.mini-card-stack.cross i:nth-child(5),
.mini-card-stack.celtic i:nth-child(5) { left: 44px; top: 82px; }

.spread-card strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.spread-card span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}

.spread-card p {
  margin: 0 auto;
  max-width: 190px;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.45;
}

.spread-note {
  display: flex;
  gap: 9px;
  margin: 17px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 11px;
}

.spread-note a {
  color: #ff8ed8;
}

.shuffle-step {
  display: grid;
  grid-template-columns: 1fr 1.1fr 250px;
  align-items: center;
  gap: 28px;
  min-height: 230px;
}

.shuffle-button {
  width: 285px;
  max-width: 100%;
  height: 52px;
  margin: 8px 0 14px 24px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #e65bac, #bd42df);
  box-shadow: 0 14px 32px rgba(227,86,184,.25);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: .24s ease;
}

.shuffle-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(227,86,184,.34);
}

.shuffle-button span {
  margin-right: 12px;
}

.focus-copy,
.energy-copy {
  margin: 0 0 0 24px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.energy-copy {
  margin-top: 20px;
  color: rgba(255,255,255,.55);
}

.energy-copy span {
  color: #ffc071;
  margin-right: 8px;
}

.shuffle-deck-placeholder {
  height: 210px;
  position: relative;
  display: grid;
  place-items: center;
}

.large-card {
  position: absolute;
  width: 120px;
  height: 178px;
  border-radius: 10px;
  border: 1px solid rgba(255, 145, 108, .58);
  background:
    radial-gradient(circle at center, rgba(255, 184, 108, .18), transparent 36%),
    repeating-conic-gradient(rgba(255, 184, 108, .15) 0 1deg, transparent 1deg 45deg),
    linear-gradient(145deg, #1b1431, #090d22),
    var(--tarot-card-back-image);
  background-size: cover;
  box-shadow: 0 0 28px rgba(255, 111, 207, .22);
}

.card-one { transform: rotate(-24deg) translateX(-70px); }
.card-two { transform: rotate(-10deg) translateX(-24px); }
.card-three { transform: rotate(8deg) translateX(28px); }
.card-four { transform: rotate(20deg) translateX(75px); }

.deck-glow {
  position: absolute;
  width: 320px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 111, 207, .22), transparent 62%),
    repeating-conic-gradient(rgba(255, 184, 108, .12) 0 1deg, transparent 1deg 14deg);
  filter: blur(.2px);
  z-index: -1;
}

.shuffle-tips {
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.095);
  background: rgba(8,12,31,.48);
}

.shuffle-tips h3 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.shuffle-tips ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shuffle-tips li {
  margin-bottom: 12px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.shuffle-tips li::before {
  content: "✧";
  margin-right: 9px;
  color: #ff6fce;
}

.draw-reading-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  margin-bottom: 18px;
  align-items: start;
}

.draw-cards-panel {
  margin-bottom: 0;
}

.draw-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  padding: 10px 8px 0;
}

.draw-card {
  position: relative;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.draw-card i {
  width: 82px;
  height: 128px;
  margin: 0 auto 16px;
  border-radius: 7px;
  transition: .24s ease;
}

.draw-card:hover i {
  transform: translateY(-7px);
  box-shadow: 0 0 30px rgba(255, 111, 207, .34);
}

.draw-card span {
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #121631;
  border: 1px solid #ff5fc9;
  color: #ff82d8;
}

.draw-card.revealed i {
  opacity: .5;
}

.draw-card.revealed:hover i {
  transform: none;
  box-shadow: 0 0 18px rgba(255, 184, 108, .32);
}

.draw-card.revealed span {
  background: linear-gradient(135deg, #ffb86c, #e65bac);
  border-color: transparent;
  color: #1a0f24;
  font-weight: 900;
}

.draw-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: Cinzel, Georgia, serif;
  font-size: 14px;
  font-weight: 400;
}

.draw-card small {
  display: block;
  max-width: 126px;
  margin: 0 auto;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.45;
}

.first-card-panel {
  min-height: 290px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  padding: 22px;
  border-radius: 13px;
  border: 1px solid rgba(255, 160, 224, 0.13);
  position: sticky;
  top: 20px;
}

.revealed-card-placeholder {
  display: grid;
  place-items: center;
}

.tarot-card-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 145, 108, .4);
  box-shadow: 0 0 28px rgba(255, 111, 207, .22);
}

.tarot-card-image.reversed {
  transform: rotate(180deg);
}

.tarot-card-front {
  width: 136px;
  height: 218px;
  border-radius: 8px;
  border: 1px solid rgba(255, 145, 108, .7);
  padding: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 155, .92) 0 5px, transparent 18px),
    linear-gradient(180deg, rgba(16, 23, 52, .85), rgba(18, 15, 42, .96)),
    var(--tarot-card-star-image);
  background-size: cover;
  box-shadow: 0 0 28px rgba(255, 111, 207, .2);
}

.tarot-star {
  color: #ffe29b;
  font-size: 54px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 226, 155, .75);
}

.tarot-figure {
  width: 72px;
  height: 88px;
  margin: 19px auto 14px;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 50% 20%, #ffd4b8 0 10px, transparent 11px),
    linear-gradient(180deg, rgba(255, 183, 120, .75), rgba(103, 67, 108, .72));
  opacity: .85;
}

.tarot-card-front strong {
  display: block;
  color: #ffc071;
  font-family: Cinzel, Georgia, serif;
  font-size: 12px;
}

.first-card-copy span {
  color: #ff67ce;
  font-size: 12px;
}

.first-card-copy h2 {
  margin: 7px 0 4px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.first-card-copy h3 {
  margin: 0 0 17px;
  color: #ff67ce;
  font-size: 13px;
  font-weight: 500;
}

.first-card-copy p {
  margin: 0 0 14px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.55;
}

.first-card-copy h4 {
  margin: 0 0 9px;
  color: #fff;
  font-size: 13px;
}

.first-card-copy ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.first-card-copy li {
  margin-bottom: 6px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.first-card-copy li::before {
  content: "♡";
  margin-right: 8px;
  color: #ff67ce;
}

.interpretation-button {
  height: 34px;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 7px;
  border: 1px solid rgba(255, 99, 206, .32);
  color: #ff8ed8;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
}

.reading-summary {
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 12% -10%, rgba(255, 189, 102, .2), transparent 42%),
    radial-gradient(circle at 88% 110%, rgba(255, 111, 207, .18), transparent 45%),
    linear-gradient(135deg, rgba(32, 24, 60, .92), rgba(14, 18, 40, .95));
  border: 1px solid rgba(255, 189, 102, .3);
  box-shadow:
    0 25px 70px rgba(0,0,0,.35),
    0 0 65px rgba(255, 141, 208, .1),
    inset 0 0 40px rgba(255,255,255,.03);
}

/* Reading reveal - a little ceremony for the moment the cards finish
   speaking, instead of the section just instantly appearing. */
@keyframes summaryRevealIn {
  0% { opacity: 0; transform: translateY(26px) scale(.97); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes summaryGlowPulse {
  0%, 100% { box-shadow: 0 25px 70px rgba(0,0,0,.35), 0 0 65px rgba(255, 141, 208, .1), inset 0 0 40px rgba(255,255,255,.03); }
  40% { box-shadow: 0 25px 70px rgba(0,0,0,.35), 0 0 120px rgba(255, 189, 102, .55), inset 0 0 60px rgba(255,255,255,.08); }
}

.reading-summary.summary-revealed {
  animation:
    summaryRevealIn .7s cubic-bezier(.22, 1, .36, 1) both,
    summaryGlowPulse 1.8s ease-out .05s both;
}

@keyframes summaryHeadingBurst {
  0% { transform: scale(.5); opacity: 0; box-shadow: 0 0 0 0 rgba(255,189,102,.6); }
  50% { opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; box-shadow: 0 0 0 0 rgba(255,189,102,0); }
}

.reading-summary .step-heading > span {
  position: relative;
}

.reading-summary.summary-revealed .step-heading > span::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 189, 102, .75);
  animation: summaryHeadingBurst .9s ease-out .1s both;
  pointer-events: none;
}

@keyframes summaryIconGlow {
  0% { text-shadow: 0 0 8px rgba(255,189,102,.25); transform: scale(.6); opacity: .3; }
  55% { text-shadow: 0 0 42px rgba(255,189,102,1); transform: scale(1.18); opacity: 1; }
  100% { text-shadow: 0 0 26px rgba(255,189,102,.65); transform: scale(1); opacity: 1; }
}

.reading-summary.summary-revealed .overall-message > span {
  animation: summaryIconGlow 1.4s ease-out .35s both;
}

@keyframes summaryCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.reading-summary.summary-revealed .summary-cards article {
  animation: summaryCardIn .5s ease both;
  animation-delay: calc(var(--card-i, 0) * 90ms + .15s);
}

.summary-layout {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 250px;
  gap: 24px;
  align-items: stretch;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(8,12,31,.4);
}

.summary-cards article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px;
  margin: -6px;
  transition: background .2s ease, transform .2s ease;
}

.summary-cards article:hover {
  background: rgba(255, 255, 255, .04);
  transform: translateY(-2px);
}

.summary-card-img {
  width: 46px;
  height: 69px;
}

.summary-cards span {
  display: block;
  color: #ff7fd6;
  font-size: 12px;
  font-weight: 600;
}

.summary-cards strong {
  display: block;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 16px;
  font-weight: 400;
}

.summary-cards p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.overall-message {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 189, 102, .32);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 189, 102, .16), transparent 55%),
    linear-gradient(160deg, rgba(255, 184, 108, .1), rgba(8, 12, 31, .3));
  box-shadow: 0 0 40px rgba(255, 189, 102, .1);
}

.overall-message > span {
  color: #ffbd66;
  font-size: 56px;
  line-height: 1;
  text-shadow: 0 0 26px rgba(255,189,102,.65);
}

.overall-message h3 {
  margin: 0 0 12px;
  color: #ffc987;
  font-size: 19px;
  letter-spacing: .3px;
  text-shadow: 0 0 18px rgba(255,189,102,.3);
}

.overall-message h4 {
  margin: 16px 0 7px;
  color: #fff;
  font-size: 16px;
}

.overall-message p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.65;
}

.save-reading-card {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.095);
  background: rgba(8,12,31,.48);
}

.save-reading-card h3 {
  margin: 0 0 9px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.save-reading-card p,
.save-reading-card small {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.save-reading-button {
  height: 32px;
  margin: 11px 0 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #e65bac, #bd42df);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.save-reading-card small a {
  color: #ff80d5;
}

/* Tarot effects */

.tarot-selected-pulse {
  animation: tarotPulse .34s ease both;
}

.shuffle-active .large-card {
  animation: tarotShuffle 1.5s ease both;
}

.shuffle-active .card-two {
  animation-delay: .08s;
}

.shuffle-active .card-three {
  animation-delay: .16s;
}

.shuffle-active .card-four {
  animation-delay: .24s;
}

.shuffle-active .deck-glow {
  animation: tarotDeckGlow 1.5s ease both;
}

@keyframes tarotPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes tarotShuffle {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 28px rgba(255, 111, 207, .22);
  }

  30% {
    transform: rotate(0deg) translateX(0) translateY(-24px) scale(1.05);
    filter: brightness(2.2) saturate(1.5);
    box-shadow: 0 0 75px rgba(255, 111, 207, .95), 0 0 140px rgba(255, 184, 108, .7);
  }

  60% {
    transform: rotate(0deg) translateX(0) translateY(-24px) scale(1.05);
    filter: brightness(2.2) saturate(1.5);
    box-shadow: 0 0 75px rgba(255, 111, 207, .95), 0 0 140px rgba(255, 184, 108, .7);
  }

  100% {
    filter: brightness(1);
    box-shadow: 0 0 28px rgba(255, 111, 207, .22);
  }
}

@keyframes tarotDeckGlow {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  30%, 60% {
    transform: scale(1.55);
    filter: brightness(2.2);
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .topic-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .spread-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shuffle-step {
    grid-template-columns: 1fr 1fr;
  }

  .shuffle-tips {
    grid-column: 1 / -1;
  }

  .summary-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .tarot-guidance-strip,
  .draw-reading-grid {
    grid-template-columns: 1fr;
  }

  .best-today {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
  }

  .first-card-panel {
    grid-template-columns: 1fr;
    position: static;
  }

  .revealed-card-placeholder {
    justify-content: start;
  }

}

@media (max-width: 820px) {
  .tarot-hero {
    padding: 26px 20px;
  }

  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spread-grid,
  .shuffle-step,
  .draw-card-row,
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .shuffle-button,
  .focus-copy,
  .energy-copy {
    margin-left: 0;
  }

  .shuffle-deck-placeholder {
    min-height: 240px;
  }

  .large-card {
    width: 95px;
    height: 146px;
  }

  .draw-card-row {
    gap: 24px;
  }

  .draw-card i {
    width: 75px;
    height: 116px;
  }

  .draw-card span {
    top: 101px;
  }
}

@media (max-width: 520px) {
  .tarot-hero h1 {
    font-size: 38px;
  }

  .topic-grid {
    grid-template-columns: 1fr;
  }

  .tarot-step {
    padding: 18px;
  }

  .tarot-guidance-strip {
    padding: 18px;
  }

  .guidance-emblem {
    width: 58px;
    height: 58px;
  }

  .summary-cards article {
    grid-template-columns: 40px 1fr;
  }

  .overall-message {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   ASTROVIA — PALM READING PAGE
   Additions for palm-reading.html
========================================================= */

.palm-page {
  --palm-hero-image: url("assets/palm-hero.png");
  --palm-hand-image: url("assets/palm-hand.png");
}

.palm-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.palm-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 78px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.palm-hero {
  min-height: 245px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 28px;
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.86) 41%, rgba(5,8,22,.36) 68%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 73% 39%, rgba(255, 152, 91, .23), transparent 17%),
    radial-gradient(circle at 77% 36%, rgba(227, 86, 184, .16), transparent 38%),
    var(--palm-hero-image);
  background-size: cover;
  background-position: center right;
}

.palm-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.palm-hero > * {
  position: relative;
  z-index: 2;
}

.palm-hero h1 {
  margin: 19px 0 17px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.6vw, 62px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.palm-hero-copy p {
  width: 500px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.palm-hero-hand {
  min-height: 220px;
  display: grid;
  grid-template-columns: 1fr 230px;
  align-items: center;
  gap: 24px;
}

.hero-hand-placeholder {
  justify-self: center;
  width: 185px;
  height: 220px;
  position: relative;
  background:
    radial-gradient(circle at 50% 68%, rgba(255, 207, 168, .24), transparent 54%),
    var(--palm-hand-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 32px rgba(255, 132, 207, .2));
}

.hero-hand-placeholder::before {
  content: "♆";
  position: absolute;
  inset: 16px 20px 28px;
  display: grid;
  place-items: center;
  color: rgba(255, 221, 183, .65);
  font-size: 135px;
  line-height: 1;
}

.hero-hand-placeholder::after {
  content: "";
  position: absolute;
  inset: 45px 40px 36px;
  border-radius: 48% 48% 42% 42%;
  border: 1px solid rgba(255, 202, 168, .32);
  background:
    linear-gradient(125deg, transparent 0 46%, rgba(255, 104, 207, .76) 47% 48%, transparent 49%),
    linear-gradient(35deg, transparent 0 53%, rgba(255, 184, 108, .76) 54% 55%, transparent 56%),
    linear-gradient(83deg, transparent 0 58%, rgba(159, 95, 255, .74) 59% 60%, transparent 61%);
  opacity: .72;
}

.palm-hero-hand p {
  margin: 0;
  color: #ffd09f;
  font-family: Cinzel, Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
  text-shadow: 0 0 20px rgba(255, 184, 108, .25);
}

.palm-tabs {
  min-height: 112px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid rgba(255, 160, 224, .13);
  background: linear-gradient(135deg, rgba(23, 18, 48, .76), rgba(8, 12, 31, .86));
}

.palm-tab {
  min-height: 82px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: .24s ease;
}

.palm-tab:last-child {
  border-right: 0;
}

.palm-tab span {
  color: #ff70cf;
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,112,207,.56);
}

.palm-tab strong {
  color: #fff;
  font-size: 13px;
  margin-top: 6px;
}

.palm-tab small {
  color: rgba(255,255,255,.62);
  font-size: 10px;
}

.palm-tab:hover,
.palm-tab.active {
  background: radial-gradient(circle at center, rgba(255, 99, 206, .13), transparent 65%);
  color: #fff;
}

.palm-main-grid {
  display: grid;
  grid-template-columns: 1.45fr .88fr;
  gap: 18px;
  margin-bottom: 20px;
}

.palm-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.palm-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}

.panel-intro {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.6;
}

.palm-basics-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  margin-top: 20px;
}

.outline-pink-button {
  width: fit-content;
  min-width: 235px;
  height: 38px;
  margin: 8px auto 0;
  padding: 0 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 99, 206, .36);
  color: #ff8ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
  transition: .24s ease;
}

.outline-pink-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255, 99, 206, .18);
}

.major-lines-panel {
  display: flex;
  flex-direction: column;
}

.major-line-list {
  margin-top: 25px;
  flex: 1;
}

.major-line-list article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.major-line-list article:last-child {
  border-bottom: 0;
}

.major-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 29px;
  border: 1px solid currentColor;
}

.major-icon.heart { color: #ff5fc9; }
.major-icon.head { color: #b86fff; }
.major-icon.life { color: #ff9f3f; }
.major-icon.fate { color: #4fd7ff; }

.major-icon.thumb { color: #ff9ddd; }
.major-icon.index { color: #ff4fbf; }
.major-icon.middle { color: #8d6cff; }
.major-icon.ring { color: #ffbf43; }
.major-icon.little { color: #8fd960; }

.major-line-list h3 {
  margin: 0 0 7px;
  font-size: 15px;
  color: #ff70cf;
}

.major-line-list p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}

.explore-lines-panel {
  margin-bottom: 20px;
}

.line-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.line-card {
  min-height: 250px;
  padding: 18px 14px;
  border-radius: 9px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(25, 19, 47, .68), rgba(8, 12, 31, .82));
  transition: .24s ease;
}

.line-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 99, 206, .42);
  box-shadow: 0 18px 34px rgba(227,86,184,.12);
}

.line-card h3 {
  margin: 0 0 13px;
  color: #ff70cf;
  font-size: 14px;
}

.mini-palm-image {
  display: block;
  width: 100px;
  height: 130px;
  margin: 0 auto 16px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 30%;
}

.line-card p {
  min-height: 36px;
  margin: 0 0 16px;
  color: rgba(255,255,255,.67);
  font-size: 11px;
  line-height: 1.45;
}

.line-card a {
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(255, 99, 206, .28);
  color: #ff8ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
}

.palm-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr .78fr 1.03fr;
  gap: 18px;
  margin-bottom: 20px;
}

.mounts-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  margin-top: 20px;
}

.mount-hand-image {
  display: block;
  width: 100%;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}

.mount-list i {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 9px;
}

.jupiter { background: #ff4fbf; color: #ff4fbf; }
.saturn { background: #8d6cff; color: #8d6cff; }
.apollo { background: #ffbf43; color: #ffbf43; }
.mercury { background: #8fd960; color: #8fd960; }
.mars-upper { background: #ff713e; color: #ff713e; }
.venus { background: #cfc6d9; color: #cfc6d9; }
.moon { background: #a061ff; color: #a061ff; }
.mars-lower { background: #e858d7; color: #e858d7; }

.mount-list p {
  display: grid;
  grid-template-columns: 16px 95px 1fr;
  gap: 4px;
  margin: 0 0 11px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
}

.mount-list strong {
  color: #fff;
  font-weight: 500;
}

.shape-list {
  margin-top: 18px;
}

.shape-list article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  margin-bottom: 16px;
}

.shape-list span {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
}

.shape-list .earth { color: #ffab45; }
.shape-list .water { color: #69d8ff; }
.shape-list .air { color: #ded2ff; }
.shape-list .fire { color: #ff6f45; }

.shape-list h3 {
  margin: 0 0 4px;
  color: #ffbd66;
  font-size: 13px;
}

.shape-list p {
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.tips-layout {
  display: grid;
  grid-template-columns: 1fr 145px;
  gap: 18px;
  margin-top: 20px;
}

.tips-list p {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 11px;
  margin: 0 0 17px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.45;
}

.tips-list span {
  color: #ff70cf;
  font-size: 22px;
  line-height: 1;
}

.tips-lightbulb {
  min-height: 210px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 184, 108, .28), transparent 32%),
    linear-gradient(180deg, transparent, rgba(255, 99, 206, .05));
}

.tips-lightbulb span {
  color: #ffc071;
  font-size: 125px;
  opacity: .78;
  text-shadow: 0 0 35px rgba(255, 184, 108, .45);
}


/* Palm effects */

.palm-tab-highlight {
  animation: palmTabPulse .32s ease both;
}

@keyframes palmTabPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .palm-main-grid {
    grid-template-columns: 1fr;
  }

  .palm-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .palmistry-tips-panel {
    grid-column: 1 / -1;
  }

  .line-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1180px) {
  .palm-hero {
    grid-template-columns: 1fr;
  }

  .palm-hero-hand {
    grid-template-columns: 1fr;
  }

  .palm-hero-hand p {
    text-align: center;
  }

  .palm-tabs {
    grid-template-columns: repeat(3, 1fr);
  }

  .palm-tab {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

}

@media (max-width: 820px) {
  .palm-hero {
    padding: 28px 20px;
  }

  .palm-hero h1 {
    font-size: 42px;
  }

  .line-card-grid,
  .palm-bottom-grid,
  .mounts-layout,
  .tips-layout {
    grid-template-columns: 1fr;
  }

  .palm-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .mount-hand-image {
    margin: auto;
    width: 180px;
  }

  .tips-lightbulb {
    min-height: 140px;
  }

  .tips-lightbulb span {
    font-size: 86px;
  }
}

@media (max-width: 520px) {
  .palm-hero h1 {
    font-size: 35px;
  }

  .palm-tabs {
    grid-template-columns: 1fr;
  }

  .palm-panel {
    padding: 18px;
  }

  .major-line-list article {
    grid-template-columns: 1fr;
  }

  .major-icon {
    margin-bottom: 4px;
  }

  .line-card-grid {
    gap: 14px;
  }

  .mount-list p {
    grid-template-columns: 16px 1fr;
  }

  .mount-list span {
    grid-column: 2;
  }
}

/* =========================================================
   ASTROVIA — NUMEROLOGY PAGE
   Additions for numerology.html
========================================================= */

.numerology-page {
  --numerology-hero-image: url("assets/numerology-hero.jpg");
}

.numerology-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.numerology-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 78px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.numerology-hero {
  min-height: 248px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 22px 34px 30px;
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.87) 40%, rgba(5,8,22,.36) 68%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 73% 38%, rgba(255, 152, 91, .24), transparent 18%),
    radial-gradient(circle at 76% 37%, rgba(227, 86, 184, .18), transparent 39%),
    var(--numerology-hero-image);
  background-size: cover;
  background-position: center right;
}

.numerology-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.numerology-hero > * {
  position: relative;
  z-index: 2;
}

.numerology-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.numerology-hero-copy p {
  width: 500px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.85;
}

.number-orbit-placeholder {
  width: 420px;
  max-width: 80vw;
  aspect-ratio: 1.85 / 1;
  justify-self: center;
  position: relative;
}

.number-core {
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffb36a;
  font-family: Cinzel, Georgia, serif;
  font-size: 88px;
  line-height: 1;
  text-shadow:
    0 0 18px rgba(255, 179, 106, .85),
    0 0 60px rgba(255, 99, 206, .45);
  z-index: 2;
}

.orbit-ring {
  position: absolute;
  left: 52%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 108, .23);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 35px rgba(255, 99, 206, .06);
}

.ring-a {
  width: 185px;
  height: 185px;
}

.ring-b {
  width: 245px;
  height: 245px;
  border-color: rgba(255, 99, 206, .18);
}

.ring-c {
  width: 310px;
  height: 310px;
  border-color: rgba(112, 219, 255, .13);
}

.number-orbit-placeholder::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 184, 108, .17) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, rgba(255, 99, 206, .15), transparent 61%);
  opacity: .88;
}

.orbit-number {
  position: absolute;
  color: #ffbd66;
  font-family: Cinzel, Georgia, serif;
  font-size: 38px;
  text-shadow: 0 0 22px rgba(255, 189, 102, .65);
  animation: numberFloat 5s ease-in-out infinite;
}

.n1 { left: 51%; top: -2%; color: #ffbd66; }
.n2 { right: 15%; top: 8%; color: #b86fff; animation-delay: .2s; }
.n3 { right: 3%; top: 41%; color: #ff9e4d; animation-delay: .4s; }
.n4 { right: 20%; bottom: 2%; color: #ff8a50; animation-delay: .6s; }
.n5 { left: 47%; bottom: -4%; color: #bd7bff; animation-delay: .8s; }
.n6 { left: 28%; bottom: 5%; color: #7ad9ff; animation-delay: 1s; }
.n7 { left: 10%; top: 44%; color: #cc70ff; animation-delay: 1.2s; }
.n8 { left: 26%; top: 5%; color: #7ad9ff; animation-delay: 1.4s; }
.n9 { left: 8%; top: 28%; color: #ff74d2; animation-delay: 1.6s; }

.numerology-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.numerology-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.numerology-panel > p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
}

.numerology-top-grid {
  display: grid;
  grid-template-columns: .82fr 1.32fr;
  gap: 18px;
  margin-bottom: 20px;
}

.calculation-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(20, 26, 58, .72), rgba(12, 17, 41, .58));
  border: 1px solid rgba(255, 160, 224, .28);
  box-shadow: 0 10px 30px rgba(196, 61, 178, .12);
  backdrop-filter: blur(18px);
  font-size: 13px;
  color: #e5e3ef;
}

.calculation-meta-icon {
  color: #ff75d2;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(255, 117, 210, .6);
}

.calculation-meta strong {
  color: #ff9ddd;
  font-weight: 700;
}

@media (max-width: 480px) {
  .calculation-meta {
    font-size: 12px;
    padding: 10px 16px;
  }
}

.numerology-form {
  margin-top: 23px;
}

.numerology-form label {
  display: block;
  position: relative;
  margin-bottom: 18px;
}

.numerology-form label span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.numerology-form input {
  width: 100%;
  height: 51px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 8px;
  background: rgba(5,8,22,.48);
  color: #fff;
  padding: 0 16px;
  outline: none;
  transition: .24s ease;
}

.numerology-form input:focus {
  border-color: rgba(255, 99, 206, .42);
  box-shadow: 0 0 24px rgba(255, 99, 206, .12);
}

.numerology-form label i {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: rgba(255,255,255,.7);
  font-style: normal;
}

.calculate-button {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #e65bac, #bd42df);
  box-shadow: 0 14px 32px rgba(227,86,184,.24);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  transition: .24s ease;
}

.calculate-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(227,86,184,.34);
}

.numerology-form small {
  display: block;
  margin-top: 15px;
  text-align: center;
  color: rgba(255,255,255,.56);
  font-size: 11px;
}

.core-number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.core-number-grid article {
  min-height: 205px;
  padding: 22px 15px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(22, 19, 47, .56), rgba(7, 12, 31, .72));
}

.core-number-grid span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
}

.core-number-grid strong {
  display: block;
  margin-bottom: 13px;
  font-family: Cinzel, Georgia, serif;
  font-size: 64px;
  line-height: .95;
  font-weight: 400;
}

.purple-number { color: #d875ff; }
.gold-number { color: #ffc260; }
.blue-number { color: #83caff; }
.green-number { color: #a6e969; }

.core-number-grid h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.core-number-grid p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.55;
}

.numerology-middle-grid {
  display: grid;
  grid-template-columns: 1.22fr .95fr;
  gap: 18px;
  margin-bottom: 20px;
}

.life-path-header {
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 26px;
  align-items: center;
}

.sacred-number-wheel {
  width: 155px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    repeating-conic-gradient(rgba(255, 99, 206, .2) 0 1deg, transparent 1deg 30deg),
    repeating-radial-gradient(circle, rgba(255,255,255,.1) 0 1px, transparent 1px 26px),
    radial-gradient(circle, rgba(255, 99, 206, .12), transparent 62%);
  border: 1px solid rgba(255, 99, 206, .24);
}

.sacred-number-wheel::before,
.sacred-number-wheel::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(255, 99, 206, .33);
  transform: rotate(45deg);
}

.sacred-number-wheel::after {
  inset: 43px;
  border-color: rgba(255, 184, 108, .22);
}

.sacred-number-wheel span {
  position: relative;
  z-index: 2;
  color: #d875ff;
  font-family: Cinzel, Georgia, serif;
  font-size: 76px;
  text-shadow: 0 0 22px rgba(216, 117, 255, .55);
}

.life-path-header h2 {
  margin-bottom: 6px;
}

.life-path-header h3 {
  margin: 0 0 17px;
  color: #d875ff;
  font-size: 17px;
  font-weight: 500;
}

.life-path-header p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.75;
}

.life-path-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 27px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

.life-path-detail-grid article {
  padding: 23px;
  border-right: 1px solid rgba(255,255,255,.06);
  background: rgba(8,12,31,.38);
}

.life-path-detail-grid article:last-child {
  border-right: 0;
}

.life-path-detail-grid h4 {
  margin: 0 0 16px;
  font-size: 15px;
  color: #d875ff;
}

.life-path-detail-grid article:nth-child(2) h4 {
  color: #ff9e4d;
}

.life-path-detail-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.life-path-detail-grid li {
  margin-bottom: 12px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.life-path-detail-grid li::before {
  content: "⊙";
  margin-right: 8px;
  color: #d875ff;
}

.life-path-detail-grid article:nth-child(2) li::before {
  color: #ff7c38;
}

.life-path-detail-grid p {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.72;
}

.personal-year-content {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 26px;
  align-items: center;
  margin-top: 25px;
}

.year-ring {
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(#9edf64 0 78%, rgba(255,255,255,.1) 78% 100%);
  position: relative;
  box-shadow: 0 0 32px rgba(158, 223, 100, .2);
}

.year-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #0b1026;
}

.year-ring span {
  position: relative;
  color: #a6e969;
  font-family: Cinzel, Georgia, serif;
  font-size: 76px;
  line-height: 1;
}

.personal-year-content h3 {
  margin: 0 0 13px;
  color: #a6e969;
  font-size: 16px;
}

.personal-year-content p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.65;
}

.year-advice-list {
  margin-top: 28px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,31,.42);
}

.year-advice-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 13px;
  padding: 12px 0;
}

.year-advice-list article + article {
  border-top: 1px solid rgba(255,255,255,.06);
}

.year-advice-list span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff70cf;
  background: rgba(255, 99, 206, .08);
  border: 1px solid rgba(255, 99, 206, .22);
}

.year-advice-list strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 13px;
}

.year-advice-list p {
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.numerology-insight-grid {
  display: grid;
  grid-template-columns: .95fr 1.32fr;
  gap: 18px;
  margin-bottom: 20px;
}

.glance-list {
  margin-top: 18px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.glance-list article {
  min-height: 50px;
  display: grid;
  grid-template-columns: 38px 1fr 55px 1.2fr;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(8,12,31,.36);
}

.glance-list article:last-child {
  border-bottom: 0;
}

.glance-list span {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
}

.purple-pill { color: #d875ff; }
.gold-pill { color: #ffc260; }
.blue-pill { color: #83caff; }
.green-pill { color: #a6e969; }
.orange-pill { color: #ff8a50; }
.cyan-pill { color: #4fd7ff; }

.glance-list strong {
  color: #fff;
  font-size: 12px;
}

.glance-list em {
  color: #d875ff;
  font-style: normal;
  font-size: 20px;
}

.glance-list article:nth-child(2) em { color: #ffc260; }
.glance-list article:nth-child(3) em { color: #83caff; }
.glance-list article:nth-child(4) em { color: #a6e969; }
.glance-list article:nth-child(5) em { color: #ff8a50; }
.glance-list article:nth-child(6) em { color: #4fd7ff; }

.glance-list p {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 11px;
}

.insight-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.insight-card-grid article {
  min-height: 230px;
  padding: 22px 18px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(22, 19, 47, .56), rgba(7, 12, 31, .72));
}

.insight-card-grid span {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 28px;
}

.purple-orb { color: #d875ff; background: rgba(216,117,255,.08); }
.gold-orb { color: #ffc260; background: rgba(255,194,96,.08); }
.blue-orb { color: #4fd7ff; background: rgba(79,215,255,.08); }

.insight-card-grid h3 {
  margin: 0 0 17px;
  font-size: 14px;
}

.insight-card-grid article:nth-child(1) h3 { color: #d875ff; }
.insight-card-grid article:nth-child(2) h3 { color: #ffc260; }
.insight-card-grid article:nth-child(3) h3 { color: #4fd7ff; }

.insight-card-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.insight-card-grid li {
  margin-bottom: 10px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.insight-card-grid li::before {
  content: "✧";
  margin-right: 8px;
  color: #ff70cf;
}

.number-message {
  min-height: 62px;
  margin-top: 18px;
  border-radius: 10px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(227,86,184,.16), rgba(8,12,31,.68));
  border: 1px solid rgba(255, 99, 206, .12);
}

.number-message span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff70cf;
  border: 1px solid rgba(255, 99, 206, .32);
}

.number-message p {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.55;
}

.how-numerology-works {
  margin-bottom: 20px;
}

.works-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-top: 38px;
}

.works-flow article {
  position: relative;
  min-height: 165px;
  text-align: center;
}

.works-flow article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 40px;
  right: -24px;
  color: #ff70cf;
  font-size: 26px;
}

.works-flow article > span {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff70cf;
  border: 1px solid rgba(255, 99, 206, .26);
  background: rgba(255, 99, 206, .08);
  font-size: 30px;
}

.works-flow article:nth-child(2) > span { color: #d875ff; }
.works-flow article:nth-child(3) > span { color: #ffc260; }
.works-flow article:nth-child(4) > span { color: #4fd7ff; }
.works-flow article:nth-child(5) > span { color: #ff70cf; }

.works-flow strong {
  display: block;
  margin-bottom: 10px;
  color: #ff70cf;
  font-size: 13px;
}

.works-flow p {
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  line-height: 1.55;
}

.works-flow em {
  position: absolute;
  left: 0;
  top: 78px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 99, 206, .3);
  background: rgba(255, 99, 206, .12);
  font-style: normal;
  font-size: 11px;
}

/* Numerology effects */

.numerology-calculated {
  animation: numerologyPulse .42s ease both;
}

@keyframes numberFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: .92;
  }

  50% {
    transform: translateY(-9px);
    opacity: 1;
  }
}

@keyframes numerologyPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .numerology-top-grid,
  .numerology-middle-grid,
  .numerology-insight-grid {
    grid-template-columns: 1fr;
  }

  .works-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .works-flow article:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 1180px) {
  .numerology-hero {
    grid-template-columns: 1fr;
  }

  .number-orbit-placeholder {
    margin-top: 20px;
  }

  .core-number-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 820px) {
  .numerology-hero {
    padding: 28px 20px;
  }

  .numerology-hero h1 {
    font-size: 43px;
  }

  .number-orbit-placeholder {
    width: 320px;
  }

  .number-core {
    font-size: 68px;
  }

  .ring-a {
    width: 140px;
    height: 140px;
  }

  .ring-b {
    width: 190px;
    height: 190px;
  }

  .ring-c {
    width: 240px;
    height: 240px;
  }

  .orbit-number {
    font-size: 28px;
  }

  .life-path-header,
  .personal-year-content,
  .number-message {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sacred-number-wheel,
  .year-ring {
    margin: auto;
  }

  .life-path-detail-grid,
  .insight-card-grid,
  .works-flow {
    grid-template-columns: 1fr;
  }

  .life-path-detail-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .life-path-detail-grid article:last-child {
    border-bottom: 0;
  }

  .works-flow article::after {
    display: none;
  }

  .glance-list article {
    grid-template-columns: 38px 1fr 45px;
  }

  .glance-list p {
    grid-column: 2 / -1;
  }
}

@media (max-width: 520px) {
  .numerology-panel {
    padding: 18px;
  }

  .core-number-grid {
    grid-template-columns: 1fr;
  }

  .number-orbit-placeholder {
    width: 260px;
  }

  .number-core {
    font-size: 56px;
  }

  .ring-a {
    width: 112px;
    height: 112px;
  }

  .ring-b {
    width: 156px;
    height: 156px;
  }

  .ring-c {
    width: 198px;
    height: 198px;
  }

  .orbit-number {
    font-size: 23px;
  }

  .glance-list article {
    grid-template-columns: 34px 1fr;
  }

  .glance-list em,
  .glance-list p {
    grid-column: 2;
  }
}

/* =========================================================
   ASTROVIA — MOON CALENDAR PAGE
   Additions for moon-calendar.html
========================================================= */

.moon-page {
  --moon-hero-image: url("assets/moon-calendar-hero.jpg");
  --moon-ritual-image: url("assets/moon-rituals.jpg");
}

.moon-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.moon-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 88px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.moon-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: grid;
  grid-template-columns: minmax(420px, .85fr) minmax(500px, 1.15fr);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 41%, rgba(5,8,22,.35) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 66% 45%, rgba(255, 184, 108, .26), transparent 18%),
    radial-gradient(circle at 72% 40%, rgba(227, 86, 184, .15), transparent 39%),
    var(--moon-hero-image);
  background-size: cover;
  background-position: center right;
}

.moon-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.moon-hero > * {
  position: relative;
  z-index: 2;
}

.moon-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.moon-hero-copy p {
  width: 475px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.moon-hero-visual {
  position: relative;
  min-height: 220px;
}

.hero-full-moon {
  position: absolute;
  left: 18%;
  top: 50%;
  width: 220px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.7), rgba(207,181,160,.92) 22%, rgba(113,92,90,.94) 58%, rgba(47,38,52,.98) 100%);
  box-shadow:
    0 0 60px rgba(255, 201, 156, .28),
    0 0 130px rgba(227,86,184,.22),
    inset -28px -28px 42px rgba(0,0,0,.34);
  overflow: hidden;
  animation: moonFloat 7s ease-in-out infinite;
}

.hero-full-moon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 38% 35%, rgba(80,67,72,.45) 0 15px, transparent 16px),
    radial-gradient(circle at 62% 42%, rgba(70,55,66,.38) 0 23px, transparent 24px),
    radial-gradient(circle at 49% 69%, rgba(80,65,70,.38) 0 19px, transparent 20px),
    radial-gradient(circle at 27% 62%, rgba(90,72,72,.35) 0 12px, transparent 13px);
  mix-blend-mode: multiply;
}

.today-moon-card {
  position: absolute;
  right: 0;
  top: 10px;
  width: 250px;
  min-height: 172px;
  border-radius: 11px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 160, 224, .14);
  background: rgba(8,12,31,.62);
}

.today-moon-card span {
  color: #fff;
  font-size: 12px;
}

.today-moon-card h3 {
  margin: 8px 0 16px;
  color: #d875ff;
  font-size: 17px;
}

.today-moon-card small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.62);
}

.today-moon-card strong {
  display: block;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
}

.today-moon-card p {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.today-moon-card i {
  color: #ff5fc9;
  font-style: normal;
}

.moon-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.moon-panel h2 {
  margin: 0;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.moon-section-label {
  margin: 0;
  color: #ff75d2;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 900;
}

.moon-overview-grid {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 18px;
  margin-bottom: 20px;
}

.phase-track {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-top: 25px;
}

.phase-track article {
  position: relative;
  min-height: 130px;
  text-align: center;
}

.phase-track article + article::before {
  content: "›";
  position: absolute;
  left: -11px;
  top: 34px;
  color: rgba(255,255,255,.18);
  font-size: 20px;
}

.phase-moon,
.mini-moon {
  display: inline-block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.82), rgba(207,188,172,.84) 26%, rgba(69,63,76,.9) 66%, rgba(10,13,28,.98) 100%);
  box-shadow:
    inset -12px -12px 22px rgba(0,0,0,.45),
    0 0 18px rgba(255,255,255,.08);
}

.phase-moon {
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
}

.phase-track article.active .phase-moon {
  box-shadow:
    0 0 0 4px rgba(255, 99, 206, .16),
    0 0 0 1px #ff63ce,
    0 0 30px rgba(255, 99, 206, .35),
    inset -12px -12px 22px rgba(0,0,0,.35);
}

.phase-track strong {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
}

.phase-track small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.65);
  font-size: 11px;
}

.new-moon {
  background:
    radial-gradient(circle at 40% 34%, rgba(255,255,255,.13), rgba(35,38,54,.7) 42%, #060918 100%);
}

.waxing-crescent {
  background:
    radial-gradient(circle at 72% 45%, #e1d6c8 0 32%, transparent 33%),
    radial-gradient(circle at 44% 50%, #101424 0 52%, #060918 100%);
}

.first-quarter {
  background:
    linear-gradient(90deg, #151928 0 49%, #d9c8b5 50% 100%);
}

.waxing-gibbous {
  background:
    radial-gradient(circle at 62% 48%, #dac9b7 0 58%, transparent 59%),
    radial-gradient(circle at 32% 50%, #151928 0 55%, #060918 100%);
}

.full-moon {
  background:
    radial-gradient(circle at 35% 30%, #fff, #d6c5b2 32%, #756b78 88%);
}

.waning-gibbous {
  background:
    radial-gradient(circle at 38% 48%, #dac9b7 0 58%, transparent 59%),
    radial-gradient(circle at 72% 50%, #151928 0 55%, #060918 100%);
}

.last-quarter {
  background:
    linear-gradient(90deg, #d9c8b5 0 50%, #151928 51% 100%);
}

.waning-crescent {
  background:
    radial-gradient(circle at 28% 45%, #e1d6c8 0 32%, transparent 33%),
    radial-gradient(circle at 56% 50%, #101424 0 52%, #060918 100%);
}

.full-moon-card {
  padding: 23px 22px;
}

.full-moon-card h2 {
  margin-top: 22px;
  font-size: 24px;
}

.full-moon-card > span {
  display: block;
  margin: 6px 0 25px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
}

.full-moon-message {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.full-moon-message i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ff75d2;
  font-style: normal;
  font-size: 26px;
}

.full-moon-message p {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.55;
}

.moon-calendar-grid {
  display: grid;
  grid-template-columns: 1.05fr .96fr;
  gap: 18px;
  margin-bottom: 20px;
}

.calendar-heading {
  display: grid;
  gap: 20px;
}

.calendar-heading div {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}

.calendar-heading h2 {
  text-align: center;
  font-size: 21px;
}

.calendar-heading button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-size: 25px;
  cursor: pointer;
}

.calendar-days-labels,
.moon-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-days-labels {
  margin-top: 8px;
  padding-bottom: 9px;
  color: rgba(255,255,255,.55);
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
}

.moon-calendar-days {
  gap: 4px;
}

.moon-calendar-days button {
  min-height: 72px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(8,12,31,.52);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 6px 3px;
  cursor: pointer;
  transition: .22s ease;
}

.moon-calendar-days button:hover {
  transform: translateY(-2px);
  border-color: rgba(255,99,206,.38);
}

.moon-calendar-days button.empty {
  opacity: 0;
  pointer-events: none;
}

.moon-calendar-days strong {
  font-size: 13px;
  font-weight: 500;
}

.mini-moon {
  width: 24px;
  height: 24px;
}

.moon-calendar-days small {
  color: rgba(255,255,255,.68);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
}

.moon-calendar-days .new-highlight,
.moon-calendar-days .full-highlight {
  border-width: 2px;
  border-color: #ff63ce;
  box-shadow: inset 0 0 0 1px rgba(255, 99, 206, .35), 0 0 14px rgba(255, 99, 206, .3);
}

.moon-calendar-days .best-day {
  border-width: 2px;
  border-color: #ffb13e;
  box-shadow: inset 0 0 0 1px rgba(255, 177, 56, .35), 0 0 14px rgba(255, 177, 56, .3);
}

.moon-calendar-days .today {
  border-width: 2px;
  border-color: #fff0c9;
  background: rgba(255, 240, 201, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 201, .4), 0 0 14px rgba(255, 240, 201, .25);
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 38px;
  margin-top: 18px;
  color: rgba(255,255,255,.64);
  font-size: 11px;
}

.calendar-legend i {
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: -2px;
}

.legend-pink {
  border: 1px solid #ff63ce;
}

.legend-gold {
  border: 1px solid #ffb13e;
}

.legend-today {
  background: #fff0c9;
}

.guidance-moon-title {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}

.guidance-moon-title h2 {
  font-size: 22px;
}

.guidance-moon-title p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.72);
}

.guidance-copy {
  margin: 24px 0 24px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.6;
}

.good-avoid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(8,12,31,.42);
  border: 1px solid rgba(255,255,255,.07);
}

.good-avoid-grid h3 {
  margin: 0 0 13px;
  font-size: 12px;
  color: #a6e969;
}

.good-avoid-grid article:nth-child(2) h3 {
  color: #ffb066;
}

.good-avoid-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.good-avoid-grid li {
  margin-bottom: 10px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.good-avoid-grid li::before {
  content: "✓";
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid #a6e969;
  color: #a6e969;
  font-size: 10px;
}

.good-avoid-grid .avoid li::before {
  content: "×";
  border-color: #ff5f65;
  color: #ff5f65;
}

.affirmation-box {
  margin-top: 18px;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 17px;
  align-items: center;
  background: linear-gradient(135deg, rgba(227,86,184,.16), rgba(8,12,31,.68));
  border: 1px solid rgba(255, 99, 206, .12);
}

.affirmation-box span {
  color: #ff75d2;
  font-size: 42px;
  line-height: 1;
}

.affirmation-box h3 {
  margin: 0 0 8px;
  color: #ff75d2;
  font-size: 12px;
  letter-spacing: 1px;
}

.affirmation-box p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 1.5;
}

.phase-effects-panel {
  margin-bottom: 20px;
  overflow: hidden;
}

.phase-effects-scroll {
  display: grid;
  grid-template-columns: repeat(8, minmax(128px, 1fr));
  gap: 12px;
  margin-top: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.phase-effects-scroll::-webkit-scrollbar {
  display: none;
}

.phase-effects-scroll article {
  min-height: 230px;
  padding: 18px 14px;
  text-align: center;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(22, 19, 47, .56), rgba(7, 12, 31, .72));
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.phase-effects-scroll article:hover,
.phase-effects-scroll article:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 177, 56, .5);
}

.phase-effects-scroll article.active {
  border-color: rgba(255, 177, 56, .85);
  box-shadow: 0 0 0 1px rgba(255,177,56,.15);
}

.phase-effects-scroll h3 {
  margin: 0 0 9px;
  color: #ff75d2;
  font-size: 13px;
}

.phase-effects-scroll article:nth-child(2) h3,
.phase-effects-scroll article.active h3,
.phase-effects-scroll article:nth-child(7) h3 {
  color: #ffc45e;
}

.phase-effects-scroll p,
.phase-effects-scroll li {
  color: rgba(255,255,255,.64);
  font-size: 10px;
  line-height: 1.45;
}

.phase-effects-scroll small {
  display: block;
  margin: 12px 0 6px;
  color: rgba(255,255,255,.78);
  font-size: 10px;
}

.phase-effects-scroll ul {
  margin: 0;
  padding-left: 12px;
  text-align: left;
}

.phase-scroll-indicator {
  width: 260px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.phase-scroll-indicator span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #bd42df, #ff63ce);
}

.moon-bottom-grid {
  display: grid;
  grid-template-columns: .95fr 1.25fr;
  gap: 18px;
  margin-bottom: 20px;
}

.highlight-list {
  margin-top: 22px;
}

.highlight-list article {
  display: grid;
  grid-template-columns: 56px 1fr 52px;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.highlight-list article:last-child {
  border-bottom: 0;
}

.highlight-list h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 14px;
}

.highlight-list p {
  margin: 0 0 5px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
}

.highlight-list small {
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.highlight-list em {
  width: 42px;
  height: 52px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(189,66,223,.2);
  color: #ff89d7;
  font-style: normal;
  font-size: 20px;
  line-height: 1.05;
  text-align: center;
}

.highlight-list em small {
  display: block;
  font-size: 8px;
}

.rituals-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 18px;
  margin-top: 22px;
}

.ritual-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.ritual-list span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ff75d2;
  font-size: 29px;
}

.ritual-list .ritual-full {
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #d6c5b2 32%, #756b78 88%);
}

.ritual-list h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14px;
}

.ritual-list p {
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: 11px;
}

.ritual-image-placeholder {
  border-radius: 12px;
  min-height: 250px;
  background:
    linear-gradient(90deg, rgba(8,12,31,.2), rgba(8,12,31,.1)),
    radial-gradient(circle at 72% 30%, rgba(255, 184, 108, .48), transparent 15%),
    radial-gradient(circle at 35% 25%, rgba(227,86,184,.32), transparent 20%),
    var(--moon-ritual-image);
  background-size: cover;
  background-position: center;
}


/* Moon effects */

.moon-selected {
  animation: moonPulse .36s ease both;
}

@keyframes moonFloat {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-55%) scale(1.025);
  }
}

@keyframes moonPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .moon-overview-grid,
  .moon-calendar-grid,
  .moon-bottom-grid {
    grid-template-columns: 1fr;
  }

  .phase-track {
    grid-template-columns: repeat(4, 1fr);
  }

  .phase-effects-scroll {
    grid-template-columns: repeat(8, 150px);
  }
}

@media (max-width: 1180px) {
  .moon-hero {
    grid-template-columns: 1fr;
  }

  .moon-hero-visual {
    min-height: 300px;
  }

  .today-moon-card {
    right: 20px;
  }

}

@media (max-width: 820px) {
  .moon-hero {
    padding: 28px 20px;
  }

  .moon-hero h1 {
    font-size: 42px;
  }

  .hero-full-moon {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 30px auto 0;
  }

  .today-moon-card {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 20px;
  }

  .phase-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-legend,
  .good-avoid-grid,
  .rituals-layout {
    grid-template-columns: 1fr;
  }

  .calendar-legend {
    display: grid;
    gap: 10px;
    justify-content: start;
  }

  .moon-calendar-days button {
    min-height: 64px;
  }

  .mini-moon {
    width: 20px;
    height: 20px;
  }

  .highlight-list article {
    grid-template-columns: 48px 1fr;
  }

  .highlight-list em {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .moon-panel {
    padding: 18px;
  }

  .moon-hero h1 {
    font-size: 35px;
  }

  .phase-track {
    grid-template-columns: 1fr;
  }

  .moon-calendar-days {
    gap: 3px;
  }

  .moon-calendar-days button {
    min-height: 58px;
    border-radius: 6px;
  }

  .moon-calendar-days strong {
    font-size: 11px;
  }

  .moon-calendar-days small {
    font-size: 8px;
  }

  .mini-moon {
    width: 17px;
    height: 17px;
  }

  .affirmation-box {
    grid-template-columns: 1fr;
  }

  .ritual-image-placeholder {
    min-height: 190px;
  }
}

/* =========================================================
   ASTROVIA — COMPATIBILITY PAGE
   Additions for compatibility.html
========================================================= */

.compatibility-page {
  --compatibility-hero-image: url("assets/compatibility-hero.png");
  --compatibility-strengths-image: url("assets/compatibility-strengths.png");
  --compatibility-challenges-image: url("assets/compatibility-challenges.png");
  --compatibility-activities-image: url("assets/compatibility-activities.png");
}

.compatibility-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.compatibility-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 82px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.compatibility-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: grid;
  grid-template-columns: minmax(480px, .95fr) minmax(430px, 1.05fr);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 74% 40%, rgba(255, 99, 206, .28), transparent 28%),
    radial-gradient(circle at 73% 45%, rgba(255, 184, 108, .18), transparent 22%),
    var(--compatibility-hero-image);
  background-size: cover;
  background-position: center right;
}

.compatibility-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.compatibility-hero > * {
  position: relative;
  z-index: 2;
}

.compatibility-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.4vw, 59px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.compatibility-hero-copy p {
  width: 560px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.compatibility-hero-visual {
  min-height: 210px;
  position: relative;
}

.compatibility-couple-placeholder {
  position: absolute;
  right: 40px;
  top: 50%;
  width: 360px;
  height: 210px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 99, 206, .28), transparent 38%),
    repeating-radial-gradient(circle at 50% 52%, rgba(255, 120, 218, .22) 0 1px, transparent 1px 35px),
    var(--compatibility-hero-image);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  mask-image: radial-gradient(ellipse at center, #000 0 60%, transparent 78%);
}

.compatibility-couple-placeholder::before,
.compatibility-couple-placeholder::after {
  content: "";
  position: absolute;
  top: 42px;
  width: 105px;
  height: 140px;
  border-radius: 50% 50% 40% 40%;
  border: 1px solid rgba(255, 99, 206, .28);
  box-shadow: 0 0 24px rgba(255, 99, 206, .22);
}

.compatibility-couple-placeholder::before {
  left: 68px;
  transform: rotate(-15deg);
  background: linear-gradient(135deg, rgba(255,99,206,.2), rgba(8,12,31,.8));
}

.compatibility-couple-placeholder::after {
  right: 68px;
  transform: rotate(15deg);
  background: linear-gradient(225deg, rgba(255,99,206,.18), rgba(8,12,31,.85));
}

.couple-heart {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  color: #ff6fcf;
  font-size: 58px;
  z-index: 3;
  text-shadow: 0 0 24px rgba(255, 111, 207, .85);
}

.compatibility-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.compatibility-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.compatibility-panel > p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
}

.compatibility-compare-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 18px;
  margin-bottom: 18px;
}

.compare-form-layout {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}

.compare-submit {
  grid-column: 1 / -1;
  margin-top: 6px;
  max-width: 340px;
  justify-self: center;
}

.form-error {
  grid-column: 1 / -1;
  justify-self: center;
  color: #ff6b8a;
  font-size: 12px;
}

.compatibility-empty {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

.compatibility-empty-panel {
  text-align: center;
  padding: 48px 24px;
}

.compatibility-empty-panel p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  .compare-submit {
    max-width: 100%;
  }
}

.person-block {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 22px;
  align-items: start;
}

.person-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ff5fc9;
  border: 1px solid #ff5fc9;
  background: rgba(255,95,201,.08);
  font-size: 44px;
  line-height: 1;
  box-shadow: 0 0 22px rgba(255, 95, 201, .16);
}

.person-icon.blue {
  color: #75b9ff;
  border-color: #75b9ff;
  background: rgba(117,185,255,.08);
}

.person-fields h3 {
  margin: 0 0 13px;
  color: #ff5fc9;
  font-size: 12px;
  letter-spacing: 1.5px;
}

.person-two .person-fields h3 {
  color: #62b9ff;
}

.person-fields label {
  display: block;
  position: relative;
  margin-bottom: 17px;
}

.person-fields label span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

.person-fields input {
  width: 100%;
  height: 43px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5,8,22,.46);
  color: #fff;
  padding: 0 13px;
  outline: 0;
}

.person-fields label i {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: rgba(255,255,255,.7);
  font-style: normal;
}

.sun-sign-result {
  margin-top: 14px;
  text-align: center;
}

.sun-sign-result strong {
  display: block;
  color: #ff5fc9;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.sun-sign-result small {
  color: rgba(255,255,255,.68);
}

.blue-sign strong {
  color: #9bc8ff;
}

.swap-button {
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 99, 206, .36);
  background: rgba(255,99,206,.09);
  color: #ff82d8;
  font-size: 27px;
  cursor: pointer;
  transition: .24s ease;
}

.swap-button:hover {
  transform: rotate(180deg) scale(1.08);
  box-shadow: 0 0 24px rgba(255,99,206,.2);
}

.overall-compatibility-card {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 99, 206, .2), transparent 45%),
    linear-gradient(135deg, rgba(32, 20, 52, .88), rgba(8,12,31,.88));
}

.overall-compatibility-card strong {
  display: block;
  margin: 16px 0 8px;
  color: #ff7de3;
  font-family: Cinzel, Georgia, serif;
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  text-shadow: 0 0 22px rgba(255, 125, 227, .48);
}

.compatibility-stars {
  color: #ff8a4d;
  font-size: 30px;
  letter-spacing: 7px;
  margin-bottom: 16px;
}

.overall-compatibility-card h3 {
  margin: 0 0 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

.overall-compatibility-card p {
  margin: 0 0 20px;
  color: rgba(255,255,255,.77);
  font-size: 14px;
  line-height: 1.6;
}

.scores-panel {
  margin-bottom: 18px;
}

.score-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.score-card {
  min-height: 285px;
  padding: 23px 14px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(24, 19, 47, .64), rgba(8, 12, 31, .82));
}

.score-card span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  border-radius: 50%;
  font-size: 38px;
  color: currentColor;
}

.score-card h3 {
  min-height: 44px;
  margin: 0 0 14px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.score-card strong {
  display: block;
  margin-bottom: 14px;
  font-size: 27px;
  color: currentColor;
}

.score-card i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  overflow: hidden;
  margin-bottom: 19px;
}

.score-card i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.score-card p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.55;
}

.score-card.emotional { color: #ff4fae; border-color: rgba(255,79,174,.28); }
.score-card.communication { color: #4cbcff; border-color: rgba(76,188,255,.26); }
.score-card.passion { color: #ff743e; border-color: rgba(255,116,62,.26); }
.score-card.money { color: #9ee06e; border-color: rgba(158,224,110,.26); }
.score-card.growth { color: #c875ff; border-color: rgba(200,117,255,.26); }
.score-card.potential { color: #ffb340; border-color: rgba(255,179,64,.26); }

.compatibility-three-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.relationship-list-card {
  min-height: 330px;
  position: relative;
  overflow: hidden;
}

.relationship-list-card ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.relationship-list-card li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  margin-bottom: 15px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.45;
}

.strengths-card li::before {
  content: "✓";
  width: 16px;
  height: 16px;
  border: 1px solid #9de56e;
  color: #9de56e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
}

.challenges-card li::before {
  content: "△";
  color: #ff5b66;
  font-size: 16px;
}

.activities-card li::before {
  content: "✧";
  color: #c875ff;
  font-size: 16px;
}

.strengths-illustration-placeholder,
.challenge-illustration-placeholder,
.activities-illustration-placeholder {
  position: absolute;
  right: 20px;
  bottom: 8px;
  width: 205px;
  height: 120px;
  opacity: .78;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.strengths-illustration-placeholder {
  background:
    radial-gradient(circle at center, rgba(158,224,110,.18), transparent 55%),
    var(--compatibility-strengths-image);
}

.strengths-illustration-placeholder::before {
  content: "♡";
  display: grid;
  place-items: center;
  color: rgba(158,224,110,.65);
  font-size: 96px;
}

.challenge-illustration-placeholder {
  background:
    radial-gradient(circle at center, rgba(255,91,102,.16), transparent 55%),
    var(--compatibility-challenges-image);
}

.challenge-illustration-placeholder::before {
  content: "▧";
  display: grid;
  place-items: center;
  color: rgba(255,91,102,.7);
  font-size: 96px;
}

.activities-illustration-placeholder {
  background:
    radial-gradient(circle at center, rgba(200,117,255,.18), transparent 55%),
    var(--compatibility-activities-image);
}

.activities-illustration-placeholder::before {
  content: "♊";
  display: grid;
  place-items: center;
  color: rgba(200,117,255,.7);
  font-size: 92px;
}

.compatibility-forecast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.forecast-layout {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 23px;
}

.forecast-ring {
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  background: conic-gradient(#ff5fae 0 87%, rgba(255,255,255,.12) 87% 100%);
  box-shadow: 0 0 30px rgba(255,95,174,.2);
}

.forecast-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #0b1026;
}

.forecast-ring strong,
.forecast-ring span {
  position: relative;
  z-index: 1;
}

.forecast-ring strong {
  align-self: end;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 43px;
  line-height: 1;
  font-weight: 400;
}

.forecast-ring span {
  align-self: start;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  line-height: 1.35;
}

.forecast-list h3 {
  margin: 0 0 13px;
  font-size: 13px;
}

.forecast-list.good h3 {
  color: #9de56e;
}

.forecast-list.avoid h3 {
  color: #ff5b66;
}

.forecast-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.forecast-list li {
  margin-bottom: 9px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.4;
}

.forecast-list.good li::before {
  content: "✓";
  margin-right: 7px;
  color: #9de56e;
}

.forecast-list.avoid li::before {
  content: "⊘";
  margin-right: 7px;
  color: #ff5b66;
}

.forecast-note {
  margin: 20px 0 18px !important;
  color: rgba(255,255,255,.73) !important;
  font-size: 13px !important;
}

.connection-type-layout {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 26px;
}

.connection-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #c875ff;
  border: 1px solid rgba(200,117,255,.38);
  background: rgba(200,117,255,.09);
  font-size: 44px;
}

.connection-type-layout h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}

.connection-type-layout p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.65;
}

.connection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 24px;
}

.connection-tags span {
  padding: 8px 17px;
  border-radius: 999px;
  color: #e5a5ff;
  background: rgba(200,117,255,.12);
  border: 1px solid rgba(200,117,255,.22);
  font-size: 12px;
}

.connection-type-card .outline-pink-button {
  width: 100%;
}

/* Compatibility effects */

.compatibility-pulse {
  animation: compatibilityPulse .38s ease both;
}

@keyframes compatibilityPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .compatibility-compare-grid,
  .compatibility-forecast-grid {
    grid-template-columns: 1fr;
  }

  .score-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .compatibility-three-grid {
    grid-template-columns: 1fr;
  }

  .relationship-list-card {
    min-height: 280px;
  }
}

@media (max-width: 1180px) {
  .compatibility-hero {
    grid-template-columns: 1fr;
  }

  .compatibility-hero-visual {
    min-height: 240px;
  }

  .compatibility-couple-placeholder {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin: 20px auto 0;
  }

  .compare-form-layout {
    grid-template-columns: 1fr;
  }

  .swap-button {
    transform: rotate(90deg);
  }

  .swap-button:hover {
    transform: rotate(270deg) scale(1.08);
  }

  .forecast-layout {
    grid-template-columns: 1fr;
  }

  .forecast-ring {
    margin: auto;
  }

}

@media (max-width: 820px) {
  .compatibility-hero {
    padding: 28px 20px;
  }

  .compatibility-hero h1 {
    font-size: 39px;
  }

  .person-block,
  .connection-type-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .person-icon,
  .connection-icon {
    margin: auto;
  }

  .score-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .relationship-list-card {
    min-height: 330px;
  }

  .strengths-illustration-placeholder,
  .challenge-illustration-placeholder,
  .activities-illustration-placeholder {
    right: 50%;
    transform: translateX(50%);
    opacity: .58;
  }
}

@media (max-width: 520px) {
  .compatibility-panel {
    padding: 18px;
  }

  .compatibility-hero h1 {
    font-size: 34px;
  }

  .compatibility-couple-placeholder {
    width: 280px;
  }

  .score-card-grid {
    grid-template-columns: 1fr;
  }

  .overall-compatibility-card strong {
    font-size: 58px;
  }

  .compatibility-stars {
    font-size: 23px;
    letter-spacing: 4px;
  }

  .connection-tags {
    justify-content: center;
  }
}

/* =========================================================
   ASTROVIA — DREAMS PAGE
   Additions for dreams.html
========================================================= */

.dreams-page {
  --dreams-hero-image: url("assets/dreams-hero.jpg");
  --dream-people-image: url("assets/dream-people.jpg");
  --dream-animals-image: url("assets/dream-animals.jpg");
  --dream-nature-image: url("assets/dream-nature.jpg");
  --dream-objects-image: url("assets/dream-objects.jpg");
  --dream-places-image: url("assets/dream-places.jpg");
  --dream-emotions-image: url("assets/dream-emotions.jpg");
  --dream-actions-image: url("assets/dream-actions.jpg");
  --dream-spiritual-image: url("assets/dream-spiritual.jpg");
  --dream-life-events-image: url("assets/dream-life-events.jpg");
  --dream-nightmares-image: url("assets/dream-nightmares.jpg");
  --dream-door-image: url("assets/dream-door.jpg");
}

.dreams-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.dreams-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 54px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.dreams-hero {
  min-height: 252px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 72% 42%, rgba(255, 184, 108, .19), transparent 22%),
    radial-gradient(circle at 73% 40%, rgba(227, 86, 184, .17), transparent 38%),
    var(--dreams-hero-image);
  background-size: cover;
  background-position: center right;
}

.dreams-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.dreams-hero-copy {
  position: relative;
  z-index: 2;
}

.dreams-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.5vw, 62px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.dreams-hero-copy p {
  width: 620px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.dreams-intro-strip {
  min-height: 130px;
  margin: 0 0 20px;
  padding: 24px 32px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
}

.dreams-intro-strip article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.06);
}

.dreams-intro-strip article:last-child {
  border-right: 0;
}

.dream-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 36px;
}

.dream-icon.purple { color: #c875ff; }
.dream-icon.blue { color: #58bdff; }
.dream-icon.gold { color: #ffb444; }
.dream-icon.pink { color: #ff5faf; }

.dreams-intro-strip h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 15px;
}

.dreams-intro-strip p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.55;
}

.dreams-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.dreams-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.dreams-panel > p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
}

.dreams-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.dreams-section-heading p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.dreams-section-heading a {
  color: #ff89d7;
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 800;
  white-space: nowrap;
}

.dream-categories-panel,
.popular-dreams-panel,
.interpret-panel {
  margin-bottom: 20px;
}

.dream-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.dream-category {
  min-height: 195px;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  padding: 0 14px 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(22, 19, 47, .64), rgba(8, 12, 31, .82));
  transition: .24s ease;
}

.dream-category:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 99, 206, .42);
  box-shadow: 0 18px 34px rgba(227,86,184,.12);
}

.dream-category-image {
  height: 90px;
  margin: 0 -14px 14px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.dream-category-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8,12,31,.96), rgba(8,12,31,.1));
}

.dream-category.people .dream-category-image { background-image: var(--dream-people-image), radial-gradient(circle at 50% 40%, rgba(255,99,206,.35), transparent 50%); }
.dream-category.animals .dream-category-image { background-image: var(--dream-animals-image), radial-gradient(circle at 50% 40%, rgba(88,189,255,.35), transparent 50%); }
.dream-category.nature .dream-category-image { background-image: var(--dream-nature-image), radial-gradient(circle at 50% 40%, rgba(145,223,107,.35), transparent 50%); }
.dream-category.objects .dream-category-image { background-image: var(--dream-objects-image), radial-gradient(circle at 50% 40%, rgba(255,180,68,.35), transparent 50%); }
.dream-category.places .dream-category-image { background-image: var(--dream-places-image), radial-gradient(circle at 50% 40%, rgba(88,189,255,.35), transparent 50%); }
.dream-category.emotions .dream-category-image { background-image: var(--dream-emotions-image), radial-gradient(circle at 50% 40%, rgba(255,95,175,.35), transparent 50%); }
.dream-category.actions .dream-category-image { background-image: var(--dream-actions-image), radial-gradient(circle at 50% 40%, rgba(255,135,72,.35), transparent 50%); }
.dream-category.spiritual .dream-category-image { background-image: var(--dream-spiritual-image), radial-gradient(circle at 50% 40%, rgba(200,117,255,.35), transparent 50%); }
.dream-category.life-events .dream-category-image { background-image: var(--dream-life-events-image), radial-gradient(circle at 50% 40%, rgba(255,180,68,.35), transparent 50%); }
.dream-category.nightmares .dream-category-image { background-image: var(--dream-nightmares-image), radial-gradient(circle at 50% 40%, rgba(88,189,255,.35), transparent 50%); }

.dream-category span {
  color: #ff72d0;
  font-size: 25px;
}

.dream-category span svg {
  width: 25px;
  height: 25px;
  display: block;
}

.dream-category h3 {
  display: inline-block;
  margin: 0 0 9px 10px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 16px;
  font-weight: 400;
}

.dream-category p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.5;
}

.popular-dreams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.popular-dreams-grid article,
.popular-dreams-grid a {
  min-height: 70px;
  display: grid;
  grid-template-columns: 54px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,31,.42);
  transition: .22s ease;
}

.popular-dreams-grid article:hover,
.popular-dreams-grid a:hover {
  transform: translateX(4px);
  border-color: rgba(255,99,206,.32);
}

.popular-dreams-grid span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 25px;
}

.popular-dreams-grid .purple { color: #c875ff; }
.popular-dreams-grid .pink { color: #ff5faf; }
.popular-dreams-grid .blue { color: #58bdff; }
.popular-dreams-grid .gold { color: #ffb444; }

.popular-dreams-grid span svg {
  width: 22px;
  height: 22px;
}

.popular-dreams-grid h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14px;
}

.popular-dreams-grid p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.45;
}

.popular-dreams-grid i {
  color: #ff89d7;
  font-style: normal;
  font-size: 26px;
}

.interpret-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 35px;
}

.interpret-flow article {
  position: relative;
  text-align: center;
  min-height: 185px;
}

.interpret-flow article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 48px;
  right: -22px;
  color: #ff70cf;
  font-size: 28px;
}

.interpret-flow em {
  position: absolute;
  left: 50%;
  top: -20px;
  width: 27px;
  height: 27px;
  transform: translateX(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #061022;
  font-style: normal;
  font-weight: 800;
}

.interpret-flow article:nth-child(1) em { background: #c875ff; }
.interpret-flow article:nth-child(2) em { background: #58bdff; }
.interpret-flow article:nth-child(3) em { background: #ffb444; }
.interpret-flow article:nth-child(4) em { background: #ff5faf; }
.interpret-flow article:nth-child(5) em { background: #a6e969; }

.interpret-flow span {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.025);
  font-size: 38px;
}

.interpret-flow .purple { color: #c875ff; }
.interpret-flow .blue { color: #58bdff; }
.interpret-flow .gold { color: #ffb444; }
.interpret-flow .pink { color: #ff5faf; }
.interpret-flow .green { color: #a6e969; }

.interpret-flow h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.interpret-flow article:nth-child(1) h3 { color: #c875ff; }
.interpret-flow article:nth-child(2) h3 { color: #58bdff; }
.interpret-flow article:nth-child(3) h3 { color: #ffb444; }
.interpret-flow article:nth-child(4) h3 { color: #ff5faf; }
.interpret-flow article:nth-child(5) h3 { color: #a6e969; }

.interpret-flow p {
  margin: 0 auto;
  max-width: 160px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1.55;
}

.dreams-bottom-grid {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 18px;
  margin-bottom: 20px;
}

.dreams-history-panel > p {
  max-width: 640px;
}

.dream-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
  text-align: center;
}

.dream-timeline span {
  display: block;
  height: 30px;
  margin-bottom: 8px;
  color: #ffb444;
  font-size: 30px;
}

.dream-timeline article:nth-child(2) span { color: #ffb444; }
.dream-timeline article:nth-child(3) span { color: #58bdff; }
.dream-timeline article:nth-child(4) span { color: #ff5faf; }

.dream-timeline h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 13px;
}

.dream-timeline p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.45;
}

.dreams-matter-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 22px;
  align-items: center;
}

.dreams-matter-layout ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.dreams-matter-layout li {
  margin-bottom: 13px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
}

.dreams-matter-layout li::before {
  content: "⊙";
  color: #ffb08a;
  margin-right: 10px;
}

.dream-door-placeholder {
  height: 210px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 54% 38%, rgba(200,117,255,.45), transparent 26%),
    linear-gradient(0deg, rgba(8,12,31,.2), rgba(8,12,31,.05)),
    var(--dream-door-image);
  background-size: cover;
  background-position: center;
  position: relative;
}

.dream-door-placeholder::before {
  content: "▯";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(200,117,255,.8);
  font-size: 145px;
  text-shadow: 0 0 40px rgba(200,117,255,.5);
}

.dreams-access-cta {
  min-height: 86px;
  border-radius: 13px;
  padding: 18px 28px;
  display: grid;
  grid-template-columns: 95px 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(255, 160, 224, .13);
}

.dreams-cta-symbol {
  width: 70px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #ff72d0;
  border: 1px solid rgba(255, 99, 206, .32);
  background:
    repeating-conic-gradient(rgba(255, 99, 206, .21) 0 1deg, transparent 1deg 30deg),
    rgba(255,255,255,.025);
  font-size: 42px;
  text-shadow: 0 0 18px rgba(255,99,206,.48);
}

.dreams-access-cta h2 {
  margin: 0 0 5px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}

.dreams-access-cta p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

.dreams-access-cta .reading-btn {
  min-width: 320px;
  height: 52px;
}

/* =========================================================
   TEAM PAGE
========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.team-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px;
  background: rgba(8,12,31,.42);
  cursor: pointer;
  transition: .24s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 99, 206, .4);
  box-shadow: 0 18px 34px rgba(227, 86, 184, .14);
}

.team-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.1);
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card-body {
  flex: 1;
}

.team-card-body h3 {
  margin: 0 0 4px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 19px;
  font-weight: 400;
}

.team-card-title {
  display: block;
  color: #ff67ce;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.team-card-location {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-bottom: 12px;
}

.team-card-location i {
  font-style: normal;
  color: #ffb444;
}

.team-card-body p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.55;
}

.team-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #ff90db;
}

@media (max-width: 1180px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TOOLS PAGE
========================================================= */

/* .dreams-hero (reused for this page's hero) reads --dreams-hero-image,
   which is normally only defined under .dreams-page - without this, the
   whole background shorthand fails silently and the hero renders flat.
   Reuses the homepage's own hero photo, since it's the one image already
   on the site that isn't tied to a single tool. */
.tools-page {
  --dreams-hero-image: url("assets/index-hero.png");
}

/* Logged-in state in the topbar (replaces Log In / Join Now once a session exists) */
.account-pill {
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 99, 206, .3);
  background: rgba(255, 99, 206, .08);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.account-pill i {
  font-style: normal;
  color: #ff90db;
}

.tool-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tool-spotlight-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,31,.42);
  transition: .24s ease;
  color: #fff;
}

.tool-spotlight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 99, 206, .4);
  box-shadow: 0 18px 34px rgba(227, 86, 184, .16);
}

.tool-spotlight-visual {
  position: relative;
  height: 130px;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}

.tool-spotlight-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,31,.2), rgba(8,12,31,.88));
}

.tool-spotlight-icon {
  position: relative;
  z-index: 1;
  font-size: 40px;
  color: #fff;
  text-shadow: 0 0 20px rgba(0,0,0,.55);
  white-space: nowrap;
}

.tool-spotlight-card.numerology .tool-spotlight-icon {
  font-size: 22px;
  letter-spacing: 1px;
}

.tool-spotlight-card.horoscope .tool-spotlight-visual {
  background-image: radial-gradient(circle at 30% 20%, rgba(255,184,108,.5), transparent 55%), linear-gradient(135deg, rgba(120,60,20,.55), rgba(15,10,30,.92));
}
.tool-spotlight-card.horoscope .tool-spotlight-icon { color: #ffbd66; }

.tool-spotlight-card.astrology .tool-spotlight-visual {
  background-image: linear-gradient(0deg, rgba(8,12,31,.55), rgba(8,12,31,.15)), var(--astrology-image);
}

.tool-spotlight-card.tarot .tool-spotlight-visual {
  background-image: linear-gradient(0deg, rgba(8,12,31,.55), rgba(8,12,31,.15)), var(--tarot-image);
}

.tool-spotlight-card.palm .tool-spotlight-visual {
  background-image: linear-gradient(0deg, rgba(8,12,31,.55), rgba(8,12,31,.15)), var(--palm-image);
}

.tool-spotlight-card.numerology .tool-spotlight-visual {
  background-image: radial-gradient(circle at 70% 20%, rgba(200,117,255,.5), transparent 55%), linear-gradient(135deg, rgba(80,30,110,.55), rgba(15,10,30,.92));
}
.tool-spotlight-card.numerology .tool-spotlight-icon { color: #c875ff; }

.tool-spotlight-card.moon .tool-spotlight-visual {
  background-image: linear-gradient(0deg, rgba(8,12,31,.55), rgba(8,12,31,.15)), var(--moon-image);
}

.tool-spotlight-card.dreams .tool-spotlight-visual {
  background-image: radial-gradient(circle at 30% 30%, rgba(255,99,206,.4), transparent 55%), linear-gradient(135deg, rgba(90,30,90,.55), rgba(15,10,30,.92));
}
.tool-spotlight-card.dreams .tool-spotlight-icon { color: #ff99e0; }

.tool-spotlight-card.guidance .tool-spotlight-visual {
  background-image: radial-gradient(circle at 70% 30%, rgba(255,184,108,.45), transparent 55%), linear-gradient(135deg, rgba(140,50,110,.55), rgba(15,10,30,.92));
}
.tool-spotlight-card.guidance .tool-spotlight-icon { color: #ffc987; }

.tool-spotlight-card.compatibility .tool-spotlight-visual {
  background-image: linear-gradient(0deg, rgba(8,12,31,.55), rgba(8,12,31,.15)), url("assets/compatibility-hero.png");
}

.tool-spotlight-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tool-spotlight-body h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}

.tool-spotlight-body p {
  margin: 0 0 14px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.55;
}

.tool-spotlight-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 111, 207, .25);
  background: rgba(255, 111, 207, .08);
  color: #ff90db;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.tool-spotlight-stat i {
  font-style: normal;
  color: #ffbd66;
}

.tool-spotlight-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #ff67ce;
}

.tool-spotlight-link i {
  font-style: normal;
  transition: transform .2s ease;
}

.tool-spotlight-card:hover .tool-spotlight-link i {
  transform: translateX(3px);
}

@media (max-width: 1180px) {
  .tool-spotlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tool-spotlight-grid {
    grid-template-columns: 1fr;
  }
}

/* Dreams effects */

.dreams-pulse {
  animation: dreamsPulse .36s ease both;
}

@keyframes dreamsPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .dream-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dreams-intro-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .dreams-intro-strip article:nth-child(2) {
    border-right: 0;
  }

  .dreams-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .popular-dreams-grid,
  .dreams-access-cta {
    grid-template-columns: 1fr;
  }

  .interpret-flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .interpret-flow article:nth-child(3)::after {
    display: none;
  }

  .dreams-access-cta {
    text-align: center;
  }

  .dreams-cta-symbol {
    margin: auto;
  }

  .dreams-access-cta .reading-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  .dreams-hero {
    padding: 28px 20px;
  }

  .dreams-hero h1 {
    font-size: 40px;
  }

  .dreams-intro-strip,
  .dream-category-grid,
  .interpret-flow,
  .dream-timeline,
  .dreams-matter-layout {
    grid-template-columns: 1fr;
  }

  .dreams-intro-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-bottom: 18px;
  }

  .dreams-intro-strip article:last-child {
    border-bottom: 0;
  }

  .interpret-flow article::after {
    display: none !important;
  }

  .dreams-section-heading {
    flex-direction: column;
  }

  .dream-door-placeholder {
    min-height: 180px;
  }
}

@media (max-width: 520px) {
  .dreams-panel {
    padding: 18px;
  }

  .dreams-hero h1 {
    font-size: 34px;
  }

  .dreams-intro-strip {
    padding: 18px;
  }

  .dreams-intro-strip article {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dream-icon {
    margin: auto;
  }

  .popular-dreams-grid article,
  .popular-dreams-grid a {
    grid-template-columns: 48px 1fr;
  }

  .popular-dreams-grid i {
    grid-column: 2;
  }
}
/* =========================================================
   ASTROVIA — DREAMS OBJECTS DETAIL PAGE
   Additions for dreams-objects.html
========================================================= */

.dream-detail-page {
  --dream-detail-hero-image: url("assets/dreams-objects-hero.jpg");
  --dream-object-keys-image: url("assets/dream-object-keys.jpg");
  --dream-object-money-image: url("assets/dream-object-money.jpg");
  --dream-object-phone-image: url("assets/dream-object-phone.jpg");
  --dream-object-car-image: url("assets/dream-object-car.jpg");
  --dream-object-house-image: url("assets/dream-object-house.jpg");
  --dream-object-clothes-image: url("assets/dream-object-clothes.jpg");
  --dream-object-books-image: url("assets/dream-object-books.jpg");
  --dream-object-mirror-image: url("assets/dream-object-mirror.jpg");
}

.dream-detail-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.dream-detail-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 54px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.dream-detail-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 72% 40%, rgba(255, 184, 108, .22), transparent 20%),
    radial-gradient(circle at 73% 40%, rgba(227, 86, 184, .15), transparent 38%),
    var(--dream-detail-hero-image);
  background-size: cover;
  background-position: center right;
}

.dream-detail-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.dream-detail-hero-copy {
  position: relative;
  z-index: 2;
}

.dream-detail-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.4vw, 62px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.dream-detail-hero h1::first-letter {
  color: #fff;
}

.dream-detail-hero-copy p {
  width: 580px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.dream-detail-intro-strip {
  min-height: 118px;
  margin: 0 0 20px;
  padding: 24px 32px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
}

.dream-detail-intro-strip article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.07);
}

.dream-detail-intro-strip article:last-child {
  border-right: 0;
}

.detail-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 36px;
}

.detail-icon.purple { color: #c875ff; }
.detail-icon.gold { color: #ffb444; }
.detail-icon.pink { color: #ff5faf; }

.dream-detail-intro-strip h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.dream-detail-intro-strip p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.55;
}

.dream-detail-main-grid {
  display: grid;
  grid-template-columns: 1.15fr .74fr;
  gap: 18px;
  margin-bottom: 22px;
  align-items: start;
}

.dream-detail-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.dream-detail-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.dream-detail-panel > p,
.dream-detail-heading p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
}

.dream-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.dream-search-box {
  width: 215px;
  height: 43px;
  position: relative;
  display: block;
}

.dream-search-box input {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5,8,22,.48);
  color: #fff;
  padding: 0 42px 0 14px;
  outline: 0;
}

.dream-search-box input:focus {
  border-color: rgba(255,99,206,.42);
  box-shadow: 0 0 24px rgba(255,99,206,.12);
}

.dream-search-box span {
  position: absolute;
  right: 14px;
  top: 10px;
  color: rgba(255,255,255,.76);
  font-size: 20px;
}

.object-list {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

.object-row {
  min-height: 105px;
  display: grid;
  grid-template-columns: 96px 1fr 110px 24px;
  gap: 18px;
  align-items: center;
  padding: 13px 16px;
  background: rgba(8,12,31,.4);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: .22s ease;
}

.object-row:last-child {
  border-bottom: 0;
}

.object-row.row-extra {
  display: none;
}

.object-row:hover {
  background: rgba(255,255,255,.035);
  transform: translateX(4px);
}

.object-thumb {
  width: 86px;
  height: 70px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.object-thumb svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

.object-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8,12,31,.52), rgba(8,12,31,.04));
}

.object-keys {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(255, 180, 68, .38), transparent 45%),
    var(--dream-object-keys-image);
}

.object-money {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(255, 180, 68, .34), transparent 45%),
    var(--dream-object-money-image);
}

.object-phone {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(88, 189, 255, .34), transparent 45%),
    var(--dream-object-phone-image);
}

.object-car {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(88, 189, 255, .27), transparent 45%),
    var(--dream-object-car-image);
}

.object-house {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(255, 180, 68, .28), transparent 45%),
    var(--dream-object-house-image);
}

.object-clothes {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(255, 99, 206, .28), transparent 45%),
    var(--dream-object-clothes-image);
}

.object-books {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(255, 184, 108, .26), transparent 45%),
    var(--dream-object-books-image);
}

.object-mirror {
  background-image:
    radial-gradient(circle at 45% 42%, rgba(88, 189, 255, .30), transparent 45%),
    var(--dream-object-mirror-image);
}

/* Generic tint fallback for the 142 symbols with no hand-crafted thumb
   image (only 8 objects have one) - a colored radial gradient instead of
   a broken/empty box, cycled by dream_thumb_class() in dreams_data.php. */
.object-thumb.tint-gold {
  background-image: radial-gradient(circle at 45% 42%, rgba(255, 180, 68, .4), transparent 70%), linear-gradient(145deg, rgba(22, 17, 43, .8), rgba(8, 11, 30, .9));
}

.object-thumb.tint-blue {
  background-image: radial-gradient(circle at 45% 42%, rgba(88, 189, 255, .4), transparent 70%), linear-gradient(145deg, rgba(22, 17, 43, .8), rgba(8, 11, 30, .9));
}

.object-thumb.tint-pink {
  background-image: radial-gradient(circle at 45% 42%, rgba(255, 99, 206, .4), transparent 70%), linear-gradient(145deg, rgba(22, 17, 43, .8), rgba(8, 11, 30, .9));
}

.object-thumb.tint-purple {
  background-image: radial-gradient(circle at 45% 42%, rgba(200, 117, 255, .4), transparent 70%), linear-gradient(145deg, rgba(22, 17, 43, .8), rgba(8, 11, 30, .9));
}

.object-row h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.object-row p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.5;
}

.object-row em {
  justify-self: center;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid rgba(255,99,206,.35);
  color: #ff89d7;
  background: rgba(255,99,206,.08);
  font-size: 11px;
  font-style: normal;
}

.object-row em.green {
  color: #a6e969;
  border-color: rgba(166,233,105,.35);
  background: rgba(166,233,105,.08);
}

.object-row em.blue {
  color: #58bdff;
  border-color: rgba(88,189,255,.35);
  background: rgba(88,189,255,.08);
}

.object-row em.orange {
  color: #ff9d42;
  border-color: rgba(255,157,66,.35);
  background: rgba(255,157,66,.08);
}

.object-row i {
  color: #fff;
  font-style: normal;
  font-size: 26px;
}

.view-more-objects {
  width: 100%;
  height: 48px;
  margin-top: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,99,206,.32);
  background: rgba(255,99,206,.045);
  color: #ff89d7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: .24s ease;
}

.view-more-objects:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255,99,206,.16);
}

.view-more-objects span {
  margin-left: 16px;
}

.dream-detail-side-stack {
  display: grid;
  gap: 18px;
}

.object-meaning-panel {
  min-height: 520px;
}

.meaning-list {
  margin-top: 26px;
}

.meaning-list article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.meaning-list span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 25px;
}

.meaning-list .purple { color: #c875ff; }
.meaning-list .pink { color: #ff5faf; }
.meaning-list .gold { color: #ffb444; }
.meaning-list .green { color: #a6e969; }

.meaning-list h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.meaning-list article:nth-child(1) h3 { color: #c875ff; }
.meaning-list article:nth-child(2) h3 { color: #ff5faf; }
.meaning-list article:nth-child(3) h3 { color: #ffb444; }
.meaning-list article:nth-child(4) h3 { color: #a6e969; }

.meaning-list p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.5;
}

.remember-box {
  margin-top: 26px;
  padding: 22px 20px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  background: linear-gradient(135deg, rgba(227,86,184,.16), rgba(8,12,31,.68));
  border: 1px solid rgba(255, 99, 206, .12);
}

.remember-box > span {
  color: #ff89d7;
  font-size: 38px;
}

.remember-box h3 {
  margin: 0 0 7px;
  color: #ff89d7;
  font-size: 15px;
}

.remember-box p {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.55;
}

.guide-steps-panel {
  min-height: 370px;
}

.guide-steps {
  margin-top: 25px;
}

.guide-steps article {
  display: grid;
  grid-template-columns: 34px 1fr 44px;
  gap: 15px;
  align-items: center;
  position: relative;
  padding-bottom: 22px;
}

.guide-steps article:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,99,206,.8), rgba(255,180,68,.65), rgba(166,233,105,.55));
}

.guide-steps em {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  color: #ff89d7;
  background: #0b1026;
  font-style: normal;
  font-weight: 700;
  z-index: 2;
}

.guide-steps article:nth-child(2) em { color: #c875ff; }
.guide-steps article:nth-child(3) em { color: #ffb444; }
.guide-steps article:nth-child(4) em { color: #a6e969; }

.guide-steps h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 14px;
}

.guide-steps p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.45;
}

.guide-steps span {
  justify-self: end;
  color: #ff89d7;
  font-size: 32px;
}

.guide-steps article:nth-child(2) span { color: #c875ff; }
.guide-steps article:nth-child(3) span { color: #ffb444; }
.guide-steps article:nth-child(4) span { color: #ffb444; }

/* Effects */

.dream-detail-pulse {
  animation: dreamDetailPulse .36s ease both;
}

@keyframes dreamDetailPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .dream-detail-main-grid {
    grid-template-columns: 1fr;
  }

  .dream-detail-side-stack {
    grid-template-columns: 1fr 1fr;
  }

  .object-meaning-panel,
  .guide-steps-panel {
    min-height: auto;
  }
}

@media (max-width: 1180px) {
  .dream-detail-intro-strip {
    grid-template-columns: 1fr;
  }

  .dream-detail-intro-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding-bottom: 18px;
  }

  .dream-detail-intro-strip article:last-child {
    border-bottom: 0;
  }

  .dream-detail-side-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .dream-detail-hero {
    padding: 28px 20px;
  }

  .dream-detail-hero h1 {
    font-size: 39px;
  }

  .dream-detail-heading {
    flex-direction: column;
  }

  .dream-search-box {
    width: 100%;
  }

  .object-row {
    grid-template-columns: 82px 1fr;
  }

  .object-row em,
  .object-row i {
    grid-column: 2;
    justify-self: start;
  }

  .object-thumb {
    width: 74px;
    height: 62px;
  }

  .remember-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .dream-detail-panel {
    padding: 18px;
  }

  .dream-detail-hero h1 {
    font-size: 34px;
  }

  .dream-detail-intro-strip {
    padding: 18px;
  }

  .dream-detail-intro-strip article {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .detail-icon {
    margin: auto;
  }

  .meaning-list article,
  .guide-steps article {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .guide-steps article:not(:last-child)::before {
    display: none;
  }

  .guide-steps span {
    justify-self: start;
  }
}
/* =========================================================
   ASTROVIA — GUIDANCE PAGE
   Additions for guidance.html
========================================================= */

.guidance-page {
  --guidance-hero-image: url("assets/guidance-hero.jpg");
  --guidance-love-image: url("assets/guidance-love.jpg");
  --guidance-tarot-image: url("assets/guidance-tarot.jpg");
  --guidance-moon-image: url("assets/guidance-moon.jpg");
}

.guidance-page .top-nav .top-active {
  color: #fff;
  position: relative;
}

.guidance-page .top-nav .top-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 72px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #ff63ce, transparent);
  box-shadow: 0 0 16px rgba(255, 99, 206, .85);
}

.guidance-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: grid;
  grid-template-columns: minmax(440px, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 72% 42%, rgba(255, 184, 108, .20), transparent 23%),
    radial-gradient(circle at 73% 41%, rgba(227, 86, 184, .16), transparent 38%),
    var(--guidance-hero-image);
  background-size: cover;
  background-position: center right;
}

.guidance-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.guidance-hero > * {
  position: relative;
  z-index: 2;
}

.guidance-hero h1 {
  margin: 0 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.guidance-hero-copy p {
  width: 450px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.78;
}

.guidance-date-card {
  justify-self: end;
  align-self: start;
  margin-top: 34px;
  min-width: 210px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.guidance-date-card strong {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.guidance-date-card span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tiny-moon {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d6c5b2 32%, #756b78 88%);
  box-shadow: inset -5px -5px 9px rgba(0,0,0,.35);
}

.guidance-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.guidance-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}

.guidance-panel > p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.6;
}

.guidance-top-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr .82fr;
  gap: 18px;
  margin-bottom: 18px;
}

.overall-energy-card {
  min-height: 335px;
}

.overall-energy-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}

.guidance-energy-ring {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  background: conic-gradient(#ff5faf 0 83%, rgba(255,255,255,.12) 83% 100%);
  box-shadow: 0 0 30px rgba(255,95,175,.23);
}

.guidance-energy-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #0b1026;
}

.guidance-energy-ring strong,
.guidance-energy-ring span {
  position: relative;
  z-index: 1;
}

.guidance-energy-ring strong {
  align-self: end;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
}

.guidance-energy-ring span {
  align-self: start;
  color: rgba(255,255,255,.84);
  font-size: 13px;
}

.energy-list h3 {
  margin: 0 0 13px;
  color: #a6e969;
  font-size: 13px;
}

.energy-list .avoid-title {
  margin-top: 25px;
  color: #ff5f65;
}

.energy-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.energy-list li {
  margin-bottom: 11px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.energy-list .good-list li::before {
  content: "✓";
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid #a6e969;
  color: #a6e969;
  font-size: 10px;
}

.energy-list .avoid-list li::before {
  content: "×";
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ff5f65;
  color: #ff5f65;
  font-size: 10px;
}

.today-focus-card {
  min-height: 335px;
}

.focus-icon {
  margin-top: 28px;
  color: #c875ff;
  font-size: 45px;
  line-height: 1;
}

.today-focus-card h3 {
  margin: 10px 0 16px;
  color: #d68aff;
  font-family: Cinzel, Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.today-focus-card p {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.6;
}

.focus-tags-label {
  margin-top: 25px;
  color: rgba(255,255,255,.8);
  font-size: 12px;
}

.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.focus-tags span {
  padding: 8px 11px;
  border-radius: 6px;
  border: 1px solid rgba(255,99,206,.24);
  color: #ffd0f0;
  background: rgba(255,99,206,.11);
  font-size: 11px;
}

.focus-note {
  margin-top: 28px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px !important;
}

.daily-affirmation-card {
  min-height: 335px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.quote-mark {
  margin: auto 0 6px;
  color: #c875ff;
  font-size: 70px;
  line-height: .7;
  font-family: Georgia, serif;
}

.daily-affirmation-card p {
  margin: 0 auto;
  max-width: 260px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 25px;
  line-height: 1.45;
}

.affirmation-star {
  width: 70px;
  margin: auto auto 0;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #ff8ed8;
  font-size: 18px;
}

.guidance-middle-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.decisions-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}

.decision-box {
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,31,.43);
}

.decision-box-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.decision-box h3 {
  margin: 0;
  font-size: 16px;
}

.decision-box.good h3 {
  color: #a6e969;
}

.decision-box.avoid h3 {
  color: #ff5f65;
}

.decision-box-heading span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
}

.decision-box.good .decision-box-heading span {
  color: #a6e969;
}

.decision-box.avoid .decision-box-heading span {
  color: #ff5f65;
}

.decision-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.decision-box li {
  margin-bottom: 13px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}

.decision-box.good li::before {
  content: "✓";
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid #a6e969;
  color: #a6e969;
  font-size: 10px;
}

.decision-box.avoid li::before {
  content: "×";
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ff5f65;
  color: #ff5f65;
  font-size: 10px;
}

.compass-list {
  margin-top: 24px;
}

.compass-list article {
  display: grid;
  grid-template-columns: 38px 110px 1fr 45px;
  gap: 13px;
  align-items: center;
  margin-bottom: 22px;
}

.compass-list span {
  font-size: 27px;
}

.compass-list .orange { color: #ff9e42; }
.compass-list .gold { color: #ffbf47; }
.compass-list .blue { color: #63c9ff; }
.compass-list .yellow { color: #ffce59; }
.compass-list .pink { color: #ff5faf; }

.compass-list strong {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

.compass-list i {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}

.compass-list i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a6bff, #d879ff);
}

.compass-list article:nth-child(2) i b,
.compass-list article:nth-child(5) i b {
  background: linear-gradient(90deg, #ff5faf, #ff7c8f);
}

.compass-list article:nth-child(3) i b {
  background: linear-gradient(90deg, #58bdff, #83d0ff);
}

.compass-list article:nth-child(4) i b {
  background: linear-gradient(90deg, #ff9e42, #ffc75e);
}

.compass-list em {
  color: rgba(255,255,255,.84);
  font-style: normal;
  font-size: 13px;
}

.recommendations-panel {
  margin-bottom: 18px;
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.recommendation-card {
  min-height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(8,12,31,.45);
}

.recommendation-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.recommendation-card.love .recommendation-image {
  background:
    linear-gradient(90deg, rgba(8,12,31,.86), rgba(8,12,31,.24)),
    radial-gradient(circle at 65% 36%, rgba(255,95,175,.42), transparent 28%),
    var(--guidance-love-image);
}

.recommendation-card.tarot .recommendation-image {
  background:
    linear-gradient(90deg, rgba(8,12,31,.86), rgba(8,12,31,.24)),
    radial-gradient(circle at 65% 36%, rgba(255,184,108,.34), transparent 28%),
    var(--guidance-tarot-image);
}

.recommendation-card.moon .recommendation-image {
  background:
    linear-gradient(90deg, rgba(8,12,31,.86), rgba(8,12,31,.24)),
    radial-gradient(circle at 70% 34%, rgba(88,189,255,.34), transparent 28%),
    var(--guidance-moon-image);
}

.recommendation-content {
  position: relative;
  z-index: 2;
  max-width: 245px;
  padding: 24px 18px;
}

.recommendation-content span {
  display: block;
  margin-bottom: 16px;
  color: #ff5faf;
  font-size: 42px;
  line-height: 1;
}

.recommendation-card.tarot span {
  color: #ffb444;
}

.recommendation-card.moon span {
  color: #75b9ff;
}

.recommendation-content h3 {
  margin: 0 0 12px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.recommendation-content p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.55;
}

.recommendation-content a {
  width: 155px;
  height: 36px;
  border-radius: 7px;
  border: 1px solid rgba(255,99,206,.34);
  color: #ff8ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
}

.guidance-card-grid {
  display: grid;
  grid-template-columns: .88fr .66fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.challenge-main {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: center;
  margin: 28px 0 26px;
}

.challenge-main span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #ff5faf;
  border: 1px solid rgba(255,95,175,.36);
  border-radius: 50%;
  font-size: 34px;
}

.challenge-main p {
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.35;
}

.bonus-box {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,184,108,.18);
  background: rgba(8,12,31,.45);
}

.bonus-box > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffb444;
  color: #ffb444;
  font-size: 24px;
}

.bonus-box h3 {
  margin: 0 0 5px;
  color: #ffb444;
  font-size: 13px;
}

.bonus-box p {
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.45;
}

.reflection-card {
  text-align: center;
}

.reflection-symbol {
  margin: 28px auto 14px;
  color: #ff5faf;
  font-size: 55px;
}

.reflection-card p {
  margin: 0 auto 28px;
  max-width: 220px;
  color: #fff;
  font-size: 20px;
  line-height: 1.45;
}

.reflect-button {
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,99,206,.2);
  background: rgba(255,99,206,.08);
  color: #ffb7e6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.lucky-list {
  margin-top: 23px;
}

.lucky-list article {
  display: grid;
  grid-template-columns: 40px 1fr 100px;
  gap: 13px;
  align-items: center;
  padding: 11px 13px;
  margin-bottom: 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}

.lucky-list span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #d78aff;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.lucky-list span.green { color: #a6e969; }
.lucky-list span.lime { color: #b8f76e; }

.lucky-list strong {
  color: #fff;
  font-size: 13px;
}

.lucky-list p {
  margin: 2px 0 0;
  color: rgba(255,255,255,.67);
  font-size: 11px;
}

.lucky-list em {
  color: #ffb444;
  font-style: normal;
  letter-spacing: 2px;
  font-size: 15px;
}

.lucky-moments-card small {
  display: block;
  text-align: center;
  color: rgba(255,255,255,.54);
  font-size: 11px;
}

.guidance-bottom-grid {
  display: grid;
  grid-template-columns: .8fr 1.35fr;
  gap: 18px;
  margin-bottom: 18px;
}

.weekly-direction-inner {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.week-card {
  min-height: 116px;
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 13px;
  padding: 17px;
  border-radius: 10px;
  background: rgba(8,12,31,.48);
  border: 1px solid rgba(255,255,255,.08);
}

.week-card span {
  color: #a6e969;
  font-size: 33px;
}

.week-card.next span {
  color: #ff5faf;
}

.week-card small {
  color: #a6e969;
  font-size: 11px;
}

.week-card.next small {
  color: #ff5faf;
}

.week-card h3 {
  margin: 4px 0 8px;
  font-size: 17px;
}

.week-card.current h3 {
  color: #a6e969;
}

.week-card.next h3 {
  color: #ff5faf;
}

.week-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  line-height: 1.45;
}

.week-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,12,31,.55);
  color: #fff;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 25px;
}

.snapshot-grid article {
  min-height: 118px;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.snapshot-grid article:last-child {
  border-right: 0;
}

.snapshot-grid span {
  display: block;
  height: 42px;
  margin-bottom: 11px;
  font-size: 37px;
  line-height: 1;
  background: none;
}

.snapshot-grid .sun { color: #ff9e42; }
.snapshot-grid .moon { color: #c875ff; }
.snapshot-grid .rising { color: #ffb444; }
.snapshot-grid .path { color: #58bdff; }
.snapshot-grid .lucky-number { color: #a6e969; font-family: Cinzel, Georgia, serif; }
.snapshot-grid .lucky-color { color: #ff5faf; }

.snapshot-grid strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.snapshot-grid p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 11px;
}

/* Effects */

.guidance-pulse {
  animation: guidancePulse .36s ease both;
}

@keyframes guidancePulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .guidance-top-grid,
  .guidance-middle-grid,
  .guidance-card-grid,
  .guidance-bottom-grid {
    grid-template-columns: 1fr;
  }

  .recommendation-grid {
    grid-template-columns: 1fr;
  }

  .guidance-top-grid .guidance-panel {
    min-height: auto;
  }

  .snapshot-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 0;
  }

  .snapshot-grid article:nth-child(3) {
    border-right: 0;
  }
}

@media (max-width: 1180px) {
  .guidance-hero {
    grid-template-columns: 1fr;
  }

  .guidance-date-card {
    justify-self: start;
  }

  .overall-energy-layout,
  .decisions-inner {
    grid-template-columns: 1fr;
  }

  .guidance-energy-ring {
    margin: auto;
  }
}

@media (max-width: 820px) {
  .guidance-hero {
    padding: 28px 20px;
  }

  .guidance-hero h1 {
    font-size: 40px;
  }

  .compass-list article,
  .lucky-list article {
    grid-template-columns: 36px 1fr;
  }

  .compass-list i,
  .compass-list em,
  .lucky-list em {
    grid-column: 2;
  }

  .weekly-direction-inner {
    grid-template-columns: 1fr;
  }

  .week-arrow {
    margin: auto;
    transform: rotate(90deg);
  }

  .snapshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .snapshot-grid article:nth-child(2),
  .snapshot-grid article:nth-child(4) {
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .guidance-panel {
    padding: 18px;
  }

  .guidance-hero h1 {
    font-size: 34px;
  }

  .daily-affirmation-card p {
    font-size: 21px;
  }

  .recommendation-content {
    max-width: none;
  }

  .snapshot-grid {
    grid-template-columns: 1fr;
  }

  .snapshot-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 16px;
  }

  .snapshot-grid article:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   ASTROVIA — CONTACT PAGE
   Additions for contact.html
========================================================= */

.contact-page {
  --contact-hero-image: url("assets/contact-hero.jpg");
}

.contact-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 62% 42%, rgba(255, 99, 206, .23), transparent 25%),
    radial-gradient(circle at 62% 42%, rgba(255, 184, 108, .16), transparent 18%),
    var(--contact-hero-image);
  background-size: cover;
  background-position: center right;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.contact-hero-copy {
  position: relative;
  z-index: 2;
}

.contact-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.contact-hero-copy p {
  width: 610px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 16px;
  line-height: 1.78;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 18px;
  margin-bottom: 20px;
}

.contact-panel {
  border-radius: 13px;
  padding: 28px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.contact-panel h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 27px;
  font-weight: 400;
}

.contact-panel > p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  line-height: 1.6;
}

.contact-form {
  margin-top: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 14px;
}

.contact-form span {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 13px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(5,8,22,.42);
  color: rgba(255,255,255,.92);
  outline: 0;
  transition: .22s ease;
}

.contact-form input,
.contact-form select {
  height: 42px;
  padding: 0 14px;
}

.contact-form textarea {
  min-height: 105px;
  padding: 14px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(255,99,206,.42);
  box-shadow: 0 0 24px rgba(255,99,206,.12);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,.45);
}

.contact-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.contact-submit-button {
  width: 100%;
  height: 52px;
  margin-top: 3px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #e65bac, #bd1f7d);
  box-shadow: 0 14px 32px rgba(227,86,184,.24);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .7px;
  transition: .24s ease;
}

.contact-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(227,86,184,.34);
}

.contact-submit-button span {
  display: inline;
  margin: 0 10px 0 0;
  color: #fff;
  font-size: 20px;
}

.contact-form small {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.contact-form small::first-letter {
  color: #ff9b79;
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 34px;
  margin-top: 30px;
}

.help-grid article {
  min-height: 76px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
}

.help-grid article:empty {
  display: block;
}

.help-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.025);
  font-size: 30px;
}

.help-icon.purple {
  color: #d875ff;
  background: rgba(216,117,255,.08);
}

.help-icon.orange {
  color: #ff8a5c;
  background: rgba(255,138,92,.08);
}

.help-icon.pink {
  color: #ff5faf;
  background: rgba(255,95,175,.08);
}

.help-grid h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.help-grid p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}

.faq-panel {
  margin-bottom: 22px;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 58px;
  margin-top: 20px;
}

.faq-item {
  height: 39px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(5,8,22,.46);
  color: rgba(255,255,255,.86);
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 0 13px;
  cursor: pointer;
  transition: .22s ease;
}

.faq-item:hover,
.faq-item.active {
  border-color: rgba(255,99,206,.35);
  background: rgba(255,99,206,.06);
}

.faq-item span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ff8ed8;
  color: #ff8ed8;
  font-size: 13px;
}

.faq-item i {
  color: rgba(255,255,255,.78);
  font-style: normal;
  font-size: 16px;
  transition: .22s ease;
}

.faq-item.active i {
  transform: rotate(180deg);
}

.help-center-button {
  width: fit-content;
  min-width: 315px;
  height: 42px;
  margin: 18px auto 0;
  border-radius: 7px;
  border: 1px solid rgba(255,99,206,.32);
  color: #ff89d7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 14px;
  transition: .22s ease;
}

.help-center-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(255,99,206,.16);
}

.contact-footer {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 2px 20px;
  color: rgba(255,255,255,.58);
}

.contact-footer p {
  margin: 0;
}

.contact-footer nav {
  display: flex;
  gap: 76px;
}

.contact-footer a {
  color: rgba(255,255,255,.6);
  transition: .2s ease;
}

.contact-footer a:hover {
  color: #ff8ed8;
}

/* Contact effects */

.contact-pulse {
  animation: contactPulse .36s ease both;
}

@keyframes contactPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .contact-main-grid {
    grid-template-columns: 1fr;
  }

  .contact-footer nav {
    gap: 34px;
  }
}

@media (max-width: 1180px) {
  .help-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .contact-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  .contact-hero {
    padding: 28px 20px;
  }

  .contact-hero h1 {
    font-size: 42px;
  }

  .contact-panel {
    padding: 22px;
  }

  .help-grid article {
    grid-template-columns: 54px 1fr;
  }

  .help-icon {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
}

@media (max-width: 520px) {
  .contact-hero h1 {
    font-size: 35px;
  }

  .contact-panel {
    padding: 18px;
  }

  .help-grid article {
    grid-template-columns: 1fr;
  }

  .help-center-button {
    min-width: 0;
    width: 100%;
  }

  .contact-footer nav {
    gap: 18px;
    flex-direction: column;
  }
}

/* =========================================================
   ASTROVIA — PRIVACY POLICY PAGE
   Additions for privacy-policy.html
========================================================= */

.policy-page {
  --policy-hero-image: url("assets/privacy-policy-hero.jpg");
}

.policy-hero {
  min-height: 255px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 62% 42%, rgba(255, 99, 206, .24), transparent 25%),
    radial-gradient(circle at 62% 42%, rgba(255, 184, 108, .13), transparent 17%),
    var(--policy-hero-image);
  background-size: cover;
  background-position: center right;
}

.policy-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.policy-hero-copy {
  position: relative;
  z-index: 2;
}

.policy-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.policy-hero-copy p {
  width: 610px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 16px;
  line-height: 1.78;
}

.policy-content-card {
  max-width: 1210px;
  margin: 0 0 22px;
  padding: 30px 32px 28px;
  border-radius: 13px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.policy-updated {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
}

.policy-updated span {
  color: #ff5faf;
}

.policy-intro {
  margin: 0 0 28px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

.policy-section {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 30px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(255,255,255,.095);
}

.policy-section:first-of-type {
  padding-top: 0;
}

.policy-section.last {
  border-bottom: 0;
  padding-bottom: 0;
}

.policy-icon {
  width: 66px;
  height: 66px;
  margin-top: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 117, 255, .38);
  color: #d875ff;
  background: rgba(216,117,255,.07);
  font-size: 36px;
  line-height: 1;
  box-shadow: 0 0 22px rgba(216,117,255,.08);
}

.policy-icon.pink {
  border-color: rgba(255, 95, 175, .38);
  color: #ff5faf;
  background: rgba(255,95,175,.07);
}

.policy-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 400;
}

.policy-copy p {
  max-width: 930px;
  margin: 0 0 13px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.65;
}

.policy-copy ul {
  margin: 0 0 14px 18px;
  padding-left: 16px;
}

.policy-copy li {
  margin-bottom: 6px;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.45;
}

.policy-email {
  color: #ff5faf;
  font-size: 14px;
  font-weight: 600;
}

.policy-footer {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 2px 20px;
  color: rgba(255,255,255,.58);
}

.policy-footer p {
  margin: 0;
}

.policy-footer nav {
  display: flex;
  gap: 76px;
}

.policy-footer a {
  color: rgba(255,255,255,.6);
  transition: .2s ease;
}

.policy-footer a:hover,
.policy-footer a.active {
  color: #ff5faf;
}

/* Privacy policy effects */

.policy-pulse {
  animation: policyPulse .36s ease both;
}

@keyframes policyPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .policy-footer nav {
    gap: 34px;
  }
}

@media (max-width: 1180px) {
  .policy-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .policy-footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  .policy-hero {
    padding: 28px 20px;
  }

  .policy-hero h1 {
    font-size: 42px;
  }

  .policy-content-card {
    padding: 24px 22px;
  }

  .policy-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .policy-icon {
    width: 58px;
    height: 58px;
    font-size: 31px;
  }

  .policy-copy h2 {
    font-size: 23px;
  }
}

@media (max-width: 520px) {
  .policy-hero h1 {
    font-size: 35px;
  }

  .policy-content-card {
    padding: 20px 18px;
  }

  .policy-footer nav {
    gap: 18px;
    flex-direction: column;
  }
}
/* =========================================================
   ASTROVIA — TERMS AND CONDITIONS PAGE
   Additions for terms.html
========================================================= */

.terms-page {
  --terms-hero-image: url("assets/terms-hero.jpg");
}

.terms-hero {
  min-height: 255px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 20px 34px 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 70%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 62% 42%, rgba(255, 99, 206, .24), transparent 25%),
    radial-gradient(circle at 62% 42%, rgba(255, 184, 108, .13), transparent 17%),
    var(--terms-hero-image);
  background-size: cover;
  background-position: center right;
}

.terms-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 95px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.terms-hero .policy-hero-copy {
  position: relative;
  z-index: 2;
}

.terms-hero h1 {
  margin: 19px 0 18px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(44px, 4.7vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.terms-hero .policy-hero-copy p {
  width: 650px;
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 16px;
  line-height: 1.78;
}

.terms-update-card {
  max-width: 1210px;
  margin: 0 0 28px;
  padding: 28px 32px;
  border-radius: 13px;
  border: 1px solid rgba(255, 99, 206, .32);
  background:
    linear-gradient(135deg, rgba(22, 18, 48, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.terms-update-card .policy-updated {
  margin-bottom: 20px;
}

.terms-update-card p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.65;
}

.terms-content-list {
  max-width: 1210px;
  margin-bottom: 22px;
}

.terms-section {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.095);
}

.terms-section:first-child {
  padding-top: 0;
}

.terms-section.last {
  border-bottom: 0;
  padding-bottom: 0;
}

.terms-section .policy-icon {
  width: 66px;
  height: 66px;
  margin-top: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 117, 255, .38);
  color: #d875ff;
  background: rgba(216,117,255,.07);
  font-size: 36px;
  line-height: 1;
  box-shadow: 0 0 22px rgba(216,117,255,.08);
}

.terms-section .policy-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 400;
}

.terms-section .policy-copy p {
  max-width: 960px;
  margin: 0 0 13px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.65;
}

/* Reuse footer from privacy policy, with active terms link */
.terms-page .policy-footer a.active {
  color: #ff5faf;
}

/* Terms effects */

.terms-pulse {
  animation: termsPulse .36s ease both;
}

@keyframes termsPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 820px) {
  .terms-hero {
    padding: 28px 20px;
  }

  .terms-hero h1 {
    font-size: 42px;
  }

  .terms-update-card {
    padding: 24px 22px;
  }

  .terms-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .terms-section .policy-icon {
    width: 58px;
    height: 58px;
    font-size: 31px;
  }

  .terms-section .policy-copy h2 {
    font-size: 23px;
  }
}

@media (max-width: 520px) {
  .terms-hero h1 {
    font-size: 35px;
  }

  .terms-update-card {
    padding: 20px 18px;
  }
}
/* =========================================================
   ASTROVIA — LOGIN PAGE
   Additions for login.html
========================================================= */

.login-page {
  --login-testimonial-one: url("assets/login-testimonial-sarah.jpg");
  --login-testimonial-two: url("assets/login-testimonial-daniel.jpg");
}

.login-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 660px;
  margin: 6px 0 28px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.login-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 56px;
  background:
    linear-gradient(100deg, rgba(4,7,19,.94) 0%, rgba(6,9,23,.6) 46%, rgba(6,9,23,.24) 100%),
    linear-gradient(0deg, rgba(4,7,19,.9), transparent 55%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

.login-visual-copy {
  position: relative;
  z-index: 2;
  max-width: 440px;
}

.login-visual-copy h1 {
  margin: 14px 0 0;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(38px, 3.6vw, 50px);
  line-height: 1.08;
  font-weight: 400;
  text-shadow: 0 16px 34px rgba(0,0,0,.35);
}

.login-visual-divider {
  width: 150px;
  margin: 20px 0 18px !important;
}

.login-visual-copy > p {
  margin: 0 0 22px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.65;
}

.login-visual-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.login-visual-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
}

.login-visual-points li span {
  color: #ff8ed8;
}

.login-visual-pricing {
  position: absolute;
  z-index: 2;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  width: 310px;
  max-width: 100%;
  padding: 34px 30px 30px;
  border-radius: 16px;
  text-align: center;
  border-color: rgba(255, 99, 206, .32);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.login-visual-pricing-badge {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e65bac, #bd1f7d);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
}

.login-visual-pricing-free {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}

.login-visual-pricing-free strong {
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.login-visual-pricing-free span {
  color: #ff6fce;
  font-family: Cinzel, Georgia, serif;
  font-size: 38px;
  line-height: 1;
}

.login-visual-pricing-then {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  letter-spacing: .5px;
}

.login-visual-pricing-then span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 99, 206, .5), transparent);
}

.login-visual-pricing-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.login-visual-pricing-price strong {
  color: #ffbd66;
  font-family: Cinzel, Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.login-visual-pricing-price span {
  color: #ffbd66;
  font-size: 14px;
}

.login-visual-pricing-perks {
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  list-style: none;
  display: grid;
  gap: 12px;
  text-align: left;
}

.login-visual-pricing-perks li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
}

.login-visual-pricing-perks li span {
  color: #ff6fce;
  font-size: 16px;
}

.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: linear-gradient(165deg, rgba(11,19,39,.96), rgba(8,12,31,.98));
}

/* Forgot/reset password - lighter utility pages, no split-screen visual,
   just the shared form card centered with some breathing room. */
.forgot-password-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 80px 20px;
}

.forgot-password-section .login-form-card {
  max-width: 440px;
}

.login-form-card {
  width: 100%;
  max-width: 400px;
  padding: 44px 36px;
  border-radius: 13px;
  border-color: rgba(255, 99, 206, .28);
}

.login-form-card h2 {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-size: 32px;
  font-weight: 400;
}

.form-star-divider {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  align-items: center;
  gap: 10px;
  width: 150px;
  margin: 15px auto 18px;
}

.form-star-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 111, 206, .52), transparent);
}

.form-star-divider i {
  color: #ffd4f0;
  font-style: normal;
  font-size: 13px;
}

.login-form-card > p {
  margin: 0 0 28px;
  text-align: center;
  color: rgba(255,255,255,.78);
  font-size: 14px;
}

.login-form label {
  display: block;
  margin-bottom: 23px;
}

.login-form label > span {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 14px;
}

.login-input-wrap {
  position: relative;
}

.login-input-wrap input {
  width: 100%;
  height: 50px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,8,22,.48);
  color: #fff;
  padding: 0 48px;
  outline: 0;
  transition: .22s ease;
}

.login-input-wrap input:focus {
  border-color: rgba(255,99,206,.42);
  box-shadow: 0 0 24px rgba(255,99,206,.12);
}

.login-input-wrap input::placeholder {
  color: rgba(255,255,255,.48);
}

.login-input-wrap > i {
  position: absolute;
  left: 18px;
  top: 14px;
  color: #ff6fce;
  font-style: normal;
  font-size: 19px;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.58);
  font-size: 18px;
  cursor: pointer;
}

.forgot-password {
  display: block;
  margin: -9px 0 31px;
  text-align: right;
  color: #ff6fce;
  font-size: 14px;
}

.login-submit-button {
  width: 100%;
  height: 55px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #e65bac, #bd1f7d);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: .24s ease;
}

.login-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(227,86,184,.34);
}

.login-submit-button span {
  margin-left: 10px;
}

.join-link {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  color: rgba(255,255,255,.76);
  font-size: 14px;
}

.join-link a {
  color: #ff6fce;
  margin-left: 8px;
}

/* =========================================================
   REGISTER PAGE
   Reuses .login-form / .login-input-wrap / .login-submit-button etc. from
   the login page for visual consistency - only what's genuinely new to
   registration (sections, grid, city autocomplete, terms, errors) below.
========================================================= */

.register-hero {
  margin-bottom: 18px;
  padding: 20px 6px 8px;
}

.register-hero .breadcrumb {
  margin-bottom: 14px;
}

.register-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 34px;
  font-weight: 400;
}

.register-hero p {
  max-width: 560px;
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.6;
}

.register-form-card {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 40px 44px;
  border-radius: 13px;
  border: 1px solid rgba(255, 99, 206, .28);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 99, 206, .1), transparent 42%),
    linear-gradient(135deg, rgba(11, 19, 39, .88), rgba(8, 12, 31, .92));
}

.register-form-section {
  margin-bottom: 24px;
}

.register-form-section h3 {
  margin: 0 0 4px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.register-section-note {
  margin: 0 0 20px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
}

.register-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.register-city-field {
  position: relative;
}

.register-field-hint {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  line-height: 1.5;
}

.city-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,99,206,.28);
  background: rgba(10,14,32,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  max-height: 240px;
  overflow-y: auto;
}

.city-suggestions.active {
  display: block;
}

.city-suggestion {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.city-suggestion:hover {
  background: rgba(255,99,206,.12);
}

.city-suggestion strong {
  font-weight: 500;
  font-size: 13px;
}

.city-suggestion small {
  color: rgba(255,255,255,.5);
  font-size: 11px;
}

.register-terms {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 26px !important;
}

.register-terms input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #e356b8;
  flex-shrink: 0;
}

.register-terms span {
  color: rgba(255,255,255,.68);
  font-size: 12.5px;
  line-height: 1.5;
}

.register-terms a {
  color: #ff6fce;
}

.form-errors {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 111, 111, .35);
  background: rgba(255, 80, 80, .1);
}

.form-errors > span {
  color: #ff8080;
  font-size: 18px;
  line-height: 1.3;
}

.form-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.form-errors li {
  color: #ffb4b4;
  font-size: 13px;
  line-height: 1.5;
}

/* select + date/time inputs need the same treatment as .login-input-wrap's text inputs */
.login-input-wrap select,
.login-input-wrap input[type="date"],
.login-input-wrap input[type="time"] {
  width: 100%;
  height: 50px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5,8,22,.48);
  color: #fff;
  padding: 0 16px 0 48px;
  outline: 0;
  transition: .22s ease;
  color-scheme: dark;
  font-family: inherit;
  font-size: 14px;
}

.login-input-wrap select:focus,
.login-input-wrap input[type="date"]:focus,
.login-input-wrap input[type="time"]:focus {
  border-color: rgba(255,99,206,.42);
  box-shadow: 0 0 24px rgba(255,99,206,.12);
}

@media (max-width: 820px) {
  .register-form-grid {
    grid-template-columns: 1fr;
  }

  .register-form-card {
    padding: 30px 24px;
  }
}

.login-secondary {
  padding: 30px 32px;
  margin-bottom: 40px;
  border-radius: 13px;
  border: 1px solid rgba(255, 99, 206, .2);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .7), rgba(8, 12, 31, .78));
}

.login-secondary-head {
  text-align: center;
  margin-bottom: 24px;
}

.login-secondary-head h2 {
  margin: 0 0 6px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 21px;
  font-weight: 400;
}

.login-secondary-head p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

.login-secondary-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.login-secondary-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 99, 206, .25);
  background: rgba(255, 99, 206, .055);
  color: #ff6fce;
  font-size: 22px;
}

.benefit-icon.horoscope::before { content: "✦"; color: #ffbd66; }
.benefit-icon.tarot::before { content: "▧"; color: #ff9f50; }
.benefit-icon.moon::before { content: "☾"; color: #ffbd66; }
.benefit-icon.dreams::before { content: "☁"; color: #ff9f50; }
.benefit-icon.compatibility::before { content: "♡"; color: #ff6fce; }
.benefit-icon.more::before { content: "✧"; color: #ffbd66; }

.login-secondary-grid h3 {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-family: Cinzel, Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

.login-secondary-trial {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  margin-bottom: 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,99,206,.14), rgba(8,12,31,.5));
  border: 1px solid rgba(255,99,206,.16);
}

.trial-gift {
  flex-shrink: 0;
  color: #ff6fce;
  font-size: 26px;
}

.login-secondary-trial p {
  flex: 1;
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: 13px;
}

.login-secondary-trial p strong {
  color: #fff;
}

.trial-button {
  flex-shrink: 0;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #e65bac, #bd1f7d);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  white-space: nowrap;
}

.login-secondary-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.login-secondary-testimonials article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
}

.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 24px rgba(255,99,206,.14);
}

.testimonial-avatar.sarah {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,99,206,.35), transparent 45%),
    var(--login-testimonial-one);
}

.testimonial-avatar.daniel {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,99,206,.35), transparent 45%),
    var(--login-testimonial-two);
}

.testimonial-avatar.emma {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,184,108,.4), transparent 45%),
    linear-gradient(145deg, rgba(255,184,108,.28), rgba(20,16,45,.9));
}

.testimonial-avatar.marcus {
  background:
    radial-gradient(circle at 50% 35%, rgba(122,85,255,.4), transparent 45%),
    linear-gradient(145deg, rgba(122,85,255,.3), rgba(20,16,45,.9));
}

.testimonial-avatar.priya {
  background:
    radial-gradient(circle at 50% 35%, rgba(227,86,184,.4), transparent 45%),
    linear-gradient(145deg, rgba(227,86,184,.3), rgba(20,16,45,.9));
}

.testimonial-avatar.james {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,111,206,.4), transparent 45%),
    linear-gradient(145deg, rgba(189,66,223,.3), rgba(20,16,45,.9));
}

.testimonial-avatar::before {
  content: "✦";
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ff8ed8;
  font-size: 15px;
}

.testimonial-stars {
  color: #ffbd66;
  letter-spacing: 2px;
  font-size: 11px;
  margin-bottom: 4px;
}

.login-secondary-testimonials p {
  margin: 0 0 4px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
}

.login-secondary-testimonials strong {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 400;
}

.full-site-footer {
  position: relative;
  padding: 0 0 24px;
  color: rgba(255,255,255,.65);
}

.footer-star-line {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  align-items: center;
  margin-bottom: 40px;
}

.footer-star-line span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,99,206,.58), transparent);
}

.footer-star-line i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  border: 1px solid #ff5faf;
  color: #ff5faf;
  font-style: normal;
  font-size: 25px;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.25fr .82fr .9fr .75fr .75fr 1.28fr;
  gap: 34px;
}

.footer-columns section {
  border-right: 1px solid rgba(255,255,255,.08);
  padding-right: 24px;
}

.footer-columns section:last-child {
  border-right: 0;
  padding-right: 0;
}

.footer-columns h3 {
  margin: 0 0 20px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: 400;
}

.footer-columns h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .8px;
}

.footer-columns p,
.footer-columns a {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.7;
}

.footer-columns a {
  display: block;
  margin-bottom: 7px;
}

.social-icons {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}

.social-icons a {
  color: #ff5faf;
  font-size: 18px;
  margin: 0;
}

.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr 48px;
  margin-top: 16px;
}

.footer-newsletter input {
  height: 42px;
  border-radius: 7px 0 0 7px;
  border: 1px solid rgba(255,99,206,.22);
  background: rgba(255,99,206,.06);
  color: #fff;
  padding: 0 13px;
  outline: 0;
}

.footer-newsletter button {
  height: 42px;
  border: 0;
  border-radius: 0 7px 7px 0;
  color: #fff;
  background: linear-gradient(135deg, #e65bac, #bd1f7d);
  font-size: 20px;
  cursor: pointer;
}

.footer-copyright {
  margin: 38px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
}

/* Login effects */

.login-pulse {
  animation: loginPulse .36s ease both;
}

@keyframes loginPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .login-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-visual {
    flex-direction: column;
    align-items: center;
    padding: 40px;
  }

  .login-visual-copy {
    text-align: center;
  }

  .login-visual-points li {
    justify-content: center;
  }

  .login-visual-pricing {
    position: static;
    transform: none;
    margin-top: 8px;
  }

  .login-secondary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1180px) {
  .login-secondary-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .login-visual {
    padding: 32px 26px;
  }

  .login-visual-copy {
    max-width: 100%;
  }

  .login-form-panel {
    padding: 34px 24px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }

  .footer-columns section {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 22px;
  }

  .footer-columns section:last-child {
    border-bottom: 0;
  }

  .login-secondary-trial {
    flex-direction: column;
    text-align: center;
  }

  .login-secondary-testimonials {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .login-visual-copy h1 {
    font-size: 34px;
  }

  .login-visual-points {
    display: none;
  }

  .login-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .login-form-card h2 {
    font-size: 27px;
  }
}

/* =========================================================
   ASTROVIA — USER DASHBOARD PAGE
   Additions for dashboard.html
========================================================= */

.dashboard-page {
  --dashboard-hero-image: url("assets/dashboard-hero.jpg");
}

.dashboard-topbar {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.dashboard-user-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.notification-button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: .22s ease;
}

.notification-button:hover {
  color: #ff6fce;
  transform: translateY(-2px);
}

.user-profile-button {
  height: 44px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  cursor: pointer;
}

.user-profile-button span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d94fa4, #9f287c);
  color: #fff;
  font-weight: 700;
}

.user-profile-button i {
  color: rgba(255,255,255,.75);
  font-style: normal;
}

.dashboard-hero {
  min-height: 170px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  padding: 50px 34px 34px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5,8,22,.98) 0%, rgba(5,8,22,.88) 42%, rgba(5,8,22,.34) 72%, rgba(5,8,22,.12) 100%),
    radial-gradient(circle at 70% 42%, rgba(255, 99, 206, .20), transparent 27%),
    radial-gradient(circle at 70% 42%, rgba(255, 184, 108, .11), transparent 18%),
    var(--dashboard-hero-image);
  background-size: cover;
  background-position: center right;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(0deg, rgba(5,8,22,.96), transparent);
  pointer-events: none;
}

.dashboard-hero-copy {
  position: relative;
  z-index: 2;
}

.dashboard-hero h1 {
  margin: 0 0 12px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.dashboard-hero h1 span {
  color: #ff6fce;
  font-size: .75em;
}

.dashboard-hero p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 16px;
}

.dashboard-panel {
  border-radius: 13px;
  padding: 24px;
  border: 1px solid rgba(255, 160, 224, .13);
  background:
    linear-gradient(135deg, rgba(11, 19, 39, .82), rgba(8, 12, 31, .88));
  box-shadow:
    0 20px 60px rgba(0,0,0,.32),
    inset 0 0 26px rgba(255,255,255,.018);
}

.dashboard-panel h2 {
  margin: 0 0 20px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}

.account-overview-panel {
  margin-bottom: 20px;
}

.overview-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.overview-card-grid article {
  min-height: 165px;
  border-radius: 10px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(8,12,31,.43);
}

.overview-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.025);
  font-size: 25px;
}

.overview-icon.crown,
.overview-icon.billing {
  color: #ff5faf;
}

.overview-icon.calendar,
.overview-icon.card {
  color: #7d76ff;
}

.overview-card-grid small {
  display: block;
  margin-top: -50px;
  margin-left: 62px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.overview-card-grid h3 {
  margin: 28px 0 8px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

.overview-card-grid p {
  margin: 0 0 9px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

.overview-card-grid strong {
  color: #ff5faf;
  font-weight: 700;
  font-size: 13px;
}

.overview-card-grid strong.white {
  color: #fff;
  font-weight: 400;
}

.overview-card-grid a {
  display: inline-block;
  margin-top: 6px;
  color: #ff5faf;
  font-size: 13px;
}

.quick-access-panel {
  margin-bottom: 20px;
}

.dashboard-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.dashboard-section-heading h2 {
  margin: 0;
}

.dashboard-section-heading > a {
  color: #ff6fce;
  font-size: 13px;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.quick-card {
  min-height: 220px;
  padding: 24px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(8,12,31,.45);
  transition: .24s ease;
}

.quick-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,99,206,.38);
  box-shadow: 0 18px 34px rgba(227,86,184,.12);
}

.quick-card span {
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 42px;
}

.quick-card.horoscope span { color: #ff9e42; }
.quick-card.tarot span { color: #ff8a50; }
.quick-card.moon span { color: #8b6cff; }
.quick-card.guidance span { color: #39d391; }
.quick-card.numerology span {
  color: #ff5faf;
  font-family: Cinzel, Georgia, serif;
}
.quick-card.dreams span { color: #7192ff; }

.quick-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}

.quick-card p {
  min-height: 54px;
  margin: 0 0 17px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.55;
}

.quick-card > a {
  color: currentColor;
  font-size: 20px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1.12fr .78fr;
  gap: 20px;
  margin-bottom: 20px;
}

.account-settings-panel {
  min-height: 440px;
}

.settings-list {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
}

.settings-item:not(:last-child) .settings-trigger {
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.settings-trigger {
  width: 100%;
  min-height: 88px;
  border: 0;
  background: rgba(8,12,31,.42);
  display: grid;
  grid-template-columns: 58px 1fr 20px;
  gap: 16px;
  align-items: center;
  padding: 0 20px;
  text-align: left;
  cursor: pointer;
  transition: .22s ease;
}

.settings-trigger:hover {
  background: rgba(255,99,206,.045);
}

.settings-trigger span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,95,175,.38);
  color: #ff5faf;
  font-size: 23px;
}

.settings-trigger strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 14px;
}

.settings-trigger p {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
}

.settings-trigger i {
  color: rgba(255,255,255,.8);
  font-style: normal;
  font-size: 22px;
  transition: transform .22s ease;
}

.settings-item.active .settings-trigger i {
  transform: rotate(180deg);
}

.settings-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  background: rgba(5,8,22,.4);
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}

.settings-item.active .settings-answer {
  max-height: 1400px;
  opacity: 1;
  padding: 22px 20px;
}

.settings-success {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(70,204,113,.35);
  background: rgba(70,204,113,.14);
  color: #8cffb7;
  font-size: 13px;
}

.settings-note {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  line-height: 1.6;
}

.settings-note + .login-form {
  margin-top: 18px;
}

.settings-form {
  max-width: 420px;
}

.personal-info-form {
  max-width: 640px;
}

.personal-info-form .register-form-grid {
  margin-top: 4px;
}

@media (max-width: 620px) {
  .personal-info-form .register-form-grid {
    grid-template-columns: 1fr;
  }
}

.settings-submit {
  width: auto;
  padding: 0 32px;
}

.settings-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
  cursor: pointer;
}

.settings-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #e356b8;
  flex-shrink: 0;
}

.settings-checkbox-label span {
  color: rgba(255,255,255,.82);
  font-size: 13.5px;
  line-height: 1.5;
}

.account-info-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.account-info-list > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.account-info-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-info-list dt {
  color: rgba(255,255,255,.56);
  font-size: 12px;
}

.account-info-list dd {
  margin: 0;
  color: #fff;
  font-size: 13.5px;
}

.dashboard-side-stack {
  display: grid;
}

.subscription-card {
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(8,12,31,.45);
}

.subscription-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.subscription-title h3 {
  margin: 0;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}

.subscription-title span {
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(70, 204, 113, .25);
  color: #8cffb7;
  font-size: 11px;
}

.subscription-card > strong {
  display: block;
  margin-bottom: 20px;
  color: #fff;
  font-size: 16px;
}

.subscription-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.subscription-card li {
  margin-bottom: 11px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.subscription-card li::before {
  content: "✓";
  margin-right: 9px;
  color: #6cff9c;
}

.cosmic-profile-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.cosmic-profile-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  margin: 0;
}

.cosmic-profile-list li::before {
  content: none;
}

.cosmic-profile-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,95,175,.38);
  background: rgba(255,99,206,.08);
  color: #ff8ed8;
  font-size: 18px;
}

.cosmic-profile-list strong {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cosmic-profile-list p {
  margin: 2px 0 0;
  color: #fff;
  font-size: 14px;
  font-family: Cinzel, Georgia, serif;
}

.manage-subscription-button {
  height: 42px;
  border-radius: 7px;
  background: rgba(255,99,206,.2);
  color: #fff;
  display: grid;
  place-items: center;
  transition: .22s ease;
}

.manage-subscription-button:hover {
  background: rgba(255,99,206,.32);
}

.dashboard-faq-panel {
  margin-bottom: 28px;
}

.dashboard-faq-list {
  display: grid;
  gap: 8px;
}

.dashboard-faq-item button {
  width: 100%;
  height: 40px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(5,8,22,.46);
  color: rgba(255,255,255,.86);
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 0 13px;
  cursor: pointer;
  transition: .22s ease;
}

.dashboard-faq-item button:hover,
.dashboard-faq-item.active button {
  border-color: rgba(255,99,206,.35);
  background: rgba(255,99,206,.06);
}

.dashboard-faq-list span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ff8ed8;
  color: #ff8ed8;
  font-size: 13px;
}

.dashboard-faq-list i {
  color: rgba(255,255,255,.78);
  font-style: normal;
  transition: .22s ease;
}

.dashboard-faq-item.active button i {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 13px;
  color: rgba(255,255,255,.66);
  font-size: 12.5px;
  line-height: 1.6;
  transition: max-height .3s ease, opacity .22s ease, padding .3s ease;
}

.dashboard-faq-item.active .faq-answer {
  max-height: 200px;
  opacity: 1;
  padding: 10px 13px 4px;
}

.dashboard-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 32px 0 22px;
}

.dashboard-footer-columns {
  display: grid;
  grid-template-columns: 1.3fr .78fr .96fr .86fr .86fr;
  gap: 42px;
}

.dashboard-footer-columns section {
  border-right: 1px solid rgba(255,255,255,.08);
  padding-right: 28px;
}

.dashboard-footer-columns section:last-child {
  border-right: 0;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-logo-row span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #ff5faf;
  color: #ff5faf;
  font-size: 30px;
}

.footer-logo-row h3 {
  margin: 0;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 26px;
  font-weight: 400;
}

.dashboard-footer p,
.dashboard-footer a {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.7;
}

.dashboard-footer a {
  display: block;
  margin-bottom: 7px;
}

.dashboard-footer h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .8px;
}

.dashboard-footer .social-icons {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}

.dashboard-footer .social-icons a {
  color: #ff5faf;
  font-size: 18px;
  margin: 0;
}

.dashboard-footer-bottom {
  min-height: 48px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-footer-bottom p {
  margin: 0;
}

.language-button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

/* Dashboard effects */

.dashboard-pulse {
  animation: dashboardPulse .36s ease both;
}

@keyframes dashboardPulse {
  from {
    transform: translateY(4px) scale(.985);
    opacity: .82;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1500px) {
  .overview-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-footer-columns section:nth-child(3) {
    border-right: 0;
  }
}

@media (max-width: 1180px) {
  .dashboard-footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-footer-columns section {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 22px;
  }

  .dashboard-footer-columns section:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .dashboard-hero {
    padding: 38px 20px 28px;
  }

  .dashboard-hero h1 {
    font-size: 36px;
  }

  .overview-card-grid,
  .quick-access-grid,
  .dashboard-footer-columns {
    grid-template-columns: 1fr;
  }

  .dashboard-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-trigger {
    grid-template-columns: 48px 1fr;
  }

  .settings-trigger i {
    grid-column: 2;
  }

  .account-info-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dashboard-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 520px) {
  .dashboard-panel {
    padding: 18px;
  }

  .dashboard-hero h1 {
    font-size: 31px;
  }

  .overview-card-grid article,
  .quick-card {
    min-height: auto;
  }

  .overview-card-grid small {
    margin-top: 0;
    margin-left: 0;
  }

  .overview-card-grid h3 {
    margin-top: 18px;
  }
}
/* =========================================================
   INDEX — Make feature cards background images more visible
========================================================= */

.feature-card:before {
  background:
    linear-gradient(
      90deg,
      rgba(7, 9, 24, .58) 0%,
      rgba(8, 12, 28, .28) 55%,
      rgba(12, 15, 36, .08) 100%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(227, 86, 184, .12),
      transparent 35%
    );
}

.astrology-card {
  background-image:
    radial-gradient(circle at 78% 38%, rgba(149, 49, 255, .35) 0 42px, transparent 95px),
    linear-gradient(135deg, rgba(117, 42, 179, .12), rgba(12, 15, 36, .22)),
    var(--astrology-image);
}

.tarot-card {
  background-image:
    radial-gradient(circle at 66% 45%, rgba(255, 151, 79, .12), transparent 34%),
    linear-gradient(120deg, rgba(69, 41, 31, .18), rgba(5, 8, 22, .24)),
    var(--tarot-image);
}

.palm-card {
  background-image:
    radial-gradient(circle at 68% 45%, rgba(255, 198, 116, .14), transparent 24%),
    linear-gradient(120deg, rgba(44, 22, 28, .18), rgba(5, 8, 22, .22)),
    var(--palm-image);
}

.moon-card {
  background-image:
    radial-gradient(circle at 77% 26%, rgba(216, 151, 255, .32) 0 34px, transparent 80px),
    linear-gradient(120deg, rgba(31, 20, 62, .16), rgba(5, 8, 22, .22)),
    var(--moon-image);
}

.feature-card h2,
.feature-card p,
.feature-card .round-link {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}
/* =========================================================
   PALM READING — hide CSS-drawn placeholder art now that a real
   image is wired up via --palm-hero-image
========================================================= */

/* Hero: real image is the section background, hide the placeholder box */
.palm-page .palm-hero-hand,
.palm-page .hero-hand-placeholder {
  display: none !important;
}

/* =========================================================
   ASTROVIA — SITE MODAL (REUSABLE)
   Generic overlay dialog. Trigger from any page by adding
   data-modal-message="..." (optional data-modal-title="...")
   to a link or button — see script.js for the wiring.
========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 16, .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  width: min(400px, 100%);
  padding: 40px 34px 32px;
  border-radius: 18px;
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .3s ease;
}

.modal-overlay.active .modal-box {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: .2s ease;
}

.modal-close:hover {
  color: #fff;
  border-color: rgba(227, 86, 184, .5);
}

.modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border: 1px solid rgba(227, 86, 184, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(227, 86, 184, .22), rgba(255, 255, 255, .03) 52%, transparent 53%);
  box-shadow: 0 0 30px rgba(227, 86, 184, .2), inset 0 0 18px rgba(122, 85, 255, .14);
}

.modal-icon:before,
.modal-icon:after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  transform: rotate(45deg);
}

.modal-icon:after {
  inset: 19px;
  border-color: rgba(227, 86, 184, .45);
}

.modal-icon-star {
  font-size: 21px;
  color: #ff90db;
  text-shadow: 0 0 14px rgba(255, 144, 219, .8);
  z-index: 1;
}

.modal-box h3 {
  font-family: Cinzel, serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .5px;
  margin: 0 0 12px;
}

.modal-box p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 26px;
}

.modal-box .modal-ok {
  width: 100%;
  border: 0;
  cursor: pointer;
}

@media (max-width: 480px) {
  .modal-box {
    padding: 34px 24px 26px;
  }
}

.modal-card-detail {
  display: none;
}

.modal-box.card-mode {
  width: min(760px, 100%);
  text-align: left;
  padding: 36px;
}

.modal-box.card-mode .modal-icon,
.modal-box.card-mode > h3,
.modal-box.card-mode > p,
.modal-box.card-mode .modal-ok {
  display: none;
}

.modal-box.card-mode .modal-card-detail {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}

.modal-box.dream-mode {
  width: min(640px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  text-align: left;
  padding: 36px;
}

.modal-box.dream-mode .modal-icon,
.modal-box.dream-mode > h3,
.modal-box.dream-mode > p,
.modal-box.dream-mode .modal-ok {
  display: none;
}

.modal-box.dream-mode .modal-card-detail {
  display: block;
}

.modal-card-copy h5 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.modal-dream-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}

.modal-dream-positive h5 { color: #8fd960; }
.modal-dream-caution h5 { color: #ffb444; }

.modal-dream-columns p {
  margin: 0;
  font-size: 13px;
}

#modalDreamVariationsWrap,
#modalDreamReflectionWrap,
#modalMoonFocusWrap,
#modalMoonAffirmationWrap {
  margin-bottom: 16px;
}

#modalDreamVariationsWrap:last-child,
#modalDreamReflectionWrap:last-child,
#modalMoonFocusWrap:last-child,
#modalMoonAffirmationWrap:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .modal-dream-columns {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.modal-box.team-mode {
  width: min(700px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  text-align: left;
  padding: 36px;
}

.modal-box.team-mode .modal-icon,
.modal-box.team-mode > h3,
.modal-box.team-mode > p,
.modal-box.team-mode .modal-ok {
  display: none;
}

.modal-box.team-mode .modal-card-detail {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
}

#modalTeamBio p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .modal-box.team-mode .modal-card-detail {
    grid-template-columns: 1fr;
  }
}

.modal-card-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 145, 108, .4);
  box-shadow: 0 0 28px rgba(255, 111, 207, .28);
}

.modal-card-image.reversed {
  transform: rotate(180deg);
}

.modal-card-copy span {
  display: block;
  color: #ff67ce;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.modal-card-copy h2 {
  margin: 8px 0 6px;
  color: #fff;
  font-family: Cinzel, Georgia, serif;
  font-size: 27px;
  font-weight: 400;
}

.modal-card-copy h4 {
  margin: 0 0 14px;
  color: #ffbd66;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

.modal-card-copy p {
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.modal-card-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.modal-card-copy li {
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.modal-card-copy li:before {
  content: "♡ ";
  color: #ff67ce;
}

@media (max-width: 640px) {
  .modal-box.card-mode .modal-card-detail {
    grid-template-columns: 1fr;
  }

  .modal-card-image {
    max-width: 200px;
    margin: 0 auto;
  }
}