/*Hero*/
    /* ===== Container (keeps left offset similar to your 8% inline margin) ===== */
    .hero-container{
      max-width:2000px;
      margin-left:8%;
      padding:0 20px;
    }

    /* ===== Background & layout (from your second snippet) ===== */
    .hero{
      background:#000 url('../i/homecard.jpg') no-repeat 0% 0%/cover;
      color:#fff;
      padding:60px 0;
      position:relative;
      overflow:hidden;
      min-height:90vh; /* keep your 90vh */
      display:flex;
      align-items:center;
    }
    .hero-content{
      margin-top: 15vh;
      display:flex;
      align-items:center; /* center vertically like your absolute+center combo */
      max-width:1400px;
      width:100%;
    }

    /* ===== Left text column ===== */
    .hero-text{
      text-align:left;
    }

    /* Headline keeps your vw sizing + stroke/letter-spacing/line-height */
    .hero-headline{
      font-weight:100;
      max-width:1150px;
      font-size:4vw;
      letter-spacing:0.05em;
      line-height:1.25;
      margin:0; /* tight like your inline */
    }
    .hero-headline-italic{
      font-size:3vw;
      font-weight:900;
      -webkit-text-stroke:1.5px #2e98c9;
      color:#2e98c9;
      font-style:italic;
    }

    /* Sub-headline keeps your vw and spacing; fix typo line-height */
    .hero-sub{

      max-width:750px;
      font-size:1.9vw;
      margin-top: 5vh;
      line-height:1.25;

      margin-bottom: 10vh;
    }

    /* Utility for bold inline words */
    .fw-700{ font-weight:700; }

    /* ===== CTA (styled like your white bordered big button) ===== */
    .cta-wrap{ margin:0 0 4vh 0; }
    .cta-button{
      background:#00a8e8;
      color:#fff;
      padding:25px 65px;
      border:2px solid #fff;
      border-radius:8px;
      font-size:3vw;
      font-weight:700;
      cursor:pointer;
      transition:all .3s;
      display:inline-block;
      text-decoration:none;
      margin-bottom: 2vh;
    }
    .cta-button:hover{
      transform:translateY(-2px);
      box-shadow:0 5px 20px rgba(0,168,232,.4);
      animation:pulse 1s infinite;
    }
    @keyframes pulse{
      0%{ box-shadow:0 5px 20px rgba(0,168,232,.4); }
      50%{ box-shadow:0 5px 30px rgba(0,168,232,.6); }
      100%{ box-shadow:0 5px 20px rgba(0,168,232,.4); }
    }

    /* ===== Reviews row (keeps sizes & colors from your first snippet) ===== */
    .trust-badge{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:1.3vh;
      line-height:140%;
      flex-wrap:wrap;
    }
    .trust-badge .brand{
      font-size:2.2vw;
      font-weight:200;
      color:#2e98c9;
      margin-bottom:20px;
      width:100%;
    }
    .rating-number{ font-size:2.3vw; color:#fff; font-weight:700; }
    .stars{ color:#FFD700; font-size:1.6vw; letter-spacing:.1em; }
    .review-count{ color:#ccc; font-size:1.7vw; font-weight:700; }

    /* CTA */
    .cta-button{
	display: inline-block;  /* needed so text-align: center affects it */
    background:#00a8e8;
    color:#fff;
    padding:18px 44px;
    border:2px solid #fff;
    border-radius:10px;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight:700;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
    }
    .cta-button:hover{ transform:translateY(-1px); opacity:.95; }
	/* Tagline and
		CTA buttom Section*/
	.btn-xl {
    display: block;
    width: fit-content;
    margin: 0 auto 12px;
    padding: 16px 28px;
    font-size: 18px;
    border-radius: 10px;
    }
    .tagline-bottom {
	margin-top: 12px;       /* space below button */
  	color: #666;
  	font-style: italic;
	text-align: center;     /* make tagline centered too */
    }
	.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }
	    /* Struggles Section */
            /* ========== PAIN POINTS SECTION ========== */
    .pain-points {
        background-color: #fcfcfc;
        padding: 80px 0;
    }
    
    .section-header {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .section-header h2 {
        font-size: 36px;
        color: #00a8e8;
        margin-bottom: 10px;
    }
    
    .section-header p {
        color: #666;
        font-size: 30px;
    }
    
    .pain-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    
    .pain-icon {
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
        border-radius: 10px;
        object-fit: contain;
        display: block;
    }

    .pain-icon-a {
        background: url("./i/a.png");
    }

    .pain-icon-b {
        background: url("./i/b.png");
    }

    .pain-icon-c {
        background: url("./i/c.png");
    }

    .pain-icon-d {
        background: url("./i/d.png");
    }
    
    .pain-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #1a1a1a;
    }
    
    .pain-card p {
        font-size: 14px;
        color: #666;
    }

    /* Section shell */
    .solution {
    padding: 72px 0 56px;
    background: #fcfcfc; /* light warm gray like the comp */
    }

    /* Heading + subhead */
    .solution-title {
    text-align: center;
    font-size: 36px;
    letter-spacing: 0.06em;
    color: #2e6f9e;           /* blue title like comp */
    margin-bottom: 8px;
    }
    .solution-sub {
    text-align: center;
    font-size: 22px;
    max-width: 960px;
    margin: 0 auto 36px;
    color: #333;
    }
    .solution-sub .accent {
    color: #2e98c9;           /* brighter blue accent phrase */
    font-style: italic;
    }

    /* Two-column grid */
    .solution-grid {
    display: grid;
    grid-template-columns: minmax(520px, 640px) 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto 40px;
    }

    /* Left image */
    .solution-hero {
    margin: 0;
    }
    .solution-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    }

    /* Right: vertical features */
    .solution-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 28px;
    }
    .feature {
    display: grid;
    align-items: start;
    gap: 18px;
    }
    .feature-copy h4 {
	color : #1a1a1a;
    font-size: 22px;
    margin-bottom: 6px;
    }
    .feature-copy p {
    color: #5b5b5b;
    line-height: 1.6;
    }

	/* We Make It Easy Section */
    /* Section shell – dark theme like the comp */
    .ease {
    background: #2f2f31;
    padding: 72px 0 80px;
    color: #e9edf0;
    }

    /* 2-column grid */
    .ease-grid {
    display: grid;
    grid-template-columns: minmax(520px, 640px) 1fr;
    gap: 56px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto 56px;
    }

    /* Left photo panel: two images side-by-side with caption bar */
    .ease-photos {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin: 0;
    }
    .ease-photos img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    }
    .ease-photos figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -38px;                 /* sits just under images like the comp */
    background: rgba(0,0,0,.55);
    color: #dfe6ea;
    font-style: italic;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 0 0 2px 2px;
    }

    /* Right stack: three text blocks */
    .ease-copy {
    display: grid;
    gap: 28px;
    }
    .ease-item h4 {
    color: #f2f5f7;
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 8px;
    font-weight: 800;
    }
    .ease-item p {
    color: #c9d0d6;
    line-height: 1.65;
    margin: 0;
    }

    /* CTA block under the grid */
    .ease-cta {
    max-width: 820px;
    margin: 32px auto 0;
	text-align: center;     /* centers inline/inline-block elements */
 	margin-top: 24px;       /* optional: add spacing above */
    }
    .ease-cta p {
    color: #fcfcfc;
    font-size: 18px;
    margin: 0 0 22px;
    }


    /* ===== Optional: right column placeholder keeps layout flexible ===== */
    .hero-image{ flex:1; }

    /* ===== Responsive guards so vw text doesn’t explode on huge screens ===== */
    @media (min-width:1600px){
      .hero-headline{ font-size:3vw; }
      .hero-headline-italic{ font-size:3vw; }
      .hero-sub{ font-size:2vw; }
      .cta-button{ font-size:2vw; padding-top: 35px; padding-bottom: 35px; padding-left: 100px; padding-right: 100px;}
      .rating-number{ font-size:2vw; }
      .stars{ font-size:1vw; }
      .review-count{ font-size:1vw; }
    }
    @media (max-width:768px){
      .hero-container{ margin-left:6%; padding-right:6%; }
      .hero-content{ flex-direction:column; align-items:flex-start; }
      .hero-headline, .hero-headline-italic{ font-size:6vw; }
      .hero-sub{ font-size:3.6vw; }
      .cta-button{ font-size:4.6vw; padding:18px 44px; }
      .rating-number{ font-size:4.2vw; }
      .stars{ font-size:3.8vw; }
      .review-count{ font-size:3.6vw; }
    }


    /* Laptop and smaller */
    @media (max-width: 1440px) {
      .box { width: 1000px; }
    }

    /* Tablet and smaller */
    @media (max-width: 1024px) {
      .box { width: 750px; }
      .trust-badge .brand {
        font-size: 3vh;
      }
    }

    /* Responsive stack */
    @media (max-width: 992px) {
    .ease-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ease-photos figcaption { position: static; margin-top: -8px; }
    }

    /* Mobile and smaller */
    @media (max-width: 768px) {
      .box { width: 100%; }
      .trust-badge .brand {
        font-size: 3vh;
      }
    }