:root{--dn:#07152f;--dn2:#0d2348;--dg:var(--gold,#f2b300);--di:var(--ink,#07152f);--dm:var(--muted,#687386);--dl:var(--line,#e8edf3);--db:#f6f8fb;--de:var(--ease,cubic-bezier(.2,.8,.2,1));--ds:0 18px 45px rgba(7,21,47,.09)}
body.locked{overflow:hidden}
.diaspora-hero{position:relative;overflow:hidden;height:75vh;min-height:520px;max-height:720px;padding:clamp(35px,5vh,70px) 0;color:#fff;display:flex;align-items:center;background:#07152f}.diaspora-hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,47,.75),rgba(7,21,47,.45),rgba(7,21,47,.2)),url("assets/background1.jpg") center/cover no-repeat}
.diaspora-hero:before,.diaspora-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.diaspora-hero:before{width:520px;height:520px;right:-180px;top:-270px;background:rgba(242,179,0,.07);border:1px solid rgba(255,255,255,.08)}
.diaspora-hero:after{width:400px;height:400px;left:-220px;bottom:-280px;background:rgba(255,255,255,.035)}
.diaspora-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:55px;align-items:center}
.diaspora-hero-copy{max-width:760px}
.diaspora-eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dg)}
.country-flags{margin:10px 0 5px;font-size:20px;letter-spacing:5px}
.diaspora-hero h1{margin:8px 0 12px;font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1.04;letter-spacing:-.055em}
.diaspora-hero h1 strong,.section-heading h2 strong{color:var(--dg)}
.diaspora-hero-copy>p{max-width:680px;margin:0 0 15px;color:#d6dfec;font-size:13px;line-height:1.7}
.diaspora-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:11px;font-size:11px;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.25s var(--de)}
.btn.primary{background:var(--dg);border-color:var(--dg);color:var(--di);box-shadow:0 10px 25px rgba(242,179,0,.18)}
.btn.primary:hover{transform:translateY(-3px)}
.diaspora-glass{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.diaspora-glass:hover{background:rgba(255,255,255,.15);transform:translateY(-3px)}
.diaspora-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);padding-top:17px}
.diaspora-stats div{padding-right:12px}
.diaspora-stats strong{display:block;color:var(--dg);font-size:17px}
.diaspora-stats span{display:block;margin-top:3px;color:#c7d2e1;font-size:8px;line-height:1.4}
.diaspora-hero-card{padding:26px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.diaspora-card-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:16px;border-radius:14px;background:rgba(242,179,0,.14);color:var(--dg);font-size:19px}
.diaspora-hero-card>span{display:block;color:var(--dg);font-size:9px;font-weight:800;letter-spacing:.14em}
.diaspora-hero-card>strong{display:block;margin:8px 0;color:#fff;font-size:26px;line-height:1.12}
.diaspora-hero-card p{margin:0;color:#cbd5e1;font-size:11px;line-height:1.7}
.diaspora-card-line{height:1px;margin:16px 0;background:rgba(255,255,255,.12)}
.diaspora-hero-card small{display:block;margin:9px 0;color:#e5eaf1;font-size:10px}
.diaspora-hero-card small i{margin-right:7px;color:var(--dg)}
.diaspora-process,.diaspora-calculator{padding:38px 0}
.diaspora-process{background:#fff}
.section-heading{max-width:780px}
.section-heading h2{margin:9px 0 0;color:var(--di);font-size:clamp(2rem,3.6vw,3.15rem);line-height:1.13;letter-spacing:-.045em}
.section-heading p{margin:10px 0 0;color:var(--dm);font-size:13px;line-height:1.7}
.diaspora-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:28px}
.diaspora-steps article{position:relative;overflow:hidden;padding:23px 19px;border:1px solid var(--dl);border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(7,21,47,.04);transition:.28s var(--de)}
.diaspora-steps article:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dg);transform:scaleX(0);transform-origin:left;transition:.3s}
.diaspora-steps article:hover:before{transform:scaleX(1)}
.diaspora-steps article:hover{transform:translateY(-6px);border-color:rgba(242,179,0,.4);box-shadow:var(--ds)}
.diaspora-steps b{position:absolute;right:16px;top:15px;color:#e6eaf0;font-size:23px}
.diaspora-steps article>div{width:46px;height:46px;display:grid;place-items:center;margin-bottom:15px;border-radius:13px;background:#fff7df;color:#b68100;font-size:17px}
.diaspora-steps article>span{display:block;color:#a87400;font-size:8px;font-weight:800;letter-spacing:.13em}
.diaspora-steps h3{margin:7px 0;color:var(--di);font-size:14px}
.diaspora-steps p{margin:0;color:var(--dm);font-size:10px;line-height:1.7}
.diaspora-note{padding:16px 0;background:#fff8e7;border-top:1px solid #f2e0ad;border-bottom:1px solid #f2e0ad}
.diaspora-note .wrap{display:flex;align-items:center;gap:13px}
.diaspora-note>div>i{color:#b68100;font-size:18px}
.diaspora-note p{margin:0;color:#715d26;font-size:11px;line-height:1.65}
.diaspora-calculator{background:var(--db)}
.calculator-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;margin-top:28px}
.emi-card,.pricing-card{padding:24px;border:1px solid var(--dl);border-radius:20px;background:#fff;box-shadow:var(--ds)}
.calculator-title{display:flex;align-items:center;gap:13px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--dl)}
.calculator-title>i{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--dn);color:var(--dg);font-size:18px}
.pricing-card .calculator-title>i{background:#fff7df;color:#b68100}
.calculator-title span{display:block;margin-bottom:4px;color:#a87400;font-size:8px;font-weight:800;letter-spacing:.13em}
.calculator-title h3{margin:0;color:var(--di);font-size:17px}
.emi-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.emi-fields label{display:flex;flex-direction:column;gap:7px;color:#465266;font-size:10px;font-weight:700}
.emi-fields input{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--dl);border-radius:10px;background:#fff;color:var(--di);font:inherit;font-size:13px}
.emi-fields input:focus{outline:none;border-color:var(--dg);box-shadow:0 0 0 3px rgba(242,179,0,.12)}
.emi-result{margin:18px 0 13px;padding:17px;border-radius:15px;background:linear-gradient(135deg,var(--dn),var(--dn2));color:#fff}
.emi-result span{display:block;margin-bottom:6px;color:#bdc9da;font-size:10px;font-weight:700}
.emi-result strong{display:block;color:var(--dg);font-size:26px}
.formula-box{margin-bottom:15px;padding:13px;border:1px solid var(--dl);border-radius:12px;background:#fafbfd}
.formula-box span{display:block;margin-bottom:5px;color:#a87400;font-size:8px;font-weight:800;letter-spacing:.13em}
.formula-box strong{display:block;color:var(--di);font-size:11px}
.formula-box small{display:block;margin-top:5px;color:var(--dm);font-size:9px}
.emi-card>.btn{width:100%}
.pricing-card>p{margin:0 0 12px;color:var(--dm);font-size:11px}
.ai-price{display:block;margin-bottom:18px;color:var(--di);font-size:28px;letter-spacing:-.03em}
.pricing-lines{border:1px solid var(--dl);border-radius:13px;overflow:hidden}
.pricing-lines div{display:flex;justify-content:space-between;gap:15px;padding:13px;border-bottom:1px solid var(--dl);font-size:10px;color:var(--dm)}
.pricing-lines div:last-child{border-bottom:0}
.pricing-lines strong{color:var(--di)}
.recalculate{width:100%;min-height:44px;margin-top:14px;border:1px solid var(--dl);border-radius:10px;background:#fff;color:var(--di);font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.recalculate:hover{border-color:var(--dg);background:#fffaf0}
.diaspora-cta{padding:40px 0;background:linear-gradient(135deg,var(--dn),var(--dn2));color:#fff}
.diaspora-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.diaspora-cta h2{margin:7px 0;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em}
.diaspora-cta p{margin:0;color:#c8d3e2;font-size:12px}
.diaspora-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.diaspora-modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:16px}
.diaspora-modal.show{display:flex}
.diaspora-modal-bg{position:absolute;inset:0;background:rgba(4,13,29,.72);backdrop-filter:blur(7px)}
.diaspora-modal-box{position:relative;width:min(880px,100%);max-height:94vh;overflow:auto;border-radius:21px;background:#fff;box-shadow:0 35px 100px rgba(0,0,0,.35);animation:diasporaIn .25s var(--de)}
@keyframes diasporaIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.diaspora-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 28px;border-bottom:1px solid var(--dl);background:linear-gradient(135deg,#fff,#fffaf0)}
.diaspora-modal-head span{display:block;color:#a87400;font-size:9px;font-weight:800;letter-spacing:.13em}
.diaspora-modal-head h2{margin:6px 0 5px;color:var(--di);font-size:23px}
.diaspora-modal-head p{margin:0;color:var(--dm);font-size:11px}
.diaspora-modal-head button{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--dl);border-radius:11px;background:#fff;color:var(--di);font-size:17px;cursor:pointer}
.diaspora-modal-head button:hover{transform:rotate(90deg);border-color:#eac35d;background:#fff7df}
#diasporaForm{padding:23px 28px 26px}
.diaspora-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.diaspora-fields label{display:flex;flex-direction:column;gap:7px;color:#465266;font-size:11px;font-weight:700}
.diaspora-fields b{color:#c52525}
.diaspora-fields .wide{grid-column:1/-1}
.diaspora-fields input,.diaspora-fields select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--dl);border-radius:10px;background:#fff;color:var(--di);font:inherit;font-size:13px}
.diaspora-fields input:focus,.diaspora-fields select:focus{outline:none;border-color:var(--dg);box-shadow:0 0 0 3px rgba(242,179,0,.12)}
.passport-field{padding:13px;border:1px dashed #d8b85c;border-radius:12px;background:#fffaf0}
.passport-field input{background:#fff}
.passport-field small{color:#8a7441;font-size:9px;font-weight:500}
.diaspora-notice{display:flex;gap:10px;margin-top:17px;padding:13px 14px;border:1px solid #f0ddaa;border-radius:12px;background:#fffaf0;color:#715d26;font-size:10px;line-height:1.65}
.diaspora-notice i{color:#b68100;margin-top:2px}
.diaspora-notice p{margin:0}
.diaspora-actions-form{display:flex;justify-content:flex-end;gap:10px;margin-top:17px}
.diaspora-cancel{min-height:46px;padding:0 20px;border:1px solid var(--dl);border-radius:11px;background:#fff;color:#536174;font-size:11px;font-weight:800;cursor:pointer}
.diaspora-cancel:hover{background:#f7f9fb}
.diaspora-response{min-height:18px;margin:12px 0 0;text-align:center;font-size:11px;font-weight:600}
.diaspora-response.success{color:#16824a}
.diaspora-response.error{color:#c52525}

/* ====== RESPONSIVE: TABLETS & SMALL LAPTOPS ====== */
@media (max-width: 992px) {
  .diaspora-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .diaspora-hero-card {
    max-width: 500px;
  }
  .diaspora-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .calculator-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .emi-fields {
    grid-template-columns: 1fr;
  }
}

/* ====== RESPONSIVE: TABLETS & LARGE PHONES ====== */
@media (max-width: 768px) {
  /* Hero */
  .diaspora-hero {
    height: auto;
    min-height: 0;
    padding: 40px 0;
  }
  .diaspora-hero-inner {
    gap: 24px;
  }
  .diaspora-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .diaspora-hero-copy > p {
    font-size: 12px;
  }
  .diaspora-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .diaspora-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .diaspora-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 14px;
  }
  .diaspora-stats div {
    padding-right: 0;
  }
  .diaspora-hero-card {
    padding: 20px;
  }
  .diaspora-hero-card > strong {
    font-size: 22px;
  }
  .diaspora-hero-card p {
    font-size: 10px;
  }

  /* Steps – two columns */
  .diaspora-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .diaspora-steps article {
    padding: 20px 16px;
  }
  .diaspora-steps b {
    font-size: 20px;
    right: 10px;
    top: 10px;
  }
  .diaspora-steps article > div {
    width: 42px;
    height: 42px;
    font-size: 15px;
    margin-bottom: 12px;
  }
  .diaspora-steps h3 {
    font-size: 12px;
  }
  .diaspora-steps p {
    font-size: 9px;
  }

  /* Calculator */
  .emi-card,
  .pricing-card {
    padding: 18px;
  }
  .calculator-title h3 {
    font-size: 15px;
  }
  .emi-result strong {
    font-size: 22px;
  }
  .calc-actions {
    flex-direction: column;
  }
  .calc-actions .btn {
    width: 100%;
  }

  /* CTA */
  .diaspora-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .diaspora-cta-actions {
    width: 100%;
    justify-content: center;
  }
  .diaspora-cta-actions .btn {
    width: 100%;
  }

  /* Modal */
  .diaspora-modal-box {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .diaspora-modal-head {
    padding: 18px 20px;
  }
  #diasporaForm {
    padding: 18px 20px;
  }
  .diaspora-fields {
    grid-template-columns: 1fr; /* single column form */
  }
  .diaspora-fields .wide {
    grid-column: auto;
  }
  .diaspora-actions-form {
    flex-direction: column-reverse;
  }
  .diaspora-cancel,
  .diaspora-actions-form .btn {
    width: 100%;
  }
}

/* ====== RESPONSIVE: SMALL PHONES (<= 480px) ====== */
@media (max-width: 480px) {
  .diaspora-hero h1 {
    font-size: 1.8rem;
  }
  .diaspora-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .diaspora-stats strong {
    font-size: 15px;
  }
  .diaspora-stats span {
    font-size: 7px;
  }

  /* Steps – two columns but tighter */
  .diaspora-steps {
    gap: 8px;
  }
  .diaspora-steps article {
    padding: 16px 12px;
    border-radius: 14px;
  }
  .diaspora-steps b {
    font-size: 18px;
    right: 8px;
    top: 6px;
  }
  .diaspora-steps article > div {
    width: 36px;
    height: 36px;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .diaspora-steps h3 {
    font-size: 11px;
  }
  .diaspora-steps p {
    font-size: 8px;
    line-height: 1.5;
  }

  .emi-card,
  .pricing-card {
    padding: 14px;
  }
  .mpesa-presets {
    grid-template-columns: 1fr 1fr;
  }
}