/* Project screenshots and portfolio presentation */
.work-pin{padding-top:48px;padding-bottom:28px}
.work-heading{margin-bottom:28px}
.work-heading .eyebrow{margin-bottom:16px}
.work-heading h2{font-size:clamp(30px,3.1vw,48px);letter-spacing:-.045em}
.project{width:clamp(410px,46vw,680px)}
.project-preview{width:100%;border:0;text-align:left;border-radius:14px;padding:26px 26px 40px;position:relative;height:auto;aspect-ratio:1.66;cursor:zoom-in}
.project-browser{display:block;transform:none;box-shadow:0 12px 32px #16233c16;border:1px solid #ffffff80;width:100%;transition:transform .4s}
.project-browser img{aspect-ratio:1.6;object-fit:contain;background:white}
.project-preview:hover .project-browser{transform:translateY(-3px) scale(1.015)}
.project-preview:focus-visible{outline-offset:-5px}
.browser-bar{height:23px}
.browser-bar span{font-size:10px}
.preview-hint{position:absolute;right:25px;bottom:13px;display:flex;gap:14px;font-size:10px;font-weight:500;color:#4b5468}
.project-copy{padding:20px 2px 0}
.project-meta{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:9px;flex-wrap:wrap}
.project-meta>span:first-child{color:var(--accent);font-weight:600}
.project-meta .entry-label{letter-spacing:0;text-transform:none;color:#707787;border-left:1px solid #cfd3dc;padding-left:12px}
.project-copy h3{font-size:clamp(21px,1.9vw,28px);font-weight:600;letter-spacing:-.035em;margin:0}
.project-copy p{font-size:13px;line-height:1.75;margin:10px 0 14px;max-width:600px;color:#656c7a}
.project-tags{display:flex;gap:7px;flex-wrap:wrap}
.project-tags span{font-size:10px;padding:5px 9px;border:1px solid #d5d9e1;border-radius:99px;color:#727988}
.project-visit{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #d3d8e1;margin-top:17px;padding:13px 0 4px;font-size:12px}
.project-visit>span:first-child{color:var(--muted);overflow-wrap:anywhere}
.project-visit>span:last-child{color:var(--accent);font-weight:600;white-space:nowrap}
.project-visit b{font-size:16px;font-weight:400;margin-left:10px;display:inline-block;transition:transform .2s}
.project-visit:hover b{transform:translate(2px,-2px)}
.work-progress{margin-top:25px}
.project-collection{padding:60px var(--pad) 20px}
.collection-heading{border-top:1px solid #d1d6df;padding-top:40px;margin-bottom:35px;display:flex;justify-content:space-between;align-items:end;gap:25px}
.collection-heading .eyebrow{display:block;margin-bottom:16px}
.collection-heading h2{font-size:clamp(30px,3vw,46px);letter-spacing:-.045em}
.collection-heading p{font-size:13px;margin:0}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 30px}
.collection-card{min-width:0}
.collection-card .project-copy{padding-top:19px}
.collection-card .project-copy p{min-height:69px}
.collection-card .project-copy h3{font-size:clamp(20px,1.8vw,26px)}
.project-dialog{padding:0;border:1px solid #dfe3ec;border-radius:18px;background:var(--bg);width:min(1180px,calc(100vw - 40px));max-height:calc(100dvh - 40px);color:var(--text);box-shadow:0 30px 90px #131b3533}
.project-dialog::backdrop{background:#121b35a3;backdrop-filter:blur(8px)}
.preview-toolbar{padding:20px 26px;display:flex;justify-content:space-between;gap:25px;align-items:center;border-bottom:1px solid var(--line)}
.preview-toolbar>div>span{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
.preview-toolbar h2{font-size:21px;letter-spacing:-.03em;margin-top:8px}
.preview-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:24px;background:transparent;color:var(--text);flex-shrink:0}
.preview-close:hover{background:#e6eaf6}
.preview-content{overflow:auto;max-height:calc(100dvh - 225px);background:#e9ecf2;padding:16px}
.preview-content img{width:100%;height:auto;border-radius:6px}
.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;font-size:12px}
.preview-footer>span{color:var(--muted)}
.preview-visit{color:var(--accent);font-weight:600}
.preview-visit span{margin-left:10px}
.preview-zoom{border:0;padding:0;background:none;color:var(--muted);font-size:12px;text-align:left}
.preview-zoom:hover{color:var(--accent)}
.preview-content.zoomed img{width:var(--preview-width);max-width:none}
body.preview-open{overflow:hidden}
/* Each project uses a composition that suits its real interface. */
.project-preview{isolation:isolate;display:flex;padding:0;aspect-ratio:1.7;background:#edf0f8}
.scene-surface{display:block;width:100%;height:100%;overflow:hidden;position:relative;z-index:1;transition:transform .5s ease}
.scene-surface img{width:100%;height:100%;object-fit:cover;object-position:top;max-width:none}
.project-preview:hover .scene-surface{transform:scale(1.025)}
.preview-hint{right:15px;bottom:15px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ffffffed;color:#263750;box-shadow:0 3px 12px #13244017;font-size:18px;z-index:3;opacity:.85}
.scene-word{position:absolute;left:25px;top:18px;color:#ffffff26;font-size:clamp(35px,6vw,90px);font-weight:700;letter-spacing:-.06em;line-height:1;white-space:nowrap;z-index:0;pointer-events:none}
.scene-farmatsiya .project-preview{background:#e8ebf3;padding:0}
.scene-farmatsiya .scene-surface{border:1px solid #d7ddec;border-radius:14px}
.scene-edusmart .project-preview{background:linear-gradient(145deg,#1652dd,#688eff);padding:42px 25px 25px;align-items:end}
.scene-edusmart .scene-surface{height:88%;border-radius:7px;box-shadow:0 18px 30px #06195636;transform:rotate(-2deg)}
.scene-edusmart .scene-surface img{object-fit:cover;object-position:left top}
.scene-edusmart .project-preview:hover .scene-surface{transform:rotate(0) translateY(-4px)}
.scene-subsidiya .project-preview{padding:35px;background:radial-gradient(ellipse at 10% 0,#d8ceff,transparent 65%),#edf0ff}
.scene-subsidiya .scene-surface{height:auto;aspect-ratio:1.8;border-radius:13px;box-shadow:0 15px 45px #4f40852b;align-self:center}
.scene-atmu-website .project-preview{background:#132956}
.scene-atmu-website .scene-surface img{object-position:top}
.scene-atmu-academy{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center}
.scene-atmu-academy .project-preview{padding:0;background:#2369ee;aspect-ratio:1.6}
.scene-atmu-academy .project-copy{padding:10px 0}
.scene-atmu-academy .project-copy h3{font-size:clamp(26px,3vw,40px)}
.scene-atmu-academy .project-copy p{min-height:0;max-width:450px;font-size:14px}
.scene-toza-makon-bank .project-preview{background:linear-gradient(135deg,#d8f2f6,#d6e9fa);padding:28px 70px}
.scene-toza-makon-bank .scene-surface{border-radius:12px;box-shadow:0 12px 32px #357f8d17;transform:rotate(2deg)}
.scene-toza-makon-bank .scene-surface img{object-fit:cover;object-position:center}
.scene-atama .project-preview{background:#f3eee1;padding:22px 0 0 24px}
.scene-atama .scene-surface{border-radius:8px 0 0 0;box-shadow:-6px -3px 20px #9e916519}
.scene-atama .scene-surface img{object-fit:cover;object-position:left top}
.scene-rating .project-preview{background:#080f13;padding:0}
.scene-rating .scene-surface img{object-fit:cover;object-position:center}
.scene-e-grant .project-preview{background:#e8e8eb;padding:22px}
.scene-e-grant .scene-surface{border-radius:10px;box-shadow:0 15px 25px #35394c12}
.scene-e-grant .scene-surface img{object-fit:contain;background:white}
.scene-apps .project-preview{background:#06242a;padding:24px 0 0 24px}
.scene-apps .scene-surface{border-radius:10px 0 0 0;border:1px solid #00d6d82a}
.scene-apps .scene-surface img{object-fit:cover;object-position:center}
.scene-soft .project-preview{background:#dbe8fa;padding:0 22px 22px 0}
.scene-soft .scene-surface{border-radius:0 0 10px 0;box-shadow:7px 9px 20px #2c46731c}
.project-collection{padding-top:18px}
.collection-heading{padding-top:22px;margin-bottom:22px;align-items:center}
.collection-heading h2{font-size:19px;font-weight:500;letter-spacing:-.025em;line-height:1.4}
.collection-heading>span{font-size:11px;color:var(--muted)}
.collection-jump{display:block;margin-top:10px;color:var(--accent);font-size:11px;font-weight:500}
.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
.collection-card .project-copy{padding-top:15px}
.collection-card .project-copy h3{font-size:19px;line-height:1.35;letter-spacing:-.025em;min-height:51px}
.collection-card .project-copy p{font-size:12px;line-height:1.7;margin:8px 0 12px;min-height:62px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.collection-card .project-meta{font-size:9px;gap:8px;letter-spacing:.3px;margin-bottom:8px}
.collection-card .entry-label{display:none}
.collection-card .project-tags span{font-size:9px;padding:4px 7px}
.collection-card .project-visit{margin-top:13px;font-size:10px;gap:8px;flex-wrap:wrap}
.collection-card .project-visit b{margin-left:5px}
.scene-atmu-academy{grid-column:auto;display:block}
.scene-atmu-academy .project-copy{padding:15px 2px 0}
.scene-atmu-academy .project-copy h3{font-size:19px}
.collection-card .project-preview{aspect-ratio:1.55}
.has-cover .project-preview{padding:0;background:#eaf0ef}
.has-cover .scene-surface{border-radius:0;transform:none;border:0;box-shadow:none;aspect-ratio:auto;height:100%}
.has-cover .scene-surface img{object-fit:cover;object-position:center}
.has-cover .scene-word{display:none}
.cover-label{position:absolute;z-index:3;left:12px;bottom:12px;font-size:8px;color:#425361;background:#ffffffe0;padding:5px 8px;border-radius:99px;letter-spacing:.2px}
@media(min-width:701px) and (max-height:780px){
  .work-pin{padding-top:25px;padding-bottom:20px}
  .work-heading{margin-bottom:22px}
  .work-heading h2{font-size:32px}
  .work-heading .eyebrow{margin-bottom:10px}
  .project{width:clamp(385px,43vw,580px)}
  .project-preview{aspect-ratio:1.85;padding:0}
  .project-copy{padding-top:14px}
  .project-copy h3{font-size:21px}
  .project-copy p{margin:8px 0 10px;font-size:12px}
  .project-visit{margin-top:11px;padding-top:10px}
  .work-progress{margin-top:18px}
}
@media(max-width:1000px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .work-pin{padding-top:50px;padding-bottom:25px}
  .work-heading h2{font-size:32px}
  .project{width:100%}
  .project-track{gap:37px}
  .project-preview{aspect-ratio:1.65;border-radius:12px;padding:18px 15px 34px}
  .project-copy{padding-top:17px}
  .project-copy h3{font-size:22px}
  .project-copy p{font-size:13px}
  .project-meta{font-size:9px}
  .project-collection{padding-top:12px}
  .collection-heading{display:flex;padding-top:20px;margin-bottom:20px}
  .collection-heading h2{font-size:18px}
  .collection-grid{grid-template-columns:1fr;gap:30px}
  .collection-card .project-copy p{min-height:0}
  .collection-card .project-copy h3{font-size:20px;min-height:0}
  .collection-card .project-preview{padding:18px 15px 34px}
  .preview-hint{right:18px;font-size:9px}
  .browser-bar{height:20px}.browser-bar span{font-size:8px}
  .project-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:12px}
  .preview-toolbar{padding:15px}.preview-toolbar h2{font-size:17px;line-height:1.3}
  .preview-content{padding:8px;max-height:calc(100dvh - 200px)}
  .preview-footer{padding:16px;font-size:11px}.preview-zoom{font-size:11px}
  .scene-atmu-academy{display:block}.scene-atmu-academy .project-copy{padding:17px 2px 0}
  .scene-atmu-academy .project-copy h3{font-size:20px}.scene-atmu-academy .project-copy p{font-size:12px}
  .project-preview,.collection-card .project-preview{padding:0}
  .scene-edusmart .project-preview{padding:30px 18px 18px}
  .scene-subsidiya .project-preview{padding:20px}
  .scene-toza-makon-bank .project-preview{padding:18px 40px}
  .scene-atama .project-preview,.scene-apps .project-preview{padding:15px 0 0 15px}
  .scene-e-grant .project-preview{padding:16px}
  .scene-soft .project-preview{padding:0 15px 15px 0}
  .has-cover .project-preview{padding:0}
  .collection-card .project-visit{font-size:11px}
  .preview-hint{width:28px;height:28px;font-size:16px;bottom:12px;right:12px}
}