/* ==========================================================================
   ANUSHA PALLETI — PORTFOLIO
   Dark editorial creative-agency system
   ========================================================================== */

:root{
  --bg:#050505;
  --bg-2:#0B0B0F;
  --bg-3:#111118;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --text:#FFFFFF;
  --text-2:#F5F5F5;
  --muted:#9a9aa8;
  --muted-2:#6f6f7d;
  --violet:#7C3AED;
  --violet-deep:#5B21B6;
  --blue:#3B82F6;
  --violet-light:#A78BFA;
  --orange:#f59e0b;
  --font-display:'Syne',sans-serif;
  --font-body:'Manrope',sans-serif;
  --font-serif:'Instrument Serif',serif;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  overscroll-behavior-y:contain;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.001s!important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

::selection{ background:var(--violet); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--violet),var(--blue)); border-radius:20px; border:2px solid var(--bg); }

:focus-visible{
  outline:2px solid var(--violet-light);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout helpers ---------- */
.container{ width:min(1240px, calc(100% - 48px)); margin-inline:auto; }

/* ---------- Ambient background ---------- */
.bg-fixed{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; will-change:transform; }
.orb-1{ width:52vw; height:52vw; top:-24vw; right:-16vw; background:radial-gradient(circle,rgba(124,58,237,.32),transparent 65%); animation:drift 26s ease-in-out infinite alternate; }
.orb-2{ width:44vw; height:44vw; bottom:-18vw; left:-18vw; background:radial-gradient(circle,rgba(59,130,246,.22),transparent 65%); animation:drift 32s ease-in-out infinite alternate-reverse; }
.orb-3{ width:30vw; height:30vw; top:38%; left:52%; background:radial-gradient(circle,rgba(167,139,250,.14),transparent 65%); animation:drift 38s ease-in-out infinite alternate; }

@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(4vw,-3vh) scale(1.15); }
}

/* ---------- Film grain ---------- */
.noise{
  position:fixed; inset:-50%; z-index:2000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-5%,-10%); }
  30%{ transform:translate(3%,-15%); }
  50%{ transform:translate(12%,9%); }
  70%{ transform:translate(9%,4%); }
  90%{ transform:translate(-1%,7%); }
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1200;
  background:linear-gradient(90deg,var(--violet),var(--blue),var(--violet-light));
  transform-origin:left; transform:scaleX(0);
}

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:2500; pointer-events:none; border-radius:50%; opacity:0; }
.cursor-dot{ width:6px; height:6px; background:#fff; margin:-3px 0 0 -3px; }
.cursor-ring{ width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.4);
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s; }
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{ opacity:1; }
body.cursor-hover .cursor-ring{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(124,58,237,.12); border-color:rgba(167,139,250,.7); }
body.cursor-hidden .cursor-dot,body.cursor-hidden .cursor-ring{ opacity:0; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; padding:18px 30px; border-radius:999px;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .35s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{
  color:#fff; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--violet),var(--violet-deep) 55%,#48149e);
  box-shadow:0 10px 34px -12px rgba(124,58,237,.7);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg,#8b5cf6,var(--blue));
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-primary:hover{ box-shadow:0 18px 44px -12px rgba(124,58,237,.9); border-color:rgba(167,139,250,.6); }
.btn-primary:hover::before{ opacity:1; }

.btn-ghost{
  color:var(--text-2); border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:rgba(167,139,250,.55); color:#fff; box-shadow:inset 0 0 30px rgba(124,58,237,.12); background:rgba(124,58,237,.08); }

.btn-sm{ padding:13px 22px; font-size:12px; }

/* gradient text helper */
.grad-text{ color:transparent; background:linear-gradient(92deg,var(--violet-light),var(--blue) 60%,#c4b5fd); -webkit-background-clip:text; background-clip:text; }

.serif{ font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-glow{ position:absolute; width:60vw; height:60vw; max-width:720px; max-height:720px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.25),transparent 60%); filter:blur(40px); animation:loaderPulse 2.4s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ opacity:.5; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.05);} }

.loader-center{ position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; width:min(420px,80vw); }
.loader-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,4vw,34px); letter-spacing:.18em; }
.loader-bar{ width:100%; height:1px; background:var(--line-2); overflow:hidden; position:relative; }
.loader-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--violet),var(--blue)); transition:width .2s ease; }
.loader-count{ font-size:12px; letter-spacing:.3em; color:var(--muted); }
.loader-tag{ font-size:10px; letter-spacing:.42em; color:var(--muted-2); text-transform:uppercase; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1500;
  height:var(--header-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s, height .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  height:64px;
}
.site-header.hidden-nav{ transform:translateY(-100%); transition:transform .5s var(--ease); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{
  font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:.06em; color:#fff;
  transition:color .3s; flex-shrink:0;
  z-index:1601;
}
.logo-dot{ color:var(--violet-light); }
.logo:hover{ color:var(--violet-light); }

.main-nav{ display:flex; align-items:center; gap:0; margin-left:auto; }
.nav-list{ display:flex; gap:clamp(14px,2.4vw,38px); }
.nav-link{
  position:relative; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:8px 2px; transition:color .3s; overflow:hidden;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--violet-light),var(--blue));
  transform:translateX(-102%); transition:transform .45s var(--ease);
}
.nav-link:hover,.nav-link.active{ color:#fff; }
.nav-link:hover::after,.nav-link.active::after{ transform:translateX(0); }

.header-cta{ margin-left:26px; }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; gap:6px; padding:10px; z-index:1600;
}
.hamburger span{ display:block; width:26px; height:2px; background:#fff; border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s; }
.hamburger span:nth-child(2){ width:18px; margin-left:auto; }
body.menu-open .hamburger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ transform:translateY(-4px) rotate(-45deg); width:26px; }

@media (max-width:920px){
  .nav-list,.header-cta{ display:none; }
  .hamburger{ display:flex; }
  .main-nav{
    position:fixed; inset:0; z-index:1400; margin-left:0;
    flex-direction:column; justify-content:center; align-items:center; gap:44px;
    background:rgba(5,5,5,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  body.menu-open .main-nav{ opacity:1; visibility:visible; }
  body.menu-open{ overflow:hidden; }
  .nav-list{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .nav-link{ font-size:clamp(20px,6vw,30px); font-family:var(--font-display); font-weight:700; letter-spacing:.04em; text-transform:none; color:#fff; opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; }
  body.menu-open .nav-link{ opacity:1; transform:none; }
  body.menu-open .nav-link:nth-child(1){ transition-delay:.08s; }
  body.menu-open .nav-link:nth-child(2){ transition-delay:.14s; }
  body.menu-open .nav-link:nth-child(3){ transition-delay:.2s; }
  body.menu-open .nav-link:nth-child(4){ transition-delay:.26s; }
  body.menu-open .nav-link:nth-child(5){ transition-delay:.32s; }
  body.menu-open .nav-link:nth-child(6){ transition-delay:.38s; }
  .nav-mobile-cta{ opacity:0; transform:translateY(20px); transition:opacity .5s .44s var(--ease), transform .5s .44s var(--ease); }
  body.menu-open .nav-mobile-cta{ opacity:1; transform:none; }
  .nav-mobile-cta .btn{ font-size:13px; }
}
@media (min-width:921px){ .nav-mobile-cta{ display:none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) 0 90px; overflow:hidden; text-align:center;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.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:72px 72px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 30%,transparent 75%);
}
.hero-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse 60% 52% at 50% 44%,transparent 30%,rgba(5,5,5,.9) 100%); }
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(124,58,237,.22),transparent 62%);
  filter:blur(30px); transform:translate(-50%,-50%); mix-blend-mode:screen;
}
.hero-particles{ position:absolute; inset:0; overflow:hidden; }
.hero-particle{ position:absolute; border-radius:50%; background:rgba(199,180,255,.55);
  animation:particleFloat linear infinite; opacity:0; }
@keyframes particleFloat{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  12%{ opacity:.8; }
  88%{ opacity:.5; }
  100%{ transform:translateY(-110px) scale(.3); opacity:0; }
}

/* Hero frame */
.hero-frame{
  position:absolute; left:50%; top:50%; width:min(84%,1180px); height:min(76%,620px);
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.12); border-radius:4px;
  pointer-events:none;
}
.hero-frame::before,.hero-frame::after{
  content:""; position:absolute; left:9%; right:9%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent);
}
.hero-frame::before{ top:22%; }
.hero-frame::after{ bottom:22%; }
.corner{ position:absolute; width:26px; height:26px; }
.c-tl{ top:-1px; left:-1px; border-top:1px solid var(--violet-light); border-left:1px solid var(--violet-light); }
.c-tr{ top:-1px; right:-1px; border-top:1px solid var(--violet-light); border-right:1px solid var(--violet-light); }
.c-bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--violet-light); border-left:1px solid var(--violet-light); }
.c-br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--violet-light); border-right:1px solid var(--violet-light); }
.frame-dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--violet-light); box-shadow:0 0 12px 2px rgba(167,139,250,.7); }
.fd-1{ top:22%; left:5%; }
.fd-2{ top:calc(78% - 5px); right:7%; }
.fd-3{ top:46%; right:3%; animation:dotPulse 2.6s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.6);} }

/* floating labels */
.float-label{
  position:absolute; z-index:5; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); padding:8px 14px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(17,17,24,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:floaty 7s ease-in-out infinite;
  pointer-events:none; white-space:nowrap;
}
.float-label::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:8px; background:var(--violet-light); box-shadow:0 0 10px 1px rgba(167,139,250,.8); vertical-align:middle; }
.fl-1{ top:18%; left:7%; }
.fl-2{ top:29%; right:6%; animation-delay:-2s; color:var(--violet-light); border-color:rgba(167,139,250,.4); }
.fl-3{ bottom:19%; left:11%; animation-delay:-4s; color:var(--orange); border-color:rgba(245,158,11,.35); }
.fl-4{ bottom:9%; right:11%; animation-delay:-1.2s; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* Hero content */
.hero-inner{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; }
.hero-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:clamp(26px,5vh,52px); }
.badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--muted); padding:10px 18px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.03); backdrop-filter:blur(8px);
}
.badge-pulse{ width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ping 2s infinite; }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 9px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.badge-outline{ border-color:rgba(167,139,250,.45); color:var(--violet-light); }
.badge-grad{ background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(59,130,246,.2)); border-color:rgba(167,139,250,.4); color:#e9e2ff; }

.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.9rem, 11.5vw, 10rem);
  line-height:.98; letter-spacing:-.02em; text-transform:uppercase;
  text-shadow:0 0 80px rgba(124,58,237,.25);
}
.hero-line{ display:block; overflow:hidden; padding:0 .08em; }
.line-in{ display:block; will-change:transform; }
.js .line-in{ transform:translateY(115%) rotate(1.5deg); transition:transform 1.1s var(--ease); }
body.loaded .hero-line .line-in{ transform:translateY(0) rotate(0); }
.hero-line:nth-child(2) .line-in{ transition-delay:.14s; }
.hero-line:nth-child(3) .line-in{ transition-delay:.28s; }
.hero-accent{
  font-family:var(--font-serif); font-style:italic; font-weight:400; text-transform:none;
  background:linear-gradient(92deg,#c4b5fd,var(--blue) 55%,#e9d5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}

.hero-sub{
  max-width:560px; margin-top:clamp(22px,3.4vh,36px);
  color:var(--muted); font-size:clamp(14px,1.6vw,16.5px); line-height:1.75; font-weight:400;
}

.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:clamp(28px,4.4vh,46px); }

.hero-scroll{ margin-top:clamp(42px,7vh,72px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.scroll-text{ font-size:10px; letter-spacing:.4em; color:var(--muted-2); text-transform:uppercase; }
.scroll-line{ width:1px; height:54px; background:var(--line-2); position:relative; overflow:hidden; }
.scroll-line::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:linear-gradient(180deg,transparent,var(--violet-light));
  animation:scrollDown 2s var(--ease) infinite;
}
@keyframes scrollDown{
  0%{ top:-50%; } 100%{ top:120%; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0;
  background:linear-gradient(90deg,rgba(124,58,237,.05),transparent 40%,transparent 60%,rgba(59,130,246,.05));
}
.marquee-track{ display:flex; gap:44px; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.6vw,30px); letter-spacing:.04em; color:var(--text-2); text-transform:uppercase; }
.marquee-track i{ color:var(--violet-light); font-style:normal; font-size:14px; align-self:center; }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ==========================================================================
   SECTION PRIMITIVES
   ========================================================================== */
section{ position:relative; }
.about,.services,.expertise,.process,.work,.skills,.profile,.contact{
  padding:clamp(90px,11vw,150px) 0;
}
.expertise,.profile{ background:var(--bg-2); }
.work,.skills{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%); }

.sec-head{ margin-bottom:clamp(44px,6vw,72px); }
.sec-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--violet-light); margin-bottom:22px;
}
.sec-tag::before{ content:""; width:34px; height:1px; background:var(--violet-light); }

.sec-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.2rem,6.4vw,5.4rem);
  line-height:1.02; letter-spacing:-.015em; text-transform:uppercase;
}
.split-title .sl{ display:block; overflow:hidden; padding:.06em 0; }
.js .split-title .sl .sl-in{ display:inline-block; transform:translateY(112%) rotate(1.2deg); transition:transform 1s var(--ease); }
.js .split-title.is-in .sl .sl-in{ transform:translateY(0) rotate(0); }
.split-title .sl:nth-child(2) .sl-in{ transition-delay:.08s; }
.split-title .sl:nth-child(3) .sl-in{ transition-delay:.16s; }
.split-title .sl:nth-child(4) .sl-in{ transition-delay:.24s; }

/* ==========================================================================
   REVEAL SYSTEM
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0s); will-change:opacity,transform; }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.about-copy .lead{ font-size:clamp(19px,2.4vw,25px); line-height:1.55; font-weight:500; color:var(--text-2); letter-spacing:-.01em; }
.about-copy p{ margin-bottom:22px; color:var(--muted); font-size:16px; max-width:640px; }
.about-copy p.lead{ color:var(--text-2); }
.about-copy .btn{ margin-top:14px; }

.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:sticky; top:110px; }
.stat{ background:var(--bg-3); padding:32px 26px; text-align:center; display:flex; flex-direction:column; gap:6px; transition:background .3s; position:relative; }
.stat:hover{ background:#16161f; }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; background:linear-gradient(135deg,#fff,var(--violet-light)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-num.stat-word{ font-size:clamp(24px,3vw,40px); }
.stat-label{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card{
  position:relative; background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 30px 30px; display:flex; flex-direction:column; gap:18px;
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s var(--ease), background .5s;
}
.service-card::before{
  content:""; position:absolute; inset:0; z-index:-2; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(120% 80% at 20% 0%,rgba(124,58,237,.22),transparent 55%),radial-gradient(120% 80% at 90% 110%,rgba(59,130,246,.16),transparent 60%);
}
.service-card::after{
  content:""; position:absolute; left:0; top:0; right:0; height:1px; z-index:-1;
  background:linear-gradient(90deg,var(--violet),var(--blue),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(167,139,250,.4);
  box-shadow:0 24px 60px -24px rgba(124,58,237,.5), 0 0 0 1px rgba(167,139,250,.12);
}
.service-card:hover::before{ opacity:1; }
.service-card:hover::after{ transform:scaleX(1); }

.sc-top{ display:flex; align-items:center; justify-content:space-between; }
.sc-num{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--violet-light); letter-spacing:.2em; }
.sc-plus{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center;
  color:var(--muted); transition:all .4s var(--ease);
}
.sc-plus svg{ width:16px; height:16px; }
.sc-plus:hover{ background:linear-gradient(135deg,var(--violet),var(--blue)); color:#fff; border-color:transparent; transform:rotate(90deg); box-shadow:0 8px 22px -8px rgba(124,58,237,.8); }

.sc-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.9vw,23px); letter-spacing:-.01em; color:#fff; }
.sc-desc{ color:var(--muted); font-size:14.5px; line-height:1.7; flex-grow:1; }
.sc-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.sc-tags span{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted);
  padding:7px 13px; border:1px solid var(--line); border-radius:999px; transition:all .3s;
}
.service-card:hover .sc-tags span{ color:var(--text-2); border-color:var(--line-2); }

/* ==========================================================================
   EXPERTISE
   ========================================================================== */
.expert-wrap{ max-width:1040px; margin-inline:auto; }
.expert-list{ border-top:1px solid var(--line); }
.expert-item{
  position:relative; display:flex; align-items:center; gap:clamp(20px,4vw,44px);
  padding:clamp(26px,3.6vw,40px) 8px;
  border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease), color .3s, padding-left .5s var(--ease);
  overflow:hidden;
}
.expert-item::before{
  content:""; position:absolute; inset:0; opacity:0; z-index:-1; transition:opacity .5s var(--ease);
  background:radial-gradient(60% 120% at 20% 50%,rgba(124,58,237,.16),transparent 70%);
}
.expert-item:hover{ padding-left:clamp(24px,5vw,54px); color:#fff; }
.expert-item:hover::before{ opacity:1; }
.ex-num{ font-size:11px; font-weight:700; letter-spacing:.24em; color:var(--muted-2); font-family:var(--font-display); white-space:nowrap; }
.ex-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3.4vw,38px); letter-spacing:-.01em; text-transform:uppercase; transition:transform .5s var(--ease); }
.expert-item:hover .ex-name{ transform:translateX(6px); }
.ex-arrow{
  margin-left:auto; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-2); color:var(--muted);
  transition:all .45s var(--ease);
}
.ex-arrow svg{ width:20px; height:20px; }
.expert-item:hover .ex-arrow{ background:var(--violet); border-color:var(--violet); color:#fff; transform:rotate(45deg); box-shadow:0 10px 26px -10px rgba(124,58,237,.9); }

/* hovering preview */
.expert-preview{
  position:fixed; z-index:900; width:260px; height:180px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-2); box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0; pointer-events:none; transform:scale(.85) rotate(-3deg);
  transition:opacity .35s var(--ease), transform .35s var(--ease); will-change:left,top;
}
.expert-preview.show{ opacity:1; transform:scale(1) rotate(0); }
.expert-preview::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,5,5,.85));
}
.expert-preview img{ width:100%; height:100%; object-fit:cover; filter:brightness(.9); }
.expert-preview span{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff;
}
@media (max-width:920px){ .expert-preview{ display:none; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{ background:var(--bg-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.process-row::before{
  content:""; position:absolute; top:58px; left:9%; right:9%; height:1px;
  background:linear-gradient(90deg,var(--violet-deep),var(--violet-light),transparent); opacity:.5;
}
.phase{ position:relative; padding:0 8px 6px; transition:transform .4s var(--ease); }
.phase:hover{ transform:translateY(-6px); }
.phase-num{
  display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line-2); color:var(--violet-light);
  font-family:var(--font-display); font-weight:800; font-size:17px;
  box-shadow:0 0 0 10px var(--bg-3), 0 14px 30px -14px rgba(124,58,237,.5);
  transition:background .4s, color .4s, border-color .4s;
}
.phase:hover .phase-num{ background:linear-gradient(135deg,var(--violet),var(--blue)); color:#fff; border-color:transparent; }
.phase-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,24px); margin:24px 0 10px; text-transform:uppercase; }
.phase-desc{ color:var(--muted); font-size:14.5px; line-height:1.7; max-width:260px; }

/* ==========================================================================
   WORK
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:54px; }
.filter-btn{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:12px 22px; border:1px solid var(--line-2); border-radius:999px;
  transition:all .35s var(--ease); background:rgba(255,255,255,.02);
}
.filter-btn:hover{ color:#fff; border-color:rgba(167,139,250,.5); transform:translateY(-2px); }
.filter-btn.is-active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  box-shadow:0 10px 26px -10px rgba(124,58,237,.8);
}

.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.js .work-item{ opacity:0; transform:translateY(26px) scale(.97); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.work-item.is-in{ opacity:1; transform:none; }
.work-item.is-hide{ pointer-events:none; }

.work-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-3); transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.work-card:hover{
  border-color:rgba(167,139,250,.4); transform:translateY(-6px);
  box-shadow:0 26px 60px -26px rgba(124,58,237,.55);
}
.work-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.work-media img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.work-card:hover .work-media img{ transform:scale(1.08); filter:grayscale(0) contrast(1.05); }
.work-skew{
  position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:linear-gradient(200deg,rgba(124,58,237,.34),rgba(59,130,246,.18) 60%,transparent);
  mix-blend-mode:screen; pointer-events:none;
}
.work-card:hover .work-skew{ opacity:1; }
.work-body{ display:flex; flex-direction:column; gap:14px; padding:22px 24px 26px; }
.work-meta{ display:flex; justify-content:space-between; align-items:center; }
.work-cat{ font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--violet-light); }
.work-year{ font-size:11px; letter-spacing:.18em; color:var(--muted-2); }
.work-title-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.work-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(16px,1.7vw,20px); line-height:1.3; letter-spacing:-.01em; color:#fff; }
.work-arrow{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--muted); transition:all .4s var(--ease);
}
.work-arrow svg{ width:17px; height:17px; }
.work-card:hover .work-arrow{ background:var(--violet); border-color:var(--violet); color:#fff; transform:rotate(45deg); }

/* ==========================================================================
   SKILLS
   ========================================================================== */
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,7vw,96px); align-items:start; }
.skills-sub{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.34em; text-transform:uppercase; color:var(--violet-light); margin-bottom:30px; }
.skill-bars{ display:flex; flex-direction:column; gap:24px; }
.skill-bars li{ display:block; }
.bar-head{ display:flex; justify-content:space-between; margin-bottom:10px; }
.bar-head span{ font-weight:600; font-size:14.5px; color:var(--text-2); }
.bar-head b{ font-size:12.5px; color:var(--muted); font-family:var(--font-display); }
.bar{ height:7px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; position:relative; }
.bar i{
  position:absolute; left:0; top:0; bottom:0; border-radius:99px;
  background:linear-gradient(90deg,var(--violet-deep),var(--violet),var(--blue));
  box-shadow:0 0 16px rgba(124,58,237,.5);
  transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease) .2s;
}
.js .skills-col.is-in .bar i, .js .skills .reveal.is-in .bar i{ transform:scaleX(1); }

.mini-skills{ display:flex; flex-direction:column; }
.mini-skills li{
  display:flex; align-items:center; gap:14px; padding:17px 0;
  border-bottom:1px solid var(--line); font-size:15px; font-weight:500; color:var(--text-2);
  transition:padding-left .4s var(--ease), color .3s;
}
.mini-skills li:hover{ padding-left:10px; color:#fff; }
.mini-dot{ width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--violet-light),var(--blue)); box-shadow:0 0 10px rgba(124,58,237,.8); flex-shrink:0; }
.mini-val{ margin-left:auto; font-size:12px; font-family:var(--font-display); color:var(--muted-2); }

.tools-sub{ margin-top:56px; }
.tool-pills{ display:flex; flex-wrap:wrap; gap:11px; }
.tool-pill{
  position:relative; font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--text-2);
  padding:13px 22px; border:1px solid var(--line-2); border-radius:999px; background:rgba(255,255,255,.02);
  transition:all .35s var(--ease); overflow:hidden; cursor:default;
}
.tool-pill::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease);
  background:linear-gradient(120deg,rgba(124,58,237,.25),rgba(59,130,246,.18));
}
.tool-pill:hover{ transform:translateY(-3px); border-color:rgba(167,139,250,.55); color:#fff; box-shadow:0 12px 26px -14px rgba(124,58,237,.7); }
.tool-pill:hover::after{ opacity:1; }
.tool-pill span{ position:relative; z-index:1; }
.accent-pill{ color:#e9e2ff; border-color:rgba(167,139,250,.55); background:linear-gradient(120deg,rgba(124,58,237,.3),rgba(59,130,246,.2)); }

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile{ overflow:hidden; }
.profile-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(44px,7vw,100px); align-items:center; }

.profile-visual{ position:relative; aspect-ratio:5/4; border-radius:calc(var(--radius) + 4px); isolation:isolate; }
.pv-inner{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:
    radial-gradient(90% 90% at 15% 10%,rgba(124,58,237,.35),transparent 55%),
    radial-gradient(90% 90% at 90% 90%,rgba(59,130,246,.3),transparent 60%),
    linear-gradient(160deg,var(--bg-3),#0a0a10);
  border:1px solid var(--line-2);
}
.pv-inner::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 80%);
}
.pv-ring{ position:absolute; border:1px solid rgba(167,139,250,.35); border-radius:50%; }
.pv-r1{ width:70%; height:70%; top:15%; left:15%; animation:spin 22s linear infinite; }
.pv-r2{ width:46%; height:46%; top:27%; left:27%; border-style:dashed; animation:spin 16s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pv-mono{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-serif); font-style:italic; font-size:clamp(64px,9vw,110px); color:#fff;
  text-shadow:0 0 60px rgba(167,139,250,.6);
}
.pv-badge{
  position:absolute; top:16%; left:8%; font-size:9px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:#e9e2ff; padding:8px 14px; border:1px solid rgba(167,139,250,.5); border-radius:999px;
  background:rgba(124,58,237,.18); backdrop-filter:blur(6px);
}
.pv-label{
  position:absolute; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; background:rgba(5,5,5,.5);
  backdrop-filter:blur(6px); animation:floaty 7s ease-in-out infinite;
}
.pv-l1{ bottom:22%; right:6%; animation-delay:-2.4s; }
.pv-l2{ bottom:8%; left:10%; animation-delay:-4.4s; color:var(--violet-light); border-color:rgba(167,139,250,.4); }

.profile-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,5vw,4.2rem); line-height:1.05; letter-spacing:-.015em; text-transform:uppercase; margin:20px 0 26px; }
.profile-copy p{ color:var(--muted); font-size:16px; line-height:1.75; margin-bottom:20px; max-width:560px; }
.profile-copy .btn{ margin-top:12px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ text-align:center; background:
  radial-gradient(70% 60% at 50% 0%,rgba(124,58,237,.14),transparent 60%),
  var(--bg);
  overflow:hidden; }
.contact .sec-tag::before{ display:none; }
.contact .sec-tag{ display:inline-flex; margin-bottom:26px; }
.contact-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,8vw,7rem); line-height:1; letter-spacing:-.02em; text-transform:uppercase;
}
.contact-sub{ max-width:520px; margin:30px auto 44px; color:var(--muted); font-size:16px; line-height:1.75; }
.contact-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px; text-align:left; }
.contact-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:28px 26px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:rgba(17,17,24,.6); backdrop-filter:blur(10px); overflow:hidden;
  transition:all .45s var(--ease);
}
.contact-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--violet),var(--blue),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.contact-card:hover{ transform:translateY(-5px); border-color:rgba(167,139,250,.45); box-shadow:0 22px 50px -24px rgba(124,58,237,.55); }
.contact-card:hover::before{ transform:scaleX(1); }
.contact-card-in{ cursor:default; }
.cc-label{ font-size:10px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--violet-light); }
.cc-value{ font-size:15px; font-weight:600; color:#fff; word-break:break-word; }
.cc-hint{ font-size:11px; color:var(--muted-2); letter-spacing:.08em; }
.cc-socials{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.cc-social{
  font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--text-2);
  padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; transition:all .3s;
}
.cc-social:hover{ background:rgba(124,58,237,.2); border-color:rgba(167,139,250,.55); color:#fff; transform:translateY(-2px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:72px 0 34px; }
.footer-brand{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.footer-logo{ font-size:clamp(26px,4vw,40px); }
.footer-role{ font-size:13px; color:var(--muted); letter-spacing:.06em; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin:38px 0 46px; }
.footer-nav a{
  position:relative; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); padding:6px 2px; transition:color .3s; overflow:hidden;
}
.footer-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--violet-light),var(--blue));
  transform:translateX(-102%); transition:transform .45s var(--ease);
}
.footer-nav a:hover{ color:#fff; }
.footer-nav a:hover::after{ transform:translateX(0); }

.footer-socials{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:0 0 46px;
}
.footer-socials a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:11px 20px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.02); transition:all .35s var(--ease);
}
.footer-socials svg{ width:15px; height:15px; color:var(--violet-light); transition:transform .35s var(--ease); }
.footer-socials a:hover{
  color:#fff; border-color:rgba(167,139,250,.55); background:rgba(124,58,237,.12);
  transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(124,58,237,.8);
}
.footer-socials a:hover svg{ transform:rotate(8deg) scale(1.12); color:var(--violet-light); }
@media (max-width:640px){ .footer-socials{ gap:10px; } .footer-socials a{ padding:9px 15px; font-size:10px; } }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  border-top:1px solid var(--line); padding-top:26px;
  font-size:12px; color:var(--muted-2); letter-spacing:.04em;
}
.heart{ color:var(--violet-light); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top{
  position:fixed; right:26px; bottom:96px; z-index:1300; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px -12px rgba(124,58,237,.8);
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:all .45s var(--ease);
}
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -12px rgba(124,58,237,1); }

/* ==========================================================================
   CHAT BUTTON
   ========================================================================== */
.chat-btn{
  position:fixed; right:26px; bottom:26px; z-index:1300;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 32px -10px rgba(18,140,126,.7);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  animation:chatPulse 2.6s ease-in-out infinite;
}
.chat-btn svg{ width:28px; height:28px; }
.chat-btn:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 22px 46px -12px rgba(37,211,102,.85); animation-play-state:paused; }
.chat-msg{
  position:absolute; right:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--bg-3); border:1px solid var(--line-2); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:9px 15px; border-radius:999px; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.chat-btn:hover .chat-msg{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
@keyframes chatPulse{
  0%,100%{ box-shadow:0 14px 32px -10px rgba(18,140,126,.7), 0 0 0 0 rgba(37,211,102,.5); }
  55%{ box-shadow:0 14px 32px -10px rgba(18,140,126,.7), 0 0 0 14px rgba(37,211,102,0); }
}
@media (max-width:640px){
  .chat-btn{ right:16px; bottom:16px; width:50px; height:50px; }
  .chat-msg{ display:none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .process-row{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .process-row::before{ display:none; }
}

@media (max-width:920px){
  .about-grid{ grid-template-columns:1fr; }
  .about-stats{ position:static; }
  .profile-grid{ grid-template-columns:1fr; }
  .profile-visual{ max-width:520px; }
  .skills-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .services-grid,.work-grid{ grid-template-columns:1fr; }
  .process-row{ grid-template-columns:1fr; gap:34px; }
  .phase{ max-width:360px; }
  .hero-frame{ width:92%; height:84%; }
  .float-label{ font-size:9.5px; padding:6px 11px; }
  .fl-1{ top:8%; left:4%; }
  .fl-2{ top:13%; right:4%; }
  .fl-3{ bottom:14%; left:4%; }
  .fl-4{ bottom:6%; right:4%; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; }
  .to-top{ right:16px; bottom:82px; width:46px; height:46px; }
}