/* v6: INFRYX visual effects layer (pure CSS, no libraries) */
:root{--fx-a:#29b8f2;--fx-b:#6a7bff;--fx-c:#16e0c4}
html,body{overflow-x:clip}
/* fix: honeypot field must not create horizontal overflow in RTL (Arabic) */
.trap{left:auto!important;inset-inline-start:0;opacity:0;clip-path:inset(50%);pointer-events:none}
/* ambient background */
.fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.fx-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;will-change:transform}
.fx-blob.b1{width:560px;height:560px;left:-140px;top:-120px;background:radial-gradient(circle,#1b8dff,transparent 70%);animation:fxDrift1 26s ease-in-out infinite alternate}
.fx-blob.b2{width:520px;height:520px;right:-160px;top:18vh;background:radial-gradient(circle,#6a4bff,transparent 70%);animation:fxDrift2 32s ease-in-out infinite alternate}
.fx-blob.b3{width:460px;height:460px;left:30vw;bottom:-200px;background:radial-gradient(circle,#10d3c0,transparent 70%);opacity:.18;animation:fxDrift3 36s ease-in-out infinite alternate}
.fx-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 0,transparent 72%);mask-image:radial-gradient(ellipse at 50% 20%,#000 0,transparent 72%)}
@keyframes fxDrift1{to{transform:translate(160px,110px) scale(1.15)}}
@keyframes fxDrift2{to{transform:translate(-190px,90px) scale(1.1)}}
@keyframes fxDrift3{to{transform:translate(120px,-120px) scale(1.2)}}
header,main,footer{position:relative;z-index:1}
/* progress bar */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--fx-c),var(--fx-a),var(--fx-b));box-shadow:0 0 12px #29b8f2aa}
[dir=rtl] .fx-progress{transform-origin:100% 50%}
/* glass sticky header */
header{position:sticky;top:0;z-index:40;background:#080f1ecc;-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);transition:box-shadow .3s,background .3s}
header.is-scrolled{background:#080f1ee6;box-shadow:0 10px 40px #0007}
header .nav{transition:min-height .3s}
header.is-scrolled .nav{min-height:70px}
.brand-artwork{transition:transform .3s,box-shadow .3s}
.brand-artwork:hover{transform:translateY(-1px);box-shadow:0 8px 26px #29b8f255}
/* nav underline */
nav a{position:relative;padding-block:6px}
nav a:after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--fx-c),var(--fx-a));transform:scaleX(0);transform-origin:left;transition:transform .3s}
[dir=rtl] nav a:after{transform-origin:right}
nav a:hover:after,nav a.is-active:after{transform:scaleX(1)}
nav a.is-active{color:#78d8ff}
/* hero */
.hero h1:not(.fx-in){animation:fxShine 9s linear infinite}
.hero h1{background:linear-gradient(100deg,#fff 0%,#dff4ff 35%,#6fd2ff 62%,#9aa9ff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes fxShine{to{background-position:200% center}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid #38bdf84d;border-radius:30px;background:#38bdf812;letter-spacing:1.6px}
.hero .eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fx-c);box-shadow:0 0 0 0 #16e0c488;animation:fxPulse 2.2s infinite}
@keyframes fxPulse{70%{box-shadow:0 0 0 10px #16e0c400}100%{box-shadow:0 0 0 0 #16e0c400}}
.fx-in{opacity:0;translate:0 26px;animation:fxUp .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fxUp{to{opacity:1;translate:0 0}}
.hero h1.fx-in{animation:fxUp .9s cubic-bezier(.2,.7,.2,1) forwards,fxShine 9s linear 1s infinite}
.hero-panel.fx-in{translate:0 0;scale:.96;animation:fxFade .9s cubic-bezier(.2,.7,.2,1) forwards,fxFloat 7s ease-in-out 1.4s infinite}
@keyframes fxFade{to{opacity:1;scale:1}}
/* hero panel */
.hero-panel{transform:var(--tilt,none)!important;position:relative;transition:transform .25s ease-out,box-shadow .3s;border-color:#3d5578;overflow:hidden}
.hero-panel:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 55%,#29b8f2 72%,#7d8cff 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 6s linear infinite;pointer-events:none}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fxSpin{to{--ang:360deg}}
@keyframes fxFloat{50%{translate:0 -10px}}
.hero-panel .portfolio-item{transition:transform .3s,background .3s;border-radius:10px;padding-inline:10px;margin-inline:-10px}
.hero-panel .portfolio-item:hover{transform:translateX(6px);background:#ffffff08}
[dir=rtl] .hero-panel .portfolio-item:hover{transform:translateX(-6px)}
.portfolio-item .arrow{transition:transform .3s}
.portfolio-item:hover .arrow{transform:translate(4px,-4px)}
.live-dot{animation:fxPulse 2s infinite;box-shadow:0 0 0 0 #38bdf888}
/* buttons */
.button{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.button:hover{transform:translateY(-2px)}
.primary{box-shadow:0 10px 30px #29b8f233}
.primary:hover{box-shadow:0 14px 40px #29b8f26b}
.button.primary:after{content:'';position:absolute;top:0;bottom:0;width:60px;left:-90px;background:linear-gradient(100deg,transparent,#ffffff88,transparent);transform:skewX(-20deg);transition:left .6s}
.button.primary:hover:after{left:calc(100% + 40px)}
.secondary:hover{border-color:#78d8ff;background:#29b8f212}
/* strip marquee-like shimmer */
.practice-strip{position:relative;overflow:hidden}
.practice-strip:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#29b8f20f 50%,transparent 70%);transform:translateX(-100%);animation:fxSweep 6s ease-in-out infinite;pointer-events:none}
@keyframes fxSweep{60%,100%{transform:translateX(100%)}}
/* cards with cursor spotlight + gradient border */
.card,.steps article,.request-info>div,.principles>div{position:relative}
.card{overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
.card:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#29b8f21f,transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px #0008,0 0 0 1px #29b8f240}
.card:hover:before{opacity:1}
.card.featured{box-shadow:0 0 0 1px #29b8f233,0 20px 60px #29b8f214}
.card .category{display:inline-block;padding:4px 10px;border:1px solid #38bdf833;border-radius:20px;background:#38bdf10f}
.text-link{transition:color .25s,letter-spacing .25s}
.card:hover .text-link{color:#78d8ff}
.card li{transition:transform .25s}
.card li:hover{transform:translateX(4px)}
[dir=rtl] .card li:hover{transform:translateX(-4px)}
/* section headings accent */
.section-heading h2,.approach h2,.engagement h2{position:relative}
.eyebrow{position:relative}
/* approach & steps */
.principles>div{padding:26px;border:1px solid #ffffff10;border-radius:16px;background:linear-gradient(160deg,#ffffff08,#ffffff02);transition:transform .3s,border-color .3s,background .3s}
.principles>div:hover{transform:translateY(-5px);border-color:#38bdf855;background:linear-gradient(160deg,#29b8f214,#ffffff03)}
.principles span,.steps span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#29b8f21a;border:1px solid #29b8f244;font-weight:700}
.steps article{position:relative;transition:border-color .3s,transform .3s}
.steps article:before{content:'';position:absolute;top:-1px;inset-inline-start:0;height:2px;width:0;background:linear-gradient(90deg,var(--fx-c),var(--fx-a));transition:width .8s .2s}
.steps article.is-visible:before{width:100%}
.steps article:hover{transform:translateY(-4px)}
/* contact section */
.request-section{position:relative}
.request-section input,.request-section select,.request-section textarea{transition:border-color .25s,box-shadow .25s}
.request-section input:focus,.request-section select:focus,.request-section textarea:focus{outline:0;border-color:#2767f1;box-shadow:0 0 0 4px #2767f126}
.request-section .primary{box-shadow:0 10px 26px #2767f13d}
.request-info>div{transition:transform .3s,box-shadow .3s,border-color .3s}
.request-info>div:hover{transform:translateY(-4px);border-color:#9ec1ff;box-shadow:0 18px 40px #2767f11f}
/* footer */
footer{border-image:linear-gradient(90deg,transparent,#29b8f255,transparent) 1}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.is-visible{opacity:1;transform:none}
.reveal.is-done{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s,box-shadow .35s;transition-delay:0s}
.reveal.card.is-done:hover{transform:translateY(-8px)}
.reveal.principles>div:hover,.principles>.reveal.is-done:hover{transform:translateY(-5px)}
/* back to top */
.fx-top{position:fixed;inset-inline-end:22px;bottom:22px;z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid #38bdf866;background:#0c1628e6;color:#78d8ff;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fx-top.show{opacity:1;pointer-events:auto;transform:none}
.fx-top:hover{background:#29b8f2;color:#061326}
/* custom selection & scrollbar */
::selection{background:#29b8f2;color:#061326}
html{scrollbar-color:#2b4a6b #080f1e}
@media(max-width:850px){.fx-blob{filter:blur(70px)}.fx-blob.b1{width:380px;height:380px}.fx-blob.b2{width:340px;height:340px}.fx-blob.b3{display:none}.hero-panel.fx-in{animation:fxFade .9s forwards}header .nav{min-height:auto}}
@media(max-width:540px){.principles>div{padding:20px}}
@media(prefers-reduced-motion:reduce){
 .fx-blob,.hero h1,.hero-panel,.hero-panel.fx-in,.hero-panel:before,.practice-strip:after,.live-dot,.hero .eyebrow:before{animation:none!important}
 .reveal,.fx-in{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
 .fx-bg canvas{display:none}
}

header .brand-artwork img{width:150px}header.is-scrolled .brand-artwork img{width:128px}header .brand-artwork img{transition:width .3s}
header .brand-artwork{padding:6px 12px}
@media(max-width:540px){header .brand-artwork img{width:128px}}
.card .category{align-self:flex-start}
@media(max-width:540px){header{position:relative}}