/* V10 — immersive creative direction. All 3D treatments have accessible fallbacks. */
:root{--v10-electric:#83d6ff;--v10-ember:#fc6664;--v10-stroke:rgba(165,210,235,.18)}
html{scroll-padding-top:112px}
html[data-theme="light"]{--v10-stroke:rgba(9,33,55,.18)}
.v10-effects-toggle{font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;width:43px;height:43px;display:grid;place-items:center;border:1px solid #91d9ff5c;border-radius:50%;background:linear-gradient(145deg,#276b90bb,#0e1c2f);color:#e5f7ff;box-shadow:inset 0 0 16px #60bbec11;cursor:pointer;transition:transform .35s,background .35s}
.v10-effects-toggle:hover{transform:rotate(-12deg) scale(1.09)}
.v10-effects-toggle[aria-pressed="false"]{opacity:.58;filter:grayscale(.6);box-shadow:none}
/* An animated lens device with subtle perspective. */
.hero{perspective:1400px;overflow:hidden}
.v10-hero-lines{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;overflow:hidden;transform-style:preserve-3d}
.v10-hero-lines i{display:block;position:absolute;width:48vw;height:48vw;max-width:800px;max-height:800px;border:1px solid rgba(143,212,246,.15);border-radius:50%;left:46%;top:4%;transform:rotateX(60deg) rotateY(-28deg) rotateZ(24deg);animation:v10-orbit 22s linear infinite}
.v10-hero-lines i:nth-child(2){width:36vw;height:36vw;top:14%;left:51%;border-color:rgba(229,96,93,.17);animation-duration:28s;animation-direction:reverse}
.v10-hero-lines i:nth-child(3){width:64vw;height:64vw;top:-8%;left:38%;border-color:rgba(143,212,246,.08);animation-duration:35s}
@keyframes v10-orbit{0%{rotate:0deg}100%{rotate:360deg}}
.v10-hero-stamp{position:absolute;z-index:4;inset-inline-end:5%;bottom:150px;direction:ltr;writing-mode:vertical-rl;letter-spacing:.38em;font:500 10px Manrope,Arial,sans-serif;color:#cce8f5b0;pointer-events:none}
.v10-hero-stamp b{color:#fd5557;font-size:17px}
.hero-content h1{position:relative;text-shadow:0 12px 45px #0008}
.hero-content h1 em{display:inline-block;background:linear-gradient(125deg,#fff,#a7e4ff 45%,#45a7d4 85%);color:transparent;-webkit-background-clip:text;background-clip:text}
.hero-content .button-red{box-shadow:0 12px 45px #e445483f}
/* 3D deck — real images in a perspective space; no fake 3D canvas required. */
.v10-experience{position:relative;overflow:hidden;margin:22px 12px 0;padding:clamp(70px,8vw,125px) 0 55px;border-radius:36px;background:radial-gradient(ellipse at 50% 43%,#173b54 0%,#0b1a29 38%,#050c15 78%);border:1px solid #8cc9ef15;isolation:isolate;color:#f8fbff}
.v10-experience:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;background-image:radial-gradient(#a7dfff 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);z-index:-1}
.v10-experience:after{content:"IMMERSIVE";position:absolute;top:20%;left:50%;transform:translateX(-50%);font:900 clamp(100px,19vw,360px)/.9 Manrope,Arial,sans-serif;color:transparent;-webkit-text-stroke:1px #b7def21b;letter-spacing:-.08em;direction:ltr;pointer-events:none;z-index:0}
.v10-head{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:40px}
.v10-kicker{font:700 11px/1.4 Manrope,"IBM Plex Sans Arabic",sans-serif;letter-spacing:.16em;color:#71c7ee;text-transform:uppercase}
.v10-head h2{font:800 clamp(62px,9vw,155px)/.9 Manrope,"IBM Plex Sans Arabic",sans-serif;letter-spacing:-.095em;color:#fbfdff;margin:21px 0 0}
html[lang="ar"] .v10-head h2{line-height:1.18;letter-spacing:-.04em}
.v10-head h2 em{font:inherit;color:var(--v10-electric);font-style:normal}
.v10-head>p{max-width:320px;color:#bcced8;font-size:15px;line-height:1.9;margin-bottom:10px}
.v10-stage{height:clamp(440px,52vw,720px);position:relative;perspective:1500px;overflow:hidden;isolation:isolate;touch-action:pan-y;outline-offset:-15px}
.v10-stage:focus-visible{outline:2px solid #88dbff}
.v10-grid{position:absolute;left:-15%;right:-15%;bottom:-37%;height:90%;transform:perspective(680px) rotateX(66deg);transform-origin:center 50%;background:linear-gradient(#78cfff16 1px,transparent 1px),linear-gradient(90deg,#78cfff16 1px,transparent 1px);background-size:85px 85px;mask-image:linear-gradient(to bottom,transparent,#000 35%,transparent 91%);pointer-events:none;z-index:0}
.v10-halo{position:absolute;inset:9% 29% 10%;border-radius:50%;border:1px solid #c4ebff30;box-shadow:0 0 0 48px #b6e9ff05,0 0 0 105px #b6e9ff04,inset 0 0 90px #69beed0d;transform:rotateX(67deg) rotateZ(-14deg);pointer-events:none;z-index:0;animation:v10-halo 10s ease-in-out infinite alternate}
@keyframes v10-halo{to{transform:rotateX(67deg) rotateZ(13deg) scale(1.12)}}
.v10-deck{position:absolute;inset:0;transform-style:preserve-3d;z-index:1;pointer-events:none}
.v10-panel{position:absolute;left:50%;top:50%;width:clamp(245px,29vw,465px);height:clamp(345px,37vw,560px);padding:8px;display:block;background:#0a1a27;border:1px solid #a9dffa4b;border-radius:12px;overflow:hidden;box-shadow:0 25px 70px #0009,0 0 60px #55bde511;transform:translate(-50%,-50%) translate3d(var(--v10-x,0px),var(--v10-y,0px),var(--v10-z,0px)) rotateY(var(--v10-angle,0deg)) scale(var(--v10-scale,1));opacity:var(--v10-opacity,1);filter:saturate(var(--v10-sat,1));transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .7s,filter .7s,box-shadow .7s;will-change:transform;pointer-events:auto;cursor:pointer;backface-visibility:hidden}
.v10-panel img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.v10-panel:after{content:"";position:absolute;inset:7px;border:1px solid #ffffff24;border-radius:6px;pointer-events:none;background:linear-gradient(180deg,transparent 60%,#06101eb3)}
.v10-panel .v10-panel-meta{position:absolute;z-index:2;bottom:23px;left:23px;right:23px;text-align:start;color:#fff;text-shadow:0 2px 10px #000a}
.v10-panel .v10-panel-meta small{display:block;font:10px/1.3 Manrope,Arial,sans-serif;letter-spacing:.18em;opacity:.7;margin-bottom:6px}
.v10-panel .v10-panel-meta strong{font:700 clamp(16px,2vw,25px)/1.4 "IBM Plex Sans Arabic",Manrope,sans-serif;display:block}
.v10-panel[data-active="true"]{border-color:#d3f2ffce;box-shadow:0 38px 100px #000a,0 0 50px #54bff93b}
.v10-panel[data-active="true"] img{transform:scale(1.035)}
.v10-panel:hover{filter:saturate(1.15) brightness(1.08)}
.v10-panel:focus-visible{outline:3px solid #ff7373;outline-offset:4px}
.v10-stage-number{position:absolute;bottom:8%;inset-inline-end:6%;font:700 10px/1 Manrope,sans-serif;letter-spacing:.3em;color:#b4d2e48a;direction:ltr}
.v10-footer{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:20px;border-top:1px solid #d9eefe20;padding-top:26px}
.v10-controls{display:flex;align-items:center;gap:20px;direction:ltr}
.v10-controls button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #c7eafa55;background:#ffffff0c;color:#d5edfc;font:27px/1 Arial,sans-serif;cursor:pointer;transition:background .3s,transform .3s}
.v10-controls button:hover{background:#66c2f42d;transform:scale(1.13)}
.v10-controls output{font:700 12px Manrope,sans-serif;letter-spacing:.22em;color:#e6f6ff;white-space:nowrap}
.v10-photo-info{text-align:center;font-size:14px;color:#b4c9d7}
.v10-open-photo{justify-self:end;padding:14px 18px;display:flex;gap:13px;align-items:center;border:1px solid #6bbce34d;border-radius:60px;background:#82ceef14;color:#e9f7ff;cursor:pointer;font-size:12px;transition:background .25s,transform .35s}
.v10-open-photo:hover{background:#82ceef36;transform:translateY(-3px)}
.v10-open-photo span:last-child{font-size:20px}
/* Editorial scroll story. Photographs crossfade rather than moving the scrollbar. */
.v10-narrative{position:relative;margin:40px 12px 0;padding:100px 0 25px;border-radius:36px;background:#080d15;color:#fbfcff;border:1px solid #ffffff13;overflow:clip}
.v10-narrative-heading{max-width:1000px;margin-inline:auto;text-align:center;padding-bottom:40px}
.v10-narrative-heading h2{font:700 clamp(44px,6vw,95px)/1.24 "IBM Plex Sans Arabic",Manrope,sans-serif;letter-spacing:-.05em;margin:20px auto;color:#f2f7fc}
.v10-narrative-heading p{font-size:16px;line-height:1.9;color:#99b5c7;max-width:680px;margin:auto}
.v10-narrative-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);align-items:start;gap:clamp(25px,5vw,85px);position:relative}
.v10-narrative-visual{position:sticky;top:118px;height:min(72svh,760px);border-radius:22px;overflow:hidden;background:#13202b;border:1px solid #ffffff20;box-shadow:0 35px 70px #0006;isolation:isolate}
.v10-narrative-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#06101cc9,transparent 35%);pointer-events:none}
.v10-narrative-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.35s cubic-bezier(.2,1,.3,1);}
.v10-narrative-visual img:nth-child(2){opacity:0;transition:opacity .8s,transform 1.3s}
.v10-narrative-visual img.v10-visible{opacity:1}
.v10-image-badge{position:absolute;bottom:28px;left:28px;z-index:3;font:700 11px Manrope,sans-serif;color:#fff;letter-spacing:.15em;direction:ltr}
.v10-image-badge span{color:var(--v10-electric);margin-inline-start:17px}
.v10-narrative-steps{padding-bottom:13vh}
.v10-narrative-step{min-height:74svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:.4;transform:translateY(15px);transition:opacity .65s,transform .65s;border-bottom:1px solid #ffffff1b}
.v10-narrative-step.v10-current{opacity:1;transform:translateY(0)}
.v10-narrative-step>span{font:700 11px Manrope,Arial,sans-serif;letter-spacing:.22em;color:#85c9e9;direction:ltr}
.v10-narrative-step h3{font:700 clamp(34px,4vw,67px)/1.35 "IBM Plex Sans Arabic",Manrope,sans-serif;letter-spacing:-.05em;color:white;margin:25px 0}
.v10-narrative-step p{color:#b8c7d4;font-size:clamp(15px,1.5vw,19px);line-height:2;max-width:460px}
.v10-story-action{background:none;border:0;border-bottom:1px solid #8bcce7;color:#8bcce7;font-size:14px;padding:14px 0;margin-top:24px;cursor:pointer}
.v10-story-action:hover{color:white;border-bottom-color:white}
/* Cine transitions: view transitions in modern browsers; existing fallback remains intact. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:v10-old .48s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:v10-new .75s cubic-bezier(.22,1,.36,1) both}
@keyframes v10-old{to{opacity:.25;filter:blur(9px);transform:scale(1.055)}}
@keyframes v10-new{from{opacity:0;filter:blur(14px);transform:scale(.97)}to{opacity:1;filter:blur(0);transform:scale(1)}}
/* Hover images feel spatial; native pointer is retained. */
@media(hover:hover) and (pointer:fine){.film-cover,.story-row-image,.resource-card,.library-card{transform:perspective(1000px) rotateX(var(--v10-rx,0deg)) rotateY(var(--v10-ry,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1)}}
@media(max-width:850px){.v10-head{gap:20px}.v10-stage{height:550px}.v10-panel{width:min(48vw,350px);height:min(65vw,460px)}.v10-narrative-layout{gap:26px;grid-template-columns:1fr 1fr}.v10-narrative-step h3{font-size:34px}.v10-narrative-visual{height:56svh;top:102px}}
@media(max-width:600px){.v10-effects-toggle{width:34px;height:34px;font-size:10px}.v10-experience{margin-inline:5px;border-radius:23px;padding-top:65px}.v10-head{display:block}.v10-head h2{font-size:clamp(65px,16vw,100px);margin-top:13px}.v10-head>p{max-width:310px;font-size:13px;margin-top:20px}.v10-experience:after{font-size:100px;top:33%}.v10-stage{height:440px}.v10-panel{width:65vw;height:345px;max-width:305px}.v10-panel .v10-panel-meta{bottom:16px;left:16px;right:16px}.v10-panel .v10-panel-meta strong{font-size:16px}.v10-grid{background-size:48px 48px}.v10-footer{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:17px}.v10-controls{gap:7px}.v10-controls button{width:42px;height:42px;font-size:22px}.v10-controls output{font-size:10px;letter-spacing:.1em}.v10-photo-info{grid-column:span 2;grid-row:2;font-size:12px;text-align:start}.v10-open-photo{grid-column:2;grid-row:1;font-size:11px;padding:10px}.v10-narrative{margin:32px 5px 0;padding-top:66px;border-radius:23px}.v10-narrative-heading{text-align:start;padding-bottom:28px}.v10-narrative-heading h2{font-size:44px}.v10-narrative-heading p{font-size:13px}.v10-narrative-layout{display:block}.v10-narrative-visual{position:sticky;top:84px;height:36svh;min-height:260px;z-index:3;border-radius:14px}.v10-narrative-steps{padding-bottom:5vh}.v10-narrative-step{min-height:52svh;opacity:1;padding:65px 0 30px}.v10-narrative-step h3{font-size:35px;margin:15px 0}.v10-narrative-step p{font-size:15px}.v10-image-badge{left:15px;bottom:15px;font-size:9px}.v10-hero-stamp{display:none}.v10-hero-lines i{width:80vw;height:80vw;top:17%;left:20%}.hero-content h1{font-size:clamp(40px,10vw,63px)}.quick-nav{bottom:12px;padding:5px;max-width:calc(100vw - 20px);border-radius:16px}.quick-nav a{min-width:auto;gap:5px;padding:9px 10px;min-height:37px;border-radius:11px}.quick-nav a>span{font-size:16px}.quick-nav small{font-size:9px}.hero-selector{max-width:calc(100vw - 44px);overflow-x:auto;scrollbar-width:none}.hero-selector::-webkit-scrollbar{display:none}.home-shortcuts{padding-top:8px}}
/* Reduced-motion and explicitly switched-off 3D visuals retain every image and control. */
@media(prefers-reduced-motion:reduce){.v10-hero-lines,.v10-halo{animation:none!important}.v10-panel{transition:none!important;will-change:auto}.v10-narrative-visual img,.v10-narrative-step{transition:none!important}.v10-hero-lines{display:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
html.v10-lite .v10-hero-lines{display:none}html.v10-lite .v10-halo{animation:none}html.v10-lite .v10-panel{transition:none;will-change:auto}html.v10-lite .v10-narrative-visual img,html.v10-lite .v10-narrative-step{transition:none}


/* V10.1 — homepage cleanup, desktop dock return, stronger mouse interactivity */
html,body{overflow-x:hidden}
.v10-experience,.v10-narrative,.hero{overflow:clip}
.v10-deck{transform:rotateX(var(--v10-stage-rx,0deg)) rotateY(var(--v10-stage-ry,0deg)) translate3d(var(--v10-stage-dx,0px),var(--v10-stage-dy,0px),0);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.v10-panel{transform:translate(-50%,-50%) translate3d(var(--v10-x,0px),var(--v10-y,0px),var(--v10-z,0px)) rotateX(var(--v10-hover-rx,0deg)) rotateY(calc(var(--v10-angle,0deg) + var(--v10-hover-ry,0deg))) scale(var(--v10-scale,1))}
.v10-panel img{transform:scale(var(--v10-img-scale,1)) translate3d(var(--v10-img-x,0px),var(--v10-img-y,0px),0)}
.v10-panel[data-active="true"] img{transform:scale(var(--v10-img-scale,1.035)) translate3d(var(--v10-img-x,0px),var(--v10-img-y,0px),0)}
.quick-nav{display:flex!important;bottom:22px;left:50%;transform:translateX(-50%);z-index:64}
.quick-nav a{position:relative}
.quick-nav a.quick-contact{background:linear-gradient(135deg,rgba(117,199,235,.18),rgba(231,72,72,.16));border:1px solid rgba(147,214,248,.26);color:#ecf8ff}
.quick-nav a.quick-contact small{font-weight:700;letter-spacing:.04em}
.quick-nav a.quick-contact::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 28px rgba(117,199,235,.14);pointer-events:none}
/* restore floating dock on desktop too */
@media(min-width:851px){.quick-nav{display:flex!important}}
@media(hover:hover) and (pointer:fine){
  .v10-stage:hover .v10-stage-number{color:#e1f5ff}
}
@media(max-width:600px){
  .quick-nav a.quick-contact small{font-size:9px}
}
html.v10-lite .v10-deck{transform:none!important}
html.v10-lite .v10-panel{transform:translate(-50%,-50%) translate3d(var(--v10-x,0px),var(--v10-y,0px),var(--v10-z,0px)) rotateY(var(--v10-angle,0deg)) scale(var(--v10-scale,1))}
html.v10-lite .v10-panel img{transform:scale(1)!important}