/* Boud v2 layer — additive. Loaded after boud.css; delete this file + js/v2.js to get v1 back. */

/* ---- global polish ---- */
html{scroll-padding-top:84px}
a,button,.btn,.chip,.core__row,.cf input,.cf textarea{touch-action:manipulation}
a,button,.btn,.chip,.core__row{cursor:pointer}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---- hero: pointer-reactive halo + shimmering accent word ---- */
.hero__glow{transform:translate3d(var(--hx,0px),var(--hy,0px),0);transition:transform .9s var(--ease);will-change:transform}
.slogan .hl{background:linear-gradient(100deg,var(--accent) 20%,var(--o5) 50%,var(--accent) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v2shine 7s var(--ease-io) infinite}
@keyframes v2shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ---- buttons: magnetic lift + press ---- */
.btn{transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:background .25s,color .25s,border-color .25s,box-shadow .3s,transform .35s var(--ease)}
.btn:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.97)}
.btn--lime:hover{box-shadow:0 14px 32px -12px var(--cta-glow),0 0 0 4px color-mix(in srgb,var(--cta) 30%,transparent)}

/* ---- services: spotlight rows with index numbers ---- */
.core{counter-reset:svc}
.core li{counter-increment:svc;position:relative}
.core__row{position:relative;isolation:isolate;border-radius:20px;margin-inline:-14px;padding-inline:14px}
.core__row::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
.core__row:hover::before,.core__row:focus-visible::before{opacity:1}
.core__row:hover{padding-inline-start:14px}
.core__t{position:relative}
.core__tx::before{content:"0" counter(svc);display:block;margin-bottom:8px;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums;unicode-bidi:isolate;text-align:start}

/* ---- products + stats ---- */
.ptab{transition:background .3s,transform .35s var(--ease),box-shadow .3s}
.ptab:hover{transform:translateX(4px)}
html[dir="rtl"] .ptab:hover{transform:translateX(-4px)}
.stats dt{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--accent)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats dt i{-webkit-text-fill-color:var(--accent)}

/* ---- contact: validation states + spotlight card ---- */
.cf{position:relative}
.cf__err{display:none;margin-top:8px;font-size:13.5px;font-weight:500;color:#C2362B}
:root[data-theme="dark"] .cf__err{color:#FF8E84}
.cf.is-invalid .cf__err{display:block}
.cf.is-invalid input,.cf.is-invalid textarea{border-bottom-color:#C2362B;box-shadow:0 1px 0 #C2362B}
:root[data-theme="dark"] .cf.is-invalid input,:root[data-theme="dark"] .cf.is-invalid textarea{border-bottom-color:#FF8E84;box-shadow:0 1px 0 #FF8E84}
.cf.is-valid input,.cf.is-valid textarea{border-bottom-color:color-mix(in srgb,var(--accent) 60%,var(--line-2))}
.cform button[type=submit][disabled]{opacity:.6;pointer-events:none}
.cf__note.is-ok{color:var(--accent);font-weight:500}
.ccard{position:relative;overflow:hidden;isolation:isolate}
.ccard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.45),transparent 65%)}
:root[data-theme="dark"] .ccard::after{background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.10),transparent 65%)}
.ccard:hover::after{opacity:1}
.ccard__soc a{transition:transform .3s var(--ease),background .25s}
.ccard__soc a:hover{transform:translateY(-3px)}

/* ---- footer links: animated underline ---- */
.ftr__cols a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease);padding-bottom:2px}
.ftr__cols a:hover{background-size:100% 1px}
html[dir="rtl"] .ftr__cols a{background-position:100% 100%}

/* ---- back to top ---- */
.totop{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:180;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:var(--glass);color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease),background .25s,color .25s}
.totop svg{width:18px;height:18px}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}

/* ---- reduced motion: no loops, no tracking ---- */
@media (prefers-reduced-motion:reduce){
  .slogan .hl{animation:none;background-position:0 0}
  .hero__glow,.btn{transform:none!important;transition-duration:.01ms}
  .core__row::before,.ccard::after{transition:none}
}
@media (hover:none){.core__row::before,.ccard::after{display:none}}
@media (max-width:760px){.totop{width:44px;height:44px;inset-block-end:16px;inset-inline-end:16px}}

/* ================= round 2: hierarchy, clarity, motion ================= */

/* hero slogan -> badge with live dot */
.slogan{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12.5px;color:var(--ink)}
html[lang="ar"] .slogan{font-size:15px;padding-inline:14px}

/* hero proof strip */
.hstats{grid-template-columns:repeat(2,max-content);gap:0 clamp(28px,min(4vw,57.6px),56px);margin-top:clamp(28px,calc(4vh / var(--z,1)),48px);border-top:0;width:max-content;max-width:100%}
.hstats>div,html[dir="rtl"] .hstats>div{padding:0}
.hstats>div+div{padding-inline-start:clamp(28px,min(4vw,57.6px),56px);border-inline-start:1px solid var(--line-2)}
.hstats dt,html[dir="rtl"] .hstats dt{font-size:clamp(26px,min(2.6vw,37.44px),36px);justify-content:flex-start}
.hstats dd{margin-top:6px;font-size:13px}
@media (max-width:520px){.hstats{grid-template-columns:1fr 1fr;width:100%}.hstats>div+div{padding-inline-start:20px}}
@media (max-height:760px){.hstats{display:none}}

/* section numbering + drawing divider */
main{counter-reset:sec}
.shead{counter-increment:sec;position:relative;border-top-color:transparent}
.shead::before{content:"0" counter(sec);position:absolute;inset-block-start:-9px;inset-inline-start:0;padding-inline-end:12px;background:var(--bg);font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--accent);font-variant-numeric:tabular-nums;z-index:1;unicode-bidi:isolate}
.contact .shead::before{background:var(--bg-2)}
.shead::after{content:"";position:absolute;inset-inline:0;inset-block-start:-1px;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:var(--o-x,0) 50%;transition:transform 1.4s var(--ease-io)}
html[dir="rtl"] .shead::after{--o-x:100%}
.shead.is-vis::after{transform:none}
.services .shead::before,.services .shead::after{display:none}
.services .shead .h2::before{content:"0" counter(sec);display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--accent)}

/* richer reveal: blur-to-sharp + slight scale */
.js .rv{filter:blur(8px);scale:.985;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),scale .9s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * .08s)}
.js .rv.is-in{filter:none;scale:1}
.js .hero .rv,.js .dhero .rv{filter:none;scale:1}

/* services: icon draws attention, title nudges */
.core__row .core__t{transition:transform .5s var(--ease)}
.core__row:hover .core__t{transform:translateX(6px)}
html[dir="rtl"] .core__row:hover .core__t{transform:translateX(-6px)}

/* products: soft depth on the stage, active tab ring */
.stage{transition:box-shadow .5s var(--ease),transform .6s var(--ease)}
.stage:hover{box-shadow:0 2px 4px rgba(35,31,32,.05),0 40px 70px -34px color-mix(in srgb,var(--sc,#5E56DE) 55%,transparent)}

/* header CTA gentle attention loop (stops on hover / reduced motion) */
.hdr .btn--lime{position:relative}
.hdr .btn--lime::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--cta);opacity:0;animation:v2ring 3.6s ease-out 2s infinite;pointer-events:none}
.hdr .btn--lime:hover::after{animation:none}
@keyframes v2ring{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.22,1.5)}}

/* contact card: floating info rows */
.ccard li{transition:transform .35s var(--ease)}
.ccard li:hover{transform:translateX(5px)}
html[dir="rtl"] .ccard li:hover{transform:translateX(-5px)}

@media (prefers-reduced-motion:reduce){
  .hdr .btn--lime::after{animation:none}
  .js .rv{filter:none;scale:1}
  .shead::after{transform:none;transition:none}
}

/* ===== round 3 — ideas adapted from 21st.dev ===== */

/* (Modern Hero) grid tiles light up around the cursor */
.hero__lit{position:absolute;inset:0;pointer-events:none;opacity:var(--lit,0);transition:opacity .5s;background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(240px circle at var(--lx,50%) var(--ly,50%),#000,transparent 70%);mask-image:radial-gradient(240px circle at var(--lx,50%) var(--ly,50%),#000,transparent 70%)}

/* (Logo Cloud 15) light-sweep label, marquee pauses on hover */
.clients__label{background:linear-gradient(100deg,var(--muted) 38%,var(--accent) 50%,var(--muted) 62%) 100% 0/280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v2sweep 6s var(--ease-io) 1.5s infinite}
html[dir="rtl"] .clients__label{animation-direction:reverse}
@keyframes v2sweep{0%{background-position:100% 0}45%,100%{background-position:0 0}}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{transition:opacity .3s,filter .3s,transform .4s var(--ease)}
.marquee img:hover{opacity:1;transform:scale(1.08)}

/* (Sign In Card) light beam travelling along the contact card border */
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.ccard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--beam),transparent 0 72%,var(--accent) 86%,var(--o5) 94%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:v2beam 7s linear infinite}
@keyframes v2beam{to{--beam:360deg}}

/* (Product Card) stage tilts toward the pointer with a glow */
.stage{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--sc,#5E56DE) 14%,transparent),transparent 70%)}
.stage:hover::after{opacity:1}

/* (Light Beam Footer) pointer glow moves through the giant wordmark */
.ftr__glow{width:100%;transition:opacity .4s}
.ftr__word{transition:filter .5s}

@media (prefers-reduced-motion:reduce){
  .clients__label{animation:none;color:var(--muted);-webkit-text-fill-color:currentColor;background:none}
  .ccard::before{animation:none;opacity:.5}
  .stage{transform:none}
}
@media (hover:none){.hero__lit,.stage::after{display:none}.stage{transform:none}}

/* ===== about: one clear statement + proof cards (hero strip removed to avoid duplicate numbers) ===== */
.about__p{max-width:30em;font-size:clamp(22px,min(2.4vw,34.56px),34px);line-height:1.28}
html[lang="ar"] .about__p{line-height:1.7}
.stats--about{grid-template-columns:1fr 1fr;gap:20px;max-width:680px;margin-top:clamp(36px,min(4.4vw,63.36px),60px)}
.stats--about>div,html[dir="rtl"] .stats--about>div{position:relative;overflow:hidden;padding:clamp(22px,min(2.6vw,37.44px),34px) 20px;border:1px solid var(--line-2);border-radius:24px;background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.stats--about>div::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--o5));transform:scaleX(0);transform-origin:var(--o-x,0) 50%;transition:transform .7s var(--ease-io)}
html[dir="rtl"] .stats--about>div::before{--o-x:100%}
.stats--about>div:hover{transform:translateY(-4px);border-color:var(--accent)}
.stats--about>div:hover::before{transform:none}
.stats--about dt,html[dir="rtl"] .stats--about dt{font-size:clamp(40px,min(4.6vw,66.24px),64px)}
.stats--about dd{margin-top:10px;font-size:15px}
@media (max-width:520px){.stats--about{grid-template-columns:1fr}}

/* ===== hero tidy: clean logo band, calmer badge, steadier spacing ===== */
.clients{position:relative;z-index:2;padding:22px 0 26px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid var(--line)}
.clients__label{margin-bottom:14px;font-size:13px;letter-spacing:.02em}
.marquee img{height:38px;max-width:150px}
.slogan{letter-spacing:.1em;font-size:12px}
.hero__title{margin-top:28px}
.hero__lead{margin-top:24px;max-width:500px}
.hero__cta{margin-top:36px}

/* ===== trusted-by band lives in About now ===== */
.about .clients{margin-top:clamp(48px,min(6vw,86.4px),84px);padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;z-index:1}
.about .clients__label{text-align:center;margin-bottom:22px}
.about .marquee img{height:42px;max-width:170px}
.hero{padding-bottom:clamp(48px,calc(8vh / var(--z,1)),96px)}

/* header logo bigger */
.hdr__brand .logo{height:38px}
@media (max-width:760px){.hdr__brand .logo{height:32px}}

/* ===== intro: typed slogan replaces the logo mark ===== */
.intro__type{max-width:min(min(88vw,1267.2px),900px);padding-inline:20px;text-align:center;font-size:clamp(22px,min(3.6vw,51.84px),46px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink);min-height:1.3em}
html[lang="ar"] .intro__type{letter-spacing:0;line-height:1.5}
.intro__type .hl{color:var(--accent)}
.intro__caret{display:inline-block;width:3px;height:1em;margin-inline-start:4px;vertical-align:-.12em;background:var(--accent);animation:v2caret .8s steps(1) infinite}
@keyframes v2caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.intro__caret{animation:none}}

/* intro: small typed line under the logo mark */
.intro__type{font-size:clamp(13px,min(1.3vw,18.72px),16px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:1.5em}
html[lang="ar"] .intro__type{letter-spacing:0;text-transform:none;font-size:clamp(15px,min(1.5vw,21.6px),18px)}
.intro__caret{width:2px;height:.95em}

/* ===== process + CTA band (restored) ===== */
.process .shead{margin-bottom:clamp(40px,min(5vw,72.0px),72px)}
.steps{list-style:none;margin:0;padding:0}
.js .steps.rv{filter:none;scale:1;transform:none;opacity:1}
.step span{display:block;transition:color .4s}
.step:hover span{color:var(--accent)}
.step b{box-shadow:0 0 0 0 transparent}
.steps.is-in .step b{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent)}
.ctaband .lead{margin-inline:auto;text-align:center}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:28px}
  .step{padding-top:0;padding-inline-start:68px;min-height:48px;padding-block:12px 0}
  .step::before,.step::after{inset-inline-start:23px;inset-inline-end:auto;inset-block-start:52px;inset-block-end:-30px;width:2px;height:auto}
  .step::after{transform:scaleY(0);transform-origin:50% 0}
  .steps.is-in .step::after{transform:scaleY(1)}
}

/* ===== products: bento grid (replaces tabs + stage) ===== */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(268px,auto);gap:16px}
.pcardx{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(22px,2.2vw,30px);border-radius:28px;border:1px solid var(--line);color:var(--ink);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 9%,var(--surface)),var(--surface) 62%);box-shadow:var(--shadow);transition:transform .55s var(--ease),border-color .35s,box-shadow .5s var(--ease)}
.pcardx--lg{grid-column:span 2}
.pcardx::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--c) 22%,transparent),transparent 70%)}
.pcardx::after{content:"";position:absolute;z-index:-1;inset-inline-end:-18%;inset-block-start:-30%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent 72%);opacity:.55;transition:opacity .5s,transform .8s var(--ease)}
.pcardx:hover,.pcardx:focus-visible{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 2px 4px rgba(35,31,32,.05),0 34px 60px -30px color-mix(in srgb,var(--c) 60%,transparent)}
.pcardx:hover::before,.pcardx:focus-visible::before{opacity:1}
.pcardx:hover::after,.pcardx:focus-visible::after{opacity:.95;transform:scale(1.18) translate(-6%,6%)}
.pcardx__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pcardx__n{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.pcardx__logo{display:flex;align-items:center;height:44px}
.pcardx__logo img{max-height:42px;max-width:150px;width:auto;object-fit:contain;transition:transform .5s var(--ease)}
.pcardx__logo--tall{height:56px}.pcardx__logo--tall img{max-height:54px}
.pcardx--lg .pcardx__logo img{max-height:46px;max-width:190px}
.pcardx:hover .pcardx__logo img{transform:scale(1.07)}
:root[data-theme="dark"] .pcardx--w .l-dark{filter:brightness(0) invert(1)}
.pcardx__body{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pcardx__cat{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pcardx__cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
html[lang="ar"] .pcardx__cat{letter-spacing:0;text-transform:none;font-size:13.5px}
.pcardx__t{display:block;margin-top:12px;font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.pcardx--lg .pcardx__t{font-size:clamp(23px,2.3vw,32px)}
html[lang="ar"] .pcardx__t{letter-spacing:0;line-height:1.4}
.pcardx__d{display:block;max-width:46ch;font-size:15px;line-height:1.55;color:var(--muted);max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s,margin .5s var(--ease)}
.pcardx--lg .pcardx__d{max-height:none;opacity:1;margin-top:12px}
.pcardx:hover .pcardx__d,.pcardx:focus-visible .pcardx__d{max-height:200px;opacity:1;margin-top:12px}
.pcardx__go{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);transition:background .3s,color .3s,border-color .3s,gap .35s var(--ease)}
.pcardx__go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
html[dir="rtl"] .pcardx__go svg{transform:scaleX(-1)}
.pcardx:hover .pcardx__go,.pcardx:focus-visible .pcardx__go{background:var(--c);border-color:var(--c);color:#fff;gap:14px}
.pcardx:hover .pcardx__go svg{transform:translateX(3px)}
html[dir="rtl"] .pcardx:hover .pcardx__go svg{transform:scaleX(-1) translateX(3px)}
/* staggered arrival */
.js .pcardx.rv{transform:translateY(46px) scale(.95);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),scale .9s var(--ease),border-color .35s,box-shadow .5s var(--ease);transition-delay:calc(var(--i) * .09s)}
.js .pcardx.rv.is-in{transform:none}
.js .pcardx.rv.is-in:hover,.js .pcardx.rv.is-in:focus-visible{transform:translateY(-8px);transition-delay:0s}
/* responsive */
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}.pcardx--lg{grid-column:span 2}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr;grid-auto-rows:auto}.pcardx--lg{grid-column:auto}}
@media (max-width:1100px),(hover:none){.pcardx__d{max-height:none;opacity:1;margin-top:12px}}
@media (prefers-reduced-motion:reduce){.pcardx,.pcardx::after,.pcardx__d{transition:none}.pcardx:hover{transform:none}.js .pcardx.rv{transform:none}}
/* fixed row height on desktop so hover expansion never shifts the page */
@media (min-width:1101px){.pgrid{grid-auto-rows:384px}}

/* ===== products v3: stacked sticky slides (replaces bento) ===== */
.products{overflow:clip}
.pstack{position:relative;padding-bottom:4vh}
.pslide{--top:calc(96px + var(--i) * 18px);position:sticky;top:var(--top);display:grid;grid-template-columns:1.05fr 1fr;min-height:430px;margin-bottom:clamp(36px,calc(14vh / var(--z,1)),130px);border-radius:32px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 4px rgba(35,31,32,.05),0 40px 70px -40px color-mix(in srgb,var(--c) 55%,transparent);transform-origin:50% 0;transform:scale(calc(1 - var(--k,0) * .06));filter:brightness(calc(1 - var(--k,0) * .06));will-change:transform}
.pslide:last-child{margin-bottom:0}
.pslide__txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:clamp(28px,4vw,56px)}
.pslide__n{display:flex;align-items:baseline;gap:8px;margin-bottom:22px;direction:ltr;unicode-bidi:isolate;color:var(--muted);font-variant-numeric:tabular-nums}
.pslide__n b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.08em}
.pslide__n i{font-style:normal;font-size:13px;letter-spacing:.1em}
.pslide__cat{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pslide__cat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent)}
html[lang="ar"] .pslide__cat{letter-spacing:0;text-transform:none;font-size:14px}
.pslide__t{margin-top:16px;font-size:clamp(26px,min(3vw,43.2px),42px);line-height:1.08;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
html[lang="ar"] .pslide__t{letter-spacing:0;line-height:1.35}
.pslide__d{margin:18px 0 30px;max-width:46ch;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--muted)}
.pslide__vis{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000))}
.pslide__vis::before{content:"";position:absolute;inset:-20%;z-index:-1;background:repeating-radial-gradient(circle at 70% 30%,transparent 0 46px,rgba(255,255,255,.13) 47px 48px);opacity:.9;transition:transform 1.2s var(--ease)}
.pslide:hover .pslide__vis::before{transform:scale(1.08)}
.pslide__big{position:absolute;inset-inline-end:6%;inset-block-end:-6%;z-index:-1;font-size:clamp(150px,18vw,280px);font-weight:700;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.16);direction:ltr}
.pslide__logo{display:flex;align-items:center;justify-content:center;width:min(62%,320px);transition:transform .8s var(--ease)}
.pslide:hover .pslide__logo{transform:scale(1.06)}
.pslide__logo img{max-width:100%;max-height:120px;width:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 8px 22px rgba(0,0,0,.18))}
.pslide--ink .pslide__logo img{filter:brightness(0) drop-shadow(0 8px 22px rgba(0,0,0,.08));opacity:.88}
.pslide--ink .pslide__big{color:rgba(0,0,0,.09)}
.pslide--ink .pslide__vis::before{background:repeating-radial-gradient(circle at 70% 30%,transparent 0 46px,rgba(0,0,0,.08) 47px 48px)}
:root[data-theme="dark"] .pslide{background:var(--surface)}
html[dir="rtl"] .pslide__vis{background:radial-gradient(120% 90% at 15% 10%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000))}
@media (max-width:900px){
  .pslide{--top:calc(78px + var(--i) * 12px);grid-template-columns:1fr;min-height:0;border-radius:26px}
  .pslide__vis{order:-1;min-height:170px}
  .pslide__logo{width:min(54%,210px)}
  .pslide__logo img{max-height:70px}
  .pslide__big{font-size:140px}
  .pslide__txt{padding:24px 22px 28px}
  .pslide__d{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){.pslide{transform:none;filter:none}.pslide__vis::before,.pslide__logo{transition:none}}

/* ===== products v4: tidy tiles + one detail panel (replaces stacked slides) ===== */
.pdeck{display:grid;gap:18px}
.ptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ptile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:122px;padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);text-align:start;color:var(--ink);cursor:pointer;transition:transform .45s var(--ease),border-color .3s,background .4s,color .4s,box-shadow .45s var(--ease)}
.ptile::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:var(--o-x,0) 50%;transition:transform .5s var(--ease-io)}
html[dir="rtl"] .ptile::after{--o-x:100%}
.ptile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 18px 34px -22px color-mix(in srgb,var(--c) 70%,transparent)}
.ptile__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ptile__n{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;transition:color .3s}
.ptile__logo{display:flex;align-items:center;height:32px}
.ptile__logo img{max-height:30px;max-width:118px;width:auto;object-fit:contain;transition:filter .3s,opacity .3s}
.ptile__cat{display:block;font-size:12.5px;line-height:1.3;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.ptile[aria-selected="true"]{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 22px 40px -22px color-mix(in srgb,var(--c) 80%,transparent)}
.ptile[aria-selected="true"] .ptile__n,.ptile[aria-selected="true"] .ptile__cat{color:rgba(255,255,255,.86)}
.ptile[aria-selected="true"] .ptile__logo img{filter:brightness(0) invert(1)}
.ptile--ink[aria-selected="true"]{color:var(--n5)}
.ptile--ink[aria-selected="true"] .ptile__n,.ptile--ink[aria-selected="true"] .ptile__cat{color:rgba(35,31,32,.78)}
.ptile--ink[aria-selected="true"] .ptile__logo img{filter:brightness(0)}
:root[data-theme="dark"] .ptile:not([aria-selected="true"]) .ptile__logo img{filter:brightness(0) invert(1);opacity:.78}
.ptile[aria-selected="true"]::after{display:none}
.pdeck__stage{display:grid}
.pdeck .pslide{position:relative;top:auto;grid-area:1/1;margin:0;filter:none;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility .55s;will-change:auto;box-shadow:var(--shadow)}
.pdeck .pslide.is-on{opacity:1;visibility:visible;transform:none}
.pdeck .pslide .pslide__vis::before{animation:v2drift 16s linear infinite}
@keyframes v2drift{to{transform:rotate(360deg)}}
.pdeck .pslide.is-on .pslide__txt>*{animation:v2rise .7s var(--ease) both}
.pdeck .pslide.is-on .pslide__txt>*:nth-child(2){animation-delay:.05s}
.pdeck .pslide.is-on .pslide__txt>*:nth-child(3){animation-delay:.1s}
.pdeck .pslide.is-on .pslide__txt>*:nth-child(4){animation-delay:.15s}
.pdeck .pslide.is-on .pslide__txt>*:nth-child(5){animation-delay:.2s}
@keyframes v2rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pdeck .pslide.is-on .pslide__logo{animation:v2pop .8s var(--ease) both .1s}
@keyframes v2pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@media (max-width:1100px){.ptiles{grid-template-columns:repeat(4,1fr)}.ptile{height:112px}}
@media (max-width:760px){.ptiles{grid-template-columns:repeat(2,1fr)}.ptile{height:104px;padding:14px}}
@media (prefers-reduced-motion:reduce){.pdeck .pslide .pslide__vis::before,.pdeck .pslide.is-on .pslide__txt>*,.pdeck .pslide.is-on .pslide__logo{animation:none}.pdeck .pslide{transition:none}}
/* tiles grow to fit their category line (long Arabic/English names) */
.ptile{height:auto;min-height:122px}
.ptile__cat{white-space:normal;overflow:visible}
@media (max-width:1100px){.ptile{height:auto;min-height:112px}}
@media (max-width:760px){.ptile{height:auto;min-height:118px}}

/* ===== products v5: orbit — logos on an ellipse around the selected product (desktop) ===== */
@media (min-width:1001px){
  .pdeck{position:relative;display:block;aspect-ratio:2/1.04;max-width:1160px;margin-inline:auto}
  .pdeck .ptiles{position:absolute;inset:0;display:block}
  .pdeck .ptiles::before{content:"";position:absolute;inset:10% 7%;border:1.5px dashed var(--line-2);border-radius:50%;pointer-events:none}
  .pdeck .ptile{position:absolute;left:calc(50% + 43% * cos(var(--a)));top:calc(50% + 40% * sin(var(--a)));translate:-50% -50%;display:grid;place-items:center;width:178px;height:72px;min-height:0;padding:10px 14px;border:1.5px solid transparent;border-radius:20px;background:transparent;box-shadow:none;color:var(--ink);transition:transform .5s var(--ease),background .35s,border-color .35s,box-shadow .5s var(--ease),opacity .7s var(--ease),scale .7s var(--ease);transition-delay:0s,0s,0s,0s,calc(var(--k) * .07s),calc(var(--k) * .07s)}
  .pdeck .ptile::after{display:none}
  .pdeck .ptile__row,.pdeck .ptile__cat{display:none}
  .pdeck .ptile__logo{height:auto;justify-content:center}
  .pdeck .ptile__logo img{max-width:150px;max-height:46px;opacity:.92}
  .pdeck .ptile:hover{transform:scale(1.07);border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--surface) 60%,transparent);box-shadow:none}
  .pdeck .ptile[aria-selected="true"]{background:var(--surface);border-color:var(--c);color:var(--ink);transform:scale(1.14);z-index:2;box-shadow:0 18px 44px -18px color-mix(in srgb,var(--c) 70%,transparent),0 0 0 6px color-mix(in srgb,var(--c) 14%,transparent)}
  .pdeck .ptile[aria-selected="true"] .ptile__logo img{filter:none;opacity:1}
  .pdeck .ptile--ink[aria-selected="true"] .ptile__logo img{filter:none}
  :root[data-theme="dark"] .pdeck .ptile[aria-selected="true"] .ptile__logo img{filter:brightness(0) invert(1)}
  .pdeck:not(.is-vis) .ptile{opacity:0;scale:.6}
  .pdeck__stage{position:absolute;left:50%;top:50%;translate:-50% -50%;width:44%}
  .pdeck__stage::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;border:1px solid var(--line);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sc,var(--accent)) 14%,transparent),transparent 78%)}
  .pdeck .pslide{display:block;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;text-align:center}
  .pdeck .pslide__vis,.pdeck .pslide__n{display:none}
  .pdeck .pslide__txt{align-items:center;padding:0}
  .pdeck .pslide__t{font-size:clamp(24px,min(2.5vw,36px),34px)}
  .pdeck .pslide__d{margin:14px 0 22px;font-size:clamp(14.5px,1.1vw,16px);max-width:44ch}
  .pdeck .pslide .btn{height:46px;font-size:14.5px}
  .pdeck .pslide{--sc:var(--c)}
}
@media (min-width:1001px){
  .pdeck .ptile__logo{width:100%;min-width:0}
  .pdeck .ptile__logo img{height:40px;width:auto;max-width:150px;max-height:none}
}
@media (min-width:1001px){
  .pdeck .ptile:nth-child(4) .ptile__logo img{height:60px}
  .pdeck .ptile:nth-child(7) .ptile__logo img{height:30px;max-width:158px}
}
@media (min-width:1001px){:root[data-theme="dark"] .pdeck .pslide{background:none}}

/* ===== products v6: expanding rails (21st "Hover Expand Gallery" idea) ===== */
.pacc{display:flex;gap:8px;height:clamp(500px,44vw,560px)}
.pacc__item{position:relative;isolation:isolate;flex:0 0 64px;min-width:0;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--c) 11%,var(--surface)));transition:flex-grow .85s var(--ease),border-color .35s,box-shadow .6s var(--ease),opacity .7s var(--ease),translate .7s var(--ease);transition-delay:0s,0s,0s,calc(var(--i) * .06s),calc(var(--i) * .06s)}
.pacc:not(.is-vis) .pacc__item{opacity:0;translate:0 40px}
.pacc__item.is-on{flex:1 1 64px;border-color:transparent;box-shadow:0 2px 4px rgba(35,31,32,.05),0 40px 70px -40px color-mix(in srgb,var(--c) 65%,transparent)}
.pacc__tab{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 20px;background:none;border:0;cursor:pointer;color:var(--ink);transition:opacity .35s}
.pacc__item.is-on .pacc__tab{opacity:0;pointer-events:none}
.pacc__item:not(.is-on):hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.pacc__tn{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr}
.pacc__tv{writing-mode:vertical-rl;transform:rotate(180deg);font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap;flex:1;display:flex;align-items:center;justify-content:flex-end;transition:color .3s}
html[lang="ar"] .pacc__tv{transform:none;font-size:16px}
.pacc__item:not(.is-on):hover .pacc__tv{color:var(--c)}
.pacc__dot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent)}
.pacc__panel{position:absolute;inset:0;min-width:min(520px,calc(100vw - 80px));display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(26px,3vw,38px);color:#fff;opacity:0;visibility:hidden;background:radial-gradient(120% 90% at 85% 8%,color-mix(in srgb,var(--c) 68%,#fff),var(--c) 52%,color-mix(in srgb,var(--c) 68%,#000));transition:opacity .35s var(--ease),visibility .35s}
.pacc__panel::before{content:"";position:absolute;inset:-25%;z-index:-1;background:repeating-radial-gradient(circle at 78% 22%,transparent 0 46px,rgba(255,255,255,.12) 47px 48px);animation:v2drift 24s linear infinite}
.pacc__item.is-on .pacc__panel{opacity:1;visibility:visible;transition-delay:.28s,.28s}
.pacc__big{position:absolute;inset-inline-end:5%;inset-block-end:-7%;z-index:-1;font-size:clamp(170px,19vw,300px);font-weight:700;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.14);direction:ltr}
.pacc__logo{display:flex;align-items:center;height:64px}
.pacc__logo img{max-width:230px;max-height:58px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.pacc__cat{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.pacc__cat::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
html[lang="ar"] .pacc__cat{letter-spacing:0;text-transform:none;font-size:14px}
.pacc__t{margin-top:14px;font-size:clamp(26px,min(2.8vw,40px),38px);line-height:1.08;font-weight:600;letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
html[lang="ar"] .pacc__t{letter-spacing:0;line-height:1.35;max-width:none}
.pacc__d{margin:14px 0 24px;max-width:42ch;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.9)}
.pacc__panel .btn{background:#fff;color:var(--n5);border-color:#fff}
.pacc__panel .btn:hover{background:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.pacc__item--ink .pacc__panel{color:var(--n5)}
.pacc__item--ink .pacc__logo img{filter:brightness(0) drop-shadow(0 6px 18px rgba(0,0,0,.08))}
.pacc__item--ink .pacc__cat{color:rgba(35,31,32,.8)}.pacc__item--ink .pacc__cat::before{background:var(--n5)}
.pacc__item--ink .pacc__d{color:rgba(35,31,32,.82)}
.pacc__item--ink .pacc__big{color:rgba(0,0,0,.08)}
.pacc__item--ink .pacc__panel .btn{background:var(--n5);color:#fff;border-color:var(--n5)}
.pacc__item--ink .pacc__panel::before{background:repeating-radial-gradient(circle at 78% 22%,transparent 0 46px,rgba(0,0,0,.07) 47px 48px)}
:root[data-theme="dark"] .pacc__item:not(.is-on){background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--c) 16%,var(--surface)))}
/* mobile / tablet: vertical accordion */
@media (max-width:1000px){
  .pacc{flex-direction:column;height:auto;gap:10px}
  .pacc__item{flex:none;height:64px;transition:height .7s var(--ease),border-color .35s,box-shadow .6s var(--ease),opacity .7s var(--ease),translate .7s var(--ease)}
  .pacc__item.is-on{height:auto;min-height:420px}
  .pacc__tab{flex-direction:row;padding:0 20px;gap:14px}
  .pacc__tv{writing-mode:horizontal-tb;transform:none;flex:1;justify-content:flex-start;font-size:16px}
  .pacc__dot{order:3}
  .pacc__panel{position:relative;min-width:0;min-height:420px}
  .pacc__item:not(.is-on) .pacc__panel{position:absolute}
  .pacc__logo img{max-width:190px;max-height:48px}
}
@media (prefers-reduced-motion:reduce){.pacc__item,.pacc__panel{transition:none}.pacc__panel::before{animation:none}}

/* ===== products v6.1: richer motion ===== */
.pacc{--dir:1;--acc:cubic-bezier(.7,0,.16,1)}
.pacc__item{transition:flex-grow 1s var(--acc),border-color .35s,box-shadow .6s var(--ease),opacity .7s var(--ease),translate .7s var(--ease),transform .5s var(--ease);transition-delay:0s,0s,0s,calc(var(--i) * .06s),calc(var(--i) * .06s),0s}
/* rails: lift, name slides, dot pulses */
.pacc__item:not(.is-on):hover{transform:translateY(-8px)}
.pacc__item:not(.is-on):hover .pacc__tv{transform:rotate(180deg) translateY(-4px)}
html[lang="ar"] .pacc__item:not(.is-on):hover .pacc__tv{transform:translateY(-4px)}
.pacc__tv{transition:color .3s,transform .45s var(--ease)}
.pacc__item:not(.is-on):hover .pacc__dot{animation:paccDot 1.4s ease-out infinite}
@keyframes paccDot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.pacc__item:not(.is-on)::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--c) 22%,transparent))}
.pacc__item:not(.is-on):hover::before{opacity:1}
.pacc__tab{z-index:2}
/* panel: pointer spotlight */
.pacc__panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(360px circle at var(--px,70%) var(--py,25%),rgba(255,255,255,.22),transparent 65%);opacity:0;transition:opacity .4s}
.pacc__item.is-on .pacc__panel:hover::after{opacity:1}
.pacc__item--ink .pacc__panel::after{background:radial-gradient(360px circle at var(--px,70%) var(--py,25%),rgba(255,255,255,.4),transparent 65%)}
.pacc__logo{transform:translate(var(--lx,0),var(--ly,0));transition:transform .35s var(--ease)}
/* staggered content, direction-aware */
@keyframes paccIn{from{opacity:0;transform:translateX(calc(var(--dir) * 34px)) translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes paccLogo{from{opacity:0;transform:scale(.8) translateX(calc(var(--dir) * -24px));filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes paccBig{from{opacity:0;transform:translateY(26%) scale(.82)}to{opacity:1;transform:none}}
.pacc__item.is-on .pacc__logo{animation:paccLogo .9s var(--ease) .32s both}
.pacc__item.is-on .pacc__cat{animation:paccIn .8s var(--ease) .42s both}
.pacc__item.is-on .pacc__t{animation:paccIn .85s var(--ease) .5s both}
.pacc__item.is-on .pacc__d{animation:paccIn .85s var(--ease) .58s both}
.pacc__item.is-on .pacc__panel .btn{animation:paccIn .85s var(--ease) .66s both}
.pacc__item.is-on .pacc__big{animation:paccBig 1.2s var(--ease) .25s both}
/* autoplay progress */
.pacc__prog{position:absolute;inset-inline:0;inset-block-end:0;height:4px;background:rgba(255,255,255,.28);transform:scaleX(0);transform-origin:var(--o-x,0) 50%;pointer-events:none}
html[dir="rtl"] .pacc__prog{--o-x:100%}
.pacc__item--ink .pacc__prog{background:rgba(0,0,0,.22)}
.pacc.is-play .pacc__item.is-on .pacc__prog{animation:paccProg 7s linear forwards}
@keyframes paccProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:1000px){.pacc__item:not(.is-on):hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .pacc__item.is-on .pacc__logo,.pacc__item.is-on .pacc__cat,.pacc__item.is-on .pacc__t,.pacc__item.is-on .pacc__d,.pacc__item.is-on .pacc__panel .btn,.pacc__item.is-on .pacc__big,.pacc__item:not(.is-on):hover .pacc__dot{animation:none}
  .pacc__prog{display:none}.pacc__item:not(.is-on):hover{transform:none}
}

/* ===== products v7: boud.ai-style cards ===== */
.pgrid2{display:grid;gap:14px}
.prow{display:flex;gap:14px;height:400px}
.pcd{--bgc:color-mix(in srgb,var(--ink) 5%,var(--surface));position:relative;isolation:isolate;overflow:hidden;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:30px 28px 26px;border-radius:26px;border:1px solid var(--line);background:var(--bgc);color:var(--ink);transition:flex-grow .85s cubic-bezier(.7,0,.16,1),background .5s,border-color .4s,box-shadow .6s var(--ease),color .4s,opacity .8s var(--ease),translate .8s var(--ease);transition-delay:0s,0s,0s,0s,0s,calc(var(--i) * .07s),calc(var(--i) * .07s)}
.pgrid2:not(.is-vis) .pcd{opacity:0;translate:0 44px}
.pcd:hover,.pcd:focus-visible{flex-grow:2.15;background:var(--c);border-color:transparent;color:#fff;box-shadow:0 40px 70px -40px color-mix(in srgb,var(--c) 70%,transparent)}
.pcd--ink:hover,.pcd--ink:focus-visible{color:var(--n5)}
.pcd:focus-visible{outline-offset:-3px}
/* giant faded logo of this product as the card backdrop */
.pcd__bg{position:absolute;z-index:-1;top:-6%;left:46%;height:72%;display:block;pointer-events:none;opacity:.07;transition:opacity .5s,transform 1s var(--ease),left .85s cubic-bezier(.7,0,.16,1)}
.pcd__bg img{height:100%;width:auto;max-width:none;display:block;filter:brightness(0)}
:root[data-theme="dark"] .pcd__bg{opacity:.09}
:root[data-theme="dark"] .pcd__bg img{filter:brightness(0) invert(1)}
.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg{opacity:.2;left:40%;transform:scale(1.06)}
.pcd:hover .pcd__bg img,.pcd:focus-visible .pcd__bg img{filter:brightness(0) invert(1)}
.pcd--ink:hover .pcd__bg img,.pcd--ink:focus-visible .pcd__bg img{filter:brightness(0)}
.pcd--ink:hover .pcd__bg,.pcd--ink:focus-visible .pcd__bg{opacity:.13}
.pcd__name{font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.15}
.pcd__mid{display:flex;flex-direction:column;gap:16px}
.pcd__cat{display:flex;align-items:center;gap:14px;max-height:0;opacity:0;overflow:hidden;font-size:13.5px;font-weight:500;white-space:nowrap;transition:max-height .5s var(--ease),opacity .4s}
.pcd__cat::before{content:"";flex:none;width:44px;height:1.5px;background:currentColor;opacity:.7}
.pcd:hover .pcd__cat,.pcd:focus-visible .pcd__cat{max-height:30px;opacity:1;transition-delay:.25s}
.pcd__logo{display:flex;align-items:center;height:62px}
.pcd__logo img{max-width:100%;max-height:56px;width:auto;object-fit:contain;transition:filter .4s}
:root[data-theme="dark"] .pcd__logo img{filter:brightness(0) invert(1)}
.pcd:hover .pcd__logo img,.pcd:focus-visible .pcd__logo img{filter:brightness(0) invert(1)}
.pcd--ink:hover .pcd__logo img,.pcd--ink:focus-visible .pcd__logo img{filter:brightness(0)}
.pcd__bot{position:relative;display:grid;min-height:150px;align-items:end}
.pcd__n,.pcd__more{grid-area:1/1}
.pcd__n{font-size:clamp(54px,5.4vw,78px);font-weight:600;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--ink) 26%,transparent);font-variant-numeric:tabular-nums;direction:ltr;justify-self:start;transition:opacity .3s}
.pcd:hover .pcd__n,.pcd:focus-visible .pcd__n{opacity:0}
.pcd__more{display:flex;flex-direction:column;align-items:flex-start;gap:16px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .5s var(--ease)}
.pcd:hover .pcd__more,.pcd:focus-visible .pcd__more{opacity:1;transform:none;transition-delay:.3s,.3s}
.pcd__d{display:block;max-width:44ch;font-size:15px;line-height:1.55;opacity:.94}
.pcd__go{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;background:#fff;color:var(--n5)}
.pcd--ink .pcd__go{background:var(--n5);color:#fff}
.pcd__go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
html[dir="rtl"] .pcd__go svg{transform:scaleX(-1)}
.pcd:hover .pcd__go svg{transform:translateX(3px)}
html[dir="rtl"] .pcd:hover .pcd__go svg{transform:scaleX(-1) translateX(3px)}
html[dir="rtl"] .pcd__bg{left:auto;right:46%}
html[dir="rtl"] .pcd:hover .pcd__bg{right:40%;left:auto}
/* tablet / phone: two then one column, details always visible */
@media (max-width:1000px){
  .prow{flex-wrap:wrap;height:auto}
  .pcd{flex:1 1 calc(50% - 7px);min-height:330px}
  .pcd:hover,.pcd:focus-visible{flex-grow:1;background:var(--bgc);color:var(--ink)}
  .pcd__cat{max-height:30px;opacity:1}
  .pcd__n{display:none}.pcd__more{opacity:1;transform:none;pointer-events:auto}
  .pcd__bot{min-height:0}
  .pcd__go{background:var(--c);color:#fff}.pcd--ink .pcd__go{background:var(--c);color:var(--n5)}
  .pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg{opacity:.07;left:46%;transform:none}
  :root[data-theme="dark"] .pcd:hover .pcd__bg{opacity:.09}
  .pcd:hover .pcd__bg img{filter:brightness(0)}:root[data-theme="dark"] .pcd:hover .pcd__bg img{filter:brightness(0) invert(1)}
  .pcd:hover .pcd__logo img{filter:none}:root[data-theme="dark"] .pcd:hover .pcd__logo img{filter:brightness(0) invert(1)}
}
@media (max-width:620px){.pcd{flex-basis:100%;min-height:300px}}
@media (prefers-reduced-motion:reduce){.pcd,.pcd__bg,.pcd__more,.pcd__cat{transition:none}}
/* backdrop shows the logo's icon, fading its wordmark */
.pcd__bg img{-webkit-mask-image:linear-gradient(90deg,#000 28%,transparent 58%);mask-image:linear-gradient(90deg,#000 28%,transparent 58%)}
html[dir="rtl"] .pcd__bg img{-webkit-mask-image:linear-gradient(90deg,#000 28%,transparent 58%);mask-image:linear-gradient(90deg,#000 28%,transparent 58%)}

/* ===== products v7.1: tidy pass ===== */
.prow{height:372px;gap:14px}
.pcd{padding:28px 26px 24px;justify-content:flex-start;gap:0}
.pcd:hover,.pcd:focus-visible{flex-grow:1.8}
.pcd__name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(18px,1.55vw,22px)}
/* everything left-aligned in one column: name, (category), logo, … number pinned to the bottom */
.pcd__mid{margin-top:20px;gap:14px}
.pcd__logo{width:176px;max-width:100%;height:48px;align-items:center}
.pcd__logo img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:left center}
.pcd__bot{margin-top:auto;min-height:0}
.pcd__more{align-self:end}
.pcd__d{font-size:14.5px;max-width:40ch}
.pcd__n{font-size:clamp(46px,4.4vw,64px)}
/* uniform backdrop: icon cropped into the same corner box on every card */
.pcd__bg,html[dir="rtl"] .pcd__bg{top:-26px;left:auto;right:-38px;width:240px;height:240px;overflow:hidden;opacity:.085;transform-origin:100% 0}
html[dir="rtl"] .pcd__bg{right:auto;left:-38px;transform-origin:0 0}
.pcd__bg img{height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--f,.32) * 100% - 1%),transparent calc(var(--f,.32) * 100% + 7%));mask-image:linear-gradient(90deg,#000 calc(var(--f,.32) * 100% - 1%),transparent calc(var(--f,.32) * 100% + 7%))}
.pcd--stk .pcd__bg img{height:215%;-webkit-mask-image:linear-gradient(180deg,#000 36%,transparent 48%);mask-image:linear-gradient(180deg,#000 36%,transparent 48%)}
:root[data-theme="dark"] .pcd__bg{opacity:.1}
.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg,html[dir="rtl"] .pcd:hover .pcd__bg{left:auto;right:-38px;opacity:.2;transform:scale(1.14)}
html[dir="rtl"] .pcd:hover .pcd__bg{right:auto;left:-38px}
.pcd--ink:hover .pcd__bg,.pcd--ink:focus-visible .pcd__bg{opacity:.14}
@media (max-width:1000px){
  .pcd__bg,.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg{transform:none;left:auto;right:-38px;opacity:.085}
  html[dir="rtl"] .pcd__bg,html[dir="rtl"] .pcd:hover .pcd__bg{right:auto;left:-38px}
  :root[data-theme="dark"] .pcd__bg,:root[data-theme="dark"] .pcd:hover .pcd__bg{opacity:.1}
  .pcd{min-height:320px}
  .pcd__bot{margin-top:22px}
}

/* products v8 — tall columns side by side, hover expands one */
.pgrid2{display:block}
.prow{flex-wrap:nowrap;height:clamp(500px,44vw,600px);gap:12px}
.pcd{padding:24px 22px;justify-content:flex-start;gap:0;min-height:0;flex:1 1 0}
.pcd:hover,.pcd:focus-visible{flex-grow:6}
.pcd__n{position:absolute;top:22px;inset-inline-start:22px;font-size:clamp(34px,3.2vw,48px);justify-self:auto}
.pcd__bot{position:static;margin:0;min-height:0}
.pcd__name{position:absolute;bottom:24px;inset-inline-start:22px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(17px,1.5vw,21px);overflow:visible;text-overflow:clip;transition:opacity .3s}
.pcd:hover .pcd__name,.pcd:focus-visible .pcd__name{opacity:0}
.pcd__mid,.pcd__more{width:min(340px,26vw);max-width:none;opacity:0;pointer-events:none;transition:opacity .3s,transform .5s var(--ease)}
.pcd__mid{margin-top:0;gap:18px;transform:translateY(10px)}
.pcd__cat{max-height:30px;opacity:1;transition:none}
.pcd__more{position:absolute;bottom:24px;inset-inline-start:22px;align-self:auto;transform:translateY(14px)}
.pcd:hover .pcd__mid,.pcd:focus-visible .pcd__mid,.pcd:hover .pcd__more,.pcd:focus-visible .pcd__more{opacity:1;transform:none;pointer-events:auto;transition-delay:.32s}
.pcd__logo{width:200px;height:54px}
.pcd__d{font-size:14.5px;max-width:34ch}
.pcd__bg,html[dir="rtl"] .pcd__bg,.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg,html[dir="rtl"] .pcd:hover .pcd__bg{top:84px;left:-14px;right:auto;width:210px;height:210px;transform-origin:0 0}
@media (max-width:1000px){
  .prow{overflow-x:auto;scroll-snap-type:x mandatory;height:460px;padding-bottom:8px;margin-inline:calc(var(--gut,20px) * -1);padding-inline:var(--gut,20px);scrollbar-width:none}
  .prow::-webkit-scrollbar{display:none}
  .pcd,.pcd:hover,.pcd:focus-visible{flex:0 0 min(78vw,320px);scroll-snap-align:start;min-height:0;background:var(--bgc);color:var(--ink)}
  .pcd__name{display:none}
  .pcd__n{display:block}
  .pcd__mid,.pcd__more{width:auto;max-width:100%;opacity:1;transform:none;pointer-events:auto}
  .pcd__mid{margin-top:84px}
  .pcd__more{inset-inline-end:22px}
  .pcd__bg,.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg{top:-10px;left:auto;right:-40px;width:200px;height:200px;opacity:.085;transform:none}
  html[dir="rtl"] .pcd__bg,html[dir="rtl"] .pcd:hover .pcd__bg{right:auto;left:-40px}
  :root[data-theme="dark"] .pcd__bg,:root[data-theme="dark"] .pcd:hover .pcd__bg{opacity:.1}
}

/* v8.1 — no numbers/vertical names; logo sits at the bottom, glides to the top on hover */
.pcd__n,.pcd__name{display:none}
.pcd__mid{position:static;width:auto;opacity:1;transform:none;pointer-events:none;margin:0;transition:none}
.pcd__cat{opacity:0;transition:opacity .3s}
.pcd:hover .pcd__cat,.pcd:focus-visible .pcd__cat{opacity:1;transition-delay:.4s}
.pcd__logo{position:absolute;inset-inline-start:14px;top:calc(100% - 66px);width:calc(100% - 28px);height:42px;transition:top .85s cubic-bezier(.7,0,.16,1),width .85s cubic-bezier(.7,0,.16,1),height .85s cubic-bezier(.7,0,.16,1),inset-inline-start .85s cubic-bezier(.7,0,.16,1)}
.pcd__logo img{object-position:center;transition:filter .4s}
.pcd:hover .pcd__logo,.pcd:focus-visible .pcd__logo{inset-inline-start:22px;top:62px;width:200px;height:54px}
.pcd:hover .pcd__logo img,.pcd:focus-visible .pcd__logo img{object-position:left center}
.pcd__bg,html[dir="rtl"] .pcd__bg,.pcd:hover .pcd__bg,.pcd:focus-visible .pcd__bg,html[dir="rtl"] .pcd:hover .pcd__bg{top:-20px}
@media (max-width:1000px){
  .pcd__logo,.pcd:hover .pcd__logo{position:static;width:200px;height:54px;margin-top:14px}
  .pcd__logo img{object-position:left center}
  .pcd__cat{opacity:1}
  .pcd__mid{margin-top:0;pointer-events:auto}
}
.pcd__mid{width:min(340px,calc(100% - 44px))}
.pcd__cat{white-space:normal;font-size:13px;gap:10px}
.pcd__cat::before{width:28px}
@media (max-width:1000px){.pcd__mid{width:auto}}

/* v8.2 — collapsed logo reads vertically, turns upright on hover */
.pcd__logo{inset-inline-start:auto;left:calc(50% - 21px);top:calc(100% - 24px);width:170px;height:42px;transform-origin:0 0;transform:rotate(-90deg);transition:top .85s cubic-bezier(.7,0,.16,1),left .85s cubic-bezier(.7,0,.16,1),width .85s cubic-bezier(.7,0,.16,1),height .85s cubic-bezier(.7,0,.16,1),transform .85s cubic-bezier(.7,0,.16,1)}
.pcd:hover .pcd__logo,.pcd:focus-visible .pcd__logo{inset-inline-start:auto;left:22px;top:62px;width:200px;height:54px;transform:none}
@media (max-width:1000px){
  .pcd__logo,.pcd:hover .pcd__logo{left:auto;top:auto;transform:none}
}

/* v8.3 — Boud wordmark as the faded backdrop of every card */
.pcd__bg{display:none}
.pcd::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(50% - 45px);top:30px;width:90px;aspect-ratio:2312/983;background:var(--ink);opacity:.07;-webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat;transition:left .85s cubic-bezier(.7,0,.16,1),top .85s cubic-bezier(.7,0,.16,1),width .85s cubic-bezier(.7,0,.16,1),opacity .5s,background .4s}
:root[data-theme="dark"] .pcd::before{background:#fff;opacity:.09}
.pcd:hover::before,.pcd:focus-visible::before{left:calc(100% - 230px);top:150px;width:280px;background:#fff;opacity:.14}
.pcd--ink:hover::before,.pcd--ink:focus-visible::before{background:var(--n5);opacity:.12}
@media (max-width:1000px){
  .pcd::before,.pcd:hover::before{left:auto;right:-30px;top:-4px;width:220px;background:var(--ink);opacity:.07}
  :root[data-theme="dark"] .pcd::before,:root[data-theme="dark"] .pcd:hover::before{background:#fff;opacity:.09}
}

/* v8.4 — Boud swirl mark as backdrop (not the wordmark) */
.pcd::before{aspect-ratio:1439/1109;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;left:calc(50% - 80px);top:28px;width:160px;background:var(--accent,var(--ink));opacity:.16}
:root[data-theme="dark"] .pcd::before{background:var(--accent,#fff);opacity:.2}
.pcd:hover::before,.pcd:focus-visible::before{left:calc(100% - 270px);top:130px;width:360px;background:#fff;opacity:.15}
.pcd--ink:hover::before,.pcd--ink:focus-visible::before{background:var(--n5);opacity:.1}
@media (max-width:1000px){
  .pcd::before,.pcd:hover::before{left:auto;right:-50px;top:-10px;width:240px;background:var(--accent,var(--ink));opacity:.14}
  :root[data-theme="dark"] .pcd::before,:root[data-theme="dark"] .pcd:hover::before{background:var(--accent,#fff);opacity:.2}
}

/* service-page heroes follow the home hero: grid + pointer light, drifting ribbons, halo, badge */
.dhero .mk{translate:calc(var(--mx,0) * var(--px,0px)) calc(var(--my,0) * var(--py,0px));transition:translate .8s var(--ease)}
.dhero .mk--a{width:min(min(78vw,1123.2px),1180px);inset-inline-end:max(-24vw,-345.6px);top:50%;bottom:auto;margin-top:calc(min(min(78vw,1123.2px),1180px) * -.42);opacity:1}
.dhero .mk--b{opacity:1}
html[dir="rtl"] .dhero__bg{transform:none}
.dhero__wrap{justify-content:flex-start}
.dhero__in{position:relative}
.dhero__t{margin-top:28px}
.dhero__p{max-width:540px}
@media (max-width:760px){.dhero .mk--a,.dhero .mk--b{opacity:.7}}

/* footer: Products column, 4 + 4 */
.fprod__l{display:grid;grid-template-columns:repeat(2,auto);gap:0 clamp(28px,min(3.4vw,49px),56px)}
.fprod__l ul{display:grid;gap:20px;align-content:start}
@media (max-width:760px){.fprod{grid-column:1/-1}}
.fprod__l a{white-space:nowrap}
@media (max-width:1180px){.ftr__top{grid-template-columns:1fr}.ftr__cols{justify-content:start;gap:32px clamp(32px,6vw,72px)}}
.ftr__cols a{white-space:nowrap}
.ftr__top{grid-template-columns:minmax(220px,.65fr) minmax(0,2fr)}
.ftr__cols{gap:clamp(28px,min(4.2vw,60px),72px)}
.fprod__l{gap:0 clamp(28px,min(3vw,44px),52px)}
@media (max-width:1180px){.ftr__top{grid-template-columns:1fr}.ftr__cols{justify-content:start;gap:32px clamp(36px,6vw,80px)}}
@media (max-width:760px){.ftr__cols a{white-space:normal}}