/* ===============================
   JOUDI — How It Works page
   =============================== */
.how-page{background:var(--ivory)}

.how-hero{
  padding:54px 0 30px;
  background:
    radial-gradient(circle at 20% 45%,rgba(30,154,151,.08),transparent 24%),
    radial-gradient(circle at 82% 28%,rgba(123,111,198,.08),transparent 24%);
}
.how-hero-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center
}
.how-hero-copy .eyebrow{
  color:var(--teal);font-size:.82rem;font-weight:900;margin-bottom:10px;display:inline-block
}
.how-hero-copy h1{
  margin:0 0 14px;color:var(--navy);
  font-family:"Alexandria","Noto Sans Arabic",Tahoma,sans-serif;
  font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.14;letter-spacing:-.04em
}
.how-hero-copy h1 span{color:var(--teal)}
.how-hero-copy p{margin:0;color:#535B74;font-size:1.08rem;max-width:650px}
.how-mini{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px
}
.how-mini-card{
  background:#fff;border:1px solid var(--line);border-radius:17px;
  padding:13px 12px;display:flex;gap:9px;align-items:center
}
.how-mini-card img{width:28px;height:28px}
.how-mini-card b{display:block;color:var(--navy);font-size:.82rem}
.how-mini-card span{display:block;color:var(--muted);font-size:.7rem}

.how-hero-art{
  position:relative;min-height:480px;display:grid;place-items:center
}
.how-hero-photo{
  width:430px;height:430px;border-radius:50%;
  object-fit:cover;object-position:center;
  box-shadow:var(--shadow);border:12px solid rgba(255,255,255,.88)
}
.how-orbit{
  position:absolute;width:500px;height:320px;border:1px dashed rgba(30,154,151,.32);
  border-radius:50%;transform:rotate(-8deg)
}
.how-float{
  position:absolute;min-width:155px;padding:12px 14px;border-radius:18px;
  background:rgba(255,255,255,.95);border:1px solid rgba(17,26,60,.08);
  box-shadow:var(--shadow);display:flex;align-items:center;gap:10px
}
.how-float img{width:28px;height:28px}
.how-float b{display:block;color:var(--navy);font-size:.84rem}
.how-float span{display:block;color:var(--muted);font-size:.7rem}
.hf1{top:50px;right:8px}.hf2{left:0;top:205px}.hf3{right:26px;bottom:24px}

/* Steps */
.journey{padding:64px 0 28px}
.journey-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative
}
.journey-grid:before{
  content:"";position:absolute;top:39px;right:8%;left:8%;height:1px;
  border-top:1px dashed rgba(123,111,198,.36);z-index:0
}
.step{
  position:relative;z-index:1;background:#fff;border:1px solid rgba(17,26,60,.08);
  border-radius:22px;padding:18px 14px 20px;text-align:center;box-shadow:var(--shadow)
}
.step-num{
  width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;margin:-31px auto 10px;font-weight:900;font-size:.8rem
}
.step-icon{
  width:58px;height:58px;border-radius:20px;background:#F2F0FA;
  display:grid;place-items:center;margin:0 auto 12px
}
.step-icon img{width:31px;height:31px}
.step h3{margin:0 0 6px;color:var(--navy);font-size:.95rem}
.step p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.65}

/* tech */
.tech-section{padding:66px 0}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tech-card{
  background:#fff;border:1px solid rgba(17,26,60,.09);border-radius:26px;
  padding:26px;box-shadow:var(--shadow);min-height:235px
}
.tech-card .tech-icon{
  width:58px;height:58px;border-radius:18px;background:#F0F8F7;
  display:grid;place-items:center;margin-bottom:16px
}
.tech-card:nth-child(2) .tech-icon{background:#F1EEFA}
.tech-card:nth-child(3) .tech-icon{background:#F5F6FA}
.tech-card img{width:34px;height:34px}
.tech-card h3{margin:0 0 8px;color:var(--navy);font-size:1.15rem}
.tech-card p{margin:0;color:#5E657B;font-size:.86rem}
.tech-card a{display:inline-block;margin-top:16px;color:var(--teal);font-weight:800;font-size:.82rem}

/* outcomes */
.outcomes{padding:64px 0;background:#FFFDFC}
.outcome-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.outcome{
  padding:22px 16px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:22px
}
.outcome-icon{
  width:50px;height:50px;border-radius:17px;background:#F2F0FA;
  display:grid;place-items:center;margin:0 auto 12px
}
.outcome-icon img{width:27px;height:27px}
.outcome b{display:block;color:var(--navy);font-size:.9rem}
.outcome span{display:block;color:var(--muted);font-size:.74rem;margin-top:4px}

/* privacy */
.how-privacy{
  padding:64px 0
}
.privacy-how-panel{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;
  background:linear-gradient(120deg,#EDF8F7,#F7F4FC);
  border:1px solid var(--line);border-radius:30px;padding:30px
}
.privacy-how-copy h2{
  margin:0 0 8px;color:var(--navy);
  font-family:"Alexandria","Noto Sans Arabic",sans-serif;font-size:1.8rem
}
.privacy-how-copy p{margin:0;color:var(--muted)}
.privacy-how-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.privacy-how-item{
  background:#fff;border:1px solid rgba(17,26,60,.08);border-radius:18px;padding:15px
}
.privacy-how-item b{display:block;color:var(--navy);font-size:.86rem}
.privacy-how-item span{display:block;color:var(--muted);font-size:.74rem;margin-top:3px}

/* FAQ */
.how-faq{padding:64px 0}
.faq-wrap{max-width:900px;margin:auto;display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.faq-item button{
  width:100%;padding:17px 18px;border:0;background:#fff;color:var(--navy);
  display:flex;justify-content:space-between;gap:14px;text-align:right;font-weight:800;cursor:pointer
}
.faq-item .answer{padding:0 18px 17px;color:var(--muted);font-size:.84rem}
.faq-item .answer[hidden]{display:none}

/* CTA */
.how-cta{
  margin:0 auto 26px;min-height:185px;border-radius:30px;overflow:hidden;
  background:linear-gradient(100deg,#35B0AE,#6E67C7 58%,#7E70CF);
  color:#fff;display:grid;grid-template-columns:1fr 1.1fr;align-items:center
}
.how-cta-image{
  height:100%;min-height:185px;background:url("../images/cta-visual.jpg") center/cover no-repeat
}
.how-cta-copy{padding:32px}
.how-cta-copy h2{
  margin:0 0 7px;font-family:"Alexandria","Noto Sans Arabic",sans-serif;font-size:2rem
}
.how-cta-copy p{margin:0 0 16px;color:#EEEFFF}
.how-cta-copy .btn{background:#fff;color:var(--navy)}

@media(max-width:1050px){
  .journey-grid{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .journey-grid:before{display:none}
  .outcome-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .how-hero-grid,.privacy-how-panel{grid-template-columns:1fr}
  .how-hero-copy{text-align:center}
  .how-hero-copy p{margin-inline:auto}
  .how-mini{max-width:680px;margin-inline:auto;margin-top:24px}
  .how-hero-art{order:2}
  .tech-grid{grid-template-columns:1fr}
  .how-cta{grid-template-columns:1fr}
}
@media(max-width:620px){
  .how-hero{padding-top:28px}
  .how-hero-copy h1{font-size:2.45rem}
  .how-mini{grid-template-columns:1fr}
  .how-hero-art{min-height:330px}
  .how-hero-photo{width:280px;height:280px}
  .how-orbit{width:330px;height:220px}
  .how-float{transform:scale(.82)}
  .journey-grid{grid-template-columns:1fr 1fr}
  .outcome-grid{grid-template-columns:1fr 1fr}
  .privacy-how-list{grid-template-columns:1fr}
}
@media(max-width:420px){
  .journey-grid,.outcome-grid{grid-template-columns:1fr}
}