@font-face{font-family:"Readex Pro";src:url("assets/fonts/ReadexPro-arabic.woff2") format("woff2");font-weight:160 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Readex Pro";src:url("assets/fonts/ReadexPro-latin.woff2") format("woff2");font-weight:160 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-latin.woff2") format("woff2");font-weight:500 800;font-display:swap;unicode-range:U+0021-00FF,U+2010-2027,U+2030-206F,U+2190-2193}

:root{
  --paper:#F1EEE8;--paper-2:#E7E3DB;--ink:#0B0B0C;--ink-2:#17171A;--blue:#2E2BFF;--blue-soft:#8E8BFF;--lilac:#C8C6FF;--lilac-ink:#1A1868;
  --muted:#55545A;--muted-2:#8B8A90;--line:#0B0B0C1F;--line-dark:#F1EEE824;--wa:#25D366;
  --f:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--m:"JetBrains Mono","Readex Pro",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(16px,4.2vw,56px);--r:28px;--ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
.mono{font-family:var(--m);font-weight:500;letter-spacing:0}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:12px;top:-80px;z-index:300;padding:10px 18px;border-radius:99px;background:var(--ink);color:var(--paper);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.line>span{display:inline-block}
.eyebrow{font-size:12px;color:var(--blue)}
.section-title{font-size:clamp(40px,7vw,96px);font-weight:700;line-height:1.14;letter-spacing:-.02em}

/* ---------- intro ---------- */
.intro{display:none;position:fixed;inset:0;z-index:200;animation:introFailsafe .4s 7s forwards}
.js .intro{display:block}
.intro-svg{position:absolute;inset:0;width:100%;height:100%}
.intro-path{fill:var(--ink)}
.intro-word{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:.35em;color:var(--paper);font-size:clamp(40px,8vw,104px);font-weight:700;letter-spacing:-.02em}
.intro-dot{width:.22em;height:.22em;border-radius:50%;background:var(--blue);flex:none}
.intro-skip{position:absolute;z-index:2;inset-inline-end:var(--pad);bottom:max(24px,env(safe-area-inset-bottom));min-height:44px;background:none;border:1px solid var(--line-dark);border-radius:99px;padding:10px 18px;color:var(--muted-2);font-size:13px}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}

/* ---------- curtain ---------- */
.curtain{position:fixed;inset:0;width:100%;height:100%;z-index:150;pointer-events:none}
.curtain-path{fill:var(--blue)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:60;top:max(12px,env(safe-area-inset-top));inset-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px;padding-inline-start:20px;border-radius:99px;background:#F1EEE8d9;border:1px solid var(--line);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(calc(-100% - 24px))}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:19px;font-weight:700;text-decoration:none;letter-spacing:-.01em}
.brand em{font-style:normal;color:var(--blue)}
.nav-links{display:none;gap:4px}
.nav-links a{padding:8px 16px;border-radius:99px;font-size:15px;text-decoration:none;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:#0B0B0C0d}
.cart-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 0;padding-inline:18px 8px;border:0;border-radius:99px;background:var(--ink);color:var(--paper);font-size:15px}
.cart-count{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:99px;background:var(--blue);color:#fff;font-size:13px}
@media (min-width:860px){.nav-links{display:flex}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:99px;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--blue)}
.btn-line{border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:var(--lilac)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr;gap:28px 40px;align-content:center;padding:112px var(--pad) 40px}
.hero-title{margin-top:14px;font-size:clamp(44px,11.5vw,120px);font-weight:700;line-height:1.14;letter-spacing:-.025em}
.rot{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;color:var(--blue)}
.rot b{grid-area:1/1;justify-self:start;font-weight:700;white-space:nowrap}
.js .rot b{transform:translateY(140%)}
.js .rot b:first-child{transform:none}
.rot b:not(:first-child){visibility:hidden}
.js .rot b:not(:first-child){visibility:visible}
.und{position:relative;display:inline-block}
.und svg{position:absolute;left:0;bottom:-.02em;width:100%;height:.12em;overflow:visible}
.und path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:300;stroke-dashoffset:0}
.lead{max-width:40ch;margin-top:22px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-visual{position:relative;width:min(100%,500px);justify-self:center;aspect-ratio:1/1.08;perspective:1100px}
.portrait{position:absolute;inset:4% 11% 6%;border-radius:var(--r)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r);background:var(--paper-2)}
.portrait-canvas{position:absolute;inset:-25%;width:150%;height:150%;max-width:none;pointer-events:none}
.float-card{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;padding-inline:12px 18px;border-radius:20px;text-decoration:none;box-shadow:0 24px 50px -24px #0B0B0C80;will-change:transform}
.float-card img{width:40px;height:40px;border-radius:12px}
.float-card b{display:block;font-size:16px;font-weight:500;line-height:1.3}
.float-card .mono{display:block;font-size:11.5px;opacity:.8}
.fc-wijhati{top:2%;inset-inline-start:-2%;background:#fff}
.fc-kurrasa{bottom:0;inset-inline-start:8%;background:var(--lilac);color:var(--lilac-ink)}
.fc-nusuk{bottom:16%;inset-inline-end:-4%;flex-direction:column;align-items:stretch;gap:8px;width:190px;padding:14px;background:var(--ink);color:var(--paper)}
.fc-top{display:flex;justify-content:space-between;font-size:15px;font-weight:500}
.fc-code{padding:12px 6px;border:1px dashed #F1EEE866;border-radius:12px;text-align:center;font-size:13px;letter-spacing:.14em}
.fc-pill{padding:7px;border-radius:99px;background:var(--paper);color:var(--ink);text-align:center;font-size:13px;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.stats div{display:flex;flex-direction:column-reverse;gap:2px}
.stats dt{font-size:12px;color:var(--muted);line-height:1.5}
.stats dd{font-size:clamp(22px,3.6vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.source{margin-top:-14px;font-size:12px;color:var(--muted)}
.source.is-live{display:flex;align-items:center;gap:8px;color:var(--muted)}
.source.is-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#1FAE5B;box-shadow:0 0 0 0 #1FAE5B66;animation:livePulse 2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px #1FAE5B00}100%{box-shadow:0 0 0 0 #1FAE5B00}}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .hero-title{font-size:clamp(52px,5.6vw,104px)}
  .stats,.source{grid-column:1/-1}
}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;background:var(--ink);color:var(--paper);padding:16px 0;transform:rotate(-1.6deg) scale(1.03);margin:24px 0 -44px}
.marquee-track{display:flex;width:max-content;gap:28px;direction:ltr;font-size:clamp(14px,1.6vw,20px);white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--blue-soft)}

/* ---------- case: kod nusuk ---------- */
.case{background:var(--ink);color:var(--paper)}
.case-pin{position:relative;display:flex;flex-direction:column;gap:28px;padding:110px var(--pad) 48px}
.case-canvas{display:none}
.case-head .eyebrow{color:var(--lilac)}
.case-title{margin-top:10px;font-size:clamp(34px,5.4vw,76px);font-weight:700;line-height:1.14;letter-spacing:-.02em}
.case-title em{font-style:normal;color:var(--blue-soft)}
.case-number{font-size:clamp(64px,15vw,220px);font-weight:800;letter-spacing:-.05em;line-height:1;direction:ltr;text-align:center}
.case-number-label{text-align:center;font-size:12px;color:var(--muted-2)}
.case-steps{display:grid;gap:18px;max-width:460px}
.case-step span{display:block;font-size:12px;color:var(--lilac);margin-bottom:6px}
.case-step p{font-size:clamp(16px,1.5vw,19px);color:#D9D6D0;font-weight:300}
.case-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:6px 14px;border:1px solid var(--line-dark);border-radius:99px;font-size:13px}
/* live (animated) mode */
.case--live .case-pin{height:100svh;min-height:560px;overflow:hidden;display:block;padding:0}
.case--live .case-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.case--live .case-head{position:absolute;top:100px;inset-inline:var(--pad);pointer-events:none}
.case--live .case-number{position:absolute;opacity:0;pointer-events:none}
.case--live .case-number-label{position:absolute;top:66%;inset-inline:0}
.case--live .case-steps{position:absolute;bottom:104px;inset-inline-start:var(--pad);width:min(460px,calc(100% - 2*var(--pad)));display:grid}
.case--live .case-step{grid-area:1/1}
.case--live .case-foot{position:absolute;bottom:28px;inset-inline:var(--pad)}
@media (max-width:640px){
  .case--live .case-head{top:84px}
  .case--live .case-number-label{top:56%}
  .case--live .case-steps{bottom:92px}
  .case--live .chips{display:none}
}

/* ---------- work ---------- */
.work-pin{padding:110px 0 64px;overflow:hidden}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-inline:var(--pad);margin-bottom:32px}
.work-hint{font-size:12px;color:var(--muted)}
.work-track{display:flex;gap:18px;padding:0 var(--pad) 24px;scroll-padding-inline:var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.work-track::-webkit-scrollbar{display:none}
.wcard{flex:0 0 min(82vw,360px);height:clamp(420px,62vh,560px);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:26px;border-radius:var(--r);cursor:pointer;outline-offset:4px}
.wcard>.mono{font-size:12px;opacity:.75}
.wcard h3{font-size:clamp(30px,3.2vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.wcard p{font-size:15px;line-height:1.65}
.wcard-art{width:120px;height:120px;border-radius:30px;transition:transform .6s var(--ease)}
.wcard:hover .wcard-art{transform:scale(1.08) rotate(-4deg)}
.wcard-list{font-size:clamp(18px,2vw,24px)!important;line-height:1.8!important;opacity:.85}
.wcard-plane{width:min(100%,260px)}
.plane-trail{fill:none;stroke:var(--paper);stroke-width:2;stroke-dasharray:4 8;opacity:.6}
.plane{fill:var(--lilac)}
.tag{display:inline-block;margin-top:14px;padding:4px 12px;border:1px solid currentColor;border-radius:99px;font-size:12px}
.w-blue{background:var(--blue);color:#fff}
.w-lilac{background:var(--lilac);color:var(--lilac-ink)}
.w-ink{background:var(--ink);color:var(--paper)}
.w-stone{background:var(--paper-2);color:var(--ink)}
.w-white{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media (min-width:768px){
  .work--live .work-pin{height:100svh;min-height:620px;display:flex;flex-direction:column;justify-content:center;padding:96px 0 40px}
  .work--live .work-track{overflow:visible;scroll-snap-type:none;width:max-content}
  .wcard{flex-basis:clamp(320px,30vw,420px)}
}

/* ---------- services ---------- */
.services{padding:120px var(--pad) 100px}
.scatter{font-size:clamp(40px,7.6vw,112px);font-weight:700;line-height:1.14;letter-spacing:-.025em;max-width:14ch}
.scatter span{display:inline-block}
.scatter .hl{color:var(--blue)}
.svc-list{margin-top:64px;border-top:1px solid var(--ink)}
.svc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 28px;padding:30px 4px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.svc-n{font-size:13px;color:var(--muted);transition:color .3s}
.svc h3{font-size:clamp(24px,3.4vw,46px);font-weight:500;line-height:1.15;letter-spacing:-.015em;transition:color .3s}
.svc p{margin-top:6px;max-width:56ch;color:var(--muted);font-size:15px;transition:color .3s}
.svc-add{width:56px;height:56px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:24px;line-height:1;transition:background .3s,color .3s,transform .4s var(--ease)}
@media (hover:hover){
  .svc:hover::before{transform:scaleY(1)}
  .svc:hover h3,.svc:hover p,.svc:hover .svc-n{color:#fff}
  .svc:hover .svc-add{background:#fff;color:var(--blue);transform:rotate(90deg)}
}

/* ---------- store ---------- */
.store{padding:110px var(--pad);background:var(--paper-2)}
.store-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.store-sub{margin-top:18px;font-size:13px;color:var(--muted)}
.store-sub a{color:var(--blue)}
.store-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.product{position:relative;display:flex;flex-direction:column;gap:10px;min-height:240px;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.product.is-digital{background:var(--blue);color:#fff;border-color:var(--blue)}
.product-top{display:flex;align-items:center;gap:10px}
.product-top .mono{font-size:12px;color:var(--blue)}
.product.is-digital .product-top .mono{color:#E4E3FF}
.product-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--paper)}
.product.is-digital .product-icon{background:#ffffff22}
.product-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.product h3{margin-top:8px;font-size:22px;font-weight:500;line-height:1.3}
.product p{color:var(--muted);font-size:14px;line-height:1.65}
.product.is-digital p{color:#E4E3FF}
.product-foot{display:flex;margin-top:auto;padding-top:12px}
.add-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px;padding-inline:18px 6px;border:0;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;transition:background .25s}
.add-btn b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff22;font-size:20px;font-weight:400;line-height:1;transition:transform .4s var(--ease)}
.add-btn:hover{background:var(--blue)}
.add-btn:hover b{transform:rotate(90deg)}
.add-btn.is-added b{transform:none}
.product.is-digital .add-btn{background:#fff;color:var(--blue)}
.add-btn.is-added,.svc-add.is-added{background:var(--blue);color:#fff}
.product.is-digital .add-btn.is-added{background:var(--lilac);color:var(--lilac-ink)}
.noscript{margin-top:20px}

/* ---------- about ---------- */
.about{padding:120px var(--pad)}
/* Without the store between them, services and about share one paper background. */
.store[hidden] + .about{padding-top:32px}
.about-grid{display:grid;gap:32px;margin-top:36px}
.about-text{font-size:clamp(20px,2.3vw,32px);font-weight:300;line-height:1.6;max-width:36ch}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tools li{padding:7px 14px;border:1px solid var(--line);border-radius:99px;font-size:13px}
.channels{display:grid;gap:16px;margin-top:64px}
.channel{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.channel>img{width:56px;height:56px}
.channel>img.round{border-radius:16px}
.channel-code{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:18px}
.channel h3{margin-top:16px;font-size:26px;font-weight:700}
.channel>p{color:var(--muted);font-size:14px}
.channel ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.channel a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:14px;background:var(--paper);font-size:14px;text-decoration:none;transition:background .25s,color .25s}
.channel a:hover{background:var(--ink);color:var(--paper)}
.ico{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
@media (min-width:900px){
  .about-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .channels{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:110px var(--pad) 28px;overflow:hidden}
.foot .eyebrow{color:var(--lilac)}
.foot-title{margin-top:12px;font-size:clamp(60px,13vw,200px);font-weight:700;line-height:1.1;letter-spacing:-.04em}
.foot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;margin-top:48px}
.btn-orb{display:grid;place-items:center;width:clamp(132px,16vw,180px);aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;font-size:18px;font-weight:500;text-decoration:none;transition:background .3s}
.btn-orb:hover{background:var(--wa);color:var(--ink)}
.foot-mail{display:inline-block;padding:10px 0;font-size:clamp(16px,2vw,24px);text-underline-offset:6px;word-break:break-all}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:90px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:12px;color:var(--muted-2)}

/* ---------- cart ---------- */
.cart-dim{position:fixed;inset:0;z-index:80;background:#0B0B0C66;opacity:0;transition:opacity .4s}
.cart-open .cart-dim{opacity:1}
.cart{position:fixed;z-index:90;top:0;bottom:0;left:0;width:min(420px,92vw);display:flex;flex-direction:column;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);transform:translateX(-105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.cart-open .cart{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cart-head h2{font-size:26px;font-weight:700}
.cart-close{min-height:44px;padding:0 18px;border:1px solid var(--line-dark);border-radius:99px;background:none;font-size:14px}
.cart-list{overflow:auto}
.cart-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-dark);font-size:15px}
.cart-list li .mono{font-size:12px;color:var(--blue-soft)}
.cart-list li>span:nth-child(2){flex:1}
.cart-remove{width:44px;height:44px;border:0;border-radius:50%;background:#ffffff14;font-size:18px}
.cart-empty{color:var(--muted-2)}
.cart-note{margin:14px 0;font-size:13px;color:var(--muted-2)}
.cart-preview{margin-top:20px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#DCF8C6;color:#0B2E13;font-size:13px;line-height:1.7;white-space:pre-line;max-height:34vh;overflow:auto}
.cart-send{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:12px;border-radius:99px;background:var(--wa);color:#0B2E13;font-weight:500;text-decoration:none}
.fly{position:fixed;z-index:120;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--blue);pointer-events:none}
.cart-open,.view-open{overflow:hidden}

/* ---------- project view ---------- */
.view{--v-bg:var(--paper);--v-ink:var(--ink);--v-muted:var(--muted);--v-accent:var(--blue);--v-line:var(--line);--v-btn:var(--ink);--v-btn-ink:var(--paper);--v-cta:var(--blue);--v-cta-ink:#fff;
  position:fixed;inset:0;z-index:70;overflow:auto;background:var(--v-bg);color:var(--v-ink);padding:96px var(--pad) 64px;overscroll-behavior:contain}
.view[hidden]{display:none}
.view-close{position:fixed;top:max(18px,env(safe-area-inset-top));inset-inline-start:var(--pad);z-index:3;min-height:46px;padding:0 20px;border:1px solid currentColor;border-radius:99px;background:var(--v-bg);color:var(--v-ink);font-size:15px}
.view-body{position:relative;z-index:1;max-width:860px}
.view-kicker{font-size:12px;color:var(--v-accent)}
.view-img{width:110px;height:110px;margin-top:24px;border-radius:28px}
.view-title{margin-top:18px;padding-bottom:.06em;font-size:clamp(48px,9vw,128px);font-weight:700;line-height:1.22;letter-spacing:-.03em}
.view-lead{margin-top:clamp(24px,3vw,40px);font-size:clamp(20px,2.4vw,30px);font-weight:300;line-height:1.55}
.view-text{display:grid;gap:14px;margin-top:32px;padding-top:28px;border-top:1px solid var(--v-line);color:var(--v-muted);font-size:17px}
.view-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.view-links a{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:99px;background:var(--v-btn);color:var(--v-btn-ink);text-decoration:none;transition:transform .3s var(--ease),filter .3s}
.view-links a:hover{transform:translateY(-2px);filter:brightness(1.12)}

/* ---------- cursor ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor .cursor{display:grid;place-items:center;position:fixed;top:0;left:0;z-index:250;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none}
  .cursor-dot{position:absolute;inset:0;border-radius:50%;background:var(--blue);transform:scale(.12);transition:transform .45s var(--ease),background .3s}
  .cursor-label{position:relative;color:#fff;font-size:14px;font-weight:500;opacity:0;transform:scale(.6);transition:opacity .25s,transform .45s var(--ease)}
  .cursor.is-big .cursor-dot{transform:scale(1)}
  .cursor.is-big .cursor-label{opacity:1;transform:none}
  .cursor.is-link .cursor-dot{transform:scale(.38);background:var(--lilac)}
  .cursor.is-hidden .cursor-dot{transform:scale(0)}
}

@media (prefers-reduced-motion:reduce){
  .intro{display:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}

html{scrollbar-gutter:stable}
.is-intro{overflow:hidden}

/* ---------- audit fixes ---------- */
.cart-bar{position:fixed;z-index:65;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;min-height:56px;padding:6px;padding-inline:18px 6px;border-radius:99px;background:var(--ink);color:var(--paper);box-shadow:0 18px 40px -18px #0B0B0C99}
.cart-bar[hidden]{display:none}
.cart-bar-count{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:99px;background:var(--blue);color:#fff;font-size:13px}
.cart-bar-open{margin-inline-start:auto;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--wa);color:#0B2E13;font-weight:500}
.cart-open .cart-bar{display:none}
.view-links .view-cta{background:var(--v-cta);color:var(--v-cta-ink)}
@media (min-width:860px){.cart-bar{display:none!important}}
@media (max-width:859px){.has-cart .foot-bar{margin-bottom:76px}}
@media (max-width:859px){
  .nav-links{display:flex}
  .nav-links a:not([href="#services"]){display:none}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px}
}
@media (max-width:767px){.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#F1EEE8f2}}
@media (max-width:480px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div:first-child{grid-column:1/-1}
  .stats dd{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.source.is-live::before{animation:none}}

/* ---------- project views: each one dressed as its own project ---------- */
.view-decor{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dd{position:absolute;width:var(--s,64px);height:var(--s,64px)}
.dd>svg,.dd>b{display:block;width:100%;height:100%;animation:ddFloat var(--t,6s) ease-in-out infinite alternate}
.dd:nth-child(2n)>*{--t:7.5s}.dd:nth-child(3n)>*{--t:5.2s}
@keyframes ddFloat{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(8px) rotate(4deg)}}
@media (max-width:767px){
  .dd{left:var(--ml)!important;top:var(--mt)!important;opacity:.45;width:calc(var(--s,64px)*.62);height:calc(var(--s,64px)*.62)}
  .dd.no-phone{display:none}
}

/* الكراسة: notebook paper, doodles */
.view[data-theme="kurrasa"]{--v-bg:#FFFDF6;--v-ink:#1F2A5A;--v-muted:#47507A;--v-accent:#D81E5B;--v-line:#BFD9F2;--v-btn:#1F2A5A;--v-btn-ink:#fff;--v-cta:#EC3A7C;--v-cta-ink:#fff;
  padding-inline-start:calc(var(--pad) + 40px);
  background-image:linear-gradient(to left,transparent calc(var(--pad) + 22px),#F7C9D3 calc(var(--pad) + 22px),#F7C9D3 calc(var(--pad) + 24px),transparent calc(var(--pad) + 24px)),repeating-linear-gradient(to bottom,transparent 0 39px,#DCEAF8 39px 40px);
  background-attachment:local}
.view[data-theme="kurrasa"] .view-title{display:inline-block;padding:.08em .32em .14em;background:#fff;border:4px solid #1F2A5A;border-radius:22px;box-shadow:8px 8px 0 #1F2A5A;transform:rotate(-2deg);transform-origin:right}
.view[data-theme="kurrasa"] .view-img{border:3px solid #1F2A5A;box-shadow:6px 6px 0 #1F2A5A;transform:rotate(-6deg)}
.view[data-theme="kurrasa"] .view-links a{border:3px solid #1F2A5A;box-shadow:4px 4px 0 #1F2A5A}
.view[data-theme="kurrasa"] .dd svg{stroke:#1F2A5A;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}

/* وِجْهتي: night green, gold star pattern lit by a moving light */
.view[data-theme="wijhati"]{--v-bg:#0F1512;--v-ink:#F4EBD9;--v-muted:#B7C2BA;--v-accent:#EFD39A;--v-line:#F4EBD922;--v-btn:#F4EBD9;--v-btn-ink:#0F1512;--v-cta:#6CCBA6;--v-cta-ink:#0F1512}
.view[data-theme="wijhati"] .view-title{color:#EFD39A}
.wj-pattern{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23EFD39A' stroke-width='1.2'%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3Cpath d='M0 48h20M76 48h20M48 0v20M48 76v20'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px;opacity:.55}
.wj-spot{position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,30%) var(--my,40%),#0F151200 0,#0F1512cc 45%,#0F1512 75%)}
.wj-glow{position:absolute;width:520px;height:520px;margin:-260px 0 0 -260px;left:var(--mx,30%);top:var(--my,40%);border-radius:50%;background:radial-gradient(circle,#EFD39A26,#EFD39A00 65%)}
.view[data-theme="wijhati"] .dd svg{fill:none;stroke:#EFD39A;stroke-width:2}

/* ليه وإزاي؟: sky, clouds, a paper plane that chases the mouse */
.view[data-theme="motion"]{--v-bg:#E3EEFF;--v-ink:#0E1B3D;--v-muted:#41507A;--v-accent:#2E2BFF;--v-line:#0E1B3D22;--v-btn:#0E1B3D;--v-btn-ink:#fff;--v-cta:#2E2BFF;--v-cta-ink:#fff;background:linear-gradient(#C9DEFF,#F4F8FF 70%)}
.view[data-theme="motion"] .dd>b{font:700 calc(var(--s) * .9)/1 var(--f);color:#2E2BFF;opacity:.16;text-align:center}
.mo-plane{position:absolute;top:34%;left:22%;width:96px;height:58px;margin:-29px 0 0 -48px;filter:drop-shadow(0 14px 10px #0E1B3D22)}
.mo-plane svg{width:100%;height:100%}

/* أرشيف Web3: a block network that reaches for the mouse */
.view[data-theme="web3"]{--v-bg:#0B0B12;--v-ink:#EDEBFF;--v-muted:#A3A1C2;--v-accent:#8E8BFF;--v-line:#EDEBFF22;--v-btn:#EDEBFF;--v-btn-ink:#0B0B12;--v-cta:#8E8BFF;--v-cta-ink:#0B0B12}
.w3-net{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.view[data-theme="web3"] .dd svg{fill:none;stroke:#8E8BFF;stroke-width:1.6}

/* Full-Stack: blueprint grid, crosshair, schema cards */
.view[data-theme="pern"]{--v-bg:#123B7A;--v-ink:#fff;--v-muted:#CFDDF5;--v-accent:#FFD166;--v-line:#ffffff33;--v-btn:#fff;--v-btn-ink:#123B7A;--v-cta:#FFD166;--v-cta-ink:#123B7A;
  background-image:linear-gradient(#ffffff26 1px,transparent 1px),linear-gradient(90deg,#ffffff26 1px,transparent 1px),linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-attachment:local}
.pn-x,.pn-y{position:absolute;background:#FFD16699}
.pn-x{left:0;right:0;top:var(--cy,50%);height:1px}
.pn-y{top:0;bottom:0;left:var(--cx,50%);width:1px}
.pn-label{position:absolute;left:calc(var(--cx,50%) + 12px);top:calc(var(--cy,50%) + 10px);direction:ltr;font-size:12px;color:#FFD166;white-space:nowrap}
.pn-card{min-width:170px;padding:12px 14px;border:1.5px solid #ffffffb3;border-radius:6px;background:#123B7Acc;font:500 12px/1.9 var(--m);color:#fff;direction:ltr;text-align:left}
.pn-card b{display:block;margin-bottom:4px;padding-bottom:4px;border-bottom:1.5px solid #ffffff66;color:#FFD166;font-size:13px}
@media (hover:none){.pn-x,.pn-y,.pn-label{display:none}}
@media (prefers-reduced-motion:reduce){.dd>svg,.dd>b{animation:none}}

/* ---------- audit 2 ---------- */
.view[data-theme="kurrasa"] .view-lead{line-height:40px}
.view[data-theme="kurrasa"] .view-text{gap:0;margin-top:40px;padding-top:39px}
.view[data-theme="kurrasa"] .view-text p{line-height:40px}
.wj-pattern{-webkit-mask:linear-gradient(to left,#0000 0,#0000 38%,#000 60%);mask:linear-gradient(to left,#0000 0,#0000 38%,#000 60%)}
.w3-net{-webkit-mask:linear-gradient(to left,#0004,#000 55%);mask:linear-gradient(to left,#0004,#000 55%)}
@media (max-width:767px){.wj-pattern{opacity:.25;-webkit-mask:none;mask:none}.w3-net{opacity:.5}}
@media (max-width:859px){
  .has-cart .case--live .case-foot{bottom:92px}
  .has-cart .case--live .case-steps{bottom:156px}
}
@media (max-width:480px){
  .view-links{display:grid;gap:8px}
  .view-links a{display:flex;justify-content:center}
  .svc{gap:12px 16px;padding:24px 0}
  .svc h3{font-size:22px}
}