:root{
  --primary:#28B67A;
  --soft:#E6F6EF;
  --blue:#1E3A8F;
  --ink:#151A1F;
  --gray:#7C8894;
  --paper:#F4F2EC;
  --gold:#E8B800;
  --white:#FFFFFF;
  --line:#E4E1D8;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--paper);
  color:var(--ink);
  direction:rtl;
}
h1,h2,h3,h4,p,ul,figure{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.num{font-family:'Poppins',sans-serif;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(244,242,236,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;letter-spacing:0.5px;color:var(--ink);display:flex;align-items:center;gap:10px;}
.nav-links{display:flex;gap:32px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink);opacity:0.75;transition:opacity .2s;}
.nav-links a:hover{opacity:1;color:var(--primary);}
.nav-toggle{display:none;background:none;border:none;}
@media (max-width:820px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:radial-gradient(circle at 25% 20%, #F5FAF4 0%, #E3F2E5 55%, #D9EEDD 100%);
  color:var(--ink);
  padding:120px 0 100px;
  overflow:hidden;
}
.hero .container{position:relative;z-index:2;max-width:820px;text-align:center;margin:0 auto;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:0.5px;margin-bottom:26px;
  background:var(--white);border:1.5px solid rgba(40,182,122,0.35);
  padding:10px 20px;border-radius:999px;
}
.hero-eyebrow .dot{width:20px;height:20px;border-radius:50%;background:conic-gradient(from 180deg,var(--gold),var(--primary));display:inline-block;}
.hero h1{
  font-size:clamp(28px,4.2vw,46px);
  font-weight:800;line-height:1.3;margin:0 0 22px;color:var(--ink);
}
.hero p.sub{
  font-size:18px;color:var(--gray);max-width:560px;margin:0 auto 40px;line-height:1.7;
}
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.badge{
  font-size:13px;font-weight:600;color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  padding:9px 18px;border-radius:999px;
}

/* ---------- brand strip ---------- */
.section{padding:88px 0;}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.eyebrow{
  font-size:13px;font-weight:700;color:var(--primary);
  letter-spacing:1px;margin-bottom:12px;display:block;
}
.section-head h2{font-size:clamp(22px,2.8vw,32px);font-weight:800;margin:0 0 14px;line-height:1.4;}
.section-head p{font-size:16px;color:var(--gray);line-height:1.8;margin:0;}

.chip-grid{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:56px;
}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:14px 20px;font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);}

.served-label{
  text-align:center;font-size:13px;font-weight:700;color:var(--gray);
  letter-spacing:2px;margin-bottom:0;
}

/* ---------- prototype / segments merged section ---------- */
.proto-section{
  background:radial-gradient(circle at 75% 25%, #1B2A22 0%, var(--ink) 60%, #0E1712 100%);
  color:#fff;padding:96px 0;
}
.proto-section .section-head h2, .proto-section .section-head p.lead{color:#fff;}
.proto-section .section-head p.lead{color:#C6CDD2;font-size:16.5px;max-width:680px;margin:0 auto;line-height:1.9;}

.proto-grid{
  display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;margin-top:56px;
}
@media (max-width:960px){
  .proto-grid{grid-template-columns:1fr;}
}

/* left: segments */
.segments-col h3{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:1px;margin:0 0 20px;}
.segment-btn{
  width:100%;text-align:right;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;padding:22px 22px;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;
  transition:all .25s ease;
}
.segment-btn:hover{background:rgba(40,182,122,0.12);border-color:var(--primary);transform:translateY(-2px);}
.segment-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(232,184,0,0.12);
}
.segment-text{flex:1;}
.segment-name{font-size:16.5px;font-weight:700;color:#fff;margin-bottom:4px;}
.segment-desc{font-size:13px;color:#AEB6BC;line-height:1.7;}
.segment-cta{font-size:12px;font-weight:700;color:var(--primary);white-space:nowrap;flex-shrink:0;}

/* ---- reusable full phone-screen static mockup ---- */
.phone-mock{
  width:100%;max-width:158px;aspect-ratio:9/18.5;
  background:var(--paper);border-radius:20px;padding:0;
  border:4px solid #1C1F22;box-shadow:0 10px 24px rgba(0,0,0,0.32);
  overflow:hidden;display:flex;flex-direction:column;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:12px;
}
.pm-status{display:flex;justify-content:space-between;padding:8px 11px 2px;font-size:8.5px;font-weight:600;color:var(--ink);font-family:'Poppins',sans-serif;}
.pm-body{flex:1;overflow:hidden;padding:5px 10px 6px;display:flex;flex-direction:column;}
.pm-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.pm-hi{font-size:7.5px;color:var(--gray);}
.pm-name{font-size:11px;font-weight:700;color:var(--ink);}
.pm-bell{width:20px;height:20px;border-radius:50%;background:var(--soft);flex-shrink:0;}
.pm-suggestion{background:var(--ink);color:#fff;border-radius:10px;padding:8px;margin-bottom:8px;}
.pm-suggestion .tag{display:inline-flex;align-items:center;gap:3px;font-size:7px;font-weight:700;background:var(--gold);color:#3A2E00;padding:2px 6px;border-radius:999px;margin-bottom:5px;}
.pm-suggestion h4{font-size:9.5px;font-weight:700;margin:0 0 3px;}
.pm-suggestion p{font-size:7.5px;line-height:1.45;color:#D7DBDD;margin:0;}
.pm-section-label{font-size:8px;font-weight:700;color:var(--ink);margin:3px 0 5px;}
.pm-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px;margin-bottom:5px;}
.pm-row{display:flex;align-items:center;gap:5px;}
.pm-avatar{width:19px;height:19px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#0E7A50;flex-shrink:0;}
.pm-row-text{flex:1;min-width:0;}
.pm-row-name{font-size:8.5px;font-weight:700;color:var(--ink);}
.pm-row-sub{font-size:7px;color:var(--gray);margin-top:1px;}
.pm-pct{font-size:8px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--primary);}
.pm-bar{background:#EDEBE4;border-radius:999px;height:3px;overflow:hidden;margin-top:4px;}
.pm-bar span{display:block;height:100%;background:var(--primary);border-radius:999px;}
.pm-nav{display:flex;border-top:1px solid var(--line);background:#fff;padding:5px 3px 6px;}
.pm-nav div{flex:1;text-align:center;font-size:6.5px;font-weight:600;color:var(--gray);}
.pm-nav div.active{color:var(--primary);font-weight:700;}
.pm-nav svg{display:block;margin:0 auto 2px;width:14px;height:14px;}
.pm-nav div span{display:block;font-size:12px;margin-bottom:2px;}

.template-cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* modal (static image-style, no interaction) */
.proto-modal-overlay{
  position:fixed;inset:0;background:rgba(10,12,10,0.8);
  display:none;align-items:center;justify-content:center;z-index:1000;
  padding:20px;
}
.proto-modal-overlay.open{display:flex;}
.proto-modal-inner{position:relative;}
.proto-close{
  position:absolute;top:-14px;left:-14px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:none;color:var(--ink);font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,0.3);z-index:5;
}
.modal-mock{max-width:210px;pointer-events:none;}

/* ---------- vendor section ---------- */
.vendor-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
@media (max-width:860px){.vendor-wrap{grid-template-columns:1fr;}}
.vendor-points{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.vendor-points li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;}
.vendor-points li::before{content:"✓";width:26px;height:26px;border-radius:50%;background:var(--soft);color:#0E7A50;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}

.vendor-form{
  background:var(--white);border:1px solid var(--line);border-radius:22px;padding:32px;
}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink);}
.form-row input, .form-row select{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  font-family:inherit;font-size:14px;background:var(--paper);
}
.btn-primary{
  width:100%;background:var(--primary);color:#fff;border:none;border-radius:12px;
  padding:15px;font-size:15px;font-weight:700;margin-top:8px;
}
.form-success{
  display:none;background:var(--soft);color:#0E7A50;border-radius:12px;padding:14px;
  font-size:13.5px;font-weight:600;margin-top:14px;text-align:center;
}
.form-success.show{display:block;}

/* ---------- investor section ---------- */
.investor-section{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.investor-wrap{max-width:760px;margin:0 auto;text-align:center;}
.investor-wrap p.lead{font-size:16px;color:var(--gray);line-height:1.9;margin:18px auto 32px;max-width:600px;}
.investor-points{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:36px;
}
.investor-points span{
  font-size:13.5px;font-weight:600;background:var(--soft);color:#0E7A50;
  padding:9px 16px;border-radius:999px;
}
.founder{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:24px;}
.founder span{display:block;font-size:13px;font-weight:500;color:var(--gray);margin-top:4px;}
.investor-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-outline{
  border:1.5px solid var(--ink);color:var(--ink);border-radius:12px;padding:13px 26px;
  font-size:14.5px;font-weight:700;background:none;
}
.btn-solid{
  background:var(--primary);color:#fff;border:none;border-radius:12px;padding:13px 26px;
  font-size:14.5px;font-weight:700;
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#B7C0C6;padding:44px 0;}
footer .container{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
footer .f-logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:#fff;}
footer .f-links{display:flex;flex-wrap:wrap;gap:22px;list-style:none;padding:0;margin:0;font-size:13.5px;}
footer .f-links a{opacity:.8;}
footer .copyright{font-size:12.5px;opacity:.55;}