/* Живые макеты в карточках каталога: рамка браузера + мини-копия сайта */

.site-preview{
  position:relative;
  height:262px;
  margin:20px 19px 21px;
  border-radius:12px;
  overflow:hidden;
  background:#0d0d14;
  box-shadow:0 18px 34px -18px rgba(47,41,53,.65), 0 0 0 1px rgba(23,24,28,.08);
  display:flex;
  flex-direction:column;
}
.site-preview::after{
  content:"";
  position:absolute;inset:0;
  border-radius:12px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* полоса браузера */
.mock-bar{
  flex:none;
  height:22px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 9px;
  background:#1b1b24;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mock-bar i{width:6px;height:6px;border-radius:50%;background:#4a4a58}
.mock-bar i:nth-child(1){background:#ff6b5e}
.mock-bar i:nth-child(2){background:#ffc44d}
.mock-bar i:nth-child(3){background:#4fd07a}
.mock-bar b{
  margin-left:6px;
  font-size:7px;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* область сайта */
.mock-view{position:relative;flex:1;overflow:hidden;background:#fff}
.mock-view s{display:block;text-decoration:none;flex:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ================= мокап 1: сайт услуг ================= */
.mock-services{background:linear-gradient(180deg,#fbf8f4 0%,#fbf8f4 63%,#f1ecf9 63%,#f1ecf9 100%)}
.mock-services .ms-top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 0}
.mock-services .ms-brand{display:flex;align-items:center;gap:4px;font-size:6px;font-weight:800;letter-spacing:-.02em;color:#1d1b26}
.mock-services .ms-brand em{width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#8f6cff,#f6a58b);display:block}
.mock-services .ms-nav{display:flex;gap:7px}
.mock-services .ms-nav s{display:block;width:13px;height:2px;border-radius:2px;background:#cfc9c1}
.mock-services .ms-cta{width:26px;height:8px;border-radius:99px;background:#1d1b26}
.mock-services .ms-body{display:grid;grid-template-columns:1fr 82px;gap:10px;padding:8px 12px 0;align-items:start}
.mock-services .ms-eyebrow{width:52px;height:3px;border-radius:2px;background:#b7a6f0;margin-bottom:6px}
.mock-services .ms-title{font-size:13px;line-height:1;letter-spacing:-.03em;font-weight:800;color:#1d1b26;margin:0 0 5px;font-family:'Playfair Display',Georgia,serif}
.mock-services .ms-title em{font-style:italic;color:#6e48ed}
.mock-services .ms-lines{margin:0 0 7px;display:grid;gap:3px}
.mock-services .ms-lines s{display:block;height:2px;width:100%;border-radius:2px;background:#d9d2c9}
.mock-services .ms-lines s:last-child{width:72%}
.mock-services .ms-btns{display:flex;gap:4px}
.mock-services .ms-btns b{width:30px;height:9px;border-radius:99px;background:#6e48ed}
.mock-services .ms-btns s{width:26px;height:9px;border-radius:99px;border:1px solid #ddd6cc;background:#fff}
.mock-services .ms-art{
  height:80px;
  border-radius:44px 44px 7px 7px;
  background:
    radial-gradient(circle at 34% 66%, rgba(150,116,255,.9) 0 25%, transparent 26%),
    radial-gradient(circle at 66% 44%, rgba(246,165,139,.9) 0 23%, transparent 24%),
    radial-gradient(circle at 52% 82%, rgba(190,168,255,.95) 0 27%, transparent 28%),
    linear-gradient(160deg,#efe7ff,#ffe4d9);
  box-shadow:4px 4px 0 #f6a58b;
}
.mock-services .ms-cards{position:absolute;left:12px;right:12px;bottom:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mock-services .ms-cards b{
  height:26px;border-radius:5px;background:#fff;border:1px solid rgba(29,27,38,.07);
  box-shadow:0 4px 10px -6px rgba(29,27,38,.6);position:relative;
}
.mock-services .ms-cards b::before{content:"";position:absolute;left:4px;top:4px;right:16px;height:9px;border-radius:3px;background:linear-gradient(135deg,#cbbaff,#e9dffd)}
.mock-services .ms-cards b::after{content:"";position:absolute;left:4px;bottom:5px;width:15px;height:2px;border-radius:2px;background:#ded7cd}

/* ================= мокап 2: квиз-сайт ================= */
.mock-quiz{background:radial-gradient(circle at 16% 20%, #3a2a86 0%, #14121f 48%, #0a0910 100%)}
.mock-quiz .mz-orb{position:absolute;width:130px;height:130px;border-radius:50%;left:-34px;top:-30px;background:radial-gradient(circle,#7c5cff 0%, rgba(124,92,255,0) 68%);opacity:.9}
.mock-quiz .mz-orb.two{left:auto;right:-32px;top:auto;bottom:-36px;width:140px;height:140px;background:radial-gradient(circle,#22d3ee 0%, rgba(34,211,238,0) 70%);opacity:.45}
.mock-quiz .mz-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 0,#000,transparent 78%);
}
.mock-quiz .mz-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:7px 12px 0}
.mock-quiz .mz-brand{display:flex;align-items:center;gap:4px;font-size:6px;font-weight:800;color:#fff}
.mock-quiz .mz-brand em{width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#8f6cff,#22d3ee);display:block}
.mock-quiz .mz-pill{width:28px;height:8px;border-radius:99px;background:linear-gradient(135deg,#c9bcff,#22d3ee)}
.mock-quiz .mz-body{position:relative;display:grid;grid-template-columns:1fr 80px;gap:9px;padding:9px 12px 0}
.mock-quiz .mz-tag{width:46px;height:5px;border-radius:99px;border:1px solid rgba(124,92,255,.6);background:rgba(124,92,255,.22);margin-bottom:7px}
.mock-quiz .mz-title{font-size:12px;line-height:1.06;letter-spacing:-.02em;font-weight:800;color:#fff;margin:0 0 6px}
.mock-quiz .mz-title em{font-style:normal;color:#7fe7f7}
.mock-quiz .mz-lines{display:grid;gap:3px;margin-bottom:8px}
.mock-quiz .mz-lines s{height:2px;border-radius:2px;background:rgba(255,255,255,.22);display:block}
.mock-quiz .mz-lines s:last-child{width:66%}
.mock-quiz .mz-facts{display:flex;gap:4px}
.mock-quiz .mz-facts s{width:22px;height:7px;border-radius:3px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.mock-quiz .mz-card{
  border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  padding:6px;display:grid;gap:4px;align-content:start;
}
.mock-quiz .mz-step{height:2px;border-radius:2px;background:rgba(255,255,255,.22)}
.mock-quiz .mz-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.mock-quiz .mz-progress b{display:block;width:44%;height:100%;background:linear-gradient(90deg,#7c5cff,#22d3ee);border-radius:2px}
.mock-quiz .mz-q{height:3px;width:70%;border-radius:2px;background:rgba(255,255,255,.6);margin:3px 0}
.mock-quiz .mz-opt{
  height:11px;border-radius:4px;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);display:flex;align-items:center;gap:3px;padding:0 3px;
}
.mock-quiz .mz-opt.sel{border-color:rgba(124,92,255,.9);background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(34,211,238,.16))}
.mock-quiz .mz-opt i{width:5px;height:5px;border-radius:2px;background:rgba(255,255,255,.3);flex:none}
.mock-quiz .mz-opt.sel i{background:linear-gradient(135deg,#c9bcff,#22d3ee)}
.mock-quiz .mz-opt s{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.34)}
.mock-quiz .mz-next{height:9px;border-radius:4px;background:linear-gradient(135deg,#c9bcff,#22d3ee);margin-top:2px}
.mock-quiz .mz-below{
  position:absolute;left:12px;right:12px;bottom:10px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;
}
.mock-quiz .mz-below b{
  height:30px;border-radius:6px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  position:relative;
}
.mock-quiz .mz-below b::before{
  content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,#c9bcff,#22d3ee);opacity:.9;
}
.mock-quiz .mz-below b::after{
  content:"";position:absolute;left:5px;bottom:7px;right:8px;height:2px;border-radius:2px;background:rgba(255,255,255,.24);
}

/* ================= мокап 3: портфолио ================= */
.mock-portfolio{background:#c9eee1;display:flex;flex-direction:column}
.mock-portfolio .mp-top{display:flex;align-items:center;justify-content:space-between;padding:7px 11px 0}
.mock-portfolio .mp-brand{display:flex;align-items:center;gap:4px;font-size:6px;font-weight:800;color:#17181c}
.mock-portfolio .mp-brand em{width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#8f6cff,#f6a58b);display:block}
.mock-portfolio .mp-nav{display:flex;gap:6px}
.mock-portfolio .mp-nav s{width:12px;height:2px;border-radius:2px;background:rgba(23,24,28,.35);display:block}
.mock-portfolio .mp-cta{width:26px;height:8px;background:#17181c}
.mock-portfolio .mp-role{width:60px;height:3px;border-radius:2px;background:rgba(23,24,28,.35);margin:9px 11px 6px}
.mock-portfolio .mp-title{
  font-size:19px;line-height:.88;letter-spacing:-.05em;font-weight:700;color:#17181c;
  margin:0 11px 8px;font-family:'Space Grotesk','Manrope',Arial,sans-serif;
}
.mock-portfolio .mp-title em{font-style:normal;color:#6d45ef}
.mock-portfolio .mp-gallery{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:4px;padding:0 11px}
.mock-portfolio .mp-gallery b{border-radius:4px;display:block;min-height:24px}
.mock-portfolio .mp-gallery b:nth-child(1){background:linear-gradient(145deg,#174ee9,#6e44ee);grid-row:span 2}
.mock-portfolio .mp-gallery b:nth-child(2){background:linear-gradient(145deg,#fae6df,#dd6f8b)}
.mock-portfolio .mp-gallery b:nth-child(3){background:linear-gradient(145deg,#292c35,#9d8cff)}
.mock-portfolio .mp-gallery b:nth-child(4){background:linear-gradient(145deg,#e9e4ff,#b9a7ff)}
.mock-portfolio .mp-gallery b:nth-child(5){background:linear-gradient(145deg,#292c35,#9ad8c4)}
.mock-portfolio .mp-band{height:20px;background:#17181c;margin-top:6px;display:flex;align-items:center;justify-content:space-between;padding:0 11px}
.mock-portfolio .mp-band s{display:block;width:34px;height:2px;border-radius:2px;background:rgba(255,255,255,.42)}
.mock-portfolio .mp-band i{display:block;width:16px;height:6px;border-radius:2px;background:#9ad8c4}

/* ================= адаптив ================= */
@media (max-width:1180px){
  .site-preview{height:238px;margin:16px 14px 18px}
}
@media (max-width:900px){
  .site-preview{height:300px;margin:20px 18px 22px}
  .mock-services .ms-body{grid-template-columns:1fr 100px}
  .mock-services .ms-art{height:96px}
  .mock-quiz .mz-body{grid-template-columns:1fr 98px}
  .mock-portfolio .mp-title{font-size:24px}
}