/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;background:#ffffff;line-height:1.7;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* ===== INTER FONT ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== CONTAINER ===== */
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:100;background:#ffffff;border-bottom:1px solid #e2e8f0}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.25rem;font-weight:700;color:#4f46e5;letter-spacing:-0.02em}
.logo span{color:#1e293b}
.nav{display:flex;gap:32px;align-items:center}
.nav a{font-size:0.875rem;font-weight:500;color:#475569;transition:color .2s}
.nav a:hover,.nav a.active{color:#4f46e5}
.nav-cta{padding:8px 20px;background:#4f46e5;color:#fff!important;border-radius:6px;font-weight:600;transition:background .2s}
.nav-cta:hover{background:#4338ca!important}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.menu-toggle span{width:24px;height:2px;background:#1e293b;border-radius:2px;transition:.3s}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,#1e293b 0%,#334155 50%,#4f46e5 100%);color:#fff;padding:100px 0 80px;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:700;line-height:1.2;margin-bottom:20px;letter-spacing:-0.02em}
.hero p{font-size:clamp(1rem,2vw,1.2rem);color:#cbd5e1;max-width:680px;margin:0 auto 32px;line-height:1.7}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-primary{padding:14px 32px;background:#4f46e5;color:#fff;border-radius:8px;font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:background .2s,transform .2s;display:inline-block}
.btn-primary:hover{background:#4338ca;transform:translateY(-1px)}
.btn-secondary{padding:14px 32px;background:rgba(255,255,255,0.1);color:#fff;border-radius:8px;font-weight:600;font-size:1rem;border:1px solid rgba(255,255,255,0.2);cursor:pointer;transition:background .2s;display:inline-block}
.btn-secondary:hover{background:rgba(255,255,255,0.15)}

/* ===== SECTIONS ===== */
.section{padding:80px 0}
.section-alt{background:#f8fafc}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#1e293b;margin-bottom:12px;letter-spacing:-0.02em}
.section-header p{color:#64748b;max-width:560px;margin:0 auto;font-size:1.05rem}

/* ===== HOW IT WORKS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{text-align:center;padding:32px 24px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;transition:box-shadow .3s,border-color .3s}
.step:hover{border-color:#c7d2fe;box-shadow:0 4px 20px rgba(79,70,229,0.08)}
.step-num{width:48px;height:48px;background:#eef2ff;color:#4f46e5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:700;margin:0 auto 16px}
.step h3{font-size:1.1rem;font-weight:600;margin-bottom:10px;color:#1e293b}
.step p{font-size:0.9rem;color:#64748b;line-height:1.6}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{padding:28px 24px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;transition:box-shadow .3s,border-color .3s}
.feature-card:hover{border-color:#c7d2fe;box-shadow:0 4px 20px rgba(79,70,229,0.08)}
.feature-icon{width:44px;height:44px;background:#eef2ff;color:#4f46e5;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:14px}
.feature-card h3{font-size:1rem;font-weight:600;margin-bottom:8px}
.feature-card p{font-size:0.875rem;color:#64748b;line-height:1.6}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-num{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;color:#4f46e5;margin-bottom:4px}
.stat-label{font-size:0.875rem;color:#64748b}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{padding:28px 24px;background:#fff;border-radius:12px;border:1px solid #e2e8f0}
.testimonial-stars{color:#f59e0b;font-size:1rem;margin-bottom:12px}
.testimonial-text{font-size:0.9rem;color:#475569;line-height:1.7;margin-bottom:16px;font-style:italic}
.testimonial-author{font-weight:600;font-size:0.875rem}
.testimonial-role{font-size:0.8rem;color:#64748b}

/* ===== PRICING ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{padding:36px 28px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;text-align:center;transition:box-shadow .3s,border-color .3s}
.pricing-card.featured{border-color:#4f46e5;border-width:2px;position:relative}
.pricing-card.featured::before{content:'Most Popular';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#4f46e5;color:#fff;font-size:0.75rem;font-weight:600;padding:4px 16px;border-radius:20px}
.pricing-name{font-size:0.875rem;font-weight:600;color:#4f46e5;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px}
.pricing-price{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:4px}
.pricing-price span{font-size:1rem;font-weight:400;color:#64748b}
.pricing-desc{font-size:0.875rem;color:#64748b;margin-bottom:24px}
.pricing-features{text-align:left;margin-bottom:28px}
.pricing-features li{padding:8px 0;font-size:0.875rem;color:#475569;display:flex;align-items:center;gap:8px}
.pricing-features li::before{content:'\2713';color:#4f46e5;font-weight:700}
.pricing-card .btn-primary,.pricing-card .btn-secondary{width:100%;text-align:center}

/* ===== FAQ ===== */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid #e2e8f0;padding:0}
.faq-question{padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500;font-size:1rem;color:#1e293b;transition:color .2s;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.faq-question:hover{color:#4f46e5}
.faq-question .icon{width:20px;height:20px;flex-shrink:0;transition:transform .3s;position:relative}
.faq-question .icon::before,.faq-question .icon::after{content:'';position:absolute;background:#1e293b;border-radius:1px;transition:transform .3s}
.faq-question .icon::before{width:2px;height:16px;top:2px;left:9px}
.faq-question .icon::after{width:16px;height:2px;top:9px;left:2px}
.faq-item.open .faq-question .icon::before{transform:rotate(90deg)}
.faq-item.open .faq-question .icon::after{transform:rotate(180deg)}
.faq-answer{padding:0 0 20px;display:none;font-size:0.9rem;color:#475569;line-height:1.7}
.faq-item.open .faq-answer{display:block}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,#1e293b 0%,#4f46e5 100%);color:#fff;text-align:center;padding:80px 0}
.cta h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:12px}
.cta p{color:#cbd5e1;margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto}
.cta .btn-primary{background:#fff;color:#4f46e5}
.cta .btn-primary:hover{background:#f1f5f9}

/* ===== KEYWORDS ===== */
.keywords-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:0}
.keywords-cloud li{padding:8px 18px;background:#f1f5f9;border-radius:20px;font-size:0.85rem;color:#475569;transition:background .2s,color .2s;border:1px solid #e2e8f0}
.keywords-cloud li:hover{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}

/* ===== FOOTER ===== */
.footer{background:#1e293b;color:#94a3b8;padding:48px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px}
.footer-brand .logo{color:#fff;margin-bottom:8px;display:inline-block}
.footer-brand p{font-size:0.85rem;line-height:1.6;margin-top:8px}
.footer h4{color:#fff;font-size:0.875rem;font-weight:600;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.05em}
.footer a{color:#94a3b8;font-size:0.85rem;display:block;margin-bottom:10px;transition:color .2s}
.footer a:hover{color:#fff}
.footer-sister li{margin-bottom:10px}
.footer-sister li a{font-size:0.85rem}
.footer-bottom{border-top:1px solid #334155;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:0.8rem}

/* ===== ABOUT / CONTACT PAGES ===== */
.page-hero{background:linear-gradient(135deg,#1e293b 0%,#4f46e5 100%);color:#fff;padding:80px 0 60px;text-align:center}
.page-hero h1{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:12px}
.page-hero p{color:#cbd5e1;max-width:560px;margin:0 auto;font-size:1rem}
.page-content{padding:60px 0}
.page-content h2{font-size:1.5rem;font-weight:700;margin-bottom:16px;color:#1e293b}
.page-content h3{font-size:1.1rem;font-weight:600;margin:24px 0 12px;color:#1e293b}
.page-content p{color:#475569;line-height:1.8;margin-bottom:16px}
.page-content ul{color:#475569;line-height:1.8;margin-bottom:16px;padding-left:24px;list-style:disc}
.page-content ul li{margin-bottom:6px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.team-card{text-align:center;padding:28px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.team-avatar{width:72px;height:72px;background:#eef2ff;color:#4f46e5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 12px}
.team-card h3{font-size:1rem;font-weight:600}
.team-card p{font-size:0.85rem;color:#64748b}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-info h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:#1e293b}
.contact-info p{font-size:0.9rem;color:#475569;margin-bottom:6px}
.contact-info .contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
.contact-info .contact-icon{width:40px;height:40px;background:#eef2ff;color:#4f46e5;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.contact-form label{display:block;font-size:0.875rem;font-weight:500;color:#1e293b;margin-bottom:6px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:8px;font-family:inherit;font-size:0.9rem;color:#1e293b;transition:border-color .2s;background:#fff}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:#4f46e5}
.contact-form .form-group{margin-bottom:20px}
.contact-form textarea{min-height:140px;resize:vertical}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .features-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:20px 24px;border-bottom:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,0.06);gap:16px;align-items:stretch}
  .nav.open{display:flex}
  .menu-toggle{display:flex}
  .steps,.testimonials-grid{grid-template-columns:1fr}
  .features-grid,.pricing-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .hero{padding:60px 0 50px}
  .section{padding:50px 0}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .hero-btns{flex-direction:column;align-items:center}
  .btn-primary,.btn-secondary{width:100%;text-align:center}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}