@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sora-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sora-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/sora-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/readex-pro-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/readex-pro-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/readex-pro-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/readex-pro-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/readex-pro-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/readex-pro-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0B1626; --navy-2:#13233A; --orange:#F08A00; --amber:#FFC20E;
  --bg:#FFFFFF; --soft:#EEF2F6; --ink:#0B1626; --ink-2:#5B6675; --line:#D5DBE2; --card:#FFFFFF; --ochre:#9A5B00; --head:#FFFFFF; --logo-dark:block; --logo-light:none;
  --display:'Sora','Segoe UI',system-ui,sans-serif; --body:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1200px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#07101B; --soft:#111E30; --ink:#EEF2F6; --ink-2:#9AA7B6; --line:#22344C; --card:#0C1828; --ochre:#FFB23E; --head:#07101B; --logo-dark:none; --logo-light:block; } }
:root[data-theme="dark"]{ --bg:#07101B; --soft:#111E30; --ink:#EEF2F6; --ink-2:#9AA7B6; --line:#22344C; --card:#0C1828; --ochre:#FFB23E; --head:#07101B; --logo-dark:none; --logo-light:block; }
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--body)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; line-height:1.12; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.eyebrow{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ochre)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font:600 15px var(--display); text-decoration:none; padding:13px 20px; border-radius:6px; border:2px solid transparent; cursor:pointer; white-space:nowrap}
.btn svg{width:19px; height:19px; flex-shrink:0}
.btn-sun{background:var(--orange); color:#0B1626} .btn-sun:hover{background:var(--amber)}
.btn-line{border-color:currentColor; background:transparent} .btn-line:hover{background:rgba(127,140,160,.12)}
.tbc{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--orange); margin-inline-start:6px; vertical-align:1px}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:40; background:var(--head); border-bottom:2px solid var(--line); border-image:linear-gradient(90deg,var(--orange) 0,var(--amber) 160px,var(--line) 160px) 1}
.top > .wrap{display:flex; align-items:center; gap:28px; height:72px}
.brand img{height:42px; width:auto}
.brand .l-dark{display:var(--logo-dark)} .brand .l-light{display:var(--logo-light)}
.menu{display:flex; align-items:center; gap:4px; margin-inline-start:auto}
.menu > a:not(.btn), .menu > button{background:none; border:0; cursor:pointer; text-decoration:none; font:600 15px var(--display); padding:10px 14px; border-radius:6px; color:var(--ink)}
.menu > a:not(.btn):hover, .menu > button:hover, .menu > button[aria-expanded="true"]{background:var(--soft)}
.menu > button::after{content:""; display:inline-block; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); margin:0 0 3px 9px}
.top .btn{margin-inline-start:10px; padding:10px 16px}
.burger{display:none; margin-inline-start:auto; background:none; border:0; padding:10px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

.mega{position:absolute; inset-inline:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(11,22,38,.12); display:none}
.mega.open{display:block}
.mega .wrap{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; padding-top:26px; padding-bottom:28px}
.mega .col > a.fam{display:block; text-decoration:none}
.mega .fam .pic{height:92px; background:var(--soft); border-radius:8px; display:grid; place-items:center; padding:10px; margin-bottom:10px}
.mega .fam .pic img{max-height:72px; width:auto}
.mega .fam b{font:700 14px var(--display)}
.mega .fam:hover b{color:var(--ochre)}
.mega ul{list-style:none; margin:8px 0 0; padding:0}
.mega li a{display:block; text-decoration:none; font-size:14px; padding:3px 0; color:var(--ink-2)}
.mega li a:hover{color:var(--ink)}
.mega .all{grid-column:1/-1; border-top:1px solid var(--line); padding-top:14px; display:flex; justify-content:space-between; font-size:14px; color:var(--ink-2)}
.mega .all a{font:600 14px var(--display); color:var(--ochre)}

.drawer{display:none}
@media (max-width:960px){
  .menu{display:none} .burger{display:block}
  .drawer.open{display:block; position:fixed; inset:0; top:calc(74px + env(safe-area-inset-top,0px)); background:var(--bg); overflow:auto; z-index:39; padding:8px 0 40px}
  .drawer details{border-bottom:1px solid var(--line)}
  .drawer summary, .drawer > .wrap > a{display:block; padding:16px 0; font:700 17px var(--display); text-decoration:none; cursor:pointer; list-style:none}
  .drawer summary::-webkit-details-marker{display:none}
  .drawer .fams a{display:flex; align-items:center; gap:12px; padding:8px 0; text-decoration:none}
  .drawer .fams img{width:44px; height:44px; object-fit:contain; background:var(--soft); border-radius:6px; padding:4px}
  .drawer > .wrap > a{border-bottom:1px solid var(--line)}
  .drawer .btn{margin-top:20px; width:100%}
}

/* ---------- hero ---------- */
.hero{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset-inline-end:-8%; top:90px; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle, rgba(255,194,14,.30) 0, rgba(240,138,0,.14) 38%, rgba(240,138,0,0) 66%); pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; min-height:540px; padding-top:40px}
.hero .eyebrow{color:var(--amber)}
.hero h1{font-size:clamp(38px,5vw,64px); font-weight:800; margin:16px 0 20px; max-width:12ch}
.hero .lead{color:#B7C1CE; font-size:18px; max-width:44ch; margin-bottom:30px}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px}
.stage{position:relative; height:500px}
.stage img{position:absolute; width:auto; filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
.stage .s1{height:330px; inset-inline-start:2%; bottom:120px; opacity:.95}
.stage .s2{height:440px; inset-inline-start:24%; bottom:30px}
.stage .s3{height:290px; inset-inline-end:0; bottom:16px}
@media (prefers-reduced-motion:no-preference){ .stage img{animation:up .9s cubic-bezier(.2,.7,.2,1) both} .stage .s2{animation-delay:.12s} .stage .s3{animation-delay:.24s} @keyframes up{from{opacity:0; transform:translateY(40px)}} }
.hero dl{position:relative; max-width:var(--wrap); margin:0 auto; padding:22px 28px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid rgba(255,255,255,.12)}
.hero dl div{display:flex; flex-direction:column; gap:3px}
.hero dt{font:700 11px var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.hero dd{margin:0; font-size:15px}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; min-height:0; padding-top:44px}
  .stage{height:320px} .stage .s1{height:210px; bottom:80px} .stage .s2{height:290px; inset-inline-start:26%} .stage .s3{height:190px}
  .hero dl{grid-template-columns:1fr 1fr}
}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec.soft{background:var(--soft)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:10px}
.sec-head p{color:var(--ink-2); margin-top:10px; max-width:56ch}
.more{font:600 15px var(--display); color:var(--ochre); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:2px}

.needs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.need{display:grid; grid-template-columns:1fr 150px; gap:12px; align-items:center; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px 18px 22px 24px; min-height:172px; transition:border-color .15s}
.need:hover{border-color:var(--orange)}
.need h3{font-size:20px}
.need p{color:var(--ink-2); font-size:14px; margin-top:8px}
.need span{display:inline-block; margin-top:12px; font:600 13px var(--display); color:var(--ochre)}
.need img{max-height:130px; width:auto; margin:auto}
@media (max-width:960px){ .needs{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .needs{grid-template-columns:1fr} .need{grid-template-columns:1fr 110px; min-height:0} .need img{max-height:100px} }

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.card{display:flex; flex-direction:column; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:border-color .15s}
.card:hover{border-color:var(--orange)}
.card .pic{aspect-ratio:4/3; background:var(--soft); position:relative; overflow:hidden}
.card .pic img{position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain}
.card .pic.photo img{inset:0; width:100%; height:100%; object-fit:cover}
.card .pic .tag{z-index:1}
.card .tag{position:absolute; inset-inline-start:12px; top:12px; background:var(--orange); color:#0B1626; font:700 11px var(--display); letter-spacing:.08em; padding:5px 9px; border-radius:4px}
.card .tx{padding:16px 18px 18px; flex:1}
.card .fam{font-size:13px; color:var(--ink-2)}
.card h3{font-size:20px; margin:3px 0 10px}
.card .specs{display:flex; gap:8px; flex-wrap:wrap}
.card .specs span{font-size:13px; background:var(--soft); border-radius:4px; padding:3px 8px}
.card .dots{display:flex; gap:5px; margin-top:12px}
.dot{width:13px; height:13px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.steps li{position:relative}
.steps li:not(:last-child)::after{content:""; position:absolute; top:39px; inset-inline-start:96px; inset-inline-end:-14px; border-top:2px dashed rgba(255,194,14,.5)}
.steps .ic{width:80px; height:80px; border-radius:50%; background:#13233A; border:2px solid var(--orange); display:grid; place-items:center; position:relative}
.steps .ic svg{width:38px; height:38px; fill:none; stroke:var(--amber); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.steps .ic b{position:absolute; top:-4px; inset-inline-end:-4px; width:28px; height:28px; border-radius:50%; background:var(--orange); color:#0B1626; font:800 14px var(--display); display:grid; place-items:center}
.steps h3{font-size:19px; margin:20px 0 8px}
.steps p{color:#B7C1CE; font-size:15px}
.oem{background:var(--navy); color:#fff}
.oem .sec-head p{color:#B7C1CE} .oem .eyebrow{color:var(--amber)}
.oem .row{display:flex; gap:12px; flex-wrap:wrap; margin-top:40px}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; row-gap:40px} .steps li::after{display:none} }
@media (max-width:540px){ .steps{grid-template-columns:1fr} }

.certs{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cert{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:start; cursor:zoom-in}
.cert:hover{border-color:var(--orange)}
.cert img{aspect-ratio:637/900; width:100%; height:auto; object-fit:contain; background:#fff; border-radius:4px; border:1px solid var(--line)}
.cert b{display:block; font:700 16px var(--display); margin-top:12px}
.cert span{font-size:13px; color:var(--ink-2)}
@media (max-width:800px){ .certs{grid-template-columns:1fr 1fr} }
.qc{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px}
.qc div{border-inline-start:3px solid var(--orange); padding-inline-start:14px}
.qc b{font:700 16px var(--display)} .qc p{font-size:14px; color:var(--ink-2)}
@media (max-width:800px){ .qc{grid-template-columns:1fr 1fr} }

.contact{background:var(--navy); color:#fff}
.contact .wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:56px}
.contact h2{font-size:clamp(28px,3.4vw,40px); margin:10px 0 14px}
.contact .eyebrow{color:var(--amber)}
.contact p{color:#B7C1CE; max-width:44ch; margin-bottom:26px}
.contact .row{display:flex; gap:12px; flex-wrap:wrap}
.contact dl{margin:0; display:grid; gap:20px; align-content:start}
.contact dt{font:700 11px var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.contact dd{margin:4px 0 0; font-size:17px}
.contact dd a{text-decoration:none} .contact dd a:hover{color:var(--amber)}
@media (max-width:800px){ .contact .wrap{grid-template-columns:1fr; gap:36px} }
footer{background:#050B14; color:#8D99A8; font-size:14px; padding:24px 0}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- listing ---------- */
.lhead{background:var(--navy); color:#fff; padding:52px 0 0}
.lhead h1{font-size:clamp(34px,4.4vw,50px); margin:10px 0 12px}
.lhead p{color:#B7C1CE; max-width:60ch}
.lhead .eyebrow{color:var(--amber)}
.tabs{display:flex; gap:4px; overflow-x:auto; margin-top:30px; scrollbar-width:none}
.tabs button{flex-shrink:0; background:none; border:0; color:#B7C1CE; font:600 14px var(--display); padding:12px 16px; border-radius:6px 6px 0 0; cursor:pointer}
.tabs button:hover{color:#fff}
.tabs button[aria-pressed="true"]{background:var(--bg); color:var(--ink)}
.filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:22px 0 26px}
.filters span{font-size:14px; color:var(--ink-2); margin-inline-end:4px}
.chip{border:1px solid var(--line); background:var(--card); border-radius:20px; padding:6px 14px; font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.famintro{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:20px}
.famintro h2{font-size:26px} .famintro p{color:var(--ink-2)}
.empty{padding:40px 0; color:var(--ink-2)}

/* ---------- product ---------- */
.crumbs{font-size:14px; color:var(--ink-2); padding:22px 0 0}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ochre)}
.prod{display:grid; grid-template-columns:1.05fr 1fr; gap:52px; padding:20px 0 64px; align-items:start}
.gallery{position:sticky; top:96px; min-width:0}
.info{min-width:0}
.stagebox{background:var(--soft); border-radius:10px; aspect-ratio:1/1; position:relative; overflow:hidden}
.stagebox img{position:absolute; inset:8%; width:84%; height:84%; object-fit:contain}
.stagebox.photo img{inset:0; width:100%; height:100%; object-fit:cover}
.stagebox .tag{z-index:1}
.stagebox .tag{position:absolute; inset-inline-start:16px; top:16px; background:var(--orange); color:#0B1626; font:700 12px var(--display); letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:4px}
.stagebox .cap{position:absolute; inset-inline:0; bottom:0; padding:12px 18px; background:rgba(11,22,38,.82); color:#fff; font-size:14px}
.thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px}
.thumbs button{flex-shrink:0; width:82px; height:82px; border-radius:8px; border:2px solid transparent; background:var(--soft); padding:6px; cursor:pointer; display:grid; place-items:center}
.thumbs button.photo{padding:0; overflow:hidden}
.thumbs button img{max-height:100%; width:auto; object-fit:contain}
.thumbs button.photo img{width:100%; height:100%; object-fit:cover}
.thumbs button[aria-pressed="true"]{border-color:var(--orange)}
.info h1{font-size:clamp(34px,4vw,48px); margin:10px 0 10px}
.info .hl{font-size:19px; color:var(--ink-2); max-width:38ch}
.kf{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0}
.kf div{background:var(--soft); border-radius:6px; padding:12px 14px}
.kf b{display:block; font:700 21px var(--display)}
.kf span{font-size:13px; color:var(--ink-2)}
.pick{margin:0 0 22px}
.pick .lbl{font:600 14px var(--display); margin-bottom:8px}
.pick .opts{display:flex; gap:8px; flex-wrap:wrap}
.pick button{border:1.5px solid var(--line); background:var(--card); border-radius:6px; padding:8px 14px; font:600 14px var(--display); cursor:pointer}
.pick button:hover{border-color:var(--ink-2)}
.pick button[aria-pressed="true"]{border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange)}
.pick .vnote{font-size:14px; color:var(--ink-2); margin-top:8px; min-height:1.4em}
table.spec{width:100%; border-collapse:collapse; font-size:14.5px}
table.spec th{background:var(--navy); color:#fff; text-align:start; font:600 12px var(--body); letter-spacing:.08em; text-transform:uppercase; padding:9px 12px}
table.spec th:first-child{border-start-start-radius:4px} table.spec th:last-child{border-start-end-radius:4px}
table.spec td,table.spec th[scope=row]{padding:8px 12px; vertical-align:top; text-align:start}
table.spec tbody th{background:transparent; color:var(--ink); font:600 14.5px var(--body); letter-spacing:0; text-transform:none; width:34%; white-space:nowrap}
table.spec tbody tr:nth-child(even) > *{background:var(--soft)}
.note{font-size:14px; color:var(--ink-2); margin-top:10px}
.colours{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 26px}
.colours .lbl{font:600 14px var(--display); margin-inline-end:4px}
.colours button{width:26px; height:26px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); outline-offset:2px}
.colours button[aria-pressed="true"]{outline:2px solid var(--orange)}
.colours .cname{font-size:14px; color:var(--ink-2); margin-inline-start:6px}
.info .row{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:480px){ .info .row .btn{width:100%} }
.info .btn-line{color:var(--ink)}
.trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:14px}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--navy)}
.trust span:first-child::before{background:var(--orange)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .trust span::before{background:var(--ink-2)} }
.overflow{overflow-x:auto}
@media (max-width:900px){ .prod{grid-template-columns:1fr; gap:26px} .gallery{position:static} .stagebox{aspect-ratio:4/3.4} }
@media (max-width:480px){ .kf{gap:6px} .kf div{padding:10px} .kf b{font-size:16px} .kf span{font-size:12px} table.spec tbody th{white-space:normal} }

dialog#lb{border:0; padding:0; background:transparent; width:min(94vw,980px); max-width:none; max-height:none; overflow:visible}
dialog#lb::backdrop{background:rgba(5,11,20,.9)}
.lbx{background:#EEF2F6; border-radius:10px; height:min(82vh,820px); display:grid; place-items:center; overflow:hidden; touch-action:pan-y}
.lbx.photo{background:#000}
.lbx img{width:100%; height:100%; object-fit:contain}
.lbbar{display:flex; justify-content:space-between; align-items:center; gap:16px; color:#fff; font-size:14px; padding:12px 4px 0}
.lbbar .lbcap{color:#D5DBE2}
#lb .lbbtn{position:absolute; width:46px; height:46px; border-radius:50%; border:0; background:#fff; color:#0B1626; font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 16px rgba(0,0,0,.3)}
#lb .lbbtn:hover{background:var(--amber)}
#lb .lbbtn[hidden]{display:none}
#lb .lbclose{top:-16px; inset-inline-end:-16px; font-size:24px}
#lb .lbleft{left:-23px; top:calc(min(82vh,820px)/2 - 23px)}
#lb .lbright{right:-23px; top:calc(min(82vh,820px)/2 - 23px)}
@media (max-width:700px){ #lb .lbleft{left:8px} #lb .lbright{right:8px} #lb .lbclose{inset-inline-end:8px; top:8px} .lbx{height:70vh} #lb .lbleft,#lb .lbright{top:calc(35vh - 23px)} }
.stagebox{cursor:zoom-in}
.zoomhint{position:absolute; inset-inline-end:14px; bottom:14px; z-index:1; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#0B1626; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 8px rgba(11,22,38,.18)}
.zoomhint svg{width:20px; height:20px}
.stagebox .cap{padding-inline-end:64px}

/* ---------- language + direction ---------- */
:root:lang(ar){ --display:'Readex Pro','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif; --body:'IBM Plex Sans Arabic','Readex Pro','Segoe UI',Tahoma,sans-serif }
:lang(ar) body{line-height:1.8}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{line-height:1.35; letter-spacing:0}
:lang(ar) .eyebrow,:lang(ar) .hero dt,:lang(ar) .contact dt,:lang(ar) .card .tag,:lang(ar) .stagebox .tag,:lang(ar) table.spec th{letter-spacing:0; text-transform:none}
:lang(ar) .eyebrow{font-size:14px}
:lang(ar) .hero dt,:lang(ar) .contact dt{font-size:13px}
:lang(ar) .hero h1{max-width:14ch}
[dir=rtl] .top{border-image:linear-gradient(270deg,var(--orange) 0,var(--amber) 160px,var(--line) 160px) 1}
[dir=rtl] .menu > button::after{margin:0 9px 3px 0}
.ltr{direction:ltr; unicode-bidi:isolate}
.lang{display:inline-flex; align-items:center; gap:7px; font:600 14px var(--display); text-decoration:none; padding:8px 12px; border:1px solid var(--line); border-radius:20px; margin-inline-start:8px; color:var(--ink)}
.lang svg{width:17px; height:17px; flex-shrink:0}
.lang:hover{border-color:var(--orange)}
.sitemap{background:#050B14; color:#8D99A8; padding:48px 0 8px; font-size:14px}
.sitemap .wrap{display:grid; grid-template-columns:1.4fr repeat(6,1fr); gap:24px}
.sitemap h2{font:700 13px var(--display); color:#fff; margin-bottom:10px}
.sitemap ul{list-style:none; margin:0; padding:0}
.sitemap li a{text-decoration:none; display:block; padding:2px 0} .sitemap a:hover{color:#fff}
.sitemap .about p{max-width:34ch; margin-top:12px}
@media (max-width:960px){ .sitemap .wrap{grid-template-columns:1fr 1fr} .sitemap .about{grid-column:1/-1} }
footer{border-top:1px solid #13233A}
.card[hidden]{display:none}
.skip{position:absolute; inset-inline-start:-9999px; top:8px; z-index:100; background:var(--orange); color:#0B1626; padding:8px 14px; border-radius:6px; font:600 14px var(--display)}
.skip:focus{inset-inline-start:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tabs a{flex-shrink:0; color:#B7C1CE; font:600 14px var(--display); padding:12px 16px; border-radius:6px 6px 0 0; text-decoration:none}
.tabs a:hover{color:#fff}
.tabs a[aria-current="page"]{background:var(--bg); color:var(--ink)}
.lang-m{display:none}
@media (max-width:960px){ .lang-m{display:inline-flex; margin-inline-start:auto} .lang-m + .burger{margin-inline-start:6px} }
.crumbs span[aria-hidden]{margin:0 4px}
.top > .wrap{position:relative}
#vcap{text-transform:none}