/* Showcase frame + 10 independent design systems. One demo in DOM. */

.showcase { padding: 80px 0 40px; }
.showcase-head { margin-bottom: 28px; }
.theme-rail {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.theme-rail::-webkit-scrollbar { height: 0; }
.rail-btn {
  flex: 0 0 auto; scroll-snap-align: start;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 8px 12px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 650;
}
.rail-btn[aria-selected="true"] { color: #071018; background: var(--text); border-color: var(--text); }

.showcase-frame {
  position: relative; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; background: #09090b; min-height: 640px;
}
.frame-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted); background: #0c0e12;
}
.frame-bar strong { color: var(--text); letter-spacing: .08em; font-size: 11px; }
.code-strip {
  display: none; margin: 0; padding: 6px 14px; font-family: var(--mono); font-size: 11px;
  color: #7dd3fc; background: #07080c; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden;
}
.showcase-frame.recon .code-strip { display: block; }
#showcase-stage { min-height: 600px; max-height: 78vh; overflow: auto; }
body.demo-full #showcase-stage { max-height: none; min-height: 100dvh; }

.showcase-frame.recon-out #showcase-stage {
  animation: recon-out .42s cubic-bezier(.4,0,.2,1) both;
}
.showcase-frame.recon-in #showcase-stage {
  animation: recon-in .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes recon-out {
  to { opacity: 0; clip-path: inset(12% 18% 12% 18%); transform: scale(.985); filter: saturate(.6); }
}
@keyframes recon-in {
  from { opacity: 0; clip-path: inset(28% 22% 28% 22%); transform: scale(1.015); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-frame.recon-out #showcase-stage,
  .showcase-frame.recon-in #showcase-stage { animation: none; }
}

body.demo-full { overflow: hidden; }
body.demo-full #navbar,
body.demo-full .mobile-cta,
body.demo-full #to-top,
body.demo-full footer { visibility: hidden; pointer-events: none; }
body.demo-full .showcase {
  position: fixed; inset: 0; z-index: 360; padding: 0; margin: 0;
  background: #000; overflow: auto;
}
body.demo-full .showcase .wrap { width: 100%; max-width: none; }
body.demo-full .showcase-head { display: none; }
body.demo-full .theme-rail {
  display: flex; padding: 10px 16px; background: #0c0e12;
  border-bottom: 1px solid var(--line);
}
body.demo-full .showcase-frame {
  border: 0; border-radius: 0; min-height: 100dvh;
}
body.demo-full .back-kw { display: inline-flex !important; }
.back-kw { display: none; }

.demo { min-height: 100%; }
.demo .d-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.demo .d-nav nav { display: flex; gap: 14px; opacity: .7; }
.demo .d-hero { padding: clamp(32px, 6vw, 72px) clamp(20px, 4vw, 40px); }
.demo .d-hero h2 { margin: 0 0 12px; line-height: .95; letter-spacing: -.03em; font-size: clamp(36px, 6vw, 72px); }
.demo .d-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0 0 12px; }
.demo .d-hero p { max-width: 42ch; line-height: 1.55; }
.d-btn {
  display: inline-flex; margin-top: 18px; padding: 11px 18px; font-size: 13px; font-weight: 650;
  text-decoration: none; color: inherit; border: 1px solid currentColor;
}
.d-btn.ghost { opacity: .85; }
.d-sec { padding: 28px clamp(20px, 4vw, 40px) 36px; }
.d-sec h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.d-foot { padding: 18px 22px 28px; font-size: 12px; opacity: .55; }
.grid3 { display: grid; gap: 14px; }
@media (min-width: 800px) { .grid3 { grid-template-columns: repeat(3,1fr); } }

/* 01 Architecture — light editorial, serif, asymmetry */
.w-arch { background: #efe7d8; color: #1c1712; font-family: "Playfair Display", Georgia, serif; }
.w-arch .d-nav { border-bottom: 1px solid #d7ccb8; font-family: Inter, sans-serif; }
.w-arch .d-hero { display: grid; gap: 24px; }
@media (min-width: 860px) { .w-arch .d-hero { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.w-arch .d-hero h2 { font-weight: 600; }
.w-arch .d-hero p, .w-arch .d-sec p { font-family: Inter, sans-serif; color: #5a5148; }
.w-arch .d-btn { background: #1c1712; color: #efe7d8; border: 0; }
.w-arch .proj { display: grid; gap: 10px; }
@media (min-width: 800px) {
  .w-arch .proj { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  .w-arch .proj .wide { grid-row: span 2; }
}
.w-arch figcaption { font-family: Inter, sans-serif; font-size: 12px; margin-top: 6px; }
.w-arch .split { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.vis-arch, .vis-arch2, .vis-arch3, .vis-arch4 {
  min-height: 180px; background:
    linear-gradient(115deg, #cbb99a 0%, #8a7358 42%, #2e2924 42.2%, #2e2924 58%, #d9c7a8 58.2%);
}
.vis-arch { min-height: 280px; position: relative; }
.vis-arch span { position: absolute; background: #efe7d8; }
.vis-arch span:nth-child(1) { left: 18%; top: 0; bottom: 0; width: 1px; }
.vis-arch span:nth-child(2) { left: 0; right: 0; top: 38%; height: 1px; }
.vis-arch span:nth-child(3) { right: 22%; top: 20%; width: 28%; height: 48%; background: #b7a07e; mix-blend-mode: multiply; }
.vis-arch2 { min-height: 100%; background: linear-gradient(#3a342c, #8f7a5e); }
.vis-arch3 { background: linear-gradient(90deg, #d7c4a4, #6b5a45); min-height: 140px; }
.vis-arch4 { background: linear-gradient(#2a2622, #c4b396); min-height: 140px; }

/* 02 Restaurant — dark, cream, gold, full-bleed */
.w-rest { background: #120c0a; color: #f3e6d4; font-family: "Playfair Display", Georgia, serif; }
.w-rest .d-nav { background: transparent; color: #f3e6d4; }
.w-rest .rest-hero {
  min-height: 42vh;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(180,90,40,.35), transparent 50%),
    linear-gradient(#1a100c, #0c0807);
  text-align: center;
}
.w-rest .rest-hero h2 { font-weight: 600; }
.w-rest .rest-hero p { margin-left: auto; margin-right: auto; color: #cbb8a0; font-family: Inter, sans-serif; }
.w-rest .menu ul { list-style: none; padding: 0; max-width: 520px; }
.w-rest .menu li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed #3a2c24; font-family: Inter, sans-serif; font-size: 14px; }
.w-rest .d-btn { border-color: #c4a574; color: #c4a574; }
.w-rest .hours { display: grid; gap: 20px; }
@media (min-width: 700px) { .w-rest .hours { grid-template-columns: 1fr 1fr; } }
.w-rest .hours p { font-family: Inter, sans-serif; color: #cbb8a0; }

/* 03 Law — dark, gold, editorial not dusty */
.w-law { background: #101216; color: #ece8e1; font-family: "Playfair Display", Georgia, serif; }
.w-law .d-nav { border-bottom: 1px solid #26292f; font-family: Inter, sans-serif; color: #c4a574; }
.w-law .d-hero h2 { max-width: 12ch; }
.w-law .d-hero p { font-family: Inter, sans-serif; color: #a8a39a; }
.w-law .d-btn { background: #c4a574; color: #16140f; border: 0; }
.w-law .grid3 > div { border-top: 1px solid #2a2e36; padding-top: 14px; }
.w-law .grid3 p { font-family: Inter, sans-serif; color: #a8a39a; }
.w-law .quote blockquote { margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.3; color: #c4a574; }

/* 04 Fitness — black, acid green, condensed */
.w-fit { background: #070707; color: #f4f4f4; font-family: Oswald, Impact, sans-serif; }
.w-fit .d-nav { letter-spacing: .2em; }
.w-fit .d-hero h2 { font-size: clamp(48px, 10vw, 96px); color: #c8ff3d; }
.w-fit .d-hero p { font-family: Inter, sans-serif; color: #b0b0b0; max-width: 36ch; }
.w-fit .d-btn { background: #c8ff3d; color: #111; border: 0; font-family: Oswald, sans-serif; letter-spacing: .08em; }
.w-fit .kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.w-fit .kpis div { border: 1px solid #222; padding: 16px; }
.w-fit .kpis b { display: block; font-size: 32px; color: #c8ff3d; }
.w-fit .kpis span, .w-fit td { font-family: Inter, sans-serif; font-size: 13px; color: #9a9a9a; }
.w-fit table { width: 100%; border-collapse: collapse; }
.w-fit td { padding: 10px 8px; border-bottom: 1px solid #222; }

/* 05 Fashion — off-white editorial shop */
.w-fashion { background: #f6f1ea; color: #161412; font-family: Inter, sans-serif; }
.w-fashion .d-nav { font-family: "Playfair Display", serif; letter-spacing: .18em; }
.w-fashion .campaign {
  background: linear-gradient(120deg, #2b2420 0 42%, #e8d7c4 42%);
  color: #f6f1ea; min-height: 38vh;
}
.w-fashion .campaign h2 { font-family: "Playfair Display", serif; }
.w-fashion .campaign .d-btn { background: #f6f1ea; color: #161412; border: 0; }
.w-fashion .products { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 800px) { .w-fashion .products { grid-template-columns: repeat(4,1fr); } }
.w-fashion .swatch { height: 140px; margin-bottom: 8px; }
.w-fashion .swatch.a { background: #3a332c; }
.w-fashion .swatch.b { background: #c9b29a; }
.w-fashion .swatch.c { background: #6e5848; }
.w-fashion .swatch.d { background: #eadfce; border: 1px solid #ddd; }
.w-fashion .d-sec.split { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.w-fashion h3 { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 600; }

/* 06 SaaS — product UI, not agency */
.w-saas { background: #0b0d12; color: #e8eef7; font-family: Inter, sans-serif; }
.w-saas .d-nav { border-bottom: 1px solid #1c2230; letter-spacing: .04em; text-transform: none; font-weight: 650; }
.w-saas .saas-hero { display: grid; gap: 20px; }
@media (min-width: 900px) { .w-saas .saas-hero { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.w-saas .d-hero h2 { font-family: "Space Grotesk", Inter, sans-serif; }
.w-saas .d-hero p { color: #9aa8bd; }
.w-saas .d-btn { background: #4f8cff; color: #071018; border: 0; border-radius: 10px; }
.w-saas .dash {
  background: #121722; border: 1px solid #243044; border-radius: 16px; padding: 14px; min-height: 240px;
}
.w-saas .dash-h { height: 10px; width: 40%; background: #2a3548; border-radius: 99px; margin-bottom: 16px; }
.w-saas .bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.w-saas .bars i { flex: 1; background: linear-gradient(#4f8cff, #1d3a6e); border-radius: 4px 4px 0 0; }
.w-saas .bars i:nth-child(1){height:40%}
.w-saas .bars i:nth-child(2){height:62%}
.w-saas .bars i:nth-child(3){height:55%} .w-saas .bars i:nth-child(4){height:88%}
.w-saas .bars i:nth-child(5){height:70%} .w-saas .bars i:nth-child(6){height:48%}
.w-saas .bars i:nth-child(7){height:76%}
.w-saas .rows { margin-top: 16px; display: grid; gap: 8px; }
.w-saas .rows span { height: 8px; background: #243044; border-radius: 99px; }
.w-saas .grid3 > div { background: #121722; border: 1px solid #243044; border-radius: 14px; padding: 16px; }
.w-saas .grid3 p { color: #9aa8bd; font-size: 14px; }

/* 07 Medical — light, calm, teal */
.w-med { background: #f4f7f6; color: #17302c; font-family: Inter, sans-serif; }
.w-med .d-nav { background: #fff; border-bottom: 1px solid #dce6e3; letter-spacing: .08em; }
.w-med .d-hero h2 { font-family: "Space Grotesk", Inter, sans-serif; }
.w-med .d-hero p { color: #4d6560; }
.w-med .d-btn { background: #1f7a6e; color: #fff; border: 0; border-radius: 999px; }
.w-med .docs { display: grid; gap: 12px; }
@media (min-width: 800px) { .w-med .docs { grid-template-columns: repeat(3,1fr); } }
.w-med .doc { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #dce6e3; padding: 12px; border-radius: 14px; }
.w-med .ava { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,#9fd4cb,#1f7a6e); }
.w-med .doc span { display: block; color: #5b736e; font-size: 13px; }
.w-med .grid3 > div { background: #fff; border: 1px solid #dce6e3; border-radius: 14px; padding: 16px; }

/* 08 Automotive — cinematic black, amber specs */
.w-auto { background: #0a0a0b; color: #f2f2f0; font-family: Oswald, sans-serif; }
.w-auto .auto-hero { position: relative; min-height: 52vh; }
.w-auto .auto-hero h2 { font-size: clamp(64px, 14vw, 140px); letter-spacing: -.04em; }
.w-auto .auto-hero p { font-family: Inter, sans-serif; color: #b5b5b0; }
.w-auto .car {
  height: 120px; margin: 18px 0;
  background:
    radial-gradient(ellipse at 50% 80%, #2a2a28, transparent 60%),
    linear-gradient(90deg, transparent 8%, #3a3a38 20%, #cfc8b8 50%, #3a3a38 80%, transparent 92%);
  clip-path: polygon(8% 70%, 18% 40%, 38% 32%, 70% 32%, 88% 48%, 94% 70%, 6% 70%);
  opacity: .9;
}
.w-auto .specs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 18px; color: #e0b34a; letter-spacing: .08em; }
.w-auto .d-btn { background: #e0b34a; color: #111; border: 0; }
.w-auto .grid3 p { font-family: Inter, sans-serif; color: #9a9a94; }

/* 09 Real estate — warm paper, large listings */
.w-re { background: #f3eee6; color: #1e1a16; font-family: Inter, sans-serif; }
.w-re .d-nav { font-family: "Playfair Display", serif; border-bottom: 1px solid #e0d6c8; }
.w-re .d-hero h2 { font-family: "Playfair Display", serif; }
.w-re .d-hero p { color: #645a50; }
.w-re .listings { display: grid; gap: 14px; }
@media (min-width: 800px) { .w-re .listings { grid-template-columns: repeat(3,1fr); } }
.w-re .listings article { background: #fff; border: 1px solid #e4dacb; }
.w-re .listings h3 { font-size: 16px; letter-spacing: 0; text-transform: none; margin: 10px 12px 4px; }
.w-re .listings b, .w-re .listings p { display: block; margin: 0 12px; }
.w-re .listings p { color: #6a6258; font-size: 13px; padding-bottom: 14px; }
.vis-loft { height: 140px; background: linear-gradient(135deg,#6d746e,#c5b9a6); }
.vis-villa { height: 140px; background: linear-gradient(135deg,#3e4a42,#d7c5a6); }
.vis-pent { height: 140px; background: linear-gradient(180deg,#2c3540,#c9b8a0); }
.w-re .d-btn { background: #1e1a16; color: #f3eee6; border: 0; }

/* 10 Cyber — terminal, the most technical */
.w-cyber { background: #05070a; color: #d7f7e8; font-family: Inter, sans-serif; }
.w-cyber .d-nav { font-family: "JetBrains Mono", monospace; letter-spacing: .08em; color: #3dff9a; border-bottom: 1px solid #123; }
.w-cyber .cyber-hero { display: grid; gap: 20px; }
@media (min-width: 900px) { .w-cyber .cyber-hero { grid-template-columns: 1fr 1fr; } }
.w-cyber .d-hero h2 { font-family: "Space Grotesk", sans-serif; }
.w-cyber .d-hero p { color: #8fb5a3; }
.w-cyber .d-btn { background: #3dff9a; color: #05140c; border: 0; font-family: "JetBrains Mono", monospace; }
.w-cyber .term {
  background: #07110c; border: 1px solid #1a3a2a; border-radius: 10px; padding: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; color: #3dff9a;
}
.w-cyber .term-h { opacity: .5; margin-bottom: 8px; }
.w-cyber .term pre { margin: 0; white-space: pre-wrap; line-height: 1.7; }
.w-cyber .kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.w-cyber .kpis div { border: 1px solid #1a3a2a; padding: 14px; background: #07110c; }
.w-cyber .kpis b { display: block; font-family: "JetBrains Mono", monospace; font-size: 28px; color: #3dff9a; }
.w-cyber .kpis span { font-size: 12px; color: #8fb5a3; }
.w-cyber .grid3 > div { border: 1px solid #1a3a2a; padding: 14px; }
.w-cyber .grid3 p { color: #8fb5a3; }

@media (max-width: 700px) {
  .demo .d-nav nav i { display: none; }
  #showcase-stage { max-height: 70vh; }
}