/* صفحات المنصّة بهوية ZELV: pine · bone · sage + saffron، Playfair للعناوين، ونمط Z */
.pf{
  --serif:"Playfair Display","Noto Naskh Arabic",Georgia,serif;
  --sans:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --line:#e6e0d3; --stone:#7d827a;
  background:var(--paper);color:#161A18;font-family:var(--sans);
}
.pf .wrap{max-width:1200px}
.pf h1,.pf h2,.pf h3,.pf h4{font-family:var(--serif);color:var(--pine);letter-spacing:0}
.pf .eyebrow{font-family:"Inter",var(--sans);font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--stone);font-weight:600;margin:0}
.pf .eyebrow.light{color:var(--sage)}
.hide-sm{}

/* monogram pattern + four-colour band */
.mono{position:absolute;inset:0;pointer-events:none;opacity:.55;background-size:52px 52px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M14 16H34L14 38H34' fill='none' stroke='%23123f3b' stroke-width='2.4' transform='rotate(-16 24 26)'/%3E%3C/svg%3E")}
.spectrum{position:absolute;left:0;right:0;bottom:0;height:7px;display:flex;z-index:3}
.spectrum span{flex:1}
.spectrum span:nth-child(1){background:var(--saffron)}.spectrum span:nth-child(2){background:var(--clay)}
.spectrum span:nth-child(3){background:var(--plum)}.spectrum span:nth-child(4){background:var(--ocean)}

/* buttons */
.zbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:6px;
  font-weight:600;font-size:15px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .15s;cursor:pointer;white-space:nowrap}
.zbtn:active{transform:scale(.98)}
.zbtn.sm{min-height:38px;padding:0 16px;font-size:14px}
.zbtn.block{display:flex;width:100%}
.zbtn.bone{background:var(--bone);color:var(--pine)}.zbtn.bone:hover{background:#fff}
.zbtn.ghost{color:var(--bone);border-color:rgba(245,242,235,.4)}.zbtn.ghost:hover{border-color:var(--bone)}
.zbtn.pine{background:var(--pine);color:var(--bone)}.zbtn.pine:hover{background:var(--ever)}
.zbtn.line{color:var(--pine);border-color:var(--pine)}.zbtn.line:hover{background:var(--pine);color:var(--bone)}
.zbtn.ghost-d{color:var(--pine);border-color:var(--line);background:transparent}

/* header */
.pf-top{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.pf-bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.pf-brand{color:var(--pine);display:flex}
.wm{display:inline-flex;direction:ltr}
.wm svg{height:30px;width:auto;display:block}
.pf-nav{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.pf-nav form{margin:0}
.pf-nav > a:not(.zbtn){color:#161A18;position:relative}
.pf-nav > a:not(.zbtn)::after{content:"";position:absolute;inset-inline-start:0;bottom:-3px;width:0;height:1.5px;background:var(--saffron);transition:width .25s}
.pf-nav > a:not(.zbtn):hover::after{width:100%}

/* hero */
.z-hero{position:relative;background:var(--pine);color:var(--bone);overflow:hidden}
.z-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:84px;padding-bottom:92px}
.z-hero h1{color:var(--bone);font-weight:700;font-size:clamp(40px,5.6vw,74px);line-height:1.25;margin:16px 0 0}
.z-hero h1 em{font-style:italic;color:var(--sage);font-weight:600}
.z-hero .sub{margin:22px 0 0;max-width:30em;color:#cdd9d2;font-size:17px}
.z-hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.z-hero .fine{margin:16px 0 0;color:var(--sage);font-size:13px}
.z-hero-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;max-width:440px;justify-self:end;width:100%;background:var(--ever);
  display:flex;flex-direction:column;justify-content:space-between;padding:26px 24px 34px}
.z-hero-card .mono{opacity:.35}
.hc-stack{position:relative;z-index:2;display:grid;gap:10px;margin-top:8px}
.hc-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--paper);color:#161A18;border-radius:8px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hc-item .hc-ph{width:46px;height:46px;border-radius:6px;display:grid;place-items:center}
.hc-0 .hc-ph{background:var(--saffron)}.hc-1 .hc-ph{background:var(--clay)}.hc-2 .hc-ph{background:var(--ocean)}
.hc-item .ic{width:28px;height:28px;stroke:var(--bone);stroke-width:3;fill:none}
.hc-item b{display:block;font-size:14.5px;font-weight:600}.hc-item small{color:var(--stone);font-size:12.5px}
.hc-item em{font-style:normal;font-family:"Playfair Display",serif;font-size:18px;color:var(--pine)}
.hc-1{margin-inline-start:22px}.hc-2{margin-inline-end:22px}
.hc-order{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:var(--pine-deep);color:var(--bone);border-radius:30px;padding:8px 14px;font-size:13px;margin-top:6px}
.hc-order .dot{width:8px;height:8px;border-radius:50%;background:var(--saffron)}
.tagband{position:relative;z-index:2;background:rgba(8,40,37,.6);border-radius:6px;padding:12px 16px}
.tagband .k{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:2px;color:var(--sage)}
.tagband .t{font-family:var(--serif);font-size:22px;color:var(--bone);margin-top:2px}

/* marquee */
.z-strip{background:var(--bone);border-bottom:1px solid var(--line);overflow:hidden}
.z-strip .row{display:flex;width:max-content;gap:48px;padding:15px 0;white-space:nowrap;animation:z-slide 30s linear infinite;font-size:14px;color:var(--ever);font-weight:500}
.z-strip span{display:inline-flex;gap:48px}
.z-strip i{font-style:normal;color:var(--saffron)}
@keyframes z-slide{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* sections */
.z-sec{padding:84px 0}
.pf .z-sec.wrap{padding-left:20px;padding-right:20px}
.z-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px}
.z-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.3;margin:8px 0 0;font-weight:700}

.z-kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.z-kind{position:relative;overflow:hidden;border-radius:10px;min-height:300px;color:var(--bone);display:flex;align-items:flex-end;padding:24px}
.z-kind .mono{opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M14 16H34L14 38H34' fill='none' stroke='%23F5F2EB' stroke-width='2.4' transform='rotate(-16 24 26)'/%3E%3C/svg%3E")}
.z-kind.saffron{background:var(--saffron);color:#2d1d05}.z-kind.clay{background:var(--clay)}.z-kind.plum{background:var(--plum)}.z-kind.ocean{background:var(--ocean)}
.z-kind .kf{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:42%;stroke:currentColor;stroke-width:2;fill:none;opacity:.85;transition:transform .35s}
.z-kind:hover .kf{transform:translate(-50%,-56%)}
.z-kind .meta{position:relative;z-index:2}
.z-kind h3{color:inherit;font-size:24px;margin:0 0 4px}
.z-kind span{font-size:13.5px;opacity:.9}
.z-note{margin:18px 4px 0;color:var(--stone)}

.z-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px}
.z-feat .ic{width:34px;height:34px;stroke:var(--ever);stroke-width:2.2;fill:none;margin-bottom:12px}
.z-feat h4{font-size:19px;margin:0 0 6px}
.z-feat p{margin:0;color:var(--stone);font-size:14.5px}

.z-band{position:relative;background:var(--pine);color:var(--bone);text-align:center;overflow:hidden}
.z-band .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:96px}
.z-band h2{color:var(--bone);font-style:italic;font-weight:500;font-size:clamp(26px,3.8vw,46px);line-height:1.5;max-width:880px;margin:18px auto 0}
.z-band .chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.z-band .chips span{border:1px solid rgba(245,242,235,.3);border-radius:30px;padding:8px 18px;font-size:14px}

.z-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.z-steps li{counter-increment:s;background:var(--bone);border-radius:10px;padding:26px;display:grid;gap:6px;position:relative;overflow:hidden}
.z-steps li::before{content:"0" counter(s);font-family:"Playfair Display",serif;font-size:44px;line-height:1;color:var(--saffron);margin-bottom:6px}
.z-steps b{font-family:var(--serif);font-size:21px;color:var(--pine)}
.z-steps span{color:var(--stone)}

.z-pricing{background:var(--bone)}
.z-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.z-price{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px 24px;display:grid;gap:12px;align-content:start}
.z-price.hl{border:2px solid var(--pine);box-shadow:0 18px 40px rgba(11,51,49,.12)}
.z-price .badge{position:absolute;top:-12px;inset-inline-start:20px;background:var(--saffron);color:#2d1d05;font-size:12px;font-weight:600;border-radius:20px;padding:3px 12px}
.z-price h3{margin:0;font-size:22px}
.z-price .pr .num{font-family:"Playfair Display",serif;font-size:48px;font-weight:600;color:var(--pine);line-height:1}
.z-price .pr small{color:var(--stone)}
.z-price ul{margin:4px 0 8px;padding:0;list-style:none;display:grid;gap:8px}
.z-price li{padding-inline-start:22px;position:relative;color:#3b3f3b}
.z-price li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:10px;height:2px;background:var(--saffron)}

.z-cta{position:relative;overflow:hidden;background:var(--pine);border-radius:14px;color:var(--bone);text-align:center;padding:64px 24px 72px}
.z-cta .in{position:relative;z-index:2}
.z-cta h2{color:var(--bone);font-size:clamp(28px,3.4vw,42px);margin:0}
.z-cta p{color:#cdd9d2;margin:10px 0 24px}

/* footer */
.pf-foot{position:relative;background:var(--pine-deep);color:#bcd0c8;padding:60px 0 34px;overflow:hidden}
.pf-foot .mono{opacity:.25}
.pf-foot .wrap{position:relative;z-index:2}
.pf-foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-wm{color:var(--bone)}.foot-wm svg{height:30px}
.pf-foot .slogan{font-family:"Inter",sans-serif;letter-spacing:3px;text-transform:uppercase;font-size:11.5px;color:var(--sage);margin:16px 0 4px}
.pf-foot p{margin:0;color:#9fb2ab;font-size:14px}
.pf-foot-links{display:grid;gap:8px;align-content:start}
.pf-foot-links a:hover{color:var(--bone)}
.pf-foot-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(245,242,235,.12);font-size:12.5px;color:#8aa49b}

/* forms (signup / login / super) in the identity */
.pf .card-form,.pf .login-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 50px rgba(11,51,49,.08);border-radius:14px;backdrop-filter:none;-webkit-backdrop-filter:none}
.pf .login-card .wm{color:var(--pine);justify-content:center;margin-bottom:6px}
.pf .login-card .wm svg{height:40px}
.pf .btn.primary{border-radius:6px}
.signup .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.signup .field{display:grid;gap:6px}
.signup .field.full,.signup .full{grid-column:1/-1}
.signup label{font-weight:600;font-size:.9rem;color:var(--pine)}
.signup input,.signup select,.pf .login-card input{min-height:50px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 14px;font-size:16px;color:#161A18;width:100%}
.signup input:focus,.signup select:focus,.pf .login-card input:focus{outline:none;border-color:var(--ever);box-shadow:0 0 0 3px rgba(22,82,74,.12)}
.signup .error{color:var(--danger);font-size:.85rem;font-weight:600}
.slug-box{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.slug-box span{padding:0 10px;color:var(--stone);font-size:.9rem;white-space:nowrap}
.slug-box input{border:0!important;box-shadow:none!important;padding-inline-start:2px!important}
.pf-form-head{position:relative;overflow:hidden;background:var(--pine);color:var(--bone);border-radius:14px 14px 0 0;margin:-18px -18px 18px;padding:26px 22px 30px}
.pf-form-head h1{color:var(--bone);margin:6px 0 2px;font-size:30px}
.pf-form-head p{margin:0;color:#cdd9d2}
.pf .stat{border-radius:10px}

@media (max-width:920px){
  .z-hero-grid{grid-template-columns:1fr;padding-top:56px;padding-bottom:70px}
  .z-hero-card{justify-self:center;max-width:380px}
  .z-kinds,.z-feats{grid-template-columns:repeat(2,1fr)}
  .z-prices{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .pf-nav{gap:14px;font-size:14px}
  .wm svg{height:24px}
  .z-sec{padding:60px 0}
  .z-kinds{grid-template-columns:1fr 1fr;gap:10px}
  .z-kind{min-height:230px;padding:14px}.z-kind h3{font-size:18px;line-height:1.35}.z-kind span{font-size:12px}
  .z-kind .kf{top:30%;width:34%}.z-kind:hover .kf{transform:translate(-50%,-50%)}
  .z-feats{grid-template-columns:1fr;gap:26px}
  .z-steps{grid-template-columns:1fr}
  .signup .fields{grid-template-columns:1fr}
  .slug-box span{font-size:.75rem;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.z-strip .row{animation:none}}
.setup-key summary{cursor:pointer;color:var(--stone);font-size:.85rem}
.setup-key[open] summary{margin-bottom:8px}