/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:#f8fafc;
  color:#1e293b;
  line-height:1.6;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font:inherit; border:none; background:none; }
input, textarea, select { font:inherit; }

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

/* ===== Navbar ===== */
.navbar {
  position:fixed; top:0; left:0; right:0;
  background:rgba(248,250,252,0.85);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid rgba(5,150,105,0.08);
  z-index:1000;
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo {
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.2rem;
  color:#0f172a;
}
.logo-icon { flex-shrink:0; }
.nav-links {
  display:flex; gap:32px;
}
.nav-links a {
  font-size:0.9rem; font-weight:500; color:#475569;
  transition:color 0.2s; position:relative;
}
.nav-links a:hover,
.nav-links a.active { color:#059669; }
.nav-links a.active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:#059669; border-radius:2px;
}
.nav-toggle {
  display:none; flex-direction:column; gap:5px; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:#1e293b;
  border-radius:2px; transition:0.3s;
}

/* ===== Hero ===== */
.hero {
  position:relative; min-height:90vh;
  display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.orb {
  position:absolute; border-radius:50%; filter:blur(80px);
  opacity:0.3;
}
.orb-1 { width:600px; height:600px; background:#059669; top:-200px; left:-200px; animation:orbFloat 20s infinite alternate; }
.orb-2 { width:400px; height:400px; background:#8b5cf6; bottom:-100px; right:-100px; animation:orbFloat 25s infinite alternate-reverse; }
.orb-3 { width:300px; height:300px; background:#059669; top:50%; right:20%; animation:orbFloat 15s infinite alternate; opacity:0.15; }
@keyframes orbFloat {
  0% { transform:translate(0,0) scale(1); }
  100% { transform:translate(60px,-40px) scale(1.1); }
}
.hero-inner { position:relative; text-align:center; }
.hero-badge {
  display:inline-block; padding:6px 16px;
  background:rgba(5,150,105,0.08);
  color:#059669; border-radius:50px; font-size:0.85rem; font-weight:500;
  margin-bottom:24px; letter-spacing:0.3px;
}
.hero h1 {
  font-size:clamp(2.4rem, 6vw, 4rem);
  font-weight:800; line-height:1.15;
  color:#0f172a; margin-bottom:20px;
}
.gradient-text {
  background:linear-gradient(135deg, #059669, #8b5cf6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub {
  font-size:1.15rem; color:#64748b; max-width:580px; margin:0 auto 32px;
}
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }
.hero-stats-mini {
  display:flex; gap:40px; justify-content:center; flex-wrap:wrap;
}
.hero-stats-mini div { text-align:center; }
.hero-stats-mini strong { display:block; font-size:1.5rem; color:#0f172a; }
.hero-stats-mini span { font-size:0.85rem; color:#64748b; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; border-radius:10px; font-weight:600; font-size:0.95rem;
  transition:all 0.25s; border:2px solid transparent;
}
.btn-primary {
  background:linear-gradient(135deg, #059669, #047857);
  color:#fff; border-color:#059669;
}
.btn-primary:hover {
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(5,150,105,0.3);
}
.btn-outline {
  background:transparent; color:#059669; border-color:#059669;
}
.btn-outline:hover {
  background:#059669; color:#fff; transform:translateY(-2px);
}
.btn-lg { padding:16px 36px; font-size:1.05rem; }

/* ===== Sections ===== */
.section { padding:100px 0; }
.section-alt { background:#fff; }
.section-label {
  display:inline-block; padding:4px 14px;
  background:rgba(5,150,105,0.07);
  color:#059669; border-radius:50px; font-size:0.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px;
}
.section-title {
  font-size:clamp(1.8rem, 4vw, 2.6rem); font-weight:800;
  color:#0f172a; margin-bottom:12px; line-height:1.2;
}
.section-desc {
  font-size:1.05rem; color:#64748b; max-width:560px; margin:0 auto 48px;
  text-align:center;
}

/* ===== Steps ===== */
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.step-card {
  background:#fff; border-radius:20px; padding:36px 28px;
  border:1px solid rgba(5,150,105,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.03);
  transition:transform 0.3s, box-shadow 0.3s;
  position:relative;
}
.step-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.step-num {
  font-size:0.8rem; font-weight:700; color:#059669;
  letter-spacing:1px; margin-bottom:8px;
}
.step-icon { margin-bottom:16px; }
.step-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:8px; color:#0f172a; }
.step-card p { font-size:0.92rem; color:#64748b; line-height:1.7; }

/* ===== Features ===== */
.features-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.feature-card {
  background:#f8fafc; border-radius:20px; padding:32px 28px;
  border:1px solid rgba(5,150,105,0.06);
  transition:transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.04); }
.feature-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--icon-bg); margin-bottom:16px;
}
.feature-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:6px; color:#0f172a; }
.feature-card p { font-size:0.9rem; color:#64748b; line-height:1.7; }

/* ===== Stats ===== */
.stats-section { background:#0f172a; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.stat-item { text-align:center; }
.stat-figure { font-size:2.8rem; font-weight:800; color:#fff; line-height:1; margin-bottom:4px; }
.stat-label { font-size:0.9rem; color:#94a3b8; font-weight:500; }

/* ===== Testimonials ===== */
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testimonial-card {
  background:#fff; border-radius:20px; padding:32px 24px;
  border:1px solid rgba(5,150,105,0.06);
  box-shadow:0 4px 20px rgba(0,0,0,0.02);
  transition:transform 0.3s;
}
.testimonial-card:hover { transform:translateY(-3px); }
.stars { color:#f59e0b; font-size:1rem; margin-bottom:12px; letter-spacing:2px; }
.testimonial-card blockquote { font-size:0.92rem; color:#475569; line-height:1.7; margin-bottom:20px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.testimonial-author div strong { display:block; font-size:0.9rem; color:#0f172a; }
.testimonial-author div span { font-size:0.8rem; color:#64748b; }

/* ===== Pricing ===== */
.pricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start;
}
.pricing-card {
  background:#fff; border-radius:20px; padding:36px 28px;
  border:1px solid rgba(5,150,105,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.02);
  position:relative;
  transition:transform 0.3s;
}
.pricing-card:hover { transform:translateY(-4px); }
.pricing-card.featured {
  border-color:#059669; border-width:2px;
  transform:scale(1.04);
}
.pricing-card.featured:hover { transform:scale(1.04) translateY(-4px); }
.popular-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, #059669, #047857);
  color:#fff; padding:4px 18px; border-radius:50px;
  font-size:0.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px;
}
.pricing-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:12px; color:#0f172a; }
.price { margin-bottom:24px; }
.price .amount { font-size:2.2rem; font-weight:800; color:#0f172a; }
.price .period { font-size:0.9rem; color:#64748b; }
.pricing-card ul { margin-bottom:28px; }
.pricing-card ul li {
  padding:6px 0; font-size:0.9rem; color:#475569;
  padding-left:22px; position:relative;
}
.pricing-card ul li::before {
  content:'✓'; position:absolute; left:0; color:#059669; font-weight:700;
}

/* ===== FAQ ===== */
.faq-list { max-width:720px; margin:0 auto; }
.faq-item {
  border-bottom:1px solid rgba(5,150,105,0.1);
  padding:4px 0;
}
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 0; text-align:left;
  font-size:1rem; font-weight:600; color:#0f172a;
  transition:color 0.2s;
}
.faq-question:hover { color:#059669; }
.faq-chevron { transition:transform 0.3s; flex-shrink:0; }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-answer {
  max-height:0; overflow:hidden; transition:max-height 0.35s ease, padding 0.35s ease;
  padding:0;
}
.faq-item.open .faq-answer {
  max-height:300px; padding:0 0 20px;
}
.faq-answer p { font-size:0.92rem; color:#64748b; line-height:1.7; }

/* ===== CTA ===== */
.cta-section { background:#fff; padding-bottom:80px; }
.cta-box {
  background:linear-gradient(135deg, #0f172a, #1e293b);
  border-radius:28px; padding:64px 40px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-orb {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(5,150,105,0.15), transparent 70%);
  top:-100px; right:-100px; pointer-events:none;
}
.cta-box h2 { font-size:clamp(1.6rem, 3.5vw, 2.4rem); font-weight:800; color:#fff; margin-bottom:16px; }
.cta-box p { color:#94a3b8; max-width:540px; margin:0 auto 28px; font-size:1rem; }

/* ===== Keywords ===== */
.keywords-section { padding:40px 0; background:#f1f5f9; }
.keywords-cloud {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.keywords-cloud span {
  padding:6px 16px; background:#fff; border-radius:50px;
  font-size:0.8rem; color:#475569; border:1px solid rgba(5,150,105,0.08);
  transition:all 0.2s;
}
.keywords-cloud span:hover { background:#059669; color:#fff; border-color:#059669; }

/* ===== Footer ===== */
.footer {
  background:#0f172a; color:#94a3b8;
  padding:60px 0 0;
}
.footer-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  padding-bottom:32px;
}
.footer-brand .logo { color:#fff; font-size:1.1rem; }
.footer-tagline { margin:12px 0 8px; font-size:0.9rem; }
.footer-email { display:flex; align-items:center; gap:6px; font-size:0.85rem; }
.footer-email a { color:#94a3b8; transition:color 0.2s; }
.footer-email a:hover { color:#059669; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.footer-col h4 { color:#fff; font-size:0.9rem; font-weight:600; margin-bottom:12px; }
.footer-col a { display:block; padding:4px 0; font-size:0.88rem; color:#94a3b8; transition:color 0.2s; }
.footer-col a:hover { color:#059669; }
.footer-bottom {
  border-top:1px solid rgba(148,163,184,0.12);
  padding:20px 24px; text-align:center; font-size:0.85rem;
}

/* ===== About Page ===== */
.page-header {
  padding-top:140px; padding-bottom:60px; text-align:center;
}
.about-story {
  display:grid; grid-template-columns:1.4fr 1fr; gap:48px;
}
.about-text h2 { font-size:1.8rem; font-weight:800; color:#0f172a; margin-bottom:16px; }
.about-text p { font-size:0.95rem; color:#475569; line-height:1.8; margin-bottom:16px; }
.about-mission { display:flex; flex-direction:column; gap:20px; }
.mission-card {
  background:#fff; border-radius:16px; padding:28px;
  border:1px solid rgba(5,150,105,0.06);
}
.mission-card svg { margin-bottom:12px; }
.mission-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:6px; color:#0f172a; }
.mission-card p { font-size:0.9rem; color:#64748b; line-height:1.7; }

/* ===== Contact Page ===== */
.contact-grid {
  display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;
}
.contact-form {
  background:#fff; border-radius:20px; padding:36px;
  border:1px solid rgba(5,150,105,0.08);
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.form-group.full-width { grid-column:1/-1; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; color:#0f172a; margin-bottom:6px; }
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid #e2e8f0; background:#f8fafc;
  font-size:0.9rem; color:#1e293b; transition:border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline:none; border-color:#059669; }
.form-group textarea { resize:vertical; }
.contact-info { display:flex; flex-direction:column; gap:20px; }
.contact-card {
  background:#fff; border-radius:16px; padding:24px;
  border:1px solid rgba(5,150,105,0.06);
}
.contact-card svg { margin-bottom:10px; }
.contact-card h4 { font-size:0.95rem; font-weight:600; color:#0f172a; margin-bottom:4px; }
.contact-card p { font-size:0.88rem; color:#64748b; }
.contact-card a { color:#059669; font-size:0.88rem; word-break:break-all; }
.contact-card a:hover { text-decoration:underline; }
.sister-links { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.sister-links a { color:#059669 !important; font-size:0.85rem; }

/* ===== Animations ===== */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===== Responsive ===== */
@media (max-width:900px) {
  .steps-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .pricing-card.featured { transform:none; }
  .pricing-card.featured:hover { transform:translateY(-4px); }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:32px; }
  .about-story { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-form { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:2.2rem; }
  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    background:rgba(248,250,252,0.98); backdrop-filter:blur(12px);
    flex-direction:column; padding:24px; gap:16px;
    transform:translateY(-120%); transition:transform 0.35s ease;
    border-bottom:1px solid rgba(5,150,105,0.08);
  }
  .nav-links.open { transform:translateY(0); }
  .nav-toggle { display:flex; }
}
@media (max-width:540px) {
  .hero-stats-mini { gap:24px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .cta-box { padding:40px 24px; }
  .section { padding:60px 0; }
  .hero-actions { flex-direction:column; align-items:center; }
}