*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{ background:#07070c; color:#fff; font-family:'Inter',sans-serif; overflow-x:hidden; cursor:default; }
::selection{ background:#7c3aed; color:#fff; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#0a0a12; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#7c3aed,#ec4899,#fb923c); border-radius:99px; }
.font-syne{ font-family:'Syne',sans-serif; }
.grad-text{ background:linear-gradient(92deg,#a78bfa 0%,#60a5fa 25%,#f472b6 60%,#fb923c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-text-2{ background:linear-gradient(90deg,#fff 20%,#c4b5fd 55%,#f9a8d4 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glass{ background:rgba(255,255,255,0.06); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,0.11); }
.glass-strong{ background:rgba(18,18,28,0.72); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border:1px solid rgba(255,255,255,0.12); }
.grid-bg{ background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 100%); }
.noise::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.btn-primary{ position:relative; background:linear-gradient(90deg,#7c3aed,#3b82f6,#ec4899); background-size:200% 100%; transition:.4s; box-shadow:0 8px 32px -6px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 18px 48px -8px rgba(236,72,153,.55); }
.btn-ghost{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); backdrop-filter:blur(12px); transition:.35s; }
.btn-ghost:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.09); transform:translateY(-2px); }
#navbar{ transition:.45s cubic-bezier(.4,0,.2,1); }
#navbar.scrolled{ background:rgba(7,7,12,.78); backdrop-filter:blur(22px); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 10px 40px -10px rgba(0,0,0,.7); }
#navbar.scrolled .nav-inner{ padding-top:.7rem; padding-bottom:.7rem; }
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,#7c3aed,#ec4899); border-radius:99px; transition:.35s; }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--r,0deg)); } }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-12px) translateX(8px); } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 20px rgba(124,58,237,.5);} 50%{ box-shadow:0 0 45px rgba(236,72,153,.7);} }
@keyframes badgeShine{ 0%{ transform:translateX(-100%) skewX(-20deg);} 100%{ transform:translateX(250%) skewX(-20deg);} }
@keyframes ringRotate{ to{ transform:rotate(360deg);} }
.animate-floaty{ animation:floaty 5s ease-in-out infinite; }
.marquee-track{ animation:marquee 28s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
.tilt{ transform-style:preserve-3d; will-change:transform; transition:box-shadow .4s; }
.tilt-inner{ transform:translateZ(30px); }
.service-card{ position:relative; overflow:hidden; transition:.5s cubic-bezier(.2,.8,.2,1); }
.service-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,.18), transparent 45%); opacity:0; transition:.4s; pointer-events:none; }
.service-card:hover::before{ opacity:1; }
.service-card:hover{ border-color:rgba(167,139,250,.45); box-shadow:0 30px 70px -20px rgba(124,58,237,.45); }
.service-card:hover .svc-icon-wrap{ transform:translateZ(50px) scale(1.08) rotate(-6deg); }
.svc-icon-wrap{ transition:.55s cubic-bezier(.34,1.56,.64,1); transform-style:preserve-3d; }
.cube3d{ width:54px; height:54px; position:relative; transform-style:preserve-3d; transform:rotateX(-20deg) rotateY(30deg); animation:cubeSpin 7s linear infinite; }
@keyframes cubeSpin{ 0%{ transform:rotateX(-20deg) rotateY(0);} 100%{ transform:rotateX(-20deg) rotateY(360deg);} }
.cube3d div{ position:absolute; inset:0; border:1px solid rgba(255,255,255,.4); border-radius:12px; }
.work-card img{ transition:1s cubic-bezier(.2,.8,.2,1); }
.work-card:hover img{ transform:scale(1.08); }
.work-card .work-overlay{ opacity:0; transition:.5s; }
.work-card:hover .work-overlay{ opacity:1; }
.masonry{ columns:1; column-gap:1.25rem; }
@media(min-width:640px){ .masonry{ columns:2; } }
@media(min-width:1024px){ .masonry{ columns:3; } }
.masonry > div{ break-inside:avoid; margin-bottom:1.25rem; }
.filter-btn.active{ background:linear-gradient(90deg,#7c3aed,#ec4899); border-color:transparent; color:#fff; }
.h-panel{ scroll-snap-align:center; }
.ba-handle{ cursor:ew-resize; }
.timeline-line{ background:linear-gradient(180deg,#7c3aed,#3b82f6,#ec4899,#fb923c); }
.timeline-dot{ box-shadow:0 0 0 6px rgba(124,58,237,.15), 0 0 30px rgba(124,58,237,.6); }
#preloader{ transition:opacity .7s, visibility .7s; }
.reveal{ opacity:0; transform:translateY(36px); }
.chip{ font-size:11px; letter-spacing:.14em; }
input,textarea,select{ outline:none; }
.field{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:.3s; }
.field:focus{ border-color:#8b5cf6; background:rgba(124,58,237,.08); box-shadow:0 0 0 4px rgba(124,58,237,.15); }
.palette-dot{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.7); }
.tool-float{ box-shadow:0 20px 50px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
.text-stroke{ -webkit-text-stroke:1px rgba(255,255,255,.22); color:transparent; }
#progressBar{ transform-origin:left; }
.toast{ transition:.5s cubic-bezier(.34,1.56,.64,1); }
.lightbox-open{ overflow:hidden; }
.dashed-connector{ background-image:linear-gradient(90deg,rgba(255,255,255,.25) 50%, transparent 50%); background-size:14px 2px; height:2px; }
@media(max-width:1023px){ .h-track{ transform:none !important; } }