/* ============ Pharmapack Sudair Industrial — 2026 site ============ */
:root{
  --navy:#041c46;
  --ink:#010e1f;
  --green:#3deb8a;
  --blue:#1565d8;
  --teal:#2aa9ad;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:#d2d2d7;
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --tile-plastic:#eef1f6;
  --tile-glass:#f2f2f2;
  --on-dark:#f5f5f7;
  --on-dark-muted:#a1a9b8;
  --radius:28px;
  --nav-h:52px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","Noto Kufi Arabic","Geeza Pro",Tahoma,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--font-ar);line-height:1.75}
html[lang="ar"] *{letter-spacing:0 !important}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none !important}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1360px;margin:0 auto;padding:0 24px}
.ltr{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .ltr{text-align:right}
[dir="rtl"] .center .ltr{text-align:center}
[dir="rtl"] .chips.ltr{justify-content:flex-end}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:#fff;padding:10px 16px;z-index:999}
.skip:focus{inset-inline-start:12px;top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- typography ---------- */
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.dark .eyebrow{color:var(--green)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em;line-height:1.06;color:var(--navy)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.3}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.h-hero{font-size:clamp(2.5rem,6.2vw,5.2rem)}
.h-xl{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.h-lg{font-size:clamp(1.9rem,4vw,3.1rem)}
.h-md{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.grad{background:linear-gradient(90deg,var(--green),var(--teal) 55%,#4f9bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--muted);max-width:760px;line-height:1.45}
html[lang="ar"] .lead{line-height:1.8}
.dark .lead{color:var(--on-dark-muted)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.note{font-size:.8rem;color:var(--muted);line-height:1.5}
.dark .note{color:#7d889b}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font-weight:600;font-size:1rem;transition:transform .3s var(--ease),background .3s,box-shadow .3s,color .3s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--blue);transform:translateY(-2px)}
.dark .btn-primary{background:var(--green);color:var(--ink)}
.dark .btn-primary:hover{background:#6ff3aa;box-shadow:0 12px 40px -12px rgba(61,235,138,.6)}
.link{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--blue);font-size:1.05rem}
.dark .link{color:#64a8ff}
.link::after{content:"›";font-size:1.25em;line-height:1;transition:transform .3s var(--ease)}
.link:hover::after{transform:translateX(4px)}
[dir="rtl"] .link::after{content:"‹"}
[dir="rtl"] .link:hover::after{transform:translateX(-4px)}
.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.center .actions,.hero .actions{justify-content:center}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);transition:background .4s,border-color .4s}
.nav.on-dark{background:rgba(1,14,31,.72);border-color:rgba(255,255,255,.08)}
.nav-in{max-width:1120px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:30px;width:auto}
.nav-logo .l-white{display:none}
.nav.on-dark .l-white{display:block}
.nav.on-dark .l-dark{display:none}
.nav-links{display:flex;gap:26px;margin-inline:auto}
.nav-links a{font-size:.8rem;color:var(--text);opacity:.82;transition:opacity .2s,color .3s}
html[lang="ar"] .nav-links a{font-size:.88rem}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a.active{color:var(--blue)}
.nav.on-dark .nav-links a{color:#fff}
.nav.on-dark .nav-links a.active{color:var(--green)}
.nav-tools{display:flex;align-items:center;gap:12px;flex:none}
.lang{font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.18);color:var(--text);transition:.3s}
.lang:hover{border-color:var(--blue);color:var(--blue)}
.nav.on-dark .lang{border-color:rgba(255,255,255,.3);color:#fff}
.nav.on-dark .lang:hover{border-color:var(--green);color:var(--green)}
.nav-cta{font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--navy);color:#fff;transition:.3s}
.nav-cta:hover{background:var(--blue)}
.nav.on-dark .nav-cta{background:var(--green);color:var(--ink)}
.burger{display:none;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1.6px;background:currentColor;transition:.3s var(--ease)}
.burger span:first-child{top:13px}.burger span:last-child{top:20px}
.nav.on-dark .burger{color:#fff}
.nav.open .burger span:first-child{top:16.5px;transform:rotate(45deg)}
.nav.open .burger span:last-child{top:16.5px;transform:rotate(-45deg)}
.progress{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;background:linear-gradient(90deg,var(--green),var(--blue));z-index:101}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(80px,11vw,150px) 0}
.alt{background:var(--bg-alt)}
.dark{background:var(--ink);color:var(--on-dark)}
.sec-head{margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{margin-bottom:18px}

/* ---------- hero ---------- */
.hero{background:var(--ink);min-height:100svh;padding-top:calc(var(--nav-h) + clamp(28px,6vh,70px));overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{position:relative;z-index:2;padding:0 24px;max-width:1160px;will-change:transform,opacity}
.hero-copy .lead{margin:20px auto 26px;color:#aeb9cb}
.hero-visual{position:relative;width:min(1080px,108vw);margin-top:calc(min(1080px,108vw) * -.13);flex:1;display:flex;align-items:flex-end;justify-content:center;will-change:transform;transform-origin:50% 70%}
.hero-visual img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 56%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 56%,#000 52%,transparent 100%)}
.hero-glow{position:absolute;inset:auto 0 18% 0;height:50%;background:radial-gradient(ellipse 45% 60% at 50% 50%,rgba(42,169,173,.28),transparent 70%);filter:blur(30px);pointer-events:none}
.rise{display:block;overflow:hidden}
.rise>span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.rise:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.fade-in{opacity:0;animation:fadeIn 1.2s .5s var(--ease) forwards}
@keyframes fadeIn{to{opacity:1}}

/* ---------- facts ribbon ---------- */
.facts{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding:38px 0 54px}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fact b{display:block;color:#fff;font-size:1rem;margin-bottom:4px}
.fact span{color:var(--on-dark-muted);font-size:.85rem;line-height:1.45;display:block}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(100px,16vw,220px) 0}
.manifesto .m-text{font-size:clamp(1.7rem,4.3vw,3.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.14;color:var(--navy);max-width:1000px}
html[lang="ar"] .manifesto .m-text{line-height:1.5}
.manifesto .w{opacity:.14;transition:opacity .5s var(--ease)}
.manifesto .w.on{opacity:1}
.manifesto .w.k{color:var(--blue)}

/* ---------- founders ---------- */
.founders{display:flex;align-items:center;gap:clamp(20px,4vw,48px);margin-top:clamp(50px,7vw,90px);padding:clamp(26px,4vw,44px);border-radius:var(--radius);background:var(--bg-alt)}
.founders b{font-size:clamp(3.4rem,9vw,7rem);font-weight:700;letter-spacing:-.04em;line-height:1;flex:none;background:linear-gradient(90deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.founders h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:8px}
.founders p{color:var(--muted);max-width:640px}
.founders+.stats{margin-top:clamp(40px,5vw,64px)}

/* ---------- made in Saudi Arabia ---------- */
.saudi{background:linear-gradient(135deg,#00331c 0%,#00502c 42%,#04284a 100%);overflow:hidden}
.saudi .eyebrow{display:inline-block;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:999px;letter-spacing:.12em}
.saudi .lead{color:#c3d8cf}
.saudi-mark{position:absolute;inset-inline-end:-2%;top:6%;font-size:clamp(5rem,17vw,15rem);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);white-space:nowrap;pointer-events:none;user-select:none}
.saudi-h{margin:18px 0 18px}
.saudi-h span{display:block}
.saudi-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.saudi-points{display:grid;gap:22px;margin-top:clamp(30px,4vw,48px)}
.saudi-points>div{border-inline-start:2px solid var(--green);padding-inline-start:18px}
.saudi-points b{display:block;color:#fff;margin-bottom:3px}
.saudi-points span{color:#b5cdc3;font-size:.95rem;line-height:1.5;display:block}
.vision{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.vision-copy{padding:clamp(28px,3.4vw,44px)}
.vision-tag{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.vision h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:12px;line-height:1.2}
.vision p:not(.vision-tag){color:#c3d8cf;font-size:1rem;line-height:1.6}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(60px,8vw,110px)}
.stat{border-inline-start:2px solid var(--teal);padding-inline-start:18px}
.stat b{display:block;font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.03em;color:var(--navy);line-height:1.05}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem;line-height:1.45}

/* ---------- bento range ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:480px;color:var(--text);isolation:isolate;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile:hover{transform:scale(1.012);box-shadow:0 30px 70px -40px rgba(4,28,70,.45)}
.tile.s3{grid-column:span 3}.tile.s2{grid-column:span 2}.tile.s6{grid-column:span 6;min-height:520px}
.tile.glass{background:var(--tile-glass)}
.tile.plastic{background:var(--tile-plastic)}
.tile-copy{padding:34px 34px 0;position:relative;z-index:2}
.tile.s6 .tile-copy{text-align:center}
.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.tag.g{background:#dbe7fb;color:#14489e}
.tag.p{background:#d5f5e4;color:#0b7a43}
.tile h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:8px}
.tile p{color:var(--muted);font-size:.95rem;line-height:1.45;margin-bottom:10px}
.tile-img{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;margin-top:10px}
.tile-img img{width:100%;height:100%;object-fit:contain;object-position:bottom;max-height:340px;transition:transform .9s var(--ease)}
.tile.cover .tile-img img{object-fit:cover;max-height:none;height:300px}
.tile.s6 .tile-img img{max-height:330px}
.tile:hover .tile-img img{transform:scale(1.04)}

/* ---------- chapter intro (dark, image) ---------- */
.chapter{background:var(--ink);color:var(--on-dark);overflow:hidden;padding:clamp(90px,12vw,160px) 0 0}
.chapter-visual{margin-top:clamp(30px,5vw,60px);position:relative;height:clamp(320px,52vw,680px);overflow:hidden}
.chapter-visual img{position:absolute;inset:-8% 0 auto 0;width:100%;height:116%;object-fit:cover;object-position:center 40%;will-change:transform}
.chapter-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,transparent 22%,transparent 80%,var(--ink) 100%)}
.chapter.light-end .chapter-visual::after{background:linear-gradient(180deg,var(--ink) 0%,transparent 22%)}

/* ---------- segmented control / chips ---------- */
.seg{display:inline-flex;background:#e8e8ed;border-radius:999px;padding:4px;gap:2px;position:relative}
.dark .seg{background:rgba(255,255,255,.1)}
.seg button{position:relative;z-index:1;white-space:nowrap;padding:9px 22px;border-radius:999px;font-size:.92rem;font-weight:600;color:var(--muted);transition:color .3s,background .35s var(--ease),box-shadow .35s}
.dark .seg button{color:var(--on-dark-muted)}
.seg button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.dark .seg button[aria-selected="true"]{background:var(--green);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.92rem;color:var(--text);background:#fff;transition:.3s var(--ease)}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.dark .chip{background:transparent;border-color:rgba(255,255,255,.22);color:#fff}
.dark .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--ink)}

/* ---------- product feature blocks ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.feature.flip .feature-media{order:2}
.feature-copy h3{margin-bottom:16px}
.feature-copy>p:not(.eyebrow){color:var(--muted);font-size:1.08rem;margin-bottom:22px}
.media{border-radius:var(--radius);overflow:hidden;position:relative}
.media.glass{background:var(--tile-glass)}
.media.plastic{background:var(--tile-plastic)}
.media img{width:100%;height:auto}
.stack{position:relative;aspect-ratio:1/1}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.stack img.on{opacity:1;transform:none}
.stack.wide{aspect-ratio:3.9/1}
.formtext{min-height:150px;margin-top:26px}
.formtext h4{font-size:1.5rem;margin-bottom:8px}
.formtext h4 small{font-size:.95rem;color:var(--muted);font-weight:500;letter-spacing:0;margin-inline-start:8px}
.formtext p{color:var(--muted)}
.bullets{list-style:none;display:grid;gap:10px}
.bullets li{position:relative;padding-inline-start:28px;color:var(--text);font-size:.98rem}
.bullets li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:14px;height:8px;border-inline-start:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);transform-origin:center}
[dir="rtl"] .bullets li::before{transform:rotate(45deg)}
.dark .bullets li{color:var(--on-dark)}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(40px,6vw,70px)}
.quad>div{border-inline-start:2px solid var(--blue);padding-inline-start:16px}
.quad b{display:block;color:var(--navy);margin-bottom:4px}
.quad span{color:var(--muted);font-size:.9rem;line-height:1.45;display:block}
.dark .quad b{color:#fff}.dark .quad span{color:var(--on-dark-muted)}
.sub{margin-top:clamp(70px,10vw,130px)}

/* ---------- spec explorer ---------- */
.explorer{background:#fff;border-radius:var(--radius);padding:clamp(24px,4vw,48px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 80px -50px rgba(4,28,70,.35)}
.alt .explorer{background:#fff}
.explorer-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.explorer-head h4{font-size:1.35rem}
.explorer-body{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(24px,4vw,56px);align-items:center}
.explorer-body.single{grid-template-columns:1fr}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.spec{padding:18px 0;border-top:1px solid #e8e8ed}
.spec dt{font-size:.78rem;color:var(--muted);margin-bottom:4px;line-height:1.3}
.spec dd{font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:700;color:var(--navy);letter-spacing:-.02em}
.spec dd [data-f]{direction:ltr;unicode-bidi:isolate;display:inline-block}
.spec dd small{font-size:.62em;font-weight:500;color:var(--muted);margin-inline-start:3px}
.code{font-family:var(--mono);font-size:.82em;background:#eef1f6;color:var(--navy);padding:3px 9px;border-radius:7px;direction:ltr;unicode-bidi:isolate;display:inline-block}
.drawing{width:100%;max-width:420px;margin:0 auto;display:block;direction:ltr}
.drawing .outline{fill:#e9f2f6;stroke:var(--navy);stroke-width:.5;stroke-linejoin:round}
.drawing.amber .outline{fill:#c9792f33;stroke:#7a3d0c}
.drawing .inner{fill:#fff;stroke:none}
.drawing .innerline{fill:none;stroke:var(--navy);stroke-width:.3;stroke-linejoin:round}
.drawing.amber .innerline{stroke:#7a3d0c}
.drawing .dim{stroke:var(--blue);stroke-width:.25;fill:none}
.drawing .dimtext{font:600 3.1px var(--font);fill:var(--blue)}
.drawing .axis{stroke:#9aa7bd;stroke-width:.2;stroke-dasharray:2 1.2 .4 1.2}

/* ---------- cards ---------- */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg-alt);border-radius:22px;padding:28px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.alt .card{background:#fff}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 60px -40px rgba(4,28,70,.4)}
.card h4{font-size:1.1rem;margin-bottom:8px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.93rem;line-height:1.5}
.card .k{font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--blue);margin-bottom:10px;display:block;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] .card .k{text-align:right}
.card.img{padding:0;overflow:hidden}
.card.img img{width:100%;aspect-ratio:1200/662;object-fit:cover}
.card.img .card-b{padding:22px 26px 28px}
.card.amber{background:#fbeee0}
.dark .card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.dark .card h4{color:#fff}.dark .card p{color:var(--on-dark-muted)}
.ico{width:44px;height:44px;border-radius:12px;background:#e3f4f4;color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.dark .ico{background:rgba(61,235,138,.12);color:var(--green)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.swatches{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.swatches span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted)}
.swatches i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:16px;grid-template-columns:1.25fr 1fr 1fr}
.gallery .media{display:flex;align-items:center;justify-content:center}
.gallery .media img{object-fit:contain;max-height:520px;width:auto;max-width:100%;transition:transform .9s var(--ease)}
.gallery .media:hover img{transform:scale(1.04)}
.gallery.g4{grid-template-columns:1.2fr 1.2fr .62fr .62fr}
.gallery .col{display:grid;gap:16px}
figcaption,.caption{font-size:.8rem;color:var(--muted);margin-top:12px}

/* ---------- details / data ---------- */
details.data{border-top:1px solid var(--line);margin-top:34px}
details.data:last-of-type{border-bottom:1px solid var(--line)}
details.data summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:600;color:var(--navy);font-size:1.05rem}
details.data summary::-webkit-details-marker{display:none}
details.data summary::after{content:"+";font-size:1.6rem;font-weight:300;color:var(--blue);transition:transform .4s var(--ease);line-height:1}
details.data[open] summary::after{transform:rotate(45deg)}
.dark details.data{border-color:rgba(255,255,255,.14)}
.dark details.data summary{color:#fff}
.table-scroll{overflow-x:auto;padding-bottom:26px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:560px}
th{text-align:start;font-size:.75rem;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid #ececf0;color:var(--text)}
td.n,th.n{direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] td.n,[dir="rtl"] th.n{text-align:right}
tbody tr{transition:background .2s}
tbody tr:hover{background:#f5f8ff}
td:first-child{font-weight:700;color:var(--navy)}
.dark th{color:var(--on-dark-muted);border-color:rgba(255,255,255,.16)}
.dark td{color:var(--on-dark);border-color:rgba(255,255,255,.08)}
.dark td:first-child{color:#fff}
.dark tbody tr:hover{background:rgba(255,255,255,.04)}
.dl{display:grid;grid-template-columns:1fr;gap:0}
.dl>div{display:grid;grid-template-columns:minmax(130px,.8fr) 1.4fr;gap:16px;padding:13px 0;border-top:1px solid #e8e8ed;font-size:.95rem}
.dl dt{color:var(--muted)}
.dl dd{color:var(--text);font-weight:500}

/* ---------- 3D viewer ---------- */
.viewer{background:var(--ink);color:#fff;overflow:hidden}
.viewer-stage{position:relative;height:min(74vh,720px);min-height:440px;border-radius:var(--radius);overflow:hidden;background:radial-gradient(ellipse 70% 70% at 50% 42%,#0d4a66 0%,#062a45 45%,#010e1f 100%);touch-action:pan-y}
.viewer-stage canvas{width:100%;height:100%;display:block;cursor:grab}
.viewer-stage canvas:active{cursor:grabbing}
.viewer-ui{position:absolute;inset:auto 0 0 0;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;background:linear-gradient(0deg,rgba(1,14,31,.75),transparent)}
.viewer-ui>*{pointer-events:auto}
.viewer-top{position:absolute;inset:0 0 auto 0;padding:20px;display:flex;justify-content:center;pointer-events:none}
.viewer-top>*{pointer-events:auto}
.viewer-info{position:absolute;inset-inline-start:26px;top:84px;max-width:260px;pointer-events:none}
.viewer-info h4{color:#fff;font-size:1.35rem;margin-bottom:6px}
.viewer-info p{color:var(--on-dark-muted);font-size:.88rem;line-height:1.45}
.viewer-hint{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8fa2ba}
.viewer-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#9db4c2;font-size:.9rem;transition:opacity .5s;pointer-events:none}
.viewer-load.done{opacity:0}
.viewer-load i{width:18px;height:18px;border:2px solid rgba(127,224,195,.3);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.range{display:flex;align-items:center;gap:12px;font-size:.8rem;color:#c5d0e0}
.range input{-webkit-appearance:none;appearance:none;width:200px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);outline-offset:6px}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--green);border:0;box-shadow:0 2px 10px rgba(0,0,0,.4);cursor:pointer}
.range input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--green);border:0;cursor:pointer}
.viewer-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:30px}
.viewer-fallback img{max-height:80%;border-radius:20px}

/* ---------- development ---------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center}
.flow figure{background:var(--tile-plastic);border-radius:22px;overflow:hidden}
.flow figure img{width:100%;aspect-ratio:1/1;object-fit:contain}
.flow figcaption{background:var(--ink);color:#fff;padding:14px 18px;margin:0;font-size:.95rem;font-weight:600}
.flow figcaption i{font-style:normal;font-family:var(--mono);color:var(--green);margin-inline-end:8px;font-size:.8rem}
.flow .arrow{color:var(--green);font-size:1.6rem}
[dir="rtl"] .flow .arrow{transform:scaleX(-1)}
.timeline{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.timeline li{counter-increment:s;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:26px;transition:border-color .4s,transform .5s var(--ease)}
.timeline li:hover{border-color:rgba(61,235,138,.5);transform:translateY(-4px)}
.timeline li::before{content:"0" counter(s);font-family:var(--mono);font-size:.78rem;color:var(--green);display:block;margin-bottom:12px}
.timeline h4{font-size:1.08rem;margin-bottom:6px;color:#fff;letter-spacing:-.01em}
.timeline p{font-size:.92rem;color:var(--on-dark-muted);line-height:1.5}

/* ---------- quality ---------- */
.std{display:flex;flex-wrap:wrap;gap:8px;direction:ltr}
[dir="rtl"] .std{justify-content:flex-end}
.std span{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--navy);background:#fff}
.docs{list-style:none;counter-reset:d}
.docs li{counter-increment:d;display:grid;grid-template-columns:36px minmax(140px,1fr) 1.4fr;gap:12px;padding:14px 0;border-top:1px solid #e1e1e6;font-size:.95rem;align-items:baseline}
.docs li::before{content:"0" counter(d);font-family:var(--mono);font-size:.76rem;color:var(--teal);font-weight:700}
.docs b{color:var(--navy)}
.docs span{color:var(--muted)}
.status{display:flex;gap:16px;align-items:flex-start;background:#fff8e1;border:1px solid #f2dc8d;border-radius:18px;padding:20px 24px;margin-top:40px;font-size:.92rem;color:#5c4a08;line-height:1.55}
.status i{flex:none;width:24px;height:24px;border-radius:50%;background:#f0c132;color:#fff;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem}

/* ---------- ordering ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:n}
.steps4>div{counter-increment:n}
.steps4>div::before{content:counter(n);display:flex;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:14px}
.steps4 b{display:block;color:var(--navy);margin-bottom:4px;font-size:1.05rem}
.steps4 span{color:var(--muted);font-size:.92rem;line-height:1.5;display:block}
.builder{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 30px 80px -50px rgba(4,28,70,.4)}
.builder-form{padding:clamp(24px,4vw,44px)}
.builder-out{background:var(--ink);color:#fff;padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.field{margin-bottom:22px}
.field>label,.field>.lbl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:9px}
.codeout{font-family:var(--mono);font-size:clamp(1.05rem,2.1vw,1.55rem);font-weight:700;color:var(--green);direction:ltr;unicode-bidi:isolate;word-break:break-all;line-height:1.35;min-height:2.7em;text-align:left}
[dir="rtl"] .codeout{text-align:right}
.codeout span{display:inline-block;animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.builder-out p{color:var(--on-dark-muted);font-size:.9rem}
.ghost{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:600;font-size:.9rem;transition:.3s}
.ghost:hover{border-color:var(--green);color:var(--green)}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--on-dark);overflow:hidden}
.contact-bg{position:absolute;inset:0 0 auto 0;height:70%;opacity:.5;pointer-events:none}
.contact-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,transparent 90%)}
.contact .wrap{position:relative}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:clamp(40px,6vw,70px)}
.clist{list-style:none}
.clist li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.clist small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:4px;font-weight:600}
.clist a,.clist span{color:#fff;font-weight:600;font-size:1.08rem}
.clist a:hover{color:var(--green)}
.form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:clamp(22px,3.5vw,38px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:.78rem;font-weight:600;color:var(--on-dark-muted);margin-bottom:14px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;padding:13px 15px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(1,14,31,.55);color:#fff;font:inherit;font-size:.98rem;transition:border-color .25s,box-shadow .25s}
.form select option{color:#111}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(61,235,138,.18)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form .btn:disabled{opacity:.6;cursor:progress;transform:none}
.form .hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-note{margin-top:12px;text-align:center}
.downloads{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- footer ---------- */
.footer{background:#00091a;color:#7d889b;padding:54px 0 40px;font-size:.78rem;line-height:1.6}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:24px}
.footer-top img{height:46px;width:auto}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:#c5d0e0;font-size:.82rem}
.footer-links a:hover{color:#fff}
.footer p{max-width:920px}
.footer p+p{margin-top:10px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.96);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-s.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.4s}.stagger.in>*:nth-child(7){transition-delay:.48s}
.stagger.in>*:nth-child(8){transition-delay:.56s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .rv,.rv-s,.stagger>*{opacity:1;transform:none}
  .rise>span{transform:none}.fade-in{opacity:1}
  .manifesto .w{opacity:1}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:10px 24px 24px;margin:0;transform:translateY(-130%);transition:transform .5s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
  .nav.on-dark .nav-links{background:rgba(1,14,31,.97)}
  .nav.open .nav-links{transform:none}
  .nav-links a{font-size:1.15rem !important;padding:14px 0;border-bottom:1px solid rgba(128,128,128,.2)}
  .burger{display:block}
  .nav-tools{margin-inline-start:auto}
  .nav-cta{display:none}
  .feature,.explorer-body,.contact-grid,.builder,.saudi-grid{grid-template-columns:1fr}
  .feature.flip .feature-media{order:0}
  .cards.c4,.quad,.steps4,.stats,.facts-grid{grid-template-columns:repeat(2,1fr)}
  .cards.c3,.timeline{grid-template-columns:1fr 1fr}
  .gallery,.gallery.g4{grid-template-columns:1fr 1fr}
  .tile.s3,.tile.s2{grid-column:span 3}
  .viewer-info{position:static;max-width:none;padding:18px 22px 0;text-align:center}
  .viewer-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .viewer-stage canvas{height:56vh;min-height:360px;order:2}
  .viewer-top{position:static;order:0;padding:18px 12px 0}
  .viewer-info{order:1}
  .viewer-ui{position:static;order:3;background:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .tile.s3,.tile.s2,.tile.s6{grid-column:span 6}
  .tile{min-height:420px}
  .tile-copy{padding:26px 24px 0}
  .cards.c3,.cards.c2,.cards.c4,.timeline,.quad,.steps4{grid-template-columns:1fr}
  .stats,.facts-grid{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr 1fr}
  .gallery,.gallery.g4{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow .arrow{transform:rotate(90deg);justify-self:center}
  [dir="rtl"] .flow .arrow{transform:rotate(90deg)}
  .form .row{grid-template-columns:1fr}
  .docs li{grid-template-columns:30px 1fr}
  .docs li span{grid-column:2}
  .seg button{padding:9px 16px}
  .viewer-top{padding:14px 8px 0 !important}
  .viewer-top .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .viewer-top .seg::-webkit-scrollbar{display:none}
  .viewer-top .seg button{padding:8px 12px;font-size:.82rem}
  .hero-visual{width:150vw;margin-top:-14vw}
  .founders{flex-direction:column;align-items:flex-start;gap:10px}
  .range input{width:150px}
}