/* ============ Tokens ============ */
:root{
  --bg:#F4F7F4; --surface:#FFFFFF; --surface-2:#EDF2ED; --surface-warm:#F8F3E9;
  --ink:#112621; --ink-soft:#2C403A; --muted:#5E6F68;
  --brand:#14584A; --brand-700:#0E4439; --brand-100:#DCEAE4; --brand-50:#EAF2EE;
  --accent:#BC863A; --accent-soft:#E7D2A8; --accent-50:#FAF3E6;
  --line:#DDE7E1; --line-soft:#E9EFEA;
  --shadow-sm:0 1px 2px rgba(17,38,33,.05), 0 1px 3px rgba(17,38,33,.06);
  --shadow:0 10px 30px -12px rgba(17,38,33,.18);
  --shadow-lg:0 30px 60px -20px rgba(14,68,57,.30);
  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:28px;
  --maxw:1180px;
  --f-display:"El Messiri", system-ui, sans-serif;
  --f-body:"IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.25; margin:0; color:var(--ink)}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block}
ul{margin:0; padding:0; list-style:none}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
.ico{width:24px; height:24px; flex:none}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  padding:.78em 1.4em; border-radius:var(--r-sm); border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn .ico{width:19px; height:19px}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-700); transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2); border-color:#cdd9d2; transform:translateY(-1px)}
.btn-accent{background:transparent; color:var(--brand-700); border-color:var(--accent-soft)}
.btn-accent:hover{background:var(--accent-50)}
.btn-lg{padding:.92em 1.7em; font-size:1.06rem}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--brand)}
.link-arrow .ico{width:18px;height:18px; transition:transform .18s ease}
.link-arrow:hover .ico{transform:translateX(-4px)}

:focus-visible{outline:3px solid #2f8f78; outline-offset:2px; border-radius:6px}

/* ============ Eyebrow / section heads ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; color:var(--accent);
  font-weight:600; font-size:.82rem; letter-spacing:.02em; margin-bottom:1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.section{padding-block:clamp(56px,8vw,104px)}
.section-head{max-width:640px; margin-bottom:clamp(34px,5vw,52px)}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem)}
.section-head p{color:var(--muted); margin-top:.85rem; font-size:1.06rem}
.center{text-align:center; margin-inline:auto}

/* ============ Header / Nav ============ */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(244,247,244,.82);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line-soft);
}
.nav-wrap{display:flex; align-items:center; gap:22px; height:74px}
.brand{display:flex; align-items:center; gap:.6rem; flex:none}
.brand .seal{width:38px; height:38px}
.brand-name{font-family:var(--f-display); font-weight:700; font-size:1.4rem; color:var(--ink); line-height:1}
.brand-desc{font-size:.72rem; color:var(--muted); display:block; margin-top:2px}
.brand-text{display:flex; flex-direction:column}
.main-nav{display:flex; align-items:center; gap:6px; margin-inline-start:auto}
.nav-list{display:flex; align-items:center; gap:2px}
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .8rem;
  border-radius:9px; font-weight:500; font-size:.97rem; color:var(--ink-soft);
  background:none; border:none; cursor:pointer; font-family:var(--f-body); transition:background .15s,color .15s;
}
.nav-link:hover{background:var(--surface-2); color:var(--ink)}
.nav-link.is-active{color:var(--brand); font-weight:600}
.nav-link .chev{width:15px; height:15px; transition:transform .2s ease; opacity:.7}
.has-menu{position:relative}
.has-menu:hover .nav-link .chev{transform:rotate(180deg)}
.dropdown{
  position:absolute; inset-inline-start:0; top:calc(100% + 8px); min-width:248px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:9px;
  font-size:.95rem; color:var(--ink-soft); transition:background .14s, color .14s;
}
.dropdown a .ico{width:18px; height:18px; color:var(--brand)}
.dropdown a:hover{background:var(--brand-50); color:var(--brand-700)}
.nav-cta{margin-inline-start:8px}
.nav-toggle{display:none; flex:none; width:44px; height:44px; border:1px solid var(--line);
  background:var(--surface); border-radius:11px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle svg{width:22px; height:22px}

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden; padding-top:clamp(48px,7vw,82px); padding-bottom:clamp(56px,8vw,96px)}
.hero::before{
  content:""; position:absolute; inset-block-start:-220px; inset-inline-start:-160px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(20,88,74,.10), rgba(20,88,74,0) 65%); z-index:0;
}
.hero::after{
  content:""; position:absolute; inset-block-end:-180px; inset-inline-end:-140px;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(188,134,58,.10), rgba(188,134,58,0) 65%); z-index:0;
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.35rem); letter-spacing:-.01em}
.hero h1 .hl{color:var(--brand); position:relative; white-space:nowrap}
.hero h1 .hl::after{content:""; position:absolute; inset-inline:0; bottom:.06em; height:.16em; background:var(--accent-soft); border-radius:3px; z-index:-1}
.hero-sub{color:var(--ink-soft); font-size:1.12rem; margin-top:1.25rem; max-width:34ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; align-items:center}
.hero-trust{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.1rem}
.trust-chip{
  display:inline-flex; align-items:center; gap:.45rem; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; font-size:.85rem; color:var(--ink-soft);
}
.trust-chip .ico{width:16px; height:16px; color:var(--brand)}

/* ---- Membership card visual ---- */
.card-stage{position:relative; display:flex; justify-content:center; align-items:center; min-height:360px; perspective:1400px}
.card-stack{position:absolute; width:min(390px,82vw); aspect-ratio:1.586; border-radius:20px;
  background:linear-gradient(135deg,#e9f0ec,#dde8e2); border:1px solid var(--line);
  transform:rotate(-7deg) translate(14px,18px); box-shadow:var(--shadow); opacity:.85}
.mcard{
  position:relative; width:min(390px,82vw); aspect-ratio:1.586; border-radius:20px; z-index:2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(188,134,58,.10), rgba(188,134,58,0) 42%),
    linear-gradient(150deg,#ffffff 0%,#f3f8f5 60%, #eaf2ed 100%);
  border:1px solid #e2ece6; box-shadow:var(--shadow-lg);
  padding:18px 20px; color:var(--ink); overflow:hidden;
  transform:rotate(2deg); transition:transform .4s ease;
}
.card-stage:hover .mcard{transform:rotate(0deg) translateY(-4px)}
.mcard .guilloche{position:absolute; inset:0; opacity:.5; z-index:0; pointer-events:none}
.mcard-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1}
.mcard-org{display:flex; align-items:center; gap:.5rem}
.mcard-org .seal{width:30px; height:30px}
.mcard-org b{font-family:var(--f-display); font-size:.95rem}
.mcard-org span{font-size:.66rem; color:var(--muted); display:block}
.mcard-status{display:inline-flex; align-items:center; gap:.3rem; background:var(--brand-50);
  color:var(--brand-700); border:1px solid var(--brand-100); font-size:.66rem; font-weight:600;
  padding:.22rem .5rem; border-radius:999px}
.mcard-status .dot{width:6px; height:6px; border-radius:50%; background:#1e9e7e; box-shadow:0 0 0 3px rgba(30,158,126,.18)}
.mcard-body{display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  position:absolute; inset-inline:20px; inset-block-end:18px; z-index:1}
.mcard-id{font-family:var(--f-mono); font-size:.7rem; color:var(--accent); letter-spacing:.06em}
.mcard-name{font-family:var(--f-display); font-weight:700; font-size:1.18rem; margin-top:2px}
.mcard-meta{display:flex; gap:1.1rem; margin-top:.5rem}
.mcard-meta div span{font-size:.62rem; color:var(--muted); display:block}
.mcard-meta div b{font-size:.82rem; font-weight:600}
.mcard-meta div b.mono{font-family:var(--f-mono); font-weight:500}
.qr-box{flex:none; width:74px; height:74px; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:6px; position:relative; overflow:hidden}
.qr-box svg{width:100%; height:100%}
.scanline{position:absolute; inset-inline:6px; height:2px; top:6px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent); opacity:.8;
  animation:scan 2.8s ease-in-out infinite}
.chip{position:absolute; width:30px; height:23px; border-radius:5px; inset-block-start:64px; inset-inline-end:20px;
  background:linear-gradient(135deg,#e4c98a,#c79a4e); z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.chip::before,.chip::after{content:""; position:absolute; inset-inline:5px; height:1px; background:rgba(120,84,30,.55)}
.chip::before{top:8px} .chip::after{top:15px}
/* floating verify seal */
.verify-seal{position:absolute; z-index:3; inset-block-start:-14px; inset-inline-start:-14px;
  width:78px; height:78px; filter:drop-shadow(0 8px 18px rgba(14,68,57,.25)); animation:floaty 5s ease-in-out infinite}

@keyframes scan{0%,100%{top:6px}50%{top:60px}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(-3deg)}}

/* ============ Problem ============ */
.problem{background:var(--surface)}
.prob-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.prob-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.35rem; display:flex; gap:.85rem}
.prob-card .x{flex:none; width:34px; height:34px; border-radius:9px; background:#fbeceb; color:#c2563f;
  display:flex; align-items:center; justify-content:center}
.prob-card .x .ico{width:18px; height:18px}
.prob-card p{font-size:.97rem; color:var(--ink-soft); line-height:1.65}

/* ============ Solution ============ */
.sol-flow{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,40px); align-items:stretch; margin-top:8px}
.sol-col{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm)}
.sol-col h3{font-size:1.2rem; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
.sol-col h3 .ico{width:22px;height:22px; color:var(--brand)}
.sol-col.admin h3 .ico{color:var(--accent)}
.sol-list li{display:flex; gap:.6rem; padding:.42rem 0; color:var(--ink-soft); font-size:.97rem; align-items:flex-start}
.sol-list .ico{width:18px; height:18px; color:var(--brand); flex:none; margin-top:.28rem}
.sol-col.admin .sol-list .ico{color:var(--accent)}
.sol-bridge{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:var(--muted)}
.sol-bridge .ring{width:64px; height:64px; border-radius:50%; background:var(--brand-50); border:1px solid var(--brand-100);
  display:flex; align-items:center; justify-content:center}
.sol-bridge .ring .ico{width:28px; height:28px; color:var(--brand)}
.sol-bridge small{font-size:.78rem; text-align:center; max-width:90px}

/* ============ How it works ============ */
.how{background:linear-gradient(180deg,var(--brand-700),var(--brand)); color:#eaf3ef; position:relative; overflow:hidden}
.how .eyebrow{color:var(--accent-soft)}
.how .eyebrow::before{background:var(--accent-soft)}
.how h2{color:#fff}
.how .section-head p{color:#cfe2da}
.how::after{content:""; position:absolute; inset-block-start:-120px; inset-inline-start:-80px; width:360px; height:360px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
.steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:1.4rem; position:relative}
.step .num{font-family:var(--f-mono); font-weight:600; font-size:1.05rem; color:var(--accent-soft);
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); margin-bottom:1rem}
.step h3{color:#fff; font-size:1.12rem; margin-bottom:.4rem}
.step p{color:#cfe2da; font-size:.93rem; line-height:1.65}

/* ============ Features ============ */
.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; transition:transform .18s ease, box-shadow .2s ease, border-color .2s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfe0d8}
.feat .ic{width:46px; height:46px; border-radius:12px; background:var(--brand-50); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem}
.feat .ic .ico{width:24px; height:24px}
.feat:nth-child(3n-1) .ic{background:var(--accent-50); color:var(--accent)}
.feat h3{font-size:1.1rem; margin-bottom:.45rem}
.feat p{color:var(--muted); font-size:.94rem; line-height:1.6}

/* ============ Sectors ============ */
.sectors{background:var(--surface)}
.sector-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.sector{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem; background:var(--bg);
  overflow:hidden; transition:transform .18s, box-shadow .2s}
.sector:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.sector .badge{width:52px; height:52px; border-radius:14px; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem}
.sector h3{font-size:1.25rem; margin-bottom:.55rem}
.sector p{color:var(--muted); font-size:.96rem; margin-bottom:1.1rem}

/* ============ FAQ ============ */
.faq-wrap{max-width:820px; margin-inline:auto}
.faq{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:1.15rem 1.3rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .2s; color:var(--brand)}
.faq[open] summary .plus{transform:rotate(45deg); background:var(--brand-50)}
.faq .ans{padding:0 1.3rem 1.25rem; color:var(--ink-soft); font-size:.98rem; line-height:1.75}

/* ============ CTA band ============ */
.cta-band{padding-block:clamp(54px,7vw,92px)}
.cta-inner{background:linear-gradient(135deg,var(--brand-700),var(--brand)); color:#fff; border-radius:var(--r-xl);
  padding:clamp(34px,5vw,64px); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.cta-inner::before{content:""; position:absolute; inset-block-start:-90px; inset-inline-end:-60px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(188,134,58,.30),transparent 70%)}
.cta-inner h2{color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); position:relative}
.cta-inner p{color:#d4e6df; max-width:46ch; margin:1rem auto 0; position:relative}
.cta-actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem; position:relative}
.cta-inner .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28)}
.cta-inner .btn-ghost:hover{background:rgba(255,255,255,.18)}
.cta-inner .btn-primary{background:#fff; color:var(--brand-700)}
.cta-inner .btn-primary:hover{background:#f1faf6}

/* ============ Footer ============ */
.site-footer{background:#0c211c; color:#bcccc5; padding-block:clamp(48px,6vw,72px) 28px}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-desc{color:#8ba59b}
.foot-brand p{color:#9fb3ab; font-size:.95rem; margin-top:1rem; max-width:34ch; line-height:1.7}
.foot-col h4{color:#fff; font-size:1rem; margin-bottom:1rem; font-family:var(--f-display)}
.foot-col a{display:block; color:#9fb3ab; font-size:.93rem; padding:.32rem 0; transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:#7f968d; font-size:.85rem}
.foot-bottom .seal{width:24px;height:24px; opacity:.85}
.foot-contact{margin-top:1.4rem; display:flex; flex-direction:column; gap:.55rem}
.foot-contact a{display:inline-flex; align-items:center; gap:.6rem; color:#cfe0d8; font-size:.95rem; width:fit-content; transition:color .15s}
.foot-contact a:hover{color:#fff}
.foot-contact a .ic{flex:none; width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#dcb878}
.foot-contact a .ic .ico{width:18px; height:18px}
.foot-contact a .num{font-family:var(--f-mono); direction:ltr; unicode-bidi:embed}

/* ============ Reveal ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}

/* ============ Responsive ============ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .card-stage{order:2; min-height:300px}
  .hero-sub{max-width:48ch}
  .steps{grid-template-columns:1fr}
  .sol-flow{grid-template-columns:1fr; gap:20px}
  .sol-bridge{flex-direction:row; gap:1rem}
  .sol-bridge .ring{transform:rotate(90deg)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed; inset-block-start:74px; inset-inline:0; inset-block-end:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--surface); border-top:1px solid var(--line);
    padding:14px 18px 30px; overflow-y:auto; transform:translateX(100%); transition:transform .28s ease;
    margin-inline-start:0;
  }
  body.nav-open .main-nav{transform:translateX(0)}
  .nav-list{flex-direction:column; align-items:stretch; gap:2px; width:100%}
  .nav-link{width:100%; justify-content:space-between; padding:.85rem .6rem; font-size:1.05rem}
  .has-menu{display:flex; flex-direction:column}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none;
    background:var(--surface-2); border-radius:var(--r-sm); margin:2px 0 8px; padding:6px;
    max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding-block:0}
  .has-menu.open .dropdown{max-height:520px; padding:6px}
  .has-menu.open > .nav-link .chev{transform:rotate(180deg)}
  .nav-cta{margin:14px 0 0; width:100%; justify-content:center}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ===== shared inner-page components ===== */

.breadcrumb{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); margin-bottom:1.3rem; flex-wrap:wrap}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{opacity:.45}
.breadcrumb .cur{color:var(--ink-soft); font-weight:600}
.dropdown a[aria-current="page"]{background:var(--brand-50); color:var(--brand-700); font-weight:600}

.page-hero{position:relative; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--line-soft);
  padding-top:clamp(34px,5vw,58px); padding-bottom:clamp(36px,5vw,60px)}
.page-hero::before{content:""; position:absolute; inset-block-start:-200px; inset-inline-start:-140px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(20,88,74,.09),transparent 65%); z-index:0}
.page-hero > .container{position:relative; z-index:1}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.9rem); max-width:20ch; letter-spacing:-.01em}
.page-hero .lead{color:var(--ink-soft); font-size:1.12rem; margin-top:1.05rem; max-width:62ch}

.bg-surface{background:var(--surface)}
.bg-wash{background:var(--surface-2)}
.muted-lead{color:var(--muted); font-size:1.06rem; margin-top:.9rem; max-width:56ch; line-height:1.75}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center}
.split.narrow{grid-template-columns:1.05fr .95fr}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:30px} }

.chip-grid{display:flex; flex-wrap:wrap; gap:.6rem}
.chip-lg{display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.62rem 1.05rem; font-size:.95rem; color:var(--ink-soft)}
.chip-lg .ico{width:18px; height:18px; color:var(--brand)}

.lifecycle{display:flex; flex-wrap:wrap; gap:12px}
.life{flex:1 1 158px; min-width:150px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem 1.15rem; display:flex; flex-direction:column; gap:.25rem; position:relative}
.life .n{font-family:var(--f-mono); color:var(--accent); font-size:.82rem; font-weight:600}
.life b{font-family:var(--f-display); font-size:1.02rem; color:var(--ink)}
.life span.t{color:var(--muted); font-size:.86rem; line-height:1.55}

.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfe0d8}
.pillar .ic{width:46px; height:46px; border-radius:12px; background:var(--brand-50); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem}
.pillar .ic .ico{width:24px; height:24px}
.pillar:nth-child(2) .ic{background:var(--accent-50); color:var(--accent)}
.pillar h3{font-size:1.12rem; margin-bottom:.45rem}
.pillar p{color:var(--muted); font-size:.95rem; line-height:1.65}

.highlight{background:linear-gradient(135deg,var(--brand-50),var(--surface)); border:1px solid var(--brand-100);
  border-radius:var(--r-lg); padding:clamp(28px,4vw,46px); position:relative; overflow:hidden}
.highlight .mark{position:absolute; inset-block-start:-26px; inset-inline-start:-26px; width:120px; height:120px; opacity:.10}
.highlight p{font-family:var(--f-display); font-size:clamp(1.2rem,2.4vw,1.65rem); line-height:1.6; color:var(--ink);
  position:relative; z-index:1; max-width:48ch}
.highlight .mark .seal{width:120px; height:120px}

.glossary{display:grid; gap:12px}
.gloss{display:grid; grid-template-columns:220px 1fr; gap:1.3rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.2rem 1.4rem}
.gloss dt{font-family:var(--f-display); font-weight:700; font-size:1.06rem; color:var(--ink);
  display:flex; align-items:center; gap:.55rem}
.gloss dt .sd{width:9px; height:9px; border-radius:50%; flex:none}
.gloss dt .sd.green{background:#1e9e7e} .gloss dt .sd.amber{background:var(--accent)} .gloss dt .sd.grey{background:#9aa8a2}
.gloss dd{margin:0; color:var(--ink-soft); font-size:.97rem; line-height:1.7}
@media (max-width:600px){ .gloss{grid-template-columns:1fr; gap:.4rem} }


/* ---- payment flow visual ---- */
.pay-flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:0; position:relative}
.pay-flow::before{content:""; position:absolute; inset-block-start:38px; inset-inline:0; height:2px;
  background:repeating-linear-gradient(90deg,var(--brand) 0,var(--brand) 18px,transparent 18px,transparent 28px);
  z-index:0}
.pf-step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem;
  padding:0 10px; position:relative; z-index:1}
.pf-step .circle{width:76px; height:76px; border-radius:50%; background:var(--surface);
  border:2px solid var(--brand-100); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s}
.pf-step:hover .circle{border-color:var(--brand); box-shadow:0 0 0 6px var(--brand-50)}
.pf-step .circle .ico{width:28px; height:28px; color:var(--brand)}
.pf-step h4{font-size:.95rem; margin:0; color:var(--ink)}
.pf-step p{font-size:.82rem; color:var(--muted); margin:0; line-height:1.5}
@media(max-width:600px){.pay-flow::before{display:none} .pay-flow{gap:14px}}

/* ---- payment methods cards ---- */
.pm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.pm{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem; transition:transform .18s, box-shadow .2s, border-color .2s}
.pm:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfe0d8}
.pm .pm-ic{width:52px; height:52px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; margin-bottom:1.1rem}
.pm .pm-ic .ico{width:26px; height:26px}
.pm-a .pm-ic{background:var(--brand-50); color:var(--brand)}
.pm-b .pm-ic{background:var(--accent-50); color:var(--accent)}
.pm-c .pm-ic{background:#e8f0fb; color:#3b6fd4}
.pm h3{font-size:1.1rem; margin-bottom:.45rem}
.pm p{color:var(--muted); font-size:.95rem; line-height:1.65; margin-bottom:.9rem}
.pm ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem}
.pm ul li{display:flex; align-items:flex-start; gap:.45rem; font-size:.9rem; color:var(--ink-soft)}
.pm ul li .ico{width:16px; height:16px; color:var(--brand); flex:none; margin-top:.28rem}

/* ---- ledger preview ---- */
.ledger{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.ledger-head{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:0;
  background:var(--surface-2); border-bottom:1px solid var(--line); padding:.7rem 1.2rem;
  font-size:.82rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.ledger-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:0;
  border-bottom:1px solid var(--line-soft); padding:.8rem 1.2rem; align-items:center;
  transition:background .13s}
.ledger-row:last-child{border-bottom:none}
.ledger-row:hover{background:var(--brand-50)}
.lname{font-weight:600; font-size:.94rem; display:flex; flex-direction:column; gap:2px}
.lname span{font-size:.78rem; color:var(--muted); font-weight:400; font-family:var(--f-mono)}
.lamount{font-family:var(--f-mono); font-weight:600; font-size:.94rem; color:var(--ink)}
.ldate{font-size:.85rem; color:var(--muted); font-family:var(--f-mono)}
.lbadge{display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .65rem;
  border-radius:999px; font-size:.76rem; font-weight:600; width:fit-content}
.lb-green{background:#dcf0e8; color:#1a7a58}
.lb-amber{background:#fdf0dc; color:#996b10}
.lb-blue{background:#e0eafb; color:#2c5cbf}
@media(max-width:640px){
  .ledger-head{grid-template-columns:1fr 1fr}
  .ledger-head > *:nth-child(3),.ledger-head > *:nth-child(4){display:none}
  .ledger-row{grid-template-columns:1fr 1fr}
  .ledger-row > *:nth-child(3),.ledger-row > *:nth-child(4){display:none}
}

/* ---- receipt mockup ---- */
.receipt{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  max-width:400px; overflow:hidden; box-shadow:var(--shadow)}
.receipt-head{background:var(--brand); color:#fff; padding:1.2rem 1.4rem; text-align:center}
.receipt-head .seal{width:36px; height:36px; margin-inline:auto; margin-bottom:.5rem}
.receipt-head h4{font-size:1.05rem; color:#fff; margin:0 0 .2rem}
.receipt-head p{font-size:.8rem; color:rgba(255,255,255,.75); margin:0}
.receipt-body{padding:1.3rem 1.4rem}
.rrow{display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--line-soft); font-size:.9rem}
.rrow:last-child{border-bottom:none}
.rrow .lbl{color:var(--muted)} .rrow .val{font-weight:600}
.rrow .val.green{color:#1a8f6e} .rrow .val.mono{font-family:var(--f-mono)}
.receipt-footer{padding:.9rem 1.4rem; background:var(--brand-50); border-top:1px solid var(--brand-100);
  display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.82rem; color:var(--brand-700); font-weight:600}
.receipt-footer .ico{width:16px; height:16px}

/* ---- stats strip ---- */
.stats-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem}
.stat .s-label{font-size:.82rem; color:var(--muted); margin-bottom:.4rem}
.stat .s-val{font-family:var(--f-display); font-size:1.9rem; font-weight:700; color:var(--ink); line-height:1}
.stat .s-sub{font-size:.8rem; color:var(--muted); margin-top:.3rem}
.stat .s-val.green{color:var(--brand)} .stat .s-val.amber{color:var(--accent)}