:root{
      --bg:#ffffff;
      --soft:#f6f8fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#667085;
      --muted2:#98a2b3;
      --line:#e7ecf3;

      --brand:#16588E;     /* Tat D brand */
      --brand2:#0f466f;    /* darker */
      --brand-soft: rgba(22,88,142,.10);

      --shadow: 0 18px 55px rgba(16,24,40,.10);
      --shadow2: 0 10px 24px rgba(16,24,40,.06);

      --r:18px;
      --max: 1200px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: var(--bg);
      color: var(--text);
      line-height:1.35;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin:0 auto;padding:0 24px}

    /* NAV */
    .nav{
      position:sticky;top:0;z-index:40;
      background-color: #16588e;
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;align-items:center;gap:10px;
      font-weight:900;
      letter-spacing:-.5px;
      font-size:20px;
    }
    .mark{
      width:38px;height:38px;border-radius:14px;
      background: linear-gradient(135deg, var(--brand), #2f86c8);
      box-shadow: 0 10px 22px rgba(22,88,142,.20);
      position:relative;
    }
    .mark:after{
      content:"";
      position:absolute;inset:10px;
      border-radius:10px;
      background: rgba(255,255,255,.22);
    }
    .nav-right{
      display:flex;align-items:center;gap:14px;
      color:var(--muted);
      font-weight:700;
      font-size:14px;
    }
    .nav-right a:hover{color:var(--text)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      height:44px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid transparent;
      cursor:pointer;
      font-weight:900;
      font-size:14px;
      user-select:none;
      transition: transform .06s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:active{transform:scale(.98)}
    .btn-primary{background:var(--brand);color:#fff}
    .btn-primary:hover{background:var(--brand2)}

    /* HERO */
    .hero{
      padding:56px 0 30px;
      border-bottom:1px solid var(--line);
      background:
        radial-gradient(900px 380px at 12% 0%, rgba(22,88,142,.12), transparent 60%),
        radial-gradient(900px 420px at 92% 10%, rgba(47,134,200,.10), transparent 60%),
        #fff;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:52px;
      align-items:start;
    }
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr;gap:18px}
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--brand2);
      font-weight:900;
      letter-spacing:-.2px;
      margin-bottom:16px;
      font-size:14px;
      background: var(--brand-soft);
      border:1px solid rgba(22,88,142,.18);
      padding:8px 12px;
      border-radius:999px;
    }
    .kdot{
      width:10px;height:10px;border-radius:999px;
      background: var(--brand);
      box-shadow: 0 0 0 6px rgba(22,88,142,.10);
    }
    h1{
      margin:0 0 14px;
      font-size:54px;
      font-weight:700;
      letter-spacing:-1.6px;
      line-height:1.04;
    }
    @media (max-width: 520px){ h1{font-size:38px} }
    .sub{
      margin:0 0 22px;
      color:var(--muted);
      font-size:18px;
      font-weight:600;
      max-width:60ch;
      line-height:1.65;
    }

    /* FORM */
    .form{
      display:grid;
      gap:12px;
      max-width: 640px;
      padding:14px;
      border-radius:20px;
      background: rgba(255,255,255,.86);
      border:1px solid rgba(231,236,243,.92);
      box-shadow: 0 10px 28px rgba(16,24,40,.06);
    }
    .grid2{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 620px){
      .grid2{grid-template-columns:1fr}
    }
    .input{
      height:54px;
      border:1px solid var(--line);
      border-radius:14px;
      padding:0 14px;
      font-size:15px;
      outline:none;
      background:#fff;
      transition: box-shadow .2s ease, border-color .2s ease;
    }
    .textarea{
      height:auto;
      padding:12px 14px;
      min-height:54px;
      resize:vertical;
    }
    .input:focus{
      border-color:#cfd6e4;
      box-shadow: 0 0 0 4px rgba(22,88,142,.12);
    }
    .select{
      appearance:none;
      background:
        linear-gradient(45deg, transparent 50%, #111827 50%),
        linear-gradient(135deg, #111827 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
      background-position:
        calc(100% - 22px) calc(50% - 2px),
        calc(100% - 16px) calc(50% - 2px),
        100% 0;
      background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
      background-repeat:no-repeat;
      padding-right:44px;
    }
    .form-row{
      display:flex;gap:12px;align-items:center;flex-wrap:wrap;
      justify-content:space-between;
    }
.btn-submit{
  height:54px;
  min-width:90%;
  width: auto;          /* important */
  border:0;
  background:var(--brand);
  color:#fff;
  font-weight:900;
  font-size:16px;
  cursor:pointer;

  display: block;
  margin: 0 auto;       /* center */
}
    .btn-submit:hover{background:var(--brand2)}
    .form-side-text{
      color:var(--brand2);
      font-size:14px;
      font-weight:900;
      line-height:1.4;
    }
    .error{
      display:none;
      margin-top:6px;
      color:#b42318;
      background:#fff1f0;
      border:1px solid #ffd1cc;
      padding:10px 12px;
      border-radius:14px;
      font-size:13px;
      font-weight:800;
    }

    /* RIGHT VISUAL */
    .visual{
      position:sticky;
      top:92px;
      border-radius:24px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(231,236,243,.92);
      background:
        radial-gradient(800px 320px at 20% 10%, rgba(22,88,142,.18), transparent 60%),
        radial-gradient(800px 340px at 80% 20%, rgba(47,134,200,.16), transparent 60%),
        linear-gradient(180deg, #ffffff, #fbfcff);
    }
    @media (max-width: 980px){
      .visual{position:relative;top:auto}
    }
   
    .v-top{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    }
    .v-title{
      font-weight:900;letter-spacing:-.4px;font-size:18px;
      margin:0;
    }
    .v-sub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      line-height:1.5;
    }
    .v-pill{
      padding:8px 12px;border-radius:999px;
      background: rgba(22,88,142,.12);
      border:1px solid rgba(22,88,142,.20);
      color: var(--brand2);
      font-weight:900;
      font-size:12px;
      white-space:nowrap;
      height:fit-content;
    }

    .v-cards{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 520px){
      .v-cards{grid-template-columns:1fr}
    }
       .vcard{
      background:#fff;
      border:1px solid rgba(231,236,243,.95);
      border-radius:18px;
      padding:16px;
      box-shadow: 0 10px 22px rgba(16,24,40,.06);
    }
    .vcard .k{
      display:flex;align-items:center;gap:10px;margin-bottom:8px;
      font-weight:900;
    }
    .vcard .icon{
      width:34px;height:34px;border-radius:14px;
      background: rgba(22,88,142,.12);
      display:flex;align-items:center;justify-content:center;
      color:var(--brand2);
      font-weight:900;
      flex:0 0 auto;
    }
    .vcard p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      line-height:1.5;
    }
    .highlight{
      margin-top:6px;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(231,236,243,.95);
      background: rgba(255,255,255,.80);
      display:flex;gap:12px;align-items:flex-start;
      box-shadow: 0 10px 22px rgba(16,24,40,.05);
    }
    .highlight .big{
      width:44px;height:44px;border-radius:18px;
      background: rgba(47,134,200,.14);
      display:flex;align-items:center;justify-content:center;
      color:#0b4f7c;
      font-weight:900;
      flex:0 0 auto;
      font-size:18px;
    }
    .highlight b{display:block;font-weight:900;margin-bottom:4px}
    .highlight span{display:block;color:var(--muted);font-size:13px;font-weight:700;line-height:1.5}

    /* Trust stats */
    .stats{
      background: var(--soft);
      padding:42px 0;
      border-bottom:1px solid var(--line);
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    @media (max-width: 980px){ .stats-grid{grid-template-columns:1fr} }
    .stat{
      background: linear-gradient(180deg, #ffffff, #fbfcff);
      border:1px solid var(--line);
      border-radius:22px;
      padding:22px;
      box-shadow: var(--shadow2);
      position:relative;
      overflow:hidden;
    }
    .stat:before{
      content:"";
      position:absolute;
      left:-40px;top:-40px;
      width:120px;height:120px;
      border-radius:999px;
      background: rgba(22,88,142,.10);
    }
    .stat b{
      display:block;
      font-size:42px;
      letter-spacing:-1.2px;
      font-weight:900;
      margin-bottom:6px;
      position:relative;
    }
    .stat span{
      display:block;
      color:var(--muted);
      font-size:16px;
      font-weight:800;
      position:relative;
    }

    /* IMAGE SECTION (new) */
    .image-section{
      padding:54px 0;
      background:#fff;
      border-bottom:1px solid var(--line);
    }
    .image-wrap{
      border-radius:26px;
      overflow:hidden;
      border:1px solid rgba(231,236,243,.95);
      box-shadow: var(--shadow);
      background:#f1f5fb;
    }
    .image-wrap img{
      width:100%;
      height:auto;
      display:block;
      object-fit:cover;
      aspect-ratio: 21/9;
    }
    .image-caption{
      padding:16px 18px;
      background:#fff;
      border-top:1px solid var(--line);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .cap-left{
      font-weight:900;
      letter-spacing:-.2px;
    }
    .cap-right{
      color:var(--muted);
      font-weight:700;
      font-size:13px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background: var(--brand-soft);
      border:1px solid rgba(22,88,142,.18);
      color:var(--brand2);
      font-weight:900;
      font-size:12px;
      white-space:nowrap;
    }

    /* WHY (improved) */
    .section{
      padding:58px 0;
      border-bottom:1px solid var(--line);
      background:#fff;
    }
    .section-head{
      text-align:center;
      max-width:920px;
      margin:0 auto 22px;
    }
    .section-head h2{
      margin:0 0 10px;
      font-size:44px;
      letter-spacing:-1px;
      font-weight:700;
    }

    @media (max-width:768px){
  .section-head h2{
    font-size:26px;
    font-weight: 800;
  }
}

/* carousel  */

.t-carousel{
  position: relative;
  overflow: hidden;
}

.t-track{
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.t-carousel .quote{
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 16px;
}

/* OPTIONAL: keep your existing quote card styles,
   just ensure quote has background/padding/border-radius if needed */

.t-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.t-dots button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  opacity: 0.35;
  cursor: pointer;
}

.t-dots button.active{
  opacity: 1;
}

/* ✅ Desktop: show 2 or 3 cards sliding */
@media (min-width: 768px){
  .t-carousel .quote{ flex-basis: 50%; }
}

@media (min-width: 1024px){
  .t-carousel .quote{ flex-basis: 33.333%; }
}



/* carousel */
        
    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:18px;
      font-weight:700;
      line-height:1.65;
    }
    .tiles{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:18px;
      margin-top:22px;
    }
    @media (max-width: 980px){ .tiles{grid-template-columns:1fr} }
    .tile{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:20px;
      box-shadow: var(--shadow2);
      display:flex;
      gap:14px;
      align-items:flex-start;
    }
    .ico{
      width:48px;height:48px;border-radius:18px;
      background: rgba(22,88,142,.12);
      display:flex;align-items:center;justify-content:center;
      color: var(--brand2);
      font-weight:900;
      flex:0 0 auto;
      font-size:18px;
    }
    .tile b{
      display:block;
      font-size:16px;
      font-weight:900;
      margin-bottom:6px;
      letter-spacing:-.2px;
    }
    .tile p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
      line-height:1.55;
    }
    .center-cta{
      display:flex;
      justify-content:center;
      margin-top:24px;
    }

    /* TESTIMONIALS (new) */
    .testimonials{
      padding:58px 0;
      background: var(--soft);
      border-bottom:1px solid var(--line);
    }
    .t-head{
      text-align:center;
      max-width:860px;
      margin:0 auto 22px;
    }
    .t-head h3{
      margin:0 0 10px;
      font-size:36px;
      letter-spacing:-.8px;
      font-weight:900;
    }

     @media (max-width:768px){
  .t-head h3{
    font-size:24px;
    font-weight: 800;
  }
  }

    .t-head p{
      margin:0;
      color:var(--muted);
      font-size:16px;
      font-weight:700;
      line-height:1.65;
    }
    .t-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:18px;
    }
    @media (max-width: 980px){ .t-grid{grid-template-columns:1fr} }
    .quote{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:20px;
      box-shadow: var(--shadow2);
      display:grid;
      gap:12px;
    }
    .stars{
      color: var(--brand);
      font-weight:900;
      letter-spacing:1px;
      font-size:14px;
    }
    .qtext{
      margin:0;
      color:#344054;
      font-weight:700;
      font-size:14px;
      line-height:1.65;
    }
    .qmeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-top:1px solid var(--line);
      padding-top:12px;
      color:var(--muted);
      font-weight:800;
      font-size:13px;
    }
    .avatar{
      width:38px;height:38px;border-radius:14px;
      background: rgba(22,88,142,.12);
      display:flex;align-items:center;justify-content:center;
      color:var(--brand2);
      font-weight:900;
      flex:0 0 auto;
    }
    .who{
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* FINAL HEADLINE + PARA (new) */
    .final{
      padding:58px 0;
      background:#fff;
      border-bottom:1px solid var(--line);
      text-align:center;
    }
    .final h3{
      margin:0 0 10px;
      font-size:40px;
      font-weight:900;
      letter-spacing:-1px;
    }
    .final p{
      margin:0 auto;
      max-width:900px;
      color:var(--muted);
      font-size:18px;
      font-weight:700;
      line-height:1.75;
    }

    /* Footer */
    footer{
      background:#16588e;
      color:#c8d2e0;
      padding:26px 0 34px;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .footer-inner b{color:#fff}
    .footer-links{
      display:flex;gap:14px;flex-wrap:wrap;
      font-weight:700;
      font-size:13px;
      color:#c8d2e0;
    }
    .footer-links a:hover{color:#fff}