/* ==========================================================================
   NEWTECX — Products
   The Newtecx product portfolio: Sanad as the featured hero, a portfolio index,
   one featured application on navy, the other applications on a soft neutral
   band, and a compact closing invitation. Built on newtecx.css (tokens, type,
   buttons, reveal, header, footer); every rule here is scoped to pd-* classes.
   Logical properties only, so Arabic (RTL) needs no mirrored copies.
   Section rhythm: navy → white → navy → light → white → (navy footer).
   ========================================================================== */

.pd-page main [id]{scroll-margin-top:calc(var(--header-h) + 20px);}
.pd-k{display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.pd-k.blue{color:var(--blue);}
html[dir="rtl"] .pd-k{letter-spacing:.02em;}
.pd-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.pd-bar{display:flex; gap:6px; padding:10px 12px; background:#eef1f7; border-bottom:1px solid var(--line);}
.pd-bar i{width:9px; height:9px; border-radius:50%; background:#cfd5e2;}

/* ==========================================================================
   1. SANAD — featured hero (navy)
   ========================================================================== */
.pd-hero{position:relative; overflow:hidden; isolation:isolate; color:#fff; padding-block:clamp(40px,5vw,72px) clamp(36px,4vw,56px);
  background:radial-gradient(900px 600px at 78% 18%, rgba(42,107,255,.28), transparent 62%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%);}
.pd-hero .glow, .pd-hero .dotgrid{z-index:-1;}
.pd-hero-in{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(32px,4.5vw,64px); align-items:center;}
.pd-hero .crumbs{margin-bottom:22px;}
.pd-hero-logo{display:block; height:46px; width:auto; margin-top:24px;}
.pd-hero .h1{margin-top:20px; max-width:600px; font-size:clamp(34px,3.9vw,54px);}
html[dir="rtl"] .pd-hero .h1{line-height:1.25; letter-spacing:0;}
.pd-hero .lead{margin-top:18px; max-width:560px; font-size:clamp(16.5px,1.3vw,19px); color:rgba(228,236,252,.8);}
.pd-hero-val{margin-top:24px; gap:10px;}
.pd-hero-val li{font-size:15.5px; color:rgba(255,255,255,.9);}

/* the product, as it is: a real Sanad screen with a second screen and Sanad AI beside it */
.pd-hero-media{position:relative; padding-bottom:9%; padding-top:14px; margin-inline-end:clamp(-48px,-3vw,0px);}
.pd-win{position:relative; margin:0; border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.16); box-shadow:0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 8px rgba(255,255,255,.035);}
.pd-win img{display:block; width:100%; height:auto;}
.pd-win figcaption, .pd-float figcaption{position:absolute; inset-inline-start:14px; bottom:14px; max-width:calc(100% - 28px); padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:700; line-height:1.3; color:#fff; background:rgba(14,27,51,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.pd-float{position:absolute; margin:0; width:31%; inset-inline-end:-2%; bottom:0; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:0 34px 60px -26px rgba(0,0,0,.7);}
.pd-float img{display:block; width:100%; height:auto;}
.pd-float figcaption{inset-inline-start:8px; bottom:8px; font-size:11.5px; padding:5px 10px;}
.pd-ai{position:absolute; top:-6px; inset-inline-end:6%; display:flex; align-items:center; gap:11px; padding:9px 16px 9px 9px; border-radius:16px; color:#fff; background:rgba(14,27,51,.82); border:1px solid rgba(143,182,255,.28); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 20px 40px -24px rgba(0,0,0,.8); transition:transform var(--hover) var(--ease), border-color var(--hover) var(--ease);}
html[dir="rtl"] .pd-ai{padding:9px 9px 9px 16px;}
.pd-ai:hover{transform:translateY(-2px); border-color:var(--blue-soft);}
.pd-ai-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(140deg, var(--blue) 0%, #6a4cff 100%);}
.pd-ai-ic img{width:20px; height:auto;}
.pd-ai b{display:block; font-size:14px; font-weight:800; line-height:1.25;}
.pd-ai small{display:block; font-size:12px; line-height:1.3; color:var(--text-dark-2);}

/* the eight Sanad products, one tap each */
.pd-suite-wrap{margin-top:clamp(36px,4.5vw,60px);}
.pd-suite{padding:16px 16px 12px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.pd-suite-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 20px; padding:2px 8px 12px;}
.pd-suite .pd-k{color:var(--blue-soft);}
.pd-trust{font-size:11.5px; font-weight:700; letter-spacing:.14em; color:rgba(170,200,255,.55);}
html[dir="rtl"] .pd-trust{letter-spacing:.02em;}
.pd-suite-l{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;}
.pd-suite-l a{display:flex; align-items:center; gap:12px; height:100%; padding:10px; border-radius:13px; transition:background-color var(--hover) var(--ease);}
.pd-suite-l a:hover{background:rgba(255,255,255,.07);}
.pd-suite-l a:focus-visible{outline:2px solid var(--blue-soft); outline-offset:-2px;}
.pd-ic{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px; color:color-mix(in srgb, var(--c) 40%, #fff); background:color-mix(in srgb, var(--c) 24%, transparent); transition:background-color var(--hover) var(--ease), color var(--hover) var(--ease);}
.pd-ic svg{width:20px; height:20px;}
.pd-suite-l a:hover .pd-ic{background:var(--c); color:#fff;}
.pd-suite-l b{display:block; font-size:14.5px; font-weight:800; line-height:1.3;}
.pd-suite-l small{display:block; margin-top:1px; font-size:12.5px; line-height:1.35; color:var(--text-dark-2);}

/* ==========================================================================
   2. PORTFOLIO — every product at a glance (white)
   ========================================================================== */
.pd-head{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:16px clamp(28px,4vw,64px); align-items:end; margin-bottom:clamp(32px,4vw,52px);}
.pd-head.solo{grid-template-columns:minmax(0,1fr);}
.pd-head .h2{margin-top:16px; max-width:640px;}
.pd-head .lead{max-width:520px;}

.pd-map{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:18px; align-items:stretch;}
.pd-flag{position:relative; display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; color:#fff; background:var(--navy); box-shadow:0 30px 60px -36px rgba(14,27,51,.7); transition:transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease) !important;}
.pd-flag:hover{transform:translateY(-3px); box-shadow:0 40px 70px -36px rgba(14,27,51,.8);}
.pd-flag:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:var(--radius-lg);}
.pd-flag-img{position:relative; display:block; aspect-ratio:1400/774; overflow:hidden;}
.pd-flag-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.pd-flag:hover .pd-flag-img img{transform:scale(1.035);}
.pd-flag-img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, var(--navy) 100%);}
.pd-flag-b{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex:1; padding:4px clamp(22px,2.6vw,32px) clamp(24px,2.6vw,32px);}
.pd-flag .pd-k{color:var(--blue-soft);}
.pd-flag .pd-k .n{margin-inline-end:8px; color:#fff;}
.pd-flag-logo{height:38px; width:auto;}
.pd-flag-t{font-size:clamp(17px,1.45vw,20px); font-weight:700; line-height:1.4; max-width:440px;}
.pd-go{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; font-size:15.5px; font-weight:700; color:var(--blue-soft);}
.pd-go svg{width:18px; height:18px; transition:translate .25s var(--ease);}
.pd-flag:hover .pd-go svg{translate:4px 0;}
html[dir="rtl"] .pd-go svg{transform:scaleX(-1);}
html[dir="rtl"] .pd-flag:hover .pd-go svg{translate:-4px 0;}

.pd-list ol{display:grid; gap:10px; height:100%; grid-auto-rows:1fr;}
.pd-list a{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:18px; align-items:center; height:100%; padding:10px 20px 10px 10px; border-radius:18px; background:#fff; border:1px solid var(--line); transition:border-color var(--hover) var(--ease), box-shadow var(--hover) var(--ease), transform var(--hover) var(--ease);}
html[dir="rtl"] .pd-list a{padding:10px 10px 10px 20px;}
.pd-list a:hover{border-color:rgba(42,107,255,.42); box-shadow:0 18px 36px -26px rgba(14,27,51,.45); transform:translateY(-2px);}
.pd-list a:focus-visible{outline-offset:2px; border-radius:18px;}
.pd-thumb{display:grid; place-items:center; width:120px; height:76px; padding:6px; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#e9effc,#f6f8fd);}
.pd-thumb img{width:100%; height:100%; object-fit:contain; transition:transform .5s var(--ease);}
.pd-list a:hover .pd-thumb img{transform:scale(1.06);}
.pd-thumb.dark{background:var(--navy);}
.pd-thumb.dark img, .pd-media.dark img{mix-blend-mode:lighten;}
.pd-list-b{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pd-list-k{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .pd-list-k{letter-spacing:.02em;}
.pd-list-k .n{color:var(--blue);}
.pd-list b{font-size:16.5px; font-weight:800; line-height:1.3;}
.pd-list small{font-size:14px; line-height:1.4; color:var(--muted);}
/* the arrow points down: each product is further down this page */
.pd-list a > svg{width:18px; height:18px; color:var(--blue); opacity:.45; transform:rotate(90deg); transition:opacity .25s, translate .3s var(--ease);}
.pd-list a:hover > svg{opacity:1; translate:0 2px;}

/* ==========================================================================
   3. FEATURED APPLICATION (navy)
   ========================================================================== */
.pd-feat-in{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(32px,5vw,72px); align-items:center;}
.pd-feat .h2{margin-top:16px;}
.pd-tag{margin-top:12px; font-size:17px; font-weight:700; line-height:1.45; color:var(--ink);}
.pd-feat .pd-tag{font-size:clamp(18px,1.5vw,21px); color:#fff;}
.pd-feat .lead{margin-top:14px; font-size:16.5px;}
.pd-feat-media{position:relative; margin:0;}
.pd-feat-media::before{content:""; position:absolute; inset:8% 10%; z-index:0; background:radial-gradient(closest-side, rgba(42,107,255,.45), transparent); filter:blur(20px);}
.pd-feat-media img{position:relative; display:block; width:100%; height:auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));}
.pd-feat-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line-dark);}
.pd-feat .pd-k{color:rgba(170,200,255,.66); margin-bottom:16px;}
.pd-caps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.pd-caps li{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:background-color var(--hover) var(--ease), border-color var(--hover) var(--ease) !important;}
.pd-caps li:hover{background:rgba(255,255,255,.07); border-color:rgba(143,182,255,.32);}
.pd-caps .n{flex:none; font-size:12.5px; font-weight:800; letter-spacing:.06em; color:var(--blue-soft); padding-top:2px;}
.pd-caps span:not(.n){font-size:15.5px; font-weight:600; line-height:1.45; color:#fff;}
.pd-outs{gap:12px;}
.pd-outs li{font-size:15.5px; color:rgba(255,255,255,.9);}

/* "Built with": the platform a product runs on */
.pd-built{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;}
.pd-built .pd-k{margin:0 !important; font-size:11px;}
.pd-built ul{display:flex; flex-wrap:wrap; gap:6px;}
.pd-built li{display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 4px; border-radius:999px; font-size:12.5px; font-weight:700; background:var(--light); border:1px solid var(--line-2); color:var(--ink);}
html[dir="rtl"] .pd-built li{padding:4px 4px 4px 11px;}
.pd-built img{width:22px; height:22px; padding:2px; object-fit:contain; border-radius:6px; background:#fff;}
.pd-feat .pd-built{margin-top:26px;}
.pd-feat .pd-built li{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#fff;}

/* ==========================================================================
   4. MORE APPLICATIONS (soft neutral)
   ========================================================================== */
.pd-row{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4.5vw,64px); align-items:center; margin-bottom:18px; padding:clamp(18px,2.6vw,32px); border-radius:30px; background:#fff; border:1px solid var(--line-2); box-shadow:0 30px 60px -48px rgba(14,27,51,.4);}
.pd-row.flip{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
.pd-row.flip .pd-row-media{order:2;}
.pd-row-copy{padding-inline-end:clamp(0px,1.5vw,16px);}
.pd-row.flip .pd-row-copy{padding-inline:clamp(0px,1.5vw,16px) 0;}
.pd-name{margin-top:10px; font-size:clamp(24px,2.3vw,32px); font-weight:800; line-height:1.15; letter-spacing:-.02em;}
html[dir="rtl"] .pd-name{letter-spacing:0; line-height:1.3;}
.pd-desc{margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--muted);}
.pd-feats{margin-top:18px; gap:10px;}
.pd-feats li{font-size:15px;}
.pd-row-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);}

.pd-media{position:relative; margin:0; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#e6edfb 0%,#f5f7fc 100%);}
.pd-media img{display:block;}
.pd-media.device{padding:clamp(20px,3vw,40px) clamp(16px,2.4vw,28px);}
.pd-media.device img{width:100%; height:auto; transition:transform .7s var(--ease);}
.pd-media.screen{padding:clamp(22px,3.2vw,44px);}
.pd-media.screen img{width:100%; height:auto; border-radius:12px; box-shadow:0 30px 50px -30px rgba(14,27,51,.5); transition:transform .7s var(--ease);}
.pd-row:hover .pd-media img{transform:scale(1.02);}
.pd-media.dark{display:grid; place-items:center; aspect-ratio:16/10; padding:18px; border-radius:0; background:radial-gradient(420px 260px at 50% 45%, rgba(42,107,255,.35), transparent 70%), var(--navy);}
.pd-media.dark img{width:auto; height:100%; max-width:100%; object-fit:contain;}
.pd-media.phones{display:flex; justify-content:center; align-items:flex-start; gap:0; aspect-ratio:16/10; padding:28px 18px 0; border-radius:0;}
.pd-media.phones .ph{display:block; width:27%; flex:none; border-radius:22px; overflow:hidden; box-shadow:0 24px 40px -22px rgba(14,27,51,.55); background:#fff; transition:transform .6s var(--ease);}
.pd-media.phones .ph img{width:100%; height:auto;}
.pd-media.phones .ph1, .pd-media.phones .ph3{margin-top:30px; transform:scale(.92);}
.pd-media.phones .ph1{margin-inline-end:-4%;} .pd-media.phones .ph3{margin-inline-start:-4%;}
.pd-media.phones .ph2{position:relative; z-index:1;}
.pd-card:hover .pd-media.phones .ph2{transform:translateY(-6px);}

.pd-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px;}
.pd-more .wrap > :last-child{margin-bottom:0;}
.pd-card{display:flex; flex-direction:column; border-radius:30px; overflow:hidden; background:#fff; border:1px solid var(--line-2); box-shadow:0 30px 60px -48px rgba(14,27,51,.4); transition:box-shadow var(--hover) var(--ease), transform var(--hover) var(--ease) !important;}
.pd-card:hover{transform:translateY(-3px); box-shadow:0 36px 64px -42px rgba(14,27,51,.5);}
.pd-card-b{display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.6vw,32px);}
.pd-card .pd-name{font-size:clamp(22px,2vw,27px);}
.pd-card .pd-row-foot{margin-top:auto;}
.pd-card .pd-feats{margin-bottom:22px;}

/* ==========================================================================
   5. CLOSING INVITATION (white, compact)
   ========================================================================== */
.pd-close{padding-block:clamp(48px,6vw,84px);}
.pd-close-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:center; padding:clamp(24px,3vw,36px) clamp(24px,3.5vw,44px); border-radius:24px; background:linear-gradient(120deg, var(--blue-ghost), rgba(42,107,255,.015)); border:1px solid rgba(42,107,255,.16);}
.pd-close-in p{margin-top:6px; font-size:16px; color:var(--muted);}
.pd-close-a{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;}

/* the bridge to What We Do, under the closing invitation */
.pd-bridge{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-top:18px; padding-inline:clamp(24px,3.5vw,44px); font-size:15px; color:var(--muted);}
.pd-bridge b{color:var(--ink); font-weight:800;}
.pd-bridge .textlink{font-size:15px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .pd-suite-l{grid-template-columns:repeat(4,minmax(0,1fr));}
  .pd-suite-l small{display:none;}
}
@media (max-width:1080px){
  .pd-hero-in{grid-template-columns:minmax(0,1fr);}
  .pd-hero-media{max-width:680px; width:100%;}
  .pd-suite-l{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pd-suite-l small{display:block;}
  .pd-map{grid-template-columns:minmax(0,1fr);}
  .pd-flag{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .pd-flag-img{aspect-ratio:auto; height:100%;}
  .pd-flag-img::after{background:linear-gradient(90deg, transparent 50%, var(--navy) 100%);}
  html[dir="rtl"] .pd-flag-img::after{background:linear-gradient(270deg, transparent 50%, var(--navy) 100%);}
  .pd-flag-b{padding:clamp(22px,3vw,32px); justify-content:center;}
  .pd-feat-in{grid-template-columns:minmax(0,1fr);}
  .pd-feat-media{max-width:720px;}
  .pd-feat-grid{grid-template-columns:minmax(0,1fr);}
  .pd-row, .pd-row.flip{grid-template-columns:minmax(0,1fr);}
  .pd-row.flip .pd-row-media{order:0;}
  .pd-row-copy, .pd-row.flip .pd-row-copy{padding-inline:0;}
}
@media (max-width:900px){
  .pd-head{grid-template-columns:minmax(0,1fr);}
  .pd-pair{grid-template-columns:minmax(0,1fr);}
  .pd-media.dark, .pd-media.phones{aspect-ratio:16/9;}
}
@media (max-width:620px){
  .pd-hero{padding-top:28px;}
  .pd-hero-logo{height:38px;}
  .pd-hero-media{padding-top:44px;}
  .pd-float{width:36%; inset-inline-end:0;}
  .pd-win figcaption{display:none;}
  .pd-ai{top:0; inset-inline-end:auto; inset-inline-start:0;}
  .pd-btns .btn{white-space:normal; text-align:center;}
  .pd-suite{padding:12px 10px 8px;}
  .pd-suite-h{padding:2px 6px 10px;}
  .pd-suite-l{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;}
  .pd-suite-l a{gap:9px; padding:8px 6px;}
  .pd-ic{width:32px; height:32px; border-radius:9px;} .pd-ic svg{width:17px; height:17px;}
  .pd-suite-l b{font-size:13.5px;} .pd-suite-l small{display:none;}
  .pd-flag{display:flex;}
  .pd-flag-img{aspect-ratio:1400/774; height:auto;}
  .pd-flag-img::after{background:linear-gradient(180deg, transparent 50%, var(--navy) 100%) !important;}
  .pd-list ol{grid-auto-rows:auto;}
  .pd-list a{grid-template-columns:88px minmax(0,1fr); gap:14px; padding:8px 12px 8px 8px;}
  html[dir="rtl"] .pd-list a{padding:8px 8px 8px 12px;}
  .pd-list a > svg{display:none;}
  .pd-thumb{width:88px; height:62px;}
  .pd-list b{font-size:15.5px;} .pd-list small{font-size:13.5px;}
  .pd-caps{grid-template-columns:minmax(0,1fr);}
  .pd-row{padding:12px 12px 22px; border-radius:24px;}
  .pd-row-copy{padding-inline:8px !important;}
  .pd-media{border-radius:16px;}
  .pd-card{border-radius:24px;}
  .pd-row-foot .textlink, .pd-close-a .textlink{white-space:normal;}
  .pd-close-in{grid-template-columns:minmax(0,1fr);}
  .pd-close-a .btn{white-space:normal;}
  .pd-bridge{padding-inline:4px;}
}
@media (prefers-reduced-motion:reduce){
  .pd-flag, .pd-list a, .pd-card, .pd-ai, .pd-caps li{transition:none !important;}
  .pd-flag:hover, .pd-list a:hover, .pd-card:hover, .pd-ai:hover{transform:none;}
  .pd-flag-img img, .pd-thumb img, .pd-media img, .pd-media .ph{transition:none !important; transform:none !important;}
  .pd-media.phones .ph1, .pd-media.phones .ph3{transform:scale(.92) !important;}
}