/* ============================================================
   LALƏ RƏSULZADƏ — PORTFOLIO  (v2: axıcı layout, ana səhifə + portfolio)
   Ağ kağız, elektrik mavi (#004BFC) pill-lər, Inter Tight + Inter.
   Bütün ölçülər ekranə görə dəyişir (vw/clamp) — sabit max-width yoxdur.
   ============================================================ */

:root{
  --blue:#004BFC; --blue-deep:#0038C8;
  --ink:#0A0A0A; --ink2:#5C5C5A;
  --paper:#FFFFFF; --paper2:#F2F2F0; --line:#D9D9D6; --tint:#EEF1FF; --yellow:#F6D65A;
  --nav:64px; --r:clamp(24px,3vw,48px); --r2:clamp(16px,1.6vw,24px);
  --gutter:clamp(20px,3.6vw,84px); --gap:clamp(16px,1.6vw,28px);
  --ease:cubic-bezier(.76,0,.24,1); --ease2:cubic-bezier(.2,.8,.2,1);
  --display:"Inter Tight","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-title:clamp(40px,6.2vw,132px);
  --fs-body:clamp(15px,1.05vw,19px);
}
@media (max-width:720px){ :root{ --nav:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; }
html.lock{ overflow:hidden; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"tnum" 1;
}
body.locked{ position:fixed; width:100%; overflow:hidden; }
html.has-cursor, html.has-cursor a, html.has-cursor button{ cursor:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.92; }
p,dl,dt,dd{ margin:0; }
[hidden]{ display:none !important; }

.wrap{ width:100%; padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left)); }
.cap{ font-size:clamp(12px,.85vw,15px); line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); font-weight:500; }
.cap--rule{ border-top:1px solid var(--line); padding-top:14px; margin-top:clamp(32px,4vw,64px); }
.cap--onblue{ color:rgba(255,255,255,.85); }
.arr{ font-family:var(--body); font-weight:500; }
section[id], #top{ scroll-margin-top:var(--nav); }
.sec{ padding:clamp(56px,7vw,120px) 0; }
.sec--grey{ background:var(--paper2); }
.sec__title{ font-size:var(--fs-title); margin-top:12px; text-wrap:balance; }
.sec__head{ padding-top:clamp(32px,4vw,64px); padding-bottom:clamp(24px,3vw,48px); }
.sec__head .sec__title{ display:flex; align-items:baseline; gap:.3em; flex-wrap:wrap; }
.sec__count{ font-family:var(--body); font-weight:500; font-size:clamp(12px,.85vw,15px); letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.sec__back{ display:inline-flex; gap:6px; }
.sec__back:hover{ color:var(--blue); }

a:focus-visible, button:focus-visible, .lang:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.pill:focus-visible, .lang:focus-visible, .tag:focus-visible{ border-radius:999px; }
.contact__block :focus-visible, .stage :focus-visible{ outline-color:var(--yellow); }
.chapter:focus, .lightbox:focus, .sheet:focus{ outline:none; }

/* ---------- PILLS / TAGS ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px; height:clamp(36px,2.4vw,44px); padding:0 clamp(14px,1.1vw,20px);
  border-radius:999px; border:1px solid var(--blue); color:var(--blue);
  font-size:clamp(13px,.9vw,16px); font-weight:500; white-space:nowrap; line-height:1; user-select:none;
  transition:background-color .2s var(--ease2), color .2s var(--ease2), border-color .2s var(--ease2);
}
.pill:hover{ background:var(--tint); }
.pill:active{ background:#DCE3FF; }
.pill--solid{ background:var(--blue); color:#fff; }
.pill--solid:hover{ background:var(--blue-deep); }
.pill--onblue{ border-color:rgba(255,255,255,.7); color:#fff; }
.pill--onblue:hover{ background:rgba(255,255,255,.14); }
.pill--avail{ border-color:var(--line); color:var(--ink); }
.pill--avail:hover{ background:var(--paper2); }
.pill--avail .dot{ width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px rgba(246,214,90,.35); }
.tag{ display:inline-flex; align-items:center; height:clamp(30px,2vw,38px); padding:0 clamp(10px,.9vw,16px); border-radius:999px; border:1px solid var(--line); font-size:clamp(12px,.85vw,15px); font-weight:500; white-space:nowrap; background:var(--paper); }
.cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.cloud--sm .tag{ height:28px; font-size:12px; padding:0 10px; }
.cloud--lg{ margin-top:16px; gap:10px; }
.cloud--lg .tag{ height:clamp(40px,2.6vw,50px); font-size:clamp(13px,.95vw,17px); padding:0 clamp(16px,1.2vw,22px); }
.cloud--lg{ gap:14px 12px; margin-top:18px; }
.cloud--lg .tag{
  position:relative; border:0; color:#0B2A80; font-weight:600; gap:8px;
  background:linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%);
  box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(0,75,252,.14) inset, 0 4px 0 -1px #D9E1FF, 0 7px 0 -1px #BCC9FF, 0 16px 26px -12px rgba(0,40,160,.45);
  transition:transform .25s var(--ease2), box-shadow .25s var(--ease2);
}
.cloud--lg .tag::before{ content:""; position:absolute; left:6%; right:6%; top:2px; height:42%; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events:none; }
.cloud--lg .tag:hover{ transform:translateY(-3px); box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(0,75,252,.14) inset, 0 7px 0 -1px #D9E1FF, 0 10px 0 -1px #BCC9FF, 0 24px 32px -14px rgba(0,40,160,.5); }
.tag__ic{ width:26px; height:26px; display:block; filter:drop-shadow(0 3px 3px rgba(0,25,110,.28)); }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:40; height:var(--nav); background:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s; }
.nav--scrolled{ border-bottom-color:var(--line); }
.nav__in{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.nav__brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.nav__doll{ position:relative; width:42px; height:42px; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line); border-radius:50%; overflow:hidden; flex:0 0 auto; background:var(--blue) url("../assets/avatar/face-240.webp?v=2") 50% 50% / cover no-repeat; }
.nav__doll canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.nav__name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav__role{ font-size:14px; color:var(--ink2); white-space:nowrap; }
.nav__role::before{ content:"— "; }
.nav__links{ display:flex; gap:8px; }
.nav__right{ display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.nav__folio{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); white-space:nowrap; max-width:22vw; overflow:hidden; text-overflow:ellipsis; }
.nav__menu{ display:none; }
.lang{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; height:clamp(36px,2.4vw,44px); width:clamp(84px,5.6vw,100px); border:1px solid var(--blue); border-radius:999px; overflow:hidden; font-size:13px; font-weight:600; }
.lang__opt{ position:relative; z-index:1; display:grid; place-items:center; color:var(--blue); transition:color .2s; }
.lang__thumb{ position:absolute; top:0; left:0; width:50%; height:100%; background:var(--blue); border-radius:999px; transition:transform .25s var(--ease2); }
.lang[data-lang="en"] .lang__thumb{ transform:translateX(100%); }
.lang[data-lang="az"] .lang__opt[data-lang="az"], .lang[data-lang="en"] .lang__opt[data-lang="en"]{ color:#fff; }
.sheet{ position:fixed; inset:0; z-index:35; background:var(--paper); overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); }
@media (max-width:400px){ .nav__name{ display:none; } }
.sheet__in{ padding-top:calc(var(--nav) + 24px); display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sheet__link{ font-family:var(--display); font-weight:800; font-size:clamp(40px,12vw,72px); letter-spacing:-.035em; line-height:1; padding:8px 0; }
.sheet__link:hover{ color:var(--blue); }
@media (max-width:1100px){ .nav__role, .nav__folio{ display:none; } }
@media (max-width:860px){
  .nav__in{ grid-template-columns:auto 1fr; }
  .nav__links, .pill--avail{ display:none; }
  .nav__menu{ display:inline-flex; }
}

/* ---------- CURSOR (dairə) ---------- */
.cursor{
  position:fixed; left:0; top:0; z-index:100; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--blue); box-shadow:0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none; opacity:0; will-change:transform;
  transform:translate(-50%,-50%); transition:width .25s var(--ease2), height .25s var(--ease2), opacity .3s, background-color .25s;
}
.cursor.is-on{ opacity:1; }
.cursor.is-link{ width:56px; height:56px; background:rgba(0,75,252,.12); }
.cursor.is-onblue{ border-color:#fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.2); }
.cursor.is-onblue.is-link{ background:rgba(255,255,255,.18); }
.cursor.is-down{ width:18px; height:18px; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- STAGE (tam ekran doll) ---------- */
.stage{ position:relative; height:calc(100svh - var(--nav)); min-height:520px; background:var(--blue); overflow:hidden; display:grid; place-items:center; color:#fff; }
.doll{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); height:100%; aspect-ratio:1; touch-action:pan-y; }
.doll__poster, .doll__canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.doll__canvas{ opacity:0; transition:opacity .4s; }
.doll--ready .doll__canvas{ opacity:1; }
.doll--ready .doll__poster{ opacity:0; transition:opacity .3s .45s; }
/* nəhəng "HI, I'M LALA" — dollun arxasında */
.stage__big{
  position:absolute; left:0; right:0; top:max(15%, calc(.37em + 24px)); transform:translateY(-50%); z-index:0; pointer-events:none;
  text-align:center; font-family:var(--display); font-weight:800; color:#fff; letter-spacing:-.015em; line-height:.86;
  font-size:clamp(56px,14.5vw,330px); white-space:nowrap; user-select:none;
}
.stage__big span{ display:inline-block; }
/* üzən ikonlar */
.stage__icons{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.fi{ position:absolute; width:clamp(64px,7.5vw,150px); height:auto; filter:drop-shadow(0 18px 24px rgba(0,20,90,.35)); animation:float 6s ease-in-out infinite; will-change:transform; }
.fi--1{ left:9%; top:16%; animation-delay:-1s; }
.fi--2{ left:19%; top:62%; animation-delay:-2.5s; width:clamp(52px,6vw,120px); }
.fi--3{ right:10%; top:14%; animation-delay:-4s; }
.fi--4{ right:20%; top:64%; animation-delay:-.5s; }
.fi--5{ left:5%; top:44%; animation-delay:-3.2s; width:clamp(56px,6.5vw,130px); }
.fi--6{ right:5%; top:42%; animation-delay:-5s; width:clamp(52px,6vw,120px); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-6deg) } 50%{ transform:translateY(-18px) rotate(6deg) } }
/* mavi səhnədən ağ bölməyə pürüzsüz keçid: "Haqqımda" eyni mavi ilə başlayır və yumşaq ağa əriyir */
.about{ position:relative; overflow:hidden; margin-top:-3px; background:linear-gradient(180deg, var(--blue) 0%, var(--blue) 4%, #2B6BFF 20%, #9FBBFF 48%, #E6EDFF 74%, #fff 100%) top / 100% var(--fade,34vh) no-repeat, #fff; padding-top:calc(var(--fade,34vh) + clamp(24px,3vw,48px)); }
.about > .wrap{ position:relative; }
/* dollun alt kənarı mavi fona əriyir — kəsik xətt görünmür */
.doll{ -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,0) 90%); mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,0) 90%); }
.doll.hello{ animation:hello .7s var(--ease2); }
@keyframes hello{ 0%{translate:0 0} 35%{translate:0 -10px} 70%{translate:0 3px} 100%{translate:0 0} }
.stage__corner{ position:absolute; display:grid; gap:4px; z-index:4; pointer-events:none; }
.stage__hint{ margin-top:10px; opacity:.8; }
.pill--deep{ background:var(--blue-deep); border-color:transparent; }
.pill--deep:hover{ background:#002FA8; }
.stage__corner a, .stage__corner button{ pointer-events:auto; }
.stage__corner--tl{ left:var(--gutter); top:clamp(20px,2.4vw,40px); }
.stage__corner--tr{ right:var(--gutter); top:clamp(20px,2.4vw,40px); text-align:right; }
.stage__corner--bl{ left:var(--gutter); bottom:clamp(20px,2.4vw,40px); }
.stage__corner--br{ right:var(--gutter); bottom:clamp(20px,2.4vw,40px); }
.stage__name{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(22px,2.2vw,40px); line-height:1; }
.stage__scroll{ position:absolute; left:50%; bottom:clamp(16px,2vw,32px); transform:translateX(-50%); color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; z-index:4; animation:bob 2.2s ease-in-out infinite; background:var(--blue-deep); padding:8px 14px; border-radius:999px; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,6px) } }
.doll{ z-index:1; }
@media (max-aspect-ratio:1/1){
  .stage{ height:calc(100svh - var(--nav)); }
  .doll{ height:min(100%, 118vw); top:60%; }
  .stage__corner--tr{ display:none; }
  .stage__big{ white-space:normal; font-size:clamp(48px,20vw,150px); top:24%; transform:translateY(-50%); line-height:.84; }
  .stage__big span{ display:block; }
  .fi--2, .fi--4, .fi--5, .fi--6{ display:none; }
}
@media (max-width:720px){
  .stage__corner--br{ display:none; }
  .stage__name{ font-size:20px; }
}

/* ---------- HAQQIMDA ---------- */
.about__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,80px); align-items:end; margin-top:12px; }
.about__sub{ font-size:clamp(17px,1.35vw,24px); line-height:1.4; margin-top:clamp(16px,1.6vw,28px); max-width:38ch; }
.about__cta{ display:flex; gap:10px; margin-top:clamp(20px,2vw,36px); flex-wrap:wrap; }
.about__statement{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(19px,1.5vw,28px); line-height:1.25; max-width:34ch; }
.glass{ position:relative; border:0; background:linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%);
  box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(0,75,252,.14) inset, 0 6px 0 -1px #D9E1FF, 0 11px 0 -1px #BCC9FF, 0 26px 36px -16px rgba(0,40,160,.45); }
.glass::before{ content:""; position:absolute; left:6px; right:6px; top:3px; height:42%; z-index:0; pointer-events:none;
  border-radius:calc(var(--r2) - 4px) calc(var(--r2) - 4px) 50% 50% / calc(var(--r2) - 4px) calc(var(--r2) - 4px) 100% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.glass > *{ position:relative; z-index:1; }
.glass:hover{ box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(0,75,252,.14) inset, 0 9px 0 -1px #D9E1FF, 0 14px 0 -1px #BCC9FF, 0 34px 44px -18px rgba(0,40,160,.5); }
.impact{ display:grid; grid-template-columns:repeat(6,1fr); gap:calc(var(--gap) + 6px) var(--gap); margin-top:20px; }
.imp{ border-radius:var(--r2); padding:clamp(16px,1.4vw,24px); display:grid; gap:6px; align-content:start; transition:transform .35s var(--ease2), box-shadow .35s var(--ease2); }
.imp:hover{ transform:translateY(-4px); }
.imp__fig{ position:relative; display:grid; place-items:center; height:clamp(84px,7vw,122px); margin-bottom:6px; }
.imp__fig > *{ grid-area:1/1; }
.imp__n{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; font-size:clamp(24px,2vw,38px); line-height:1; color:var(--blue); }
.imp__n--corner{ position:absolute; left:0; top:0; }
.imp__t{ font-size:clamp(15px,1.05vw,18px); font-weight:600; letter-spacing:-.01em; }
.imp__d{ font-size:clamp(12px,.85vw,14px); color:var(--ink2); line-height:1.35; }
.ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ring__track{ fill:none; stroke:#DCE4FF; stroke-width:10; }
.ring__arc{ fill:none; stroke:var(--blue); stroke-width:10; stroke-linecap:round; stroke-dasharray:var(--v,0) 100; transition:stroke-dasharray 1.3s var(--ease2); }
.imp:not(.is-in) .ring__arc{ stroke-dasharray:0 100; }
.bars, .steps{ position:absolute; left:0; right:0; bottom:0; height:62%; display:flex; align-items:flex-end; gap:6px; }
.bars i, .steps i{ flex:1; height:calc(var(--h) * 1%); background:var(--blue); border-radius:5px 5px 2px 2px; transform-origin:bottom; transition:transform .9s var(--ease2); }
.bars i{ opacity:.55; } .bars i:nth-child(5){ opacity:.8; } .bars i:last-child{ opacity:1; }
.steps i{ border-radius:6px 6px 0 0; opacity:.5; } .steps i:nth-child(2){ opacity:.75; } .steps i:nth-child(3){ opacity:1; }
.bars i:nth-child(2), .steps i:nth-child(2){ transition-delay:.08s; } .bars i:nth-child(3), .steps i:nth-child(3){ transition-delay:.16s; } .bars i:nth-child(4){ transition-delay:.24s; } .bars i:nth-child(5){ transition-delay:.32s; } .bars i:nth-child(6){ transition-delay:.4s; }
.imp:not(.is-in) .bars i, .imp:not(.is-in) .steps i{ transform:scaleY(0); }
.pages{ position:absolute; right:0; bottom:0; width:52%; height:66%; }
.pages i{ position:absolute; inset:0; background:#fff; border:2px solid var(--blue); border-radius:8px; transition:transform .8s var(--ease2); }
.pages i:nth-child(2){ transform:translate(-9px,-9px); } .pages i:nth-child(3){ transform:translate(-18px,-18px); }
.imp:not(.is-in) .pages i{ transform:none; }
.dots{ position:absolute; left:0; right:0; bottom:6px; display:flex; gap:8px; }
.dots i{ flex:1; max-width:24px; aspect-ratio:1; border-radius:50%; background:var(--blue); transition:transform .6s var(--ease2); }
.dots i:nth-child(2){ transition-delay:.07s } .dots i:nth-child(3){ transition-delay:.14s } .dots i:nth-child(4){ transition-delay:.21s } .dots i:nth-child(5){ transition-delay:.28s }
.imp:not(.is-in) .dots i{ transform:scale(0); }
.line{ position:absolute; left:4px; right:4px; bottom:22px; height:3px; background:#DCE4FF; display:flex; justify-content:space-between; align-items:center; }
.line i{ width:14px; height:14px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px #F3F6FF; transition:transform .6s var(--ease2); }
.line i:nth-child(2){ transition-delay:.1s } .line i:nth-child(3){ transition-delay:.2s } .line i:nth-child(4){ transition-delay:.3s }
.imp:not(.is-in) .line i{ transform:scale(0); }
@media (max-width:1100px){ .impact{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .impact{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pages{ width:44%; height:60%; } .pages i:nth-child(2){ transform:translate(-7px,-7px); } .pages i:nth-child(3){ transform:translate(-14px,-14px); } }
.stats{ display:grid; gap:14px; margin-top:clamp(24px,2.4vw,40px); }
.stat{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:16px; border-top:1px solid var(--line); padding-top:12px; }
.stat__n{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; font-size:clamp(34px,3vw,58px); line-height:1; color:var(--blue); min-width:3.6ch; }
.stat__l{ font-size:clamp(13px,.9vw,16px); color:var(--ink2); }
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; align-items:start; } }

/* ---------- İŞ YERLƏRİ ---------- */
.exp__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:calc(var(--gap) + 8px) var(--gap); margin-top:clamp(24px,3vw,48px); }
.job{ border-radius:var(--r2); padding:clamp(18px,1.6vw,28px); display:grid; gap:16px; transition:transform .35s var(--ease2), box-shadow .35s var(--ease2); }
.job:hover{ transform:translateY(-4px); }
.job__logo{ height:clamp(56px,4.6vw,76px); display:flex; align-items:center; }
.job__logo img{ max-height:100%; width:auto; max-width:min(60%, 220px); object-fit:contain; }
.job__logo--mono span{ display:grid; place-items:center; height:100%; aspect-ratio:1; border-radius:18px; background:var(--blue); color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(20px,1.6vw,28px); letter-spacing:-.03em; }
.job__date{ font-size:13px; letter-spacing:.02em; color:var(--ink2); font-variant-numeric:tabular-nums; display:flex; gap:8px; align-items:center; }
.job__tag{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:var(--tint); color:var(--blue); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.job__co{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(20px,1.5vw,26px); line-height:1.1; margin-top:6px; }
.job__role{ font-weight:500; margin-top:4px; }
.job__out{ color:var(--ink2); font-size:clamp(13px,.95vw,16px); line-height:1.5; margin-top:8px; }

/* ---------- PROQRAMLAR: chip-lər ---------- */
.apps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(84px,7.4vw,124px), 1fr)); gap:clamp(18px,2vw,30px) 8px; margin-top:22px; }
.app{ display:grid; justify-items:center; gap:10px; text-align:center; }
.app__img{ width:clamp(64px,5.6vw,92px); height:auto; display:block; filter:drop-shadow(0 12px 10px rgba(0,25,110,.30)); transition:transform .35s var(--ease2), filter .35s var(--ease2); }
.app:hover .app__img{ transform:translateY(-4px) scale(1.06); filter:drop-shadow(0 20px 16px rgba(0,25,110,.34)); }
.app__name{ font-size:clamp(12px,.9vw,14px); font-weight:500; color:var(--ink); line-height:1.2; }
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.chip{ display:inline-flex; align-items:center; gap:10px; height:60px; padding:4px 20px 4px 6px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:clamp(13px,.95vw,16px); font-weight:500; box-shadow:0 1px 0 #fff inset, 0 12px 22px -18px rgba(0,40,160,.4); transition:transform .3s var(--ease2), border-color .3s, box-shadow .3s; }
.chip:hover{ transform:translateY(-3px); border-color:#B9C7FF; box-shadow:0 1px 0 #fff inset, 0 22px 30px -18px rgba(0,40,160,.45); }
.chip__img{ width:50px; height:50px; display:block; flex:0 0 auto; transition:transform .35s var(--ease2); }
.chip:hover .chip__img{ transform:translateY(-2px) scale(1.08) rotate(-3deg); }
.chip__ic{ --tb:#fff; --tc:#000; width:32px; height:32px; border-radius:9px; background:var(--tb); color:var(--tc); display:grid; place-items:center; font-style:normal; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.03em; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; }
.chip__ic--word{ font-size:13px; }
.chip__ic--logo b{ display:block; width:58%; height:58%; background:var(--tc); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.chip__ic--dalle{ display:flex; gap:2px; padding:7px; background:#fff; }
.chip__ic--dalle em{ flex:1; border-radius:2px; }
.chip__ic--dalle em:nth-child(1){ background:#FFFF66 } .chip__ic--dalle em:nth-child(2){ background:#42FFFF } .chip__ic--dalle em:nth-child(3){ background:#51DA4C } .chip__ic--dalle em:nth-child(4){ background:#FF6E3C } .chip__ic--dalle em:nth-child(5){ background:#3C46FF }
/* ---------- (köhnə tile-lar) ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(96px,9vw,140px), 1fr)); gap:var(--gap); margin-top:20px; }
.tile{
  --tb:#fff; --tc:#000; position:relative; display:grid; grid-template-rows:1fr auto; gap:10px; text-align:center;
  transition:transform .35s var(--ease2);
}
.tile::before{ content:""; grid-row:1; aspect-ratio:1; border-radius:24%; background:var(--tb); border:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02); transition:box-shadow .35s var(--ease2), border-color .35s; }
.tile:hover{ transform:translateY(-6px); }
.tile:hover::before{ box-shadow:0 22px 40px -22px rgba(0,0,0,.35); border-color:var(--blue); }
.tile__mono, .tile__word, .tile__logo, .tile__bars{ position:absolute; left:0; right:0; top:0; aspect-ratio:1; display:grid; place-items:center; color:var(--tc); }
.tile__mono{ font-family:var(--display); font-weight:700; font-size:clamp(28px,2.8vw,44px); letter-spacing:-.04em; }
.tile__mono--sm{ font-size:clamp(24px,2.2vw,34px); }
.tile__word{ font-family:var(--display); font-weight:800; font-size:clamp(14px,1.2vw,20px); letter-spacing:-.02em; }
.tile__logo i{ display:block; width:52%; height:52%; background:var(--tc); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.tile__label{ font-size:clamp(12px,.85vw,15px); font-weight:500; color:var(--ink2); }
.tile--dalle::before{ background:#fff; }
.tile__bars{ display:flex; align-items:stretch; gap:9%; padding:24%; }
.tile__bars i{ flex:1; border-radius:4px; }
.tile__bars i:nth-child(1){ background:#FFFF66 } .tile__bars i:nth-child(2){ background:#42FFFF } .tile__bars i:nth-child(3){ background:#51DA4C } .tile__bars i:nth-child(4){ background:#FF6E3C } .tile__bars i:nth-child(5){ background:#3C46FF }

/* ---------- TƏHSİL ---------- */
.edu__grid{ display:grid; grid-template-columns:minmax(260px, .8fr) 1.2fr; gap:clamp(24px,4vw,80px); margin-top:clamp(24px,3vw,48px); align-items:center; }
.diploma{ display:block; border-radius:var(--r2); overflow:hidden; box-shadow:0 30px 70px -40px rgba(0,0,0,.6); transition:transform .5s var(--ease2), box-shadow .5s var(--ease2); }
.diploma:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 40px 90px -40px rgba(0,75,252,.5); }
.diploma img{ width:100%; height:auto; }
.edu__school{ display:flex; align-items:center; gap:16px; }
.bda{ display:flex; gap:4px; }
.bda i{ width:clamp(18px,1.6vw,26px); aspect-ratio:1; border-radius:28%; display:block; }
.bda i:nth-child(1){ background:#D7263D } .bda i:nth-child(2){ background:#F2A900 } .bda i:nth-child(3){ background:#0072CE }
.edu__name{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(26px,2.6vw,48px); line-height:1; }
.edu__prog{ margin-top:8px; font-size:clamp(15px,1.1vw,20px); }
.edu__facts{ display:grid; grid-template-columns:repeat(3, auto); gap:clamp(16px,2vw,40px); margin-top:clamp(20px,2vw,32px); padding-top:16px; border-top:1px solid var(--line); }
.edu__facts dt{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); font-weight:500; }
.edu__facts dd{ font-weight:600; margin-top:4px; }
.edu .cap:not(.cap--rule){ margin-top:clamp(20px,2vw,32px); }
.edu__note{ margin-top:14px; font-size:clamp(13px,.9vw,15px); color:var(--ink2); }
.partners{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.partner{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 8px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-weight:500; font-size:14px; }
.partner__img{ width:28px; height:28px; display:block; filter:drop-shadow(0 3px 3px rgba(0,25,110,.28)); }
.partner__logo{ display:block; width:16px; height:16px; background:var(--ink); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.partner__a{ font-family:var(--display); font-weight:800; color:#FF0000; font-size:16px; }
.edu__cta{ display:flex; align-items:center; gap:16px; margin-top:clamp(20px,2vw,32px); flex-wrap:wrap; }
.diploma{ max-width:620px; justify-self:start; }
.certs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:var(--gap); margin-top:16px; }
.cert{ position:relative; display:grid; align-content:center; justify-items:center; gap:10px; aspect-ratio:4/3; border-radius:var(--r2); overflow:hidden; background:var(--paper); border:1px solid var(--line); text-align:center; padding:12px; }
.cert--diploma{ padding:0; cursor:zoom-in; }
.cert--diploma img{ width:100%; height:100%; object-fit:cover; }
.cert--diploma .cert__label{ position:absolute; left:10px; bottom:10px; background:rgba(255,255,255,.9); color:var(--ink); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.cert--empty{ border:1.5px dashed var(--line); background:transparent; color:var(--ink2); }
.cert__plus{ width:40px; height:40px; border-radius:50%; border:1.5px dashed var(--line); display:grid; place-items:center; font-size:22px; line-height:1; }
.cert--empty .cert__label{ font-size:13px; }
@media (max-width:820px){ .edu__grid{ grid-template-columns:1fr; } .diploma{ max-width:420px; } .edu__facts{ grid-template-columns:1fr 1fr; } }

/* ---------- DİLLƏR ---------- */
.langs__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:var(--gap); margin-top:clamp(24px,3vw,48px); }
.lcard{ border:1px solid var(--line); border-radius:var(--r2); padding:clamp(18px,1.6vw,28px); display:grid; gap:8px; transition:transform .35s var(--ease2), border-color .35s; }
.lcard:hover{ transform:translateY(-4px); border-color:var(--blue); }
.flag{ width:clamp(60px,5vw,80px); height:auto; aspect-ratio:1; display:block; filter:drop-shadow(0 10px 9px rgba(0,25,110,.30)); margin-bottom:10px; transition:transform .35s var(--ease2); }
.lcard:hover .flag{ transform:translateY(-3px) scale(1.05); }
.lcard__name{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(20px,1.5vw,26px); line-height:1.1; }
.lcard__lvl{ color:var(--ink2); font-size:14px; }
.bar{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:8px; }
.bar i{ height:6px; border-radius:3px; background:var(--line); }
.lcard[style*="--lvl:6"] .bar i:nth-child(-n+6), .lcard[style*="--lvl:5"] .bar i:nth-child(-n+5), .lcard[style*="--lvl:4"] .bar i:nth-child(-n+4), .lcard[style*="--lvl:3"] .bar i:nth-child(-n+3), .lcard[style*="--lvl:2"] .bar i:nth-child(-n+2), .lcard[style*="--lvl:1"] .bar i:nth-child(-n+1){ background:var(--blue); }

/* ---------- ƏLAQƏ ---------- */
.contact{ padding:clamp(24px,3vw,48px) 0 24px; }
.contact__block{ position:relative; background:var(--blue); color:#fff; border-radius:var(--r); padding:clamp(32px,5vw,96px); overflow:hidden; min-height:56svh; display:flex; flex-direction:column; justify-content:flex-end; }
.contact__title{ font-size:clamp(40px,9vw,180px); margin:12px 0 18px; }
.contact__sub{ max-width:44ch; font-size:clamp(16px,1.2vw,20px); color:rgba(255,255,255,.88); }
.contact__email{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(24px,2.4vw,40px); }
.contact__mail{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(17px,3vw,48px); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em; overflow-wrap:anywhere; }
.contact__mail:hover{ color:var(--yellow); }
.contact__pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.contact__mark{ position:absolute; right:clamp(24px,4vw,64px); top:clamp(24px,4vw,64px); width:clamp(96px,14vw,240px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid rgba(255,255,255,.35); }
.footer{ display:flex; justify-content:space-between; gap:16px; padding:28px 8px 8px; font-size:13px; color:var(--ink2); letter-spacing:.02em; }
.footer__top{ text-decoration:underline; text-underline-offset:.2em; }
@media (max-width:720px){ .contact__block{ min-height:0; } .contact__mark{ position:static; width:88px; margin-top:24px; order:9; } }

/* ---------- PORTFOLIO: PLATES ---------- */
.works{ padding-bottom:clamp(48px,6vw,96px); }
.plates{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); row-gap:clamp(40px,4.5vw,80px); }
.plate{ grid-column:span var(--span,12); position:relative; }
.plate__btn{ display:block; width:100%; text-align:left; border-radius:0; }
.plate__btn:focus-visible{ outline:none; }
.plate__btn:focus-visible .plate__img{ outline:3px solid var(--blue); outline-offset:4px; }
.plate__rule{ display:block; position:relative; height:1px; background:var(--line); }
.plate__rule::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--blue); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease2); }
.plate__cap{ display:flex; justify-content:space-between; gap:12px; padding:12px 0 14px; }
.plate__cap .n{ font-weight:600; color:var(--ink); transition:color .3s; }
.plate__img{ display:block; position:relative; border-radius:var(--r2); overflow:hidden; background:var(--paper2); aspect-ratio:var(--ar,16/9); width:100%; }
.plate__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease2); }
.plate__foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; }
.plate__title{ font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.05; font-size:clamp(20px,1.7vw,32px); transition:color .3s; text-wrap:balance; }
.plate[data-span="12"] .plate__title{ font-size:clamp(24px,2.6vw,48px); }
.plate__open{ flex:0 0 auto; }
@media (hover:hover){
  .plate__btn:hover .plate__rule::after{ transform:scaleY(1); }
  .plate__btn:hover .plate__img img{ transform:scale(1.03); }
  .plate__btn:hover .plate__title, .plate__btn:hover .plate__cap .n{ color:var(--blue); }
  .plate__btn:hover .plate__open{ background:var(--blue); color:#fff; }
}
.plates--dim .plate:not(.plate--active){ opacity:.25; transform:translateY(6px); transition:opacity .22s ease-out, transform .22s ease-out; transition-delay:var(--delay,0ms); }
.plates--restore .plate{ opacity:1; transform:none; transition:opacity .26s ease-out, transform .26s ease-out; transition-delay:var(--delay,0ms); }
.plate--active .plate__cap, .plate--active .plate__foot{ opacity:0; transition:opacity .12s; }
.plate--hidden .plate__img img{ visibility:hidden; }
@media (max-width:720px){
  .plates{ row-gap:40px; }
  .plate{ grid-column:span 12 !important; }
  .plate__open{ height:40px; }
}

/* ---------- FƏSİL (işin təfərrüatı) ---------- */
.chapter{ position:fixed; inset:0; z-index:50; background:var(--paper); display:flex; flex-direction:column; opacity:0; transition:opacity .26s ease-out; }
.chapter.is-open{ opacity:1; }
.chapter.is-fade{ transition-duration:.3s; }
.chapter__head{ height:var(--nav); flex:0 0 auto; background:var(--paper); border-bottom:1px solid var(--line); z-index:2; }
.chapter__headin{ height:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; }
.chapter__folio{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapter__nav{ display:flex; gap:8px; }
.chapter__scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom); }
.chapter__hero{ position:relative; margin-top:24px; height:62svh; min-height:320px; border-radius:var(--r2); overflow:hidden; background:var(--paper2); }
.chapter__hero img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); visibility:hidden; }
.chapter.is-landed .chapter__hero img{ visibility:visible; }
.chapter__rule{ height:6px; background:var(--blue); margin-top:16px; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.chapter.is-rule .chapter__rule{ transform:scaleX(1); }
.chapter.is-closing .chapter__rule{ transform-origin:right; transition-duration:.35s; }
.chapter__titlebar{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; padding-top:28px; }
.chapter__titlewrap{ clip-path:inset(0 0 100% 0); transform:translateY(30px); transition:clip-path .48s var(--ease2), transform .48s var(--ease2); }
.chapter.is-title .chapter__titlewrap{ clip-path:inset(0 0 -20% 0); transform:none; }
.chapter.is-closing .chapter__titlewrap{ transition:clip-path .3s var(--ease), transform .3s var(--ease); }
.chapter__title{ font-size:clamp(34px,5.6vw,128px); margin-top:8px; max-width:16ch; text-wrap:balance; }
.chapter__behance{ margin-bottom:10px; }
.chapter__body{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); margin-top:clamp(32px,4vw,64px); padding-top:24px; border-top:1px solid var(--line); opacity:0; transform:translateY(12px); transition:opacity .4s ease-out, transform .4s ease-out; }
.chapter.is-body .chapter__body{ opacity:1; transform:none; }
.chapter.is-closing .chapter__body{ transition-duration:.2s; }
.colophon{ grid-column:1 / 5; position:sticky; top:16px; align-self:start; display:grid; gap:20px; }
.colophon__list{ display:grid; gap:14px; }
.colophon__list > div{ display:grid; gap:6px; }
.colophon__list dt{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); font-weight:500; }
.colophon__list dd{ font-size:clamp(15px,1vw,17px); }
.colophon .pill{ justify-self:start; }
.chapter__text{ grid-column:5 / 13; max-width:70ch; }
.chapter__lede{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(21px,1.9vw,32px); line-height:1.2; }
.chapter__desc{ margin-top:24px; font-size:clamp(16px,1.15vw,20px); line-height:1.55; display:grid; gap:18px; }
.chapter__gallerywrap{ background:var(--paper2); margin-top:clamp(40px,5vw,72px); padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,72px); }
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.gallery figure{ margin:0; display:grid; gap:10px; opacity:0; transition:opacity .35s ease-out; }
.gallery figure.is-in{ opacity:1; }
.gallery figure.full{ grid-column:1 / -1; }
.gallery figcaption{ display:flex; justify-content:space-between; }
.gallery__btn{ display:block; width:100%; border-radius:16px; cursor:zoom-in; }
.gallery__btn:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.gallery img{ width:100%; height:auto; border-radius:16px; background:#E9E9E6; display:block; }
.chapter__next{ display:grid; grid-template-columns:1fr auto; gap:24px 32px; align-items:center; padding:clamp(32px,4vw,56px) 0 40px; border-bottom:1px solid var(--line); }
.chapter__next .cap{ grid-column:1 / -1; }
.chapter__nexttitle{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.95; font-size:clamp(30px,5vw,110px); text-align:left; text-wrap:balance; }
.chapter__nexttitle:hover{ color:var(--blue); }
.chapter__nextthumb{ width:clamp(160px,20vw,340px); aspect-ratio:16/9; object-fit:cover; border-radius:16px; cursor:pointer; }
.chapter__foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:28px 0 56px; }
.chapter__cta{ display:inline-flex; align-items:center; gap:14px; color:var(--ink2); font-size:14px; }
@media (max-width:860px){
  .chapter__folio, .chapter__back .arr + span{ display:none; }
  .chapter__nav .pill span:not(.arr){ display:none; }
  .chapter__nav .pill{ padding:0 12px; }
  .chapter__hero{ height:auto; aspect-ratio:4/3; max-height:56svh; min-height:0; }
  .chapter__body{ grid-template-columns:1fr; row-gap:28px; }
  .colophon{ grid-column:1; position:static; }
  .colophon__list{ grid-template-columns:1fr 1fr; }
  .chapter__text{ grid-column:1; }
  .gallery{ grid-template-columns:1fr; }
  .chapter__next, .chapter__titlebar{ grid-template-columns:1fr; }
}

/* ---------- FLYER / LIGHTBOX / TOAST ---------- */
.flyer{ position:fixed; left:0; top:0; z-index:60; overflow:hidden; transform-origin:0 0; will-change:transform; pointer-events:none; }
.flyer img{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; max-width:none; }
.lightbox{ position:fixed; inset:0; z-index:70; background:var(--paper); display:grid; place-items:center; padding:64px 72px calc(64px + env(safe-area-inset-bottom)); }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; touch-action:pinch-zoom; }
.lightbox__close{ position:absolute; top:14px; right:var(--gutter); }
.lightbox__count{ position:absolute; top:22px; left:var(--gutter); }
.lightbox__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid var(--blue); color:var(--blue); font-size:20px; }
.lightbox__arrow:hover{ background:var(--tint); }
.lightbox__arrow--l{ left:12px; } .lightbox__arrow--r{ right:12px; }
.lightbox--single .lightbox__arrow, .lightbox--single .lightbox__count{ display:none; }
@media (max-width:720px){ .lightbox{ padding:64px 12px 72px; } .lightbox__arrow{ top:auto; bottom:14px; transform:none; } }
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:80; background:var(--blue); color:#fff; padding:10px 16px; border-radius:999px; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .doll, .stage__scroll{ animation:none !important; }
  .plate__img img, .pill, .plate__rule::after, .tile, .job, .lcard, .diploma{ transition:none; }
  .chapter__titlewrap, .chapter__rule, .chapter__body{ transition:none !important; }
  .fi{ animation:none !important; }
  .imp, .job, .app__img, .flag, .chip, .chip__img, .cloud--lg .tag, .ring__arc, .bars i, .steps i, .pages i, .dots i, .line i{ transition:none !important; }
  .imp:hover, .job:hover, .chip:hover, .cloud--lg .tag:hover{ transform:none; } .app:hover .app__img{ transform:none; }
}