/* Contact page: the zeyad.email landing page, ported as is. Generated from ../email/public/index.html with every rule scoped under .zc. */
.zc{--err:#b23a2e;margin-inline:calc(50% - 50vw);line-height:1.7;overflow-x:clip}
[data-theme=dark] .zc{--err:#f0a59b}
.zc *{box-sizing:border-box;margin:0}
.zc .hero{border-radius:var(--lr);margin-inline:14px;min-height:calc(100svh - 110px)}
.zc .hero-in{padding-top:56px}
.zc h1,.zc h2,.zc h3,.zc .disp{font-family:"Alexandria",sans-serif}
.zc a{color:inherit;text-decoration:none}
.zc button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.zc ul{list-style:none;padding:0}
.zc .zwrap{max-width:1120px;margin:0 auto;padding:0 24px}
.zc .ltr{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .zc .flip{transform:scaleX(-1)}
.zc :focus-visible{outline:2px solid var(--pr);outline-offset:3px}
.zc .hero :focus-visible{outline-color:#fff}
.zc ::view-transition-old(root),.zc ::view-transition-new(root){animation:none;mix-blend-mode:normal}
.zc .zw{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .05em;margin:-.14em -.05em}
.zc .zw>span{display:inline-block}
.zc .hero{position:relative;background:var(--hero);color:#fff;overflow:hidden;min-height:100svh}
.zc #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.zc .hero .zwrap{position:relative}
.zc .nb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;min-width:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.4);font-size:14px;font-weight:500;transition:background .2s,color .2s}
.zc .nb:hover{background:#fff;color:#2857C0}
.zc .nb i{font-size:19px}
.zc .hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 96px}
.zc .pwrap{position:relative;width:clamp(230px,44vh,460px);max-width:72vw}
.zc .photo{position:relative;width:100%;aspect-ratio:1;margin:0;border-radius:32px;overflow:hidden;border:5px solid var(--ivory);box-shadow:0 40px 70px -34px rgba(12,22,64,.8);will-change:transform}
.zc .photo img,.zc .photo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.zc h1{font-size:clamp(44px,8.4vw,116px);line-height:1.08;font-weight:800;letter-spacing:-.03em;margin-top:58px}
[dir=rtl] .zc h1{letter-spacing:0;line-height:1.3}
.zc h1 .line{display:block}
.zc h1 .line:last-child{color:var(--ivory)}
.zc .lead{font-size:clamp(16px,1.6vw,19px);opacity:.92;max-width:500px;margin:14px 0 26px}
.zc .mail{position:relative;display:inline-flex;align-items:center;gap:14px;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:clamp(19px,4vw,50px);color:var(--ivory);padding:6px 4px 12px;max-width:100%}
.zc .mail::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--ivory);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zc .mail:hover::after{transform:scaleX(.35)}
.zc .mail small{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;font-size:13px;display:inline-flex;align-items:center;gap:6px;background:var(--ivory);color:#2857C0;padding:5px 12px;border-radius:99px;font-weight:600;white-space:nowrap}
.zc .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.zc .btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border-radius:14px;font-weight:600;font-size:16px;will-change:transform}
.zc .btn i{font-size:21px}
.zc .btn.light{background:#fff;color:#2857C0}
.zc .btn.wa{background:#25D366;color:#063d1f}
.zc .socials{display:flex;gap:10px;margin-top:26px}
.zc .hint{position:absolute;bottom:22px;left:50%;width:1.5px;height:44px;background:rgba(255,255,255,.3);overflow:hidden}
.zc .hint i{position:absolute;inset:0;background:#fff;animation:zc-hint 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes zc-hint{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.zc .band{direction:ltr;overflow:hidden;padding:34px 0;border-bottom:1px solid var(--line)}
.zc .band div{display:flex;gap:.6em;width:max-content;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:clamp(34px,7vw,92px);line-height:1;white-space:nowrap;will-change:transform}
.zc .band span:nth-child(odd){color:var(--pr)}
.zc .band span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.zc .contact{padding:96px 0 80px}
.zc .head{max-width:760px;margin:0 0 40px}
.zc h2{font-size:clamp(34px,6vw,76px);line-height:1.2;font-weight:800;letter-spacing:-.02em}
[dir=rtl] .zc h2{letter-spacing:0;line-height:1.35}
.zc .head p{color:var(--muted);margin-top:10px;font-size:18px}
.zc .card{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:32px;overflow:hidden}
.zc .side{background:var(--ink);color:var(--bg);padding:34px 30px;display:flex;flex-direction:column;gap:18px}
.zc .num{display:flex;align-items:baseline;gap:8px;direction:ltr;font-family:"Alexandria";font-weight:800;line-height:1}
.zc .num div{font-size:104px;height:1em;overflow:hidden;color:var(--pr)}
[data-theme=light] .zc .num div{color:#869BF0}
.zc .num span{display:block}
.zc .num small{font-size:20px;opacity:.5;font-weight:600}
.zc .side h3{font-size:24px;font-weight:600;line-height:1.4;min-height:2.8em}
.zc .track{height:3px;background:rgba(127,127,127,.35);border-radius:9px;overflow:hidden}
.zc .track i{display:block;height:100%;background:#869BF0;transform:scaleX(.333);transform-origin:left}
[dir=rtl] .zc .track i{transform-origin:right}
.zc .sum{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.zc .sum li{display:flex;align-items:center;gap:10px;font-size:14px;padding:9px 12px;border-radius:12px;border:1px solid rgba(127,127,127,.35)}
.zc .sum li i{font-size:17px;color:#869BF0}
.zc .main{padding:clamp(22px,4vw,40px);min-width:0}
.zc .stage{min-height:430px}
.zc .step{display:none}
.zc .step.active{display:block}
.zc .svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zc .s{position:relative;text-align:start;padding:16px;border-radius:18px;border:1.5px solid var(--line);background:var(--bg);display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;transition:border-color .2s,background .2s}
.zc .s .ic{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--pr);font-size:25px;transition:.25s}
.zc .s strong{font-weight:600;font-size:16px}
.zc .s small{color:var(--muted);font-size:13px;line-height:1.5}
.zc .s .ck{position:absolute;top:10px;inset-inline-end:10px;width:22px;height:22px;border-radius:50%;background:var(--pr);color:var(--onpr);display:grid;place-items:center;font-size:14px;transform:scale(0)}
.zc .s:hover{border-color:var(--pr)}
.zc .s:hover .ic{transform:rotate(-8deg) scale(1.06)}
.zc .s[aria-pressed=true]{border-color:var(--pr);background:var(--soft)}
.zc .s[aria-pressed=true] .ic{background:var(--pr);color:var(--onpr)}
.zc .u{display:block;margin-bottom:22px}
.zc .u>span,.zc .lb{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:2px}
.zc .u>span b{font-weight:400;opacity:.8}
.zc .uw{position:relative;display:block}
.zc .u input{width:100%;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;color:var(--ink);padding:6px 0 12px;font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif;font-size:clamp(20px,2.4vw,27px);font-weight:600;outline:0;caret-color:var(--pr)}
.zc .u input::placeholder{color:var(--line);font-weight:400}
.zc .uw i{position:absolute;inset:auto 0 0 0;height:2px;background:var(--pr);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .zc .uw i{transform-origin:right}
.zc .u:focus-within .uw i{transform:scaleX(1)}
.zc .u:focus-within>span{color:var(--pr)}
.zc .u.bad .uw i{transform:scaleX(1);background:var(--err)}
.zc .msg{display:block;font-style:normal;color:var(--err);font-size:13px;min-height:20px;margin-top:6px}
.zc .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.zc .grp{margin-bottom:14px}
.zc .lb{margin-bottom:10px}
.zc .chips{display:flex;flex-wrap:wrap;gap:8px}
.zc .chip{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:99px;border:1.5px solid var(--line);font-weight:500;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.zc .chip i{font-size:17px;width:0;overflow:hidden;transition:width .3s,margin .3s}
.zc .chip:hover{border-color:var(--ink)}
.zc .chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.zc .chip[aria-pressed=true] i{width:17px;margin-inline-end:8px}
.zc #phoneW{overflow:hidden}
.zc .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.zc .actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.zc .ghost{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-radius:14px;color:var(--muted);font-weight:500}
.zc .ghost:hover{color:var(--ink);background:var(--soft)}
.zc .go{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;min-width:190px;padding:0 28px;border-radius:16px;background:var(--pr);color:var(--onpr);font-weight:600;font-size:16px;margin-inline-start:auto;overflow:hidden;will-change:transform;transition:background .2s}
.zc .go:hover{background:var(--pr2)}
.zc .go:disabled{cursor:progress}
.zc .go i{font-size:21px;display:inline-block}
.zc .success{display:none;text-align:center;padding:40px 0 10px}
.zc .success.active{display:block}
.zc .success svg{width:120px;height:120px}
.zc .success circle,.zc .success path{fill:none;stroke:var(--pr);stroke-linecap:round;stroke-linejoin:round}
.zc .success circle{stroke-width:4}
.zc .success path{stroke-width:5}
.zc .success h3{font-size:30px;margin:14px 0 6px}
.zc .success p{color:var(--muted);margin-bottom:20px}
[dir=rtl] .zc .pbar{transform-origin:right}
.zc .frame{position:absolute;inset:0;border:2px solid rgba(243,229,218,.6);border-radius:32px;transform:translate(16px,16px)}
.zc .zstamp{position:absolute;bottom:-40px;inset-inline-end:-40px;width:116px;height:116px;border-radius:50%;background:var(--ivory);color:#2857C0;display:grid;place-items:center;box-shadow:0 18px 30px -16px rgba(12,22,64,.7)}
.zc .zstamp svg{position:absolute;inset:0;width:100%;height:100%;direction:ltr;unicode-bidi:isolate}
.zc .zstamp text{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:500;fill:#2857C0;letter-spacing:.04em}
.zc .zstamp i{font-size:30px}
.zc .hero{transform-origin:50% 100%}
.zc .how{background:var(--ink);color:var(--bg);overflow-x:auto}
.zc .how-track{display:flex;width:max-content}
.zc .pan{width:78vw;max-width:980px;min-height:100svh;padding:12vh 6vw;display:flex;flex-direction:column;justify-content:center;border-inline-end:1px solid rgba(127,127,127,.3)}
.zc .pan b{direction:ltr;font-family:"Alexandria";font-weight:800;font-size:clamp(130px,26vw,340px);line-height:.85;color:transparent;-webkit-text-stroke:2px #869BF0;align-self:flex-start}
.zc .pan h3{font-size:clamp(30px,5.2vw,68px);font-weight:800;line-height:1.3;margin-top:.3em}
.zc .pan p{font-size:clamp(16px,1.8vw,22px);opacity:.75;max-width:520px;margin-top:8px}
.zc .pan i{font-size:44px;color:#869BF0;margin-bottom:18px}
.zc .s{overflow:hidden}
.zc .s::before{content:"";position:absolute;inset:0;background:radial-gradient(180px circle at var(--x,50%) var(--y,50%),var(--soft),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.zc .s:hover::before{opacity:1}
.zc .s>*{position:relative}
.zc .s .ck{position:absolute}
.zc .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.zc .say{padding:18vh 0 16vh}
.zc .say p{font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(28px,5.4vw,76px);line-height:1.45;letter-spacing:-.01em}
[dir=rtl] .zc .say p{letter-spacing:0;line-height:1.6}
.zc .say .sw{display:inline-block}
.zc .say .sw.hl{color:var(--pr)}
.zc .idx{padding:110px 0 30px}
.zc #services,.zc #contact{scroll-margin-top:76px}
.zc .idx h2{margin-bottom:30px}
.zc .ixs{border-top:1.5px solid var(--line)}
.zc .ix{position:relative;display:grid;grid-template-columns:80px 1fr auto auto;align-items:center;gap:22px;width:100%;padding:26px 14px;border-bottom:1.5px solid var(--line);text-align:start;overflow:hidden;transition:color .35s}
.zc .ix::before{content:"";position:absolute;inset:0;background:var(--pr);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zc .ix>*{position:relative}
.zc .ixn{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--muted);transition:color .35s}
.zc .ixt{font-family:"Alexandria",sans-serif;font-weight:800;font-size:clamp(26px,5vw,66px);line-height:1.25;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zc .ixd{color:var(--muted);font-size:15px;transition:color .35s}
.zc .ix>i{font-size:34px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zc .ix:hover,.zc .ix:focus-visible{color:var(--onpr)}
.zc .ix:hover::before,.zc .ix:focus-visible::before{transform:scaleY(1)}
.zc .ix:hover .ixn,.zc .ix:hover .ixd{color:var(--onpr)}
.zc .ix:hover .ixt{transform:translateX(22px)}
[dir=rtl] .zc .ix:hover .ixt{transform:translateX(-22px)}
.zc .ix:hover>i{transform:rotate(45deg) scale(1.15)}
[dir=rtl] .zc .ix>i{transform:scaleX(-1)}
[dir=rtl] .zc .ix:hover>i{transform:scaleX(-1) rotate(45deg) scale(1.15)}
.zc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zc .how.js .pan{opacity:.28;transition:opacity .5s}
.zc .how.js .pan.on{opacity:1}
.zc .btn.light i{transition:transform .3s}
.zc .btn.light:hover i{transform:translateY(4px)}
@media (max-width:900px){
.zc .card{grid-template-columns:1fr}
.zc .side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:22px;gap:12px 18px}
.zc .num div{font-size:56px}
.zc .side h3{flex:1;min-height:0;font-size:19px}
.zc .track{flex-basis:100%}
.zc .sum{flex-direction:row;flex-wrap:wrap;flex-basis:100%;margin:0}
.zc .sum li{padding:5px 10px;font-size:13px}
.zc .stage{min-height:0}
}
@media (max-width:620px){
.zc .svc,.zc .row{grid-template-columns:1fr}
.zc .zstamp{width:92px;height:92px;bottom:-30px;inset-inline-end:-26px}
.zc .ix{grid-template-columns:44px 1fr auto;padding:20px 4px}
.zc .ixd{display:none}
.zc .zstamp i{font-size:24px}
.zc .pan{width:86vw}
.zc .mail small span{display:none}
.zc .go{min-width:140px}
}