.elementor-kit-5{--e-global-color-primary:#432CF2;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#2BD58F;--e-global-color-6e478ea:#F3F7FA;--e-global-color-7a0f4cd:#0C1523;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- GLOBAL HEAD ASSETS: add once in Elementor > Custom Code (Head) or a top HTML widget -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<style>
  :root{
    --bg-dark:#0b1026;--bg-light:#f8fafc;--card:#ffffff;--text:#0b1026;--muted:#334155;--line:#e2e8f0;--chip:#cbd5e1;--brand:#22c55e
  }
  html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff}
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  .hero{padding:72px 0;background:var(--bg-dark);color:#fff;text-align:center}
  .hero h1{font-size:42px;margin:0 0 12px}
  .hero p{font-size:18px;opacity:.9;margin:0 0 24px}
  .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 16px;border-radius:10px}
  .btn.green{background:var(--brand);color:var(--bg-dark)}
  .btn.white{background:#fff;color:var(--bg-dark)}
  .btn.outline{background:transparent;color:#fff;border:1px solid #fff}

  .filters{padding:28px 0;background:var(--bg-light)}
  .filters h2{font-size:28px;margin:0 0 8px}
  .filters p{margin:0 0 14px;color:var(--muted)}
  .filterbar{display:flex;gap:10px;flex-wrap:wrap}
  .chip{padding:8px 12px;border:1px solid var(--chip);border-radius:8px;background:#fff;cursor:pointer;font-weight:600;color:var(--text)}
  .chip.active{background:#e2e8f0}

  .grid{padding:28px 0}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
  .card{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--card)}
  .card h3{margin:0 0 8px;font-size:18px}
  .card p{margin:0 0 10px;color:#475569}
  .meta{font-size:13px;color:#64748b;margin:0 0 12px}
  .link{font-weight:700;text-decoration:none;color:var(--text)}
  .card.featured{border:2px solid var(--brand);background:#f0fdf4}
  .card.featured h3{color:#14532d}
  .card.featured p,.card.featured .meta{color:#166534}

  .why{padding:28px 0;background:var(--bg-light)}
  .why h2{font-size:28px;margin:0 0 10px}
  .why p,.why li{color:var(--muted)}

  .faq{padding:28px 0}
  details{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;background:#fff}
  summary{font-weight:700;cursor:pointer}

  .cta{padding:40px 0;background:var(--bg-dark);color:#fff;text-align:center}
  .cta h2{font-size:28px;margin:0 0 10px}
  .cta p{margin:0 0 18px;opacity:.9}

  .note{background:linear-gradient(90deg,#eef2ff,#ecfeff);border-bottom:1px solid #e5e7eb;color:#334155}
  .note .container{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 20px;font-size:14px}
  .note a{color:#1f2937;font-weight:700;text-decoration:none}
</style>/* End custom CSS */