.bg-gradient-hero {
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(239,108,0,0.25) 0%, transparent 60%),
    radial-gradient(800px 500px at 10% 80%, rgba(46,125,50,0.20) 0%, transparent 60%),
    linear-gradient(180deg, #0A0E14 0%, #0D1218 60%, #10151C 100%);
}
.bg-gradient-subtle {
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(239,108,0,0.08) 0%, transparent 60%),
    radial-gradient(700px 300px at 80% 100%, rgba(46,125,50,0.08) 0%, transparent 60%),
    linear-gradient(180deg,#F9FAFB 0%, #EEF2F6 100%);
}
:root {
  --deep-ink: #0E1230;
  --deep-violet: #4C2AA6;
}

.js-intro.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}
.fade-in-up.in-view,
.js-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Testimonial cards exact white */
.testimonial-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

    :root{
      --accent: #3FDB7D;
      --deep-ink: #0E1230;
      --deep-violet: #4C2AA6;
      --card-shadow: 0 12px 30px rgba(15, 23, 42, .08);
      --muted: #7C8898;
      --chip: #EEF5F2;
    }
    html,body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:0; background:#fff; color:#0b0f14; }

    /* Utilities used in component (match the React design) */
    .container-custom{ max-width:1200px; margin:0 auto; padding:0 1.25rem; }
    .section-padding{ padding:5rem 0; }
    @media(min-width:768px){ .section-padding{ padding:6rem 0; } }

    .bg-gradient-hero{
      background:
        radial-gradient(1200px 600px at 80% 10%, rgba(239,108,0,0.20) 0%, transparent 60%),
        radial-gradient(800px 500px at 10% 80%, rgba(46,125,50,0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0B0F14 0%, #0E1218 60%, #11151B 100%);
    }
    .bg-gradient-subtle{
      background:
        radial-gradient(700px 300px at 20% 0%, rgba(239,108,0,0.10) 0%, transparent 60%),
        radial-gradient(700px 300px at 80% 100%, rgba(46,125,50,0.10) 0%, transparent 60%),
        linear-gradient(180deg,#F8FAFC 0%, #F1F5F9 100%);
    }
    .text-gradient-fire{
      background: linear-gradient(90deg,#FF7A18 0%, #FFB547 50%, #FF7A18 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .text-gradient-earth{
      background: linear-gradient(90deg,#2E7D32 0%, #66BB6A 60%, #2E7D32 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .pattern-indigenous{
      background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12) 2px, transparent 3px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.10) 2px, transparent 3px);
      background-size:48px 48px;
    }

    .heading-hero{ font-size:clamp(2.2rem,3.8vw,4rem); font-weight:800; line-height:1.05; letter-spacing:-0.015em; }
    .heading-section{ font-size:clamp(1.8rem,2.6vw,2.5rem); font-weight:800; letter-spacing:-0.015em; }
    .text-large{ font-size:1.125rem; line-height:1.7; color:#fff; opacity:.95; }
    .text-body{ color: #0b0f14; opacity:.85; line-height:1.7; }

    /* card */
    .card-premium{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.5rem;
      backdrop-filter: blur(8px);
    }

    /* hover-lift */
    .hover-lift{ transition: transform .35s ease, box-shadow .35s ease; }
    .hover-lift:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.15); }

    /* animation helpers */
    .animate-float{ animation: float 6s ease-in-out infinite; }
    @keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }

    .fade-in-up, .js-intro { opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
    .in-view{ opacity:1 !important; transform: translateY(0) !important; }

    .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; border-radius:.75rem; font-weight:700; transition: all .35s ease; }
    .btn.hero-primary{
      position:relative; overflow:hidden; color:var(--primary-foreground);
      background: linear-gradient(120deg,#FF7A18,#FFB547,#FF7A18);
      padding:1.1rem 2.4rem; border-radius:1.25rem; font-weight:800; font-size:1.05rem;
      border: 1px solid rgba(239,108,0,0.25);
      box-shadow: 0 18px 50px rgba(239,108,0,0.12);
    }
    .btn.hero-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 60px rgba(239,108,0,0.18); }

    .btn.outline-earth{
      border:2px solid var(--primary); color: var(--primary);
      padding:.9rem 1.5rem; background: transparent; font-weight:700; border-radius:1rem;
    }
    .btn.outline-earth:hover{ background: var(--primary); color: #fff; transform: translateY(-2px); }

    .btn.orange-gradient{
      color:#fff; padding:1rem 1.6rem; border-radius:1rem; font-weight:800;
      background: linear-gradient(120deg,#FF7A18,#FFB547);
      border:1px solid rgba(239,108,0,0.25);
    }
    .btn.orange-gradient:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px rgba(239,108,0,0.18); }

    /* pulse/dots etc */
    .animate-pulse { animation: pulse 2s infinite; }
    @keyframes pulse { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

    .focus-ring:focus-visible{ outline: 3px solid var(--ring); outline-offset:4px; border-radius:.75rem; }

    .opacity-15{ opacity:.15; }

    /* small scroll wheel */
    @keyframes bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
    .animate-bounce{ animation: bounce 1.6s infinite; }

    /* small responsive tweaks */
    @media(min-width:1024px){
      .container-custom{ max-width:1280px; }
    }

    /* utility to show intro after isVisible set */
    .is-visible { opacity: 1 !important; transform: translateY(0) !important; }
    .bg-gradient-hero {
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(239,108,0,0.25) 0%, transparent 60%),
    radial-gradient(800px 500px at 10% 80%, rgba(46,125,50,0.20) 0%, transparent 60%),
    linear-gradient(180deg, #0A0E14 0%, #0D1218 60%, #10151C 100%);
}
.bg-gradient-subtle {
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(239,108,0,0.08) 0%, transparent 60%),
    radial-gradient(700px 300px at 80% 100%, rgba(46,125,50,0.08) 0%, transparent 60%),
    linear-gradient(180deg,#F9FAFB 0%, #EEF2F6 100%);
}

/* Testimonial cards exact white */
.testimonial-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

    :root{
      --accent: #3FDB7D;
      --deep-ink: #0E1230;
      --deep-violet: #4C2AA6;
      --card-shadow: 0 12px 30px rgba(15, 23, 42, .08);
      --muted: #7C8898;
      --chip: #EEF5F2;
    }
    html,body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:0; background:#fff; color:#0b0f14; }

    /* Utilities used in component (match the React design) */
    .container-custom{ max-width:1200px; margin:0 auto; padding:0 1.25rem; }
    .section-padding{ padding:5rem 0; }
    @media(min-width:768px){ .section-padding{ padding:6rem 0; } }

    .bg-gradient-hero{
      background:
        radial-gradient(1200px 600px at 80% 10%, rgba(239,108,0,0.20) 0%, transparent 60%),
        radial-gradient(800px 500px at 10% 80%, rgba(46,125,50,0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0B0F14 0%, #0E1218 60%, #11151B 100%);
    }
    .bg-gradient-subtle{
      background:
        radial-gradient(700px 300px at 20% 0%, rgba(239,108,0,0.10) 0%, transparent 60%),
        radial-gradient(700px 300px at 80% 100%, rgba(46,125,50,0.10) 0%, transparent 60%),
        linear-gradient(180deg,#F8FAFC 0%, #F1F5F9 100%);
    }
    .text-gradient-fire{
      background: linear-gradient(90deg,#FF7A18 0%, #FFB547 50%, #FF7A18 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .text-gradient-earth{
      background: linear-gradient(90deg,#2E7D32 0%, #66BB6A 60%, #2E7D32 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .pattern-indigenous{
      background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12) 2px, transparent 3px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.10) 2px, transparent 3px);
      background-size:48px 48px;
    }

    .heading-hero{ font-size:clamp(2.2rem,3.8vw,4rem); font-weight:800; line-height:1.05; letter-spacing:-0.015em; }
    .heading-section{ font-size:clamp(1.8rem,2.6vw,2.5rem); font-weight:800; letter-spacing:-0.015em; }
    .text-large{ font-size:1.125rem; line-height:1.7; color:#fff; opacity:.95; }
    .text-body{ color: #0b0f14; opacity:.85; line-height:1.7; }

    /* card */
    .card-premium{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.5rem;
      backdrop-filter: blur(8px);
    }

    /* hover-lift */
    .hover-lift{ transition: transform .35s ease, box-shadow .35s ease; }
    .hover-lift:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.15); }

    /* animation helpers */
    .animate-float{ animation: float 6s ease-in-out infinite; }
    @keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }

    .fade-in-up, .js-intro { opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
    .in-view{ opacity:1 !important; transform: translateY(0) !important; }

    .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; border-radius:.75rem; font-weight:700; transition: all .35s ease; }
    .btn.hero-primary{
      position:relative; overflow:hidden; color:var(--primary-foreground);
      background: linear-gradient(120deg,#FF7A18,#FFB547,#FF7A18);
      padding:1.1rem 2.4rem; border-radius:1.25rem; font-weight:800; font-size:1.05rem;
      border: 1px solid rgba(239,108,0,0.25);
      box-shadow: 0 18px 50px rgba(239,108,0,0.12);
    }
    .btn.hero-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 60px rgba(239,108,0,0.18); }

    .btn.outline-earth{
      border:2px solid var(--primary); color: var(--primary);
      padding:.9rem 1.5rem; background: transparent; font-weight:700; border-radius:1rem;
    }
    .btn.outline-earth:hover{ background: var(--primary); color: #fff; transform: translateY(-2px); }

    .btn.orange-gradient{
      color:#fff; padding:1rem 1.6rem; border-radius:1rem; font-weight:800;
      background: linear-gradient(120deg,#FF7A18,#FFB547);
      border:1px solid rgba(239,108,0,0.25);
    }
    .btn.orange-gradient:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px rgba(239,108,0,0.18); }

    /* pulse/dots etc */
    .animate-pulse { animation: pulse 2s infinite; }
    @keyframes pulse { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

    .focus-ring:focus-visible{ outline: 3px solid var(--ring); outline-offset:4px; border-radius:.75rem; }

    .opacity-15{ opacity:.15; }

    /* small scroll wheel */
    @keyframes bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }
    .animate-bounce{ animation: bounce 1.6s infinite; }

    /* small responsive tweaks */
    @media(min-width:1024px){
      .container-custom{ max-width:1280px; }
    }

    /* utility to show intro after isVisible set */
    .is-visible { opacity: 1 !important; transform: translateY(0) !important; }
       @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .btn-quote {
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 400;
    font-size: 1rem;
      letter-spacing: 0.01em;
      transition: box-shadow 0.3s, transform 0.3s, background-position 1.5s cubic-bezier(.4,0,.2,1);
      background: linear-gradient(120deg, #4F8BFF 0%, #00E6D0 60%, #8B6FF2 100%);
      background-size: 200% 200%;
      animation: gradientMove 3s ease infinite;
      border-radius: 2rem;
      box-shadow: 0 8px 32px 0 rgba(0,230,208,0.25), 0 1.5px 8px 0 rgba(139,111,242,0.15);
    }
    .btn-quote:hover {
      background-position: 100% 50%;
      transform: scale(1.05);
      box-shadow: 0 12px 40px 0 rgba(0,230,208,0.35), 0 2px 12px 0 rgba(139,111,242,0.25);
    }
    
    :root{
      --accent: #3FDB7D;              /* green accent from screenshot */
      --deep-ink: #0E1230;            /* very dark blue/purple */
      --deep-violet: #4C2AA6;         /* hero right gradient */
      --card-shadow: 0 12px 30px rgba(15, 23, 42, .08);
      --muted: #7C8898;
      --chip: #EEF5F2;
    }
    html, body { scroll-behavior: smooth; }
  body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color:#23265A; font-size:17px; line-height:1.6; background: #181B3A;}
  .heading-hero, .heading-section{ font-family: "Playfair Display", serif; letter-spacing:0.5px; font-weight:800; }
  .heading-hero { font-size:60px; font-weight:800; letter-spacing:-1px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.08); }
  @media (min-width: 768px) { .heading-hero { font-size:90px; } }
  .heading-section { font-size:34px; font-weight:800; }
    .grad-hero{
      background: radial-gradient(1200px 600px at 80% 60%, rgba(119,56,255,.35) 0%, rgba(119,56,255,0) 60%),
                  linear-gradient(120deg, #181B3A 10%, #2d1a75 60%, #4C2AA6 100%);
    }
    .grad-soft{
      background: #F7FAFC;
    }
    .btn-grad{
      background: linear-gradient(90deg, #3FDB7D 0%, #7C4DFF 100%);
      color:#fff;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      padding: 1.1rem 2.5rem;
      box-shadow: 0 4px 24px 0 rgba(63,219,125,0.13);
      transition: transform .18s cubic-bezier(.4,0,.2,1);
    }
    .btn-grad:hover { transform: scale(1.04);}
    .btn-outline{
      border:1.5px solid #3FDB7D;
      color:#3FDB7D;
      background: transparent;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      padding: 1.1rem 2.5rem;
      transition: background .18s;
    }
    .btn-outline:hover { background: rgba(63,219,125,0.08);}
    .card{
      background:#fff;
      border-radius:18px;
      box-shadow:0 12px 30px rgba(15,23,42,0.13);
      border:1.5px solid #e5e9f0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .chip{
      background: var(--chip);
      color:#3FDB7D;
      font-weight:600;
      border-radius: 9999px;
      padding: .45rem 1.1rem;
      display:inline-flex; align-items:center; gap:.5rem;
      font-size: 15px;
      letter-spacing: 0.01em;
      min-height: 32px;
      align-items: center;
      border: 1.5px solid #3FDB7D33;
    }
  .pill-dot{ width:7px; height:7px; background: #3FDB7D; border-radius:9999px; display:inline-block;}
    .muted{ color: var(--muted); }
    .text-white { color: #fff !important; }
    .divider{ height:1px; background: rgba(2,6,23,.06); }
    /* inputs */
    .field{
      border:1.5px solid #E5E9F0;
      border-radius:10px;
      padding:0.85rem 1.1rem;
      width:100%;
      outline: none;
      transition: box-shadow .2s, border-color .2s;
      background: #fff;
      font-size: 15.5px;
      font-family: 'Inter',sans-serif;
      font-weight: 500;
      color: #23265A;
      min-height: 44px;
    }
    .field:focus{ border-color:#3FDB7D; box-shadow: 0 0 0 2px rgba(63,219,125,0.13); }
    .hero-badge{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      color:#fff;
      backdrop-filter: blur(6px);
    }
    .map-sim{
      background: linear-gradient(135deg, rgba(63,219,125,.25), rgba(124,77,255,.25));
      border-radius: 16px;
    }
    /* Card grid spacing */
    .contact-card-grid > div {
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* Section spacing */
    section { margin-bottom: 0; }
    @media (min-width: 1024px) {
      .card { padding: 2.5rem 2.5rem; }
    }
    /* Headings in cards */
    .card h3 {
      font-family: "Playfair Display", serif;
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 1.2rem;
      color: #3FDB7D;
      letter-spacing: 0.01em;
      text-shadow:0 2px 8px rgba(63,219,125,0.04);
    }
    @media (max-width: 767px) {
      .heading-hero { font-size: 44px; }
      .heading-section { font-size: 26px; }
      .card h3 { font-size: 18px; }
    }
    button:focus { outline: none; }
     body { font-family: 'Inter', sans-serif; }
    h1, h2, h3, .font-extrabold, .font-bold {
      font-family: 'Recoleta', 'DM Serif Display', 'Playfair Display', serif !important;
      letter-spacing: -0.01em;
      font-display: swap;
    }
    .bg-gradient-hero {
      background: radial-gradient(1200px 600px at 80% 60%, rgba(119,56,255,.35) 0%, rgba(119,56,255,0) 60%),
                  linear-gradient(120deg, #181B3A 0%, #2d1a75 40%, #4C2AA6 100%);
    }
    .text-gradient-earth {
      background: linear-gradient(90deg, #3FDB7D 0%, #7C4DFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    .gradient-text-hero {
      background: linear-gradient(90deg, #3FDB7D 10%, #4C2AA6 60%, #A084E8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      display: inline-block;
    }
    .btn-gradient {
      background: linear-gradient(90deg, #3FDB7D 0%, #7C4DFF 100%);
      color: #fff;
      border: none;
      transition: opacity 0.2s;
    }
    .btn-gradient:hover {
      opacity: 0.9;
    }
    .bg-gradient-subtle {
      background: linear-gradient(135deg, #EEF5F2 0%, #ffffff 100%);
    }
    .text-gradient-earth {
      background: linear-gradient(90deg, #3FDB7D, #4C2AA6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    .card-premium {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
      padding: 2rem;
    }
    .btn-gradient {
      background: linear-gradient(90deg, #3FDB7D 0%, #4C2AA6 100%);
      color: #fff;
      border: none;
      transition: opacity 0.2s;
    }
    .btn-gradient:hover {
      opacity: 0.9;
    }
    .btn-outline {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.5);
      color: #fff;
      transition: background 0.2s, color 0.2s;
    }
    .btn-outline:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    body { font-family: 'Inter', sans-serif; color: #23265A; background: #181B3A; }
    .heading-hero, .heading-section { font-family: 'Playfair Display', serif; font-weight: 800; }
    .heading-hero { font-size: 60px; font-weight: 800; letter-spacing: -1px; color: #fff; }
    @media (min-width: 768px) { .heading-hero { font-size: 90px; } }
    .heading-section { font-size: 34px; font-weight: 800; }
    .text-gradient-earth { background: linear-gradient(90deg, #3FDB7D 0%, #7C4DFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .bg-gradient-hero {
      background: radial-gradient(1200px 600px at 80% 60%, rgba(119,56,255,.35) 0%, rgba(119,56,255,0) 60%),
                  linear-gradient(120deg, #181B3A 10%, #2d1a75 60%, #4C2AA6 100%);
    }
    .bg-gradient-subtle { background: #F7FAFC; }
    .card-premium { background: #fff; border-radius: 18px; box-shadow: 0 12px 30px rgba(15,23,42,0.13); border: 1.5px solid #e5e9f0; }
    .btn-orange-download { background: linear-gradient(90deg, #3FDB7D 0%, #7C4DFF 100%); color: #fff; border-radius: 12px; font-size: 18px; font-weight: 600; padding: 1.1rem 2.5rem; box-shadow: 0 4px 24px 0 rgba(63,219,125,0.13); transition: transform .18s cubic-bezier(.4,0,.2,1); }
    .btn-orange-download:hover { transform: scale(1.04); }