/* Reasonable Insurance - modern theme inspired by "Insur home-four" layout (original CSS) */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root{
  /* Brand */
  --blue:#0f4c81;
  --green:#2f8f46;

  /* Dark surfaces */
  --dark-bg:#0b1220;
  --dark-surface:#0f1a31;
  --dark-card:#101f3a;

  /* Light surfaces */
  --light-bg:#f6f8fc;
  --light-surface:#ffffff;
  --light-card:#ffffff;

  /* Text */
  --text-dark:#0f172a;
  --text-muted:#5b6477;
  --text-light:#eaf0ff;

  /* Accents */
  --accent-grad: linear-gradient(135deg, #0f4c81, #2f8f46);
  --accent-soft: linear-gradient(135deg, #e8f2fb, #e9f7ee);

  --border-light:#e4e7ee;
  --border-dark:rgba(255,255,255,.08);

  --radius:18px;
  --container:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
  color: var(--text-dark);
  background: var(--light-bg); /* <-- light default */
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), #0b72b7);
  box-shadow: 0 14px 30px rgba(15,76,129,.35);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.btn-ghost:hover{background: rgba(255,255,255,.09); transform:translateY(-1px)}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background: rgba(47,143,70,.12);
  border:1px solid rgba(47,143,70,.25);
  color:#d9ffe6;
  font-weight:700;
  letter-spacing:.2px;
  font-size:13px;
}

/* Topbar (like the demo) */
.topbar{
  background: rgba(255,255,255,.04);
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
  gap:14px;
}
.topbar .left, .topbar .right{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(234,240,255,.92);
}
.pill span{color:var(--muted); font-weight:600}
.social{
  display:flex; gap:10px; align-items:center;
}
.social a{
  width:30px;height:30px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.social a:hover{background: rgba(255,255,255,.09)}

/* Header / nav */
.header{
  background: rgba(7,12,24,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 220px;
}
.brand img{
  height:104px; width:auto; /* bigger logo */
}
.navlinks{
  display:flex; align-items:center; gap:18px;
}
.navlinks a{
  padding:10px 10px;
  border-radius:999px;
  color:rgba(234,240,255,.92);
  font-weight:700;
  font-size:14px;
}
.navlinks a:hover{background: rgba(255,255,255,.06)}
.nav-cta{display:flex; gap:10px; align-items:center}

.burger{
  display:none;
  width:44px;height:44px;border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
}
.mobile-panel{
  display:none;
  padding:10px 0 18px 0;
}
.mobile-panel a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  margin:8px 0;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
}
.mobile-panel .cta-row{display:flex; gap:10px; flex-wrap:wrap}

/* Hero (big, like the demo) */
.hero{
  padding:70px 0 34px 0;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:26px;
  align-items:stretch;
}
.hero h1{
  font-size:52px;
  line-height:1.05;
  margin:14px 0 12px 0;
  letter-spacing:-.6px;
  color: rgba(255,255,255,.96) !important;
}
.hero p{
  color: rgba(234,240,255,.82);
  font-size:18px;
  max-width: 650px;
  margin: 0 0 20px 0;
  color: rgba(255,255,255,.78) !important;
}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-2px -2px auto auto;
  width:240px;height:240px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(47,143,70,.32), transparent 60%);
  filter: blur(0px);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.45)
  );
  pointer-events:none;
}
.hero-card h3{
  margin:0 0 8px 0;
  font-size:18px;
}
.hero-card ul{margin:12px 0 0 0; padding:0; list-style:none}
.hero-card li{
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(234,240,255,.86);
  font-weight:650;
}
.hero-card li small{display:block;color:var(--muted);font-weight:700;margin-top:2px}

/* Sections */
.section{padding:58px 0}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
  margin-bottom:20px;
}
.kicker{
  color: rgba(47,143,70,.95);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}
.section h2{
  font-size:34px; margin:8px 0 0 0; letter-spacing:-.3px;
}
.section .lead{
  color: rgba(234,240,255,.78);
  max-width: 720px;
  font-size:16px;
}

/* Cards grid (services like the demo) */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
.card{
  background: var(--light-card);
  color: var(--text-dark);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 20px 45px rgba(16,24,40,.08);
}

.section-dark .card{
  background: rgba(255,255,255,.06);
  color: var(--text-light);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Two column “why choose us” */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.panel{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow-soft);
}
.bullets{margin:14px 0 0 0; padding:0; list-style:none}
.bullets li{
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-weight:750;
}
.bullets li:first-child{border-top:none}
.bullets li span{color:var(--muted);font-weight:700;display:block;margin-top:4px}

/* Stats band */
.stats{
  margin-top:18px;
  background: linear-gradient(135deg, rgba(47,143,70,.16), rgba(15,76,129,.18));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding:22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
.stat{
  padding:14px;
  border-radius: 14px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.stat b{font-size:22px}
.stat div{color:rgba(234,240,255,.78); font-weight:700; margin-top:4px}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding:34px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:18px;
}
.footer p{color:rgba(234,240,255,.78)}
.footer a{color:rgba(234,240,255,.90); font-weight:800}
.footer small{color:rgba(234,240,255,.60)}
.footer .footbar{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .brand img{height:96px}
}
@media (max-width: 720px){
  .navlinks{display:none}
  .burger{display:inline-grid; place-items:center}
  .mobile-panel{display:none}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .hero h1{font-size:76px}
}
.section-light h1,
.section-light h2,
.section-white h1,
.section-white h2{
  color: var(--text-dark);
}

.section-light p,
.section-white p{
  color: var(--text-muted);
}
<section class="hero section-dark">
<section class="section section-light" id="services">
<section class="section section-white" id="learn">
<section class="section section-accent">
<footer class="footer section-dark">
/* ===== Section skins ===== */

.section-dark{
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(47,143,70,.25), transparent 60%),
    radial-gradient(900px 400px at 80% 0%, rgba(15,76,129,.30), transparent 60%),
    linear-gradient(180deg, #081022, #070c18);
  color: var(--text-light);
}

.section-light{
  background: var(--light-bg);
  color: var(--text-dark);
}

.section-white{
  background: var(--light-surface);
  color: var(--text-dark);
}

.section-accent{
  background: var(--accent-grad);
  color: #ffffff;
}


/* ===== PATCH: Multi-band layout + bigger logo ===== */

body{
  background: var(--light-bg) !important;
  color: var(--text-dark) !important;
}

/* Section skins */
.section-dark{
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(47,143,70,.25), transparent 60%),
    radial-gradient(900px 400px at 80% 0%, rgba(15,76,129,.30), transparent 60%),
    linear-gradient(180deg, #081022, #070c18);
  color: var(--text-light);
}

.section-light{
  background: var(--light-bg);
  color: var(--text-dark);
}

.section-white{
  background: #ffffff;
  color: var(--text-dark);
}

.section-accent{
  background: var(--accent-grad);
  color: #ffffff;
}

/* Bigger logo */
.brand img{
  height: 110px !important;
  width: auto !important;
}
.nav{ padding: 18px 0 !important; }

/* Ensure light sections read like light sections */
.section-light .kicker,
.section-white .kicker{
  color: rgba(47,143,70,.95);
}

.section-light .lead,
.section-white .lead{
  color: var(--text-muted);
}

/* Cards adapt */
.section-light .card,
.section-white .card{
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  box-shadow: 0 20px 45px rgba(16,24,40,.08);
}
.section-light .card p,
.section-white .card p{
  color: var(--text-muted);
}

/* Panels adapt */
.section-light .panel,
.section-white .panel{
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  box-shadow: 0 20px 45px rgba(16,24,40,.08);
}
.section-light .bullets li span,
.section-white .bullets li span{
  color: var(--text-muted);
}

/* Keep dark cards for hero */
.section-dark .hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
}

/* Responsive logo sizes */
@media (max-width: 980px){
  .brand img{ height: 88px !important; }
}
@media (max-width: 720px){
  .brand img{ height: 76px !important; }
}
.topbar{
  background: rgba(8,16,34,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.topbar .pill,
.topbar .pill strong{
  color: rgba(255,255,255,.92) !important;
}

.topbar .pill span{
  color: rgba(255,255,255,.70) !important;
}

.topbar .social a{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
/* ===== Header height + logo presence ===== */
.nav{
  padding: 10px 0 !important;          /* reduce header height */
}

.brand{
  display:flex;
  align-items:center;
  padding: 0;
  border-radius: 14px;
  background: transparent;   /* makes the logo feel “placed” */
  border: none;
}

.brand img{
  height: 92px !important;             /* visual sweet spot */
  width: auto !important;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 980px){
  .brand img{ height: 78px !important; }
}
@media (max-width: 720px){
  .brand img{ height: 68px !important; }
}
/* Logo sizing */
.brand img{
  height: 96px;   /* desktop sweet spot */
  width: auto;
  display: block;
}

@media (max-width: 980px){
  .brand img{ height: 80px; }
}

@media (max-width: 720px){
  .brand img{ height: 68px; }
}
/* ===== Topbar: Blue → Green gradient (like your screenshot) ===== */
.topbar{
  background: linear-gradient(90deg, #0f4c81 0%, #1b6b7a 45%, #2f8f46 100%) !important;
  border-bottom: 0 !important;
}

.topbar .row{
  padding: 10px 0 !important;
}

/* Make topbar text readable */
.topbar .pill,
.topbar .pill strong{
  color: rgba(255,255,255,.95) !important;
}
.topbar .pill span{
  color: rgba(255,255,255,.78) !important;
}

/* Social buttons: subtle glass */
.topbar .social a{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95) !important;
}
.topbar .social a:hover{
  background: rgba(255,255,255,.18) !important;
}

/* Topbar CTA button: clean white */
.topbar .btn.btn-primary{
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
}
.topbar .btn.btn-primary:hover{
  background: #ffffff !important;
  transform: translateY(-1px);
}
.topbar{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
/* ===== Navbar: same gradient as topbar ===== */
.header{
  background: linear-gradient(90deg, #0f4c81 0%, #1b6b7a 45%, #2f8f46 100%) !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}

/* Nav text */
.navlinks a{
  color: rgba(255,255,255,.95) !important;
}
.navlinks a:hover{
  background: rgba(255,255,255,.14) !important;
}

/* Ghost button in navbar */
.header .btn.btn-ghost{
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.28) !important;
}
.header .btn.btn-ghost:hover{
  background: rgba(255,255,255,.22) !important;
}

/* Burger menu */
.burger{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}
.topbar{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
}
/* ===== Revert TOPBAR only to original dark/glass ===== */
.topbar{
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.topbar .pill,
.topbar .pill strong{
  color: rgba(234,240,255,.92) !important;
}

.topbar .pill span{
  color: rgba(147,164,199,.95) !important;
}

.topbar .social a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(234,240,255,.92) !important;
}

/* If you had forced the topbar button to white, revert it */
.topbar .btn.btn-primary{
  background: linear-gradient(135deg, var(--primary), #0b72b7) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(15,76,129,.35) !important;
}
/* ===== Unified color: Topbar + Hero (section after navbar) ===== */
:root{
  --header-grad: linear-gradient(90deg, #0f4c81 0%, #1b6b7a 45%, #2f8f46 100%);
}

/* Topbar uses same gradient */
.topbar{
  background: var(--header-grad) !important;
  border-bottom: 0 !important;
}

/* HERO (the section after navbar) uses same gradient */
.hero{
  background: var(--header-grad) !important;
  color: #ffffff;
}

/* If your hero previously had a dark background from .section-dark, neutralize it */
.hero.section-dark{
  background: var(--header-grad) !important;
}

/* Improve text contrast on gradient */
.hero h1{ color: rgba(255,255,255,.96) !important; }
.hero p{ color: rgba(255,255,255,.82) !important; }

/* Make hero side-card readable on gradient */
.hero .hero-card{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Optional: add a subtle divider line between topbar and navbar */
.topbar{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
}
/* ===== Topbar same black as footer ===== */
.topbar{
  background: #070c18 !important;          /* same as footer dark */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Topbar text */
.topbar .pill,
.topbar .pill strong{
  color: rgba(234,240,255,.92) !important;
}

.topbar .pill span{
  color: rgba(147,164,199,.85) !important;
}

/* Social icons */
.topbar .social a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(234,240,255,.92) !important;
}

/* CTA button in topbar */
.topbar .btn.btn-primary{
  background: linear-gradient(135deg, var(--primary), #0b72b7) !important;
  color: #ffffff !important;
}
.card{
  /* keep your existing properties here */
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 55px rgba(16,24,40,.14);
}
/* Subtle navbar → hero transition */
.header{
  box-shadow: inset 0 -12px 18px rgba(0,0,0,.25);
}
/* ===== Primary CTA buttons: more clickable ===== */
.btn{
  cursor: pointer;
}

.btn-primary{
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.35);
}

/* Secondary CTA (Explore Categories) */
.btn-ghost{
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.btn-ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
/* ===== Make hero CTAs stand out more ===== */

/* Bigger + bolder base */
.hero .btn{
  padding: 14px 22px;          /* bigger button */
  font-weight: 800;            /* bolder text */
  letter-spacing: .2px;
}

/* PRIMARY CTA: Request a Quote */
.hero .btn-primary{
  background: linear-gradient(135deg, #0b72b7, #2f8f46) !important; /* brighter */
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.40) !important;              /* stronger depth */
  transform: translateY(0);
}

.hero .btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0,0,0,.55) !important;
  filter: brightness(1.05);
}

/* SECONDARY CTA: Explore Categories */
.hero .btn-ghost{
  background: rgba(255,255,255,.18) !important;  /* more visible */
  border: 1px solid rgba(255,255,255,.38) !important;
  color: rgba(255,255,255,.98) !important;
}

.hero .btn-ghost:hover{
  background: rgba(255,255,255,.28) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
/* ===== Fix Get a Quote hover contrast ===== */
.topbar .btn.btn-primary:hover,
.header .btn.btn-primary:hover{
  background: #ffffff !important;
  color: #0f172a !important;   /* dark readable text */
}
/* ===== Add faint boundary to Get a Quote button ===== */
.hero .btn-primary,
.header .btn-primary,
.topbar .btn-primary{
  border: 1px solid rgba(255,255,255,.28);   /* faint light boundary */
}
.hero .btn-primary:hover,
.header .btn-primary:hover,
.topbar .btn-primary:hover{
  border-color: rgba(255,255,255,.45);
}
.section-dark .brand{
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
/* Bigger logo */
.brand img{
  height: 120px;   /* try 120–140 */
  width: auto;
  display: block;
}
@media (max-width: 980px){
  .brand img{ height: 96px; }
}
@media (max-width: 720px){
  .brand img{ height: 80px; }
}
.card .icon{
  font-size: 32px;     /* try 28–34px */
  line-height: 1;
}
/* ===== Make STAT cards stand out more ===== */
.stats{
  background: rgba(255,255,255,.10) !important;                 /* brighter container */
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.28) !important;           /* more depth */
}

.stat{
  background: rgba(0,0,0,.20) !important;                       /* darker tile */
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.stat b{
  color: rgba(255,255,255,.98) !important;
  font-size: 24px !important;
}

.stat div{
  color: rgba(255,255,255,.86) !important;
}


/* ===== Make HERO side card ("How we stay reasonable") stand out ===== */
.hero-card{
  background: rgba(255,255,255,.14) !important;                 /* brighter than before */
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.35) !important;           /* stronger lift */
}

.hero-card h3{
  color: rgba(255,255,255,.98) !important;
}

.hero-card li{
  color: rgba(255,255,255,.92) !important;
}

.hero-card li small{
  color: rgba(255,255,255,.78) !important;
}
.stat{
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0,0,0,.30);
}
/* ===== Bigger & thicker circular tick ===== */
.hero-card .tick{
  width: 28px;              /* bigger circle */
  height: 28px;
  border-radius: 999px;

  background: #ffffff;
  color: #2f8f46;           /* brand green */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 1500;         /* thicker tick */
  font-size: 20px;          /* larger tick mark */
  line-height: 1;

  flex: 0 0 28px;
  margin-top: 2px;

  box-shadow:
    0 8px 18px rgba(0,0,0,.28),   /* depth */
    inset 0 -1px 0 rgba(0,0,0,.12);
}
/* ===== Align tick inline with the point heading ===== */
.hero-card li{
  display: grid !important;
  grid-template-columns: 28px 1fr;  /* tick column + text column */
  column-gap: 12px;
  align-items: start;
}

.hero-card .tick{
  margin-top: 2px;         /* small nudge to match heading baseline */
}

.hero-card li > div{
  display: block;
}

.hero-card li strong{
  display: inline;          /* inline so tick aligns with this line */
  line-height: 1.25;
}

.hero-card li small{
  display: block;
  margin-top: 4px;
}
.hero-card li{
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: start;
}
.hero-card .tick{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #2f8f46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 28px;
  margin-top: 2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 -1px 0 rgba(0,0,0,.12);
}
.hero-card li strong{ display: inline; line-height: 1.25; }
.hero-card li small{ display: block; margin-top: 4px; }
.hero-card li{
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: start;
}
.hero-card .tick{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #2f8f46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 28px;
  margin-top: 2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 -1px 0 rgba(0,0,0,.12);
}
.hero-card li strong{ display: inline; line-height: 1.25; }
.hero-card li small{ display: block; margin-top: 4px; }
/* ===== Wider layout: ~1.5 inch side margins on desktop ===== */

/* 1.5in ≈ 144px at 96dpi */
:root{
  --side-margin: 1.5in;
}

/* Make container wider and control the side gutters */
.container{
  max-width: 1400px; /* expands content width */
  margin-left: auto;
  margin-right: auto;

  /* side padding becomes 1.5in on large screens, smaller on mobile */
  padding-left: clamp(16px, var(--side-margin), 144px);
  padding-right: clamp(16px, var(--side-margin), 144px);
}

/* Reduce excessive vertical whitespace so content feels “expanded” */
.section{
  padding-top: 56px;
  padding-bottom: 56px;
}

.hero{
  padding-top: 64px;
  padding-bottom: 64px;
}
/* ===== Hero: remove right column and relax spacing ===== */
.hero .hero-grid{
  display: block !important;      /* single column */
}

.hero .hero-grid > div:first-child{
  max-width: 980px;               /* keeps lines readable, not too wide */
}

/* More “breathing room” */
.hero h1{
  max-width: 22ch;                /* calmer headline line length */
  line-height: 1.06;
  margin-bottom: 18px;
}

.hero p{
  max-width: 62ch;                /* comfortable paragraph width */
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 26px;
}

/* Space buttons slightly */
.hero .actions{
  gap: 14px;
}
.hero .hero-grid{
  grid-template-columns: 1fr !important;
}
/* ===== Hero: make left content span wide (not cramped) ===== */
.hero .hero-grid{
  display: block !important;     /* single column */
}

/* Remove the “narrow column” effect */
.hero .hero-grid > div:first-child{
  max-width: none !important;    /* allow full width */
  margin: 0 !important;          /* no centering offsets */
}

/* Let the heading and paragraph use more width */
.hero h1{
  max-width: none !important;    /* remove 22ch limit */
}

.hero p{
  max-width: none !important;    /* remove 60ch limit */
}