:root {
  --green: #087a55;
  --green-dark: #075b43;
  --green-soft: #e9f6ef;
  --mint: #f4fbf7;
  --gold: #c69a45;
  --ink: #17382d;
  --muted: #71857c;
  --line: #e4eee8;
  --white: #fff;
  font-family: "Cairo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { height: 76px; max-width: 1120px; margin: auto; padding: 0 26px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--green-dark); font-size:21px; font-weight:800; letter-spacing:-.5px; }
.brand b { color:var(--gold); }
.brand-mark { width:38px; height:38px; border-radius:13px 13px 13px 4px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#0c9b6c,#07563f); font-weight:900; font-size:22px; box-shadow:0 6px 16px #087a5526; }
.top-note { color:#82958c; font-size:13px; font-weight:600; }
.hero { position:relative; overflow:hidden; text-align:center; padding:72px 20px 62px; background:linear-gradient(180deg,#f2faf5 0%,#fbfefc 100%); }
.hero:before,.hero:after { content:""; position:absolute; width:260px; height:260px; border:1px solid #dcefe3; border-radius:50%; opacity:.7; }
.hero:before { top:-155px; right:-80px; }
.hero:after { bottom:-205px; left:-70px; width:330px; height:330px; }
.hero-glow { position:absolute; width:340px; height:340px; border-radius:50%; background:#d8f1e3; filter:blur(75px); opacity:.45; left:calc(50% - 170px); top:40px; }
.eyebrow,.section-kicker { position:relative; display:inline-flex; align-items:center; gap:8px; color:var(--green); font-size:13px; font-weight:800; }
.eyebrow { padding:7px 15px; background:#e4f4e9; border-radius:30px; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:#2da879; box-shadow:0 0 0 4px #2da87920; }
.hero h1 { position:relative; margin:22px 0 12px; font-size:clamp(34px,5vw,54px); line-height:1.45; font-weight:900; letter-spacing:-1.8px; }
h1 em,h2 em { color:var(--green); font-style:normal; }
.hero-copy { position:relative; color:#71877c; font-size:16px; margin:0 auto 27px; }
.primary-btn { border:0; color:#fff; background:linear-gradient(135deg,#0a9064,#076448); border-radius:15px; padding:15px 25px; font-weight:800; box-shadow:0 9px 22px #087a552b; transition:transform .18s,box-shadow .18s,filter .18s; }
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 12px 25px #087a5538; filter:saturate(1.1); }
.primary-btn:active { transform:translateY(0); }
.hero-btn { position:relative; min-width:265px; display:inline-flex; align-items:center; justify-content:center; gap:13px; font-size:17px; }
.btn-icon { color:#f1d99e; font-size:20px; }
.btn-arrow { opacity:.75; font-size:20px; }
.hero-footnote { position:relative; margin-top:17px; color:#81948a; font-size:12px; }
.lock { color:var(--green); font-weight:900; margin-left:4px; }
.how-strip { max-width:850px; margin:0 auto; padding:24px 20px; display:flex; align-items:center; justify-content:center; gap:25px; border-bottom:1px solid var(--line); }
.how-item { display:flex; align-items:center; gap:9px; color:#526b5f; font-size:13px; font-weight:700; white-space:nowrap; }
.how-num { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#edf7f0; color:var(--green); font-weight:900; }
.how-divider { width:28px; height:1px; background:#dce9e0; }
.add-section { max-width:760px; margin:0 auto; padding:75px 22px 85px; }
.section-heading { text-align:center; margin-bottom:25px; }
.section-heading h2 { margin:7px 0 5px; font-size:31px; font-weight:900; }
.section-heading p { margin:0; color:var(--muted); font-size:14px; }
.add-card { padding:27px; background:#fff; border:1px solid #e4eee8; border-radius:22px; box-shadow:0 12px 40px #143e2810; }
.add-card label { display:block; margin-bottom:10px; font-size:13px; font-weight:800; color:#365c49; }
.add-card textarea { width:100%; resize:vertical; min-height:118px; padding:15px 16px; border:1px solid #dce9e0; border-radius:13px; outline:none; color:var(--ink); background:#fbfefc; font-size:14px; direction:rtl; transition:border .2s,box-shadow .2s; }
.add-card textarea:focus { border-color:#5ab38b; box-shadow:0 0 0 4px #087a5512; }
.add-card textarea::placeholder { color:#a1b1a8; }
.input-hint { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:#91a198; font-size:11px; }
.submit-btn { width:100%; margin-top:19px; display:flex; justify-content:center; align-items:center; gap:10px; font-size:15px; }
.submit-btn span { font-size:21px; line-height:1; }
.intention { text-align:center; color:#71877c; font-size:12px; line-height:1.9; margin:18px 0 0; }
.form-message { min-height:0; text-align:center; font-size:13px; font-weight:700; margin-top:10px; }
.form-message.success { color:#087a55; }
.form-message.error { color:#c24c4c; }
.footer { padding:35px 22px 25px; text-align:center; background:#f5faf6; border-top:1px solid #e7f0e9; }
.footer-brand { display:flex; justify-content:center; align-items:center; gap:9px; color:var(--green-dark); font-size:17px; }
.brand-mark.small { width:29px; height:29px; border-radius:10px 10px 10px 3px; font-size:17px; }
.footer-dua { color:#81948a; font-size:12px; margin:10px 0 25px; }
.stats-grid { max-width:850px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #e2eee5; border-radius:16px; background:#fff; overflow:hidden; }
.stat { padding:17px 8px; display:flex; flex-direction:column; gap:3px; border-left:1px solid #edf3ee; }
.stat:last-child { border-left:0; }
.stat strong { color:var(--green); font-size:24px; font-weight:900; }
.stat span { color:#81948a; font-size:11px; }
.independent { color:#9aa9a0; font-size:10px; margin:22px 0 5px; }
.copyright { color:#b1beb6; font-size:10px; margin:0; }
.modal { display:none; position:fixed; inset:0; z-index:20; align-items:center; justify-content:center; padding:18px; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:#0d281e99; backdrop-filter:blur(5px); }
.modal-card { position:relative; width:min(100%,420px); padding:34px 27px 27px; border-radius:25px; background:#fff; text-align:center; box-shadow:0 25px 80px #00190f40; animation:pop .22s ease-out; }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.close-btn { position:absolute; left:17px; top:12px; border:0; background:transparent; color:#91a198; font-size:28px; }
.modal-symbol { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 13px; border-radius:18px; background:#edf8f0; font-size:27px; }
.modal-card h2 { margin:5px 0 17px; font-size:21px; font-weight:900; }
.shown-code { padding:17px 12px; background:#f4faf6; border:1px dashed #b9d9c5; border-radius:13px; color:#075b43; font-family:ui-monospace,monospace; font-size:25px; font-weight:900; letter-spacing:1px; }
.remaining-text { color:#93a198; font-size:11px; margin:10px 0 17px; }
.modal-action,.secondary-btn { width:100%; }
.secondary-btn { margin-top:10px; padding:13px 18px; border:1px solid #dcebe1; border-radius:13px; background:#fff; color:var(--green); font-weight:800; }
.copy-feedback { min-height:18px; margin:10px 0 0; color:var(--green); font-size:12px; font-weight:700; }
.toast { position:fixed; z-index:30; bottom:20px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#17382d; color:#fff; padding:11px 17px; border-radius:12px; font-size:13px; box-shadow:0 8px 25px #00190f30; transition:.2s; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:650px) {
  .topbar { height:65px; padding:0 17px; }
  .brand { font-size:18px; }
  .top-note { font-size:11px; }
  .hero { padding:57px 17px 49px; }
  .hero h1 { font-size:35px; letter-spacing:-1px; }
  .hero-copy { font-size:14px; }
  .how-strip { gap:10px; padding:19px 10px; }
  .how-item { gap:6px; font-size:10px; }
  .how-num { width:24px; height:24px; font-size:11px; }
  .how-divider { width:12px; }
  .add-section { padding:57px 16px 65px; }
  .section-heading h2 { font-size:27px; }
  .add-card { padding:19px 15px; border-radius:17px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-left:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid #edf3ee; }
  .stat strong { font-size:21px; }
  .modal-card { padding:31px 19px 22px; }
}