:root{
  --navy:#03182d;
  --navy-2:#062d50;
  --blue:#07579a;
  --cyan:#26d7e8;
  --cyan-2:#8bf4ff;
  --white:#f7fbff;
  --ink:#0b1d2e;
  --muted:#718297;
  --panel:#eaf6fb;
  --line:rgba(8,60,104,.14);
  --shadow:0 26px 70px rgba(0,31,62,.18);
  --radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;color:var(--ink);background:var(--white);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1240px,calc(100% - 40px));margin:auto}
.section{padding:110px 0;position:relative}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:800;display:flex;gap:10px;align-items:center}
.eyebrow:before{content:"";width:34px;height:2px;background:var(--cyan);border-radius:99px}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.045em;color:var(--navy);margin-top:18px}
.section-copy{margin-top:20px;max-width:620px;color:var(--muted);font-size:17px;line-height:1.8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:15px 24px;font-weight:800;transition:.3s ease;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#5ff0ff);color:var(--navy);box-shadow:0 16px 35px rgba(38,215,232,.25)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(38,215,232,.34)}
.btn-outline{border-color:rgba(255,255,255,.34);color:white;background:rgba(255,255,255,.05);backdrop-filter:blur(12px)}
.btn-outline:hover{background:white;color:var(--navy)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1),filter .85s ease}
.reveal.show{opacity:1;transform:none}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:1000;padding:18px 0;transition:.35s ease}
.nav.scrolled{background:rgba(3,24,45,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:44px;filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:30px;list-style:none;color:rgba(255,255,255,.72);font-size:14px;font-weight:700}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--cyan);transition:.25s}
.nav-links a:hover{color:white}.nav-links a:hover:after{right:0}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang{border:1px solid rgba(255,255,255,.22);color:white;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800}
.menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;color:white;cursor:pointer}
.mobile-menu{position:fixed;inset:0;z-index:999;background:rgba(3,24,45,.98);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:24px;text-align:center;color:white;font-size:30px;font-family:'Space Grotesk',sans-serif}
.mobile-close{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:white;font-size:24px}

/* HERO */
.hero{min-height:100svh;background:var(--navy);position:relative;display:flex;align-items:center;overflow:hidden;color:white}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(38,215,232,.24),transparent 28%),radial-gradient(circle at 14% 86%,rgba(7,87,154,.4),transparent 34%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 95%);animation:gridFlow 18s linear infinite}
@keyframes gridFlow{to{background-position:70px 70px}}
.hero-inner{position:relative;z-index:2;padding:150px 0 80px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-2);font-weight:800}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(55px,6.3vw,85px);line-height:1.3;letter-spacing:-.06em;margin:28px 0 26px}
.hero h1 span{display:block}.hero h1 .accent{color:var(--cyan)}
.hero p{max-width:580px;color:rgba(255,255,255,.66);font-size:18px;line-height:1.8}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-visual{height:650px;position:relative}
.hero-card-main{position:absolute;right:0;top:20px;width:82%;height:78%;border-radius:38px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.42);transform:rotate(2deg)}
.hero-card-main img{width:100%;height:100%;object-fit:cover;animation:heroZoom 12s ease-in-out infinite alternate}
@keyframes heroZoom{to{transform:scale(1.08)}}
.hero-card-main:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,24,45,.6),transparent 55%)}
.hero-card-small{position:absolute;left:0;bottom:35px;width:44%;height:42%;border-radius:28px;overflow:hidden;border:6px solid var(--navy);box-shadow:var(--shadow);transform:rotate(-4deg);animation:floatCard 6s ease-in-out infinite}
.hero-card-small img{width:100%;height:100%;object-fit:cover}
@keyframes floatCard{50%{transform:translateY(-16px) rotate(-2deg)}}
.hero-badge{position:absolute;left:7%;top:16%;background:rgba(3,24,45,.82);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(18px);padding:18px 22px;border-radius:20px;box-shadow:var(--shadow);animation:floatBadge 5s ease-in-out infinite}
@keyframes floatBadge{50%{transform:translateY(12px)}}
.hero-badge strong{display:block;font-family:'Space Grotesk';font-size:42px;color:var(--cyan)}
.hero-badge span{font-size:12px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.14em}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:12px}
.scroll-cue:before{content:"";width:46px;height:1px;background:var(--cyan);animation:pulseLine 1.8s ease-in-out infinite}
@keyframes pulseLine{50%{width:80px}}

/* STATS */
.stats{margin-top:-44px;position:relative;z-index:4}
.stats-wrap{background:white;border-radius:30px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(5,1fr);padding:30px}
.stat{text-align:center;padding:18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}.stat strong{display:block;font-family:'Space Grotesk';font-size:clamp(34px,4vw,58px);color:var(--blue)}
.stat span{color:var(--muted);font-size:13px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.about-collage{display:grid;grid-template-columns:1fr .8fr;grid-template-rows:230px 230px;gap:14px;position:relative}
.about-collage figure{overflow:hidden;border-radius:24px;position:relative}.about-collage figure:first-child{grid-row:1/3}.about-collage img{width:100%;height:100%;object-fit:cover;transition:.7s}.about-collage figure:hover img{transform:scale(1.08)}
/*.about-collage:after{content:"12+ YEARS";position:absolute;right:-24px;bottom:-22px;background:var(--cyan);color:var(--navy);font-family:'Space Grotesk';font-size:24px;font-weight:800;padding:24px;border-radius:22px;box-shadow:var(--shadow)}*/

/* SERVICES */
.services{background:var(--navy);color:white;overflow:hidden}
.services .section-title{color:white}.services .section-copy{color:rgba(255,255,255,.58)}
.services-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:52px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{position:relative;min-height:420px;border-radius:26px;overflow:hidden;cursor:pointer;background:var(--navy-2);isolation:isolate}
.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);transition:.7s ease;z-index:-2}
.service-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,24,45,.96),rgba(3,24,45,.08));z-index:-1}
.service-card:hover img{transform:scale(1.1);filter:brightness(.7)}
.service-num{position:absolute;top:20px;right:20px;font-family:'Space Grotesk';font-size:14px;color:var(--cyan)}
.service-content{position:absolute;left:24px;right:24px;bottom:24px}
.service-content h3{font-family:'Space Grotesk';font-size:24px;line-height:1.15;margin-bottom:16px}
.service-content p{font-size:14px;color:rgba(255,255,255,.58);line-height:1.7;max-height:0;opacity:0;overflow:hidden;transition:.4s ease}
.service-card:hover .service-content p{max-height:120px;opacity:1;margin-bottom:16px}
.service-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--navy);font-size:22px;transition:.35s}.service-card:hover .service-arrow{transform:translateX(8px) rotate(-12deg)}

/* PROJECT SLIDER */
.projects-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:48px}
.slider-controls{display:flex;gap:10px}.slider-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:white;color:var(--navy);cursor:pointer;transition:.25s;font-size:20px}.slider-btn:hover{background:var(--navy);color:white;transform:translateY(-2px)}
.project-viewport{overflow:hidden}.project-track{display:flex;gap:18px;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.project-card{flex:0 0 calc((100% - 36px)/3);border-radius:26px;overflow:hidden;background:white;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,31,62,.08)}
.project-media{height:300px;overflow:hidden;position:relative}.project-media img{width:100%;height:100%;object-fit:cover;transition:.7s}.project-card:hover img{transform:scale(1.06)}
.project-chip{position:absolute;top:16px;left:16px;background:rgba(3,24,45,.84);color:white;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:800;backdrop-filter:blur(10px)}
.project-body{padding:24px}.project-body h3{font-family:'Space Grotesk';font-size:22px;margin-bottom:10px}.project-body p{color:var(--muted);font-size:14px;line-height:1.7}.project-link{display:inline-flex;margin-top:18px;font-weight:800;color:var(--blue);gap:8px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:26px}.dot{width:8px;height:8px;border-radius:99px;background:#cbd8e3;border:0;cursor:pointer;transition:.25s}.dot.active{width:28px;background:var(--cyan)}

/* WORK */
.work{background:linear-gradient(180deg,#edf9fc,#dff4f8)}
.work-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:260px 260px;gap:16px;margin-top:52px}
.work-item{border-radius:26px;overflow:hidden;position:relative;min-height:240px}.work-item:first-child{grid-row:1/3}.work-item img{width:100%;height:100%;object-fit:cover;transition:.7s}.work-item:hover img{transform:scale(1.07)}
.work-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,24,45,.85),transparent 62%)}
.work-label{position:absolute;z-index:2;left:22px;bottom:20px;color:white;font-family:'Space Grotesk';font-size:22px}

/* CLIENTS */
.clients-full{width:100%;overflow:hidden}
.clients-slider{position:relative;margin-top:42px;width:100%;padding-top:78px;overflow:hidden}
.clients-viewport{overflow:hidden;padding:12px 0 18px;cursor:grab;touch-action:pan-y;user-select:none}
.clients-viewport.dragging{cursor:grabbing}
.clients-track{display:flex;gap:16px;min-width:max-content;padding-inline:max(18px,calc((100vw - 1240px)/2));will-change:transform;transition:none}
.client{flex:0 0 190px;width:190px;height:110px;border:1px solid var(--line);background:white;border-radius:20px;display:grid;place-items:center;padding:22px;box-shadow:0 16px 34px rgba(0,31,62,.06)}
.client img{max-height:55px;max-width:130px;object-fit:contain;filter:none;opacity:1;transition:.3s;pointer-events:none}
.client:hover img{transform:scale(1.06)}

/* Slider scripts calculate their translateX positions from a left-to-right track.
   Preserve that geometry in Arabic while keeping the surrounding page RTL. */
html[dir="rtl"] .silart-video-viewport,
html[dir="rtl"] .silart-video-track,
html[dir="rtl"] .clients-viewport,
html[dir="rtl"] .clients-track{
  direction:ltr;
}
.client-arrow{position:absolute;top:0;z-index:8;width:56px;height:56px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--blue);font-size:46px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 38px rgba(0,31,62,.08);transition:.25s ease}
.client-prev{left:50%;transform:translateX(-66px)}
.client-next{left:50%;transform:translateX(10px)}
.client-arrow:hover{background:var(--blue);border-color:var(--blue);color:white}
.client-prev:hover{transform:translateX(-66px) translateY(-3px)}
.client-next:hover{transform:translateX(10px) translateY(-3px)}
.client-prev:active{transform:translateX(-66px) translateY(-1px) scale(.96)}
.client-next:active{transform:translateX(10px) translateY(-1px) scale(.96)}
@media(max-width:700px){.clients-slider{margin-top:32px;padding-top:62px}.clients-viewport{padding:8px 0 12px}.clients-track{gap:12px;padding-inline:13px}.client{flex-basis:160px;width:160px;height:96px;border-radius:16px;padding:18px}.client img{max-height:48px;max-width:112px}.client-arrow{width:44px;height:44px;font-size:36px}.client-prev{transform:translateX(-54px)}.client-next{transform:translateX(10px)}.client-prev:hover{transform:translateX(-54px) translateY(-2px)}.client-next:hover{transform:translateX(10px) translateY(-2px)}}

/* CTA & FOOTER */
.cta{background:var(--navy);color:white;overflow:hidden}.cta-wrap{border-radius:36px;padding:70px;background:linear-gradient(135deg,rgba(7,87,154,.95),rgba(3,24,45,.95));position:relative;overflow:hidden}.cta-wrap:before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(38,215,232,.18);filter:blur(20px);right:-120px;top:-230px}.cta h2{font-family:'Space Grotesk';font-size:clamp(42px,5vw,72px);line-height:1;max-width:760px;position:relative}.cta p{position:relative;margin:22px 0 30px;color:rgba(255,255,255,.62);font-size:17px}.cta .btn{position:relative}
footer{background:#02111f;color:white;padding:70px 0 28px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:50px}.footer-logo img{height:46px;filter:brightness(0) invert(1);margin-bottom:20px}.footer-copy{color:rgba(255,255,255,.55);line-height:1.8;font-size:14px}.footer-col h4{font-size:13px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;color:var(--cyan)}.footer-col a,.footer-col p{display:block;color:rgba(255,255,255,.62);margin:10px 0;font-size:14px}.footer-col a:hover{color:white}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;color:rgba(255,255,255,.45);font-size:13px}

@media(max-width:1050px){
  .nav-links,.nav-actions .lang{display:none}.menu-btn{display:block}.hero-inner{grid-template-columns:1fr;padding-top:130px}.hero-visual{height:520px}.stats-wrap{grid-template-columns:repeat(3,1fr)}.stat:nth-child(3){border-right:0}.about-grid{grid-template-columns:1fr;gap:50px}.service-grid{grid-template-columns:repeat(2,1fr)}.project-card{flex-basis:calc((100% - 18px)/2)}.work-grid{grid-template-columns:1fr 1fr;grid-template-rows:340px 250px 250px}.work-item:first-child{grid-column:1/3;grid-row:auto}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .container{width:min(100% - 26px,1240px)}.section{padding:78px 0}.nav{padding:12px 0}.logo img{height:36px}.hero-inner{padding-top:110px;gap:35px}.hero h1{font-size:clamp(52px,16vw,82px)}.hero p{font-size:16px}.hero-visual{height:380px}.hero-card-main{width:86%;height:78%;border-radius:24px}.hero-card-small{width:44%;height:40%;border-width:4px}.hero-badge{padding:12px 14px}.hero-badge strong{font-size:28px}.stats{margin-top:-22px}.stats-wrap{grid-template-columns:repeat(2,1fr);padding:16px}.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{grid-column:1/3;border-bottom:0}.about-collage{grid-template-rows:190px 190px}.about-collage:after{right:10px}.services-head,.projects-head{align-items:flex-start;flex-direction:column}.service-grid{grid-template-columns:1fr}.service-card{min-height:360px}.project-card{flex-basis:86%}.project-media{height:260px}.work-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.work-item,.work-item:first-child{min-width:86%;height:420px;scroll-snap-align:start}.cta-wrap{padding:44px 24px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:10px}.nav-actions .btn{padding:11px 16px}
}

/* BROCAST-INSPIRED MOTION LAYER */
@media (pointer:fine){
  *{cursor:none!important}
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;opacity:0;z-index:99999;transform:translate3d(-50%,-50%,0);transition:opacity .2s ease,width .22s ease,height .22s ease,border-color .22s ease,background .22s ease;will-change:transform}
  .cursor-dot{width:8px;height:8px;background:var(--cyan);box-shadow:0 0 18px rgba(38,215,232,.55)}
  .cursor-ring{width:36px;height:36px;border:1px solid rgba(38,215,232,.72);z-index:99998;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 28px rgba(38,215,232,.22)}
  body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring{opacity:1}
  body.cursor-hover .cursor-ring{width:58px;height:58px;border-color:rgba(139,244,255,.9);background:rgba(38,215,232,.08)}
  body.cursor-press .cursor-dot{width:12px;height:12px}
  body.cursor-press .cursor-ring{width:30px;height:30px}
}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

.reveal{filter:blur(10px);will-change:opacity,transform,filter}
.reveal.show{filter:blur(0)}
.service-grid,.project-viewport,.work-grid,.stats-wrap,.about-collage{perspective:1200px}
.hero-kicker,.hero-actions,.hero-badge,.scroll-cue{animation:heroFadeUp .9s cubic-bezier(.16,1,.3,1) both}
.hero-kicker{animation-delay:.08s}.hero h1{animation:heroFadeUp 1s cubic-bezier(.16,1,.3,1) .16s both}.hero p{animation:heroFadeUp 1s cubic-bezier(.16,1,.3,1) .26s both}.hero-actions{animation-delay:.36s}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes softPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.18)}}
@keyframes sheenSweep{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(140%) skewX(-18deg)}}
@keyframes flipIn{from{opacity:0;transform:perspective(900px) rotateX(18deg) translateY(34px) scale(.96)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}}

.hero:after{content:"";position:absolute;right:12%;top:20%;width:220px;height:220px;border:1px solid rgba(139,244,255,.16);border-radius:50%;animation:softPulse 5s ease-in-out infinite;pointer-events:none}
.hero-card-main,.hero-card-small,.hero-badge{will-change:transform;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hero-visual:hover .hero-card-main{transform:rotate(1deg) translateY(-10px) scale(1.015)}
.hero-visual:hover .hero-card-small{transform:rotate(-7deg) translateY(-18px) scale(1.02)}

.service-card,.project-card,.work-item,.stat,.client,.cta-wrap{transform-style:preserve-3d;will-change:transform;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .45s ease,filter .45s ease}
.service-card,.project-card,.work-item,.stat,.client{--tilt-x:0deg;--tilt-y:0deg;--mx:50%;--my:50%}
.service-card::before,.project-card::before,.work-item::before,.stat::before,.client::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(139,244,255,.24),transparent 34%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:3}
.service-card:hover::before,.project-card:hover::before,.work-item:hover::before,.stat:hover::before,.client:hover::before{opacity:1}
.service-card{backface-visibility:hidden}
.service-card:hover{transform:perspective(1000px) translateY(-10px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 30px 70px rgba(0,0,0,.34)}
.service-card:hover:after{background:linear-gradient(to top,rgba(3,24,45,.96),rgba(3,24,45,.18) 52%,rgba(38,215,232,.13))}
.service-num,.service-content{z-index:4;transform:translateZ(38px)}
.service-card:hover .service-num{animation:flipIn .55s cubic-bezier(.16,1,.3,1) both}
.service-card:hover .service-content h3{transform:translateY(-4px)}
.service-content h3{transition:transform .35s ease}

.project-card{position:relative;backface-visibility:hidden}
.project-card:hover{transform:perspective(1000px) translateY(-8px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 28px 64px rgba(0,31,62,.16);border-color:rgba(38,215,232,.34)}
.project-card::after{content:"";position:absolute;top:0;bottom:0;left:-55%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);opacity:0;z-index:4;pointer-events:none}
.project-card:hover::after{opacity:1;animation:sheenSweep .85s ease}
.project-media,.project-body{position:relative;z-index:2}.project-body{transition:transform .35s ease}.project-card:hover .project-body{transform:translateY(-3px)}
.project-chip{transition:transform .35s ease,background .35s ease}.project-card:hover .project-chip{transform:translateZ(30px) rotate(-2deg);background:rgba(3,24,45,.9)}

.work-item:hover{transform:perspective(1000px) translateY(-8px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 28px 64px rgba(0,31,62,.18)}
.work-label{transition:transform .35s ease,text-shadow .35s ease}.work-item:hover .work-label{transform:translateY(-8px) translateZ(34px);text-shadow:0 10px 24px rgba(0,0,0,.35)}
.stat{position:relative;overflow:hidden;border-radius:22px}.stat:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,31,62,.1)}
.client{position:relative;overflow:hidden}.client:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 16px 32px rgba(0,31,62,.1)}
.btn,.slider-btn,.dot,.nav-links a,.project-link,.footer-col a{will-change:transform;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover,.project-link:hover,.footer-col a:hover{transform:translateY(-2px)}
.nav-links a:hover{transform:translateY(-1px)}
.slider-btn:hover{transform:translateY(-3px) scale(1.04)}
.cta-wrap:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(0,31,62,.26)}
.tilt-reset{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .45s ease,filter .45s ease}
@media(prefers-reduced-motion:reduce){.cursor-dot,.cursor-ring{display:none!important}.reveal{filter:none!important}.hero:after{display:none!important}}

/* SILART VERSION 2.2: FLIP + WAVE MOTION */
.services-head.show .eyebrow,.services-head.show .section-title,.services-head.show .section-copy,
.work .reveal.show .eyebrow,.work .reveal.show .section-title{
  animation:flipHeadline .9s cubic-bezier(.16,1,.3,1) both;
  transform-origin:left center;
}
.services-head.show .section-title,.work .reveal.show .section-title{animation-delay:.08s}
.services-head.show .section-copy{animation-delay:.16s}
@keyframes flipHeadline{
  0%{opacity:0;transform:perspective(800px) rotateX(72deg) translateY(24px)}
  100%{opacity:1;transform:perspective(800px) rotateX(0) translateY(0)}
}
@keyframes cardFlipReveal{
  0%{opacity:0;transform:perspective(1100px) rotateY(-76deg) translateY(28px) scale(.94);filter:blur(8px)}
  62%{opacity:1;transform:perspective(1100px) rotateY(8deg) translateY(-4px) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:perspective(1100px) rotateY(0) translateY(0) scale(1);filter:blur(0)}
}
@keyframes workFlipReveal{
  0%{opacity:0;transform:perspective(1000px) rotateX(68deg) translateY(38px) scale(.93);filter:blur(8px)}
  64%{opacity:1;transform:perspective(1000px) rotateX(-7deg) translateY(-5px) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0) scale(1);filter:blur(0)}
}
.service-card.show{animation:cardFlipReveal .95s cubic-bezier(.16,1,.3,1) both}
.work-item.show{animation:workFlipReveal .95s cubic-bezier(.16,1,.3,1) both}
.service-card:nth-child(1),.work-item:nth-child(1){animation-delay:.04s}
.service-card:nth-child(2),.work-item:nth-child(2){animation-delay:.12s}
.service-card:nth-child(3),.work-item:nth-child(3){animation-delay:.2s}
.service-card:nth-child(4),.work-item:nth-child(4){animation-delay:.28s}
.service-card:nth-child(5),.work-item:nth-child(5){animation-delay:.36s}
.service-card:nth-child(6){animation-delay:.44s}
.service-card:nth-child(7){animation-delay:.52s}
.service-card:nth-child(8){animation-delay:.6s}
.service-card,.work-item{transform-origin:center;overflow:hidden}
.service-card .service-content,.service-card .service-num,.work-label{backface-visibility:hidden}
.service-card::after,.work-item::after{transition:background .42s ease,opacity .42s ease}
.service-card:hover{transform:perspective(1000px) translateY(-12px) rotateX(calc(var(--tilt-x) * 1.15)) rotateY(calc(var(--tilt-y) * 1.45)) scale(1.015)}
.service-card:hover .service-content{animation:microFlip .5s cubic-bezier(.16,1,.3,1) both}
.work-item:hover{transform:perspective(1000px) translateY(-10px) rotateX(calc(var(--tilt-x) * 1.35)) rotateY(calc(var(--tilt-y) * 1.2)) scale(1.018)}
.work-item:hover .work-label{animation:labelFlip .55s cubic-bezier(.16,1,.3,1) both}
@keyframes microFlip{
  0%{transform:translateZ(38px) rotateX(0)}
  45%{transform:translateZ(54px) rotateX(-10deg)}
  100%{transform:translateZ(38px) rotateX(0)}
}
@keyframes labelFlip{
  0%{transform:translateY(-8px) translateZ(34px) rotateX(0)}
  50%{transform:translateY(-14px) translateZ(54px) rotateX(-12deg)}
  100%{transform:translateY(-8px) translateZ(34px) rotateX(0)}
}
.service-card .service-arrow,.project-link{position:relative;overflow:hidden}
.service-card .service-arrow::after,.project-link::after{
  content:"";position:absolute;inset:-40%;background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.55),transparent 28%);
  opacity:0;transition:opacity .25s ease;animation:spinGlow 1.4s linear infinite;
}
.service-card:hover .service-arrow::after,.project-link:hover::after{opacity:.55}
@keyframes spinGlow{to{transform:rotate(1turn)}}
.work-item::before{background:linear-gradient(120deg,transparent 0%,rgba(139,244,255,.2) 24%,transparent 48%);transform:translateX(-130%);opacity:0}
.work-item:hover::before{opacity:1;animation:workScan .9s ease}
@keyframes workScan{to{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){
  .service-card.show,.work-item.show,.services-head.show .eyebrow,.services-head.show .section-title,.services-head.show .section-copy,.work .reveal.show .eyebrow,.work .reveal.show .section-title{animation:none!important}
}

/* SILART VERSION 2.2: HOVER FLIP CORRECTION */
.service-card.show,.work-item.show{animation:none!important}
.service-card,.work-item{outline:0}
.service-card img,.service-card:after,.service-content,.service-num,
.work-item img,.work-item:after,.work-label{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
@keyframes hoverFlipService{
  0%{transform:perspective(1100px) translateY(0) rotateY(0) scale(1)}
  42%{transform:perspective(1100px) translateY(-10px) rotateY(88deg) scale(.985)}
  100%{transform:perspective(1100px) translateY(-12px) rotateY(0) rotateX(var(--tilt-x)) scale(1.018)}
}
@keyframes hoverFlipWork{
  0%{transform:perspective(1100px) translateY(0) rotateX(0) scale(1)}
  42%{transform:perspective(1100px) translateY(-10px) rotateX(82deg) scale(.985)}
  100%{transform:perspective(1100px) translateY(-10px) rotateX(0) rotateY(var(--tilt-y)) scale(1.018)}
}
@keyframes contentFlipIn{
  0%{opacity:.2;transform:translateZ(42px) rotateY(-22deg)}
  100%{opacity:1;transform:translateZ(54px) rotateY(0)}
}
@keyframes labelFlipIn{
  0%{opacity:.2;transform:translateY(4px) translateZ(38px) rotateX(-28deg)}
  100%{opacity:1;transform:translateY(-8px) translateZ(54px) rotateX(0)}
}
@media (hover:hover) and (pointer:fine){
  .service-card:hover,.service-card:focus-within{
    animation:hoverFlipService .72s cubic-bezier(.16,1,.3,1) both;
    box-shadow:0 34px 78px rgba(0,0,0,.36);
  }
  .service-card:hover img,.service-card:focus-within img{transform:scale(1.13) rotateY(-4deg);filter:brightness(.72) saturate(1.04)}
  .service-card:hover .service-content,.service-card:focus-within .service-content{animation:contentFlipIn .55s cubic-bezier(.16,1,.3,1) .18s both}
  .service-card:hover .service-num,.service-card:focus-within .service-num{transform:translateZ(62px) rotateY(-10deg)}
  .work-item:hover,.work-item:focus-within{
    animation:hoverFlipWork .72s cubic-bezier(.16,1,.3,1) both;
    box-shadow:0 32px 72px rgba(0,31,62,.2);
  }
  .work-item:hover img,.work-item:focus-within img{transform:scale(1.1) rotateX(-3deg);filter:saturate(1.05) contrast(1.03)}
  .work-item:hover .work-label,.work-item:focus-within .work-label{animation:labelFlipIn .55s cubic-bezier(.16,1,.3,1) .16s both;text-shadow:0 12px 26px rgba(0,0,0,.38)}
}
@media (hover:none),(pointer:coarse){
  .service-card.show,.work-item.show{animation:none!important}
  .service-card,.service-card:hover,.work-item,.work-item:hover{
    transform:none!important;
    animation:none!important;
    transition:box-shadow .28s ease,filter .28s ease!important;
  }
  .service-card{min-height:390px}
  .service-card .service-content{transform:none!important}
  .service-card .service-content p{max-height:130px;opacity:1;margin-bottom:16px}
  .service-card:active,.work-item:active{box-shadow:0 18px 42px rgba(0,31,62,.16);filter:brightness(1.02)}
  .service-card:active img,.work-item:active img{transform:scale(1.04)!important}
  .work-label{font-size:clamp(18px,5vw,22px);line-height:1.18;right:18px}
}
@media(max-width:700px){
  .service-card{min-height:410px;border-radius:22px}
  .service-content{left:20px;right:20px;bottom:20px}
  .service-content h3{font-size:22px}
  .work-item,.work-item:first-child{height:380px;min-width:88%;border-radius:22px}
  .work-grid{gap:12px;padding-bottom:8px}
}

/* SILART VERSION 2.2: MOBILE FLIP SAFETY */
@media(max-width:700px){
  .service-card.show,.work-item.show{animation:none!important}
  .service-card,.service-card:hover,.service-card:focus-within,
  .work-item,.work-item:hover,.work-item:focus-within{
    animation:none!important;
    transform:none!important;
  }
  .service-card img,.work-item img{transform:none}
  .service-card:active img,.work-item:active img{transform:scale(1.035)}
  .service-card .service-content,.service-card:hover .service-content,.service-card:focus-within .service-content{
    animation:none!important;
    transform:none!important;
  }
  .service-card .service-content p{
    max-height:150px;
    opacity:1;
    margin-bottom:16px;
  }
  .service-card::before,.work-item::before{display:none}
  .work-label,.work-item:hover .work-label,.work-item:focus-within .work-label{
    animation:none!important;
    transform:none!important;
    text-shadow:0 8px 22px rgba(0,0,0,.32);
  }
}

/* SILART VERSION 2.2: W3 FLIP BOX */
.service-card.flip-ready,.work-item.flip-ready{
  background:transparent;
  overflow:visible;
  isolation:isolate;
  perspective:1000px;
  transform:none!important;
  animation:none!important;
}
.service-card.flip-ready::before,.service-card.flip-ready::after,
.work-item.flip-ready::before,.work-item.flip-ready::after{
  display:none!important;
}
.flip-inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
  transform-style:preserve-3d;
  box-shadow:inherit;
}
.flip-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.flip-front{
  background:var(--navy-2);
  color:white;
}
.flip-back{
  background:linear-gradient(135deg,var(--navy-2),var(--navy));
  color:white;
  transform:rotateY(180deg);
  display:flex;
  align-items:flex-end;
}
.flip-front img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  z-index:0!important;
  filter:brightness(.58)!important;
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s ease!important;
}
.flip-front::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(3,24,45,.94),rgba(3,24,45,.08));
}
.flip-front .service-num,.flip-front .service-content,.flip-front .work-label{
  z-index:2;
}
.flip-front .service-content p,.flip-front .service-arrow{
  display:none;
}
.flip-back-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:26px;
  transform:translateZ(44px);
}
.flip-back-content .service-num{
  position:static;
  display:block;
  margin-bottom:16px;
}
.flip-back-content h3{
  font-family:'Space Grotesk';
  font-size:24px;
  line-height:1.15;
  margin-bottom:16px;
}
.flip-back-content p{
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.7;
  margin-bottom:18px;
}
.flip-back-content .service-arrow{
  position:relative;
  z-index:3;
}
.work-back-title{
  font-family:'Space Grotesk';
  font-size:clamp(24px,3vw,38px);
  line-height:1.02;
}
.service-card.flip-ready:hover,.service-card.flip-ready:focus-within,
.work-item.flip-ready:hover,.work-item.flip-ready:focus-within{
  transform:none!important;
  animation:none!important;
  box-shadow:none!important;
}
.service-card.flip-ready:hover .flip-inner,.service-card.flip-ready:focus-within .flip-inner,
.work-item.flip-ready:hover .flip-inner,.work-item.flip-ready:focus-within .flip-inner,
.service-card.flip-ready.flip-active .flip-inner,.work-item.flip-ready.flip-active .flip-inner{
  transform:rotateY(180deg);
  box-shadow:0 34px 78px rgba(0,31,62,.24);
}
.service-card.flip-ready:hover .flip-front img,.service-card.flip-ready:focus-within .flip-front img,
.work-item.flip-ready:hover .flip-front img,.work-item.flip-ready:focus-within .flip-front img,
.service-card.flip-ready.flip-active .flip-front img,.work-item.flip-ready.flip-active .flip-front img{
  transform:scale(1.08)!important;
  filter:brightness(.68)!important;
}
.service-card.flip-ready:hover .service-content,.service-card.flip-ready:focus-within .service-content,
.work-item.flip-ready:hover .work-label,.work-item.flip-ready:focus-within .work-label{
  animation:none!important;
  transform:none!important;
}
@media(max-width:700px){
  .service-card.flip-ready{min-height:390px}
  .work-item.flip-ready,.work-item.flip-ready:first-child{height:380px}
  .flip-inner{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
  .flip-back-content{padding:22px}
  .flip-back-content h3{font-size:22px}
  .flip-back-content p{font-size:13px;line-height:1.65}
  .work-back-title{font-size:25px}
}

/* SILART VERSION 2.8: BROCAST-STYLE PORTFOLIO MOTION */
.work{
  position:relative;
  overflow:hidden;
}
.work::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 18%,rgba(38,215,232,.18),transparent 28%),
    radial-gradient(circle at 86% 72%,rgba(7,87,154,.16),transparent 30%);
  pointer-events:none;
}
.work .container{
  position:relative;
  z-index:1;
}
.work-grid{
  perspective:1500px;
}
.work-item.work-portfolio{
  overflow:hidden!important;
  isolation:isolate;
  background:var(--navy);
  box-shadow:0 18px 50px rgba(0,31,62,.1);
  transform-style:preserve-3d;
  clip-path:inset(0 round 26px);
}
.work-item.work-portfolio.reveal{
  opacity:0;
  transform:translateY(58px) scale(.92) rotateX(10deg);
  filter:blur(10px) saturate(.86);
  clip-path:inset(12% 0 0 0 round 26px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .85s ease,
    clip-path .95s cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease;
}
.work-item.work-portfolio.reveal.show{
  opacity:1;
  transform:translateY(0) scale(1) rotateX(0);
  filter:blur(0) saturate(1);
  clip-path:inset(0 round 26px);
}
.work-item.work-portfolio img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  transform:scale(1.025);
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease,opacity .5s ease;
}
.work-item.work-portfolio::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  display:block!important;
  background:
    linear-gradient(to top,rgba(3,24,45,.9),rgba(3,24,45,.2) 48%,rgba(3,24,45,.05)),
    linear-gradient(135deg,rgba(38,215,232,.2),transparent 38%);
  transition:opacity .45s ease,background .45s ease;
  pointer-events:none;
}
.work-item.work-portfolio::before{
  content:"";
  position:absolute;
  inset:14px;
  z-index:4;
  display:block!important;
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  opacity:.35;
  transform:scale(.98);
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1),border-color .45s ease;
  pointer-events:none;
}
.work-portfolio .portfolio-shine{
  position:absolute;
  inset:-35% -55%;
  z-index:3;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.46) 48%,rgba(139,244,255,.38) 52%,transparent 62%);
  opacity:0;
  transform:translateX(-34%) rotate(8deg);
  pointer-events:none;
}
.work-portfolio .portfolio-index{
  position:absolute;
  z-index:5;
  top:20px;
  left:20px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  color:white;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:800;
  background:rgba(3,24,45,.28);
  backdrop-filter:blur(12px);
  transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease;
}
.work-item.work-portfolio .work-label{
  z-index:5;
  right:22px;
  max-width:calc(100% - 44px);
  transform:translateZ(48px);
  transition:transform .55s cubic-bezier(.16,1,.3,1),letter-spacing .35s ease,text-shadow .35s ease;
}
@media(hover:hover) and (pointer:fine){
  .work-item.work-portfolio:hover{
    transform:perspective(1100px) translateY(-14px) scale(1.015) rotateX(calc(var(--tilt-x) * .55)) rotateY(calc(var(--tilt-y) * .55))!important;
    box-shadow:0 36px 86px rgba(0,31,62,.22);
  }
  .work-item.work-portfolio:hover::before{
    opacity:.95;
    transform:scale(1);
    border-color:rgba(139,244,255,.65);
  }
  .work-item.work-portfolio:hover::after{
    background:
      linear-gradient(to top,rgba(3,24,45,.92),rgba(3,24,45,.08) 54%,rgba(139,244,255,.16)),
      linear-gradient(135deg,rgba(38,215,232,.34),transparent 42%);
  }
  .work-item.work-portfolio:hover img{
    transform:scale(1.13) rotate(.7deg);
    filter:brightness(.78) saturate(1.12) contrast(1.04);
  }
  .work-item.work-portfolio:hover .portfolio-shine{
    opacity:1;
    animation:portfolioSweep .95s cubic-bezier(.16,1,.3,1);
  }
  .work-item.work-portfolio:hover .portfolio-index{
    transform:translateZ(70px) rotate(-8deg) scale(1.08);
    background:rgba(38,215,232,.18);
    border-color:rgba(139,244,255,.75);
  }
  .work-item.work-portfolio:hover .work-label{
    transform:translateY(-12px) translateZ(78px);
    letter-spacing:.01em;
    text-shadow:0 12px 28px rgba(0,0,0,.42);
  }
}
@keyframes portfolioSweep{
  from{transform:translateX(-42%) rotate(8deg)}
  to{transform:translateX(42%) rotate(8deg)}
}
@media(max-width:700px){
  .work-item.work-portfolio,.work-item.work-portfolio:first-child{
    height:390px;
    min-width:88%;
    transform:none!important;
  }
  .work-item.work-portfolio.reveal{
    transform:translateY(28px) scale(.96);
    clip-path:inset(8% 0 0 0 round 22px);
  }
  .work-item.work-portfolio.reveal.show{
    transform:none!important;
    clip-path:inset(0 round 22px);
  }
  .work-portfolio .portfolio-index{
    width:40px;
    height:40px;
    top:16px;
    left:16px;
  }
  .work-item.work-portfolio .work-label{
    font-size:21px;
    left:18px;
    right:18px;
    bottom:18px;
    max-width:calc(100% - 36px);
  }
  .work-item.work-portfolio:active img,
  .work-item.work-portfolio.work-touch-active img{
    transform:scale(1.06);
    filter:brightness(.82) saturate(1.08);
  }
  .work-item.work-portfolio:active .portfolio-shine,
  .work-item.work-portfolio.work-touch-active .portfolio-shine{
    opacity:1;
    animation:portfolioSweep .75s cubic-bezier(.16,1,.3,1);
  }
}
@media(prefers-reduced-motion:reduce){
  .work-item.work-portfolio,.work-item.work-portfolio img,.work-portfolio .portfolio-shine,.work-portfolio .portfolio-index{
    animation:none!important;
    transition:none!important;
  }
  .work-item.work-portfolio.reveal,.work-item.work-portfolio.reveal.show{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:inset(0 round 26px)!important;
  }
}

/* SILART VERSION 2.8B: BROCAST PORTFOLIO IMAGE HOVER */
.work-item.work-portfolio{
  transition:box-shadow .35s ease,border-color .25s ease,filter .35s ease!important;
}
.work-item.work-portfolio img{
  transform:scale(1);
  transform-origin:center;
  transition:transform .55s cubic-bezier(.22,.68,0,1.2),filter .35s ease!important;
}
.work-item.work-portfolio::after{
  opacity:1;
  transition:opacity .3s ease,background .3s ease!important;
}
.work-portfolio .portfolio-shine{
  inset:0;
  z-index:3;
  background:rgba(3,24,45,.18);
  opacity:0;
  transform:none;
  transition:opacity .3s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .work-item.work-portfolio:hover{
    transform:none!important;
    box-shadow:0 24px 64px rgba(0,31,62,.18);
  }
  .work-item.work-portfolio:hover img{
    transform:scale(1.105);
    filter:brightness(.82) saturate(1.08);
  }
  .work-item.work-portfolio:hover .portfolio-shine{
    opacity:1;
    animation:none!important;
  }
  .work-item.work-portfolio:hover::before{
    opacity:.72;
    transform:scale(1);
  }
  .work-item.work-portfolio:hover .portfolio-index{
    transform:scale(1.04);
  }
  .work-item.work-portfolio:hover .work-label{
    transform:translateY(-6px);
  }
}
@media(max-width:700px){
  .work-item.work-portfolio:active img,
  .work-item.work-portfolio.work-touch-active img{
    transform:scale(1.075)!important;
    filter:brightness(.84) saturate(1.08);
  }
  .work-item.work-portfolio:active .portfolio-shine,
  .work-item.work-portfolio.work-touch-active .portfolio-shine{
    opacity:1;
    animation:none!important;
  }
}
/* SILART VERSION 2.4: MOBILE VIEW FIX */
@media(max-width:700px){
  html,body{width:100%;overflow-x:hidden}
  *{cursor:auto!important}
  .cursor-dot,.cursor-ring{display:none!important}
  .container{width:min(100% - 28px,1240px)}
  .section{padding:70px 0}
  .section-title{font-size:clamp(34px,11vw,54px);line-height:1.02}
  .section-copy{font-size:15px;line-height:1.72}
  .nav-inner{gap:12px}
  .nav-actions{gap:8px}
  .nav-actions .btn{display:none}
  .hero{min-height:auto}
  .hero-inner{padding:104px 0 70px}
  .hero h1{font-size:clamp(46px,14vw,72px);line-height:.92}
  .hero-visual{height:340px}
  .hero-badge{left:4%;top:13%;border-radius:16px}
  .scroll-cue{display:none}

  .services-head,.projects-head{gap:18px;margin-bottom:34px}
  .service-grid{gap:14px}
  .service-card.flip-ready{
    min-height:430px;
    height:430px;
    border-radius:22px;
    overflow:visible!important;
    perspective:900px;
  }
  .service-card.flip-ready .flip-inner{
    border-radius:22px;
    transition:transform .58s cubic-bezier(.16,1,.3,1),box-shadow .28s ease;
  }
  .service-card.flip-ready .flip-front .service-content{
    left:20px;
    right:20px;
    bottom:20px;
  }
  .service-card.flip-ready .flip-front .service-content h3,
  .service-card.flip-ready .flip-back-content h3{
    font-size:21px;
    line-height:1.18;
  }
  .service-card.flip-ready .flip-back{
    align-items:stretch;
  }
  .service-card.flip-ready .flip-back-content{
    padding:22px;
    display:flex;
    min-height:100%;
    flex-direction:column;
    justify-content:flex-end;
  }
  .service-card.flip-ready .flip-back-content p{
    font-size:13px;
    line-height:1.62;
    margin-bottom:16px;
  }
  .service-card.flip-ready .flip-back-content .service-arrow{
    width:40px;
    height:40px;
    flex:0 0 auto;
  }
  .service-card.flip-ready.flip-active .flip-inner{
    transform:rotateY(180deg)!important;
  }
  .service-card.flip-ready:not(.flip-active) .flip-inner{
    transform:none!important;
  }

  .work-grid{
    display:flex;
    gap:14px;
    margin-top:34px;
    padding:0 14px 12px;
    margin-left:-14px;
    margin-right:-14px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .work-grid::-webkit-scrollbar{display:none}
  .work-item.work-prism,
  .work-item.work-prism:first-child{
    min-width:82%;
    height:350px;
    border-radius:22px;
    scroll-snap-align:center;
    transform:none!important;
    box-shadow:0 18px 46px rgba(0,31,62,.14);
  }
  .work-item.work-prism img{
    transform:none!important;
    filter:brightness(.8) saturate(1.02);
  }
  .work-item.work-prism::after{
    background:linear-gradient(to top,rgba(3,24,45,.88),rgba(3,24,45,.18) 58%,rgba(38,215,232,.08));
  }
  .work-item.work-prism .work-label{
    left:18px;
    right:18px;
    bottom:18px;
    max-width:calc(100% - 36px);
    font-size:clamp(19px,5.6vw,24px);
    line-height:1.12;
    transform:none!important;
    text-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  .work-prism .work-slice{display:none!important}
  .work-prism .work-pulse{
    width:38px;
    height:38px;
    right:16px;
    top:16px;
    opacity:.78;
    transform:scale(1);
  }
  .work-prism .work-pulse::before{inset:7px}
  .work-prism .work-pulse::after{inset:14px}
  .work-item.work-prism:active::before,
  .work-item.work-prism.work-touch-active::before{
    opacity:1;
    animation:prismScan .7s ease;
  }
  .work-item.work-prism:active img,
  .work-item.work-prism.work-touch-active img{
    transform:scale(1.035)!important;
  }

  .project-card{flex-basis:88%}
  .project-body{padding:20px}
  .project-body h3{font-size:20px}
  .cta-wrap{border-radius:24px;padding:38px 22px}
  .footer-grid{gap:28px}
}
@media(max-width:420px){
  .service-card.flip-ready{height:450px;min-height:450px}
  .service-card.flip-ready .flip-back-content{padding:20px}
  .work-item.work-prism,.work-item.work-prism:first-child{min-width:86%;height:340px}
}


.service-card-hit{
  position:absolute;
  inset:0;
  z-index:30;
  display:block;
  border-radius:inherit;
  background:transparent;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
}
.service-card-hit:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
}
#services article,
#services article:hover,
#services .service-card,
#services .service-card:hover,
#services .service-card-hit,
#services .service-card-hit:hover,
#services .service-card-hit:focus-visible{
  cursor:pointer!important;
}
/* SILART VERSION 2.4: SECTION TITLE MOTION */
.section-title{
  position:relative;
  display:inline-block;
  overflow:visible;
  transform-origin:left center;
  --title-line:var(--cyan);
}
.section-title.title-motion-ready{
  opacity:0;
  transform:translateY(28px) rotateX(18deg);
  filter:blur(8px);
}
.section-title.title-motion-ready.title-motion-show{
  opacity:1;
  transform:translateY(0) rotateX(0);
  filter:blur(0);
  animation:titleLoadRise .9s cubic-bezier(.16,1,.3,1) both;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:min(150px,42%);
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--title-line),transparent);
  transform:scaleX(0);
  transform-origin:left;
  opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease,width .35s ease;
  pointer-events:none;
}
.section-title.title-motion-show::after{
  transform:scaleX(1);
  opacity:.75;
}
.section-title:hover{
  transform:translateY(-4px) skewX(-1deg);
  text-shadow:0 18px 38px rgba(0,31,62,.12);
}
.services .section-title:hover,.cta .section-title:hover{
  text-shadow:0 18px 38px rgba(38,215,232,.16);
}
.section-title:hover::after{
  width:min(220px,58%);
  opacity:1;
}
.section-title .title-word{
  display:inline-block;
  transform:translateY(.72em) rotateX(42deg);
  opacity:0;
  transform-origin:left bottom;
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .45s ease,color .35s ease;
}
.section-title.title-motion-show .title-word{
  transform:translateY(0) rotateX(0);
  opacity:1;
}
.section-title:hover .title-word{
  transform:translateY(-3px);
}
.section-title:hover .title-word:nth-child(2n){
  transform:translateY(2px);
}
@keyframes titleLoadRise{
  0%{opacity:0;transform:translateY(28px) rotateX(18deg);filter:blur(8px)}
  62%{opacity:1;transform:translateY(-4px) rotateX(0);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)}
}
@media(max-width:700px){
  .section-title::after{bottom:-9px;height:2px;width:min(120px,48%)}
  .section-title:hover,.section-title:hover .title-word,.section-title:hover .title-word:nth-child(2n){
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .section-title,.section-title .title-word{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
  }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


.btn_top {
  padding: 6px 14px;
  font-weight: 600;
}



/* SILART 2.5: SERVICES IMAGE-ONLY FLIP */
.service-card.service-image-flip{
  background:transparent;
}
.service-card.service-image-flip .flip-front{
  display:flex;
  flex-direction:column;
  background:#ffffff;
  color:var(--navy);
}
.service-card.service-image-flip .flip-front::after,
.service-card.service-image-flip .flip-back::after{
  display:none!important;
}
.service-card.service-image-flip .flip-front img{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  width:100%!important;
  height:calc(100% - 74px)!important;
  min-height:0!important;
  object-fit:cover!important;
  filter:none!important;
  transform:none!important;
}
.service-card.service-image-flip .flip-front .service-content{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2!important;
  height:74px;
  width:100%;
  padding:0 22px;
  display:flex;
  align-items:center;
  background:white;
  transform:none!important;
  animation:none!important;
}
.service-card.service-image-flip .flip-front .service-content h3{
  color:var(--navy);
  font-family:'Space Grotesk';
  font-size:22px;
  line-height:1.12;
  margin:0;
}
.service-card.service-image-flip .flip-back{
  background:#ffffff;
  align-items:stretch;
}
.service-card.service-image-flip .flip-back img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:none!important;
  transform:none!important;
  z-index:1!important;
}
.service-card.service-image-flip:hover .flip-front img,
.service-card.service-image-flip:focus-within .flip-front img,
.service-card.service-image-flip.flip-active .flip-front img{
  filter:none!important;
  transform:none!important;
}
.service-card.service-image-flip:hover .flip-back img,
.service-card.service-image-flip:focus-within .flip-back img,
.service-card.service-image-flip.flip-active .flip-back img{
  filter:none!important;
  transform:none!important;
}
@media(max-width:700px){
  .service-card.service-image-flip .flip-front img{
    height:calc(100% - 66px)!important;
  }
  .service-card.service-image-flip .flip-front .service-content{
    height:66px;
    padding:0 18px;
  }
  .service-card.service-image-flip .flip-front .service-content h3{
    font-size:20px;
  }
}

/* SILART 2.5: SERVICE BACK IMAGE VISIBILITY FIX */
.service-card.service-image-flip .flip-back{
  background-image:var(--service-back-img)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.service-card.service-image-flip .flip-back img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  backface-visibility:visible!important;
  transform:translateZ(2px)!important;
}
.service-card.service-image-flip:hover .flip-back img,
.service-card.service-image-flip:focus-within .flip-back img,
.service-card.service-image-flip.flip-active .flip-back img{
  opacity:1!important;
  visibility:visible!important;
  transform:translateZ(2px)!important;
}

/* SILART VERSION 2.6: HERO ORBIT MARK MOTION */
.hero::after{
  right:auto!important;
  top:8%!important;
  left:58%!important;
  width:220px!important;
  height:220px!important;
  animation:heroAfterTopRight 6.8s cubic-bezier(.45,0,.2,1) infinite alternate!important;
  will-change:transform,opacity,filter;
}
@keyframes heroAfterTopRight{
  0%{
    opacity:.38;
    transform:translate3d(-120px,-64px,0) scale(.92);
    filter:blur(0);
  }
  42%{
    opacity:.82;
    transform:translate3d(52px,-22px,0) scale(1.1);
    filter:blur(.2px);
  }
  100%{
    opacity:.52;
    transform:translate3d(260px,96px,0) scale(1);
    filter:blur(0);
  }
}
@media(max-width:700px){
  .hero::after{
    width:150px!important;
    height:150px!important;
    left:42%!important;
    top:7%!important;
    animation-duration:5.8s!important;
  }
  @keyframes heroAfterTopRight{
    0%{opacity:.34;transform:translate3d(-80px,-38px,0) scale(.9)}
    50%{opacity:.76;transform:translate3d(22px,-6px,0) scale(1.08)}
    100%{opacity:.5;transform:translate3d(118px,78px,0) scale(1)}
  }
}

/* SILART VERSION 2.6: RANDOM GLOW CIRCLES */
.hero-glow-circles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-glow-circles span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  border:1px solid rgba(139,244,255,var(--a));
  background:radial-gradient(circle,rgba(139,244,255,.1),transparent 60%);
  box-shadow:
    0 0 18px rgba(38,215,232,.26),
    0 0 48px rgba(38,215,232,.2),
    inset 0 0 28px rgba(139,244,255,.13);
  opacity:.9;
  transform:translate3d(-50%,-50%,0);
  animation:heroGlowDrift var(--d) ease-in-out infinite alternate;
  animation-delay:var(--delay);
  will-change:transform,opacity,filter;
}
.hero-glow-circles span:nth-child(2n){
  animation-name:heroGlowDriftReverse;
}
.hero-glow-circles span:nth-child(3n){
  border-color:rgba(255,255,255,.2);
  box-shadow:
    0 0 22px rgba(255,255,255,.16),
    0 0 58px rgba(38,215,232,.2),
    inset 0 0 26px rgba(255,255,255,.1);
}
@keyframes heroGlowDrift{
  0%{transform:translate3d(-50%,-50%,0) scale(.86);opacity:.38;filter:blur(.1px)}
  24%{transform:translate3d(calc(-50% + 72px),calc(-50% - 44px),0) scale(1.08);opacity:.82}
  52%{transform:translate3d(calc(-50% + 18px),calc(-50% + 92px),0) scale(.96);opacity:.56}
  76%{transform:translate3d(calc(-50% - 96px),calc(-50% + 18px),0) scale(1.16);opacity:.72}
  100%{transform:translate3d(calc(-50% + 130px),calc(-50% - 12px),0) scale(.92);opacity:.45;filter:blur(.2px)}
}
@keyframes heroGlowDriftReverse{
  0%{transform:translate3d(-50%,-50%,0) scale(1.08);opacity:.46}
  28%{transform:translate3d(calc(-50% - 82px),calc(-50% + 36px),0) scale(.88);opacity:.76}
  55%{transform:translate3d(calc(-50% + 44px),calc(-50% - 84px),0) scale(1.18);opacity:.5}
  82%{transform:translate3d(calc(-50% + 110px),calc(-50% + 60px),0) scale(.98);opacity:.86}
  100%{transform:translate3d(calc(-50% - 126px),calc(-50% - 22px),0) scale(1.02);opacity:.42}
}
@media(max-width:700px){
  .hero-glow-circles span{
    width:calc(var(--s) * .68);
    height:calc(var(--s) * .68);
  }
  .hero-glow-circles span:nth-child(n+5){
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-glow-circles span{
    animation:none!important;
  }
}
.project-card,
.work-item,
.work-item.work-portfolio,
.project-card-hit,
.work-card-hit,
.index-card-hit,
.index-card-hit:hover,
.index-card-hit:focus-visible{
  cursor:pointer!important;
}
.project-card-hit,
.work-card-hit,
.index-card-hit{
  position:absolute;
  inset:0;
  z-index:30;
  display:block;
  border-radius:inherit;
  background:transparent;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
}
.index-card-hit:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
}

/* Compact footer layout on phones (shared by Arabic and English). */
@media(max-width:700px){
  footer{padding:26px 0 14px}
  footer .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px 8px}
  footer .footer-logo{grid-column:1 / -1}
  footer .footer-grid > .footer-col:nth-child(2){grid-column:span 1}
  footer .footer-grid > .footer-col:nth-child(3){grid-column:span 2}
  footer .footer-grid > .footer-col:nth-child(4){grid-column:span 1}
  footer .footer-logo img{height:35px!important;margin-bottom:8px}
  .footer-copy{font-size:12px;line-height:1.55;margin:0;max-width:620px}
  .footer-col h4{font-size:11px;letter-spacing:.08em;margin:0 0 7px}
  .footer-col a,.footer-col p{font-size:12px;line-height:1.35;margin:5px 0}
  .footer-bottom{margin-top:18px;padding-top:12px;gap:4px;font-size:11px;line-height:1.4}
}

/* Balanced mobile typography for both Arabic and English. */
@media(max-width:700px){
  body{font-size:15px;line-height:1.65}
  .mobile-menu nav{font-size:25px;gap:18px}
  .hero h1{font-size:clamp(42px,11vw,58px)!important;line-height:1.16!important;letter-spacing:-.04em}
  .hero p{font-size:15px;line-height:1.7}
  .hero-kicker{font-size:11px;padding:8px 11px}
  .section-title,.section-title[style]{font-size:clamp(30px,8.4vw,38px)!important;line-height:1.14}
  .section-copy{font-size:14px;line-height:1.7}
  .cta h2{font-size:clamp(30px,8vw,38px);line-height:1.14}
  .cta p{font-size:14px;line-height:1.7;margin:16px 0 22px}
  .service-content h3,.project-body h3{font-size:20px;line-height:1.25}
  .service-content p,.project-body p{font-size:13px;line-height:1.65}
  .work-label{font-size:19px;line-height:1.22}
  .stat strong{font-size:28px}
  .stat span{font-size:12px}
  .btn{font-size:14px}
}