/* Webleads.ai showpiece upgrade: scanner demo + portfolio proof-builds */
:root {
  --wl-gold: 32 88% 64%;
  --wl-glass: hsl(var(--foreground) / 0.055);
  --wl-border: hsl(var(--foreground) / 0.12);
  --wl-border-strong: hsl(var(--foreground) / 0.2);
}

html { scroll-behavior: smooth; }

.wl-showpiece,
.wl-proof-portfolio {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  border-top: 1px solid hsl(var(--foreground) / 0.08);
}

.wl-showpiece {
  background:
    radial-gradient(circle at 18% 12%, hsl(var(--wl-gold) / 0.15), transparent 34rem),
    radial-gradient(circle at 82% 48%, hsl(200 90% 68% / 0.08), transparent 30rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background) / 0.92));
}

.wl-proof-portfolio {
  background:
    radial-gradient(circle at 84% 16%, hsl(var(--wl-gold) / 0.1), transparent 34rem),
    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--background)));
}

.wl-showpiece::before,
.wl-proof-portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 28%, black, transparent 74%);
}

.wl-shell {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.wl-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--wl-border);
  background: hsl(var(--foreground) / 0.045);
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  backdrop-filter: blur(16px);
}

.wl-kicker-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: hsl(var(--accent));
  box-shadow: 0 0 20px hsl(var(--accent) / .7);
}

.wl-showpiece-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.wl-showpiece h2,
.wl-proof-portfolio h2 {
  margin: 1.5rem 0 0;
  font-family: "Instrument Serif", serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.055em;
  max-width: 920px;
  color: hsl(var(--foreground));
}

.wl-showpiece h2 span,
.wl-proof-portfolio h2 span {
  color: hsl(var(--accent));
  font-style: italic;
}

.wl-lede {
  color: hsl(var(--muted-foreground));
  max-width: 42rem;
  line-height: 1.72;
  margin-top: 1.45rem;
}

.wl-signal-card {
  margin-top: 2rem;
  border: 1px solid var(--wl-border);
  background: linear-gradient(180deg, hsl(var(--foreground) / .06), hsl(var(--foreground) / .03));
  border-radius: 1.6rem;
  padding: 1rem;
  box-shadow: 0 32px 100px hsl(0 0% 0% / .24);
  backdrop-filter: blur(20px);
}

.wl-signal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.wl-signal-form label {
  display: grid;
  gap: .45rem;
  color: hsl(var(--muted-foreground));
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wl-signal-form label:first-child { grid-column: 1 / -1; }

.wl-signal-form input,
.wl-signal-form select {
  width: 100%;
  color: hsl(var(--foreground));
  border: 1px solid var(--wl-border);
  background: hsl(var(--background) / .62);
  border-radius: .95rem;
  padding: .85rem .9rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.wl-signal-form input:focus,
.wl-signal-form select:focus {
  border-color: hsl(var(--accent) / .62);
  box-shadow: 0 0 0 4px hsl(var(--accent) / .12);
  background: hsl(var(--background) / .86);
}

.wl-signal-button {
  grid-column: 1 / -1;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: .95rem 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 14px 45px hsl(var(--accent) / .16);
}

.wl-signal-button:hover { transform: translateY(-2px); box-shadow: 0 20px 60px hsl(var(--accent) / .24); }
.wl-signal-button:active { transform: translateY(0); }

.wl-signal-output {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.wl-signal-output[hidden] { display: none; }

.wl-result-row {
  border: 1px solid hsl(var(--foreground) / .08);
  background: hsl(var(--background) / .48);
  border-radius: 1.05rem;
  padding: .9rem;
  animation: wl-rise .45s ease both;
}

.wl-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .84rem;
  font-weight: 700;
}

.wl-result-row p {
  color: hsl(var(--muted-foreground));
  margin: .4rem 0 0;
  font-size: .84rem;
  line-height: 1.52;
}

.wl-meter {
  position: relative;
  overflow: hidden;
  height: .42rem;
  border-radius: 999px;
  margin-top: .72rem;
  background: hsl(var(--foreground) / .08);
}

.wl-meter span {
  display: block;
  height: 100%;
  width: var(--score, 64%);
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--accent) / .55), hsl(var(--accent)));
  animation: wl-meter 1s cubic-bezier(.22,1,.36,1) both;
}

.wl-mini-note {
  margin-top: .9rem;
  color: hsl(var(--muted-foreground));
  font-size: .78rem;
  line-height: 1.5;
}

.wl-orbit-stage {
  min-height: 620px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.wl-browser {
  width: min(100%, 560px);
  min-height: 460px;
  border-radius: 2rem;
  border: 1px solid var(--wl-border-strong);
  background:
    linear-gradient(135deg, hsl(var(--foreground) / .13), transparent 38%),
    linear-gradient(180deg, hsl(var(--background) / .7), hsl(var(--foreground) / .035));
  box-shadow: 0 36px 120px hsl(0 0% 0% / .44), inset 0 1px 0 hsl(var(--foreground) / .12);
  backdrop-filter: blur(24px);
  transform: rotateX(7deg) rotateY(-10deg);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

.wl-browser::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 180deg, transparent, hsl(var(--accent) / .16), transparent, hsl(200 90% 70% / .11), transparent);
  animation: wl-spin 14s linear infinite;
}

.wl-browser-inner {
  position: absolute;
  inset: 1px;
  border-radius: calc(2rem - 1px);
  overflow: hidden;
  background: hsl(var(--background) / .78);
}

.wl-browser-top {
  display: flex;
  align-items: center;
  gap: .42rem;
  height: 3.2rem;
  padding-inline: 1rem;
  border-bottom: 1px solid hsl(var(--foreground) / .08);
}

.wl-dot { width: .62rem; height: .62rem; border-radius: 999px; background: hsl(var(--foreground) / .18); }
.wl-url { margin-left: .5rem; flex: 1; height: 1.6rem; border-radius: 999px; background: hsl(var(--foreground) / .06); color: hsl(var(--muted-foreground)); display: flex; align-items: center; padding-inline: .8rem; font-size: .7rem; }

.wl-preview-body { padding: clamp(1rem, 4vw, 2rem); }
.wl-preview-pill { display: inline-flex; border: 1px solid hsl(var(--accent) / .3); color: hsl(var(--accent)); border-radius: 999px; padding: .35rem .6rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.wl-preview-title { margin-top: 1.2rem; font-family: "Instrument Serif", serif; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .88; letter-spacing: -.055em; }
.wl-preview-copy { margin-top: 1rem; color: hsl(var(--muted-foreground)); line-height: 1.6; max-width: 22rem; font-size: .93rem; }
.wl-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.4rem; }
.wl-preview-tile { border: 1px solid hsl(var(--foreground) / .08); background: hsl(var(--foreground) / .04); border-radius: 1rem; padding: .85rem; min-height: 5.2rem; }
.wl-preview-tile strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: hsl(var(--muted-foreground)); }
.wl-preview-tile span { display: block; margin-top: .55rem; font-size: 1.3rem; font-family: "Instrument Serif", serif; color: hsl(var(--foreground)); }

.wl-orbit {
  position: absolute;
  width: min(92vw, 640px);
  height: min(92vw, 640px);
  border-radius: 50%;
  border: 1px solid hsl(var(--foreground) / .08);
  animation: wl-spin 34s linear infinite;
  pointer-events: none;
}

.wl-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transform: rotate(var(--a)) translateX(min(44vw, 320px)) rotate(calc(-1 * var(--a)));
  border: 1px solid hsl(var(--foreground) / .12);
  background: hsl(var(--background) / .72);
  color: hsl(var(--foreground) / .88);
  border-radius: 999px;
  padding: .65rem .85rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 18px 60px hsl(0 0% 0% / .26);
  backdrop-filter: blur(18px);
}

.wl-build-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 2rem;
}

.wl-build-strip div {
  border: 1px solid var(--wl-border);
  background: hsl(var(--foreground) / .035);
  border-radius: 1rem;
  padding: 1rem;
}

.wl-build-strip strong { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.wl-build-strip span { display: block; margin-top: .55rem; font-size: .95rem; color: hsl(var(--foreground)); }

.wl-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.wl-proof-card {
  min-height: 18rem;
  border: 1px solid var(--wl-border);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, hsl(var(--foreground) / .055), hsl(var(--foreground) / .025));
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.wl-proof-card:hover { transform: translateY(-4px); border-color: hsl(var(--accent) / .32); background: hsl(var(--foreground) / .055); }

.wl-proof-tag {
  display: inline-flex;
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--accent) / .28);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wl-proof-card h3 { margin: 1.4rem 0 0; font-size: 1.15rem; letter-spacing: -.02em; }
.wl-proof-card p { color: hsl(var(--muted-foreground)); line-height: 1.6; margin: .85rem 0 0; font-size: .9rem; }
.wl-proof-card ul { display: grid; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; color: hsl(var(--foreground) / .82); font-size: .84rem; }
.wl-proof-card li::before { content: "→"; color: hsl(var(--accent)); margin-right: .5rem; }

.wl-proof-note {
  margin-top: 1.5rem;
  border: 1px solid hsl(var(--accent) / .2);
  background: hsl(var(--accent) / .055);
  border-radius: 1.1rem;
  padding: 1rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  font-size: .9rem;
}

@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-meter { from { width: 0; } to { width: var(--score, 64%); } }
@keyframes wl-rise { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

@media (max-width: 980px) {
  .wl-showpiece-grid { grid-template-columns: 1fr; }
  .wl-orbit-stage { min-height: 520px; }
  .wl-proof-grid { grid-template-columns: 1fr 1fr; }
  .wl-build-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .wl-showpiece, .wl-proof-portfolio { padding: 4.5rem 0; }
  .wl-signal-form { grid-template-columns: 1fr; }
  .wl-orbit-stage { min-height: auto; padding-top: 2rem; }
  .wl-browser { min-height: 430px; transform: none; }
  .wl-orbit { display: none; }
  .wl-proof-grid { grid-template-columns: 1fr; }
  .wl-build-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-browser::before,
  .wl-orbit,
  .wl-meter span,
  .wl-result-row { animation: none !important; }
  .wl-signal-button:hover,
  .wl-proof-card:hover { transform: none; }
}