/* ============================================================
   CodebyCarter — studio.css
   "Build YOUR site — LIVE" interactive previewer. Visitors pick
   industry + color + vibe + business name, watch a real mockup
   render in real-time, then submit it for a real build quote.
   The single biggest lead-capture move on the page.
   ============================================================ */

.studio{
  background:
    radial-gradient(900px 700px at 80% 20%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(700px 500px at 15% 80%, rgba(236,72,153,.08), transparent 60%),
    linear-gradient(170deg, #0A0A12 0%, #14121E 50%, #0A0A12 100%);
  color:#F5F5F7;
  padding:clamp(110px,13vw,180px) 0;
  position:relative;overflow:hidden;
}
.studio::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.20), transparent 50%),
    radial-gradient(1px 1px at 30% 70%, rgba(168,85,247,.30), transparent 50%),
    radial-gradient(1px 1px at 80% 40%, rgba(236,72,153,.25), transparent 50%),
    radial-gradient(2px 2px at 60% 85%, rgba(255,255,255,.15), transparent 50%),
    radial-gradient(1px 1px at 95% 10%, rgba(168,85,247,.25), transparent 50%);
  background-size:300px 300px;
  opacity:.7;
}

.studio .shell{position:relative;z-index:2}

/* ============================================================
   HEAD
   ============================================================ */
.studio-head{margin-bottom:48px;max-width:820px}
.studio-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.20em;
  text-transform:uppercase;color:#EC4899;font-weight:700;
  margin-bottom:18px;display:inline-flex;align-items:center;gap:10px;
}
.studio-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#EC4899;
  box-shadow:0 0 8px #EC4899;animation:stPulse 1.5s ease-in-out infinite;
}
@keyframes stPulse{0%,100%{opacity:1}50%{opacity:.4}}

.studio-h{
  font-size:clamp(42px,7vw,96px);line-height:1.0;letter-spacing:-.038em;
  font-weight:600;margin-bottom:22px;color:#F5F5F7;
}
.studio-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:200% 200%;animation:hue 5s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.studio-sub{
  font-size:clamp(17px,1.7vw,21px);color:rgba(245,245,247,.72);line-height:1.55;
  max-width:60ch;
}
.studio-sub b{color:#F5F5F7;font-weight:600}

/* "Heads up — this is a visualizer" disclaimer line */
.studio-disclaimer{
  margin-top:18px;
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid #FFE8A0;
  border-radius:10px;
  font-size:14px;line-height:1.55;
  color:rgba(245,245,247,.78);
  max-width:62ch;
  font-family:'Space Grotesk',sans-serif;
}
.studio-disclaimer b{color:#FFE8A0;font-weight:700}
.studio-disclaimer em{
  font-style:italic;font-family:'Instrument Serif',serif;
  color:rgba(245,245,247,.92);font-size:1.05em;
}
.studio-disclaimer-tag{
  display:inline-block;flex-shrink:0;
  padding:3px 9px 4px;border-radius:99px;
  background:linear-gradient(135deg, #FFE8A0, #D4A437);
  color:#0A0A08;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;
  margin-top:1px;
}
@media (max-width:560px){
  .studio-disclaimer{flex-direction:column;gap:8px;padding:12px 14px}
}

/* Punchy callout line — "if my site can build a site..." */
.studio-flex{
  margin-top:24px;display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px 14px 18px;
  background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(236,72,153,.08));
  border:1px solid rgba(236,72,153,.30);
  border-radius:99px;
  box-shadow:0 10px 30px -12px rgba(168,85,247,.25);
}
.studio-flex-mark{
  display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:200% 200%;animation:hue 4s linear infinite;
  color:#fff;font-size:16px;font-weight:900;
  box-shadow:0 4px 12px -2px rgba(168,85,247,.45);
  flex-shrink:0;
}
.studio-flex-text{
  font-size:15.5px;line-height:1.4;color:rgba(245,245,247,.92);
  letter-spacing:-.005em;font-weight:500;
  font-family:'Space Grotesk',sans-serif;
}
.studio-flex-text em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#FFE8A0,#EC4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.08em;
}
@media (max-width:560px){
  .studio-flex{padding:12px 18px;gap:10px}
  .studio-flex-text{font-size:13.5px}
  .studio-flex-mark{width:26px;height:26px;font-size:14px}
}

/* ============================================================
   LAYOUT: controls (left) + live preview (right)
   ============================================================ */
.studio-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:36px;align-items:start;
}

/* === CONTROL PANEL === */
.studio-controls{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:28px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.studio-row{margin-bottom:22px}
.studio-row:last-child{margin-bottom:0}

.studio-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,245,247,.55);font-weight:700;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.studio-label .step{
  display:inline-grid;place-items:center;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  color:#fff;font-size:10px;font-weight:900;
}

/* Industry chips */
.studio-industry{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.studio-chip{
  padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.10);
  color:rgba(245,245,247,.85);
  font-size:13px;font-weight:500;letter-spacing:-.005em;
  cursor:none;text-align:left;display:flex;align-items:center;gap:10px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease;
  font-family:inherit;
}
.studio-chip:hover{transform:translateY(-2px);border-color:rgba(236,72,153,.40)}
.studio-chip.is-active{
  background:linear-gradient(135deg,rgba(168,85,247,.20),rgba(236,72,153,.18));
  border-color:#EC4899;color:#F5F5F7;
}
.studio-chip-icon{font-size:18px;flex-shrink:0}

/* Color swatches */
.studio-colors{display:flex;gap:9px;flex-wrap:wrap}
.studio-color{
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  cursor:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
  position:relative;
}
.studio-color:hover{transform:scale(1.15)}
.studio-color.is-active{
  border-color:#FFFFFF;border-width:3px;
  transform:scale(1.10);
  box-shadow:0 0 0 2px rgba(0,0,0,.4);
}

/* Vibe toggles */
.studio-vibes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.studio-vibe{
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.10);
  color:rgba(245,245,247,.80);font-size:12px;font-weight:500;
  cursor:none;text-align:center;font-family:inherit;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.studio-vibe:hover{transform:translateY(-1px);border-color:rgba(236,72,153,.40)}
.studio-vibe.is-active{
  background:rgba(236,72,153,.12);border-color:#EC4899;color:#F5F5F7;
}

/* Name input */
.studio-input{
  width:100%;padding:13px 16px;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;
  color:#F5F5F7;background:rgba(0,0,0,.30);
  border:1.5px solid rgba(255,255,255,.10);border-radius:12px;
  outline:none;cursor:text;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.studio-input:focus{border-color:#EC4899;box-shadow:0 0 0 4px rgba(236,72,153,.15)}
.studio-input::placeholder{color:rgba(245,245,247,.30);font-style:italic}

/* Email capture (last row) */
.studio-capture{
  margin-top:28px;padding-top:22px;border-top:1px dashed rgba(255,255,255,.12);
}
.studio-capture-h{
  font-size:17px;font-weight:600;letter-spacing:-.015em;
  color:#F5F5F7;margin-bottom:8px;
}
.studio-capture-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.studio-capture-sub{
  font-size:13px;color:rgba(245,245,247,.65);line-height:1.5;margin-bottom:16px;
}
.studio-email-row{display:flex;gap:8px}
.studio-email{
  flex:1;padding:13px 16px;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;
  color:#F5F5F7;background:rgba(0,0,0,.30);
  border:1.5px solid rgba(255,255,255,.10);border-radius:12px;
  outline:none;cursor:text;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.studio-email:focus{border-color:#EC4899;box-shadow:0 0 0 3px rgba(236,72,153,.15)}
.studio-email::placeholder{color:rgba(245,245,247,.30)}
.studio-submit{
  padding:0 22px;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:220% 220%;animation:hue 5s linear infinite;
  color:#fff;font-weight:700;font-size:14px;letter-spacing:-.005em;
  border:none;border-radius:12px;cursor:none;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 12px 30px -10px rgba(168,85,247,.45);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  font-family:inherit;flex-shrink:0;
}
.studio-submit:hover{transform:translateY(-2px) scale(1.03)}

.studio-success{
  margin-top:14px;padding:16px 18px;border-radius:12px;
  background:rgba(168,85,247,.10);
  border:1px solid rgba(168,85,247,.30);
  color:#F5F5F7;font-size:13.5px;line-height:1.5;
  display:none;
}
.studio-success.is-visible{display:block;animation:stFade .5s ease both}
.studio-success b{color:#EC4899;font-weight:700}
@keyframes stFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   LIVE PREVIEW (right side)
   ============================================================ */
.studio-preview{
  position:sticky;top:30px;
  border-radius:20px;overflow:hidden;
  box-shadow:0 36px 90px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  aspect-ratio:4/5;
  background:var(--st-bg, #1E40AF);
  display:flex;flex-direction:column;
  transition:background .55s cubic-bezier(.16,1,.3,1);
  --st-fg:#FFFFFF;
  --st-accent:#FDE68A;
}

/* Fake browser chrome */
.studio-chrome{
  padding:10px 14px;background:rgba(0,0,0,.30);
  display:flex;gap:5px;align-items:center;
}
.studio-chrome span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.studio-chrome span:nth-child(1){background:#EB6A5C}
.studio-chrome span:nth-child(2){background:#F6BB3F}
.studio-chrome span:nth-child(3){background:#67C657}
.studio-chrome-url{
  margin-left:10px;flex:1;
  background:rgba(0,0,0,.30);border-radius:6px;
  padding:4px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.65);
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}

/* Site content area */
.studio-canvas{
  flex:1;display:flex;flex-direction:column;
  padding:24px 26px;
  color:var(--st-fg);
  background:var(--st-bg);
  transition:background .55s ease;
  position:relative;
}

.studio-canvas-nav{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;
}
.studio-canvas-logo{
  font-weight:800;font-size:15px;letter-spacing:-.01em;
}
.studio-canvas-cta-top{
  padding:6px 11px;border-radius:6px;
  background:var(--st-accent);color:#1A1A1A;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
}

.studio-canvas-hero{margin-top:32px;margin-bottom:30px}
.studio-canvas-h{
  font-size:36px;line-height:1.0;letter-spacing:-.025em;
  font-weight:700;margin-bottom:14px;
}
.studio-canvas-h em{font-style:italic;color:var(--st-accent)}
.studio-canvas-p{
  font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.85);margin-bottom:18px;max-width:32ch;
}
.studio-canvas-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 20px;border-radius:99px;
  background:var(--st-accent);color:#1A1A1A;
  font-weight:700;font-size:13px;letter-spacing:-.005em;
  align-self:flex-start;
}

.studio-canvas-foot{
  margin-top:auto;padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.10em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;
  border-top:1px solid rgba(255,255,255,.10);
}

/* === Vibe variants (font/treatment overrides) === */
.studio-preview[data-vibe="bold"] .studio-canvas-h{text-transform:uppercase;letter-spacing:-.015em}
.studio-preview[data-vibe="bold"] .studio-canvas-logo{text-transform:uppercase;letter-spacing:.02em}

.studio-preview[data-vibe="elegant"] .studio-canvas{font-family:'Instrument Serif',serif}
.studio-preview[data-vibe="elegant"] .studio-canvas-h{font-style:italic;font-weight:400}
.studio-preview[data-vibe="elegant"] .studio-canvas-logo{font-style:italic;font-weight:400;font-size:18px}
.studio-preview[data-vibe="elegant"] .studio-canvas-cta-top,
.studio-preview[data-vibe="elegant"] .studio-canvas-cta,
.studio-preview[data-vibe="elegant"] .studio-canvas-foot{font-family:'Helvetica',sans-serif}

.studio-preview[data-vibe="clean"] .studio-canvas{font-family:'Inter','Helvetica',sans-serif}
.studio-preview[data-vibe="clean"] .studio-canvas-h{font-weight:600;letter-spacing:-.03em}

/* "Live" tag overlay */
.studio-preview-live{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:99px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#FFFFFF;font-weight:700;
  border:1px solid rgba(255,255,255,.10);
}
.studio-preview-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#EC4899;
  box-shadow:0 0 6px #EC4899;animation:stPulse 1.5s ease-in-out infinite;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:980px){
  .studio-grid{grid-template-columns:1fr;gap:28px}
  .studio-preview{position:relative;top:0;aspect-ratio:4/5;max-width:520px;margin:0 auto}
}
@media (max-width:560px){
  .studio-industry{grid-template-columns:1fr}
  .studio-canvas{padding:20px}
  .studio-canvas-h{font-size:28px}
  .studio-email-row{flex-direction:column}
  .studio-submit{padding:13px 20px;justify-content:center}
}