/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

/* CSS Variables */
:root{
  --color-primary:#059669;
  --color-primary-light:#10b981;
  --color-primary-dark:#047857;
  --color-secondary:#0891b2;
  --color-secondary-light:#06b6d4;
  --color-secondary-dark:#0e7490;
  --color-accent:#dc2626;
  --color-accent-light:#ef4444;
  --color-success:#22c55e;
  --color-warning:#eab308;
  --color-error:#dc2626;
  --color-gray-50:#f9fafb;
  --color-gray-100:#f3f4f6;
  --color-gray-200:#e5e7eb;
  --color-gray-300:#d1d5db;
  --color-gray-400:#9ca3af;
  --color-gray-500:#6b7280;
  --color-gray-600:#4b5563;
  --color-gray-700:#374151;
  --color-gray-800:#1f2937;
  --color-gray-900:#111827;
  --color-white:#ffffff;
  --color-black:#000000;
  --font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --font-size-sm:0.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-3xl:1.875rem;
  --font-size-4xl:2.25rem;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --spacing-1:0.25rem;
  --spacing-2:0.5rem;
  --spacing-3:0.75rem;
  --spacing-4:1rem;
  --spacing-6:1.5rem;
  --spacing-8:2rem;
  --spacing-12:3rem;
  --spacing-16:4rem;
  --spacing-20:5rem;
  --spacing-24:6rem;
  --border-radius:0.5rem;
  --border-radius-lg:0.75rem;
  --box-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);
  --box-shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);
  --transition:all 0.2s ease-in-out;
}

/* Base Typography */
body{
  font-family:var(--font-family);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-normal);
  line-height:1.6;
  color:var(--color-gray-800);
  background-color:var(--color-white);
}

h1,h2,h3,h4,h5,h6{
  font-weight:var(--font-weight-bold);
  line-height:1.2;
  margin-bottom:var(--spacing-4);
}

h1{font-size:var(--font-size-4xl)}
h2{font-size:var(--font-size-3xl)}
h3{font-size:var(--font-size-2xl)}
h4{font-size:var(--font-size-xl)}
h5{font-size:var(--font-size-lg)}
h6{font-size:var(--font-size-base)}

p{margin-bottom:var(--spacing-4)}
a{color:var(--color-primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--color-primary-dark)}
a:focus{outline:2px solid var(--color-primary);outline-offset:2px}

/* Layout */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--spacing-4);
}

@media(min-width:768px){
  .container{padding:0 var(--spacing-8)}
}

/* Skip to Content */
.skip-to-content{
  position:absolute;
  top:-40px;
  left:var(--spacing-4);
  background:var(--color-primary);
  color:var(--color-white);
  padding:var(--spacing-2) var(--spacing-4);
  text-decoration:none;
  border-radius:var(--border-radius);
  z-index:1000;
  transition:var(--transition);
}

.skip-to-content:focus{top:var(--spacing-4)}

/* Header */
.header{
  background:var(--color-white);
  border-bottom:1px solid var(--color-gray-200);
  position:sticky;
  top:0;
  z-index:100;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--spacing-4) 0;
}

.nav-brand .logo{height:40px;width:auto}

.nav-menu{
  display:none;
  list-style:none;
  margin:0;
  padding:0;
  gap:var(--spacing-8);
}

.nav-menu a{
  font-weight:var(--font-weight-medium);
  color:var(--color-gray-700);
  transition:var(--transition);
}

.nav-menu a:hover{color:var(--color-primary)}

.nav-toggle{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-1);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--spacing-2);
}

.nav-toggle span{
  width:24px;
  height:3px;
  background:var(--color-gray-700);
  transition:var(--transition);
}

@media(min-width:768px){
  .nav-menu{display:flex}
  .nav-toggle{display:none}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--spacing-3) var(--spacing-6);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
  text-decoration:none;
  border:none;
  border-radius:var(--border-radius);
  cursor:pointer;
  transition:var(--transition);
  line-height:1;
}

.btn-primary{
  background:var(--color-primary);
  color:var(--color-white);
}

.btn-primary:hover{
  background:var(--color-primary-dark);
  color:var(--color-white);
}

.btn-secondary{
  background:var(--color-white);
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}

.btn-secondary:hover{
  background:var(--color-primary);
  color:var(--color-white);
}

.btn-small{
  padding:var(--spacing-2) var(--spacing-4);
  font-size:var(--font-size-sm);
}

/* Hero Section */
.hero{
  padding:var(--spacing-20) 0;
  background:linear-gradient(135deg,var(--color-gray-50) 0%,var(--color-white) 100%);
}

.hero .container{
  display:grid;
  gap:var(--spacing-12);
  align-items:center;
}

.hero-content{text-align:center}
.hero h1{margin-bottom:var(--spacing-6);color:var(--color-gray-900)}
.hero-subtitle{
  font-size:var(--font-size-xl);
  color:var(--color-gray-600);
  margin-bottom:var(--spacing-8);
}

.hero-cta{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-4);
  align-items:center;
}

.hero-image{
  display:flex;
  justify-content:center;
}

.hero-image img{
  border-radius:var(--border-radius-lg);
  box-shadow:var(--box-shadow-lg);
}

@media(min-width:768px){
  .hero .container{grid-template-columns:1fr 1fr;text-align:left}
  .hero-content{text-align:left}
  .hero-cta{flex-direction:row;justify-content:flex-start}
}

/* Features Section */
.features{
  padding:var(--spacing-24) 0;
  background:var(--color-white);
}

.features h2{
  text-align:center;
  margin-bottom:var(--spacing-4);
  color:var(--color-gray-900);
}

.section-subtitle{
  text-align:center;
  font-size:var(--font-size-lg);
  color:var(--color-gray-600);
  margin-bottom:var(--spacing-16);
}

.features-grid{
  display:grid;
  gap:var(--spacing-8);
  grid-template-columns:1fr;
}

@media(min-width:768px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1024px){
  .features-grid{grid-template-columns:repeat(3,1fr)}
}

.feature-card{
  background:var(--color-white);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--box-shadow);
  overflow:hidden;
  transition:var(--transition);
}

.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--box-shadow-lg);
}

.feature-image{
  aspect-ratio:3/2;
  overflow:hidden;
}

.feature-card h3{
  padding:var(--spacing-6) var(--spacing-6) var(--spacing-2);
  color:var(--color-gray-900);
  margin-bottom:0;
}

.feature-card p{
  padding:0 var(--spacing-6) var(--spacing-6);
  color:var(--color-gray-600);
  margin-bottom:0;
}

/* About Section */
.about{
  padding:var(--spacing-24) 0;
  background:var(--color-gray-50);
}

.about-content{
  display:grid;
  gap:var(--spacing-12);
  align-items:center;
}

.about h2{color:var(--color-gray-900)}
.about p{color:var(--color-gray-600)}

.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-6);
  margin-top:var(--spacing-8);
}

.stat{text-align:center}
.stat strong{
  display:block;
  font-size:var(--font-size-3xl);
  font-weight:var(--font-weight-bold);
  color:var(--color-primary);
}

.stat span{
  font-size:var(--font-size-sm);
  color:var(--color-gray-600);
}

@media(min-width:768px){
  .about-content{grid-template-columns:1fr 1fr}
}

/* Testimonials */
.testimonials{
  padding:var(--spacing-24) 0;
  background:var(--color-white);
}

.testimonials h2{
  text-align:center;
  margin-bottom:var(--spacing-16);
  color:var(--color-gray-900);
}

.testimonials-grid{
  display:grid;
  gap:var(--spacing-8);
  grid-template-columns:1fr;
}

@media(min-width:768px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1024px){
  .testimonials-grid{grid-template-columns:repeat(3,1fr)}
}

.testimonial{
  background:var(--color-gray-50);
  padding:var(--spacing-6);
  border-radius:var(--border-radius-lg);
  border:none;
  position:relative;
}

.testimonial-avatar{
  margin-bottom:var(--spacing-4);
}

.testimonial p{
  font-style:italic;
  margin-bottom:var(--spacing-4);
  color:var(--color-gray-700);
}

.testimonial cite{
  font-style:normal;
  font-weight:var(--font-weight-semibold);
  color:var(--color-gray-600);
}

/* FAQ Section */
.faq{
  padding:var(--spacing-24) 0;
  background:var(--color-gray-50);
}

.faq h2{
  text-align:center;
  margin-bottom:var(--spacing-16);
  color:var(--color-gray-900);
}

.faq-list{
  max-width:800px;
  margin:0 auto;
}

.faq-item{
  background:var(--color-white);
  border-radius:var(--border-radius);
  margin-bottom:var(--spacing-4);
  box-shadow:var(--box-shadow);
}

.faq-item summary{
  padding:var(--spacing-6);
  cursor:pointer;
  font-weight:var(--font-weight-semibold);
  color:var(--color-gray-900);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  color:var(--color-primary);
  transition:var(--transition);
}

.faq-item[open] summary::after{transform:rotate(45deg)}

.faq-item p{
  padding:0 var(--spacing-6) var(--spacing-6);
  color:var(--color-gray-600);
  margin:0;
}

/* Contact Section */
.contact{
  padding:var(--spacing-24) 0;
  background:var(--color-white);
}

.contact-content{
  display:grid;
  gap:var(--spacing-12);
  align-items:start;
}

.contact h2{color:var(--color-gray-900)}
.contact-info p{color:var(--color-gray-600)}

.contact-features{
  display:grid;
  gap:var(--spacing-6);
  margin-top:var(--spacing-8);
}

.feature h3{
  font-size:var(--font-size-lg);
  margin-bottom:var(--spacing-2);
  color:var(--color-gray-900);
}

.feature p{
  color:var(--color-gray-600);
  margin:0;
}

@media(min-width:768px){
  .contact-content{grid-template-columns:1fr 1fr}
}

/* Forms */
.contact-form{
  background:var(--color-gray-50);
  padding:var(--spacing-8);
  border-radius:var(--border-radius-lg);
  box-shadow:var(--box-shadow);
}

.form-group{margin-bottom:var(--spacing-6)}

.form-group label{
  display:block;
  margin-bottom:var(--spacing-2);
  font-weight:var(--font-weight-semibold);
  color:var(--color-gray-700);
}

.form-group input,.form-group textarea{
  width:100%;
  padding:var(--spacing-3);
  border:2px solid var(--color-gray-300);
  border-radius:var(--border-radius);
  font-size:var(--font-size-base);
  transition:var(--transition);
}

.form-group input:focus,.form-group textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgb(5 150 105/0.1);
}

.error-message{
  margin-top:var(--spacing-2);
  color:var(--color-error);
  font-size:var(--font-size-sm);
  display:none;
}

.form-status{
  margin-top:var(--spacing-4);
  padding:var(--spacing-3);
  border-radius:var(--border-radius);
  display:none;
}

.form-status.success{
  background:var(--color-success);
  color:var(--color-white);
}

.form-status.error{
  background:var(--color-error);
  color:var(--color-white);
}

/* Footer */
.footer{
  background:var(--color-gray-900);
  color:var(--color-gray-300);
  padding:var(--spacing-16) 0 var(--spacing-8);
}

.footer-content{
  display:grid;
  gap:var(--spacing-12);
  margin-bottom:var(--spacing-12);
}

.footer-brand .logo{
  margin-bottom:var(--spacing-4);
  filter:brightness(0) invert(1);
}

.footer-brand p{color:var(--color-gray-400)}

.disclaimer{
  font-size:var(--font-size-sm);
  color:var(--color-gray-500);
  font-style:italic;
  margin-top:var(--spacing-4);
}

.footer-links{
  display:grid;
  gap:var(--spacing-8);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.footer-column h3{
  color:var(--color-white);
  margin-bottom:var(--spacing-4);
  font-size:var(--font-size-lg);
}

.footer-column ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-column ul li{margin-bottom:var(--spacing-2)}

.footer-column ul li a{
  color:var(--color-gray-400);
  transition:var(--transition);
}

.footer-column ul li a:hover{color:var(--color-white)}

.footer-bottom{
  border-top:1px solid var(--color-gray-700);
  padding-top:var(--spacing-8);
  text-align:center;
  color:var(--color-gray-500);
}

@media(min-width:768px){
  .footer-content{grid-template-columns:2fr 3fr}
}

/* Cookie Notice */
.cookie-notice{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--color-gray-800);
  color:var(--color-white);
  padding:var(--spacing-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacing-4);
  z-index:1000;
}

.cookie-notice a{color:var(--color-primary-light)}

.cookie-notice.hidden{display:none}

/* Legal Pages */
.legal-page{
  padding:var(--spacing-16) 0;
  max-width:800px;
  margin:0 auto;
}

.legal-page h1{
  margin-bottom:var(--spacing-8);
  color:var(--color-gray-900);
}

.legal-page h2{
  margin-top:var(--spacing-8);
  margin-bottom:var(--spacing-4);
  color:var(--color-gray-900);
}

.legal-page h3{
  margin-top:var(--spacing-6);
  margin-bottom:var(--spacing-3);
  color:var(--color-gray-800);
}

.legal-page section{margin-bottom:var(--spacing-8)}

.legal-page ul{
  margin:var(--spacing-4) 0;
  padding-left:var(--spacing-6);
}

.legal-page li{margin-bottom:var(--spacing-2)}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* Focus management */
:focus{outline:2px solid var(--color-primary);outline-offset:2px}

/* High contrast mode support */
@media(prefers-contrast:high){
  :root{
    --box-shadow:0 0 0 2px var(--color-gray-900);
    --color-gray-300:#000000;
    --color-gray-600:#000000;
  }
}

/* Print styles */
@media print{
  *{background:none !important;color:black !important;box-shadow:none !important}
  .nav-toggle,.cookie-notice{display:none !important}
  .header{position:static}
  a{text-decoration:underline}
}