:root{
  --bg:#ffffff;
  --bg2:#f5f5f7;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);
  --shadow: 0 20px 50px rgba(0,0,0,.10);
  --r:28px;
  --max: 980px;

  /* helpers for “photo tiles” */
  --edge: rgba(255,255,255,.55);
}

/* Apple-ish typography */
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 18px; }

/* Sticky header */
.header{
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(14px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.logoDot{
  width: 32px; height: 32px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, #7dd3fc, #a78bfa);
}

.navRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
}
.btnPrimary{
  border-color: transparent;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 14px 34px rgba(37,99,235,.30);
}
.btnGhost{
  background: transparent;
  border-color: rgba(0,0,0,.10);
}

/* Full-bleed sections */
.section{ width: 100%; }
.full{ padding: 70px 0; }
.full.gray{ background: var(--bg2); }
@media (max-width: 720px){
  .full{ padding: 52px 0; }
}

/* HERO */
.hero{
  padding: 78px 0 68px;
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  background:
    radial-gradient(1200px 500px at 70% 0%, rgba(125,211,252,.35), transparent 55%),
    radial-gradient(900px 480px at 25% 10%, rgba(167,139,250,.25), transparent 55%),
    #fff;
}
.heroInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.kicker{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.kickerDot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: #2563eb;
}

.h1{
  margin: 18px 0 0;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 14.5ch; /* красивые переносы */
}

.h1Muted{
  color: rgba(17,24,39,.55);
  font-weight: 900;
}

.sub{
  margin-top: 16px;
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}

.ctaRow{
  margin-top: 26px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

@media (max-width: 720px){
  .h1{ max-width: 18ch; line-height: 1.02; }
  .h1Muted{ display:inline-block; margin-top: 6px; }
}

/* “Panel” becomes canvas wrapper (без окна) */
.panel{
  margin-top: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.panelTop{ display:none; }
.panelBody{ padding: 0; }

/* CANVAS */
.productCanvas{
  margin-top: 44px;
  border-radius: 36px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(167,139,250,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,245,247,.86));
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}
.productCanvasInner{ padding: 26px; }

.productCanvasGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 920px){
  .productCanvasGrid{ grid-template-columns: 1fr; }
}

.floatCard{
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
  padding: 18px;
}
.bigMetric{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.75);
}
.bigMetric .k{ color: var(--muted); font-weight: 700; font-size: 13px; }
.bigMetric .v{ margin-top: 8px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.bigMetric .s{ margin-top: 6px; color: var(--muted); line-height: 1.55; }

/* SPLIT SECTIONS */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items:center;
}
@media (max-width: 920px){
  .split{ grid-template-columns: 1fr; gap: 16px; }
}
.h2{
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin: 0;
}
.p{
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 16px;
}
.badges{
  margin-top: 18px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.70);
  color: rgba(17,24,39,.80);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Mock phone */
.mockPhone{
  border-radius: var(--r);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mockPhoneTop{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex; gap: 8px;
}
.dot{ width:10px; height:10px; border-radius: 99px; background: rgba(0,0,0,.16); }
.mockPhoneBody{ padding: 18px; }
.mockLine{
  height: 14px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  margin-top: 10px;
}
.mockCard{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.76);
  padding: 12px;
}
.mockCard .t{ font-weight: 900; letter-spacing:-.02em; }
.mockCard .d{ margin-top: 6px; color: var(--muted); line-height:1.55; font-size: 14px; }

/* CTA */
.cta{
  border-radius: var(--r);
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 380px at 90% 20%, rgba(167,139,250,.18), transparent 55%),
    rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  padding: 26px;
}
.formRow{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.inp{
  flex: 1 1 240px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  padding: 12px 14px;
  outline: none;
}
.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* Footer */
.footer{
  padding: 26px 0 46px;
  color: var(--muted);
  font-size: 13px;
}
.footerRow{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 16px;
}

/* Reveal */
.reveal{ opacity: 0; transform: translateY(14px); transition: all .7s cubic-bezier(.2,.8,.2,1); }
.reveal.show{ opacity: 1; transform: translateY(0); }

/* =======================
   WARDROBE GRID + “IMAGES”
   ======================= */
.gridItems{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 520px){
  .gridItems{ grid-template-columns: repeat(2, 1fr); }
}

.item{
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 14px 14px 12px;
  text-align:left;
  border: 1px solid rgba(0,0,0,.06);
}

.name{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.meta{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag{
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(245,245,247,.92);
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.72);
}
.tag.capsule{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: rgba(37,99,235,.95);
}

/* base photo tile */
.thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120px 90px at 25% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(160px 120px at 75% 65%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(17,24,39,.06), rgba(17,24,39,.02));
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* glass */
.thumb::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(180px 120px at 25% 18%, rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
    radial-gradient(260px 180px at 80% 70%, rgba(255,255,255,.50), rgba(255,255,255,0) 62%),
    radial-gradient(320px 180px at 50% 115%, rgba(0,0,0,.14), rgba(0,0,0,0) 62%);
  opacity:.75;
  pointer-events:none;
}

/* silhouette placeholder (overwritten per item) */
.thumb::before{
  content:"";
  position:absolute;
  inset: 18% 18% 14% 18%;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(0,0,0,.06));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 16px 26px rgba(0,0,0,.10);
  pointer-events:none;
}

.item:hover .thumb{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.12);
}

/* === color “photo” backgrounds per item === */
.i-trench .thumb{
  background:
    radial-gradient(160px 120px at 25% 25%, rgba(253,230,138,.55), rgba(255,255,255,0) 62%),
    radial-gradient(200px 160px at 75% 70%, rgba(167,139,250,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(120,113,108,.12), rgba(17,24,39,.03));
}
.i-shirt .thumb{
  background:
    radial-gradient(160px 120px at 30% 25%, rgba(125,211,252,.45), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(255,255,255,.65), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(2,132,199,.10), rgba(17,24,39,.03));
}
.i-jeans .thumb{
  background:
    radial-gradient(160px 120px at 30% 25%, rgba(59,130,246,.28), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(147,197,253,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(30,58,138,.12), rgba(17,24,39,.03));
}
.i-loafers .thumb{
  background:
    radial-gradient(160px 120px at 35% 28%, rgba(251,191,36,.22), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(148,163,184,.22), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(51,65,85,.14), rgba(17,24,39,.03));
}
.i-coat .thumb{
  background:
    radial-gradient(160px 120px at 28% 25%, rgba(226,232,240,.60), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(167,139,250,.14), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(15,23,42,.10), rgba(17,24,39,.03));
}
.i-sneakers .thumb{
  background:
    radial-gradient(160px 120px at 32% 24%, rgba(34,197,94,.20), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(59,130,246,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(20,184,166,.10), rgba(17,24,39,.03));
}
.i-dress .thumb{
  background:
    radial-gradient(160px 120px at 30% 22%, rgba(244,114,182,.20), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(167,139,250,.18), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(126,34,206,.10), rgba(17,24,39,.03));
}
.i-bag .thumb{
  background:
    radial-gradient(160px 120px at 30% 22%, rgba(245,158,11,.18), rgba(255,255,255,0) 62%),
    radial-gradient(220px 160px at 75% 70%, rgba(148,163,184,.22), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(100,116,139,.12), rgba(17,24,39,.03));
}

/* === readable silhouettes (real shapes) === */
.i-trench .thumb::before{
  inset: 12% 16% 10% 16%;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%) 18% 18% / 40% 40% no-repeat,
    linear-gradient(225deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%) 82% 18% / 40% 40% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.06)) 50% 56% / 72% 10% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.06));
  clip-path: polygon(26% 0, 74% 0, 86% 16%, 92% 30%, 84% 36%, 78% 20%, 72% 16%, 65% 26%, 55% 26%, 55% 100%, 45% 100%, 45% 26%, 35% 26%, 28% 16%, 22% 20%, 16% 36%, 8% 30%, 14% 16%);
}
.i-shirt .thumb::before{
  inset: 16% 18% 14% 18%;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.04)) 50% 0 / 8% 100% no-repeat,
    radial-gradient(80px 40px at 50% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(0,0,0,.06));
  clip-path: polygon(28% 0, 72% 0, 80% 10%, 90% 30%, 80% 34%, 74% 18%, 68% 14%, 60% 24%, 40% 24%, 32% 14%, 26% 18%, 20% 34%, 10% 30%, 20% 10%);
}
.i-jeans .thumb::before{
  inset: 14% 26% 10% 26%;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0)) 50% 0 / 6% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.07));
  clip-path: polygon(20% 0, 80% 0, 86% 12%, 78% 18%, 72% 10%, 58% 10%, 56% 24%, 64% 100%, 52% 100%, 50% 42%, 48% 100%, 36% 100%, 44% 24%, 42% 10%, 28% 10%, 22% 18%, 14% 12%);
}
.i-loafers .thumb::before{
  inset: 28% 14% 22% 14%;
  border-radius: 30px;
  background:
    radial-gradient(80px 40px at 50% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0)) 50% 92% / 90% 16% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(0,0,0,.08));
  clip-path: polygon(8% 55%, 18% 40%, 38% 28%, 62% 28%, 82% 40%, 92% 55%, 86% 70%, 72% 78%, 50% 82%, 28% 78%, 14% 70%);
}
.i-coat .thumb::before{
  inset: 12% 18% 10% 18%;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,0) 45%) 20% 20% / 45% 45% no-repeat,
    linear-gradient(225deg, rgba(255,255,255,.32), rgba(255,255,255,0) 45%) 80% 20% / 45% 45% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(0,0,0,.07));
  clip-path: polygon(28% 0, 72% 0, 84% 16%, 92% 34%, 84% 38%, 76% 20%, 70% 16%, 64% 26%, 56% 26%, 56% 100%, 44% 100%, 44% 26%, 36% 26%, 30% 16%, 24% 20%, 16% 38%, 8% 34%, 16% 16%);
}
.i-sneakers .thumb::before{
  inset: 28% 14% 22% 14%;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0)) 45% 42% / 16% 10% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0)) 55% 52% / 16% 10% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0)) 50% 92% / 92% 18% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(0,0,0,.08));
  clip-path: polygon(10% 60%, 20% 42%, 40% 30%, 62% 32%, 80% 44%, 92% 60%, 88% 72%, 76% 80%, 50% 84%, 26% 80%, 12% 72%);
}
.i-dress .thumb::before{
  inset: 14% 24% 12% 24%;
  border-radius: 26px;
  background:
    radial-gradient(70px 40px at 50% 16%, rgba(0,0,0,.10), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(0,0,0,.07));
  clip-path: polygon(36% 0, 64% 0, 72% 14%, 64% 22%, 58% 14%, 42% 14%, 36% 22%, 28% 14%, 36% 0, 42% 22%, 58% 22%, 74% 100%, 26% 100%);
}
.i-bag .thumb::before{
  inset: 26% 22% 18% 22%;
  border-radius: 28px;
  background:
    radial-gradient(60px 34px at 50% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(0,0,0,.08));
  clip-path: polygon(18% 25%, 30% 10%, 70% 10%, 82% 25%, 88% 40%, 88% 92%, 12% 92%, 12% 40%);
}

/* ===== FIX: читаемые силуэты через SVG mask (override) ===== */
:root{
  --sil: rgba(17,24,39,.22);
  --sil2: rgba(17,24,39,.12);
}

/* общий рендер силуэта */
.productCanvas .gridItems .item .thumb{
  position: relative;
  overflow: hidden;
}

.productCanvas .gridItems .item .thumb::before{
  content:"";
  position:absolute;
  inset: 10%;
  background:
    radial-gradient(120px 80px at 35% 25%, rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), var(--sil2));
  opacity: .95;

  /* маска силуэта */
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;

  /* объём */
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.18));
}

.productCanvas .gridItems .item .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 140px at 50% 120%, rgba(0,0,0,.16), rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%);
  opacity:.35;
  pointer-events:none;
}

/* ===== SVG masks per item ===== */

/* ТРЕНЧ */
.i-trench .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 6h20l8 10-6 6v34H20V22l-6-6 8-10zm6 6-5 6 9 8v30h-8V24l8-8h0zm8 0 5 6-9 8v30h8V24l-8-8z'/%3E%3Cpath d='M28 30h8v4h-8z'/%3E%3C/svg%3E");
}

/* РУБАШКА */
.i-shirt .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 10l10 6 10-6 10 10-8 6v28H20V26l-8-6 10-10zm10 10-6-4-6 6 6 4v30h12V26l6-4-6-6-6 4z'/%3E%3Cpath d='M31 24h2v30h-2z'/%3E%3C/svg%3E");
}

/* ДЖИНСЫ */
.i-jeans .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 8h20l-2 18 4 30H36l-4-18-4 18h-8l4-30-2-18zm8 6-2 10 4 12 4-12-2-10h-4z'/%3E%3C/svg%3E");
}

/* ЛОФЕРЫ (пара) */
.i-loafers .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 36c0-8 10-14 20-14s20 6 20 14c0 10-10 18-20 18S12 46 12 36zm8 2c2 6 7 10 12 10s10-4 12-10c-2-6-7-10-12-10s-10 4-12 10z'/%3E%3Cpath d='M18 34h28v4H18z'/%3E%3C/svg%3E");
}

/* ПАЛЬТО */
.i-coat .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 6h16l10 12-6 6v34H20V24l-6-6 10-12zm8 12-6-6-6 7 6 5v32h12V24l6-5-6-7-6 6z'/%3E%3Cpath d='M31 28h2v26h-2z'/%3E%3Cpath d='M28 30h8v4h-8z'/%3E%3C/svg%3E");
}

/* КЕДЫ */
.i-sneakers .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 40c6-10 16-14 30-12l6 12c-6 8-16 12-30 10l-6-10z'/%3E%3Cpath d='M20 38h18v3H20z'/%3E%3Cpath d='M22 34h18v3H22z'/%3E%3Cpath d='M18 50h34v4H18z'/%3E%3C/svg%3E");
}

/* ПЛАТЬЕ */
.i-dress .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M26 8h12l4 10-6 6 10 32H18l10-32-6-6 4-10zm6 12 4-4-3-6h-2l-3 6 4 4z'/%3E%3C/svg%3E");
}

/* СУМКА */
.i-bag .thumb{
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 26h28l4 28H14l4-28zm6 0c0-10 4-14 8-14s8 4 8 14h-4c0-7-2-10-4-10s-4 3-4 10h-4z'/%3E%3C/svg%3E");
}

/* чуть разные тона под категории */
.i-trench .thumb::before{ background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(120,113,108,.18)); }
.i-shirt .thumb::before{  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(2,132,199,.16)); }
.i-jeans .thumb::before{  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(30,58,138,.18)); }
.i-loafers .thumb::before{background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(51,65,85,.18)); }
.i-coat .thumb::before{   background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(15,23,42,.16)); }
.i-sneakers .thumb::before{background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(20,184,166,.16)); }
.i-dress .thumb::before{  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(126,34,206,.16)); }
.i-bag .thumb::before{    background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(100,116,139,.16)); }/* ===========================================================
   Sticky Interactive Demo (Wardrobe AI) — ONLY this block
   (Можно вставить в конец landing.apple.css)
   =========================================================== */

/* hard safety: если вдруг styles.css тёмный — лендинг остаётся светлым */
html, body { background: #fff; color: rgb(17,24,39); }

/* wrapper */
.demoPanel{
  margin-top: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.demoWrap{
  --scroll: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
  padding: 0;
}

@media (max-width: 920px){
  .demoWrap{ grid-template-columns: 1fr; }
}

/* LEFT column: steps */
.demoSteps{
  display: grid;
  gap: 12px;
}

.demoStep{
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  transform: translateY(calc(var(--scroll) * -4px));
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.demoStep.isActive{
  background: rgba(255,255,255,.84);
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
}

.stepNum{
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(17,24,39,.82);
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.demoStep.isActive .stepNum{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.18);
  color: rgba(37,99,235,.98);
}

.stepTitle{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.stepText{
  margin-top: 6px;
  color: rgba(17,24,39,.64);
  line-height: 1.55;
  font-size: 14px;
}

/* Dropzone */
.dropzone{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(245,245,247,.75);
  padding: 14px;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.dropzone.isDrag{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.45);
  transform: translateY(-2px);
}

.dropTop{
  display:flex;
  gap: 12px;
  align-items: center;
}

.dropIcon{
  width: 42px; height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(37,99,235,.30), rgba(167,139,250,.22));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px rgba(0,0,0,.10);
}

.dropTitle{ font-weight: 900; letter-spacing: -0.02em; }
.dropSub{ margin-top: 2px; font-size: 13px; color: rgba(17,24,39,.62); }

.dropBottom{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.fileName{
  font-size: 13px;
  color: rgba(17,24,39,.58);
}

.hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(37,99,235,.95);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 14px;
  padding: 10px 12px;
  display: none;
}

.pillRow{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  font-weight: 850;
  font-size: 13px;
  color: rgba(17,24,39,.78);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pill:hover{ transform: translateY(-1px); }
.pill.isActive{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.25);
  color: rgba(37,99,235,.98);
}

.buildBtn{ margin-top: 12px; }
.miniNote{
  margin-top: 10px;
  color: rgba(17,24,39,.52);
  font-size: 12px;
  line-height: 1.45;
}

/* RIGHT column: stage */
.demoStage{
  position: sticky;
  top: 88px;
  height: min(70vh, 640px);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(167,139,250,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,245,247,.86));
  transform: translateY(calc(var(--scroll) * -10px)) scale(calc(1 + (var(--scroll) * 0.02)));
  transition: transform .25s ease;
}

@media (max-width: 920px){
  .demoStage{ position: relative; top: auto; height: auto; transform: none; }
}

.demoStageTop{
  padding: 14px 16px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
}

.stageTitle{ font-weight: 950; letter-spacing: -0.02em; }
.stageMeta{ font-size: 12px; color: rgba(17,24,39,.55); }

.demoStageBody{
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px){
  .demoStageBody{ grid-template-columns: 1fr; }
}

/* Left area */
.userItem{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(0,0,0,.06);
}

.userThumb{
  width: 52px; height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(20px 20px at 35% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(167,139,250,.14));
  background-size: cover;
  background-position: center;
}

.userThumb.hasPhoto{
  background-size: cover;
  background-position: center;
}

.userName{ font-weight: 950; letter-spacing: -0.02em; }
.userSub{ margin-top: 2px; font-size: 12px; color: rgba(17,24,39,.58); }

.stageControls{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(0,0,0,.06);
}

.ctrlRow{ display:flex; justify-content: space-between; gap: 10px; }
.ctrlRow + .ctrlRow{ margin-top: 8px; }
.ctrlK{ font-size: 12px; color: rgba(17,24,39,.55); }
.ctrlV{ font-weight: 900; color: rgba(17,24,39,.80); }

.outfits{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(0,0,0,.06);
  min-height: 220px;
}

.outTitle{ font-weight: 950; letter-spacing: -0.02em; }
.outGrid{ margin-top: 10px; display: grid; gap: 10px; }
.outEmpty{ font-size: 13px; color: rgba(17,24,39,.55); }

.outCard{
  border-radius: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(8px);
  animation: outIn .45s ease forwards;
}

@keyframes outIn{
  to{ opacity: 1; transform: translateY(0); }
}

.outH{ font-weight: 950; letter-spacing: -0.02em; }
.outList{ margin-top: 6px; display:flex; flex-wrap: wrap; gap: 6px; }
.outList span{
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(17,24,39,.72);
}
.outHint{ margin-top: 6px; font-size: 12px; color: rgba(17,24,39,.55); }

/* Right: catalog */
.catalogTitle{ font-weight: 950; letter-spacing: -0.02em; }

.wardrobeGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wItem{
  border-radius: 18px;
  padding: 10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.12);
}

.wThumb{
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(90px 50px at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(17,24,39,.10), rgba(17,24,39,.03));
}

.wName{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.72);
}

.wBlazer{ background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(167,139,250,.18)); }
.wShirt{  background: linear-gradient(135deg, rgba(125,211,252,.28), rgba(255,255,255,.15)); }
.wPants{  background: linear-gradient(135deg, rgba(59,130,246,.20), rgba(17,24,39,.05)); }
.wShoes{  background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(17,24,39,.05)); }
.wBag{    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(17,24,39,.05)); }
.wCoat{   background: linear-gradient(135deg, rgba(148,163,184,.22), rgba(17,24,39,.05)); }

.wPlaceholder{ opacity: .72; outline: 2px solid rgba(37,99,235,.18); }
.wReady{ opacity: 1; outline: 2px solid rgba(34,197,94,.18); }

.catalogHint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(17,24,39,.55);
}

#demoStage[data-active-step="1"] .outfits{ opacity: .55; filter: blur(.2px); }
#demoStage[data-active-step="1"] .stageControls{ opacity: .75; }
#demoStage[data-active-step="2"] .outfits{ opacity: .75; }
#demoStage[data-active-step="3"] .outfits{ opacity: 1; filter:none; }

@media (prefers-reduced-motion: reduce){
  .demoStage, .demoStep{ transition: none !important; transform: none !important; }
  .outCard{ animation: none !important; }
}