/* ===================================================
   CSS RESET & BASE STYLES
   =================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display:block;}
body {line-height:1; background: #F4F4F4; color: #222; font-family: 'Open Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased;}
ol, ul {list-style:none;}
a {text-decoration:none; color:inherit; transition: color 0.2s;}
img {max-width:100%; display:block; border:none; background:none;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', Arial, sans-serif; font-weight:700; letter-spacing:.012em;}
p, ul, li {font-family: 'Open Sans', Arial, sans-serif;}
.container {width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px;}

/* =================== BRAND COLORS =================== */
:root {
  --primary: #34495E;
  --secondary: #9B59B6;
  --accent: #F4F4F4;
  --brand-yellow: #F9E79F;
  --brand-pink: #EC87BF;
  --brand-teal: #6DDCCF;
  --brand-orange: #FFAD60;
  --brand-dark: #262339;
  --brand-text: #222;
  --white: #fff;
  --shadow-lg: 0 8px 32px rgba(52,73,94,0.08), 0 2px 6px rgba(155,89,182,0.12);
  --shadow-md: 0 2px 16px rgba(52,73,94,0.09);
}

/* =================== TYPOGRAPHY ===================== */
body {font-size: 16px; line-height: 1.65; font-family: 'Open Sans', Arial, sans-serif; color: var(--brand-text);}
h1 {font-size: 2.5rem; color: var(--primary); letter-spacing: 1px; margin-bottom: 20px; font-family: 'Montserrat', Arial, sans-serif;}
h2 {font-size: 2rem; color: var(--secondary); margin-bottom: 20px; font-family: 'Montserrat', Arial, sans-serif;}
h3 {font-size: 1.25rem; color: var(--primary); margin-bottom:10px; font-family: 'Montserrat', Arial, sans-serif;}
h4 {font-size: 1.1rem; color: var(--brand-dark); margin-bottom:5px; font-family: 'Montserrat', Arial, sans-serif;}
p, ul, li {font-size: 1rem; color: var(--brand-text);}
.subheadline {font-size:1.25rem; color: var(--brand-dark); margin-bottom: 24px; font-family: 'Montserrat', Arial, sans-serif; line-height:1.4;}
.brand-promise {font-weight:600; color: var(--secondary); margin-top: 16px; letter-spacing:0.5px;}
address {color: var(--brand-dark); font-style:normal; font-size:1rem; margin-bottom: 8px;}

/*  ================= HEADER & NAV ===================  */
header {background: var(--white); box-shadow: var(--shadow-md); position:relative; z-index:52;}
header nav {display: flex; align-items: center; justify-content: space-between; padding: 18px 0;}
header nav a img {height: 42px;}
header nav ul {display: flex; align-items: center; gap: 24px;}
header nav ul li {display: flex;}
header nav ul li a {font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 600; color: var(--primary); padding: 8px 12px; border-radius: 6px; transition: background .15s, color .15s;}
header nav ul li a:hover, header nav ul li a:focus {background: var(--secondary); color: var(--white); outline: none;}
.cta-primary {background: var(--secondary); color: var(--white); padding: 12px 28px; border-radius: 28px; font-weight: 800; font-size: 1.08rem; letter-spacing:0.4px; box-shadow:0 2px 10px rgba(155,89,182,0.11); transition: background 0.18s, transform 0.14s, box-shadow .16s; margin-left:8px; border:none; cursor:pointer; display:inline-block;}
.cta-primary:hover, .cta-primary:focus {background:var(--primary); color:var(--brand-yellow); box-shadow:0 4px 18px rgba(52,73,94,0.13); transform:translateY(-2px) scale(1.04); outline: none;}

/* Mobile burger button */
.mobile-menu-toggle {display: none; background: var(--secondary); color: var(--white); font-size: 2rem; border: none; border-radius: 50%; box-shadow: 0 2px 10px rgba(155,89,182,0.15); width: 44px; height:44px; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s, transform 0.17s; z-index: 110; position: absolute; right: 22px; top: 14px;}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {background: var(--brand-teal); color: var(--primary); outline:none; transform: scale(1.07);}

/* Mobile Menu Overlay */
.mobile-menu {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, var(--secondary) 60%, var(--brand-yellow) 100%); /* Creative gradient background */
  padding: 0;
  transform: translateX(100%);
  transition: transform 0.44s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  box-shadow: 0 6px 20px rgba(52,73,94,0.23);
  will-change: transform;
}
.mobile-menu.open {display: flex; transform: translateX(0);}
.mobile-nav {
  margin:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap: 28px;
}
.mobile-nav a {
  color: var(--white); font-size: 1.3rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; padding: 10px 0;
  width: 100%; text-align: center;
  letter-spacing: 0.6px; border-radius: 10px; transition: background 0.18s, color 0.15s;
}
.mobile-nav a:last-child {border:2px solid var(--brand-teal); color:var(--brand-yellow); background:rgba(255,255,255,0.07);}
.mobile-nav a:hover,.mobile-nav a:focus{background:var(--brand-pink); color: var(--primary);}
.mobile-menu-close {position: absolute; right: 20px; top:20px; z-index: 212; background:none; border:none; color: var(--brand-yellow); font-size:2.2rem; cursor:pointer; transition: color .13s, transform .19s;}
.mobile-menu-close:hover,.mobile-menu-close:focus {color: var(--primary); transform: scale(1.12);}

/* ================= MAIN ========================= */
main {background: var(--accent); padding-bottom:60px;}

section {margin-bottom: 60px; padding: 40px 20px;}
.content-wrapper {display:flex; flex-direction:column; gap: 24px; align-items:flex-start;}

/* HERO SECTIONS */
.hero {background: linear-gradient(102deg, var(--brand-teal) 0%, var(--brand-pink) 80%, var(--brand-yellow) 100%);/* Artistic gradient */ border-radius: 0 0 48px 48px; box-shadow: 0 6px 28px rgba(52,73,94,0.06); min-height: 340px;}
.hero .container {display:flex; align-items:center; min-height: 340px;}
.hero .content-wrapper {align-items: flex-start; max-width: 650px;}
@media (max-width:560px) {.hero .content-wrapper {max-width: 100%;}}

/* =========================== LISTS, CARDS, FEATURES =============================== */
.features ul,
.feature-grid, .service-cards, .faq ul, .testimonials .testimonial-list, .horoscope-features ul,
.calc-features ul,
.lunar-widget-brief ul,
.lucky-days-section ul,
.comp-features .zodiac-compat-grid ul,
.success-stories,
.about-section ul,
.about ul {display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start;}
.features li, .feature-grid li, .service-cards li, .horoscope-features ul li, .calc-features ul li, .about-section ul li, .lucky-days-section ul li, .faq ul li, .testimonial-card, .comp-features .zodiac-compat-grid ul li, .success-stories .testimonial-card {
  background: var(--white); border-radius:20px; box-shadow: var(--shadow-lg); padding:26px 24px; min-width:200px; flex:1 1 260px; margin-bottom:20px; position:relative;
  transition: box-shadow .16s, transform .13s;
}
.features li:hover, .feature-grid li:hover, .service-cards li:hover, .horoscope-features ul li:hover, .calc-features ul li:hover {
  box-shadow: 0 2px 24px var(--brand-pink);  transform: translateY(-4px) scale(1.025);
}
.feature-grid li img, .features li img {
  width:44px; margin-bottom: 12px; filter: drop-shadow(0 2px 6px var(--secondary));
}
.service-cards li {min-width:230px; display:flex; flex-direction:column; gap:10px; justify-content:space-between; border-left:6px solid var(--secondary); border-radius: 16px 24px 16px 26px;}
.service-price {font-weight: 800; color: var(--secondary); font-size:1.09rem;}
.horoscope-features ul li, .calc-features ul li {border-left: 4px solid var(--brand-teal);}

/* ============================ TESTIMONIALS ============================= */
.testimonials .testimonial-list {display:flex; flex-wrap:wrap; gap:28px; margin-top:18px;}
.testimonial-card {display:flex; flex-direction:column; align-items: flex-start; gap:20px; padding:20px; background: var(--brand-yellow); border-radius: 26px; min-width:240px; box-shadow: 0 1px 12px rgba(52,73,94,0.07);
  transition: box-shadow 0.13s, transform .13s;}
.testimonial-card p {font-size:1rem; color:#212136; letter-spacing:0.2px; line-height:1.55;}
.testimonial-name {color:#8847b6; font-weight:700; font-size:1.04em; letter-spacing:0.2px;}
.testimonial-card:hover {box-shadow: 0 4px 32px var(--brand-pink); transform: translateY(-2px) scale(1.02);}

/* ======================== SPECIAL SECTIONS / ABOUT / FAQ ==================== */
.text-section {display:flex; flex-direction:column; gap:16px;}
.text-section ul {flex-direction: column; gap:8px;justify-content:flex-start;}
.text-section ul li {background:var(--brand-teal); border-radius:8px; padding:8px 16px; color:var(--primary); font-weight: 600; min-width:0; box-shadow: 0 1px 4px rgba(52,73,94,.04);}
.faq ul {flex-direction: column; gap:14px;}
.faq ul li {background:var(--brand-yellow); border-left:4px solid var(--secondary); color:var(--primary);}

.zodiac-compat-grid {margin-bottom:16px;}
.zodiac-compat-grid ul {flex-direction:column; gap:7px;}
.zodiac-compat-grid ul li {background: var(--brand-pink); color:var(--brand-dark); box-shadow:none; border-radius:13px;}
.success-stories {display:flex; gap:20px;flex-wrap:wrap;}

/* =========================== CTA-FORM, CONTACT, MAP ======================= */
.cta-form, .cta-pricing, .contact, .contact-details {background: var(--brand-teal);border-radius:24px;box-shadow:0 2px 18px rgba(52,73,94,0.07);}
.cta-form .cta-primary, .cta-pricing .cta-primary, .contact-details .cta-primary, .contact .cta-primary {margin-top:16px;}
.address-map img {width:64px; height:64px; border-radius:18px; border:2px solid var(--secondary); margin-top:6px;}

/* ===================== SECTION & CONTENT SPACING PATTERNS ======================= */
.section {margin-bottom: 60px; padding: 40px 20px;}
.card-container {display: flex; flex-wrap: wrap; gap: 24px;}
.card {margin-bottom: 20px; position: relative; background: var(--white); border-radius:20px; box-shadow: var(--shadow-md);padding:24px; transition: box-shadow .15s;}
.card:hover {box-shadow: 0 2px 16px var(--brand-pink);}
.content-grid {display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;}
.text-image-section {display: flex; align-items: center; gap: 30px; flex-wrap: wrap;}
.testimonial-card {display: flex; align-items: center; gap: 20px; padding: 20px;}
.feature-item {display: flex; flex-direction: column; align-items: flex-start; gap: 15px;}

/* --------------- Ensure all content sections/cards have spacing ------------- */
.section>*+*, .content-wrapper>*+*, .card-container>*+*, .content-grid>*+*, .feature-item>*+* {
  margin-top: 20px;
}

/* =============================== FOOTER =============================== */
footer {background: var(--primary); color: var(--white); border-radius:34px 34px 0 0; box-shadow: 0 2px 34px rgba(44,44,44,.08); padding-top: 38px; margin-top: 80px;}
.footer-content {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap:36px;}
.footer-content > div {margin-bottom: 12px;}
.footer-content img {height: 40px; margin-bottom:10px;}
.footer-nav {display: flex; flex-direction: column; gap: 8px;}
.footer-nav a {color: var(--brand-yellow); font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; transition: color .14s;}
.footer-nav a:hover, .footer-nav a:focus {color: var(--brand-pink); text-decoration: underline;}
.footer-social {display: flex; gap:18px; margin-top:14px;}
.footer-social a img {height:30px; border-radius:50%; background:var(--white);padding:4px;transition: box-shadow 0.14s, transform 0.13s;box-shadow: 0 1px 8px rgba(155,89,182,0.08);}
.footer-social a:hover img {box-shadow: 0 3px 12px var(--brand-teal); transform: scale(1.1);}

/* ======================== PRIVACY, TERMS, COOKIE PAGES ======================== */
.privacy-policy, .gdpr-section, .cookie-policy, .terms-section {background: var(--white); border-radius:24px; box-shadow: 0 2px 14px rgba(52,73,94,0.06); margin-bottom:60px; padding:40px 20px;}
.privacy-policy h1, .gdpr-section h1, .cookie-policy h1, .terms-section h1 {margin-bottom:24px; color:var(--primary);}

/* ==================== COOKIE CONSENT BANNER & MODAL ======================== */
.cookie-consent-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:404;
  background: var(--brand-dark); color:var(--white); padding:24px 12px; box-shadow: 0 -2px 24px var(--primary);
  display:flex; align-items: center; justify-content: center; gap:32px; flex-wrap: wrap;
  font-size:1.01rem; transition:transform .33s cubic-bezier(0.35,1.42,0.33,1), opacity .23s; transform:translateY(0); opacity:1;
}
.cookie-consent-banner.hide {transform:translateY(160px); opacity:0; pointer-events:none;}
.cookie-consent-text {flex:1 0 200px; min-width:140px;}
.cookie-consent-actions {display:flex; gap:18px;}
.cookie-btn {font-size:1rem; border:none; border-radius:24px; padding:9px 22px; font-weight: 700; cursor:pointer; transition: background 0.13s, color 0.13s, transform .10s;}
.cookie-btn.accept {background: var(--brand-teal); color: var(--primary);}
.cookie-btn.accept:hover, .cookie-btn.accept:focus {background: var(--secondary); color: var(--white);}
.cookie-btn.reject {background: var(--brand-pink); color: var(--primary);}
.cookie-btn.reject:hover, .cookie-btn.reject:focus {background: var(--brand-yellow); color: var(--secondary);}
.cookie-btn.settings {background: var(--brand-yellow); color: var(--brand-dark);}
.cookie-btn.settings:hover, .cookie-btn.settings:focus {background:var(--secondary); color: var(--white);}

/* COOKIE MODAL */
#cookie-modal {
  display:none; position:fixed; z-index:405; left:0; top:0; right:0; bottom:0;
  background: rgba(52,73,94,.83); align-items:center; justify-content:center;
  animation: fade-in .38s ease; flex-direction:column;
}
#cookie-modal.open {display:flex;}
.cookie-modal-content {
  background: var(--white); color: var(--brand-dark); border-radius:20px; box-shadow: var(--shadow-lg);
  padding:36px 32px 32px 32px;
  min-width:320px; max-width:97vw;
  display:flex; flex-direction:column; gap:20px;
  animation: pop-in .45s cubic-bezier(0.36,1.22,0.25,1);
  position:relative;
}
.cookie-modal-close {position:absolute; right:18px; top:14px; background:none; border:none; font-size:1.8rem; color:var(--secondary); cursor:pointer;}
.cookie-modal-content h3 {font-family:'Montserrat',Arial,sans-serif; color:var(--primary);}
.cookie-category-group {display:flex; flex-direction:column; gap:10px;}
.cookie-toggle-label {
  display:flex; align-items:center; gap:16px; font-weight:600; font-size:1rem; color:var(--primary);
}
.cookie-toggler {width:40px; height:24px; border-radius:16px; background:var(--accent); border:none; margin-left:10px; position:relative;transition: background .16s; cursor:pointer;}
.cookie-toggler[aria-checked="true"] {background:var(--secondary);}
.cookie-toggler:after {
  content:'';display:block;position:absolute;left:3px;top:3px;width:18px;height:18px;background:var(--primary);border-radius:50%;transition: left .17s, background .14s;
}
.cookie-toggler[aria-checked="true"]:after {left:19px;background:var(--brand-yellow);}

@keyframes fade-in {from{opacity:0;} to{opacity:1;}}
@keyframes pop-in {from{transform:scale(.96);opacity:0;} to{transform:scale(1);opacity:1;}}

/* ========================== BUTTONS & MICRO-INTERACTIONS ====================== */
button, .cta-primary, .cookie-btn, .cookie-modal-close {outline:none;}
button:active, .cta-primary:active, .cookie-btn:active {transform: scale(.97);}

/* SUBTLE ENTRY ANIMATIONS */
.fade-in {animation: fade-in .45s cubic-bezier(0.31,1.20,0.33,1) both;}
.slide-up {animation: slide-up .77s .15s cubic-bezier(0.47,1.64,0.41,1) both;}
@keyframes slide-up {from {transform: translateY(72px); opacity: 0;} to {transform: translateY(0); opacity: 1;}}

/* ===================== RESPONSIVE FLEXBOX & LAYOUT ======================== */
@media (max-width: 1200px) {
 .container {max-width:95vw;}
}
@media (max-width: 968px) {
  .footer-content, .feature-grid, .service-cards, .card-container, .testimonials .testimonial-list, .content-grid, .about-section ul, .horoscope-features ul, .calc-features ul, .success-stories, .lunar-widget-brief ul, .lucky-days-section ul, .comp-features .zodiac-compat-grid ul
  {flex-direction:column; gap:20px;}
}
@media (max-width: 768px) {
  header nav ul {display:none;}
  .mobile-menu-toggle {display:flex;}
  .hero, .section {padding:34px 2vw;}
  .content-wrapper {gap: 20px;}
  .footer-content {flex-direction:column; align-items:flex-start; gap:21px;}
  .card {padding:17px;}
  .testimonials .testimonial-list {gap:12px;}
  .testimonial-card {padding:15px; min-width:0;}
  .feature-grid, .service-cards, .card-container, .about-section ul, .horoscope-features ul, .calc-features ul, .success-stories, .lunar-widget-brief ul, .lucky-days-section ul, .comp-features .zodiac-compat-grid ul {flex-direction:column;gap:18px;}
  .content-grid, .card-container, .testimonials .testimonial-list {flex-direction:column;gap:14px;}
}
@media (max-width: 550px) {
 .hero h1, h1 {font-size:1.6rem;}
 h2 {font-size:1.18rem;}
 .footer-content {font-size:0.97rem;}
 section {padding:23px 2vw;}
}
@media (max-width: 420px) {
  .cookie-consent-banner {flex-direction:column; gap:18px;align-items:flex-start;}
}

/* =================== DECORATIVE/ARTISTIC UI ELEMENTS =================== */
.section, .about-section, .cta-form, .cta-pricing, .calc-features, .lunar-widget-brief, .contact-details, .comp-features, .lunar-features {
  position:relative;
}
.section:after, .about-section:after, .cta-form:after, .cta-pricing:after, .lunar-features:after {
  content:''; position:absolute; z-index:1; right:16px; bottom:10px; width:42px; height:42px;
  background: url('../assets/brushstroke.svg') no-repeat center/cover; opacity: 0.12;
  pointer-events: none;
}

/* =================== FORM FIELDS (for possible forms) =================== */
input[type=text], input[type=email], textarea {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.7px solid var(--secondary);
  font-size: 1rem;
  background: var(--accent);
  transition: border .15s;
  font-family: 'Open Sans',Arial,sans-serif;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border: 2px solid var(--brand-teal);
  outline: none;
}
label {font-weight: 700; font-family: 'Montserrat',Arial,sans-serif;}

/* =================== ANNOUNCEMENT (THANK YOU) PAGE =================== */
.thank-you .hero {background:var(--brand-yellow);}
.thank-you .cta-primary {margin-top:20px;}

/* =================== HIDE ELEMENTS ON DEMAND  =================== */
[hidden], .d-none {
  display:none !important;
}