:root {
      /* New Palette: Sage & Indigo (calm, modern) */
      --bg: #FDFDFE;           /* soft off‑white with a hint of green */
      --text: #1F2937;         /* slate-900 */
      --primary: #334155;      /* slate-700 (indigo-slate) */
      --secondary: #10B981;    /* emerald-500 */
      --accent: #F59E0B;       /* amber-500 */
      --muted: #E5E7EB;        /* gray-200 */
      --white: #FFFFFF;        /* surface */
      --shadow: 0 10px 25px rgba(51, 65, 85, 0.14);
      --radius-xl: 0.25rem;
      --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: var(--font-sans);
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .container { 
	width: min(1120px, 92%); 
	margin-inline: auto; 
    }

    header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(248,250,252,0.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--muted);
    }
    .nav { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: 0.9rem 0; 
    }

    .brand { 
	display: flex; 
	align-items: center; 
	gap: 0.6rem; 
	color: var(--primary); 
	font-weight: 800; 
	font-size: 1.15rem; 
	text-decoration: none; 
    }
    .brand-logo { 
	width: 34px; 
	height: 34px; 
	display: grid; 
	place-items: center; 
	color: var(--white); 
	font-weight: 800; 
	border-radius: 10px; 
	background: linear-gradient(135deg, var(--primary), var(--secondary)); 
	box-shadow: var(--shadow); 
    }
    .logo { 
	width: 164px; 
	height: auto; 
    }
    nav ul { 
	display: flex; 
	gap: 1.25rem; 
	padding: 0; 
	margin: 0; 
	list-style: none; 
    }
    nav a { 
	color: #2E3A49; 
	font-weight: 600; 
	text-decoration: none; 
    }
    nav a:hover { 
	color: var(--primary); 
    }

    .btn { 
	display: inline-flex; 
	align-items: center; 
	gap: 0.5rem; 
	padding: 0.6rem 0.9rem; 
	border: 0; 
	border-radius: 0.85rem; 
	font-weight: 700; 
	text-decoration: none; 
	cursor: pointer; 
	transition: transform 120ms ease, filter 120ms ease; 
    }
    .btn-primary { 
	background: var(--primary); 
	color: var(--white); 
	box-shadow: var(--shadow); 
    }
    .btn-primary:hover { 
	filter: brightness(1.05); 
	transform: translateY(-1px); 
    }
    .btn-outline { 
	background: transparent; 
	color: var(--primary); 
	border: 2px solid var(--primary); 
	padding: 0.5rem 0.7rem; 
    }
    .btn-outline:hover { 
	background: var(--primary); 
	color: var(--white); 
    }

       .hero {
      padding: 5.5rem 0 3.5rem;
      background-color: #ECF7ED;
      position: relative;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(236,247,237,0.70); /* overlay for readability */
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 2.5rem;
      align-items: center;
    }
    .kicker { 
	color: var(--secondary); 
	font-weight: 800; 
	letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; 
    }
    .h1 { 
	margin: .35rem 0 1rem; 
	font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); 
	font-weight: 800; 
	color: #1E293B; 
	line-height: 1.1; 
    }
    .lead { 
	font-size: 1.125rem; 
	color: #374151; 
	margin-bottom: 1.5rem; 
    }

    .hero-card { 
	background: transparent; 
	padding: 0.55rem; 
    }
    .badge { 
	display: inline-block; 
	padding: .45rem .6rem; 
	font-size: .7rem; 
	font-weight: 800; 
	letter-spacing: .08em; 
	text-transform: uppercase; 
	background: var(--accent); 
	color: #463C1E; 
	border-radius: .5rem; 
    }

    .meta { 
	display: grid; 
	grid-template-columns: repeat(2,1fr); 
	gap: 1rem; 
	margin-top: 1.5rem; 
    }
    .stat { 
	background: var(--white); 
	border: 1px solid var(--muted); 
	border-radius: .9rem; 
	padding: 1rem; 
	text-align: center; 
	box-shadow: var(--shadow); 
    }
    .stat h3 { 
	margin: 0; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	gap: .35rem; 
	font-size: 1.75rem; 
	color: var(--primary); 
    }
    .stat p { 
	margin: .25rem 0 0; 
	font-size: .9rem; 
	color: #53657B; 
    }
    .up-arrow { 
	color: var(--secondary); 
	font-weight: 800; 
    }

    .trust { 
	padding: 2.25rem 0; 
	background: #F2F5F0; 
	border-top: 1px solid var(--muted); 
	border-bottom: 1px solid var(--muted); 
    }
    .trust-logos { 
	display: grid; 
	grid-template-columns: repeat(5, 1fr); 
	gap: 1.25rem; 
	opacity: .75; 
	filter: grayscale(1); 
    }
    .trust-logos div { 
	background: var(--white); 
	border: 1px solid var(--muted); 
	border-radius: .75rem; 
	height: 56px; 
	display: grid; 
	place-items: center; 
	font-weight: 700; 
	color: #6B7C93; 
    }

    .section { 
	padding: 4rem 0;


    }
    .section2 { 
	padding: 4rem 0;
	background-color: #E7F3F5;
    }

    .section h2 { 
	margin: 0 0 .75rem; 
	font-size: clamp(1.8rem, 2vw + .8rem, 2.2rem); 
	color: #1E293B; 
    }
    .section2 h2 { 
	margin: 0 0 .75rem; 
	font-size: clamp(1.8rem, 2vw + .8rem, 2.2rem); 
	color: #1E293B; 
    }
    .section p.lead { 
	margin-top: 0; 
	margin-bottom: 2rem; 
    }

    .features { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 1.25rem; 
    }
    .feature { 
	background: var(--white); 
	border: 1px solid var(--muted); 
	border-radius: var(--radius-xl); 
	padding: 1.25rem; 
	box-shadow: var(--shadow); 
    }
    .feature h3 { 
	margin: .25rem 0 .35rem; 
	color: var(--primary); 
    }
    .icon { 
	width: 44px; 
	height: 44px; 
	border-radius: .55rem; 
	display: grid; 
	place-items: center; 
	background: #237969; 
	color: white; 
	font-weight: 800; 
    }

    .cta { 
	display: grid; 
	grid-template-columns: 1fr auto; 
	align-items: center; 
	gap: 1rem; 
	padding: 2rem; 
	color: white; 
	background: linear-gradient(135deg, var(--primary), var(--secondary)); 
	border-radius: var(--radius-xl); 
	box-shadow: var(--shadow); 
    }
    .cta p { 
	margin: 0; 
	opacity: .95; 
    }
    .cta .btn { 
	background: var(--accent); 
	color: #2B2B2B; 
	padding-left: 14px;
    }

    .testimonials { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 1.25rem; 

    }
    .quote { 
	background: var(--white); 
	border: 2px solid var(--muted); 
	border-radius: var(--radius-xl); 
	padding: 1.25rem; 
	box-shadow: var(--shadow); 
    }
    .quote ul li { 
	margin-left: -12px;
    }

    .quote footer { 
	margin-top: 0rem; 
	font-weight: 900; 
	font-size: 16px;
	color: #20806C; 
    }
    .mainico { 
	width: 48px; 
	height: 46px; 
	margin-right: 0px;
	float: right;

    }

    footer { 
	padding: 1rem 0; 
	border-bottom: 1px solid var(--muted); 
	color: #5B6B7A; 
	font-size: .95rem; 
    }
    .foot-grid { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 3.95rem; 
    }
    .foot-grid h4 { 
	margin: 0 0 .5rem; 
	color: #1B2A41; 
    }
    .brand-logob { 
	visibility: hidden;
	width: 34px; 
	height: 34px; 
	display: grid; 
	place-items: center; 
	color: var(--white); 
	font-weight: 800; 
	border-radius: 10px; 
	background: linear-gradient(135deg, var(--primary), var(--secondary)); 
	box-shadow: var(--shadow); 
    }
    .foot-logo { 
	width: 144px; 
	height: auto; 
    }

    @media (max-width: 980px) {
      .hero-grid { 
	grid-template-columns: 1fr; 
    }
      .features, .testimonials, .foot-grid, .trust-logos { 
	grid-template-columns: 1fr 1fr; 
    }
      .cta { 
	grid-template-columns: 1fr; 
    }
    .cta .btn { 
	margin: 0 auto;
	width: 120px;
	background: var(--accent); 
	color: #2B2B2B; 

    }
    .logo { 
	width: 164px; 
	height: auto; 
    }
    }
    @media (max-width: 640px) {
      nav ul { 
	display: flex; 
    }
    .btn { 
	padding: 0.6rem 0.2rem;
	margin-right: 0px; 
    }
    .cta .btn { 
	align-items: center;
    }
    .btn-outline { 
	padding: 0.3rem 0.4rem; 
    }

    .foot-grid h4 { 
	margin-top: -32px;
	color: #1B2A41; 
    }
      .features, .testimonials, .foot-grid, .trust-logos { 
	grid-template-columns: 1fr; 
    }
    }