:root{
    --deep:#074C3E;
    --gold:#FCB650;
    --muted:#f4f8f7;
    --card-shadow: 0 10px 30px rgba(7,76,62,0.08);
    --glass: rgba(255,255,255,0.6);
    --radius: 14px;
    --trans-dur: 350ms;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
    background: linear-gradient(180deg,#f8fff9 0%, #f2fbf6 100%);
    color:#0f2b26;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:18px 36px;
    background: linear-gradient(90deg,var(--deep), #0f6a55);
    color:#fff;
    box-shadow: 0 6px 18px rgba(3,40,34,0.08);
  }
  .brand .logo{
    background: #fff;
  }
  nav{display:flex;gap:18px;align-items:center}
  nav a{color:rgba(255,255,255,0.92);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;transition:all var(--trans-dur)}
  nav a:hover{background:rgba(255,255,255,0.06); color:var(--gold)}
  .cta-header{background:var(--gold); color:var(--deep); padding:10px 14px; border-radius:10px; font-weight:700}

  /* ---------- Hero ---------- */
  .hero{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:30px;
    align-items:center;
    max-width:1180px;margin:34px auto;padding:0 20px;
  }

  .hero-card{
    background: linear-gradient(180deg, rgba(7,76,62,0.03), rgba(252,182,80,0.02));
    padding:36px;border-radius:var(--radius); box-shadow:var(--card-shadow);
    overflow:hidden;
  }

  .hero-left h1{
    font-size:2.1rem; margin:0 0 12px;color:var(--deep);
    background: linear-gradient(90deg,var(--deep), #0b5f4b); -webkit-background-clip:text; color:transparent;
  }
  .hero-left p{color:#234a43;margin-bottom:18px;font-size:1.02rem}
  .pill-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
  .pill{display:flex;align-items:center;gap:10px;background:var(--muted);padding:8px 12px;border-radius:999px;font-weight:600;color:var(--deep)}
  .pill i{color:var(--gold)}

  /* animated phone card */
  .trust{
    margin-top:18px;display:flex;gap:12px;align-items:center;
  }
  .badge{background:linear-gradient(90deg,var(--gold),#ffd99a);color:var(--deep);padding:8px 12px;border-radius:12px;font-weight:700;box-shadow:0 8px 18px rgba(252,182,80,0.12)}

  /* ---------- Form (right) ---------- */
  .form{
    background:linear-gradient(180deg,#ffffff,#fcfff9);
    border-radius:12px;padding:22px;border:1px solid rgba(7,76,62,0.06);
  }
  .form h3{margin:0 0 6px;color:var(--deep)}
  .form p{margin:0 0 12px;color:#385a53;font-size:0.95rem}
  .field{margin-bottom:10px}
  input, select, textarea{
    width:100%; padding:12px 11px;border-radius:10px;border:1px solid #e8f3ef;
    font-size:0.98rem; outline:none; transition:box-shadow var(--trans-dur), transform var(--trans-dur);
  }
  input:focus, select:focus, textarea:focus{box-shadow:0 8px 22px rgba(7,76,62,0.06);transform:translateY(-2px)}
  .btn-primary{
    width:100%; background: linear-gradient(90deg,var(--deep), #0f6a55); color:#fff; padding:14px;border-radius:10px;border:none;font-weight:800;cursor:pointer;
    transition:transform var(--trans-dur), box-shadow var(--trans-dur);
  }
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(7,76,62,0.12)}

  /* ---------- numbers ---------- */
  .numbers{display:flex;gap:18px;justify-content:space-between;margin:28px auto;max-width:1180px;padding:0 20px;flex-wrap:wrap}
  .num-card{flex:1;min-width:200px;background:linear-gradient(135deg, rgba(252,182,80,0.12), rgba(7,76,62,0.02));padding:22px;border-radius:12px; text-align:center;box-shadow:var(--card-shadow)}
  .num-card h2{color:var(--deep);margin:0;font-size:1.8rem}
  .num-card p{margin:6px 0 0;color:#27584f}

  /* ---------- Split section with visual cards ---------- */
  .split{max-width:1180px;margin:26px auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .glass{background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)); border-radius:12px;padding:26px;box-shadow:var(--card-shadow);border:1px solid rgba(11,88,74,0.04)}
  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .feature{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;background:linear-gradient(90deg, rgba(7,76,62,0.02), rgba(252,182,80,0.01));transition:transform var(--trans-dur), box-shadow var(--trans-dur)}
  .feature:hover{transform:translateY(-6px); box-shadow:0 18px 45px rgba(7,76,62,0.06)}
  .feature i{font-size:1.6rem;color:var(--gold);min-width:34px}

  /* ---------- Services grid ---------- */
  .services-section{max-width:1180px;margin:34px auto;padding:0 20px}
  .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
  .svc{background:#fff;padding:20px;border-radius:12px;border:1px solid rgba(7,76,62,0.04);box-shadow:var(--card-shadow);transition:transform var(--trans-dur)}
  .svc:hover{transform:translateY(-8px)}
  .svc i{font-size:2rem;color:var(--gold);margin-bottom:12px;display:inline-block}
  .svc h4{color:var(--deep);margin:6px 0}
  .svc p{color:#3b5f56;font-size:0.95rem}

  /* ---------- How it works ---------- */
  .process{max-width:1180px;margin:40px auto;padding:0 20px;}
  .steps{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
  .step-card{background:linear-gradient(135deg,#fff,#fbfff9);padding:18px;border-radius:12px;flex:1;min-width:220px;border:1px solid rgba(7,76,62,0.03);box-shadow:var(--card-shadow)}
  .step-card i{display:inline-block;padding:10px;border-radius:10px;background:linear-gradient(90deg,var(--gold), #ffdba3);color:var(--deep);margin-bottom:12px}

  /* ---------- Testimonials ---------- */
  .testimonials{max-width:1180px;margin:40px auto;padding:0 20px 50px}
  .t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
  .t-card{background:linear-gradient(180deg,#fff,#fffdf8);padding:20px;border-radius:12px;border:1px solid rgba(7,76,62,0.03);box-shadow:var(--card-shadow)}
  .t-card p{font-style:italic;color:#234a43}
  .t-card h5{margin-top:12px;color:var(--deep)}

  /* ---------- FAQ ---------- */
  .faq{max-width:900px;margin:0 auto 60px;padding:0 20px}
  .faq h3{color:var(--deep)}
  .faq-item{background:#fff;padding:14px;border-radius:10px;margin:12px 0;border-left:4px solid var(--gold);box-shadow:var(--card-shadow)}
  .faq-item summary{font-weight:700;cursor:pointer}
  .faq-item p{margin:8px 0 0;color:#365b52}

  /* ---------- CTA strip ---------- */
  .cta-strip{margin:50px auto;max-width:1180px;padding:26px;border-radius:12px;background:linear-gradient(90deg,var(--deep), #0f6a55);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .cta-strip h3{margin:0}
  .cta-strip button{background:var(--gold);color:var(--deep);border:none;padding:12px 18px;border-radius:10px;font-weight:800;cursor:pointer}

  /* ---------- Footer ---------- */
  footer{background:linear-gradient(90deg,var(--deep), #0f6a55);color:#fff;padding:34px 20px;margin-top:40px}
  .footer-inner{max-width:1180px;margin:0 auto;display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}

  /* ---------- small screens ---------- */
  @media (max-width:980px){
    .hero{grid-template-columns:1fr; padding:12px}
    nav{display:none}
    .split{grid-template-columns:1fr}
    .cta-strip{flex-direction:column; text-align:center}
  }

  /* ---------- subtle entrance animations ---------- */
  .fade-up{opacity:0; transform:translateY(18px); animation:fadeUp .7s forwards ease-out}
  .stagger-1{animation-delay:0.08s}
  .stagger-2{animation-delay:0.16s}
  .stagger-3{animation-delay:0.24s}
  .stagger-4{animation-delay:0.32s}

  @keyframes fadeUp { to {opacity:1; transform:none}}