:root{--black:#030405;--ink:#080a0b;--white:#edf0ec;--soft:#dce2df;--muted:#9da7a7;--cyan:#9be7ff;--acid:#d9ff43;--line:rgba(255,255,255,.16);--dark-line:rgba(8,10,11,.2);--gutter:clamp(20px,3vw,48px);--sans:"Inter Tight",Arial,sans-serif;--arabic:"IBM Plex Sans Arabic",Tahoma,sans-serif;--mono:"IBM Plex Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--black);color:var(--white);font:400 16px/1.5 var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button{touch-action:manipulation}.skip{position:fixed;z-index:999;top:10px;left:10px;padding:10px 16px;background:#fff;color:#000;transform:translateY(-150%)}.skip:focus{transform:none}.ar{display:none!important}body[data-lang=ar]{direction:rtl;font-family:var(--arabic)}body[data-lang=ar] .en{display:none!important}body[data-lang=ar] .ar{display:inline!important}body[data-lang=ar] h1,body[data-lang=ar] h2,body[data-lang=ar] h3,body[data-lang=ar] .process-list b{font-family:var(--arabic);letter-spacing:-.04em;line-height:1.1}
.header{position:fixed;z-index:100;inset:0 0 auto;height:76px;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid transparent;opacity:0;transform:translateY(-12px);pointer-events:none}.sequence-complete .header{opacity:1;transform:none;pointer-events:auto;transition:opacity .8s .2s var(--ease),transform .8s .2s var(--ease),height .3s,background .3s,border-color .3s}.header.scrolled{height:64px;background:rgba(3,4,5,.88);border-color:var(--line);backdrop-filter:blur(18px)}.logo{justify-self:start;display:flex;align-items:center;gap:11px;font-size:.62rem;font-weight:600;letter-spacing:.08em}.logo svg{width:30px;height:30px;fill:currentColor}.nav{display:flex;gap:34px;font-size:.62rem}.nav a{padding:14px 2px;position:relative}.nav a:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .25s}.nav a:hover:after,.nav a:focus-visible:after{transform:scaleX(1)}.header-end{justify-self:end;display:flex;align-items:center;gap:12px}.language,.talk{min-height:44px;display:grid;place-items:center;border:0;background:transparent;font-size:.6rem;cursor:pointer}.language{width:44px}.talk{padding:0 18px;border:1px solid rgba(255,255,255,.55);border-radius:99px;transition:.25s}.talk:hover,.talk:focus-visible{background:var(--white);color:var(--ink)}.menu,.mobile-nav{display:none}
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;background:#030405}.hero:before{content:"";position:absolute;z-index:-4;inset:0;background:radial-gradient(circle at 67% 48%,#10232d 0,rgba(8,16,20,.48) 25%,#030405 65%)}.film-grain{position:absolute;z-index:5;inset:-40%;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain .25s steps(2) infinite}.signal-stage{position:absolute;z-index:1;inset:0;perspective:1600px;transform-style:preserve-3d}.signal-final{position:absolute;right:-4%;top:50%;width:min(81vw,1450px);height:auto;transform:translateY(-50%) scale(1.08);opacity:0;filter:blur(18px) brightness(.45);transition:opacity 1.1s,filter 1.5s var(--ease),transform 2s var(--ease);will-change:transform,filter,opacity}.seq-focus .signal-final{opacity:.58;filter:blur(7px) brightness(.75)}.sequence-complete .signal-final{opacity:.9;filter:blur(0) brightness(.9);transform:translateY(-50%) scale(1)}.signal-aura{position:absolute;left:67%;top:50%;width:40vw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(80,194,231,.11);filter:blur(110px);opacity:0}.seq-gather .signal-aura{opacity:1;transition:opacity 1.3s}.signal-beam{position:absolute;left:18%;right:2%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px rgba(155,231,255,.8);opacity:0;transform:scaleX(.1);transform-origin:left}.seq-gather .signal-beam{opacity:.48;transform:scaleX(1);transition:opacity .6s,transform 1.3s var(--ease)}.signal-beam.b2{top:60%;left:30%;opacity:0}.seq-build .signal-beam.b2{opacity:.18;transition:.8s}
.signal-layer{position:absolute;left:47%;top:50%;width:min(44vw,690px);height:min(56vh,560px);padding:18px;border:1px solid rgba(168,224,241,.26);background:linear-gradient(125deg,rgba(131,185,199,.055),rgba(7,12,14,.36));box-shadow:inset 0 0 70px rgba(95,201,231,.025),0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(3px);opacity:0;transform-style:preserve-3d;will-change:transform,opacity,filter}.signal-layer>span{font:500 .45rem/1 var(--mono);letter-spacing:.11em;color:#8fc9d9}.layer-message{transform:translate(-165%,-92%) rotateY(53deg) rotateZ(-8deg) scale(.66);filter:blur(9px)}.layer-interface{transform:translate(95%,-115%) rotateY(-57deg) rotateZ(9deg) scale(.65);filter:blur(7px)}.layer-code{transform:translate(-135%,55%) rotateY(48deg) rotateZ(6deg) scale(.62);filter:blur(8px)}.layer-flow{transform:translate(110%,42%) rotateY(-55deg) rotateZ(-8deg) scale(.68);filter:blur(10px)}.seq-gather .signal-layer{opacity:.72;transition:transform 1.35s var(--ease),opacity .8s,filter 1.2s}.seq-gather .layer-message{transform:translate(-82%,-69%) rotateY(34deg) rotateZ(-3deg) scale(.78);filter:blur(4px)}.seq-gather .layer-interface{transform:translate(-15%,-70%) rotateY(-29deg) rotateZ(3deg) scale(.8);filter:blur(3px)}.seq-gather .layer-code{transform:translate(-75%,-19%) rotateY(30deg) rotateZ(2deg) scale(.78);filter:blur(4px)}.seq-gather .layer-flow{transform:translate(-5%,-22%) rotateY(-32deg) rotateZ(-2deg) scale(.82);filter:blur(4px)}.seq-build .signal-layer{opacity:.9;filter:none;transition:transform 1.4s var(--ease),opacity .7s,filter 1s}.seq-build .layer-message{transform:translate(-47%,-50%) translateZ(-210px) rotateY(-10deg) scale(.9)}.seq-build .layer-interface{transform:translate(-43%,-50%) translateZ(-95px) rotateY(-8deg) scale(.93)}.seq-build .layer-code{transform:translate(-39%,-50%) translateZ(35px) rotateY(-6deg) scale(.96)}.seq-build .layer-flow{transform:translate(-35%,-50%) translateZ(175px) rotateY(-4deg)}.seq-focus .signal-layer{opacity:.12;filter:blur(6px);transition:opacity 1s,filter 1s}.sequence-complete .signal-layer{opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.message-lock{height:90%;display:flex;flex-direction:column;justify-content:center;gap:24px}.message-lock i{height:1px;background:rgba(173,227,242,.28)}.message-lock i:nth-child(1){width:45%}.message-lock i:nth-child(2){width:80%}.message-lock i:last-child{width:58%}.message-lock b{font-size:clamp(1.8rem,3vw,3.8rem);font-weight:500;letter-spacing:-.05em}.interface-lock{height:90%;padding:8%;position:relative}.interface-lock strong{position:absolute;left:8%;top:30%;font-size:clamp(2.2rem,4vw,5.3rem);font-weight:500;line-height:.78;letter-spacing:-.07em}.interface-lock em{position:absolute;bottom:10%;width:28%;height:18%;border:1px solid rgba(173,227,242,.24)}.interface-lock em:last-child{left:39%}.code-lock{height:90%;padding:8% 4%;display:grid;grid-template-columns:35px 1fr;align-content:center;gap:20px;color:#a8bdc2;font:400 .7rem/1 var(--mono)}.code-lock i{font-style:normal;color:#60808a}.flow-lock{height:90%;display:flex;align-items:center;gap:6%}.flow-lock b{width:13px;height:13px;border-radius:50%;border:1px solid var(--cyan);box-shadow:0 0 18px rgba(155,231,255,.5)}.flow-lock i{flex:1;height:1px;background:linear-gradient(90deg,var(--cyan),rgba(155,231,255,.1))}.focus-reticle{position:absolute;left:66%;top:49%;width:min(43vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) scale(1.18);opacity:0}.seq-focus .focus-reticle{opacity:.42;transform:translate(-50%,-50%) scale(.86);transition:opacity .45s,transform 1.25s var(--ease)}.sequence-complete .focus-reticle{opacity:0;transition:opacity .45s}.focus-reticle i{position:absolute;inset:0;border:1px solid rgba(183,237,250,.3);border-radius:50%}.focus-reticle i:nth-child(2){inset:23%;border-style:dashed;animation:rotate 4s linear infinite}.focus-reticle b{position:absolute;left:45%;right:45%;top:50%;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.intro-hud{position:absolute;z-index:10;left:var(--gutter);right:var(--gutter);top:28px;display:flex;justify-content:space-between;color:#8eb8c2;font:500 .46rem/1 var(--mono);letter-spacing:.1em}.intro-hud span:nth-child(2){color:#d5f7ff}.skip-intro{position:absolute;z-index:11;right:var(--gutter);bottom:27px;min-height:44px;padding:0;border:0;border-bottom:1px solid #667075;background:transparent;color:#aeb9bb;font-size:.52rem;cursor:pointer}.sequence-complete .intro-hud,.sequence-complete .skip-intro{opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.hero-copy{position:absolute;z-index:7;inset:0;padding:96px var(--gutter) 28px;opacity:0;transform:translateY(18px)}.sequence-complete .hero-copy{opacity:1;transform:none;transition:opacity 1s .18s,transform 1s .18s var(--ease)}.hero-kicker{position:absolute;left:var(--gutter);top:16%;margin:0;color:#a7b0b0;font-size:.54rem;letter-spacing:.11em;text-transform:uppercase}.hero h1{position:absolute;left:var(--gutter);right:var(--gutter);top:48%;transform:translateY(-50%);margin:0;font:600 clamp(4.2rem,7.25vw,8.8rem)/.76 var(--sans);letter-spacing:-.075em;text-transform:uppercase}.hero h1>span{display:block}.hero h1>span:nth-child(2){text-align:center}.hero h1>span:nth-child(3){text-align:right;font-size:.86em}.hero-note{position:absolute;right:var(--gutter);bottom:9%;max-width:360px}.hero-note p{margin:0 0 26px;color:#bbc3c2;font-size:.76rem}.hero-note a{width:max-content;min-height:44px;display:flex;align-items:center;gap:48px;border-bottom:1px solid #fff;font-size:.62rem;font-weight:600}.hero-note svg,.contact-main svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.5}.hero-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;display:flex;align-items:center;justify-content:space-between;color:#7e898b;font:500 .44rem/1 var(--mono);letter-spacing:.07em}.hero-foot button{min-height:44px;border:0;background:transparent;color:#8f9a9c;font:500 .44rem/1 var(--mono);cursor:pointer}.motion-play{display:none}.motion-paused .motion-pause{display:none}.motion-paused .motion-play{display:inline}.sequence-complete:not(.motion-paused) .signal-final{animation:finalDrift 12s 2s ease-in-out infinite alternate}.motion-paused *{animation-play-state:paused!important}
.section-top{display:flex;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid currentColor;font:500 .5rem/1 var(--mono);letter-spacing:.09em}.thesis{min-height:108svh;padding:clamp(100px,10vw,150px) var(--gutter) 42px;background:#e2e6e2;color:var(--ink);display:flex;flex-direction:column}.thesis h2{max-width:1450px;margin:auto 0;font:500 clamp(4rem,7.2vw,8.8rem)/.88 var(--sans);letter-spacing:-.068em;text-transform:uppercase}.thesis h2 em,.contact h2 em{font-weight:400;font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--ink)}.thesis-copy{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-left:44%;padding-top:28px;border-top:1px solid var(--dark-line)}.thesis-copy p{max-width:410px;margin:0;color:#484c49;font-size:.84rem}.thesis-line{margin-top:80px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:18px;font:500 .48rem/1 var(--mono);letter-spacing:.08em}.thesis-line i{height:1px;background:#969d98}.thesis-line b{padding:8px 11px;border-radius:99px;background:var(--ink);color:#fff;font-weight:500}
.disciplines{padding:0 var(--gutter);background:#030405}.discipline-intro{min-height:92svh;padding:clamp(100px,10vw,150px) 0;display:flex;flex-direction:column}.discipline-intro h2{margin:auto 0 0;font:500 clamp(5rem,9vw,11rem)/.78 var(--sans);letter-spacing:-.075em;text-transform:uppercase}.discipline{position:relative;min-height:100svh;padding:clamp(90px,8vw,120px) 0;display:grid;grid-template-columns:minmax(300px,.68fr) minmax(580px,1.32fr);gap:clamp(60px,9vw,145px);align-items:center;border-top:1px solid var(--line);overflow:hidden}.discipline-copy small{display:block;margin-bottom:clamp(80px,10vw,145px);color:#79b9ca;font:500 .5rem/1 var(--mono);letter-spacing:.1em}.discipline-copy h3{margin:0 0 32px;font:500 clamp(3.3rem,5vw,6.3rem)/.9 var(--sans);letter-spacing:-.058em}.discipline-copy p{max-width:430px;margin:0;color:#a3aaa8;font-size:.82rem}.position-visual,.experience-visual,.development-visual,.automation-visual{position:relative;min-height:650px}.fragment{position:absolute;padding:10px 13px;border:1px solid #344147;color:#78929a;font:500 .48rem/1 var(--mono);letter-spacing:.08em;opacity:.55;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform 1.2s var(--ease),opacity .7s}.f1{--x:30px;--y:100px;--r:-6deg}.f2{--x:410px;--y:40px;--r:5deg}.f3{--x:80px;--y:480px;--r:4deg}.f4{--x:500px;--y:410px;--r:-7deg}.position-result{position:absolute;left:12%;right:5%;top:50%;padding:38px 34px;border-top:1px solid #43565c;border-bottom:1px solid #43565c;opacity:.2;transform:translateY(-38%) scale(.96);transition:opacity 1s .35s,transform 1.2s .35s var(--ease)}.position-result small{color:#7caec0;font:500 .46rem/1 var(--mono)}.position-result strong{display:block;margin-top:30px;font:500 clamp(3rem,5.3vw,7rem)/.76 var(--sans);letter-spacing:-.07em}.position-result i{display:block;width:0;height:1px;margin-top:32px;background:var(--cyan);transition:width 1.1s .8s var(--ease)}.position-scene.live .fragment{opacity:0;transform:translate(270px,280px) rotate(0)}.position-scene.live .position-result{opacity:1;transform:translateY(-50%) scale(1)}.position-scene.live .position-result i{width:100%}
.experience-visual{perspective:1300px}.screen{position:absolute;padding:22px;background:#e6e9e5;color:#080a0b;box-shadow:0 50px 100px rgba(0,0,0,.38);transform-style:preserve-3d;opacity:.45;transition:transform 1.4s var(--ease),opacity .8s}.screen-nav{height:22px;border-bottom:1px solid #a9adaa;margin-bottom:17%}.screen strong{font-size:clamp(2.1rem,4.2vw,5.5rem);font-weight:600;line-height:.72;letter-spacing:-.075em}.screen i{position:absolute;bottom:22px;height:7px;background:#9fa5a1}.screen i:nth-last-child(1){left:22px;width:18%}.screen i:nth-last-child(2){left:23%;width:27%}.screen i:nth-last-child(3){right:22px;width:34%}.desktop-screen{left:6%;top:12%;width:78%;height:70%;transform:translateZ(-80px) rotateY(13deg) translateX(13%)}.tablet-screen{right:2%;top:24%;width:45%;height:59%;transform:translateZ(20px) rotateY(13deg) translateX(28%)}.phone-screen{right:0;bottom:2%;width:24%;height:56%;transform:translateZ(110px) rotateY(13deg) translateX(65%)}.experience-scene.live .screen{opacity:1}.experience-scene.live .desktop-screen{transform:translateZ(-80px) rotateY(7deg)}.experience-scene.live .tablet-screen{transform:translateZ(20px) rotateY(7deg)}.experience-scene.live .phone-screen{transform:translateZ(110px) rotateY(7deg)}
.development-visual{min-height:620px;border-top:1px solid #344149;border-bottom:1px solid #344149;background:linear-gradient(120deg,rgba(155,231,255,.035),transparent 50%);overflow:hidden}.code-head{height:60px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2e3b40;color:#75a9b8;font:500 .46rem/1 var(--mono)}.development-visual ol{list-style:none;margin:0;padding:38px 28px}.development-visual li{min-height:88px;display:grid;grid-template-columns:45px 1fr auto;align-items:center;border-bottom:1px solid #283238;opacity:.28;transform:translateX(-15px);transition:opacity .45s,transform .55s var(--ease)}.development-visual li:last-child{border:0}.development-visual li i{color:#62747a;font:400 .52rem/1 var(--mono)}.development-visual code{font:400 clamp(.75rem,1vw,.95rem)/1 var(--mono);color:#a9b7b9}.development-visual code b{color:#d3f6ff;font-weight:400}.development-visual li>span{font:500 .45rem/1 var(--mono);color:var(--acid)}.development-scene.live li{opacity:1;transform:none}.development-scene.live li:nth-child(1){transition-delay:.15s}.development-scene.live li:nth-child(2){transition-delay:.28s}.development-scene.live li:nth-child(3){transition-delay:.41s}.development-scene.live li:nth-child(4){transition-delay:.54s}.development-scene.live li:nth-child(5){transition-delay:.67s}.code-scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--cyan);box-shadow:0 0 16px var(--cyan);opacity:0}.development-scene.live .code-scan{animation:codeScan 2.4s .2s var(--ease) both}
.automation-visual svg{position:absolute;inset:7% 0;width:100%;height:86%;overflow:visible}.flow-track,.flow-live{fill:none;stroke:#2f3b40;stroke-width:1}.flow-live{stroke:var(--cyan);stroke-dasharray:1250;stroke-dashoffset:1250;filter:drop-shadow(0 0 7px rgba(155,231,255,.6))}.automation-scene.live .flow-live{animation:flowDraw 2.3s .25s var(--ease) forwards}.flow-node{position:absolute;width:108px;height:108px;padding:16px;border-radius:50%;border:1px solid #3b4a50;background:#060809;display:flex;flex-direction:column;justify-content:space-between;opacity:.3;transition:opacity .5s,box-shadow .5s}.flow-node small{font:400 .44rem/1 var(--mono);color:#68818a}.flow-node b{font:500 .46rem/1 var(--mono);letter-spacing:.06em}.n1{left:2%;top:43%}.n2{left:31%;top:13%}.n3{left:60%;top:62%}.n4{right:1%;top:22%}.automation-scene.live .flow-node{opacity:1;box-shadow:0 0 70px rgba(100,202,233,.08)}.data-pulse{position:absolute;left:5%;top:49%;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan);opacity:0}.automation-scene.live .data-pulse{animation:pulsePath 3.2s .45s var(--ease) infinite}
.deliverables{padding:clamp(100px,10vw,150px) var(--gutter);background:#e2e6e2;color:var(--ink)}.deliverable-head{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end;margin:clamp(80px,10vw,150px) 0}.deliverable-head h2{margin:0;font:500 clamp(4.2rem,7.2vw,9rem)/.86 var(--sans);letter-spacing:-.07em;text-transform:uppercase}.deliverable-head p{max-width:360px;margin:0;color:#4b504d}.deliverable-list{border-top:1px solid var(--dark-line)}.deliverable-list article{min-height:145px;display:grid;grid-template-columns:8% 1fr 34%;gap:30px;align-items:center;border-bottom:1px solid var(--dark-line);transition:padding .4s var(--ease)}.deliverable-list article:hover{padding-inline:18px}.deliverable-list article>span{font:400 .5rem/1 var(--mono);color:#717975}.deliverable-list h3{margin:0;font:500 clamp(2rem,3.7vw,4.5rem)/.95 var(--sans);letter-spacing:-.055em}.deliverable-list p{margin:0;color:#525854;font-size:.76rem}
.process{padding:clamp(100px,10vw,150px) var(--gutter);background:#07090a}.process-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:10vw;margin-top:clamp(85px,10vw,150px)}.process-statement{position:sticky;top:110px;align-self:start}.process-statement p{max-width:380px;margin:0 0 55px;color:#9ea7a5;font-size:.8rem}.process-statement h2{margin:0;font:500 clamp(4rem,6.5vw,8rem)/.8 var(--sans);letter-spacing:-.07em}.process-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.process-list li{min-height:230px;padding:35px 0;display:grid;grid-template-columns:65px 1fr;align-items:start;border-bottom:1px solid var(--line)}.process-list li>span{font:400 .5rem/1 var(--mono);color:#6d797b}.process-list small{display:block;margin-bottom:75px;color:#7ca9b5;font:500 .48rem/1 var(--mono);letter-spacing:.1em}.process-list b{font:500 clamp(2.2rem,3.8vw,4.7rem)/.94 var(--sans);letter-spacing:-.055em}
.contact{min-height:100svh;padding:clamp(95px,9vw,135px) var(--gutter) 30px;background:#cfe1e0;color:var(--ink);display:flex;flex-direction:column}.contact-main{margin:auto 0;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end}.contact-main p{max-width:420px;margin:0 0 48px;color:#45504e;font-size:.8rem}.contact h2{margin:0;font:600 clamp(4.8rem,9.4vw,11.5rem)/.76 var(--sans);letter-spacing:-.085em;text-transform:uppercase}.contact-main>a{width:clamp(160px,16vw,225px);aspect-ratio:1;padding:24px;border-radius:50%;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;font-size:.72rem;transition:transform .5s var(--ease)}.contact-main>a:hover,.contact-main>a:focus-visible{transform:rotate(-6deg)}.contact-main>a svg{align-self:end;width:28px}.contact-foot{display:flex;gap:34px;padding-top:20px;border-top:1px solid var(--dark-line);font-size:.58rem}.contact-foot span{margin-left:auto}body[data-lang=ar] .contact-foot span{margin-left:0;margin-right:auto}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes finalDrift{to{transform:translateY(-51%) scale(1.025);filter:brightness(.98)}}@keyframes codeScan{0%{top:0;opacity:0}10%{opacity:.7}90%{opacity:.7}100%{top:100%;opacity:0}}@keyframes flowDraw{to{stroke-dashoffset:0}}@keyframes pulsePath{0%{left:5%;top:49%;opacity:0}8%{opacity:1}32%{left:34%;top:18%}62%{left:63%;top:68%}92%{opacity:1}100%{left:91%;top:30%;opacity:0}}
@media(max-width:1050px){.signal-final{right:-15%;width:110vw}.discipline{grid-template-columns:1fr;gap:60px;padding-block:100px}.discipline-copy{display:grid;grid-template-columns:1fr 1.1fr;column-gap:55px}.discipline-copy small{grid-column:1/-1;margin-bottom:50px}.discipline-copy h3{margin:0}.discipline-copy p{align-self:end}.position-visual,.experience-visual,.development-visual,.automation-visual{min-height:600px}.process-layout{grid-template-columns:1fr}.process-statement{position:static}.service-grid{grid-template-columns:1fr}}
@media(max-width:900px){.header{height:66px;grid-template-columns:1fr auto}.nav,.talk{display:none}.menu{width:44px;height:44px;border:0;background:transparent;display:grid;place-content:center;gap:7px;cursor:pointer}.menu i{display:block;width:24px;height:1px;background:currentColor;transition:.3s}.menu[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}.menu[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-nav{position:absolute;top:100%;left:0;right:0;padding:30px var(--gutter);background:#030405;border-top:1px solid var(--line);display:grid;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s}.mobile-nav.open{opacity:1;visibility:visible;transform:none}.mobile-nav a{display:grid;grid-template-columns:45px 1fr;align-items:center;min-height:68px;border-bottom:1px solid var(--line);font-size:2rem;font-weight:500}.mobile-nav a>span:first-child{font-size:.5rem;color:#777}.thesis-copy{margin-left:25%}.deliverable-head{grid-template-columns:1fr}.contact-main{grid-template-columns:1fr}.contact-main>a{justify-self:end}}
@media(max-width:600px){.logo span{display:none}.hero{min-height:680px}.intro-hud{top:18px;left:18px;right:18px}.intro-hud span:first-child,.intro-hud span:last-child{display:none}.intro-hud span:nth-child(2){margin-left:auto}.skip-intro{right:18px;bottom:17px}.signal-final{right:-44%;top:43%;width:172vw}.signal-layer{left:24%;width:84vw;height:47vh;padding:12px}.seq-build .layer-message{transform:translate(-18%,-50%) translateZ(-180px) rotateY(-9deg) scale(.86)}.seq-build .layer-interface{transform:translate(-15%,-50%) translateZ(-70px) rotateY(-7deg) scale(.9)}.seq-build .layer-code{transform:translate(-12%,-50%) translateZ(40px) rotateY(-5deg) scale(.94)}.seq-build .layer-flow{transform:translate(-9%,-50%) translateZ(150px) rotateY(-3deg)}.focus-reticle{left:54%;width:88vw}.hero-kicker{left:18px;top:12%;font-size:.46rem}.hero h1{left:18px;right:18px;top:43%;font-size:17vw;line-height:.78}.hero h1>span:nth-child(2),.hero h1>span:nth-child(3){text-align:left}.hero h1>span:nth-child(3){font-size:.65em}body[data-lang=ar] .hero h1{font-size:15vw;line-height:1.08}body[data-lang=ar] .hero h1>span:nth-child(2),body[data-lang=ar] .hero h1>span:nth-child(3){text-align:right}.hero-note{left:18px;right:18px;bottom:8%;max-width:300px}.hero-note p{font-size:.68rem}.hero-foot{display:none}.thesis{min-height:100svh}.thesis h2{font-size:3.35rem}.thesis-copy{grid-template-columns:1fr;margin-left:10%;gap:22px}.thesis-line{grid-template-columns:auto 1fr auto;margin-top:55px}.thesis-line i:nth-of-type(2),.thesis-line span:last-child{display:none}.discipline-intro{min-height:80svh}.discipline-intro h2{font-size:4.5rem}.discipline{display:block;padding-block:80px}.discipline-copy{display:block}.discipline-copy small{margin-bottom:58px}.discipline-copy h3{font-size:3rem;margin-bottom:25px}.discipline-copy p{margin-bottom:55px}.position-visual,.experience-visual,.development-visual,.automation-visual{min-height:460px;margin-inline:calc(var(--gutter)*-1)}.fragment{font-size:.38rem}.f1{--x:10px;--y:80px}.f2{--x:210px;--y:35px}.f3{--x:25px;--y:350px}.f4{--x:230px;--y:330px}.position-result{left:18px;right:18px;padding:28px 18px}.position-result strong{font-size:3rem}.screen{padding:14px}.screen-nav{height:16px}.desktop-screen{left:2%;width:83%}.tablet-screen{right:1%;width:49%}.phone-screen{right:2%;width:29%}.development-visual{padding-inline:8px}.development-visual ol{padding:24px 12px}.development-visual li{grid-template-columns:32px 1fr auto;min-height:72px}.development-visual code{font-size:.62rem}.flow-node{width:78px;height:78px;padding:11px}.flow-node b{font-size:.35rem}.n1{left:0}.n2{left:26%}.n3{left:53%}.n4{right:0}.deliverable-head{margin:70px 0}.deliverable-head h2{font-size:3.7rem}.deliverable-list article{min-height:180px;padding:30px 0;grid-template-columns:35px 1fr;align-items:start}.deliverable-list h3{font-size:2.35rem}.deliverable-list p{grid-column:2}.process-statement h2{font-size:4rem}.process-list li{min-height:190px;grid-template-columns:40px 1fr}.process-list small{margin-bottom:55px}.process-list b{font-size:2.25rem}.contact{min-height:90svh}.contact h2{font-size:4rem}.contact-main>a{width:145px}.contact-foot{flex-wrap:wrap}.contact-foot span{width:100%;margin:14px 0 0!important}}
@media(max-height:500px) and (orientation:landscape){.hero{min-height:100svh}.hero-kicker{top:18%}.hero h1{top:48%;font-size:8vw}.hero-note{right:var(--gutter);left:auto;bottom:7%}.hero-note p{display:none}.signal-final{width:78vw;right:-5%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-grain,.focus-reticle i:nth-child(2),.signal-final,.code-scan,.flow-live,.data-pulse{animation:none!important}.signal-final{opacity:.9!important;filter:none!important;transform:translateY(-50%)!important}.signal-layer,.focus-reticle,.intro-hud,.skip-intro{display:none}.header,.hero-copy{opacity:1;transform:none;pointer-events:auto}.reveal{opacity:1;transform:none;transition:none}.position-result,.screen,.development-visual li,.flow-node{opacity:1!important;transform:none!important;transition:none!important}}
.hero-copy{position:relative;inset:auto;width:100%;height:100%}.hero h1{line-height:.84}body[data-lang=ar] .hero h1{line-height:1.12}@media(max-width:600px){.hero h1{top:42%;font-size:12vw;line-height:.86}.hero h1>span:nth-child(2){font-size:.7em}.hero h1>span:nth-child(3){font-size:.65em}body[data-lang=ar] .hero h1{font-size:13.5vw;line-height:1.12}body[data-lang=ar] .hero h1>span:nth-child(2),body[data-lang=ar] .hero h1>span:nth-child(3){font-size:.84em}}

/* SIGNAL LENS — complexity refracted into one clear digital system */
.hero{background:#010106}.hero:before{background:radial-gradient(ellipse 52% 48% at 50% 29%,rgba(63,29,145,.18),transparent 56%),radial-gradient(ellipse 60% 45% at 50% 29%,rgba(39,193,255,.07),transparent 72%),linear-gradient(#010106,#030405)}
.lens-stage{z-index:2;overflow:hidden}.lens-filter{position:absolute}.lens-stage:before{content:"";position:absolute;left:50%;top:30%;width:min(76vw,1050px);height:min(35vw,490px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(82,42,255,.105),rgba(36,184,255,.035) 35%,transparent 70%);filter:blur(24px);opacity:0;transition:opacity 1.5s var(--ease)}.seq-build .lens-stage:before{opacity:1}
.signal-orb{position:absolute;z-index:4;left:50%;top:29.5%;width:clamp(230px,24vw,390px);aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.12);filter:blur(22px) saturate(.4);will-change:transform,filter,opacity;transition:opacity 1.1s,transform 1.8s var(--ease),filter 1.6s var(--ease)}
.signal-canvas{position:absolute;z-index:7;inset:-18%;width:136%;height:136%;opacity:0;transform:scale(.84);filter:drop-shadow(0 24px 34px rgba(41,16,124,.38)) drop-shadow(0 0 22px rgba(73,175,255,.16));transition:opacity .9s,transform 1.5s var(--ease)}.webgl-ready .signal-canvas{opacity:1;transform:scale(1)}.webgl-ready .orb-shell,.webgl-ready .orb-spectrum,.webgl-ready .orb-core,.webgl-ready .orb-glint{opacity:0}.webgl-ready .orb-brand{z-index:8}.webgl-ready .orb-shadow{z-index:6;left:3%;right:3%;bottom:-14%;height:26%;opacity:.76}
.lens-horizon{position:absolute;z-index:1;left:50%;top:29.5%;width:min(74vw,1060px);height:min(22vw,320px);transform:translate(-50%,-18%) scaleX(.62);border-top:1px solid rgba(135,222,255,.72);border-radius:50%;opacity:0;filter:drop-shadow(0 -4px 11px rgba(73,139,255,.45));transition:opacity 1.2s,transform 1.8s var(--ease)}.lens-horizon:before{content:"";position:absolute;left:9%;right:9%;top:-32px;height:76px;border-radius:50%;background:radial-gradient(ellipse,rgba(70,115,255,.2),rgba(91,36,255,.08) 40%,transparent 72%);filter:blur(18px)}.lens-horizon i{position:absolute;left:24%;right:24%;top:-1px;height:1px;background:#d8fbff;box-shadow:0 0 12px #76dfff,0 0 32px rgba(86,67,255,.8)}
.lens-reflection{position:absolute;z-index:2;left:50%;top:calc(29.5% + clamp(105px,11.5vw,180px));width:clamp(190px,22vw,350px);height:28px;transform:translateX(-50%) scaleX(.5);border-radius:50%;background:radial-gradient(ellipse,rgba(162,227,255,.32),rgba(82,44,255,.14) 43%,transparent 72%);filter:blur(12px);opacity:0;transition:opacity 1.1s,transform 1.7s var(--ease)}
.signal-orb>div{position:absolute;border-radius:50%;pointer-events:none}.orb-shell{inset:0;z-index:1;background:radial-gradient(circle at 31% 21%,rgba(255,255,255,.93) 0 1.1%,rgba(184,246,255,.46) 1.8%,transparent 8%),radial-gradient(circle at 27% 27%,rgba(88,235,255,.32),transparent 24%),radial-gradient(circle at 70% 74%,rgba(149,36,255,.38),transparent 31%),radial-gradient(circle at 47% 48%,#090823 0,#050514 42%,#010107 73%);border:1px solid rgba(217,247,255,.72);box-shadow:inset 20px 15px 40px rgba(103,235,255,.22),inset -28px -31px 58px rgba(91,21,255,.38),inset 0 0 10px rgba(255,255,255,.16),0 0 1px #fff,0 0 44px rgba(60,104,255,.22),0 38px 90px rgba(44,12,130,.3)}
.orb-spectrum{z-index:2;inset:3.5%;overflow:hidden;filter:url(#liquidLens) blur(4px) saturate(1.45);mix-blend-mode:screen;opacity:.84}.spectrum-a{background:conic-gradient(from 218deg at 52% 52%,transparent 0 8%,rgba(21,223,255,.85) 13%,rgba(223,252,255,.94) 16%,rgba(39,94,255,.78) 21%,transparent 29% 46%,rgba(132,26,255,.8) 54%,rgba(249,54,255,.68) 60%,transparent 68%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 34%,#000 45% 60%,transparent 72%);mask:radial-gradient(circle at 50% 50%,transparent 0 34%,#000 45% 60%,transparent 72%)}
.spectrum-b{inset:8%;background:radial-gradient(ellipse 63% 22% at 45% 24%,rgba(255,255,255,.88),rgba(44,217,255,.72) 20%,rgba(67,47,255,.62) 52%,transparent 74%),radial-gradient(ellipse 65% 18% at 60% 79%,rgba(255,51,247,.85),rgba(64,56,255,.68) 37%,transparent 72%);transform:rotate(-17deg);filter:url(#liquidLens) blur(6px);opacity:.72}
.orb-core{z-index:3;inset:15%;background:radial-gradient(circle at 44% 42%,rgba(19,14,61,.15),rgba(2,2,13,.66) 59%,rgba(5,4,20,.25));box-shadow:inset 0 0 38px rgba(4,7,24,.85)}
.orb-brand{z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f4fbff;text-align:center;opacity:0;transform:scale(.65);filter:blur(7px);transition:opacity .8s,transform 1.25s var(--ease),filter 1s}.orb-brand b{font:700 clamp(3.7rem,6.7vw,7.6rem)/.72 var(--sans);letter-spacing:-.105em;text-indent:-.08em}.orb-brand span{margin-top:14px;font:500 .39rem/1 var(--mono);letter-spacing:.2em}
.orb-glint{z-index:5;left:20%;top:11%;width:42%;height:13%;background:radial-gradient(ellipse,rgba(255,255,255,.9),rgba(142,240,255,.34) 35%,transparent 72%);filter:blur(8px);transform:rotate(-20deg)}
.orb-shadow{z-index:6;left:11%;right:11%;bottom:-10%;height:22%;background:radial-gradient(ellipse,rgba(0,0,0,.9),transparent 68%);filter:blur(16px)}
.input-field,.output-field{position:absolute;z-index:3;inset:0;opacity:0;transition:opacity .7s}.input-field i,.output-field i{position:absolute;display:block;height:1px;transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(83,113,255,.14) 30%,rgba(117,223,255,.78));box-shadow:0 0 12px rgba(91,202,255,.22)}.input-field i{right:calc(50% + clamp(105px,11.5vw,185px));width:55vw}.input-field i:nth-child(1){top:18%;transform:rotate(7deg) scaleX(.08)}.input-field i:nth-child(2){top:25%;transform:rotate(2deg) scaleX(.08)}.input-field i:nth-child(3){top:34%;transform:rotate(-4deg) scaleX(.08)}.input-field i:nth-child(4){top:42%;transform:rotate(-9deg) scaleX(.08)}.input-field span,.output-field span{position:absolute;color:#647078;font:500 .42rem/1 var(--mono);letter-spacing:.13em}.input-field span{left:var(--gutter);top:28%}.output-field i{left:calc(50% + clamp(105px,11.5vw,185px));right:0;top:29.5%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,rgba(222,250,255,.9),rgba(102,93,255,.42) 25%,transparent);box-shadow:0 0 16px rgba(125,191,255,.35);transition:transform 1.3s .25s var(--ease)}.output-field span{right:var(--gutter);top:calc(29.5% - 20px)}
.lens-caption{position:absolute;z-index:5;left:50%;top:calc(29.5% + clamp(135px,14vw,220px));width:min(530px,72vw);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;color:#738086;font:500 .4rem/1 var(--mono);letter-spacing:.11em;opacity:0;transition:opacity .7s}.lens-caption i{width:22px;height:1px;background:#3b4850}.focus-reticle{z-index:6;left:50%;top:29.5%;width:clamp(260px,28vw,455px);aspect-ratio:1;height:auto;transform:translate(-50%,-50%) scale(1.18);border:0;opacity:0;transition:opacity .7s,transform 1.3s var(--ease)}.focus-reticle:before,.focus-reticle:after{content:"";position:absolute;inset:0;border:1px solid rgba(169,231,255,.18);border-radius:50%;clip-path:polygon(0 0,28% 0,28% 1px,72% 1px,72% 0,100% 0,100% 28%,calc(100% - 1px) 28%,calc(100% - 1px) 72%,100% 72%,100% 100%,72% 100%,72% calc(100% - 1px),28% calc(100% - 1px),28% 100%,0 100%,0 72%,1px 72%,1px 28%,0 28%)}.focus-reticle:after{inset:8%;border-color:rgba(192,239,255,.1)}.focus-reticle i{position:absolute;background:rgba(186,236,255,.52)}.focus-reticle i:first-child{left:50%;top:-12px;bottom:-12px;width:1px}.focus-reticle i:nth-child(2){top:50%;left:-12px;right:-12px;height:1px}.focus-reticle b{position:absolute;left:50%;top:50%;width:5px;height:5px;border:1px solid rgba(219,248,255,.72);border-radius:50%;transform:translate(-50%,-50%)}
.seq-gather .input-field{opacity:1}.seq-gather .input-field i{transition:transform 1.35s var(--ease)}.seq-gather .input-field i:nth-child(1){transform:rotate(7deg) scaleX(1)}.seq-gather .input-field i:nth-child(2){transform:rotate(2deg) scaleX(1)}.seq-gather .input-field i:nth-child(3){transform:rotate(-4deg) scaleX(1)}.seq-gather .input-field i:nth-child(4){transform:rotate(-9deg) scaleX(1)}.seq-gather .signal-orb{opacity:.58;transform:translate(-50%,-50%) scale(.72);filter:blur(8px) saturate(.8)}.seq-gather .lens-horizon{opacity:.2;transform:translate(-50%,-18%) scaleX(.8)}.seq-build .signal-orb{opacity:1;transform:translate(-50%,-50%) scale(1.045);filter:blur(1.5px) saturate(1.15)}.seq-build .lens-horizon{opacity:.88;transform:translate(-50%,-18%) scaleX(1)}.seq-build .lens-reflection{opacity:.72;transform:translateX(-50%) scaleX(1)}.seq-build .orb-brand{opacity:.92;transform:scale(1);filter:none}.seq-build .lens-caption{opacity:.8}.seq-focus .signal-orb{transform:translate(-50%,-50%) scale(1);filter:none}.seq-focus .orb-brand{opacity:.12;transform:scale(.82);filter:blur(1px)}.seq-focus .focus-reticle{opacity:.55;transform:translate(-50%,-50%) scale(1)}.seq-focus .input-field{opacity:.16}.seq-focus .output-field{opacity:1}.seq-focus .output-field i{transform:scaleX(1)}
.sequence-complete .lens-caption{opacity:0}.sequence-complete .hero-kicker{display:none}.sequence-complete .orb-brand{opacity:.055;transform:scale(.78);filter:none}.sequence-complete .lens-horizon{opacity:.48}
.hero-copy{position:relative;z-index:7;inset:auto;width:100%;height:100%;padding:0 var(--gutter);pointer-events:none}.sequence-complete .hero-copy{pointer-events:auto}.hero-kicker{left:50%;top:calc(29.5% + clamp(155px,15vw,235px));transform:translateX(-50%);width:max-content;text-align:center;color:#8f999e;font:500 .46rem/1.5 var(--mono);letter-spacing:.12em}.hero h1{left:var(--gutter);right:var(--gutter);top:62%;transform:translateY(-50%);text-align:center;font-size:clamp(4.2rem,7.8vw,9.7rem);line-height:.78;letter-spacing:-.077em}.hero h1>span,.hero h1>span:nth-child(2),.hero h1>span:nth-child(3){display:block;text-align:center;font-size:1em}.hero h1>span:nth-child(2){color:#f0f2f5;text-shadow:0 0 36px rgba(116,129,255,.15)}.hero-note{left:50%;right:auto;bottom:6.5%;max-width:520px;transform:translateX(-50%);display:flex;align-items:center;gap:42px;text-align:left}.hero-note p{margin:0;max-width:330px;color:#9da5a7;font-size:.69rem}.hero-note a{flex:none;gap:25px}.hero-foot{z-index:8}.sequence-complete:not(.motion-paused) .signal-orb{animation:lensFloat 7s 1s ease-in-out infinite alternate}.sequence-complete:not(.motion-paused) .spectrum-a{animation:spectrumTurn 17s linear infinite}.sequence-complete:not(.motion-paused) .spectrum-b{animation:spectrumBreathe 8s ease-in-out infinite alternate}.sequence-complete:not(.motion-paused) .output-field i{animation:beamPulse 4s ease-in-out infinite}.sequence-complete:not(.motion-paused) .focus-reticle{animation:reticleBreathe 5.5s ease-in-out infinite alternate}
@keyframes lensFloat{to{transform:translate(-50%,calc(-50% - 7px)) scale(1.012)}}@keyframes spectrumTurn{to{transform:rotate(360deg)}}@keyframes spectrumBreathe{to{transform:rotate(6deg) scale(1.08);opacity:.9}}@keyframes beamPulse{50%{opacity:.35;filter:brightness(1.5)}}@keyframes reticleBreathe{to{opacity:.25;transform:translate(-50%,-50%) scale(1.025)}}
@media(max-width:900px){.signal-orb{top:29%;width:clamp(225px,38vw,330px)}.lens-stage:before,.lens-horizon{top:29%}.lens-stage:before{width:95vw;height:50vw}.lens-horizon{width:108vw;height:32vw}.lens-reflection{top:calc(29% + clamp(102px,18vw,150px));width:40vw}.input-field i{right:calc(50% + clamp(102px,18vw,155px))}.output-field i{left:calc(50% + clamp(102px,18vw,155px));top:29%}.output-field span{top:calc(29% - 20px)}.focus-reticle{top:29%;width:clamp(255px,43vw,390px)}.lens-caption{top:calc(29% + clamp(132px,21vw,198px))}.hero-kicker{top:calc(29% + clamp(150px,23vw,212px))}.hero h1{top:63%;font-size:clamp(3.55rem,8vw,6.2rem)}.hero-note{bottom:7%}}
@media(max-width:600px){body{max-width:100%;overflow-x:clip}.hero{min-height:700px}.signal-orb{top:27%;width:min(62vw,260px)}.lens-stage:before,.lens-horizon{top:27%}.lens-stage:before{width:125vw;height:72vw}.lens-horizon{width:130vw;height:42vw}.lens-reflection{top:calc(27% + min(28vw,118px));width:56vw}.input-field i{right:calc(50% + min(28vw,118px));width:62vw}.input-field i:nth-child(1){top:18%}.input-field i:nth-child(2){top:24%}.input-field i:nth-child(3){top:32%}.input-field i:nth-child(4){top:38%}.input-field span,.output-field span{display:none}.output-field i{left:calc(50% + min(28vw,118px));top:27%}.focus-reticle{top:27%;width:min(70vw,295px)}.lens-caption{top:calc(27% + min(33vw,140px));width:88vw;gap:6px;font-size:.32rem}.lens-caption i{width:8px}.hero-kicker{left:50%;top:calc(27% + min(38vw,160px));font-size:.38rem;line-height:1.45}.hero h1{top:58%;left:16px;right:16px;font-size:13.2vw;line-height:.82}.hero h1>span:nth-child(2),.hero h1>span:nth-child(3){font-size:1em}.hero-note{left:20px;right:20px;bottom:7%;max-width:none;transform:none;display:block;text-align:center}.hero-note p{max-width:310px;margin:0 auto 18px;font-size:.65rem}.hero-note a{margin:auto;gap:28px}.hero-foot{display:none}.orb-brand b{font-size:4rem}.orb-brand span{font-size:.32rem}.process-layout>*,.process-list,.deliverable-head>*{min-width:0}.deliverable-head h2{font-size:3.25rem;overflow-wrap:anywhere}.process-statement h2{font-size:3.65rem;overflow-wrap:anywhere}body[data-lang=ar] .hero h1{font-size:13.6vw;line-height:1.08}body[data-lang=ar] .hero h1>span:nth-child(2),body[data-lang=ar] .hero h1>span:nth-child(3){font-size:1em}}
@media(max-height:560px) and (orientation:landscape){.signal-orb{top:42%;left:72%;width:35vh}.focus-reticle{top:42%;left:72%;width:42vh}.lens-stage:before{top:42%;left:72%}.lens-caption,.input-field span,.output-field span{display:none}.hero-kicker{left:var(--gutter);top:23%;transform:none;text-align:left}.hero h1{top:51%;right:44%;text-align:left;font-size:8vw}.hero h1>span,.hero h1>span:nth-child(2){text-align:left}.hero-note{left:var(--gutter);right:52%;bottom:8%;transform:none}.hero-note p{display:none}.output-field i{left:calc(72% + 18vh);top:42%}.input-field i{right:calc(28% + 18vh)}}
@media(prefers-reduced-motion:reduce){.signal-orb{opacity:1!important;transform:translate(-50%,-50%)!important;filter:none!important}.lens-horizon{opacity:.48!important;transform:translate(-50%,-18%) scaleX(1)!important}.lens-reflection{opacity:.6!important;transform:translateX(-50%) scaleX(1)!important}.orb-brand{opacity:.055!important;transform:scale(.78)!important;filter:none!important}.input-field{opacity:.12!important}.output-field{opacity:.8!important}.output-field i{transform:scaleX(1)!important}.lens-caption{opacity:0!important}.focus-reticle{display:block;opacity:.35!important;transform:translate(-50%,-50%)!important}.orb-spectrum,.signal-orb,.output-field i,.focus-reticle{animation:none!important}}
.seq-build .signal-orb{filter:blur(.3px) saturate(1.15)}.seq-focus .signal-orb,.sequence-complete .signal-orb{filter:none}

/* THE SIGNAL PRISM — cinematic hero asset */
.prism-stage{z-index:2;background:#010106}.prism-camera{position:absolute;inset:0;opacity:0;transform:scale(1.16);filter:blur(22px) brightness(.42);will-change:transform,filter,opacity;transition:opacity 1.15s,transform 2.2s var(--ease),filter 1.8s var(--ease)}.prism-camera img{position:absolute;left:0;top:1%;width:100%;height:60%;object-fit:contain;object-position:center center;display:block}.prism-caustic{position:absolute;z-index:2;left:50%;top:27%;width:min(82vw,1160px);height:min(25vw,350px);transform:translate(-50%,-50%) scale(.72);border-radius:50%;background:radial-gradient(ellipse,rgba(32,114,255,.19),rgba(75,24,170,.08) 40%,transparent 72%);filter:blur(30px);opacity:0;transition:opacity 1.4s,transform 2s var(--ease)}.prism-sweep{position:absolute;z-index:3;left:-35%;top:3%;width:32%;height:58%;opacity:0;transform:skewX(-17deg);background:linear-gradient(90deg,transparent,rgba(168,235,255,.075),transparent);filter:blur(12px);mix-blend-mode:screen}.prism-vignette{position:absolute;z-index:4;inset:0;background:linear-gradient(180deg,rgba(1,1,6,.02) 0,rgba(1,1,6,.05) 34%,rgba(1,1,6,.66) 56%,#010106 72%),radial-gradient(ellipse 84% 54% at 50% 25%,transparent 42%,rgba(1,1,6,.5) 88%)}
.seq-gather .prism-camera{opacity:.48;transform:scale(1.1);filter:blur(10px) brightness(.62)}.seq-build .prism-camera{opacity:1;transform:scale(1.035);filter:blur(1.2px) brightness(.92)}.seq-build .prism-caustic{opacity:1;transform:translate(-50%,-50%) scale(1)}.seq-focus .prism-camera{transform:scale(1);filter:none}.seq-focus .prism-sweep{opacity:1;animation:prismReveal 1.65s var(--ease) both}.sequence-complete:not(.motion-paused) .prism-camera{animation:prismCamera 11s 1s ease-in-out infinite alternate}.sequence-complete:not(.motion-paused) .prism-caustic{animation:prismGlow 7s ease-in-out infinite alternate}.sequence-complete:not(.motion-paused) .prism-sweep{animation:prismSweep 8s 2s ease-in-out infinite}.motion-paused .prism-camera,.motion-paused .prism-caustic,.motion-paused .prism-sweep{animation-play-state:paused!important}
@keyframes prismReveal{from{left:-35%}to{left:112%}}@keyframes prismCamera{to{transform:scale(1.028) translateY(-4px);filter:brightness(1.045)}}@keyframes prismGlow{to{opacity:.62;transform:translate(-50%,-50%) scale(1.08)}}@keyframes prismSweep{0%,68%{left:-35%;opacity:0}72%{opacity:.65}88%{opacity:.3}94%,100%{left:112%;opacity:0}}
@media(max-width:600px){.prism-camera img{left:-35%;top:2%;width:170%;height:52%;object-fit:contain}.prism-caustic{top:23%;width:128vw;height:54vw}.prism-vignette{background:linear-gradient(180deg,rgba(1,1,6,.01),rgba(1,1,6,.1) 32%,rgba(1,1,6,.78) 51%,#010106 65%),radial-gradient(ellipse 112% 42% at 50% 20%,transparent 35%,rgba(1,1,6,.58) 88%)}.prism-sweep{height:48%}}
@media(prefers-reduced-motion:reduce){.prism-camera{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.prism-caustic{opacity:.7!important;transform:translate(-50%,-50%)!important;animation:none!important}.prism-sweep{display:none}.prism-vignette{display:block}}

/* REAL-TIME PHYSICAL 3D HERO */
.premium3d-stage{z-index:2;background:#010106}.hero3d-canvas,.hero3d-fallback{position:absolute;inset:0;width:100%;height:100%}.hero3d-canvas{z-index:2;display:block;opacity:0;transform:scale(1.14);filter:blur(18px);will-change:transform,filter,opacity;transition:opacity 1.2s,transform 2.1s var(--ease),filter 1.7s var(--ease)}.hero3d-fallback{z-index:1;opacity:0;overflow:hidden}.hero3d-fallback img{width:100%;height:60%;object-fit:contain;object-position:center top;filter:brightness(.72)}.hero3d-ready .hero3d-fallback{display:none}.hero3d-atmosphere{position:absolute;z-index:3;left:50%;top:27%;width:min(88vw,1260px);height:min(40vw,570px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(16,116,255,.13),rgba(72,20,162,.055) 42%,transparent 72%);filter:blur(32px);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity 1.5s}.hero3d-vignette{position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(1,1,6,.03) 33%,rgba(1,1,6,.72) 58%,#010106 74%),radial-gradient(ellipse 92% 70% at 50% 27%,transparent 37%,rgba(1,1,6,.5) 86%)}
.seq-gather .hero3d-canvas{opacity:.48;transform:scale(1.08);filter:blur(8px)}.seq-gather:not(.hero3d-ready) .hero3d-fallback{opacity:.35}.seq-build .hero3d-canvas{opacity:1;transform:scale(1.025);filter:blur(.6px)}.seq-build:not(.hero3d-ready) .hero3d-fallback{opacity:.9}.seq-build .hero3d-atmosphere{opacity:1}.seq-focus .hero3d-canvas{transform:scale(1);filter:none}.sequence-complete .hero3d-canvas{opacity:1}.motion-paused .hero3d-canvas{filter:saturate(.88)}
@media(max-width:600px){.hero3d-atmosphere{top:25%;width:135vw;height:82vw}.hero3d-vignette{background:linear-gradient(180deg,transparent,rgba(1,1,6,.08) 30%,rgba(1,1,6,.84) 51%,#010106 66%),radial-gradient(ellipse 120% 52% at 50% 20%,transparent 30%,rgba(1,1,6,.58) 86%)}.hero3d-fallback img{width:170%;margin-left:-35%;height:52%}}
@media(prefers-reduced-motion:reduce){.hero3d-canvas{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero3d-atmosphere{opacity:.75!important}.hero3d-fallback{opacity:1}.hero3d-ready .hero3d-fallback{display:none}}

/* LAITH STUDIO — PRIMARY WORDMARK */
.logo{height:44px;display:flex;align-items:center}
.logo img{width:clamp(104px,8.5vw,132px);height:auto;display:block;flex:none;object-fit:contain}
@media(max-width:600px){.logo img{width:108px}}

/* LAITH STUDIO — CLARITY, WORK, SOCIAL AND CONTACT REBUILD */
:root{--arabic:"Adobe Arabic","Noto Sans Arabic",Tahoma,sans-serif;--studio-blue:#325d7d;--studio-copper:#b86b43}
body[data-lang=ar]{font-family:var(--arabic)}
body[data-lang=ar] p,body[data-lang=ar] label,body[data-lang=ar] input,body[data-lang=ar] textarea,body[data-lang=ar] button{font-family:var(--arabic)}
.social-links{display:flex;align-items:center;gap:2px}
.social-links a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#cbd2d1;transition:background .25s,color .25s}
.social-links a:hover,.social-links a:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.social-links svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.social-links .social-dot{fill:currentColor;stroke:none}
.social-links .linkedin-icon{fill:currentColor;stroke:none}
.thesis h2 em,.work-heading h2 em,.contact-copy h2 em{color:inherit;-webkit-text-stroke:0}
.mobile-social{display:none}
.hero h1{max-width:100%;font-size:clamp(3.8rem,6.4vw,8rem);line-height:.82}
.hero h1>span:nth-child(2){text-align:center;font-size:.86em}
.hero h1>span:nth-child(3){text-align:right;font-size:.72em}
.hero-note p{font-size:clamp(.78rem,.85vw,.94rem);line-height:1.58}

.work{padding:clamp(100px,9vw,150px) var(--gutter) clamp(120px,11vw,180px);background:#e2e6e2;color:var(--ink)}
.work-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end;margin:clamp(70px,8vw,120px) 0}
.work-heading h2{margin:0;font:500 clamp(4rem,7vw,8.5rem)/.84 var(--sans);letter-spacing:-.07em;text-transform:uppercase}
.work-heading h2 em{font-style:normal;font-weight:400;color:transparent;-webkit-text-stroke:1.25px var(--ink)}
.work-heading p{max-width:440px;margin:0 0 .5rem;color:#424845;font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.55}
.project-list{display:grid;gap:clamp(80px,9vw,140px)}
.project-card{display:grid;grid-template-columns:minmax(190px,.32fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start;border-top:1px solid var(--dark-line);padding-top:24px}
.project-meta{position:sticky;top:92px;display:grid;grid-template-columns:40px 1fr;gap:12px;font:500 .55rem/1.35 var(--mono);letter-spacing:.08em}
.project-meta>span{color:#6d7470}.project-meta p{margin:0}.project-meta>a{grid-column:2;width:max-content;margin-top:32px;padding-bottom:7px;border-bottom:1px solid currentColor;font-family:var(--sans);font-size:.74rem;letter-spacing:0}
.project-browser{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0c0d;border:1px solid rgba(8,10,11,.28);box-shadow:0 35px 80px rgba(13,18,20,.16)}
.browser-bar{height:42px;padding:0 15px;display:flex;align-items:center;gap:7px;background:#15191b;color:#899292;font:400 .48rem/1 var(--mono)}
.browser-bar i{width:7px;height:7px;border:1px solid #657074;border-radius:50%}.browser-bar span{margin-left:9px;opacity:.75}
.project-browser iframe{display:block;width:100%;height:calc(100% - 42px);border:0;background:#fff;pointer-events:none}
.preview-link{position:absolute;inset:auto 18px 18px auto;min-height:50px;padding:0 17px;display:flex;align-items:center;gap:28px;background:#edf0ec;color:#080a0b;border:1px solid rgba(8,10,11,.18);font-size:.7rem;font-weight:600;transition:background .25s,color .25s,transform .25s var(--ease)}
.preview-link:hover,.preview-link:focus-visible{background:#080a0b;color:#fff;transform:translateY(-2px)}
.preview-link svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.6}

.automation-demo{min-height:650px;border:1px solid #344149;background:#060809;padding:0;overflow:hidden}
.automation-head{height:58px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2e3b40;color:#7cb7c7;font:500 .48rem/1 var(--mono);letter-spacing:.08em}
.automation-demo form{padding:28px 24px 24px;border-bottom:1px solid #2e3b40}
.automation-demo label{display:block;margin-bottom:10px;color:#a8b0af;font-size:.72rem}
.automation-input{display:grid;grid-template-columns:1fr auto;gap:10px}
.automation-input input{min-width:0;height:52px;padding:0 16px;border:1px solid #36464c;background:#0c1113;color:#edf0ec;border-radius:0;font:400 16px/1.2 var(--sans);outline:none}
.automation-input input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(155,231,255,.15)}
.automation-input button{min-height:52px;padding:0 20px;border:1px solid var(--cyan);background:var(--cyan);color:#061015;font-size:.68rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.automation-input button:hover,.automation-input button:focus-visible{background:transparent;color:var(--cyan)}
.automation-input button:disabled{opacity:.55;cursor:wait}
.automation-steps{list-style:none;margin:0;padding:0 24px}
.automation-steps li{min-height:88px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;border-bottom:1px solid #263238;color:#718087;transition:color .25s,background .25s}
.automation-steps li>span,.automation-steps small,.automation-steps em{font:500 .46rem/1 var(--mono);letter-spacing:.08em}.automation-steps li b{display:block;margin-top:9px;color:#aeb8ba;font-size:.82rem;font-weight:500}.automation-steps em{font-style:normal}
.automation-steps li.running{color:var(--cyan);background:linear-gradient(90deg,rgba(155,231,255,.055),transparent)}
.automation-steps li.running b{color:#edf0ec}.automation-steps li.done{color:var(--acid)}.automation-steps li.done b{color:#d5dedc}
.automation-result{margin:24px;padding:22px;border-left:2px solid #344149;background:#0a0e10;transition:border-color .3s}
.automation-result.ready{border-color:var(--acid)}.automation-result small{color:#718087;font:500 .46rem/1 var(--mono);letter-spacing:.08em}.automation-result p{margin:16px 0 0;color:#aeb7b6;font-size:.76rem;line-height:1.55}

.contact{padding:clamp(100px,9vw,140px) var(--gutter) 0;background:#e2e6e2;color:var(--ink)}
.contact .section-top{color:var(--ink)}
.contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(60px,9vw,150px);padding:clamp(80px,9vw,140px) 0}
.contact-copy>p{max-width:410px;margin:0 0 64px;color:#4c5350;font-size:1rem}
.contact-copy h2{margin:0;font:500 clamp(3.8rem,6.2vw,7.8rem)/.86 var(--sans);letter-spacing:-.068em;text-transform:uppercase}
.contact-copy h2 em{font-style:normal;font-weight:400;color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.contact-direct{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:64px}.contact-direct a{min-height:44px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--ink);font-size:.76rem;font-weight:600}
.contact-form{align-self:end;border-top:1px solid var(--dark-line)}
.contact-form>div{padding:23px 0;border-bottom:1px solid var(--dark-line)}
.contact-form label{display:block;margin-bottom:12px;color:#5d6561;font-size:.7rem}
.contact-form input,.contact-form textarea{width:100%;padding:0;border:0;background:transparent;color:var(--ink);border-radius:0;outline:none;font:500 18px/1.5 var(--sans);resize:vertical}
.contact-form input{height:36px}.contact-form input:focus,.contact-form textarea:focus{box-shadow:inset 0 -2px 0 var(--studio-blue)}
.contact-form button{width:100%;min-height:64px;margin-top:22px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;font-size:.76rem;font-weight:600;transition:background .25s,color .25s}
.contact-form button:hover,.contact-form button:focus-visible{background:transparent;color:var(--ink)}.contact-form button svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.contact-foot{min-height:110px;margin:0;padding:25px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--dark-line);color:#545c58;font:500 .5rem/1.4 var(--mono);letter-spacing:.07em}
.contact-foot>span:nth-child(2){text-align:center}.contact-foot>div{justify-self:end;display:flex;gap:24px}.contact-foot a{min-height:44px;display:flex;align-items:center;color:var(--ink)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:1050px){.nav{display:none}.social-links{margin-left:auto}.project-card{grid-template-columns:1fr}.project-meta{position:static;grid-template-columns:40px 1fr auto}.project-meta>a{grid-column:3;grid-row:1;margin:0}.contact-layout{grid-template-columns:1fr}.contact-form{max-width:720px}.work-heading{grid-template-columns:1fr}.work-heading p{margin-left:35%}}
@media(max-width:600px){html,body{max-width:100%;overflow-x:hidden}.header{grid-template-columns:1fr auto}.header-end{gap:2px}.social-links{display:none}.language{display:none}.talk{display:none}.menu{display:flex}.mobile-nav{display:grid;max-width:100vw;overflow:hidden}.mobile-social{display:flex;gap:24px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.mobile-social a{min-height:44px;display:flex;align-items:center;border:0;font-size:.7rem}.hero h1{top:43%;font-size:8.8vw;line-height:.92}.hero h1>span:nth-child(2){text-align:left;font-size:.94em}.hero h1>span:nth-child(3){text-align:left;font-size:.84em}.hero-kicker{top:14%;font-size:.48rem}.hero-note{left:var(--gutter);right:var(--gutter);bottom:8%;max-width:100%}.hero-note p{max-width:330px;font-size:.78rem}.hero-foot>span:first-child{display:none}.hero-foot>span:last-child{font-size:.38rem}.work-heading{margin:64px 0}.work-heading h2{font-size:3.45rem}.work-heading p{margin:0;font-size:1rem}.project-list{gap:78px}.project-card{gap:20px}.project-meta{grid-template-columns:30px 1fr}.project-meta>a{grid-column:2;grid-row:auto;margin-top:10px}.project-browser{aspect-ratio:4/5}.project-browser iframe{width:200%;height:calc(200% - 84px);transform:scale(.5);transform-origin:top left}.preview-link{left:14px;right:14px;bottom:14px;justify-content:space-between}.experience-visual{overflow:hidden}.automation-demo{min-height:0;margin-inline:0}.automation-input{grid-template-columns:1fr}.automation-input button{width:100%}.automation-steps{padding:0 16px}.automation-steps li{grid-template-columns:34px 1fr auto}.automation-result{margin:16px}.contact{min-height:0}.contact-layout{padding:70px 0}.contact-copy>p{margin-bottom:48px}.contact-copy h2{font-size:3.45rem}.contact-direct{margin-top:48px;display:grid}.contact-form{margin-top:10px}.contact-foot{grid-template-columns:1fr;gap:10px;padding:24px 0}.contact-foot>span:nth-child(2){display:none}.contact-foot>div{justify-self:start}.contact-foot a{min-height:36px}}

/* Final clarity, projection and performance pass */
.thesis h2 em,.work-heading h2 em,.contact-copy h2 em{color:inherit!important;-webkit-text-stroke:0!important;text-stroke:0!important}
.project-card{cursor:pointer;user-select:none;transition:opacity .25s ease}
.project-card:hover{opacity:1}
.project-card:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}
.preview-link{inset:42px 0 0;min-height:0;padding:18px;align-items:flex-end;justify-content:flex-end;background:transparent;border:0}
.preview-link span,.preview-link svg{position:relative;z-index:1}
.preview-link span{padding:15px 17px;background:#edf0ec;border:1px solid rgba(8,10,11,.18)}
.preview-link svg{box-sizing:content-box;padding:16px;background:#edf0ec;border:1px solid rgba(8,10,11,.18)}
.preview-link:hover,.preview-link:focus-visible{background:rgba(3,4,5,.08);color:#080a0b;transform:none}
.experience-visual,.experience-visual *{user-select:none;-webkit-user-select:none}
.screen{overflow:hidden}
.screen-nav{margin-bottom:0}
.visual-canvas{position:relative;height:calc(100% - 22px);overflow:hidden;background:#f3f4f0}
.visual-web .visual-canvas{background:linear-gradient(135deg,#0c1118 0 48%,#e8e9e4 48%)}
.visual-web .visual-canvas>span{position:absolute;left:8%;top:12%;width:38%;height:56%;border-radius:50% 50% 44% 56%;background:radial-gradient(circle at 35% 30%,#d9fbff,#325d7d 42%,#0a0d12 73%);box-shadow:0 18px 50px rgba(7,13,20,.35)}
.visual-web .visual-canvas>b{position:absolute;right:8%;top:17%;width:34%;height:8px;background:#111820;box-shadow:0 22px 0 #111820,0 44px 0 #111820,0 90px 0 -2px #788086}
.visual-web .visual-canvas>i{position:absolute;right:8%;bottom:11%;width:15%;height:22%;background:#325d7d}
.visual-web .visual-canvas>i:last-child{right:25%;height:14%;background:#b86b43}
.visual-ai .visual-canvas{background:radial-gradient(circle at 50% 43%,#1f3a4e,#080c12 65%)}
.visual-ai .visual-canvas>b{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #c9eef7;box-shadow:0 0 28px rgba(121,209,235,.55),inset 0 0 22px rgba(50,93,125,.6)}
.visual-ai .visual-canvas>span{position:absolute;left:8%;right:58%;top:22%;height:1px;background:#78a9bb;box-shadow:0 42px 0 #78a9bb,0 84px 0 #78a9bb}
.visual-ai .visual-canvas>span:nth-child(2){left:62%;right:8%;top:32%}
.visual-ai .visual-canvas>span:nth-child(3){left:38%;right:38%;top:82%;background:#b86b43}
.visual-saas .visual-canvas{padding:12%;background:#eef0ec}
.visual-saas .visual-canvas>b{display:block;width:38%;height:7%;margin-bottom:18%;background:#111820}
.visual-saas .visual-canvas>span{display:block;height:14%;margin:7% 0;background:linear-gradient(90deg,#325d7d 0 28%,#d4d8d3 28%)}
.visual-saas .visual-canvas>span:nth-of-type(2){background:linear-gradient(90deg,#b86b43 0 56%,#d4d8d3 56%)}
.visual-saas .visual-canvas>span:nth-of-type(3){background:linear-gradient(90deg,#171c24 0 76%,#d4d8d3 76%)}
.hero h1{font-size:clamp(3.8rem,6.35vw,8.2rem);line-height:.84;max-width:100%;overflow:hidden}
@media(max-width:900px){.hero h1{font-size:clamp(3.2rem,8vw,5.2rem)}.hero3d-atmosphere{top:24%}}
@media(max-width:600px){.hero h1{font-size:9.2vw;line-height:.96}.hero h1>span:nth-child(2){font-size:.9em}.hero h1>span:nth-child(3){font-size:.78em}.preview-link{inset:42px 0 0;padding:14px}.preview-link span{padding:13px 14px}.preview-link svg{padding:14px}.visual-canvas{height:calc(100% - 16px)}}

/* Unified project action and detailed interface concepts. */
.preview-link{gap:0;align-items:flex-end;padding:22px;color:#fff}
.preview-link span{height:48px;display:flex;align-items:center;padding:0 0 0 22px;background:#10151b;color:#fff;border:0;border-radius:28px 0 0 28px;font-size:13px;letter-spacing:0;font-weight:500}
.preview-link svg{width:17px;height:18px;box-sizing:content-box;padding:15px 20px 15px 15px;background:#10151b;color:#fff;border:0;border-radius:0 28px 28px 0}
.preview-link:hover{background:transparent}.preview-link:hover span,.preview-link:hover svg{background:#253d4d}
.preview-link:focus-visible{outline-offset:-4px;border-radius:4px}
.product-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0;direction:ltr;user-select:none;-webkit-user-select:none;font-family:var(--sans);letter-spacing:0}
.product-preview{border:1px solid #2c3239;border-radius:12px;overflow:hidden;min-width:0;background:#101419;box-shadow:0 20px 45px #0003}
.editorial-preview{grid-column:1/-1}
.product-chrome{display:flex;justify-content:space-between;padding:14px 18px;color:#9aabae;background:#11161b;border-bottom:1px solid #ffffff10;font:500 9px/1.4 var(--mono);letter-spacing:.07em}
.editorial-body{padding:24px 30px 18px;background:#e5e0d7;color:#292e29;position:relative;min-height:300px;overflow:hidden}
.editorial-nav{position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:.1em;display:flex;justify-content:space-between}.editorial-nav span{font-size:9px;font-weight:400;letter-spacing:0}
.editorial-title{position:relative;z-index:2;padding:40px 0 55px;font:400 clamp(34px,3.7vw,60px)/1.05 Georgia,serif;letter-spacing:-.04em}
.architectural-scene{position:absolute;right:0;top:60px;bottom:40px;width:46%;background:linear-gradient(125deg,#d7c9b5,#b8a68c);overflow:hidden}
.arch-wall{position:absolute;inset:0 22% 0 0;background:linear-gradient(95deg,#dfd5c3,#c6b89f);clip-path:polygon(0 0,100% 0,100% 100%,37% 100%)}
.arch-door{position:absolute;left:37%;top:15%;width:39%;height:90%;border-radius:100px 100px 0 0;background:linear-gradient(90deg,#201e19,#484335);box-shadow:9px 0 0 #b3a58e}
.arch-step{position:absolute;left:23%;right:0;bottom:0;height:16%;background:#cabba2;box-shadow:0 -8px 0 #dbceb7;transform:skewY(-6deg)}
.editorial-caption{position:relative;z-index:2;display:flex;justify-content:space-between;font-size:9px;gap:14px}
.workflow-body,.dashboard-main{padding:22px 18px;color:#e6e9e7}
.product-heading{font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;letter-spacing:-.02em}
.product-subline{font-size:10px;color:#849197;margin:8px 0 24px;line-height:1.5}
.status-chip{font-size:9px;color:#afc8b9;border:1px solid #344c40;background:#192821;padding:4px 7px;border-radius:20px;font-weight:400}
.workflow-node{display:flex;align-items:center;gap:10px;padding:12px 10px;border:1px solid #303a41;border-radius:7px;background:#171e24;font-size:10px}
.workflow-node small{display:block;margin-top:4px;color:#8f9aa0;font-size:9px;line-height:1.4}.node-symbol{width:26px;height:26px;border:1px solid #49616e;background:#23333f;display:grid;place-items:center;border-radius:6px;font-size:15px;color:#c8dce5}.node-check{margin-left:auto;color:#aac8b3}.workflow-connector{height:17px;width:1px;background:#40535e;margin-left:24px}.workflow-note{font-size:9px;color:#839298;margin-top:18px}
.dashboard-body{display:flex;background:#f0f1ee;color:#1b2327;min-height:318px}.dashboard-sidebar{width:58px;flex:none;border-right:1px solid #dadfda;padding:21px 7px;font-size:21px;text-align:center;color:#325d7d}.dashboard-sidebar span{display:block;font-size:7px;color:#727d7b;margin-top:24px}.dashboard-main{flex:1;min-width:0;padding:22px 14px;color:#1b2327}.dashboard-avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#d7dfdc;font-size:8px}.dashboard-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dashboard-metrics>div{border:1px solid #d7ded8;padding:10px 8px;background:#fafbf8;border-radius:6px}.dashboard-metrics small{display:block;font-size:8px;color:#72807b}.dashboard-metrics b{display:block;font-size:26px;font-weight:500;margin-top:6px}.dashboard-metrics b span{font-size:8px;color:#5a7968;margin-left:4px}.chart-heading{display:flex;justify-content:space-between;font-size:9px;margin:20px 0 10px}.chart-heading span{font-size:7px;color:#82908a}.dashboard-chart{height:76px;display:flex;align-items:flex-end;gap:9%;border-bottom:1px solid #d0d7d1;background:repeating-linear-gradient(to top,transparent 0 24px,#dde2dc 25px 26px)}.dashboard-chart i{flex:1;height:var(--bar);background:#6c8991;border-radius:3px 3px 0 0}.dashboard-chart i:last-child{background:#325d7d}.dashboard-row{display:flex;justify-content:space-between;border-bottom:1px solid #dce1db;padding:11px 0;font-size:8px}.dashboard-row span:last-child{color:#6c8375}
@media(max-width:600px){.product-gallery{grid-template-columns:1fr;gap:16px}.editorial-preview{grid-column:auto}.editorial-body{padding:20px;min-height:270px}.editorial-title{font-size:40px}.editorial-nav span{font-size:7px}.editorial-caption{font-size:7px}.workflow-body{padding:24px}.dashboard-body{min-height:320px}.dashboard-sidebar{width:70px}.dashboard-main{padding:24px}.preview-link{padding:14px}.preview-link span{font-size:12px;padding-left:18px}}