/* ═══════════════════════════════════════
   DESIGN TOKENS — sandesign-inspired
   Purple #6c4ff6 · Sky #5cd0f5 · Yellow #f5c518 · Pink #f06090
═══════════════════════════════════════ */
:root{
  --bg:#f5f4fe;
  --bg2:#ebe9fd;
  --white:#ffffff;
  --purple:#6c4ff6;
  --purple-d:#4b32d6;
  --purple-lt:#ede9ff;
  --yellow:#f5c518;
  --yellow-lt:#fff9db;
  --sky:#5cd0f5;
  --sky-lt:#e0f7fe;
  --pink:#f06090;
  --pink-lt:#ffe8f0;
  --text:#1b1340;
  --muted:#7a6fa8;
  --border:rgba(108,79,246,.12);
  --border2:rgba(108,79,246,.22);
  --sh:0 4px 28px rgba(108,79,246,.09);
  --sh-lg:0 20px 60px rgba(108,79,246,.16);
  --font-d:'Syne',sans-serif;
  --font-b:'Plus Jakarta Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-weight:400;overflow-x:hidden;cursor:none}

/* dot grid */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(108,79,246,.065) 1.5px,transparent 0);
  background-size:28px 28px}

/* ── BLOBS ── */
.blob{position:fixed;border-radius:50%;filter:blur(85px);opacity:.24;pointer-events:none;z-index:0;
  animation:blobdrift 22s ease-in-out infinite alternate}
.blob-1{width:680px;height:680px;background:#c3b6fe;top:-230px;left:-190px}
.blob-2{width:520px;height:520px;background:#a8e8fa;top:36%;right:-160px;animation-delay:-8s}
.blob-3{width:440px;height:440px;background:#fde68a;bottom:-90px;left:26%;animation-delay:-16s}
@keyframes blobdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(36px,28px) scale(1.08)}}

/* ══ LOADER ══ */
#loader{position:fixed;inset:0;z-index:9999;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s ease}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.ld-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.ld-logo{font-family:var(--font-d);font-size:2.3rem;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--purple),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ld-bar{width:180px;height:3px;background:var(--bg2);border-radius:3px;overflow:hidden}
.ld-fill{height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--purple),var(--sky),var(--yellow));
  animation:ldfill 1.7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ldfill{from{width:0}to{width:100%}}

/* ══ CURSOR ══ */
#cursor{width:10px;height:10px;background:var(--purple);border-radius:50%;
  position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;mix-blend-mode:multiply}
#cursor-ring{width:34px;height:34px;border:2px solid rgba(108,79,246,.35);border-radius:50%;
  position:fixed;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);
  transition:width .25s,height .25s,border-color .25s}
.cur-big{width:54px!important;height:54px!important;border-color:rgba(108,79,246,.18)!important}

/* ══ NAV ══ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 48px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(245,244,254,.72);backdrop-filter:blur(22px);
  border-bottom:1px solid #e2e2e2;
  transition:padding .3s,border-color .3s,background .3s}
nav.scrolled{border-color:var(--border2);padding:12px 48px;background:rgba(245,244,254,.95)}
.nav-logo{font-family:var(--font-d);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;
  text-decoration:none;
  background:linear-gradient(120deg,var(--purple),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:38px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.875rem;font-weight:500;
  letter-spacing:.03em;position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--sky));transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{padding:9px 24px!important;border-radius:100px!important;
  background:var(--purple)!important;color:#fff!important;font-size:.8rem!important;font-weight:600!important;
  box-shadow:0 4px 20px rgba(108,79,246,.35)!important;
  transition:background .3s,transform .2s,box-shadow .3s!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--purple-d)!important;transform:translateY(-2px)!important;
  box-shadow:0 8px 28px rgba(108,79,246,.48)!important}

/* hamburger */
.ham{display:none;flex-direction:column;gap:5px;cursor:none;background:none;border:none;padding:4px}
.ham span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{display:none;position:fixed;inset:0;top:66px;z-index:99;
  background:rgba(245,244,254,.97);backdrop-filter:blur(30px);
  flex-direction:column;align-items:center;justify-content:center;gap:40px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.mob-menu.open{transform:translateY(0)}
.mob-menu a{font-family:var(--font-d);font-size:2.6rem;font-weight:800;color:var(--text);
  text-decoration:none;transition:color .2s}
.mob-menu a:hover{color:var(--purple)}

/* ── shared ── */
section{position:relative;z-index:2}
.container{max-width:1200px;margin:0 auto;padding:0 48px}
.sec-div{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);
  margin:0 48px;position:relative;z-index:2}
.sec-lbl{font-size:.72rem;color:var(--sky);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sec-lbl::before{content:'';display:block;width:26px;height:2px;border-radius:2px;background:var(--sky)}
.sec-h2{font-family:var(--font-d);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;margin-bottom:56px}
.sec-h2 .dim{color:var(--muted)}

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero{min-height:100vh;display:flex;align-items:center;padding-top:90px;padding-bottom:60px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

/* left */
.hero-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:100px;
  background:var(--purple-lt);border:1.5px solid rgba(108,79,246,.28);
  font-size:.72rem;color:var(--purple);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  margin:28px 0;box-shadow:0 2px 14px rgba(108,79,246,.12);
  animation:fadeUp .7s 1.8s ease both}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.22);animation:pulsedot 2s ease infinite}
@keyframes pulsedot{0%,100%{transform:scale(1)}50%{transform:scale(.62)}}

.hero-h1{font-family:var(--font-d);font-size:clamp(2.5rem,5vw,4.4rem);font-weight:800;
  line-height:1.06;letter-spacing:-.03em;margin-bottom:22px}
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .word{display:inline-block;transform:translateY(110%);
  animation:slideUp .72s cubic-bezier(.4,0,.2,1) both}
.hero-h1 .word:nth-child(1){animation-delay:.7s}
.hero-h1 .word:nth-child(2){animation-delay:.86s}
.hero-h1 .word:nth-child(3){animation-delay:1.02s}
.hero-h1 .word:nth-child(4){animation-delay:1.18s}
@keyframes slideUp{to{transform:translateY(0)}}
.hw-p{background:linear-gradient(135deg,var(--purple),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hw-y{background:linear-gradient(135deg,#ca8a04,var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.hero-sub{color:var(--muted);font-size:1.04rem;line-height:1.78;max-width:440px;margin-bottom:38px;
  animation:fadeUp .8s 1.5s ease both}
.hero-sub strong{color:var(--text);font-weight:600}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .8s 1.7s ease both}
.btn-pri{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:100px;
  background:var(--purple);color:#fff;font-size:.875rem;font-weight:600;
  text-decoration:none;border:none;cursor:none;
  box-shadow:0 6px 28px rgba(108,79,246,.38);
  position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.btn-pri::before{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .55s ease}
.btn-pri:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(108,79,246,.5)}
.btn-pri:hover::before{transform:translateX(120%)}
.btn-sec{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:100px;
  border:2px solid var(--border2);background:var(--white);
  color:var(--text);font-size:.875rem;font-weight:500;text-decoration:none;cursor:none;
  box-shadow:var(--sh);transition:border-color .3s,background .3s,transform .22s,box-shadow .22s}
.btn-sec:hover{border-color:var(--purple);background:var(--purple-lt);transform:translateY(-2px);box-shadow:var(--sh-lg)}

/* typing row */
.hero-type{margin-top:40px;font-size:.78rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;
  animation:fadeUp .8s 1.9s ease both}
.type-word{color:var(--purple);font-weight:700;display:inline-block;min-width:130px}
.type-cur{animation:tblink 1s step-end infinite;color:var(--sky)}
@keyframes tblink{50%{opacity:0}}

/* badges */
.badge-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;animation:fadeUp .8s 2.1s ease both}
.badge{padding:6px 14px;border-radius:100px;background:var(--white);border:1.5px solid var(--border2);
  font-size:.72rem;color:var(--muted);font-weight:500;box-shadow:var(--sh);cursor:none;
  transition:border-color .25s,color .25s,background .25s,transform .25s,box-shadow .25s;
  animation:badgefloat 4.5s ease-in-out infinite}
.badge:nth-child(2){animation-delay:.5s}.badge:nth-child(3){animation-delay:1s}
.badge:nth-child(4){animation-delay:1.5s}.badge:nth-child(5){animation-delay:2s}
.badge:nth-child(6){animation-delay:2.5s}.badge:nth-child(7){animation-delay:3s}
.badge:nth-child(8){animation-delay:3.5s}
.badge:hover{border-color:var(--sky);color:var(--sky);background:var(--sky-lt);
  transform:translateY(-5px) scale(1.05);box-shadow:0 8px 24px rgba(92,208,245,.25)}
@keyframes badgefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── HERO RIGHT — PHOTO ── */
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;
  height:580px;animation:fadeUp 1s 1.2s ease both}

/* deco rings */
.deco-ring{position:absolute;border-radius:50%;border:2px dashed;
  animation:spinring 28s linear infinite}
.deco-ring-1{width:490px;height:490px;border-color:rgba(108,79,246,.16)}
.deco-ring-2{width:390px;height:390px;border-color:rgba(92,208,245,.2);
  animation-direction:reverse;animation-duration:20s}
@keyframes spinring{to{transform:rotate(360deg)}}

/* morphing blobs */
.deco-blob-y{position:absolute;width:180px;height:180px;
  background:linear-gradient(135deg,var(--yellow),#fde068);
  border-radius:60% 40% 55% 45%/50% 60% 40% 50%;
  top:-28px;right:-10px;opacity:.6;filter:blur(1px);
  animation:morphb 8s ease-in-out infinite alternate;z-index:0}
.deco-blob-s{position:absolute;width:130px;height:130px;
  background:linear-gradient(135deg,var(--sky),#38bdf8);
  border-radius:40% 60% 45% 55%/55% 45% 60% 40%;
  bottom:30px;left:-24px;opacity:.55;filter:blur(1px);
  animation:morphb 10s ease-in-out infinite alternate-reverse;z-index:0}
@keyframes morphb{
  0%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%}
  50%{border-radius:40% 60% 35% 65%/60% 40% 55% 45%}
  100%{border-radius:55% 45% 65% 35%/45% 55% 40% 60%}}

/* THE PHOTO CARD */
.photo-card{position:relative;z-index:2;width:340px;height:460px;border-radius:32px;overflow:hidden;
  border:3px solid rgba(255,255,255,.95);
  box-shadow:var(--sh-lg),0 0 0 1.5px var(--border2);background:var(--bg2);
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;
  transform-style:preserve-3d}
.photo-card:hover{box-shadow:0 32px 80px rgba(108,79,246,.26),0 0 0 2px var(--purple)}

.photo-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1),filter .4s}
.photo-card:hover img{transform:scale(1.05);filter:brightness(1.04) saturate(1.1)}

/* shine sweep */
.photo-card::before{content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.26) 50%,transparent 64%);
  transform:translateX(-120%);transition:transform .65s ease}
.photo-card:hover::before{transform:translateX(120%)}

/* bottom gradient on photo */
.photo-card::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(108,79,246,.32) 0%,transparent 52%);pointer-events:none}

/* name chip inside card */
.pnc{position:absolute;bottom:18px;left:14px;right:14px;z-index:4;
  background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  border-radius:16px;padding:13px 17px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.98)}
.pnc-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--sky));
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;font-family:var(--font-d)}
.pnc-role{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.pnc-name{font-size:1.05rem;font-weight:700;color:var(--text);font-family:var(--font-d)}

/* floating stat chips */
.sc{position:absolute;z-index:5;background:var(--white);border:2px solid var(--border2);
  border-radius:18px;padding:12px 18px;box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:10px;animation:chipfloat 6s ease-in-out infinite}
.sc-ico{font-size:1.3rem;line-height:1}
.sc-num{font-family:var(--font-d);font-size:1.25rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--purple),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sc-lbl{font-size:.68rem;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.sc-1{top:32px;left:-85px;animation-delay:0s}
.sc-2{bottom:100px;right:-85px;animation-delay:-2.5s}
.sc-3{top:44%;left:-95px;animation-delay:-4.5s}
@keyframes chipfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ════════════════════════
   ABOUT
════════════════════════ */
#about{padding:140px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-bio{font-size:1.02rem;line-height:1.82;color:var(--muted);max-width:440px}
.about-bio strong{color:var(--text);font-weight:600}
.about-quote{margin-top:30px;padding:20px 24px;background:var(--purple-lt);
  border-left:4px solid var(--purple);border-radius:0 16px 16px 0;
  font-size:.96rem;color:var(--purple-d);font-weight:500;line-height:1.62;font-style:italic}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.stat-card{background:var(--white);border:2px solid var(--border);border-radius:22px;
  padding:26px 15px;box-shadow:var(--sh);
  transition:border-color .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(108,79,246,.07),transparent);opacity:0;transition:opacity .3s}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.stat-card:hover::before{opacity:1}
.stat-card:nth-child(1):hover{border-color:var(--purple)}
.stat-card:nth-child(2):hover{border-color:var(--sky)}
.stat-card:nth-child(3):hover{border-color:var(--yellow)}
.snum{font-family:var(--font-d);font-size:2.7rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--purple),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-card:nth-child(2) .snum{background:linear-gradient(135deg,var(--sky),#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-card:nth-child(3) .snum{background:linear-gradient(135deg,#d97706,var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.slbl{font-size:.78rem;color:var(--muted);margin-top:7px;letter-spacing:.04em}

.tools-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.tool-tag{padding:7px 16px;border-radius:100px;background:var(--white);border:1.5px solid var(--border2);
  font-size:.78rem;color:var(--muted);font-weight:500;box-shadow:var(--sh);
  transition:all .25s}
.tool-tag:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-lt);transform:translateY(-2px)}

.skills-col{display:flex;flex-direction:column;gap:22px}
.sk-head{display:flex;justify-content:space-between;margin-bottom:9px}
.sk-name{font-size:.83rem;color:var(--text);font-weight:500}
.sk-pct{font-size:.75rem;color:var(--muted)}
.sk-track{height:5px;background:var(--bg2);border-radius:5px;position:relative}
.sk-fill{height:100%;border-radius:5px;width:0;transition:width 1.5s cubic-bezier(.4,0,.2,1);position:relative}
.sk-fill::after{content:'';position:absolute;right:-1px;top:-4px;width:13px;height:13px;
  border-radius:50%;border:3px solid var(--white)}
.sf1{background:linear-gradient(90deg,var(--purple),var(--sky))}.sf1::after{background:var(--sky);box-shadow:0 0 10px rgba(92,208,245,.6)}
.sf2{background:linear-gradient(90deg,#d97706,var(--yellow))}.sf2::after{background:var(--yellow);box-shadow:0 0 10px rgba(245,197,24,.6)}
.sf3{background:linear-gradient(90deg,var(--pink),#f472b6)}.sf3::after{background:var(--pink);box-shadow:0 0 10px rgba(240,96,144,.6)}
.sf4{background:linear-gradient(90deg,var(--sky),#0ea5e9)}.sf4::after{background:var(--sky);box-shadow:0 0 10px rgba(92,208,245,.5)}
.sf5{background:linear-gradient(90deg,var(--purple),var(--pink))}.sf5::after{background:var(--pink);box-shadow:0 0 10px rgba(240,96,144,.5)}
.sf6{background:linear-gradient(90deg,#16a34a,#4ade80)}.sf6::after{background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,.6)}
.sf7{background:linear-gradient(90deg,#d97706,var(--pink))}.sf7::after{background:var(--pink)}
.sf8{background:linear-gradient(90deg,var(--sky),var(--purple))}.sf8::after{background:var(--purple);box-shadow:0 0 10px rgba(108,79,246,.6)}

/* ════════════════════════
   PORTFOLIO
════════════════════════ */
#portfolio{padding:140px 0}
.port-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:16px}
.case-card{background:var(--white);border:2px solid var(--border);border-radius:28px;overflow:hidden;
  box-shadow:var(--sh);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .4s;
  position:relative;cursor:none;transform-style:preserve-3d}
.case-card:hover{transform:translateY(-8px) rotateX(1.5deg);box-shadow:var(--sh-lg);border-color:rgba(108,79,246,.35)}
.case-card:hover .cc-vi{transform:scale(1.04)}
.case-card:hover .cc-ov{opacity:1}

.cc-visual{height:240px;overflow:hidden;position:relative}
.cc-vi{width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.cc-vi img {
    width: 100%;
    object-fit: cover;
    object-position: center;
	height:100%;
}
.cc-ov{position:absolute;inset:0;z-index:2;
  background:linear-gradient(135deg,rgba(108,79,246,.28),rgba(92,208,245,.18));
  opacity:0;transition:opacity .4s;display:flex;align-items:center;justify-content:center}
.cc-eye{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.15)}

.cc-body{padding:30px 32px 32px}
.cc-tag{font-size:.67rem;color:var(--sky);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.cc-title{font-family:var(--font-d);font-size:1.55rem;font-weight:800;letter-spacing:-.025em;margin-bottom:12px;color:var(--text)}
.cc-desc{font-size:.875rem;color:var(--muted);line-height:1.72;margin-bottom:22px}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.cc-chip{padding:4px 13px;border-radius:100px;font-size:.7rem;font-weight:600}
.chip-p{background:var(--purple-lt);border:1px solid rgba(108,79,246,.25);color:var(--purple)}
.chip-s{background:var(--sky-lt);border:1px solid rgba(92,208,245,.3);color:#0284c7}
.chip-y{background:var(--yellow-lt);border:1px solid rgba(245,197,24,.35);color:#92700a}
.chip-k{background:var(--pink-lt);border:1px solid rgba(240,96,144,.25);color:var(--pink)}
.cc-link{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;color:var(--purple);
  text-decoration:none;font-weight:600;border:none;border-bottom:2px solid var(--purple-lt);padding-bottom:3px;
  background:none;font-family:var(--font-b);cursor:none;transition:border-color .3s,color .3s}
.cc-link:hover{color:var(--sky);border-color:var(--sky)}
.cc-link svg{transition:transform .3s}
.cc-link:hover svg{transform:translate(4px,-4px)}
.ripple{position:absolute;border-radius:50%;background:rgba(108,79,246,.12);
  transform:scale(0);animation:ripout .65s linear;pointer-events:none}
@keyframes ripout{to{transform:scale(4);opacity:0}}


/* ── mockups & prototypes sub-section ── */
.mock-sub{background:var(--white);border:2px solid var(--border);border-radius:28px;
  box-shadow:var(--sh);padding:30px 32px 32px;display:flex;flex-direction:column;height:100%}
.mock-head{margin-bottom:18px;flex:0 0 auto}
.mock-h3{font-family:var(--font-d);font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.mock-grid{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.mock-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;flex:1 1 0;
  background:var(--white);border:1.5px solid var(--border);text-decoration:none;color:var(--text);
  font-size:.82rem;font-weight:500;cursor:none;transition:border-color .25s,transform .22s,box-shadow .25s,background .25s}
.mock-item:hover{border-color:var(--purple);background:var(--purple-lt);transform:translateY(-2px);box-shadow:var(--sh)}
.mock-ico{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.mock-name{flex:1;line-height:1.4}
.mock-arrow{flex-shrink:0;color:var(--muted);transition:transform .3s,color .3s}
.mock-item:hover .mock-arrow{color:var(--purple);transform:translate(3px,-3px)}

@media(max-width:767px){
  .mock-sub{height:auto}
  .mock-item{flex:none}
  div#cursor, div#cursor-ring {display: none;}
}

/* ════════════════════════
   CASE STUDY MODAL
════════════════════════ */
.cm-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;background:rgba(27,19,64,.55);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;cursor:auto}
.cm-overlay.open{opacity:1;visibility:visible}
.cm-box{position:relative;width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:var(--white);border-radius:28px;box-shadow:var(--sh-lg);
  transform:translateY(24px) scale(.97);transition:transform .4s cubic-bezier(.4,0,.2,1);
  scrollbar-width:thin;scrollbar-color:var(--purple-lt) transparent}
.cm-overlay.open .cm-box{transform:translateY(0) scale(1)}
.cm-box::-webkit-scrollbar{width:7px}
.cm-box::-webkit-scrollbar-thumb{background:var(--purple-lt);border-radius:10px}
.cm-close{position:sticky;top:18px;left:100%;margin-right:18px;transform:translateX(0);
  width:38px;height:38px;border-radius:50%;border:none;background:rgba(27,19,64,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:none;z-index:5;flex-shrink:0;
  transition:background .25s,transform .25s}
.cm-close:hover{background:var(--purple);transform:rotate(90deg)}
.cm-panel{display:none}
.cm-panel.active{display:block;margin-top:-38px}
.cm-hero{position:relative;height:260px;overflow:hidden;border-radius:28px 28px 0 0}
.cm-hero img{width:100%;height:100%;object-fit:cover;display:block}
.cm-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,19,64,.05) 40%,rgba(27,19,64,.55) 100%)}
.cm-hero-badge{position:absolute;left:24px;bottom:18px;padding:6px 16px;border-radius:100px;
  background:rgba(255,255,255,.92);color:var(--purple);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--sh)}
.cm-body{padding:32px 36px 40px}
.cm-title{font-family:var(--font-d);font-size:1.9rem;font-weight:800;letter-spacing:-.025em;color:var(--text)}
.cm-client{font-size:.83rem;color:var(--muted);margin-top:6px;margin-bottom:22px;font-weight:500}
.cm-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.cm-meta-item{background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;
  font-size:.82rem;color:var(--text);font-weight:600;line-height:1.4}
.cm-meta-item span{display:block;font-size:.65rem;color:var(--sky);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin-bottom:4px}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cm-sec{margin-bottom:22px}
.cm-sec h4{font-family:var(--font-d);font-size:1.02rem;font-weight:700;color:var(--purple);margin-bottom:8px}
.cm-sec p{font-size:.9rem;color:var(--muted);line-height:1.78}
.cm-visit{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:13px 28px;border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--sky));color:#fff;font-size:.85rem;font-weight:600;
  text-decoration:none;box-shadow:0 6px 24px rgba(108,79,246,.35);transition:transform .22s,box-shadow .22s}
.cm-visit:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(108,79,246,.46)}
.cm-visit svg{transition:transform .3s}
.cm-visit:hover svg{transform:translate(3px,-3px)}

@media(max-width:600px){
  .cm-body{padding:24px 22px 32px}
  .cm-hero{height:190px}
  .cm-meta{grid-template-columns:1fr}
  .cm-title{font-size:1.5rem}
}

/* ════════════════════════
   CONTACT
════════════════════════ */

/* ── Contact form: validation / submit states ── */
        .fg{position:relative;}
		span.fld-err {
    display: none;
}
       .fg.has-error span.fld-err {
            display:block;
            min-height:18px;
            color:#ef4444;
            font-size:.8rem;
            margin-top:4px;
            font-family:'Plus Jakarta Sans',sans-serif;
        }
        .fg.has-error input,
        .fg.has-error textarea{
            border-color:#ef4444 !important;
            box-shadow:0 0 0 2px rgba(239,68,68,.15);
        }
        .form-alert{
            display:none;
            padding:12px 16px;
            border-radius:10px;
            font-size:.9rem;
            font-family:'Plus Jakarta Sans',sans-serif;
            margin-bottom:14px;
        }
        .form-alert.show{display:block;}
        .form-alert.success{
            background:rgba(22,163,74,.12);
            border:1px solid rgba(22,163,74,.35);
            color:#16a34a;
        }
        .form-alert.error{
            background:rgba(239,68,68,.12);
            border:1px solid rgba(239,68,68,.35);
            color:#ef4444;
        }
        .btn-send{position:relative;}
        .btn-send[disabled]{opacity:.7;cursor:not-allowed;}
        .btn-send .spinner{
            width:14px;height:14px;
            border:2px solid rgba(255,255,255,.4);
            border-top-color:#fff;
            border-radius:50%;
            display:inline-block;
            margin-right:8px;
            vertical-align:middle;
            animation:cform-spin .7s linear infinite;
        }
        @keyframes cform-spin{to{transform:rotate(360deg);}}

        .thanks-box{
            display:none;
            text-align:center;
            padding:48px 24px;
        }
        .thanks-box.show{display:block;}
        .thanks-ico{
            width:60px;height:60px;
            margin:0 auto 16px;
            border-radius:50%;
            background:rgba(22,163,74,.12);
            color:#16a34a;
            font-size:28px;
            display:flex;align-items:center;justify-content:center;
        }
        .thanks-box h3{
            font-family:'Syne',sans-serif;
            font-size:1.5rem;
            margin-bottom:8px;
        }
        .thanks-box p{
            font-family:'Plus Jakarta Sans',sans-serif;
            opacity:.75;
            margin-bottom:20px;
        }

#contact{padding:140px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.c-tagline{font-family:var(--font-d);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.2;margin-bottom:18px}
.c-grad{background:linear-gradient(135deg,var(--purple),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.c-sub{font-size:.97rem;color:var(--muted);line-height:1.75;margin-bottom:44px}
.soc-links{display:flex;gap:12px;flex-wrap:wrap}
.soc-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;
  border:2px solid var(--border2);background:var(--white);color:var(--muted);font-size:.8rem;
  font-weight:500;text-decoration:none;box-shadow:var(--sh);
  transition:border-color .3s,color .3s,background .3s,transform .22s,box-shadow .22s}
.soc-link:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt);transform:translateY(-3px);box-shadow:var(--sh-lg)}
.soc-link svg{width:15px;height:15px;flex-shrink:0}
.cform{display:flex;flex-direction:column;gap:20px}
.fg{position:relative}
.fg input,.fg textarea{width:100%;padding:17px 20px;background:var(--white);border:2px solid var(--border2);
  border-radius:16px;color:var(--text);font-family:var(--font-b);font-size:.9rem;
  outline:none;resize:none;box-shadow:var(--sh);transition:border-color .3s,box-shadow .3s}
.fg input:focus,.fg textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(108,79,246,.1),var(--sh)}
.fg label{position:absolute;left:20px;top:17px;font-size:.875rem;color:var(--muted);transition:.25s cubic-bezier(.4,0,.2,1);pointer-events:none}
.fg input:focus~label,.fg input:not(:placeholder-shown)~label,
.fg textarea:focus~label,.fg textarea:not(:placeholder-shown)~label{
  top:-11px;left:14px;font-size:.7rem;color:var(--purple);background:var(--bg);padding:0 6px;font-weight:600}
.fg input::placeholder,.fg textarea::placeholder{color:transparent}
.fg textarea{min-height:130px}
.btn-send{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:100px;
  background:linear-gradient(135deg,var(--purple),var(--sky));color:#fff;font-size:.875rem;font-weight:600;
  border:none;cursor:none;align-self:flex-start;
  box-shadow:0 6px 28px rgba(108,79,246,.38);position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s}
.btn-send::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.18);
  transform:translateX(-120%);transition:transform .55s ease}
.btn-send:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(108,79,246,.5)}
.btn-send:hover::before{transform:translateX(120%)}

/* ════════════════════════
   FOOTER
════════════════════════ */
footer{padding:20px 0;border-top:2px solid var(--border2);background:var(--white);position:relative;z-index:2}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot-copy{font-size:.8rem;color:var(--muted);text-align: center;display: block;width: 100%;}
.back-top{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);text-decoration:none;
  border:2px solid var(--border2);padding:8px 18px;border-radius:100px;background:var(--white);
  box-shadow:var(--sh);transition:border-color .3s,color .3s,transform .22s;cursor:none;position: fixed;right: 25px;bottom: 25px;z-index: 3; width: auto;height: 50px;}
.back-top:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px)}

/* ════════════════════════
   REVEAL
════════════════════════ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1)}
.reveal.vis{opacity:1;transform:none}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media(max-width:960px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .port-grid{grid-template-columns:1fr}
  .hero-right {
        height: 400px;
        order: -1;
        MAX-WIDTH: 277PX;
        MARGIN: 0 AUTO;
    }
  .photo-card{width:280px;height:370px}

  .deco-ring-1,.deco-ring-2{width:320px;height:320px}
  nav{padding:14px 24px}
  .container{padding:0 24px}
  .nav-links{display:none}.ham{display:flex}.mob-menu{display:flex}
  .stats-row{grid-template-columns:repeat(3,1fr)}
  #about,#portfolio,#contact{padding:88px 0}
}
@media(max-width:520px){
  .stats-row{grid-template-columns:1fr 1fr}
  .hero-btns{flex-direction:column}
  .photo-card{width:300px;height:370px}
  .deco-blob-y,.deco-blob-s{display:none}
  .hero-h1 {font-size: clamp(2.3rem,5vw,4.4rem);
  .hero-right {overflow:hidden;}
  .hero-h1 {font-size: 2.2rem;}
}
@media(max-width:480px){
	.cc-visual {height: auto;}
	.ld-logo{font-size:2rem;}
  .hero-h1 {font-size: 2rem;}
  .sc {max-width: 100px;width: 100%;flex-wrap: wrap; justify-content: center;text-align: center;}
  .sc.sc-1, .sc.sc-3 {left: -50px;}
.sc.sc-2{right: -50px; bottom: 160px;}
}

@media(max-width:480px){
	  .sc.sc-1, .sc.sc-3 {left: -30px;}
.sc.sc-2{right: -30px; bottom: 140px;}
}