/* Base + theme */
:root{
  --bg: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #4f46e5;
  --accent-2: #4338ca;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-hover: 0 20px 40px rgba(15,23,42,0.12);
  --shadow-xl: 0 25px 50px rgba(15,23,42,0.15);
  --radius: 16px;
  --container: min(1100px, 90vw);
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.dark{
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #9aa6b2;
  --accent: #8b9cf6;
  --accent-2: #7c8aed;
  --border: #1f2a44;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.6);
  --shadow-xl: 0 25px 50px rgba(0,0,0,0.7);
}

/* Dark mode section headings - make them more visible */
html.dark .section h2{
  color: #595c61;
}

/* Smooth scrolling and base animations */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  background-color:var(--bg);
  transition:var(--transition);
}

/* Animations */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadeInLeft{
  from{opacity:0; transform:translateX(-30px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes fadeInRight{
  from{opacity:0; transform:translateX(30px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes fadeInScale{
  from{opacity:0; transform:scale(0.9)}
  to{opacity:1; transform:scale(1)}
}
@keyframes pulse{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes float{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-10px)}
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes ripple{
  to{transform:scale(4); opacity:0}
}

.animate-fade-in{animation:fadeInUp 0.6s ease-out}
.animate-fade-in-delay{animation:fadeInUp 0.6s ease-out 0.2s both}
.animate-fade-in-delay-2{animation:fadeInUp 0.6s ease-out 0.4s both}
.animate-fade-left{animation:fadeInLeft 0.6s ease-out}
.animate-fade-right{animation:fadeInRight 0.6s ease-out}
.animate-scale{animation:fadeInScale 0.6s ease-out}
.animate-float{animation:float 3s ease-in-out infinite}

/* Utilities */
.container{
  max-width:var(--container); 
  margin-inline:auto; 
  padding-inline:clamp(1rem, 4vw, 2rem);
  width:100%;
}
.muted{color:var(--muted)}
.subtle{color:var(--muted); font-size:clamp(.8rem, 2vw, .9rem)}
.badge{
  display:inline-block; 
  padding:.3rem .7rem; 
  font-size:clamp(.7rem, 2vw, .75rem); 
  font-weight:600;
  color:#fff; 
  background:var(--accent); 
  border-radius:999px;
  animation:pulse 2s infinite;
  min-width:fit-content; /* Ensure badge doesn't shrink */
  text-align:center;
}
.accent{color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1rem; border-radius:10px; text-decoration:none; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:var(--transition);
  position:relative; overflow:hidden; font-size:.9rem;
}
.btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s ease;
}
.btn:hover::before{left:100%}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{
  background:var(--accent-2); 
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  transition:var(--transition);
}
.btn-ghost:hover{
  background:var(--accent); color:#fff; border-color:var(--accent);
  transform:translateY(-2px); box-shadow:var(--shadow);
}

.chip{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:.4rem .7rem; border-radius:999px; cursor:pointer;
  transition:var(--transition); position:relative;
}
.chip:hover{
  background:var(--accent); color:#fff; border-color:var(--accent);
  transform:translateY(-1px); box-shadow:var(--shadow);
}
.chip:active{transform:scale(0.95)}

.title-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; 
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter:saturate(150%) blur(20px); 
  border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.site-header:hover{backdrop-filter:saturate(150%) blur(25px)}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; 
  padding:.8rem 0; transition:var(--transition);
}
.brand{
  display:flex; align-items:center; gap:.8rem; font-weight:700; 
  color:var(--text); text-decoration:none; transition:var(--transition);
  font-size:1.35rem;
}
.brand:hover{transform:scale(1.05)}
.logo{width:46px; height:46px; transition:var(--transition)}
.brand:hover .logo{transform:rotate(5deg)}
.nav{display:flex; align-items:center; gap:2.5rem}
.icon-btn{
  display:none; border:1px solid var(--border); background:var(--panel); 
  border-radius:12px; padding:.5rem .7rem; cursor:pointer; transition:var(--transition);
}
.icon-btn:hover{background:var(--accent); color:#fff; transform:scale(1.1)}
.nav-menu{display:flex; gap:1.5rem; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu a{
  color:var(--text); text-decoration:none; font-weight:600; 
  padding:.6rem 1rem; border-radius:8px; transition:var(--transition);
  position:relative; font-size:1rem; white-space:nowrap;
}
.nav-menu a::after{
  content:''; position:absolute; bottom:0; left:50%; width:0; height:2px;
  background:var(--accent); transition:var(--transition); transform:translateX(-50%);
}
.nav-menu a:hover{color:var(--accent); transform:translateY(-1px)}
.nav-menu a:hover::after{width:100%}
.header-actions{display:flex; gap:1.5rem; align-items:center; margin-left:2rem}

/* Hero */
.hero{
  padding:3rem 0 2.5rem; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 5%, var(--bg)) 100%);
}
.hero::before{
  content:''; position:absolute; top:0; right:0; width:50%; height:100%;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%);
  animation:float 6s ease-in-out infinite;
}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center; position:relative}
.hero h1{
  font-size:clamp(1.6rem, 4.5vw, 2.3rem); 
  line-height:1.15; margin:.5rem 0; 
  background:linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero h1 .accent{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.lead{font-size:clamp(1rem, 2.5vw, 1.1rem); color:var(--muted); line-height:1.6}
.hero-cta{display:flex; gap:.8rem; margin:1.5rem 0; flex-wrap:wrap}
.hero-media{
  border-radius:24px; overflow:hidden; box-shadow:var(--shadow-xl);
  transition:var(--transition); position:relative;
}
.hero-media:hover{transform:scale(1.02) rotate(1deg); box-shadow:var(--shadow-xl)}
.hero-media img{width:100%; height:auto; display:block}

/* Sections */
.section{padding:2.5rem 0; position:relative}
.section.alt{background:color-mix(in srgb, var(--accent) 3%, var(--bg))}
.section h2{font-size:1.8rem; margin-bottom:.8rem; text-align:center}
.section .container > p{text-align:center; max-width:600px; margin:0 auto 1.5rem}

/* Cards */
.cards{
  display:grid; gap:1.2rem; margin:1.5rem 0;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  padding-top:.8rem; /* Add space for badges */
}
.cards.two{grid-template-columns:repeat(auto-fit, minmax(350px, 1fr))}
.cards.three{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.cards.services-grid{grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr)}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; transition:var(--transition); position:relative; 
  overflow:visible; /* Change from hidden to visible to show badges */
  margin-top:.8rem; /* Add margin to accommodate badges */
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transition:var(--transition); transform-origin:left;
}
.card:hover{
  box-shadow:var(--shadow-hover); transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-top:0; color:var(--text)}
.card .badge{
  position:absolute; 
  top:-12px; 
  right:1rem; 
  z-index:10;
  white-space:nowrap; /* Prevent text wrapping */
  box-shadow:var(--shadow); /* Add shadow for better visibility */
}

/* Price cards */
.card.price{text-align:center; position:relative}
.card.price .amount{font-size:1.6rem; font-weight:800; margin:.6rem 0; color:var(--accent)}
.card.price .unit{font-size:.85rem; color:var(--muted); font-weight:400}
.card.price .money{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Lists */
.bullets{list-style:none; padding:0; margin:1rem 0}
.bullets li{
  padding:.3rem 0; position:relative; padding-left:1.3rem;
  color:var(--muted); line-height:1.4; font-size:.95rem;
}
.bullets li::before{
  content:'✓'; position:absolute; left:0; color:var(--accent);
  font-weight:bold; font-size:1rem;
}

/* Testimonials */
.testimonials{position:relative; overflow:hidden}
.slides-container{position:relative; border-radius:var(--radius); overflow:hidden}
.slides{
  display:flex; scroll-snap-type:x mandatory; overflow-x:auto;
  scroll-behavior:smooth; gap:1rem; padding:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.slides::-webkit-scrollbar{display:none}
.slide{
  min-width:100%; scroll-snap-align:start; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius); padding:2rem;
  transition:var(--transition);
}
.slide:hover{box-shadow:var(--shadow-hover)}
.slide blockquote{margin:0; font-style:italic; line-height:1.6}
.slide cite{display:block; margin-top:1rem; font-weight:600; color:var(--accent)}

.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%); 
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); width:40px; height:40px; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; transition:var(--transition); z-index:2;
}
.slide-btn:hover{
  background:var(--accent); color:#fff; transform:translateY(-50%) scale(1.1);
  box-shadow:var(--shadow);
}
.slide-btn.prev{left:20px}
.slide-btn.next{right:20px}

/* FAQ */
.faq details{
  background:var(--panel); border:1px solid var(--border); 
  border-radius:12px; padding:.9rem 1rem; margin:.6rem 0;
  transition:var(--transition);
}
.faq details:hover{box-shadow:var(--shadow); border-color:var(--accent)}
.faq details[open]{border-color:var(--accent); box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer; font-weight:600; transition:var(--transition);
  position:relative; padding-right:2rem;
}
.faq summary::after{
  content:'▼'; position:absolute; right:0; top:0;
  transition:var(--transition); color:var(--accent);
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--accent)}

/* Form */
.form{max-width:720px}
.form label{display:grid; gap:.3rem; margin-bottom:1rem}
.form input, .form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--border); 
  border-radius:12px; background:var(--panel); color:var(--text);
  transition:var(--transition);
}
.form input:focus, .form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  transform:translateY(-1px);
}
.form-msg{margin-top:.6rem}

/* Footer */
.site-footer{
  background: color-mix(in srgb, var(--accent) 3%, var(--bg));
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 2rem;
}

.footer-content{
  max-width: 800px; margin: 0 auto; text-align: center;
}

.footer-mission{
  margin-bottom: 2.5rem;
}

.footer-brand{
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;
}

.footer-logo{
  width: 42px; height: 42px;
}

.footer-brand h2{
  font-size: 1.8rem; font-weight: 700; margin: 0; color: var(--text);
}

.footer-mission-text{
  font-size: 1.1rem; line-height: 1.6; max-width: 650px; margin: 0 auto;
  color: var(--muted);
}

.footer-bottom{
  border-top: 1px solid var(--border); padding-top: 2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

.footer-bottom p{
  margin: 0; color: var(--muted); font-size: 0.9rem;
}

.footer-links{display:flex; gap:2rem; flex-wrap:wrap}
.footer-links a{
  color: var(--muted); text-decoration:none; font-weight:500; 
  padding:.3rem 0; transition:var(--transition); position:relative;
}
.footer-links a::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
  background: var(--accent); transition:var(--transition);
}
.footer-links a:hover{color: var(--accent)}
.footer-links a:hover::after{width:100%}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:1000}
.modal.show{display:block}
.modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(5px); animation:fadeInScale 0.3s ease-out;
}
.modal-panel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(900px, 92vw); height:min(80vh, 720px);
  background:var(--panel); border:1px solid var(--border); 
  border-radius:16px; box-shadow:var(--shadow-xl); overflow:hidden;
  animation:fadeInScale 0.3s ease-out;
}
.modal-panel iframe{width:100%; height:100%; border:0}
.modal .close{
  position:absolute; top:.5rem; right:.5rem; z-index:10;
  background:var(--panel); border:1px solid var(--border);
  border-radius:50%; width:40px; height:40px; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  transition:var(--transition);
}
.modal .close:hover{background:var(--accent); color:#fff; transform:scale(1.1)}

/* Add grid utility */
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}

/* Enhanced form styling */
.form label{
  display:grid; gap:.3rem; margin-bottom:1rem; 
  transition:var(--transition); transform-origin:center;
}
.form label span{
  font-weight:600; color:var(--text); 
  transition:var(--transition);
}
.form input:focus + span, .form textarea:focus + span{
  color:var(--accent);
}

/* Loading states */
.loading{
  position:relative; overflow:hidden;
}
.loading::after{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation:shimmer 1.5s infinite;
}

/* Scroll progress indicator */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; background:var(--accent);
  z-index:1000; transition:width 0.1s ease;
}

/* Backdrop blur for modals */
@supports (backdrop-filter: blur()){
  .modal-backdrop{
    backdrop-filter:blur(10px); 
    background:rgba(0,0,0,.4);
  }
}
/* Enhanced Responsive Design */
@media (max-width: 1200px){
  .container{max-width:95%; padding:0 1.5rem}
  .hero h1{font-size:2.2rem}
  .cards.three{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
  .cards.services-grid{grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(3, 1fr)}
}

@media (max-width: 960px){
  .hero{padding:2.5rem 0}
  .hero h1{font-size:2rem; line-height:1.2}
  .hero-grid{grid-template-columns:1fr; gap:2rem; text-align:center}
  .hero-cta{justify-content:center; flex-wrap:wrap}
  .cards.three{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
  .cards.two{grid-template-columns:1fr}
  .cards.services-grid{grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(3, 1fr)}
  .section{padding:2rem 0}
  .section h2{font-size:1.8rem}
  
  /* Footer responsive */
  .footer-mission{margin-bottom:2rem}
  .footer-brand{flex-direction:column; gap:.6rem; margin-bottom:1.2rem}
  .footer-brand h2{font-size:1.6rem}
  .footer-logo{width:36px; height:36px}
  .footer-mission-text{font-size:1rem}
  .footer-bottom{justify-content:center; text-align:center; gap:2rem}
  .footer-links{justify-content:center; gap:1.5rem}
  
  /* Mobile Navigation */
  .icon-btn{display:inline-block}
  .nav-menu{
    position:absolute; inset:56px 0 auto 0; background:var(--panel); 
    border-bottom:1px solid var(--border); display:none; padding:1rem; 
    gap:.7rem; flex-direction:column; box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
  }
  .nav-menu.show{display:flex; animation:fadeInUp 0.3s ease-out}
  .nav-menu a{width:100%; text-align:center; padding:.8rem 1rem}
  .nav-menu .btn{width:100%; max-width:250px}
  
  /* Card adjustments */
  .card{padding:1.2rem; margin-top:.8rem}
  .card .badge{
    top:-10px; 
    right:.8rem; 
    font-size:.7rem;
    padding:.25rem .5rem;
  }
  .slide-btn{display:none}
  
  /* Header adjustments */
  .brand{font-size:1.25rem}
  .logo{width:42px; height:42px}
  .nav{gap:2rem}
  .nav-menu{gap:1.2rem}
  .header-actions{gap:1.5rem; margin-left:1rem}
  .chip{padding:.3rem .6rem; font-size:.85rem}
  
  /* Form responsive */
  .grid.two{grid-template-columns:1fr}
}

@media (max-width: 640px){
  /* Typography */
  .hero h1{font-size:1.8rem; line-height:1.3}
  .section h2{font-size:1.6rem}
  .lead{font-size:1rem}
  
  /* Spacing */
  .hero{padding:2rem 0}
  .section{padding:1.5rem 0}
  .container{padding:0 1rem; max-width:100%}
  
  /* Footer mobile */
  .site-footer{padding:2rem 0 1.5rem}
  .footer-brand h2{font-size:1.4rem}
  .footer-logo{width:32px; height:32px}
  .footer-mission-text{font-size:0.95rem; padding:0 0.5rem}
  .footer-bottom{flex-direction:column; gap:1rem}
  .footer-links{gap:1rem}
  
  /* Buttons */
  .hero-cta{flex-direction:column; align-items:center}
  .hero-cta .btn{width:100%; max-width:280px}
  .btn{padding:.7rem 1rem; font-size:.9rem}
  
  /* Cards */
  .cards{grid-template-columns:1fr; gap:1rem; padding-top:.8rem}
  .cards.services-grid{grid-template-columns:1fr; grid-template-rows:repeat(6, 1fr)}
  .card{padding:1rem; margin:0; margin-top:.8rem}
  .card.price .amount{font-size:1.8rem}
  .card .badge{
    top:-8px; 
    right:.8rem; 
    font-size:.65rem;
    padding:.2rem .5rem;
  }
  
  /* Header */
  .brand{font-size:1.2rem}
  .brand span{font-size:1.2rem}
  .logo{width:38px; height:38px}
  .header-inner{padding:.8rem 1rem}
  .nav-menu{gap:1rem}
  .header-actions{gap:1.5rem; margin-left:1rem}
  
  /* Modal responsive */
  .modal-panel{
    width:95vw; height:85vh; margin:0;
    border-radius:12px;
  }
  
  /* Form */
  .form input, .form textarea{padding:.6rem .7rem; font-size:.9rem}
  
  /* Utility adjustments */
  .badge{font-size:.7rem; padding:.2rem .5rem}
  .subtle{font-size:.8rem}
}

@media (max-width: 480px){
  /* Extra small screens */
  .hero h1{font-size:1.6rem}
  .section h2{font-size:1.4rem}
  .container{padding:0 .8rem}
  
  /* Cards stack better */
  .hero-grid{gap:1.5rem}
  .cards{gap:.8rem; padding-top:.6rem}
  .card{padding:.8rem; margin-top:.6rem}
  .card .badge{
    top:-6px; 
    right:.6rem; 
    font-size:.6rem;
    padding:.15rem .4rem;
  }
  
  /* Buttons smaller */
  .btn{padding:.6rem .8rem; font-size:.85rem}
  .chip{padding:.25rem .5rem; font-size:.8rem}
  
  /* Navigation */
  .header-inner{padding:.6rem 1rem}
  .brand{font-size:1rem}
  .logo{width:32px; height:32px}
  .header-actions{gap:1rem; margin-left:.5rem}
  .nav-menu{padding:.8rem}
  .nav-menu a{padding:.6rem .8rem}
  
  /* Testimonials */
  .slide{padding:1.5rem}
}

/* Landscape orientation for mobile */
@media (max-height: 500px) and (max-width: 960px) and (orientation: landscape){
  .hero{padding:1.5rem 0}
  .hero h1{font-size:1.8rem}
  .hero-grid{gap:1.5rem}
  .section{padding:1.5rem 0}
  .nav-menu{max-height:60vh; overflow-y:auto}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .hero-media img{image-rendering:-webkit-optimize-contrast}
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .animate-fade-in, .animate-fade-in-delay, .animate-fade-in-delay-2,
  .animate-fade-left, .animate-fade-right, .animate-scale, .animate-float{
    animation:none; opacity:1; transform:none;
  }
}