/* playground.html — page-specific styles (extracted from inline) */

.pg-hero {
      position: relative; overflow: hidden;
      padding: 10rem 0 6rem; background: var(--bg);
    }
    .pg-hero .blob--1 { width:500px;height:500px;top:-120px;left:-80px; }
    .pg-hero .blob--2 { width:400px;height:400px;bottom:-60px;right:-60px; }

    .pg-hero__inner { position:relative;z-index:2; }
    .pg-hero__badge {
      display:inline-flex;align-items:center;gap:.6rem;
      font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);
      background:var(--surface);border:1px solid var(--border);
      padding:.4rem .9rem;border-radius:var(--radius-pill);
      margin-bottom:2rem;letter-spacing:.06em;
    }
    .pg-hero__badge span { color:var(--orange); }
    .pg-hero__title {
      font-family:var(--font-display);
      font-size:clamp(4rem,9vw,10rem);
      line-height:.88;letter-spacing:.02em;
      margin-bottom:2rem;
    }
    .pg-hero__title em {
      font-style:normal;
      background:linear-gradient(110deg,var(--orange) 0%,var(--purple) 60%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .pg-hero__sub {
      font-size:1.05rem;font-weight:300;line-height:1.7;
      color:var(--text-muted);max-width:500px;font-style:italic;
      margin-bottom:3rem;
    }
    .pg-stats {
      display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap;
    }
    .pg-stat { display:flex;flex-direction:column;gap:.2rem; }
    .pg-stat__num {
      font-family:var(--font-display);font-size:2.2rem;line-height:1;
      background:linear-gradient(135deg,var(--orange),var(--purple));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .pg-stat__label { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.08em; }
    .pg-stat__divider { width:1px;height:36px;background:var(--border); }

    /* Tool grid */
    .tools-section { padding:6rem 0; }
    .tools-grid {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:1.5rem;
      margin-top:4rem;
    }

    /* card spans */
    .tool-card { grid-column: span 4; }
    .tool-card--wide { grid-column: span 6; }
    .tool-card--full { grid-column: span 12; }

    @media(max-width:1024px){
      .tool-card,.tool-card--wide { grid-column:span 6; }
    }
    @media(max-width:640px){
      .tool-card,.tool-card--wide,.tool-card--full { grid-column:span 12; }
    }

    .tool-card__inner {
      display:block;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      overflow:hidden;
      position:relative;
      transition:all .4s cubic-bezier(.22,1,.36,1);
      height:100%;
      text-decoration:none;
      color:inherit;
    }
    .tool-card__inner:hover {
      transform:translateY(-6px);
      border-color:rgba(108,78,243,.35);
      box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(108,78,243,.15);
    }
    .tool-card__inner::before {
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,var(--orange-glow),var(--purple-glow));
      opacity:0;transition:opacity .4s;
    }
    .tool-card__inner:hover::before { opacity:1; }

    /* Preview canvas area */
    .tool-card__preview {
      position:relative;
      height:200px;
      overflow:hidden;
      background:var(--bg-alt);
      border-bottom:1px solid var(--border);
    }
    .tool-card--wide .tool-card__preview { height:240px; }
    .tool-card--full .tool-card__preview { height:180px; }

    /* Per-card preview styles */
    .preview--logo {
      display:flex;align-items:center;justify-content:center;gap:1.5rem;
      padding:2rem;
    }
    .preview--logo .logo-shape {
      animation:logoSpin 8s linear infinite;
    }
    @keyframes logoSpin { to{transform:rotate(360deg)} }
    .preview--logo .logo-shape svg { display:block; }

    .preview--brand {
      display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;
      padding:2rem;
    }
    .preview--brand .brand-word {
      font-family:var(--font-display);font-size:2.4rem;line-height:1;
      background:linear-gradient(110deg,var(--orange),var(--purple));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:brandFlicker 4s ease-in-out infinite;
    }
    @keyframes brandFlicker {
      0%,100%{opacity:1}40%{opacity:.3}42%{opacity:1}44%{opacity:.3}46%{opacity:1}
    }
    .preview--brand .brand-sub {
      font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.15em;
    }

    .preview--theme {
      display:grid;grid-template-columns:repeat(4,1fr);height:100%;
    }
    .preview--theme .swatch {
      height:100%;transition:transform .3s;
    }
    .preview--theme:hover .swatch { transform:scaleY(1.05); }

    .preview--404 {
      display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;
      font-family:var(--font-mono);
    }
    .preview--404 .four-oh-four {
      font-family:var(--font-display);font-size:4rem;line-height:1;color:var(--orange);
      text-shadow:0 0 30px rgba(249,130,25,.6);
      animation:glitch 3s ease-in-out infinite;
    }
    @keyframes glitch {
      0%,90%,100%{text-shadow:0 0 30px rgba(249,130,25,.6)}
      91%{text-shadow:-3px 0 var(--purple),3px 0 var(--orange),0 0 30px rgba(249,130,25,.6)}
      93%{text-shadow:3px 0 var(--purple),-3px 0 var(--orange),0 0 30px rgba(249,130,25,.6)}
      95%{text-shadow:0 0 30px rgba(249,130,25,.6)}
    }
    .preview--404 .mini-pixels {
      display:grid;grid-template-columns:repeat(10,8px);gap:2px;
    }
    .preview--404 .px {
      width:8px;height:8px;border-radius:1px;
      background:var(--orange);opacity:.15;
    }
    .preview--404 .px.on { opacity:.9;animation:pxBlink 1.5s ease-in-out infinite; }
    @keyframes pxBlink {0%,100%{opacity:.9}50%{opacity:.2}}

    .preview--testimonials {
      overflow:hidden;position:relative;
      display:flex;flex-direction:column;justify-content:center;padding:1.5rem;
      gap:.7rem;
    }
    .preview--testimonials .tcard {
      background:rgba(255,255,255,.04);border:1px solid var(--border);
      border-radius:var(--radius-md);padding:.6rem 1rem;
      font-size:.78rem;color:var(--text-muted);line-height:1.4;
      transform:translateX(0);animation:tScroll 12s linear infinite;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .preview--testimonials .tcard:nth-child(2){animation-delay:-4s;}
    .preview--testimonials .tcard:nth-child(3){animation-delay:-8s;}
    @keyframes tScroll {
      0%{opacity:0;transform:translateY(10px)}
      10%{opacity:1;transform:translateY(0)}
      80%{opacity:1}
      100%{opacity:0}
    }

    .tool-card__body {
      padding:1.8rem 2rem 2rem;
      position:relative;z-index:1;
    }
    .tool-card__tag {
      font-family:var(--font-mono);font-size:.62rem;color:var(--orange);
      letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;
    }
    .tool-card__name {
      font-family:var(--font-display);font-size:1.9rem;line-height:1;
      letter-spacing:.04em;color:var(--text);margin-bottom:.7rem;
    }
    .tool-card__desc {
      font-size:.88rem;font-weight:300;line-height:1.6;color:var(--text-muted);
      margin-bottom:1.4rem;
    }
    .tool-card__cta {
      display:inline-flex;align-items:center;gap:.5rem;
      font-family:var(--font-mono);font-size:.72rem;color:var(--orange);
      letter-spacing:.04em;
      transition:gap .25s;
    }
    .tool-card__inner:hover .tool-card__cta { gap:.9rem; }
    .tool-card__cta-arrow { transition:transform .25s; }
    .tool-card__inner:hover .tool-card__cta-arrow { transform:translateX(4px); }

    /* Full-width testimonials card horizontal layout */
    .tool-card--full .tool-card__inner {
      display:grid;grid-template-columns:1fr 1fr;
    }
    .tool-card--full .tool-card__preview {
      border-bottom:none;border-right:1px solid var(--border);
      height:auto;
    }
    .tool-card--full .tool-card__body {
      display:flex;flex-direction:column;justify-content:center;padding:2.5rem;
    }
    @media(max-width:640px){
      .tool-card--full .tool-card__inner { grid-template-columns:1fr; }
      .tool-card--full .tool-card__preview { height:180px;border-right:none;border-bottom:1px solid var(--border); }
    }

    /* Section label */
    .tools-label {
      font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;
      text-transform:uppercase;color:var(--text-muted);
      margin-bottom:2.5rem;display:flex;align-items:center;gap:.8rem;
    }
    .tools-label::after { content:'';flex:1;height:1px;background:var(--border); }

    /* Coming soon badge */
    .soon-badge {
      position:absolute;top:1rem;right:1rem;z-index:10;
      font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
      padding:.25rem .7rem;border-radius:var(--radius-pill);
      background:rgba(108,78,243,.15);border:1px solid rgba(108,78,243,.3);
      color:#a78bfa;
    }

    /* CTA strip (reuse from site) */
    .cta-strip {
      position:relative;overflow:hidden;
      padding:8rem 0;background:var(--bg-alt);
    }
    .cta-strip .blob--1 { width:500px;height:500px;top:-100px;left:-100px; }
    .cta-strip .blob--2 { width:400px;height:400px;bottom:-80px;right:-80px; }
    .cta-strip__inner { position:relative;z-index:2;text-align:center; }
    .cta-title {
      font-family:var(--font-display);font-size:clamp(3.5rem,7vw,7rem);
      line-height:.9;letter-spacing:.02em;color:var(--text);
      margin-bottom:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;
    }
    .cta-desc {
      font-size:1.05rem;font-weight:300;line-height:1.7;
      color:var(--text-muted);max-width:460px;margin:0 auto 2.5rem;
    }
    .cta-actions { display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap; }
    .avail-badge {
      display:flex;align-items:center;gap:.6rem;
      font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);
      background:var(--surface);border:1px solid var(--border);
      padding:.5rem 1.1rem;border-radius:var(--radius-pill);
    }