/* ============================================================
   Bytewren — studio.css
   "Interactive Product Studio" elevated layer. Loads AFTER
   styles.css. Scoped to .studio (the redesigned pages) so it
   never disturbs pages not yet migrated. Dark-first premium.
   ============================================================ */

/* ---- Studio dark canvas + ambient light ------------------------ */
.studio {
  --sx-bg: #070911;
  --sx-bg-2: #0b0e18;
  --sx-glass: rgba(255, 255, 255, 0.035);
  --sx-glass-2: rgba(255, 255, 255, 0.055);
  --sx-line: rgba(255, 255, 255, 0.09);
  --sx-line-2: rgba(255, 255, 255, 0.14);
  --sx-ink: #eef2f9;
  --sx-head: #ffffff;   /* page headings — flips to ink in light theme */
  --sx-mut: #96a1b5;
  --sx-mut-2: #6a7488;
  --sx-teal: #1fe0ab;
  --sx-blue: #4aa8ff;
  --sx-violet: #9d7bff;
  --sx-teal-glow: rgba(31, 224, 171, 0.55);
  --sx-blue-glow: rgba(74, 168, 255, 0.45);
  background: var(--sx-bg);
  color: var(--sx-ink);
}
.studio::before {
  /* fixed ambient aurora behind everything */
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% -5%, rgba(31, 224, 171, 0.16), transparent 60%),
    radial-gradient(55% 40% at 12% 8%, rgba(74, 168, 255, 0.14), transparent 62%),
    radial-gradient(50% 50% at 50% 108%, rgba(157, 123, 255, 0.10), transparent 60%),
    var(--sx-bg);
}
.studio::after {
  /* subtle dot grid texture */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}
.studio .container { max-width: 1200px; }

/* ---- Reveal (richer) ------------------------------------------- */
.studio .reveal { opacity: 0; transform: translateY(26px); }
.studio .reveal.visible {
  opacity: 1; transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .studio .reveal { opacity: 1; transform: none; }
}

/* scroll progress line */
.sx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--sx-teal), var(--sx-blue));
  box-shadow: 0 0 12px var(--sx-teal-glow);
}

/* ---- Shared studio type ---------------------------------------- */
.sx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sx-teal);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(31, 224, 171, 0.08); border: 1px solid rgba(31, 224, 171, 0.22);
}
.sx-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sx-teal);
  box-shadow: 0 0 0 4px rgba(31, 224, 171, 0.18); animation: sxPulse 2.4s infinite;
}
@keyframes sxPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

.sx-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06;
  letter-spacing: -0.03em; color: var(--sx-head);
}
.sx-sub { color: var(--sx-mut); font-size: 1.08rem; line-height: 1.7; max-width: 620px; }
.sx-grad {
  background: linear-gradient(100deg, var(--sx-teal), var(--sx-blue) 60%, var(--sx-violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sx-section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.sx-head { max-width: 720px; margin-bottom: 52px; }
.sx-head .sx-h2 { margin: 16px 0 0; }
.sx-head .sx-sub { margin-top: 16px; }

/* ---- Buttons --------------------------------------------------- */
.sx-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; transition: transform 0.18s, box-shadow 0.25s, background 0.2s, border-color 0.2s, color 0.2s;
  will-change: transform;
}
.sx-btn-primary {
  color: #04211a; background: linear-gradient(180deg, #29ecb8, var(--sx-teal));
  box-shadow: 0 10px 30px rgba(31, 224, 171, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sx-btn-primary:hover { box-shadow: 0 16px 44px rgba(31, 224, 171, 0.45); }
.sx-btn-ghost {
  color: var(--sx-ink); background: var(--sx-glass); border-color: var(--sx-line-2);
  backdrop-filter: blur(8px);
}
.sx-btn-ghost:hover { background: var(--sx-glass-2); border-color: rgba(31, 224, 171, 0.4); }

/* ---- Glass card + glow ----------------------------------------- */
.sx-card {
  position: relative; border-radius: 20px; padding: 26px;
  background: var(--sx-glass); border: 1px solid var(--sx-line);
  backdrop-filter: blur(10px); overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.sx-card[data-glow]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0),
    rgba(31, 224, 171, 0.14), transparent 60%);
}
.sx-card[data-glow]:hover::before { opacity: 1; }
.sx-card:hover { border-color: var(--sx-line-2); background: var(--sx-glass-2); }

/* =====================================================================
   HERO
   ===================================================================== */
.sx-hero { position: relative; padding: clamp(48px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); overflow: clip; }
.sx-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 54px; align-items: center; }
@media (max-width: 960px) { .sx-hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.sx-hero h1 {
  font-family: var(--font-display); font-weight: 600; color: var(--sx-head);
  font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em;
  margin: 22px 0 0;
}
.sx-hero .sx-sub { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.sx-hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sx-hero-meta {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 22px 30px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--sx-mut-2);
}
.sx-hero-meta b { color: var(--sx-ink); font-weight: 600; }

/* cursor-reactive glow layer behind hero copy */
.sx-hero[data-glow]::before {
  content: ''; position: absolute; width: 520px; height: 520px; left: -120px; top: -60px;
  pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle at var(--gx, 40%) var(--gy, 40%),
    rgba(31, 224, 171, 0.16), transparent 60%);
}

/* ---- Hero interactive product mock (self-assembling) ---------- */
.sx-mock {
  position: relative; border-radius: 18px; padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--sx-line-2); backdrop-filter: blur(12px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.sx-mock-bar { display: flex; align-items: center; gap: 7px; padding: 6px 6px 14px; }
.sx-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #33405a; }
.sx-mock-bar i:nth-child(1){ background:#ff5f57 } .sx-mock-bar i:nth-child(2){ background:#febc2e } .sx-mock-bar i:nth-child(3){ background:#28c840 }
.sx-mock-bar span {
  margin-left: 10px; flex: 1; height: 22px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--sx-line);
  font: 500 0.68rem var(--font-mono); color: var(--sx-mut-2);
  display: flex; align-items: center; padding: 0 10px;
}
.sx-mock-body { position: relative; border-radius: 12px; background: rgba(6, 9, 16, 0.6); border: 1px solid var(--sx-line); padding: 16px; min-height: 300px; overflow: hidden; }
.sx-mock-body::after { /* sheen sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.06) 48%, transparent 60%);
  transform: translateX(-120%); animation: sxSheen 6s ease-in-out 1.5s infinite;
}
@keyframes sxSheen { 0%,72%{ transform: translateX(-120%) } 88%,100%{ transform: translateX(120%) } }

/* blocks that snap in on load */
.sx-blk { opacity: 0; transform: translateY(14px) scale(0.98); animation: sxBlk 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes sxBlk { to { opacity: 1; transform: none; } }
.sx-blk.d1{animation-delay:.25s} .sx-blk.d2{animation-delay:.5s} .sx-blk.d3{animation-delay:.75s}
.sx-blk.d4{animation-delay:1s} .sx-blk.d5{animation-delay:1.25s} .sx-blk.d6{animation-delay:1.5s}
@media (prefers-reduced-motion: reduce){ .sx-blk{ opacity:1; transform:none; animation:none } .sx-mock-body::after{ animation:none; display:none } }

.sx-mrow { display: flex; gap: 12px; margin-bottom: 12px; }
.sx-mtile { flex: 1; border-radius: 9px; padding: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--sx-line); }
.sx-mtile .k { font: 500 0.6rem var(--font-mono); color: var(--sx-mut-2); text-transform: uppercase; letter-spacing: .08em; }
.sx-mtile .v { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: #fff; margin-top: 4px; }
.sx-mtile .v.teal { color: var(--sx-teal); } .sx-mtile .v.blue { color: var(--sx-blue); }
.sx-mline { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); margin: 8px 0; }
.sx-mline.w70{ width:70% } .sx-mline.w45{ width:45% } .sx-mline.w90{ width:90% }
.sx-mchart { height: 90px; margin-top: 10px; position: relative; }
.sx-mchart svg { width: 100%; height: 100%; }
.sx-mchart path.line { fill: none; stroke: url(#sxg); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: sxDraw 1.6s ease 1s forwards; }
@keyframes sxDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .sx-mchart path.line{ stroke-dashoffset:0; animation:none } }
.sx-mbadge {
  position: absolute; right: -12px; top: 20px; z-index: 3;
  background: rgba(9, 13, 22, 0.9); border: 1px solid rgba(31,224,171,0.3); border-radius: 12px;
  padding: 10px 13px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 9px; animation: sxFloat 5s ease-in-out infinite;
}
.sx-mbadge .ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(31,224,171,0.15); display: grid; place-items: center; color: var(--sx-teal); }
.sx-mbadge .t { font: 600 0.72rem var(--font-mono); color: #fff; } .sx-mbadge .t small { display:block; color: var(--sx-teal); font-weight: 500; }
@keyframes sxFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@media (prefers-reduced-motion: reduce){ .sx-mbadge{ animation:none } }

/* =====================================================================
   STAT STRIP
   ===================================================================== */
.sx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sx-line);
  border: 1px solid var(--sx-line); border-radius: 18px; overflow: hidden; }
@media (max-width: 720px){ .sx-stats { grid-template-columns: repeat(2, 1fr); } }
.sx-stat { background: var(--sx-bg-2); padding: 26px 22px; text-align: center; }
.sx-stat .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--sx-head); letter-spacing: -0.02em; }
.sx-stat .n .sx-grad { font-weight: 600; }
.sx-stat .l { margin-top: 6px; font: 500 0.78rem var(--font-mono); color: var(--sx-mut); text-transform: uppercase; letter-spacing: 0.06em; }

/* =====================================================================
   SERVICE CARDS (web + apps foregrounded)
   ===================================================================== */
.sx-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* 3-up variant (use the .cols-3 modifier instead of an inline override so
   the responsive breakpoints below actually win on tablet/mobile). */
.sx-svc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .sx-svc-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .sx-svc-grid, .sx-svc-grid.cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 820px){ .sx-svc-grid { grid-template-columns: 1fr; } }
.sx-svc { display: block; color: inherit; padding: 30px; min-height: 230px; display: flex; flex-direction: column; }
.sx-svc.lead { grid-column: span 1; }
.sx-svc .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(31,224,171,0.12); border: 1px solid rgba(31,224,171,0.25); color: var(--sx-teal); margin-bottom: 20px; }
.sx-svc.blue .ic { background: rgba(74,168,255,0.12); border-color: rgba(74,168,255,0.28); color: var(--sx-blue); }
.sx-svc.violet .ic { background: rgba(157,123,255,0.12); border-color: rgba(157,123,255,0.28); color: var(--sx-violet); }
.sx-svc h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--sx-head); }
.sx-svc p { margin-top: 10px; color: var(--sx-mut); font-size: 0.96rem; line-height: 1.6; flex: 1; }
.sx-svc .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font: 600 0.85rem var(--font-mono); color: var(--sx-teal); }
.sx-svc:hover .go svg { transform: translateX(4px); }
.sx-svc .go svg { transition: transform 0.2s; }
.sx-svc .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.sx-svc .tags span { font: 500 0.72rem var(--font-mono); color: var(--sx-mut); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--sx-line); }

/* =====================================================================
   PROCESS PIPELINE
   ===================================================================== */
.sx-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
/* 3-up variant (modifier class, not an inline override — see .sx-svc-grid.cols-3) */
.sx-pipe.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px){ .sx-pipe, .sx-pipe.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .sx-pipe, .sx-pipe.cols-3 { grid-template-columns: 1fr; } }
.sx-step { padding: 26px; position: relative; }
.sx-step .no { font: 600 0.8rem var(--font-mono); color: var(--sx-teal); }
.sx-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--sx-head); margin: 14px 0 8px; }
.sx-step p { color: var(--sx-mut); font-size: 0.9rem; line-height: 1.6; }

/* =====================================================================
   WORK PREVIEW
   ===================================================================== */
.sx-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){ .sx-work-grid { grid-template-columns: 1fr; } }
.sx-work { display: block; color: inherit; padding: 0; overflow: hidden;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-color 0.3s, box-shadow 0.5s; }
.sx-work:hover { transform: translateY(-8px); border-color: rgba(31,224,171,0.42);
  box-shadow: 0 26px 55px -24px rgba(0,0,0,0.78), 0 0 34px -8px rgba(31,224,171,0.20); }
.sx-work .thumb { aspect-ratio: 16/11; position: relative; overflow: hidden; background: #0a1420;
  border-bottom: 1px solid var(--sx-line); }
.sx-work .thumb.g1 { background: linear-gradient(140deg, #0e2b28, #0a1a2e); }
.sx-work .thumb.g2 { background: linear-gradient(140deg, #221033, #0a1a2e); }
.sx-work .thumb.g3 { background: linear-gradient(140deg, #05201a, #06263b); }
.sx-work .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: top center; display: block; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.sx-work:hover .thumb img { transform: scale(1.06); }
.sx-work .thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,8,14,0.85), rgba(4,8,14,0) 46%);
  opacity: 0; transition: opacity 0.5s; }
.sx-work:hover .thumb::after { opacity: 1; }
.sx-work .thumb .badge { position: absolute; top: 13px; left: 13px; z-index: 2;
  font: 600 0.66rem var(--font-mono); letter-spacing: 0.03em; color: #fff;
  background: rgba(6,12,22,0.72); border: 1px solid rgba(255,255,255,0.14);
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.sx-work .visit { position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 0.78rem var(--font-mono); color: #06231b; background: var(--sx-teal);
  padding: 8px 13px; border-radius: 999px; opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s, transform 0.45s cubic-bezier(.2,.7,.2,1); }
.sx-work:hover .visit { opacity: 1; transform: translateY(0); }
.sx-work .visit svg { transition: transform 0.4s; }
.sx-work:hover .visit svg { transform: translate(2px,-2px); }
.sx-work .meta { padding: 17px 20px 20px; }
.sx-work .meta .kicker { display: block; font: 600 0.66rem var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sx-teal); }
.sx-work .meta h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem;
  color: var(--sx-head); margin-top: 6px; transition: color 0.3s; }
.sx-work:hover .meta h4 { color: var(--sx-teal); }
.sx-work .meta p { color: var(--sx-mut); font-size: 0.85rem; margin-top: 5px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce){
  .sx-work, .sx-work .thumb img, .sx-work .visit, .sx-work .meta h4 { transition: none; }
  .sx-work:hover, .sx-work:hover .thumb img { transform: none; }
  .sx-work .visit { opacity: 1; transform: none; }
}

/* =====================================================================
   AI BAND
   ===================================================================== */
.sx-band {
  border-radius: 26px; padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(31,224,171,0.08), rgba(74,168,255,0.06));
  border: 1px solid var(--sx-line-2);
}
.sx-band::before { content: ''; position: absolute; width: 380px; height: 380px; right: -80px; top: -120px;
  background: radial-gradient(circle, rgba(31,224,171,0.22), transparent 65%); filter: blur(20px); }

/* =====================================================================
   BIG CTA
   ===================================================================== */
.sx-cta { text-align: center; border-radius: 28px; padding: clamp(48px, 7vw, 88px) 24px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(31,224,171,0.14), transparent 60%), var(--sx-bg-2);
  border: 1px solid var(--sx-line-2); }
.sx-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--sx-head); letter-spacing: -0.03em; }
.sx-cta p { color: var(--sx-mut); font-size: 1.1rem; margin: 16px auto 0; max-width: 560px; }
.sx-cta .sx-hero-ctas { justify-content: center; margin-top: 32px; }

/* ---- Marquee (tech logos / capability) ------------------------- */
.sx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sx-marquee-track { display: flex; gap: 46px; width: max-content; animation: sxMarq 34s linear infinite; }
.studio .sx-marquee:hover .sx-marquee-track { animation-play-state: paused; }
@keyframes sxMarq { to { transform: translateX(-50%); } }
.sx-marquee-track span { font-family: var(--font-mono); font-size: 0.9rem; color: var(--sx-mut-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce){ .sx-marquee-track { animation: none; } }

/* =====================================================================
   LIGHT THEME — remap the studio layer for the light canvas.
   Dark tokens flip to an off-white surface with ink text, dark-alpha
   glass/hairlines, and readable teal/blue/violet accents. The hero
   product mock and work thumbnails deliberately STAY dark so they read
   as real product screenshots against the light page.
   ===================================================================== */
:root[data-theme="light"] .studio {
  --sx-bg: #fbfcfe;
  --sx-bg-2: #f1f5fa;
  --sx-glass: rgba(13, 20, 34, 0.025);
  --sx-glass-2: rgba(13, 20, 34, 0.05);
  --sx-line: rgba(13, 20, 34, 0.09);
  --sx-line-2: rgba(13, 20, 34, 0.14);
  --sx-ink: #0d1422;
  --sx-head: #0d1422;
  --sx-mut: #525c6b;
  --sx-mut-2: #8a94a3;
  --sx-teal: #00a582;
  --sx-blue: #2f6fe0;
  --sx-violet: #7a5cf0;
  --sx-teal-glow: rgba(0, 189, 140, 0.28);
  --sx-blue-glow: rgba(47, 111, 224, 0.22);
  background: var(--sx-bg);
  color: var(--sx-ink);
}
:root[data-theme="light"] .studio::before {
  background:
    radial-gradient(60% 45% at 78% -5%, rgba(0, 189, 140, 0.10), transparent 60%),
    radial-gradient(55% 40% at 12% 8%, rgba(47, 111, 224, 0.08), transparent 62%),
    radial-gradient(50% 50% at 50% 108%, rgba(122, 92, 240, 0.07), transparent 60%),
    var(--sx-bg);
}
:root[data-theme="light"] .studio::after {
  background-image: radial-gradient(rgba(13, 20, 34, 0.05) 1px, transparent 1px);
  opacity: 0.7;
}
/* eyebrow keeps a bright-teal tint but with a readable dark-teal label */
:root[data-theme="light"] .studio .sx-eyebrow {
  background: rgba(0, 189, 140, 0.10);
  border-color: rgba(0, 189, 140, 0.28);
}

/* Glass morphism reads as washed-out on a light canvas — give the studio
   cards a real "Bright Studio" surface: solid white, a defined hairline
   and a soft ink shadow so they sit crisply on the page. */
:root[data-theme="light"] .studio .sx-card {
  background: #ffffff;
  border-color: #e6eaf1;
  box-shadow: 0 4px 14px rgba(13, 20, 34, 0.05);
}
:root[data-theme="light"] .studio .sx-card:hover {
  background: #ffffff;
  border-color: #cfd7e3;
  box-shadow: 0 14px 36px rgba(13, 20, 34, 0.09);
}
/* Stat strip + big CTA panel get the same crisp light surface */
:root[data-theme="light"] .studio .sx-stat { background: #ffffff; }
:root[data-theme="light"] .studio .sx-cta {
  background: radial-gradient(120% 140% at 50% 0%, rgba(0, 189, 140, 0.08), transparent 60%), #ffffff;
  border-color: #e6eaf1;
  box-shadow: 0 14px 36px rgba(13, 20, 34, 0.06);
}
:root[data-theme="light"] .studio .sx-band { border-color: #dbe6df; }

/* -------------------------------------------------------------------
   Light-mode buttons — "Ink Solid": premium minimal (Vercel/Linear
   school). A near-black solid primary with a crisp lift, answered by a
   clean white secondary. No teal gradient blob. Both lift on hover.
   ------------------------------------------------------------------- */
:root[data-theme="light"] .studio .sx-btn-primary {
  color: #ffffff;
  background: #0d1422;
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(13, 20, 34, 0.16),
    0 10px 24px -8px rgba(13, 20, 34, 0.34);
}
:root[data-theme="light"] .studio .sx-btn-primary:hover {
  background: #1b2740;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(13, 20, 34, 0.18),
    0 16px 32px -8px rgba(13, 20, 34, 0.4);
  transform: translateY(-1.5px);
}
:root[data-theme="light"] .studio .sx-btn-primary:active { transform: translateY(0); }

:root[data-theme="light"] .studio .sx-btn-ghost {
  color: #0d1422;
  background: #ffffff;
  border-color: #e2e7ef;
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(13, 20, 34, 0.05);
}
:root[data-theme="light"] .studio .sx-btn-ghost:hover {
  color: #0d1422;
  background: #f7f9fc;
  border-color: #c8d0dd;
  box-shadow: 0 2px 4px rgba(13, 20, 34, 0.06), 0 10px 22px -8px rgba(13, 20, 34, 0.14);
  transform: translateY(-1.5px);
}
:root[data-theme="light"] .studio .sx-btn-ghost:active { transform: translateY(0); }
/* Capability tag pills: faint ink fill + hairline (white fill vanishes) */
:root[data-theme="light"] .studio .sx-svc .tags span {
  background: #f4f7fb;
  border-color: #e2e7ef;
}
/* Hero product mock + work thumbnails stay a deliberate dark screenshot */
:root[data-theme="light"] .studio .sx-mock {
  background: linear-gradient(180deg, #0e1420, #0a0e18);
  border-color: rgba(13, 20, 34, 0.16);
  box-shadow: 0 34px 80px rgba(13, 20, 34, 0.18);
}
:root[data-theme="light"] .studio .sx-mock-body { background: #070b12; }
:root[data-theme="light"] .studio .sx-mock-bar span {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
}

/* =====================================================================
   FAQ ACCORDION — animate open/close (native <details> just snaps).
   Chevron rotates; the revealed content fades + slides in. Works on
   every page's FAQ (.sx-card details and .wd-faq details alike).
   ===================================================================== */
/* Enable height:0 <-> auto interpolation so the panel can transition. */
:root { interpolate-size: allow-keywords; }
.studio details > summary { list-style: none; cursor: pointer; }
.studio details > summary::-webkit-details-marker { display: none; }
.studio details > summary svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex: none; }
.studio details[open] > summary svg { transform: rotate(180deg); }
/* Animate the actual reveal: the panel grows/shrinks smoothly and fades.
   Modern Chromium gets a buttery slide; browsers without ::details-content
   simply fall back to the native instant toggle (clean, not glitchy). */
.studio details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              content-visibility 0.34s allow-discrete;
}
.studio details[open]::details-content {
  height: auto;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .studio details > summary svg { transition: none; }
  .studio details::details-content { transition: none; }
}

/* =====================================================================
   MOBILE HARDENING (<=600px) — belt-and-suspenders so nothing on the
   studio pages can render multi-column or overflow on a phone.
   ===================================================================== */
@media (max-width: 600px) {
  .studio .sx-svc-grid,
  .studio .sx-svc-grid.cols-3,
  .studio .sx-pipe,
  .studio .sx-pipe.cols-3,
  .studio .sx-work-grid { grid-template-columns: 1fr; }

  /* CTAs go full-width and stack — deliberate, easy tap targets */
  .studio .sx-hero-ctas { width: 100%; }
  .studio .sx-hero-ctas > .sx-btn { flex: 1 1 100%; justify-content: center; }

  /* tighten vertical rhythm + never let a long word break the layout */
  .studio .sx-section { padding: clamp(46px, 12vw, 74px) 0; }
  .studio h1, .studio h2, .studio h3, .studio h4,
  .studio .sx-h2, .studio .sx-hero h1 { overflow-wrap: break-word; }
  .studio .sx-hero-meta { gap: 14px 22px; }
}