/*--------------------------------------------------
  0. CSS RESET & BASE
---------------------------------------------------*/
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,input,textarea,button,select,option,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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;}
html {box-sizing: border-box; font-size: 16px; height: 100%;}
body {min-height:100%;line-height: 1.6;background: #F7F3E3;color: #232D37;font-family: 'Lato', Arial, Helvetica, sans-serif;}
*, *:before, *:after {box-sizing: inherit;}
ul, ol {list-style: none;}
a {text-decoration:none;color:inherit;transition: color 0.2s;}
img {max-width:100%;height:auto;vertical-align:middle;}
button, input, textarea, select {font-family: inherit;font-size: inherit;}
input, textarea {border-radius: 6px; padding: 12px; border: 1.5px solid #CEB978; transition: border 0.2s; background: #fff;}
input:focus, textarea:focus {outline: none; border-color: #232D37;}

/*--------------------------------------------------
  1. COLORS & VARIABLES (with fallbacks)
---------------------------------------------------*/
:root {
  --primary: #232D37;
  --secondary: #CEB978;
  --accent: #F7F3E3;
  --electric-1: #FF4A68;
  --electric-2: #00C2B7;
  --electric-3: #FFD017;
  --electric-4: #5126F7;
  --text-on-dark: #fff;
  --text-on-light: #232D37;
  --gray-light: #F5F5F9;
  --shadow: 0 8px 32px rgba(35,45,55,0.08), 0 2px 12px rgba(206,185,120,0.10);
}

body {background: var(--accent, #F7F3E3);color: var(--primary, #232D37);}

/* Typography */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  color:var(--primary);
  letter-spacing: -.5px;
}
h1 {font-size: 2.5rem;margin-bottom: 20px;line-height: 1.1;}
h2 {font-size: 2rem;margin-bottom: 18px;line-height: 1.15;}
h3 {font-size: 1.4rem;margin-bottom:14px;line-height:1.2;}
h4,h5,h6 {font-size:1.1rem;margin-bottom:12px;}
p,ul,ol {font-size: 1rem;margin-bottom: 16px;}
strong {font-weight:bold;}

.hero-tagline {color: var(--electric-1);font-size: 1.25rem;font-family: 'Lato', sans-serif;font-weight: 600;letter-spacing: 0.04em; margin-bottom: 30px;}

/*--------------------------------------------------
  2. LAYOUT & SPACING
---------------------------------------------------*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
@media (max-width: 768px) {
  .section {
    padding:24px 8px;
    margin-bottom: 36px;
  }
}

/* SECTION with image and text */
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text-image-section {
    flex-direction: column;
    align-items: flex-start;
    gap:20px;
  }
}

.card-container, .feature-grid, .review-grid, .recommendation-grid, .event-grid, .content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card, .feature-item, .review-preview, .recommendation-item, .event-preview {
  margin-bottom: 20px;
  position: relative;
  min-width:260px;
}
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Card Grid sample spacing */
.card-container {gap:24px;}
.content-grid {gap:20px;justify-content:space-between;}

/* Testimonials */
.testimonials-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 26px 22px 26px;
  background: #fff;
  color: var(--text-on-light);
  box-shadow: 0 4px 24px rgba(80,50,10,0.13), 0 2px 8px rgba(86,39,230,0.10);
  border-radius: 20px;
  min-width: 240px;
  max-width: 340px;
  margin-bottom: 20px;
  border-left: 6px solid var(--electric-2);
  transition: box-shadow 0.23s, border-left 0.23s;
}
.testimonial-card:hover {
  border-left: 6px solid var(--electric-1);
  box-shadow: 0 8px 32px rgba(255,74,104,0.14), 0 4px 12px rgba(0,194,183,0.10);
}
.testimonial-rating {
  font-size: 1.3rem;
  color: var(--electric-3);
  letter-spacing: 2px;
  font-weight: bold;
}
.testimonial-author {
  font-size:0.96rem;
  color:var(--electric-4);
  font-weight:600;
}
.testimonial-quote, .testimonial-card p {
  font-size:1.03rem;
  font-style: italic;
}
@media (max-width: 900px) {
  .testimonials-wrapper{flex-direction:column;gap:18px;}
  .testimonial-card{max-width:100%;}
}

/*--------------------------------------------------
  3. NAVIGATION
---------------------------------------------------*/
header {
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 0 0 12px 0;
  box-shadow: 0 3px 24px rgba(35, 45, 55, 0.06);
  position: relative;
  z-index: 101;
}
header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 20px 12px 20px;
}
nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-left: 40px;
}
nav.main-nav a {
  font-family: 'Lato', sans-serif;
  font-weight:700;
  letter-spacing:0.04em;
  color: var(--accent);
  font-size: 1.04rem;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.18s;
}
nav.main-nav a:hover, nav.main-nav a:focus {
  color: var(--electric-2);
}

.cta-btn.nav-cta {
  margin-left: auto;
}

/* Mobile Menu Button */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--secondary);
  margin-left: 18px;
  cursor: pointer;
  z-index: 1301;
}

/* Mobile Menu Overlay */
.mobile-menu {
  display: none;
  position: fixed;
  z-index: 1400;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(35,45,55,0.98);
  flex-direction: column;
  align-items: flex-start;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(.45,.03,.59,1.01);
}
.mobile-menu.open {
  display: flex;
  transform: translateX(0);
}
.mobile-menu-close {
  font-size:2.1rem;
  background:none;
  border:none;
  color:var(--secondary);
  margin:24px 0 24px 20px;
  align-self: flex-start;
  cursor:pointer;
  transition: color 0.18s;
}
.mobile-menu-close:hover {color: var(--electric-3);}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  margin-left: 32px;
}
.mobile-nav a {
  font-size: 1.38rem;
  color: var(--accent);
  padding: 12px 0;
  font-weight: bold;
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
  width: fit-content;
}
.mobile-nav a:hover, .mobile-nav a:focus {color: var(--electric-1);border-bottom:2px solid var(--electric-1);}

@media (max-width: 1100px) {
  nav.main-nav {
    gap: 12px;
    margin-left: 22px;
  }
}
@media (max-width: 900px) {
  nav.main-nav {
    gap: 6px;
    font-size: 1rem;
    margin-left:0;
  }
  .cta-btn.nav-cta {
   margin-left:16px;
  }
}
@media (max-width: 768px) {
  nav.main-nav,.cta-btn.nav-cta {
    display: none!important;
  }
  .mobile-menu-toggle {
    display:block;
  }
}

/* Mobile menu slide animation */
.mobile-menu {
  will-change: transform;
  transition: transform 0.38s cubic-bezier(.45,.03,.59,1.01), opacity 0.2s 0.1s;
}

/*--------------------------------------------------
  4. BUTTONS & INTERACTIVES
---------------------------------------------------*/
.cta-btn, button[type=submit], .footer-newsletter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--electric-1);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  font-size: 1.07rem;
  padding: 12px 32px;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(255,74,104,0.11);
  margin-top: 10px;
  margin-bottom: 10px;
  transition: background 0.23s, box-shadow 0.22s, color 0.18s, transform 0.17s;
  position: relative;
  z-index: 0;
}
.cta-btn:hover, button[type=submit]:hover, .footer-newsletter button:hover {
  background: var(--electric-2);
  color: #232D37;
  outline: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 22px rgba(0,194,183,0.23);
}

/* Secondary button for banner/modal */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--electric-3);
  color: #232D37;
  font-weight: 800;
  font-family: 'Lato', sans-serif;
  font-size:1rem;
  border: none;
  border-radius: 32px;
  padding: 10px 28px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(255,208,23,0.23);
  cursor:pointer;
  transition: background 0.19s, color 0.17s;
}
.btn-secondary:hover {background: var(--electric-1);color: #fff;}

/* Filter buttons */
.review-filters button, .recommendation-filters button, .event-filters button {
  background: var(--electric-2);
  color: #fff;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 24px;
  border: none;
  margin-left: 7px;
  margin-bottom: 7px;
  font-family: 'Lato', sans-serif;
  font-size:1rem;
  cursor:pointer;
  transition: background 0.19s, color 0.15s;
}
.review-filters button:hover, .recommendation-filters button:hover, .event-filters button:hover {background: var(--electric-4);}

/*--------------------------------------------------
  5. FEATURES, CARDS & CALLS TO ACTION
---------------------------------------------------*/
.feature-grid, .feature-item {
  width: 100%;
}
.feature-grid {
  gap:36px;
  justify-content: flex-start;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  background: var(--gray-light);
  border-radius: 18px;
  padding: 32px 24px;
  min-width: 210px;
  max-width: 330px;
  box-shadow: 0 4px 20px rgba(39, 193, 183, 0.09), 0 2px 8px rgba(35, 45, 55, 0.07);
  margin-bottom: 20px;
  border-bottom: 4px solid var(--electric-3);
  transition: box-shadow 0.22s, border-bottom 0.22s;
  position: relative;
}
.feature-item img {width:60px; height:60px; margin-bottom:12px;}
.feature-item h3 {color:var(--electric-1);}
.feature-item:hover {
  box-shadow: 0 8px 44px rgba(255,74,104,0.18),0 4px 10px rgba(0,194,183,0.12);
  border-bottom: 4px solid var(--electric-1);
}
@media (max-width: 900px) {
  .feature-grid {
   flex-direction: column;gap:20px;
  }
  .feature-item {max-width: 100%;}
}

/* Reviews/Recommendations/Events/previews */
.review-preview, .recommendation-item, .event-preview {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(206,185,120,0.13),0 2px 8px rgba(0,194,183,0.10);
  padding: 28px 22px 18px 22px;
  transition: box-shadow 0.18s, border-left 0.18s;
  margin-bottom: 20px;
  border-left: 5px solid var(--electric-4);
}
.review-preview:hover, .recommendation-item:hover, .event-preview:hover {
  box-shadow:0 8px 34px rgba(39,193,183,0.12),0 5px 20px rgba(255,74,108,0.11);
  border-left: 5px solid var(--electric-1);
}
.review-preview h3, .recommendation-item h3, .event-preview h3 {
  color: var(--electric-4);
  margin-bottom: 8px;
}
.review-preview a {
  color: var(--electric-2);text-decoration: underline;font-weight:600;transition: color 0.15s;}
.review-preview a:hover {color: var(--electric-1);}

/* Event callout */
.event-callout {
  background: var(--electric-3);
  padding: 28px 20px;
  border-radius: 20px;
  margin-top: 30px;
  margin-bottom:20px;
  color: var(--primary);
  box-shadow: 0 2px 16px rgba(255,208,23,0.08);
}

/*--------------------------------------------------
  6. FORMS & INPUTS
---------------------------------------------------*/
form {
  display: flex;
  flex-direction: column;
  gap:18px;
  max-width: 430px;
  margin-top:13px;
}
form label {
  font-weight: 700;
  font-size:1rem;
  color:var(--electric-4);
  margin-bottom: 2px;
}
input, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--secondary);
  margin-bottom: 2px;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--electric-1);
  background: #fffaf8;
}
button[type=submit] {
  margin-top: 7px;
  margin-bottom: 2px;
}
textarea {min-height:96px;}

/* Newsletter form in footer */
.footer-newsletter label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color:var(--secondary);
  margin-bottom: 1px;
}
.footer-newsletter input[type=email] {
  margin-right: 8px;
  width: 145px;
  border-radius: 7px;
  border: 1.5px solid var(--electric-2);
  padding: 9px 10px;
}
.footer-newsletter button {
  padding:7px 20px;
  font-size:1rem;
  border-radius:24px;
}

@media (max-width: 900px) {
  .footer-newsletter input[type=email] {width: 110px;font-size:0.98rem;}
}

/*--------------------------------------------------
  7. FOOTER
---------------------------------------------------*/
footer {
  background: var(--primary);
  color: var(--accent);
  margin-top: 60px;
  padding-top: 32px;
  padding-bottom: 20px;
  font-size: 1rem;
}
footer .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-brand {
  display:flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.footer-tagline {
  font-size:1.09rem;
  color: var(--secondary);
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  justify-content: space-between;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-nav a {
  color: var(--electric-3);
  font-weight:600;
  font-family:'Lato',sans-serif;
  letter-spacing: 0.04em;
  font-size:1rem;
  transition:color 0.19s;
}
.footer-nav a:hover {color:var(--electric-1);}
.footer-social {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:8px;
}
.footer-social a img {width:28px;height:28px;transition: transform 0.15s;}
.footer-social a:hover img {transform:scale(1.1) rotate(-8deg);}
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  margin-top: 4px;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size:0.92rem;
  color: var(--gray-light);
}
.footer-legal-nav {
  display: flex;
  gap: 18px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.footer-legal-nav a {
  color: var(--electric-2);
  font-weight:500;
  text-decoration:underline;
  transition:color 0.15s;
}
.footer-legal-nav a:hover {color:var(--electric-1);}
.footer-copy {
  color: #9ca4ad;
  font-size: 0.93rem;
  margin-top:2px;
}
@media (max-width: 900px) {
  footer .container{gap:24px;}
  .footer-links {flex-direction:column;gap:24px;}
}
@media (max-width: 768px) {
  footer .container {gap:18px;}
  .footer-links {flex-direction:column;gap:18px;}
  .footer-social {gap:10px;}
}

/*--------------------------------------------------
  8. LISTS, DETAILS & MISC
---------------------------------------------------*/
.text-section ul,
.text-section ol,
.contact-list {
  padding-left: 20px;
  margin-bottom: 16px;
}
.text-section ul li, .contact-list li {
  padding-left:0px;
  font-size: 1rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.contact-list img {
  width:20px;
  margin-right:7px;
  height:20px;
}

ol {
  counter-reset: item;
}
ol li {
  counter-increment: item;
  position: relative;
  margin-bottom: 7px;
}
ol li:before {
  content: counter(item)'.';
  color: var(--electric-2);
  font-weight: bold;
  margin-right: 8px;
  font-size:1rem;
}

/*--------------------------------------------------
  9. ANIMATIONS & MICRO-INTERACTIONS
---------------------------------------------------*/
.cta-btn,.btn-secondary,button[type=submit],.footer-newsletter button {
  transition: background 0.22s, color 0.14s, transform 0.18s, box-shadow 0.15s;
}
.card,.feature-item,.review-preview,.recommendation-item,.event-preview,.testimonial-card {
  transition: box-shadow 0.17s, border-left 0.17s, transform 0.13s;
}
.card:hover,.feature-item:hover,.review-preview:hover,.recommendation-item:hover,.event-preview:hover,.testimonial-card:hover {
  transform: translateY(-3px) scale(1.013);
  z-index: 2;
}

/*--------------------------------------------------
  10. RESPONSIVE & FLEX MANAGEMENT
---------------------------------------------------*/
@media (max-width: 1100px) {
  .card-container,.feature-grid,.review-grid,.recommendation-grid,.event-grid,.content-grid {
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .container {padding:0 7px;}
  .content-wrapper {gap:18px;}
  .testimonials-wrapper, .card-container, .feature-grid, .review-grid, .recommendation-grid, .event-grid, .content-grid {
    flex-direction: column;
    gap: 14px;
  }
  .testimonial-card, .feature-item, .review-preview, .recommendation-item, .event-preview {
    max-width:100%;
    min-width:0;
  }
}

/*--------------------------------------------------
  11. COOKIE CONSENT BANNER + MODAL
---------------------------------------------------*/
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right:0;
  width: 100vw;
  z-index: 2000;
  padding: 26px 20px 22px 20px;
  background: #232D37;
  color: #fff;
  box-shadow: 0 -2px 16px rgba(35,45,55,0.21);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:20px;
  animation: bannerSlideIn 0.78s cubic-bezier(.45,.03,.59,1.01);
}
.cookie-banner strong {color: var(--electric-3);}
.cookie-banner .cookie-btns{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top:8px;
}
.cookie-banner .cookie-btns button {
  min-width: 140px;
}
@media (max-width:600px){.cookie-banner{padding:18px 7px 14px 7px;gap:14px;}.cookie-banner .cookie-btns{gap:10px;}}
@keyframes bannerSlideIn {
  from {transform: translateY(100%); opacity:0;}
  to {transform: translateY(0); opacity:1;}
}

.cookie-modal-overlay {
  display:none;
  position: fixed;
  z-index:2100;
  top:0; left:0;right:0;bottom:0;
  background:rgba(35,45,55,0.86);
  align-items: center;
  justify-content: center;
  animation: modalShow 0.24s cubic-bezier(.65,.3,.3,1.0);
}
.cookie-modal-overlay.open {
  display:flex;
}
.cookie-modal {
  background: #fff;
  color: var(--primary);
  padding: 38px 28px 26px 28px;
  border-radius: 18px;
  min-width: 320px;
  max-width:96vw;
  box-shadow: 0 6px 38px rgba(255,74,104,0.18),0 3px 13px rgba(0,194,183, 0.10);
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap: 18px;
  position:relative;
}
.cookie-modal h2 {
  color:var(--electric-4);
  font-size:1.5rem;
}
.cookie-modal .cookie-category {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:1.05rem;
  margin-bottom:12px;
}
.cookie-toggle {
  appearance:none;
  width: 42px; height: 24px;
  background:var(--electric-2);
  border-radius:13px;
  position:relative;
  outline: none;
  transition: background 0.2s;
  cursor:pointer;
  vertical-align:middle;
}
.cookie-toggle:checked {
  background:var(--electric-1);
}
.cookie-toggle:before {
  content: '';
  position:absolute;
  left:2px;top:2px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  transition: left 0.15s, background 0.22s;
}
.cookie-toggle:checked:before {
  left: 20px;
  background: #fff8e0;
}
.cookie-modal .cookie-modal-actions {
  display: flex;
  gap: 14px;
  margin-top:4px;
}
.cookie-modal .btn-secondary {margin:0;}
.cookie-modal .cookie-modal-close {
  position:absolute;
  top:11px;right:13px;
  background:none;
  border:none;
  font-size:1.5rem;
  color:var(--electric-4);
  cursor:pointer;
  transition: color 0.14s;
}
.cookie-modal .cookie-modal-close:hover{color:var(--electric-1);}
@keyframes modalShow {
  from{opacity:0;transform:scale(0.85);}
  to{opacity:1;transform:scale(1);}
}

/*--------------------------------------------------
  12. UTILITIES
---------------------------------------------------*/
.hidden{display:none!important;}
.flex{display:flex;}
.flex-row{flex-direction:row;}
.flex-col{flex-direction:column;}
.align-center{align-items:center;}
.align-start{align-items:flex-start;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}.gap-16{gap:16px;}.gap-24{gap:24px;}.gap-32{gap:32px;}

/*--------------------------------------------------
  13. VIBRANT_ENERGETIC EXTRAS
---------------------------------------------------*/
section {
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(255,74,104,0.04), 0 2px 6px rgba(81,38,247,0.04);
  margin-bottom: 60px;
  padding: 40px 20px;
  position:relative;
}

section:nth-child(odd) {
  background: var(--gray-light);
}
section::before {
  content: '';
  position: absolute;
  top: -14px; left: -14px;
  width: 70px; height: 70px;
  border-radius: 17px;
  background: var(--electric-3);
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
section:nth-child(even)::before {
  background: var(--electric-1);
  opacity: 0.08;
}
@media (max-width: 600px) {
  section {padding:20px 7px;}
  section::before{display:none;}
}

/*--------------------------------------------------
  14. PRINT & SELECTION
---------------------------------------------------*/
::selection { background: var(--electric-1); color: #fff; }

/*--------------- END ---------------*/