
:root{
--bg:#ffffff;--text:#1f2937;--muted:#6b7280;--brand:#111827;--brand-light:#374151;--accent:#2563eb;
--surface:#f9fafb;--border:#e5e7eb;--border-light:#f3f4f6;--radius:0px;--shadow:0 1px 3px rgba(0,0,0,0.1);--shadow-hover:0 4px 6px rgba(0,0,0,0.1);--container:1200px;
--gradient-primary:#111827;--gradient-accent:#2563eb;--gradient-surface:#f9fafb;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;font:16px/1.7 'Inter', system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);font-weight:400;letter-spacing:-0.01em;overflow-x:hidden}
img{max-width:100%;height:auto}a{color:var(--brand)}a:hover{color:var(--brand-2)}.container{max-width:var(--container);margin:auto;padding:1.25rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.flex{display:flex;gap:1rem}.between{justify-content:space-between}.center{align-items:center}
.site-header{position:sticky;top:0;background:var(--brand);border-bottom:1px solid rgba(255,255,255,0.1);z-index:100;backdrop-filter:blur(20px);transition:all 0.3s ease}
.site-header.scrolled{background:rgba(17,24,39,0.95);box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.brand{display:flex;align-items:center;color:#fff;text-decoration:none;transition:all 0.2s ease}
.brand:hover{opacity:0.8}
.logo-container{display:flex;align-items:center;gap:1.5rem}
.company-logo{filter:none;height:50px;width:auto;max-width:200px;object-fit:contain}
.brand-text{display:none}
.company-name{font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-0.02em}
.company-tagline{font-size:0.8rem;color:rgba(255,255,255,0.8);font-weight:400;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
/* Base nav styles */
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav a{padding:1rem 1.5rem;color:#fff;text-decoration:none;font-weight:500;transition:all 0.2s ease;border-bottom:2px solid transparent}
.nav a:hover{color:rgba(255,255,255,0.9);border-bottom-color:rgba(255,255,255,0.3)}
.nav .btn-primary{background:#fff;color:var(--brand);border:2px solid #fff;font-weight:600}
.nav .btn-primary:hover{background:transparent;color:#fff;border-color:#fff;transform:translateY(-1px)}
.card{background:var(--bg);border:1px solid var(--border);padding:2rem;box-shadow:var(--shadow);transition:all 0.2s ease}
.card:hover{box-shadow:var(--shadow-hover);border-color:var(--border)}
.btn{display:inline-block;padding:1rem 2rem;border-radius:var(--radius-sm);border:2px solid var(--brand);color:var(--brand);background:transparent;text-decoration:none;cursor:pointer;font-weight:600;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}
.btn:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px rgba(26,95,122,.25)}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;box-shadow:0 4px 15px rgba(26,95,122,.3)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}.kpi{padding:1.5rem;border-radius:var(--radius);background:var(--gradient-surface);border:1px solid var(--border);text-align:center;transition:all 0.3s ease;position:relative;overflow:hidden}
.section{padding:3rem 0}.list-unstyled{list-style:none;padding:0;margin:0}.small{font-size:.9rem;color:var(--muted)}
.site-footer{background:var(--brand);color:#fff;border-top:1px solid var(--border);margin-top:0;padding:4rem 0 2rem}
.site-footer h3,.site-footer h4{color:#fff}
.site-footer p{color:#fff}
.site-footer a{color:#fff;opacity:0.9;transition:opacity 0.2s ease}
.site-footer a:hover{opacity:1}
.site-footer .small{color:rgba(255,255,255,0.85)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:999;background:#000;color:#fff;padding:.5rem;border-radius:8px}
input,textarea,select{width:100%;padding:.7rem;border:1px solid var(--border);border-radius:10px}label{display:block;margin:.6rem 0 .2rem}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.badge{display:inline-block;padding:.5rem 1rem;border-radius:999px;background:rgba(26,95,122,.1);border:1px solid rgba(26,95,122,.2);font-size:.85rem;font-weight:600;color:var(--brand);margin-bottom:1rem}
.breadcrumbs{font-size:.9rem;color:var(--muted)}.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
blockquote{border-left:4px solid var(--accent);padding-left:1.5rem;color:#333;margin:1.5rem 0;font-style:italic;font-size:1.1rem;line-height:1.6}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}
@media (max-width:768px){.company-logo{height:40px;max-width:180px}.logo-container{gap:1rem}}
@media (max-width:480px){.company-logo{height:35px;max-width:150px}.logo-container{gap:0.5rem}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}
.visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Enhanced Animations and Hover Effects */
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.kpi:hover{transform:translateY(-3px);background:rgba(26,95,122,.05)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(26,95,122,.4)}
.hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(ellipse at center,rgba(52,152,219,.1) 0%,transparent 70%);z-index:-1}
.nav a:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.9)}
h1,h2,h3{font-weight:700;color:#1a365d}
.section{padding:4rem 0}
details summary{cursor:pointer;padding:1rem;background:var(--gradient-surface);border-radius:var(--radius-sm);margin:0.5rem 0;font-weight:600;transition:all 0.3s ease}
details summary:hover{background:rgba(26,95,122,.05)}
details[open] summary{background:rgba(26,95,122,.1);color:var(--brand)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,152,219,.1)}
.hero-cta .btn{margin:0.5rem 0.5rem 0 0}

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Client testimonial styles */
.client-initials {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* Content page styling */
.content-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}

.content-section:last-of-type {
  border-bottom: none;
  margin-bottom: 2rem;
}

.content-section h2 {
  color: var(--brand);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.content-section h3 {
  color: var(--brand-light);
  margin: 1.5rem 0 0.75rem 0;
  font-size: 1.2rem;
}

.content-section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.content-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.contact-info {
  background: var(--surface);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 1rem 0;
}

.contact-info p {
  margin-bottom: 1rem;
}

.contact-info p:last-child {
  margin-bottom: 0;
}

/* Page hero sections */
.page-hero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 24, 39, 0.7);
  z-index: 2;
}

.page-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  color: #fff;
}

.page-hero-content h1 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.page-hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.page-hero .breadcrumbs {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.page-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.page-hero .breadcrumbs a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  /* Mobile hero - stack vertically */
  .hero {
    min-height: auto;
    display: block;
    padding: 0;
  }
  
  .hero-content {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    min-height: auto;
    padding: 0;
  }
  
  .hero-text {
    padding: 3rem 1rem;
    text-align: center;
    order: 2; /* Text comes second */
  }
  
  .hero-visual {
    display: block;
    width: 100%;
    margin: 0;
    order: 1; /* Image comes first */
  }
  
  .hero-image-container {
    height: 300px;
    width: 100%;
    margin: 0;
  }
  
  .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  /* Page hero mobile styles */
  .page-hero {
    height: 250px;
  }
  
  .page-hero-image {
    width: 100%;
    height: 100%;
  }
  
  .page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .page-hero-content {
    padding: 2rem 1rem;
  }
  
  .page-hero-content h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  
  .page-hero-subtitle {
    font-size: 1rem;
  }
  
  .container {
    padding: 0 1rem;
  }
  
  /* Fix testimonial section mobile stretching */
  .testimonial-highlight {
    flex-direction: column;
    padding: 0 1rem;
  }
  
  .testimonial-card.featured {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .client-info {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .client-initials {
    width: 50px !important;
    height: 50px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
  }
  
  /* Fix any background image stretching */
  section {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* Modern Hero Section */
.hero{position:relative;padding:0;min-height:100vh;display:flex;align-items:center;background:var(--bg)}
.hero-background{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--surface) 0%,var(--bg) 60%);z-index:1}
.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;position:relative;z-index:2;min-height:100vh;padding:2rem 0}
.hero-text{max-width:600px}

.hero-badges{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}
.badge{background:var(--surface);border:1px solid var(--border);padding:0.5rem 1rem;font-size:0.75rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:1px}

.hero h1{font-size:4rem;line-height:1.1;margin-bottom:2rem;font-weight:700;color:var(--brand)}
.accent-text{color:var(--accent)}
.hero-subtitle{font-size:1.2rem;line-height:1.6;color:var(--muted);margin-bottom:3rem}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:3rem 0;padding:2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat-item{text-align:center}
.stat-number{font-size:2.5rem;font-weight:700;color:var(--brand);line-height:1}
.stat-label{font-size:0.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:0.5rem}

.hero-actions{display:flex;gap:1rem;margin-top:3rem}
.btn-primary{background:var(--brand);color:#fff;border:none;padding:1rem 2rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all 0.2s ease;text-transform:uppercase;letter-spacing:0.5px}
.btn-primary:hover{background:var(--brand-light);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--brand);border:1px solid var(--brand);padding:1rem 2rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all 0.2s ease;text-transform:uppercase;letter-spacing:0.5px}
.btn-secondary:hover{background:var(--brand);color:#fff}

.hero-visual{position:relative}
.hero-image-container{position:relative;height:600px;overflow:hidden}
.hero-image{width:100%;height:100%;object-fit:cover;filter:grayscale(20%)}
.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(17,24,39,0.1) 100%)}
.hero-accent{position:absolute;top:20px;right:20px;width:100px;height:100px;background:var(--accent);opacity:0.1}

/* Trust Section */
.trust-section{background:var(--surface);padding:3rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;align-items:center}
.trust-logo{text-align:center;padding:1.5rem}
.trust-badge{max-width:100px;height:auto;opacity:0.6;transition:opacity 0.2s ease;filter:grayscale(100%)}
.trust-badge:hover{opacity:1;filter:grayscale(0%)}
.trust-logo span{display:block;margin-top:1rem;font-size:0.8rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}

/* Conversion Section */
.conversion-section{padding:6rem 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.conversion-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.large-text{font-size:1.4rem;line-height:1.5;color:var(--text);margin:2rem 0;font-weight:500}
.urgency-box{background:var(--surface);border-left:4px solid var(--accent);padding:2rem;margin:2rem 0}
.urgency-box h3{color:var(--brand);margin-bottom:1rem;font-size:1.3rem;font-weight:700}
.countdown-benefit{display:flex;align-items:center;gap:1rem;margin:1rem 0;font-weight:500}
.benefit-check{color:var(--accent);font-weight:bold;font-size:1rem}
.conversion-cta{margin:2rem 0}
.guarantee{color:var(--muted);font-size:0.9rem;margin-top:1rem}
.testimonial-highlight{display:flex;justify-content:center}
.testimonial-card.featured{background:#fff;border:1px solid var(--border);padding:2rem;box-shadow:var(--shadow);max-width:400px}
.testimonial-card .stars{font-size:1.2rem;margin-bottom:1rem;color:var(--accent)}
.testimonial-card blockquote{font-size:1.1rem;line-height:1.6;margin:1rem 0;border:none;padding:0;color:var(--text);font-style:italic}
.client-info{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.client-photo{width:60px;height:60px;object-fit:cover;border:2px solid var(--border)}
.client-info div strong{display:block;color:var(--text);font-weight:600}
.client-info div span{color:var(--muted);font-size:0.9rem}

/* Services Section */
.services-section{padding:6rem 0;background:var(--surface)}
.section-header{text-align:center;margin-bottom:5rem}
.section-header h2{font-size:3rem;margin-bottom:1rem;color:var(--brand);font-weight:700}
.section-header p{font-size:1.1rem;color:var(--muted);max-width:600px;margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem}
.service-card{background:#fff;padding:3rem;box-shadow:var(--shadow);transition:all 0.2s ease;position:relative;border:1px solid var(--border)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.service-card.popular{border-color:var(--accent)}
.popular-badge{position:absolute;top:0;right:0;background:var(--accent);color:#fff;padding:0.5rem 1rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.service-icon{margin-bottom:2rem;color:var(--brand)}
.service-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--brand);font-weight:700}
.service-card p{color:var(--muted);margin-bottom:2rem;line-height:1.6}
.service-features{list-style:none;padding:0;margin:2rem 0;border-top:1px solid var(--border-light);padding-top:1.5rem}
.service-features li{padding:0.4rem 0;color:var(--text);font-weight:500;font-size:0.9rem}
.service-price{font-size:1.1rem;color:var(--brand);margin:2rem 0;text-align:center;padding:1rem;background:var(--surface);border-top:1px solid var(--border)}
.service-price strong{font-size:1.3rem;font-weight:700}

/* FAQ Section */
.faq-section{padding:6rem 0;background:#fff}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-bottom:4rem}
.faq-category{background:var(--surface);padding:3rem;border:1px solid var(--border)}
.faq-category h3{color:var(--brand);margin-bottom:2rem;font-size:1.4rem;font-weight:700}
.faq-category details{margin-bottom:1.5rem}
.faq-category summary{background:#fff;padding:1.5rem;cursor:pointer;font-weight:600;border:1px solid var(--border);transition:all 0.2s ease;color:var(--text)}
.faq-category summary:hover{background:var(--surface);color:var(--brand)}
.faq-category details[open] summary{background:var(--brand);color:#fff;border-color:var(--brand)}
.faq-category details p{padding:1.5rem;margin:0;line-height:1.6;background:#fff;border:1px solid var(--border);border-top:none;color:var(--text)}
.faq-cta{text-align:center;padding:4rem;background:var(--surface);border:1px solid var(--border)}
.faq-cta h3{color:var(--brand);margin-bottom:1rem;font-size:1.8rem}
.faq-cta p{color:var(--muted);margin-bottom:2rem;font-size:1.1rem}

/* Reviews Styling */
.reviews-section{padding:6rem 0;background:#fff;border-top:1px solid var(--border)}
.reviews-header{text-align:center;margin-bottom:4rem}
.reviews-header h2{font-size:3rem;margin-bottom:1rem;color:var(--brand);font-weight:700}
.reviews-header p{font-size:1.1rem;color:var(--muted);max-width:600px;margin:0 auto}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}
.review-card{background:#fff;padding:2rem;border:1px solid var(--border);box-shadow:var(--shadow);transition:all 0.3s ease;position:relative}
.review-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.review-stars{color:#fbbf24;font-size:1.2rem;margin-bottom:1rem;display:flex;gap:0.2rem}
.review-text{font-size:1rem;line-height:1.6;color:var(--text);margin-bottom:1.5rem;font-style:italic}
.reviewer-info{display:flex;align-items:center;gap:1rem}
.reviewer-avatar{width:50px;height:50px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}
.reviewer-details h4{margin:0;color:var(--brand);font-weight:600;font-size:1rem}
.reviewer-meta{color:var(--muted);font-size:0.85rem;margin-top:0.2rem}
.reviews-cta{text-align:center;padding:3rem 2rem;background:var(--surface);border:1px solid var(--border)}
.reviews-cta h3{color:var(--brand);margin-bottom:1rem;font-size:1.8rem}
.reviews-cta p{color:var(--muted);margin-bottom:2rem;font-size:1.1rem}
.review-item{margin:1.5rem 0;padding:1.5rem;background:rgba(248,250,252,0.5);border-radius:var(--radius-sm);border-left:4px solid var(--accent)}
.review-stars{font-size:1.2rem;margin-bottom:0.5rem}
.review-item blockquote{margin:0.5rem 0;font-style:italic;color:var(--text);font-size:1rem;border:none;padding:0}
.review-item .small{margin:0.5rem 0 0;font-weight:600;color:var(--brand)}

/* Premium Professional Enhancements */
.nav a{font-weight:600;transition:all 0.3s ease;position:relative}

/* Enhanced Button Styles */
.btn{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0.5px;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s}
.btn:hover::before{left:100%}

/* Professional Typography */
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;font-weight:700;color:var(--text);line-height:1.2}
h1{font-size:3rem;letter-spacing:-0.02em}
h2{font-size:2.25rem;letter-spacing:-0.015em}
h3{font-size:1.5rem;letter-spacing:-0.01em}

/* Enhanced Card Hover Effects */
.service-card:hover{transform:translateY(-8px) scale(1.02)}
.kpi:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}

/* Responsive Design */
/* Resources Section */
.resources-hero{background:var(--gradient-surface);padding:3rem 0;text-align:center}
.resources-section{padding:4rem 0}
.resource-category{margin:4rem 0}
.resource-category h2{font-size:2rem;color:var(--text);margin-bottom:2rem;border-bottom:3px solid var(--accent);padding-bottom:0.5rem}
.resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.resource-card{background:#fff;border-radius:var(--radius);padding:2rem;border:2px solid var(--border);transition:all 0.3s ease}
.resource-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.resource-icon{font-size:3rem;margin-bottom:1rem}
.resource-card h3{color:var(--text);margin-bottom:1rem}
.calculator-form{margin-top:1.5rem}
.calculator-form input{margin:0.5rem 0;padding:0.8rem;border:1px solid var(--border);border-radius:var(--radius-sm);width:100%}
.result-box{margin-top:1rem;padding:1rem;background:var(--surface);border-radius:var(--radius-sm);border-left:4px solid var(--accent)}
.tax-results{text-align:left}
.tax-results h4{color:var(--brand);margin-bottom:1rem}
.tax-results p{margin:0.5rem 0}
.disclaimer{font-size:0.8rem;color:var(--muted);font-style:italic}

/* Deadline Calendar */
.deadline-calendar{display:grid;gap:1rem}
.deadline-item{display:flex;align-items:center;background:#fff;padding:1.5rem;border-radius:var(--radius);border-left:5px solid var(--brand);box-shadow:var(--shadow)}
.deadline-item.urgent{border-left-color:var(--accent);background:rgba(224,110,53,0.05)}
.deadline-item .date{background:var(--brand);color:#fff;padding:1rem;border-radius:var(--radius);margin-right:1.5rem;text-align:center;font-weight:bold;min-width:80px}
.deadline-item.urgent .date{background:var(--accent)}
.deadline-info h4{margin:0 0 0.5rem;color:var(--text)}
.deadline-info p{margin:0;color:var(--muted)}

/* Checklists and Guides */
.checklist{margin:1rem 0}
.checklist-item{padding:0.5rem 0;color:var(--text);border-bottom:1px solid var(--border);font-weight:500}
.guide-points ul{list-style:none;padding:0}
.guide-points li{padding:0.3rem 0;color:var(--text)}
.guide-points li:before{content:'✓';color:var(--accent);font-weight:bold;margin-right:0.5rem}

/* Common Mistakes */
.mistakes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.mistake-card{background:rgba(224,110,53,0.05);border:1px solid rgba(224,110,53,0.2);border-radius:var(--radius);padding:1.5rem}
.mistake-card h4{color:var(--accent);margin-bottom:1rem}
.mistake-card strong{color:var(--brand);display:block;margin-top:1rem}

/* CTA Section */
.cta-section{text-align:center;background:var(--gradient-surface);padding:3rem;border-radius:var(--radius);margin:3rem 0;border:2px solid rgba(15,76,117,0.1)}
.cta-section h2{color:var(--brand);margin-bottom:1rem}

/* Responsive Design */
.conversion-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}

/* Typography Enhancements */
h1,h2,h3,h4,h5,h6{font-family:'Inter',sans-serif;font-weight:700;color:var(--brand);line-height:1.2;letter-spacing:-0.02em}
h1{font-size:4rem;letter-spacing:-0.03em}
h2{font-size:2.5rem;letter-spacing:-0.02em}
h3{font-size:1.8rem;letter-spacing:-0.01em}
h4{font-size:1.4rem}
p{line-height:1.7;color:var(--text)}

/* Button Styles */
.btn{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0.5px;position:relative;text-transform:uppercase;font-size:0.9rem;padding:1rem 2rem;border:none;text-decoration:none;transition:all 0.2s ease}
.btn:hover{transform:translateY(-1px)}

/* Modern Clean Styling */
.section{padding:6rem 0}
.container{max-width:var(--container);margin:auto;padding:2rem}

/* Mobile Menu Styles */
.mobile-menu-toggle {
  display: none;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 1rem;
  z-index: 1020;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.mobile-menu-toggle:hover {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.8);
}

.mobile-menu-toggle:active {
  background: rgba(0,0,0,0.6);
  transform: scale(0.95);
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 3px 0;
  transition: all 0.3s ease;
  transform-origin: center;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.8);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Enhanced Navigation */
.main-nav {
  transition: all 0.3s ease;
}

/* Desktop Navigation Styles */
@media (min-width: 769px) {
  .main-nav {
    position: relative !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding-top: 0 !important;
    box-shadow: none !important;
  }
  
  .nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    list-style: none;
    padding: 0 !important;
    margin: 0;
    align-items: center !important;
    height: auto !important;
  }
  
  .nav li {
    border-bottom: none !important;
  }
  
  .nav a {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    color: #fff !important;
    position: relative;
    min-height: auto !important;
  }
  
  .nav a:hover {
    background: transparent !important;
    color: rgba(255,255,255,0.9) !important;
  }
  
  .nav .btn-primary {
    margin: 0 !important;
    padding: 0.75rem 1.5rem !important;
    background: #fff !important;
    color: var(--brand) !important;
    border: 2px solid #fff !important;
    border-radius: 4px;
  }
  
  .nav .btn-primary:hover {
    background: transparent !important;
    color: #fff !important;
  }
  
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .mobile-overlay {
    display: none !important;
  }
}

/* Tablet Design */
@media (max-width:1024px) and (min-width:769px) {
  .hero-content{grid-template-columns:1fr;gap:4rem;text-align:center}
  .hero-visual{order:-1}
  .hero h1{font-size:3rem}
  .hero-image-container{height:400px}
  .container{padding:2rem}
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 280px !important;
    height: 100vh !important;
    background: var(--brand) !important;
    transition: right 0.3s ease !important;
    z-index: 1005 !important;
    padding-top: 80px !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
    pointer-events: auto !important;
  }
  
  .main-nav.active {
    right: 0 !important;
  }
  
  .main-nav .nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 2rem 0 !important;
    height: 100% !important;
    pointer-events: auto !important;
    z-index: 1010 !important;
  }

  .main-nav .nav li {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  .main-nav .nav a {
    display: flex !important;
    padding: 1.5rem 2rem !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
    min-height: 48px !important;
    align-items: center !important;
    z-index: 1015 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .main-nav .nav a:hover, .main-nav .nav a:active {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-bottom: none !important;
  }

  .main-nav .nav a:active {
    background: rgba(255,255,255,0.2) !important;
  }

  .main-nav .nav .btn-primary {
    margin: 1rem 2rem !important;
    background: #fff !important;
    color: var(--brand) !important;
    border: 2px solid #fff !important;
    padding: 1rem 2rem !important;
    text-align: center !important;
    font-weight: 600 !important;
  }

  .main-nav .nav .btn-primary:hover {
    background: transparent !important;
    color: #fff !important;
  }
  
  /* Mobile Overlay - fixed to not block menu clicks */
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 280px);
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: auto;
  }

  .mobile-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Other responsive styles */
  .hero h1{font-size:2.5rem}
  .hero-stats{grid-template-columns:1fr;gap:1rem}
  .hero-actions{flex-direction:column;gap:1rem}
  .services-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .conversion-content{grid-template-columns:1fr;text-align:center}
  .resources-grid{grid-template-columns:1fr}
  .mistakes-grid{grid-template-columns:1fr}
  .deadline-item{flex-direction:column;text-align:center}
  .deadline-item .date{margin-right:0;margin-bottom:1rem}
  .container{padding:1rem}
  .section{padding:4rem 0}
  
  /* Header adjustments */
  .site-header .container {
    position: relative;
  }
}

@media (max-width:480px){
  .hero h1{font-size:2rem}
  .company-name{font-size:1.2rem}
  
  /* Smaller mobile adjustments */
  .main-nav {
    width: 100%;
    right: -100%;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
