/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-100: #e0f2fe;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--gray-900);
  line-height: 1.5;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, svg { display: block; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.page { min-height: 100vh; background: linear-gradient(to bottom, #f8fafc, #eff6ff); }

/* ===== Header ===== */
.site-header {
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container { padding-top: 1rem; padding-bottom: 1rem; }
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.5rem; }
.brand img { height: 2rem; width: auto; }
.brand-text { font-size: 1.25rem; font-weight: 700; }
.brand-text .tty { color: var(--sky-500); }
.brand-text .soft { color: var(--gray-900); }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-link { color: var(--gray-700); transition: color .2s; font-size: 1rem; }
.nav-link:hover { color: var(--sky-500); }
.nav-link.active { color: var(--sky-600); font-weight: 600; }

.lang-switcher { display: flex; align-items: center; gap: 0.25rem; }
.lang-code {
  display: inline-block; padding: 0.25rem 0.5rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--gray-700); border-radius: 0.375rem; border: 1px solid transparent;
  transition: all .2s;
}
.lang-code:hover { color: var(--sky-500); background: #f1f5f9; }
.lang-code.active { color: var(--sky-600); border-color: var(--sky-500); background: #e0f2fe; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; border-radius: 0.5rem; cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
  padding: 0.5rem 1rem; font-size: 0.95rem; border: none;
  line-height: 1.25rem;
}
.btn svg { width: 1.25rem; height: 1.25rem; }
.btn-primary { background: var(--sky-500); color: #fff; }
.btn-primary:hover { background: var(--sky-600); }
.btn-lg { font-size: 1.125rem; padding: 0.75rem 2rem; }
.btn-outline {
  background: #fff; color: var(--gray-900);
  border: 1px solid var(--gray-300);
}
.btn-outline:hover { background: #f9fafb; }
.btn-icon-left svg { margin-right: 0.5rem; }
.btn-icon-right svg { margin-left: 0.5rem; }

.nav-toggle { display: none; }

/* ===== Hero ===== */
.hero { padding: 5rem 1rem; }
.hero-inner { max-width: 56rem; margin: 0 auto; text-align: center; }
.back-home {
  display: inline-flex; align-items: center; color: var(--sky-500);
  margin-bottom: 2rem; transition: color .2s;
}
.back-home:hover { color: var(--sky-600); }
.back-home svg { width: 1rem; height: 1rem; margin-right: 0.5rem; }
.badge {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1rem; background: #f1f5f9; color: #292524;
  border: 2px solid #0c0a09; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
}
.badge svg { width: 1rem; height: 1rem; margin-right: 0.5rem; }
.hero h1 {
  font-size: 3rem; font-weight: 700; color: var(--gray-900);
  margin-bottom: 1.5rem; line-height: 1.1;
}
.gradient-text {
  color: transparent;
  background: linear-gradient(to right, var(--sky-500), var(--cyan-500));
  -webkit-background-clip: text; background-clip: text;
}
.hero-desc { font-size: 1.25rem; color: var(--gray-600); margin-bottom: 2rem; line-height: 1.7; }
.hero-buttons { display: flex; flex-direction: row; gap: 1rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; }

.hero-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem; margin-top: 4rem;
}
.card {
  background: rgba(255,255,255,0.6); backdrop-filter: blur(6px);
  border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.card-body { padding: 1.5rem; text-align: center; }
.card-icon {
  width: 3rem; height: 3rem; background: #f1f5f9; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.card-icon svg { width: 1.5rem; height: 1.5rem; color: #52525b; }
.card h3 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.5rem; }
.card p { color: var(--gray-600); }

/* ===== Sections ===== */
.section { padding: 5rem 0; }
.section-white { background: #fff; }
.section-head { text-align: center; margin-bottom: 4rem; }
.section-head h2 { font-size: 2.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1rem; }
.section-head p { font-size: 1.25rem; color: var(--gray-600); max-width: 42rem; margin: 0 auto; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; max-width: 56rem; margin: 0 auto; }
.step { text-align: center; }
.step-num {
  width: 4rem; height: 4rem; border: 4px solid var(--sky-500); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
  font-size: 1.5rem; font-weight: 700; color: var(--gray-600);
}
.step h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-900); margin-bottom: 1rem; }
.step p { color: var(--gray-600); }

/* CTA */
.cta { padding: 5rem 0; text-align: center; }
.cta-home { background: linear-gradient(to bottom, var(--sky-500), var(--cyan-600)); }
.cta-services { background: linear-gradient(to right, #2563eb, #16a34a); }
.cta h2 { font-size: 2.25rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.cta p { font-size: 1.25rem; margin-bottom: 2rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.cta-home p { color: var(--sky-100); }
.cta-services p { color: #dbeafe; }
.btn-cta-home { background: #fff; color: var(--sky-600); border: 4px solid #fff; }
.btn-cta-home:hover { background: #f0f9ff; }
.btn-cta-services { background: #fff; color: #2563eb; }
.btn-cta-services:hover { background: #f3f4f6; }

/* ===== Services grid ===== */
.features-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2rem; max-width: 72rem; margin: 0 auto;
}
.feature {
  background: #fff; border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transition: box-shadow .3s;
}
.feature:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.feature-body { padding: 2rem; }
.feature-icon {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
}
.feature-icon svg { width: 1.5rem; height: 1.5rem; }
.feature h3 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1rem; }
.feature p { color: var(--gray-600); line-height: 1.7; }
.ico-blue { background: #dbeafe; color: #2563eb; }
.ico-green { background: #dcfce7; color: #16a34a; }
.ico-purple { background: #f3e8ff; color: #9333ea; }
.ico-indigo { background: #e0e7ff; color: #4f46e5; }
.ico-orange { background: #ffedd5; color: #ea580c; }
.ico-red { background: #fee2e2; color: #dc2626; }
.ico-pink { background: #fce7f3; color: #db2777; }
.ico-yellow { background: #fef9c3; color: #ca8a04; }

/* ===== About ===== */
.about-wrap { max-width: 56rem; margin: 0 auto; }
.about-head { text-align: center; margin-bottom: 3rem; }
.about-head h2 { font-size: 2.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; }
.about-card {
  background: #fff; border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  margin-bottom: 3rem;
}
.about-card:last-child { margin-bottom: 0; }
.about-card-body { padding: 2rem; color: var(--gray-700); line-height: 1.7; }
.about-card-body p { margin-bottom: 1.5rem; }
.about-lead { font-size: 1.25rem; }
.about-box {
  background: #eff6ff; padding: 1.5rem; border-radius: 0.5rem;
  border-left: 4px solid #1e3a8a;
}
.about-box p { color: #1e3a8a; font-weight: 600; margin-bottom: 1rem; }
.about-box ul li { color: #1e40af; margin-bottom: 0.5rem; }
.mission-logo { display: flex; justify-content: center; margin-bottom: 2rem; }
.mission-logo img { max-width: 24rem; width: 100%; height: auto; object-fit: contain; }
.mission-box {
  background: linear-gradient(to right, #eff6ff, #f0fdf4);
  padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #bfdbfe;
}
.mission-box p:first-child { font-weight: 600; color: var(--gray-800); margin-bottom: 1rem; }
.mission-box p:last-child { color: var(--gray-700); margin-bottom: 0; }

/* ===== Footer ===== */
.site-footer { background: var(--gray-900); color: #fff; padding: 3rem 0; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.footer-logo {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: linear-gradient(to bottom right, var(--sky-400), var(--cyan-500));
  display: flex; align-items: center; justify-content: center;
}
.footer-logo svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.footer-brand span { font-size: 1.25rem; font-weight: 700; }
.footer-col h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
.footer-col p, .footer-col .footer-link { color: var(--gray-400); margin-bottom: 0.5rem; display: block; transition: color .2s; }
.footer-link:hover { color: #fff; }
.footer-tagline { color: var(--gray-400); }
.footer-col p svg { width: 1rem; height: 1rem; display: inline; vertical-align: -2px; margin-right: 0.5rem; }
.footer-strong { font-weight: 600; color: var(--gray-300); }
.footer-bottom {
  border-top: 1px solid var(--gray-800); margin-top: 2rem; padding-top: 2rem;
  text-align: center; color: var(--gray-400);
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
  .hero h1 { font-size: 3.75rem; }
}
@media (max-width: 767px) {
  .nav-links { display: none; flex-direction: column; align-items: flex-start; gap: 1rem;
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    padding: 1rem; border-bottom: 1px solid #e5e7eb; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--gray-700); }
  .nav-toggle svg { width: 1.75rem; height: 1.75rem; }
  .nav { position: relative; }
  .hero-cards, .steps, .features-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.25rem; }
  .hero { padding: 3rem 1rem; }
}