/* ==== CSS RESET & NORMALIZATION ==== */
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,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
html{box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{
  display:block;
}
body{
  line-height:1.5; background:#fff; color:#2B3D55;
  font-family:'Open Sans', Arial, sans-serif; font-size:16px;
  min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
ol,ul{
  list-style:none;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit; font-size:inherit;}

/* ==== BRAND PALETTE & VARIABLES ==== */
:root {
  --color-primary: #2B3D55;
  --color-secondary: #F3B431;
  --color-accent: #F5F5F5;
  --color-dark: #262626;
  --color-white: #fff;
  --color-pink: #FF70A6;
  --color-cyan: #37CBCB;
  --color-lime: #67E480;
  --radius-md: 18px;
  --radius-lg: 32px;
  --shadow-md:0 6px 24px 0 rgba(43,61,85,0.08);
  --shadow-lg:0 16px 40px 0 rgba(43,61,85,0.10);
  --transition-fast: .19s cubic-bezier(.65,.01,.73,1.13);
}

/* ==== TYPOGRAPHY ==== */
h1,h2,h3,h4 {
  font-family:'Montserrat', 'Open Sans', Arial, sans-serif;
  font-weight:900;
  margin-bottom:16px;
  line-height:1.15;
  color: var(--color-primary);
}
h1 {
  font-size:2.6rem;
  letter-spacing:-2px;
}
h2 {
  font-size:1.8rem;
  margin-bottom:20px;
  color: var(--color-pink);
}
h3 {
  font-size:1.25rem;
  margin-bottom:18px;
  color: var(--color-lime);
}
p,li,blockquote {
  font-family:'Open Sans', Arial, sans-serif;
  font-size:1rem;
  margin-bottom:12px;
}
strong, b { font-weight:700; }

blockquote {
  background: var(--color-accent);
  border-left:5px solid var(--color-pink);
  padding:18px 28px;
  border-radius:var(--radius-md);
  margin: 20px 0;
  font-family:'Montserrat', Arial, sans-serif;
  font-style:italic;
  color:var(--color-dark);
}

/* ==== LAYOUT UTILS ==== */
.container{
  max-width:1100px; margin:0 auto; padding:0 16px;
  width:100%;
}
.content-wrapper {
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; width:100%;
}
.section {
  margin-bottom:60px;
  padding: 40px 20px;
}
.card-container{
  display:flex; flex-wrap:wrap; gap:24px;
}
.card{ margin-bottom:20px; position:relative; border-radius:var(--radius-md); box-shadow:var(--shadow-md); background:var(--color-white); transition:box-shadow var(--transition-fast), transform .14s linear; }
.card:hover {box-shadow: var(--shadow-lg); transform:translateY(-4px);}
.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; min-width:0;
  background: var(--color-accent);
  border-radius:var(--radius-md);
  box-shadow:0 3px 18px 0 rgba(43,61,85,0.10);
  margin-bottom:20px;
}
.feature-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:15px;
}

/* ==== HERO ==== */
.hero {
  padding:64px 0; background: linear-gradient(90deg,#F3B431 20%, #FF70A6 95%);
  min-height:320px; display:flex; align-items:center; margin-bottom:60px;
}
.hero .container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero .content-wrapper { align-items:center; text-align:center; }
.hero h1 { color: var(--color-primary); font-size:2.9rem; }
.hero p { font-size:1.2rem; color: #583004; margin-bottom:22px; }

/* ==== NAVIGATION ==== */
header {
  background:var(--color-white);
  box-shadow:0 1px 10px 0 rgba(243,180,49,0.13);
  position:relative;
  z-index:6;
}
header nav {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:14px 0;
}
header nav a {
  font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:1rem;
  color:var(--color-primary); padding:10px 16px; border-radius:12px; transition:background .18s, color .18s;
  position:relative;
}
header nav a:not(.cta-primary):hover,
header nav a:not(.cta-primary):focus{
  background:var(--color-accent);
  color:var(--color-pink);
}
header nav a.cta-primary{
  background:var(--color-pink); color: var(--color-white);
  border:none; border-radius:14px; padding:10px 22px;
  font-size:1.08rem; letter-spacing:0.5px;
  box-shadow:0 2px 10px 0 rgba(255, 112, 166, 0.13);
  transition:background var(--transition-fast),box-shadow .13s;
}
header nav a.cta-primary:hover,
header nav a.cta-primary:focus{
  background:var(--color-primary); color:var(--color-secondary); box-shadow:0 4px 14px #e8387b72;
}
header nav img {
  height:40px; margin-right:10px;
  vertical-align:middle; border-radius:9px;
  box-shadow:0 3px 10px rgba(43,61,85,.06);
  background:#fff;
  transition:box-shadow .13s;
}

/* ==== MOBILE MENU ==== */
.mobile-menu-toggle{
  display:none; background:none; border:none;
  font-size:2rem; color:var(--color-primary);
  cursor:pointer; padding:7px 16px; border-radius:12px;
  margin-left:auto; transition:background .16s;
  z-index:1011;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover{
  background:var(--color-accent);
  color:var(--color-pink);
}
.mobile-menu {
  display:flex; flex-direction:column; align-items:flex-end;
  position:fixed; top:0; right:0; height:100vh; width:100vw; max-width:320px;
  background:var(--color-accent);
  box-shadow:-2px 0 40px 0 rgba(43,61,85,0.18);
  transform:translateX(110%);
  transition:transform .32s cubic-bezier(.42,2,.25,1);
  padding:22px 0 0 20px;
  z-index:1001;
  opacity:1;
  pointer-events:none;
}
.mobile-menu.open{
  transform:translateX(0);
  pointer-events:auto;
  box-shadow:-6px 0 60px 0 rgba(43,61,85,0.21);
}
.mobile-menu-close {
  align-self:flex-end; font-size:2rem;
  background:none; border:none;
  color:var(--color-primary); padding:8px 17px; border-radius:8px;
  cursor:pointer;
  transition:background .13s;
}
.mobile-menu-close:focus, .mobile-menu-close:hover {
  background:var(--color-pink); color:var(--color-white);   transition: all .18s;
}
.mobile-nav{
  display:flex; flex-direction:column; gap:10px; margin-top:40px; min-width:220px; width:90%;
}
.mobile-nav a {
  font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:1.14rem;
  color:var(--color-primary); padding:13px 8px; border-radius:12px; transition:background .17s, color .17s;
}
.mobile-nav a:hover, .mobile-nav a:focus{
  background:var(--color-lime);
  color:var(--color-dark);
}
@media (max-width:1088px){
  .container{max-width:96vw;}
}
@media (max-width:980px){
  .container{max-width:98vw;}
}

@media (max-width:900px){
  header nav {gap:8px;}
}
@media (max-width:768px){
  header nav {display:none;}
  .mobile-menu-toggle{display:block;}
  .container{padding:0 8px;}
}

/* ==== MAIN SECTIONS ==== */
section { margin-bottom:60px; padding:40px 20px; }
h2 ~ ul,
h2 ~ ol { margin-top:0px; margin-bottom:15px; font-size:1.1rem; }
h2 ~ ul li, .text-section ul li {
  margin-bottom:9px; display:flex; align-items:center; gap:13px;
}
h2 ~ ul li img{ width:28px; height:28px; display:inline-block; }
h2 ~ ol{margin-left:21px;}
h2 ~ ol li{margin-bottom:9px; list-style-type:decimal;}
.text-section{
  margin-top:14px; margin-bottom:12px;
  background:none; border-radius:var(--radius-md);
}
.text-section h3{
  margin-bottom:7px; color:var(--color-pink);
}
.text-section > strong { display:block; margin-bottom:7px; color:var(--color-primary); }
.text-section a {
  color:var(--color-pink); text-decoration:underline; transition:color .16s;
}
.text-section a:hover, .text-section a:focus{ color:var(--color-lime);}

.feature-item img{
  width:32px;height:32px;border-radius:7px;background:#fff;
}

@media (max-width:768px){
  .section, section{
    padding:27px 7px;
    margin-bottom:38px;
  }
  .hero { padding:32px 0; }
  .hero h1 { font-size:2.0rem; }
  h2 { font-size:1.32rem; }
  
  .text-image-section { flex-direction:column; gap:18px; }
}
@media (max-width:520px){
  h1 { font-size:1.32rem; }
}

/* ==== CTAS & BUTTONS ==== */
.cta-primary {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--color-pink); color:#fff;
  border-radius:18px; border:none;
  font-size:1.08rem; font-family:'Montserrat',Arial,sans-serif; font-weight:900;
  padding: 12px 25px; margin:10px 2px 3px 0;
  box-shadow: 0 4px 14px 0 rgba(255,112,166,0.11);
  cursor:pointer; transition:background .22s,color .22s,transform .10s;
}
.cta-primary:focus, .cta-primary:hover {
  background:var(--color-primary); color:var(--color-secondary);
  outline:none; transform:translateY(-2px) scale(1.04);
}
button, .button {
  font-family:'Montserrat',Arial,sans-serif; font-weight:700;
  border-radius:13px; border: none; padding:10px 19px; font-size:1rem;
  cursor:pointer; transition:background-color .16s, color .16s;
  box-shadow:var(--shadow-md);
}
button:active {
  transform:scale(0.98);
}

/* ==== CARDS ==== */
.card{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:32px 26px;
  transition:box-shadow .19s, transform .16s;
  min-width:260px; max-width:420px;
}
.card:hover{ box-shadow:0 8px 30px 0 rgba(255,112,166,0.08), var(--shadow-lg); transform:translateY(-7px) scale(1.02);}

/* ==== TESTIMONIALS ==== */
.testimonial-card{
  background:var(--color-accent);
  border-radius:var(--radius-md);
  color: #23223B;
  box-shadow:0 6px 24px 0 rgba(43,61,85,0.13);
  font-family:'Open Sans',Arial,sans-serif;
  font-size:1.06rem;
  position:relative;
  margin-bottom:20px;
  transition:box-shadow .18s, transform .12s;
}
.testimonial-card:hover{
  box-shadow: 0 16px 40px 0 rgba(43,61,85,0.17);
  transform:translateY(-3px);
}
.testimonial-card p {
  flex:1; margin:0; font-style:italic; color:#41415A;
}
.testimonial-card span {
  font-size:0.97rem;
  margin-left:12px;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--color-pink);
}
@media (max-width:650px){
  .testimonial-card{
    flex-direction:column; align-items:flex-start; gap:10px; padding:14px;
  }
}

/* ==== FOOTER ==== */
footer {
  background:var(--color-primary);
  color:var(--color-white);
  padding:52px 0 28px 0;
  box-shadow: 0 -3px 24px 8px rgba(43,61,85,0.08);
}
footer .container{
  display:flex; flex-direction:column; gap:12px;
}
footer nav{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
}
footer nav a {
  color:var(--color-secondary); font-weight:700; font-family:'Montserrat', Arial, sans-serif;
  font-size:0.94rem; padding:6px 11px; border-radius:7px;
  transition:background .15s, color .15s;
}
footer nav a:hover,footer nav a:focus{
  background:var(--color-lime); color:var(--color-dark);
}
footer .text-section{
  font-size:0.95rem; opacity:0.93; color:var(--color-accent);
  margin-top:6px;
}
footer .text-section a{color:var(--color-pink);}
footer .text-section a:hover{color:var(--color-secondary);}

/* ==== FORMS & FAQ ==== */
input, textarea, select{
  border-radius:10px; border:1.7px solid var(--color-pink);
  padding:10px 13px; margin-bottom:13px; outline:none;
  font-family:'Open Sans',Arial,sans-serif; font-size:1rem;
  width:100%;
  transition:border .16s;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--color-primary);
  background:var(--color-accent);
}

/* ==== COOKIE BANNER ==== */
.cookie-banner {
  position:fixed; left:0; bottom:0; width:100vw;
  background:var(--color-secondary); color:var(--color-primary);
  display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; box-shadow:0 -1px 28px 0 rgba(43,61,85,0.16);
  padding:20px 32px 20px 20px; z-index:2000;
  font-family:'Montserrat', Arial, sans-serif; font-size:1rem;
  gap:20px;
  transition:transform .3s, opacity .3s;
}
.cookie-banner.hide {
  opacity:0; pointer-events:none; transform:translateY(140%);
}
.cookie-banner .cookie-message{
  max-width:540px;
}
.cookie-banner .cookie-actions{
  display:flex; gap:15px; flex-wrap:wrap;
}
.cookie-banner button{
  background:var(--color-primary); color:var(--color-secondary);
  font-size:0.97rem; padding:9px 15px; border-radius:14px; border:none;
  font-family:'Montserrat',Arial,sans-serif; font-weight:700; cursor:pointer;
  transition:background .16s, color .16s,box-shadow .14s;
  box-shadow:0 1px 10px 0 rgba(43,61,85,0.07);
}
.cookie-banner button:hover, .cookie-banner button:focus {
  background:var(--color-pink); color:var(--color-white);
}
.cookie-banner button.cookie-settings{
  background:transparent; color:var(--color-primary); border:2px solid var(--color-primary);
}
.cookie-banner button.cookie-settings:hover { background:var(--color-lime); color:var(--color-dark); border:none; }

/* ==== COOKIE MODAL ==== */
.cookie-modal-backdrop{
  position:fixed; left:0; top:0; width:100vw; height:100vh;
  background:rgba(43,61,85,0.23); z-index:2300;
  display:flex; align-items:center; justify-content:center;
  opacity:1; pointer-events:auto;
  transition:opacity .23s;
}
.cookie-modal-backdrop.hide{ opacity:0; pointer-events:none; }
.cookie-modal{
  background:var(--color-white); color:var(--color-dark);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 60px rgba(43,61,85,0.18);
  max-width:420px; padding:48px 37px 24px 37px; min-width:244px;
  display:flex; flex-direction:column; gap:26px; align-items:flex-start;
  animation:fadeInUp .36s cubic-bezier(.58,2,.35,1.22);
}
@keyframes fadeInUp {
  0%{transform:translateY(76px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
.cookie-modal h3 {
  color: var(--color-pink);
  font-size:1.23rem; letter-spacing:-.5px; margin-bottom:5px;
}
.cookie-modal .cookie-category{
  display:flex; align-items:center; gap:10px;
}
.cookie-modal label {
  cursor:pointer;
  font-family:'Open Sans',Arial,sans-serif;
  color:var(--color-primary);
  font-weight:600;
}
.cookie-modal-toggle[
  type=checkbox]:disabled+span{
  opacity:0.5;
}
.cookie-modal-options{
  margin-bottom:17px; display:flex; flex-direction:column; gap:11px;
}
.cookie-modal-actions{
  width:100%; display:flex; flex-direction:row; gap:14px; margin-top:12px;
}
.cookie-modal-actions button{
  flex:1; min-width:0; font-size:1.05rem;
}

/* ==== ANIMATIONS ====*/
@media (prefers-reduced-motion: no-preference){
  .testimonial-card, .cookie-banner, .cookie-modal {transition-property: box-shadow, background, color, transform, opacity;}
}

/* ==== UNIQUE CREATIVE ELEMENTS ====*/
.hero {
  position:relative; overflow:hidden; min-height: 280px;
}
.hero:before{
  content:""; display:block; position:absolute; left:-60px; bottom:-70px;
  width:340px; height:210px; background:var(--color-cyan);
  opacity:.45; border-radius: 36% 64% 54% 46%/60% 50% 50% 40%; z-index:0;
  filter:blur(1px);
  pointer-events:none;
}
.hero:after{
  content:""; display:block; position:absolute; right:-120px; top:-55px;
  width:235px; height:140px; background:var(--color-pink);
  opacity:.2; border-radius:67% 33% 74% 26%/66% 52% 48% 34%; z-index:0;
  filter:blur(2px);
  pointer-events:none;
}
.hero .container, .hero .content-wrapper { position:relative; z-index:1;}
.card:before {
  content:""; display:block; position:absolute; top:-35px; right:-22px;
  width:56px; height:30px;
  background:var(--color-lime); opacity:.35;
  border-radius:27px 100% 60px 0/30px 55px 50px 60px;
  z-index:0; pointer-events:none;
}
.card:after {
  content:""; display:block; position:absolute; bottom:-23px; left:-25px;
  width:35px; height:26px;
  background:var(--color-cyan); opacity:.23;
  border-radius:90% 10% 80% 20%/70% 25% 75% 30%; z-index:0; pointer-events:none;
}

/* ==== RESPONSIVE LAYOUT ADJUSTMENTS ==== */
@media (max-width:900px){
  section, .section {margin-bottom:38px;padding:24px 7px;}
  .hero{padding:30px 0;}
}
@media (max-width:650px){
  .card{padding:18px 8px;}
  .cookie-modal{padding:25px 9px 10px 9px;}
  .cookie-banner{flex-direction:column;align-items:flex-start;gap:15px;padding:13px 8px;}
}
@media (max-width:540px){
  .hero{min-height:100px;}
}

/* ==== MICROINTERACTIONS ==== */
a, .cta-primary, button, .mobile-menu-toggle, .mobile-menu-close, .mobile-nav a {
  transition:color .18s, background .18s, box-shadow .18s, transform .11s;
}

/* ==== Z-INDEX POLICIES ==== */
header, .mobile-menu-toggle { z-index: 1111; }
.mobile-menu, .mobile-menu-close { z-index: 1200; }
.cookie-banner { z-index: 2000; }
.cookie-modal-backdrop { z-index: 2300; }

/* ==== MISC ==== */
::-webkit-scrollbar {width: 9px; background:var(--color-accent);}
::-webkit-scrollbar-thumb {background:var(--color-primary); border-radius:13px;}

::selection{background:var(--color-lime); color:var(--color-dark);}

/* ==== END ==== */