/* ─── Catalogue ─── */
  .catalogue{padding:120px 0;position:relative;overflow:hidden}
  .catalogue::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 40% 30% at 90% 0%, rgba(255,78,205,0.08) 0%, transparent 50%),
      radial-gradient(ellipse 40% 30% at 0% 100%, rgba(91,127,255,0.06) 0%, transparent 50%);
  }
  .catalogue > .container{position:relative}

  .catalogue-head{
    display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end;margin-bottom:36px;
  }
  .catalogue-head h2{font-size:60px;line-height:1.0;font-weight:700;letter-spacing:-0.035em;margin:18px 0 0}
  .catalogue-head h2 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .catalogue-head p{margin:18px 0 0;color:var(--dim);font-size:16.5px;max-width:520px;line-height:1.55}
  .catalogue-head .head-right{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .catalogue-head .head-right .cstat{padding:16px 18px;background:var(--surface);border:1px solid var(--hair);border-radius:12px}
  .catalogue-head .head-right .cstat .v{font-size:28px;font-weight:700;letter-spacing:-0.02em;color:#fff;line-height:1}
  .catalogue-head .head-right .cstat .v .pink{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .catalogue-head .head-right .cstat .k{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim-2)}

  /* Marquee of new drops */
  .cat-marquee{
    margin:24px 0 32px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,black 5%,black 95%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 5%,black 95%,transparent 100%);
  }
  .cat-marquee-track{
    display:flex;gap:36px;width:max-content;
    animation:cat-marquee 46s linear infinite;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);align-items:center;
  }
  .cat-marquee-track .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);margin-right:10px;vertical-align:-1px}
  .cat-marquee-track .item{display:inline-flex;align-items:center;gap:10px}
  .cat-marquee-track b{color:#fff;font-weight:600}
  @keyframes cat-marquee{to{transform:translateX(-50%)}}

  /* Tabs and filters */
  .catalogue-controls{
    display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:24px;flex-wrap:wrap;
  }
  .cat-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--hair);border-radius:100px}
  .cat-tab{
    background:transparent;border:0;color:var(--dim);padding:10px 18px;
    font-size:13.5px;font-weight:500;border-radius:100px;
    transition:background .2s,color .2s;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
  }
  .cat-tab.active{background:#fff;color:#0a0a0f}
  .cat-tab .cnt{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    padding:2px 7px;background:rgba(255,255,255,0.06);border-radius:100px;color:var(--dim-2);
  }
  .cat-tab.active .cnt{background:rgba(10,10,15,0.1);color:rgba(10,10,15,0.6)}

  .cat-filters{display:flex;gap:6px;flex-wrap:wrap}
  .cat-chip{
    background:transparent;color:var(--dim);
    border:1px solid var(--hair);padding:7px 14px;
    font-size:12.5px;border-radius:100px;cursor:pointer;
    transition:background .2s,color .2s,border-color .2s;
  }
  .cat-chip:hover{color:#fff;border-color:var(--hair-2)}
  .cat-chip.active{background:rgba(163,123,255,0.12);color:#C2A8FF;border-color:rgba(163,123,255,0.35)}

  /* Bento grid */
  .catalogue-grid{
    display:grid;grid-template-columns:repeat(12,1fr);
    grid-auto-rows:220px;gap:12px;
  }
  .style-card{
    position:relative;background:var(--surface);border-radius:14px;overflow:hidden;
    cursor:pointer;transition:transform .25s, box-shadow .25s;
    grid-column:span 3;
  }
  .style-card.big{grid-column:span 5;grid-row:span 2}
  .style-card.tall{grid-column:span 3;grid-row:span 2}
  .style-card.wide-4{grid-column:span 4}
  .style-card.wide-5{grid-column:span 5}
  .style-card.std-3{grid-column:span 3}
  .style-card.std-4{grid-column:span 4}
  .style-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -20px rgba(0,0,0,0.5)}
  .style-card .img{position:absolute;inset:0}
  .style-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
  .style-card:hover .img img{transform:scale(1.06)}
  .style-card .overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
    padding:14px;color:#fff;
    background:linear-gradient(180deg,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.75) 100%);
  }
  .style-card .meta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .style-card .num{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
    padding:4px 8px;border-radius:5px;letter-spacing:0.1em;color:rgba(255,255,255,0.95);
  }
  .style-card .badge-new{
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
    padding:3px 8px;background:var(--pink);color:#fff;border-radius:100px;letter-spacing:0.12em;
    box-shadow:0 0 12px rgba(255,78,205,0.5);
  }
  .style-card .badge-pop{
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
    padding:3px 8px;background:var(--gold);color:#0a0a0f;border-radius:100px;letter-spacing:0.12em;
  }
  .style-card .info h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,0.3)}
  .style-card.big .info h3{font-size:24px}
  .style-card.tall .info h3{font-size:18px}
  .style-card .info .gendr{
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
    color:rgba(255,255,255,0.7);margin-top:4px;display:block;
  }
  .style-card .tags{margin-top:8px;display:flex;gap:4px;flex-wrap:wrap}
  .style-card .tag{
    font-size:9px;padding:3px 7px;border-radius:100px;font-weight:600;
    letter-spacing:0.04em;backdrop-filter:blur(6px);
  }
  .style-card .tag.bespoke{background:rgba(163,123,255,0.25);color:#D7C7FF}
  .style-card .tag.native{background:rgba(46,229,160,0.22);color:#9DF5C8}
  .style-card .tag.casual{background:rgba(91,127,255,0.22);color:#B8C8FF}
  .style-card .tag.wedding{background:rgba(255,200,87,0.22);color:#FFE6A8}
  .style-card .tag.office{background:rgba(180,200,230,0.18);color:#DDE7F5}
  .style-card .tag.streetwear{background:rgba(255,78,205,0.22);color:#FFB8E8}
  .style-card .fave{
    position:absolute;top:14px;right:14px;
    width:30px;height:30px;border-radius:50%;
    background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.85);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,color .2s,transform .2s;font-size:13px;
  }
  .style-card .fave:hover{background:rgba(255,78,205,0.7);color:#fff;transform:scale(1.08)}
  .style-card.faved .fave{background:var(--pink);color:#fff;border-color:transparent}

  /* Locked card */
  .style-card.locked{
    background:linear-gradient(135deg, rgba(163,123,255,0.12) 0%, rgba(91,127,255,0.08) 100%);
    border:1px dashed rgba(163,123,255,0.3);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:24px;text-align:center;cursor:default;
  }
  .style-card.locked:hover{transform:none;box-shadow:none}
  .style-card.locked .lock-icon{
    width:42px;height:42px;border-radius:50%;
    background:rgba(163,123,255,0.18);color:var(--purple);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;margin-bottom:14px;
  }
  .style-card.locked h4{font-size:18px;font-weight:600;letter-spacing:-0.015em;margin:0 0 6px;line-height:1.2}
  .style-card.locked h4 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .style-card.locked p{font-size:12.5px;color:var(--dim);margin:0 0 14px;max-width:240px;line-height:1.5}
  .style-card.locked .btn-mini{
    padding:8px 14px;background:var(--grad-2);color:#fff;
    border-radius:8px;text-decoration:none;font-size:12.5px;font-weight:500;
    display:inline-flex;align-items:center;gap:8px;
  }

  /* Catalogue CTA below grid */
  .catalogue-cta{
    margin-top:32px;padding:36px 40px;
    background:linear-gradient(135deg, rgba(255,78,205,0.06) 0%, rgba(163,123,255,0.04) 50%, rgba(91,127,255,0.06) 100%);
    border:1px solid var(--hair-2);border-radius:18px;
    display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  }
  .catalogue-cta h4{font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:0 0 6px;line-height:1.2}
  .catalogue-cta h4 .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .catalogue-cta p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5}
  .catalogue-cta .cta-row{display:flex;gap:10px;align-items:center}

  /* Compact pricing — homepage trimmed */
  .pricing-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
  .pricing-compact .price-card ul{padding-top:16px}
  .pricing-compact .price-card ul li{padding:4px 0;font-size:13px}

  @media (max-width: 1100px){
    .catalogue-head{grid-template-columns:1fr;gap:24px}
    .catalogue-head h2{font-size:42px}
    .catalogue-head .head-right{grid-template-columns:repeat(3,1fr)}
    .catalogue-controls{flex-direction:column;align-items:stretch}
    .catalogue-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:200px}
    .style-card.big{grid-column:span 6;grid-row:span 2}
    .style-card.tall{grid-column:span 3;grid-row:span 2}
    .style-card, .style-card.std-3, .style-card.std-4, .style-card.wide-4, .style-card.wide-5{grid-column:span 3}
    .catalogue-cta{grid-template-columns:1fr;text-align:center}
    .catalogue-cta .cta-row{justify-content:center;flex-wrap:wrap}
  }

  @media (max-width: 720px){
    .catalogue{padding:72px 0}
    .catalogue-head h2{font-size:28px;line-height:1.1}
    .catalogue-head p{font-size:14px}
    .catalogue-head .head-right{grid-template-columns:1fr 1fr 1fr;gap:8px}
    .catalogue-head .head-right .cstat{padding:12px 14px}
    .catalogue-head .head-right .cstat .v{font-size:22px}
    .catalogue-head .head-right .cstat .k{font-size:8.5px}
    .cat-marquee-track{font-size:10px;gap:20px}
    .cat-tabs{flex-wrap:wrap}
    .cat-tab{padding:8px 12px;font-size:12px}
    .cat-tab .cnt{font-size:9px;padding:1px 5px}
    .cat-filters{gap:5px}
    .cat-chip{padding:6px 11px;font-size:11.5px}
    .catalogue-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:10px}
    .style-card.big{grid-column:span 2;grid-row:span 2}
    .style-card.tall{grid-column:span 1;grid-row:span 2}
    .style-card, .style-card.std-3, .style-card.std-4, .style-card.wide-4, .style-card.wide-5{grid-column:span 1;grid-row:span 1}
    .style-card .info h3{font-size:13px}
    .style-card.big .info h3{font-size:18px}
    .style-card.tall .info h3{font-size:14px}
    .catalogue-cta{padding:24px 22px}
    .catalogue-cta h4{font-size:20px;line-height:1.2}
    .catalogue-cta p{font-size:13.5px}
    .catalogue-cta .cta-row{flex-direction:column;gap:8px;align-items:stretch;width:100%}
    .catalogue-cta .cta-row .btn{justify-content:center;width:100%}
    .pricing-compact{grid-template-columns:1fr;max-width:none}
  }

/* ═══════════════════════════════════════════════════════════
   HERO PHONE SHOWCASE — single mockup, properly sized
═══════════════════════════════════════════════════════════ */

/* Wrapper sits inside .hero section (which is text-align:center).
   We use auto margins + max-width to center reliably. */
.styleu-phone-hero {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 64px auto 0 !important;
  padding: 0 !important;
  text-align: center;
  isolation: isolate;
}

/* Radial brand glow behind the phone */
.styleu-phone-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse at center,
              rgba(163, 123, 255, 0.22) 0%,
              rgba(91, 127, 255, 0.10) 30%,
              transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

/* Phone container */
.styleu-phone-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  line-height: 0;
}
.styleu-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 40px 80px rgba(163, 123, 255, 0.2))
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
}

/* Responsive */
@media (max-width: 1100px) {
  .styleu-phone-hero { max-width: 320px; margin-top: 56px !important; }
  .styleu-phone-frame { max-width: 320px; }
  .styleu-phone-glow { width: 560px; height: 560px; }
}
@media (max-width: 720px) {
  .styleu-phone-hero { max-width: 280px; margin-top: 48px !important; }
  .styleu-phone-frame { max-width: 280px; }
  .styleu-phone-glow { width: 440px; height: 440px; }
}
@media (max-width: 420px) {
  .styleu-phone-hero { max-width: 240px; }
  .styleu-phone-frame { max-width: 240px; }
  .styleu-phone-glow { width: 360px; height: 360px; }
}