/* RESET & NORMALIZE */
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.5;
 background:#F5E9DA;
 color:#215148;
 font-family:'Open Sans', Arial, Helvetica, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 min-height:100vh;
}
*, *:before, *:after {
 box-sizing: border-box;
}
img {
 max-width: 100%;
 height: auto;
 border-radius: 16px;
 display: block;
}
a {
 color: #E0942B;
 background: transparent;
 text-decoration: none;
 transition: color 0.2s;
 word-break: break-word;
}
a:hover, a:focus {
 color: #215148;
 text-decoration: underline;
}
ul,ol {
 margin-left: 1.5em;
}
strong {
 font-weight: 600;
}

/* VARIABLES (fallbacks added) */
:root {
 --color-primary: #215148;
 --color-primary-darker: #1c423b;
 --color-secondary: #F5E9DA;
 --color-bg: #fff;
 --color-accent: #E0942B;
 --color-card: #fff8ef;
 --color-shadow: rgba(34,34,34,0.07);
 --color-border: #E6DDCA;
 --color-error: #b44e27;
 --radius-normal: 18px;
 --shadow: 0 2px 16px 0 var(--color-shadow);
 --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
 --font-body: 'Open Sans', Arial, Helvetica, sans-serif;
}

@media (max-width: 768px) {
 :root {
  --radius-normal: 14px;
 }
}

/* CONTAINER */
.container {
 width: 100%;
 max-width: 1130px;
 margin: 0 auto;
 padding: 0 18px;
 box-sizing: border-box;
}

/* HEADER STYLES */
header {
 background: #fff;
 box-shadow: 0 2px 16px 0 var(--color-shadow);
 border-bottom: 1px solid var(--color-border);
 position:sticky;
 top:0;
 z-index: 30;
}
.header-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 min-height: 84px;
}
.logo-link img {
 height: 54px;
 border-radius: 0;
}

.main-nav {
 display: flex;
 align-items: center;
 gap: 22px;
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 1rem;
 flex-wrap: wrap;
}
.main-nav a {
 color: var(--color-primary);
 padding: 7px 10px;
 border-radius: var(--radius-normal);
 transition: background 0.18s, color 0.18s;
}
.main-nav a:hover,
.main-nav a:focus {
 background: var(--color-secondary);
 color: var(--color-accent);
 text-decoration: none;
}

.cta-btn {
 appearance: none;
 border: none;
 display: inline-block;
 background: var(--color-accent);
 color: #fff;
 font-size: 1rem;
 font-family: var(--font-display);
 font-weight: 700;
 border-radius: 32px;
 padding: 14px 32px;
 margin-left: 12px;
 transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
 box-shadow: 0 2px 8px var(--color-shadow);
 letter-spacing: 0.03em;
 cursor: pointer;
 position: relative;
}
.cta-btn:hover, .cta-btn:focus {
 background: #ce7a11;
 color: #fff;
 box-shadow: 0 4px 20px var(--color-shadow);
 transform: translateY(-2px) scale(1.03);
 text-decoration: none;
}

/* MOBILE MENU ---------------------------------- */
.mobile-menu-toggle {
 display: none;
 background: var(--color-secondary);
 border: none;
 font-size: 2rem;
 color: var(--color-primary);
 border-radius: 50%;
 width: 44px;
 height: 44px;
 align-items: center;
 justify-content: center;
 box-shadow: 0 2px 8px var(--color-shadow);
 transition: background 0.18s, color 0.18s;
 z-index: 55;
 position: relative;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
 background: var(--color-accent);
 color: #fff;
}
.mobile-menu {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: #fff;
 box-shadow: 0 4px 30px rgba(34,34,34,0.14);
 z-index: 60;
 padding: 36px 24px 24px 24px;
 transform: translateX(-110vw);
 transition: transform 0.35s cubic-bezier(0.58,0.25,0.34,0.95);
 visibility: hidden;
}
.mobile-menu.open {
 transform: translateX(0);
 visibility: visible;
}
.mobile-menu-close {
 background: var(--color-secondary);
 border: none;
 font-size: 2.3rem;
 color: var(--color-primary);
 border-radius: 50%;
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 align-self: flex-end;
 margin-bottom: 16px;
 transition: background 0.16s, color 0.16s;
 z-index: 2;
}
.mobile-menu-close:focus,
.mobile-menu-close:hover {
 background: var(--color-accent);
 color: #fff;
}
.mobile-nav {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-top: 24px;
 width: 100%;
}
.mobile-nav a {
 color: var(--color-primary);
 font-size: 1.15rem;
 padding: 12px 0 12px 10px;
 border-radius: var(--radius-normal);
 font-family: var(--font-display);
 font-weight: 500;
 transition: background 0.16s, color 0.16s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
 background: var(--color-accent);
 color: #fff;
 text-decoration: none;
}

@media (max-width: 1024px) {
 .main-nav,
 .cta-btn {
   display: none;
 }
 .mobile-menu-toggle {
   display: flex;
 }
}
@media (min-width: 1025px) {
 .mobile-menu {
   display: none !important;
 }
}

/* SECTION STYLES --------------------------------------- */
.section {
 margin-bottom: 60px;
 padding: 40px 20px;
}
.hero {
 background: linear-gradient(110deg, var(--color-secondary) 70%, #FFFCF6 100%);
 border-bottom: 1px solid var(--color-border);
 padding: 48px 0 40px 0;
}

.hero .container {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.hero .content-wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 24px;
 max-width: 650px;
 margin: 0 auto;
 padding: 0;
}
.hero h1 {
 font-family: var(--font-display);
 font-size: 2.2rem;
 font-weight: 800;
 color: var(--color-primary-darker);
 letter-spacing: 0.01em;
 margin-bottom: 0.5em;
 text-align: center;
}
.hero .subheadline,
.hero p {
 font-size: 1.18rem;
 color: #356b61;
 font-family: var(--font-body);
 font-weight: 400;
 text-align: center;
 margin-bottom: 18px;
 margin-top: 0;
}

.features,
.about,
.cta,
.services,
.faq,
.legal,
.thankyou-message,
.testimonials {
 background: none;
 padding-top: 28px;
 padding-bottom: 28px;
}

.features {
 background: #fff;
 border-radius: var(--radius-normal);
 box-shadow: 0 4px 24px var(--color-shadow);
 margin: 32px 18px 56px 18px;
}
.about {
 background: var(--color-secondary);
 border-radius: var(--radius-normal);
 box-shadow: 0 4px 24px var(--color-shadow);
 margin: 32px 18px 56px 18px;
}

.cta {
 background: var(--color-card);
 border-radius: var(--radius-normal);
 box-shadow: 0 2px 16px var(--color-shadow);
 margin: 36px 18px 48px 18px;
}

.section h2, .features h2, .about h2, .cta h2, .services h2, .faq h2, .legal h1, .thankyou-message h1, .testimonials h2 {
 font-size: 2rem;
 font-family: var(--font-display);
 font-weight: 700;
 color: var(--color-primary-darker);
 margin-bottom: 18px;
 letter-spacing: 0;
}

.section h3, .features h3, .about h3, .cta h3, .services h3, .faq h3 {
 font-size: 1.23rem;
 font-family: var(--font-display);
 font-weight: 600;
 color: var(--color-primary);
 margin-bottom: 10px;
 margin-top: 12px;
}
.section h4 {
 font-size: 1.14rem;
 font-family: var(--font-body);
 font-weight: 600;
 color: #446960;
 margin-bottom: 8px;
}

/* FLEX SPACING & CLASSES ---------------------------------- */
.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.card {
 margin-bottom: 20px;
 position: relative;
 background: #fff;
 border-radius: var(--radius-normal);
 box-shadow: 0 2px 12px var(--color-shadow);
 padding: 28px 24px 24px 24px;
 transition: box-shadow 0.19s, transform 0.18s;
}
.card:hover {
 box-shadow: 0 10px 32px var(--color-shadow);
 transform: translateY(-2px) scale(1.012);
}
.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;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 padding: 20px;
 margin-bottom: 22px;
 background: #fff;
 border-radius: var(--radius-normal);
 box-shadow: 0 2px 16px var(--color-shadow);
 border: 1px solid var(--color-border);
 max-width: 520px;
 transition: box-shadow 0.14s, transform 0.16s;
}
.testimonial-card:hover {
 box-shadow: 0 8px 24px var(--color-shadow);
 transform: translateY(-3px) scale(1.012);
}
.feature-item {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
}
.next-steps ul, .company-values-list, .usps-list, .benefit-list, .certifications-list, .training-benefits-list, .services-list, .question-list, .pricing-faq-list {
 display: flex;
 flex-direction: column;
 gap: 18px;
 margin-top: 8px;
}

.feature-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 justify-content: flex-start;
 margin-top: 22px;
}
.feature-grid li,
.feature-grid div {
 flex: 1 1 250px;
 background: var(--color-card);
 border-radius: var(--radius-normal);
 padding: 28px 18px 20px 18px;
 box-shadow: 0 2px 12px var(--color-shadow);
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
 min-width: 180px;
 margin-bottom: 24px;
 transition: box-shadow 0.17s, transform 0.17s;
}
.feature-grid li:hover, .feature-grid div:hover {
 box-shadow: 0 8px 28px var(--color-shadow);
 transform: translateY(-3px) scale(1.012);
}
.feature-grid img {
 width: 48px;
 height: 48px;
 margin-bottom: 10px;
}

.usps-list,
.certifications-list,
.experience-highlights ul,
.training-benefits-list {
 list-style: none;
 margin-left: 0;
}
.usps-list li,
.certifications-list li,
.benefit-list li,
.training-benefits-list li {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 0;
 font-size: 1.07rem;
}
.usps-list img,
.benefit-list img,
.training-benefits-list img {
 width: 28px;
 height: 28px;
}

.trust-badges {
 display: flex;
 gap: 16px;
 margin-top: 16px;
}
.trust-badges img {
 width: 48px;
 height: 48px;
 border-radius: 12px;
 background: #fff;
 box-shadow: 0 1px 3px #c5ceb7;
}

/* TESTIMONIALS  ------------------------------------------ */
.testimonials .content-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 28px;
 align-items: flex-start;
 justify-content: flex-start;
 padding-bottom: 16px;
}
.testimonial-card .stars {
 display: flex;
 gap: 2px;
 margin-bottom: 10px;
}
.testimonial-card .stars img {
 width: 22px;
 height:22px;
 filter: drop-shadow(0 0 2px #ffd89e);
}
.testimonial-card p {
 font-size: 1.09rem;
 font-style: italic;
 color: #215148;
 text-align: center;
 letter-spacing: 0.01em;
 margin-bottom: 10px;
}
.testimonial-meta {
 color: #E0942B;
 font-size: 1rem;
 font-weight: 500;
 text-align: center;
 font-family: var(--font-display);
}

/* FOOTER STYLES ------------------------------------------- */
footer {
 background: var(--color-primary);
 padding: 48px 0 22px 0;
 color: #fff;
 position:relative;
 margin-top: 40px;
}
.footer-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 32px 50px;
 justify-content: space-between;
 align-items: flex-start;
}
.footer-logo-social {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 18px;
 min-width: 120px;
 margin-bottom: 12px;
}
.footer-logo-social img {
 width: 56px;
 height: 56px;
 background: #fff;
 border-radius: 50%;
 box-shadow: 0 0 10px var(--color-shadow);
}
.social-links {
 display: flex;
 gap: 14px;
}
.social-links a {
 background: var(--color-accent);
 border-radius: 50%;
 padding: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.16s;
}
.social-links a:hover, .social-links a:focus {
 background: #fff;
}
.social-links img {
 width: 28px;
 height: 28px;
 filter: grayscale(0%);
}
.footer-navigation {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.footer-navigation .quick-links, .footer-navigation .legal-links {
 display: flex;
 flex-direction: column;
 gap:8px;
}
.footer-navigation a {
 color: #fff;
 font-family: var(--font-display);
 font-size: 1rem;
 border-radius: 8px;
 padding: 5px 0 5px 8px;
 transition: background 0.16s, color 0.16s;
}
.footer-navigation a:hover, .footer-navigation a:focus {
 background: var(--color-accent);
 color: #215148;
}
.footer-contact {
 min-width: 230px;
 color: #fff;
 font-size: 1rem;
 font-family: var(--font-body);
 display: flex;
 flex-direction: column;
 gap:10px;
}
.footer-contact h3 {
 font-size: 1.12rem;
 font-weight: 700;
 color: var(--color-accent);
 margin-bottom: 10px;
}
.footer-contact address {
 font-style: normal;
}
.footer-contact img {
 width: 1.15em;
 height: 1.15em;
 vertical-align: middle;
 margin-right: 6px;
 border-radius: 0;    
 box-shadow: none;
 background: none;
}
.footer-contact a {
 color: #fff1cff5;
 font-family: var(--font-body);
 text-decoration: underline;
}
.footer-contact a:hover {
 color: var(--color-accent);
}

/* TABLES ----------------------------------------- */
.price-table {
 width: 100%;
 border-spacing: 0;
 border-collapse: collapse;
 background: #fff;
 border-radius: var(--radius-normal);
 box-shadow: 0 2px 12px var(--color-shadow);
 overflow: hidden;
 margin-bottom: 24px;
 font-size: 1.05rem;
}
.price-table th, .price-table td {
 padding: 18px 10px;
 text-align: left;
 border-bottom: 1px solid var(--color-border);
}
.price-table th {
 background: #FFFCF6;
 color: var(--color-primary-darker);
 font-weight: 700;
 font-family: var(--font-display);
}
.price-table tr:last-child td {
 border-bottom: none;
}
.price-table td {
 font-family: var(--font-body);
 color: var(--color-primary);
}
.price-table tr:hover td {
 background: #fbeedc;
}

.price {
 background: var(--color-accent);
 color:#fff;
 border-radius: 14px;
 font-size: 0.98rem;
 padding: 3px 12px;
 margin-left:9px;
 font-family: var(--font-display);
 font-weight: 600;
 letter-spacing:0.01em;
}

/* FORMS (Minimal - contact forms would have similar styles) */
input, textarea, select, button {
 font-family: var(--font-body);
 font-size:1rem;
}
input, textarea, select {
 border:1.5px solid var(--color-border);
 border-radius:8px;
 padding:11px 12px;
 margin-bottom:14px;
 transition:border 0.18s, box-shadow 0.17s;
}
input:focus, textarea:focus {
 border:1.5px solid var(--color-accent);
 box-shadow:0 1px 5px var(--color-shadow);
 outline:none;
}
button:active {
 outline:none;
}

/* FAQ LISTS -------------------------------------------- */
.question-list li, .pricing-faq-list li {
 background: var(--color-card);
 border-radius: 14px;
 box-shadow: 0 2px 8px var(--color-shadow);
 padding: 17px 15px;
 color: var(--color-primary);
 margin-bottom: 14px;
 font-family: var(--font-body);
}

/* BOOK CTA --------------------------------------------- */
.booking-cta {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
 align-items: center;
 margin-top: 14px;
}

/* CONTACT INFO ------------------------------------------ */
.contact-section .content-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 32px;
 justify-content: flex-start;
 align-items: flex-start;
}
.contact-info, .opening-hours, .location-map {
 background: var(--color-card);
 border-radius: 14px;
 box-shadow: 0 2px 12px var(--color-shadow);
 padding: 18px 15px;
 margin-bottom: 16px;
 font-size: 1.02rem;
 flex: 1 1 240px;
}
.contact-info img,
.opening-hours img {
 width: 24px;
 height: 24px;
 margin-right: 8px;
 border-radius: 0;
 display: inline-block;
 vertical-align: middle;
}

/* THANK-YOU PAGE ---------------------------------------- */
.thankyou-message .content-wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 22px;
 margin: 28px 0;
}
.thankyou-message h1 {
 font-family: var(--font-display);
 font-size: 2em;
 color: var(--color-primary-darker);
 text-align: center;
}
.thankyou-message p {
 text-align: center;
 font-size: 1.1rem;
 color: #215148;
}
.next-steps {
 background: var(--color-card);
 border-radius: 14px;
 box-shadow: 0 2px 8px var(--color-shadow);
 padding: 14px 18px;
}

/* LEGAL ----------------------------------------------- */
.legal {
 background: #fff;
 border-radius: var(--radius-normal);
 box-shadow: 0 2px 16px var(--color-shadow);
 margin:36px 0;
}
.legal .content-wrapper {
 margin: 12px 0 10px 0;
 line-height: 1.7;
}
.legal h2,
.legal h3 {
 color: var(--color-primary);
 font-family: var(--font-display);
 margin-top: 18px;
}
.legal ul {
 margin-left: 1.7em;
 margin-bottom: 20px;
}
.legal address {
 font-style:normal;
 margin-top: 10px;
 font-family: var(--font-body);
}

/* RESPONSIVE DESIGN ------------------------------------- */
@media (max-width: 1024px) {
 .container {
   max-width: 950px;
   padding: 0 12px;
 }
 .header-wrapper,
 .footer-wrapper {
   gap: 22px 24px;
   flex-wrap: wrap;
 }
}
@media (max-width: 900px) {
 .container {
   max-width: 720px;
 }
 .feature-grid {
   gap: 14px;
 }
 .footer-wrapper {
   flex-direction: column;
   gap: 32px 0;
 }
 .footer-navigation {
   flex-direction: row;
   gap: 16px;
 }
}
@media (max-width: 768px) {
 .container {
   max-width: 95vw;
   padding: 0 4vw;
 }
 .header-wrapper {
   min-height: 66px;
   gap: 12px;
 }
 .card-container,
 .content-grid,
 .feature-grid,
 .testimonials .content-wrapper {
   flex-direction: column;
   gap: 16px;
 }
 .content-wrapper {
   flex-direction: column !important;
 }
 .text-image-section {
   flex-direction: column;
   gap: 20px;
   align-items: stretch;
 }
 .features, .about, .cta, .services, .faq, .legal, .thankyou-message {
   border-radius: 12px;
   box-shadow: 0 2px 8px var(--color-shadow);
   margin-left: 6px;
   margin-right: 6px;
   margin-bottom: 32px;
   padding: 20px 10px;
 }
 .testimonial-card {
   max-width: 100%;
   padding: 16px 8px;
 }
 .booking-cta {
   justify-content: center;
 }
 .footer-wrapper {
   flex-direction: column;
   align-items: flex-start;
   gap: 18px;
 }
}
@media (max-width:500px) {
 .container {
   max-width: 99vw;
   padding: 0 2vw;
 }
 .header-wrapper {
   gap: 0px;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 .footer-contact {
   min-width: 0;
   font-size: 0.97rem;
 }
}
/* ---------------------- COOKIE BANNER ------------------- */
.cookie-banner {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100vw;
 background: #fff8ef;
 color: #215148;
 border-top: 2px solid var(--color-accent);
 box-shadow: 0 -4px 20px rgba(60,57,33,0.12);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 padding: 22px 10vw 20px 10vw;
 font-size: 1.02rem;
 z-index: 90;
 opacity: 1;
 transition: opacity 0.28s,visibility 0.22s;
}
.cookie-banner.hide {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
.cookie-banner p {
 margin-bottom: 0;
 text-align: center;
}
.cookie-banner-buttons {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-top:8px;
}
.cookie-btn {
 background: var(--color-accent);
 color: #fff;
 border: none;
 font-family: var(--font-display);
 font-size: 1rem;
 padding: 9px 22px;
 border-radius: 24px;
 cursor: pointer;
 font-weight: 600;
 transition: background 0.16s, color 0.14s, box-shadow 0.13s;
 box-shadow: 0 1px 4px var(--color-shadow);
}
.cookie-btn.cookie-settings {
 background: var(--color-primary);
 color: #fff;
}
.cookie-btn.reject {
 background: #fff;
 color: var(--color-accent);
 border: 1.3px solid var(--color-accent);
}
.cookie-btn:hover,
.cookie-btn:focus {
 background: #ce7a11;
 color: #fff;
}
.cookie-btn.reject:hover,
.cookie-btn.reject:focus {
 background: #fff1e1;
 color: var(--color-accent);
 border-color: #ce7a11;
}

/* COOKIE MODAL */
.cookie-modal-overlay {
 position: fixed;
 top:0; left:0;
 width: 100vw;
 height: 100vh;
 background: rgba(33,81,72,0.13);
 z-index: 120;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 1;
 pointer-events: auto;
 transition: opacity 0.18s;
}
.cookie-modal-overlay.hide {
 opacity:0;
 pointer-events: none;
}
.cookie-modal {
 background: #fff;
 border-radius: 18px;
 box-shadow: 0 6px 28px rgba(33,81,72,0.16);
 padding: 32px 24px 26px 24px;
 max-width: 94vw;
 width: 410px;
 display: flex;
 flex-direction: column;
 gap:18px;
 align-items: flex-start;
 position: relative;
 animation: cookiePopup 0.32s cubic-bezier(0.75,0.2,0.15,1.2);
}
@keyframes cookiePopup {
 from {transform: translateY(40px) scale(0.94); opacity: 0.38; }
 to {transform: translateY(0) scale(1); opacity: 1;}
}
.cookie-modal .cookie-modal-close {
 position: absolute;
 top: 14px;
 right: 14px;
 background: var(--color-secondary);
 border: none;
 font-size: 1.6rem;
 color: var(--color-primary);
 border-radius: 50%;
 width: 36px; height: 36px;
 display: flex; align-items: center; justify-content: center;
 cursor: pointer;
 transition: background 0.12s;
}
.cookie-modal .cookie-modal-close:hover,
.cookie-modal .cookie-modal-close:focus {
 background: var(--color-accent);
 color: #fff;
}
.cookie-modal h3 {
 font-family: var(--font-display);
 color: var(--color-primary-darker);
 font-size: 1.22rem;
 margin-bottom: 7px;
}
.cookie-categories {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.cookie-category {
 display: flex;
 align-items: center;
 gap: 10px;
 background: #fff8ef;
 padding:8px 10px;
 border-radius: 12px;
}
.cookie-category input[type='checkbox'] {
 accent-color: var(--color-accent);
 width: 18px; height: 18px;
 margin:0 8px 0 0;
}
.cookie-category.disabled input[type='checkbox'] {
 accent-color: #bbb;
}
.cookie-category .label {
 font-weight: 500;
 color: var(--color-primary);
}

.cookie-modal-actions {
 margin-top: 16px;
 display: flex;
 gap: 10px;
 justify-content: flex-end;
 width: 100%;
}

@media (max-width: 460px) {
 .cookie-modal { padding:16px 6vw; }
 .cookie-banner { padding: 16px 3vw 13px 3vw; font-size:0.97rem; }
}

/* ANIMATIONS, MICROINTERACTIONS -------------------------- */
.cta-btn,
.card,
.feature-grid li,
.feature-grid div,
.testimonial-card,
.social-links a,
.cookie-btn {
 transition: box-shadow 0.16s, transform 0.16s, background 0.16s, color 0.14s;
}

.cta-btn:active,
.card:active,
.feature-grid li:active,
.feature-grid div:active,
.testimonial-card:active {
 transform: scale(0.98);
}

/* TYPOGRAPHY ---------------------------------------------- */
h1, h2, h3, h4, .cta-btn, .price {
 font-family: var(--font-display);
 letter-spacing: 0.01em;
}
body, p, ul, li, address, table, th, td, input, textarea {
 font-family: var(--font-body);
}

@media (max-width: 500px) {
 .hero h1, .section h2, .cta h2, .about h2, .features h2, .testimonials h2 {
   font-size: 1.34rem !important;
 }
 .section h3, .about h3, .features h3, .cta h3 {
   font-size: 1.1rem !important;
 }
 .cta-btn, .price {
   font-size: 0.97rem !important;
   padding: 12px 16px;
 }
}

/* UTILS -------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }