:root {
  --studio-blue: #3b5bff;
  --studio-cyan: #36ddf0;
  --studio-coral: #ff5145;
  --studio-violet: #8567ff;
  --studio-mint: #69e7be;
  --studio-black: #05070b;
  --studio-white: #f4f7fa;
}

html { scroll-behavior: smooth; }
body { margin: 0; }

.studio-home {
  --page: #0c0e13;
  --surface: #141821;
  --surface-2: #1a1f2a;
  --ink: #f4f7fa;
  --muted: #aeb7c8;
  --line: rgba(244, 247, 250, .15);
  --soft-line: rgba(244, 247, 250, .08);
  min-width: 320px;
  overflow: clip;
  color: var(--ink);
  background: var(--page);
  font-family: "Helvetica Neue", "Aptos", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"] .studio-home {
  --page: #edf0f6;
  --surface: #ffffff;
  --surface-2: #e2e6ef;
  --ink: #090b10;
  --muted: #596171;
  --line: rgba(9, 11, 16, .16);
  --soft-line: rgba(9, 11, 16, .08);
}

.studio-home *, .studio-home *::before, .studio-home *::after { box-sizing: border-box; }
.studio-home a { color: inherit; text-decoration: none; }
.studio-home button, .studio-home input, .studio-home select, .studio-home textarea { font: inherit; }
.studio-home img { max-width: 100%; }
.studio-home :focus-visible { outline: 3px solid var(--studio-cyan); outline-offset: 4px; }
.studio-home h1, .studio-home h2, .studio-home h3, .studio-home p { margin: 0; }

.studio-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.studio-kicker > span { color: var(--studio-cyan); font-size: .58rem; }

.studio-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}

.studio-button span, .studio-header-cta span, .studio-case-actions a span, .studio-integrations-copy > a span, .studio-offer-copy a span, .studio-footer-links a span { transition: transform .3s ease; }
.studio-button:hover, .studio-header-cta:hover { transform: translateY(-2px); }
.studio-button:hover span, .studio-header-cta:hover span, .studio-case-actions a:hover span, .studio-integrations-copy > a:hover span, .studio-offer-copy a:hover span, .studio-footer-links a:hover span { transform: translate(3px, -3px); }
.studio-button-primary { background: var(--studio-white); color: var(--studio-black) !important; }
.studio-button-ghost { border-color: rgba(255,255,255,.28); color: #fff !important; }
.studio-button-ghost:hover { background: rgba(255,255,255,.08); }
.studio-button-invert { background: var(--studio-black); color: #fff !important; }
.studio-button-light { background: #fff; color: var(--studio-black) !important; }

/* Header */
.studio-header {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 50%;
  width: min(1440px, calc(100% - 40px));
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  padding: 8px 10px 8px 17px;
  color: #f7f9ff;
  background: rgba(7, 9, 14, .72);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.2);
  backdrop-filter: blur(20px) saturate(130%);
  transform: translateX(-50%);
}

.studio-wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: .94rem; font-weight: 800; letter-spacing: -.035em; }
.studio-wordmark > span:last-child { display: flex; }
.studio-wordmark small { color: var(--studio-cyan); font-size: inherit; }
.studio-wordmark-symbol { width: 34px; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; color: #fff; background: var(--studio-blue); border-radius: 9px; font: 900 .84rem/1 Arial, sans-serif; letter-spacing: -.25em; }
.studio-wordmark-symbol::after { content: ""; position: absolute; inset: auto -15% -28% 10%; height: 55%; background: var(--studio-cyan); transform: rotate(-18deg); }
.studio-wordmark-symbol span { position: relative; z-index: 1; color: var(--studio-black); transform: translateX(2px); }

.studio-desktop-nav { justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2.25vw, 38px); }
.studio-desktop-nav a { position: relative; padding: 11px 0; color: rgba(255,255,255,.7); font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.studio-desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: var(--studio-cyan); transition: right .3s ease; }
.studio-desktop-nav a:hover { color: #fff; }
.studio-desktop-nav a:hover::after { right: 0; }

.studio-header-actions { display: flex; align-items: center; gap: 7px; }
.studio-home .theme-toggle, .studio-home .language-switcher > summary {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  cursor: pointer;
  list-style: none;
}
.studio-home .theme-toggle:hover, .studio-home .language-switcher > summary:hover { background: rgba(255,255,255,.13); }
.studio-home .language-switcher { position: relative; }
.studio-home .language-switcher > summary::-webkit-details-marker { display: none; }
.studio-home .language-switcher > summary span, .studio-home .language-switcher > summary i { display: none; }
.studio-home .language-switcher > summary b { font-size: .69rem; letter-spacing: .08em; }
.studio-home .language-menu { position: absolute; top: 51px; right: 0; width: 170px; padding: 8px; background: #0f1219; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.studio-home .language-menu a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; color: rgba(255,255,255,.74); font-size: .77rem; }
.studio-home .language-menu a:hover, .studio-home .language-menu a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.studio-home .language-menu a span { color: var(--studio-cyan); font-family: ui-monospace, monospace; font-size: .65rem; }
.studio-header-cta { min-height: 42px; display: inline-flex; align-items: center; gap: 22px; padding: 0 17px; color: var(--studio-black) !important; background: var(--studio-cyan); border-radius: 11px; font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; transition: transform .3s ease; }
.studio-mobile-nav { display: none; }

/* Hero */
.studio-hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(480px, .92fr) minmax(500px, 1.08fr);
  align-items: center;
  gap: clamp(26px, 4vw, 80px);
  padding: 128px max(4vw, 48px) 80px;
  color: #f4f7fa;
  background:
    linear-gradient(90deg, rgba(5,7,11,.98) 0%, rgba(5,7,11,.9) 43%, rgba(5,7,11,.52) 65%, rgba(5,7,11,.95) 100%),
    radial-gradient(circle at 72% 45%, rgba(59,91,255,.2), transparent 38%),
    #05070b;
}

.studio-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.studio-hero::after { content: "REAL"; position: absolute; right: -2vw; bottom: -4vw; z-index: 0; color: rgba(255,255,255,.025); font: 900 clamp(12rem, 28vw, 34rem)/.7 "Arial Black", sans-serif; letter-spacing: -.1em; pointer-events: none; }
.studio-hero-copy, .studio-hero-visual { position: relative; z-index: 2; }
.studio-hero-copy { width:100%; min-width:0; max-width: 690px; padding-top: 15px; }
.studio-hero-copy .studio-kicker { margin-bottom: 32px; color: rgba(255,255,255,.7); }
.studio-hero h1 {
  max-width: 900px;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(4.4rem, 6.15vw, 7.4rem);
  font-weight: 900;
  line-height: .79;
  letter-spacing: -.085em;
  text-transform: uppercase;
}
.studio-hero h1 > span { display:block; white-space:nowrap; }
.studio-hero h1 em { color: var(--studio-cyan); font: inherit; font-style: italic; }
.studio-hero-intro { max-width: 630px; margin-top: 35px !important; color: rgba(244,247,250,.7); font-size: clamp(1rem, 1.16vw, 1.22rem); line-height: 1.65; }
.studio-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.studio-hero-price { max-width: 620px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; margin-top: 30px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.studio-hero-price > div { display: flex; flex-direction: column; gap: 2px; }
.studio-hero-price small { color: var(--studio-cyan); font: 700 .6rem/1.2 ui-monospace, monospace; letter-spacing: .16em; }
.studio-hero-price strong { font-size: 1.44rem; letter-spacing: -.04em; }
.studio-hero-price p { color: rgba(255,255,255,.56); font-size: .75rem; line-height: 1.5; }
.studio-direct-note { display: flex; align-items: center; gap: 9px; margin-top: 14px !important; color: rgba(255,255,255,.5); font-size: .7rem; }
.studio-direct-note i { width: 19px; height: 19px; display: grid; place-items: center; color: var(--studio-black); background: var(--studio-mint); border-radius: 50%; font-size: .66rem; font-style: normal; }

.studio-hero-visual {
  --mx: 0;
  --my: 0;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 530px;
  margin: 0;
  overflow: hidden;
  background: #05070b;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  box-shadow: 0 35px 110px rgba(0,0,0,.45);
  transform: perspective(1400px) rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -4deg));
  transition: transform .25s ease-out;
}
.studio-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,11,.3), transparent 30%), linear-gradient(to bottom, transparent 65%, rgba(5,7,11,.72)); pointer-events: none; }
.studio-hero-visual picture, .studio-hero-visual img { width: 100%; height: 100%; display: block; }
.studio-hero-visual img { object-fit: cover; object-position: 78% center; transform: scale(1.02); }
.studio-hero-visual figcaption { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 19px; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.68); font: 700 .6rem/1.2 ui-monospace, monospace; letter-spacing: .13em; }
.studio-frame-corners i { position: absolute; z-index: 4; width: 25px; height: 25px; border-color: rgba(255,255,255,.72); pointer-events: none; }
.studio-frame-corners i:nth-child(1) { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
.studio-frame-corners i:nth-child(2) { top: 12px; right: 12px; border-top: 1px solid; border-right: 1px solid; }
.studio-frame-corners i:nth-child(3) { right: 12px; bottom: 12px; border-right: 1px solid; border-bottom: 1px solid; }
.studio-frame-corners i:nth-child(4) { left: 12px; bottom: 12px; border-bottom: 1px solid; border-left: 1px solid; }
.studio-scroll-cue { position: absolute; z-index: 3; left: max(4vw, 48px); bottom: 28px; display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.52); font: 700 .61rem/1 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.studio-scroll-cue span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }

/* Proof */
.studio-proof { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); color: #090b10; background: #edf0f6; border-top: 1px solid rgba(9,11,16,.16); border-bottom: 1px solid rgba(9,11,16,.16); }
.studio-proof div { min-height: 96px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 20px clamp(22px, 3vw, 48px); border-right: 1px solid rgba(9,11,16,.13); }
.studio-proof div:last-child { border-right: 0; }
.studio-proof small { color: var(--studio-blue); font: 800 .66rem/1 ui-monospace, monospace; }
.studio-proof span { font-size: .78rem; font-weight: 750; line-height: 1.35; }

/* Assembly */
.studio-assembly { --flow: .02; height: 300vh; position: relative; color: #f4f7fa; background: #07090e; }
.studio-assembly-sticky { min-height: 100svh; position: sticky; top: 0; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(430px, 1.38fr) minmax(280px, .82fr); align-items: center; gap: clamp(28px, 3.5vw, 70px); padding: 105px max(4vw, 50px) 50px; overflow: hidden; }
.studio-assembly-sticky::before { content: none; }
.studio-assembly-heading { position: relative; z-index: 3; align-self: center; }
.studio-section-heading h2, .studio-quote-heading h2, .studio-case-heading h2, .studio-about-copy h2 {
  font-family: "Helvetica Neue", "Aptos Display", Arial, sans-serif;
  font-size: clamp(3.2rem, 5.7vw, 7rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.07em;
}
.studio-section-heading h2 em, .studio-quote-heading h2 em, .studio-case-heading h2 em, .studio-about-copy h2 em { color: var(--studio-blue); font: inherit; font-style: italic; }
.studio-assembly-heading h2 { margin-top: 25px; font-size: clamp(2.75rem, 4.5vw, 5.6rem); }
.studio-assembly-heading h2 em { color: var(--studio-cyan); }
.studio-assembly-heading > p:last-child { max-width: 420px; margin-top: 28px; color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.7; }

.studio-assembly-scene { height: min(68vh, 670px); position: relative; perspective: 1100px; }
.flow-grid { position: absolute; inset: 4%; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000, transparent 75%); transform: rotateX(62deg) translateY(32%); transform-origin: center bottom; }
.flow-fragment { position: absolute; z-index: 2; min-width: 105px; min-height: 54px; display: grid; place-items: center; padding: 12px 16px; color: #fff; background: rgba(19,24,35,.8); border: 1px solid rgba(255,255,255,.24); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); font: 800 .57rem/1 ui-monospace, monospace; letter-spacing: .14em; opacity: calc(1 - var(--flow) * .68); transition: box-shadow .2s ease; }
.flow-fragment::before { content: ""; width: 7px; height: 7px; position: absolute; top: 9px; left: 9px; background: var(--tone, var(--studio-cyan)); border-radius: 50%; box-shadow: 0 0 16px var(--tone, var(--studio-cyan)); }
.flow-fragment-a { --tone: var(--studio-blue); left: 2%; top: 9%; transform: translate(calc(var(--flow) * 255px), calc(var(--flow) * 165px)) rotate(calc(-11deg + var(--flow) * 11deg)); }
.flow-fragment-b { --tone: var(--studio-mint); right: 3%; top: 4%; transform: translate(calc(var(--flow) * -225px), calc(var(--flow) * 200px)) rotate(calc(13deg - var(--flow) * 13deg)); }
.flow-fragment-c { --tone: var(--studio-coral); left: -3%; top: 43%; transform: translate(calc(var(--flow) * 255px), calc(var(--flow) * -25px)) rotate(calc(8deg - var(--flow) * 8deg)); }
.flow-fragment-d { --tone: var(--studio-violet); right: -2%; top: 39%; transform: translate(calc(var(--flow) * -245px), calc(var(--flow) * 20px)) rotate(calc(-8deg + var(--flow) * 8deg)); }
.flow-fragment-e { --tone: var(--studio-cyan); left: 8%; bottom: 6%; transform: translate(calc(var(--flow) * 210px), calc(var(--flow) * -155px)) rotate(calc(-14deg + var(--flow) * 14deg)); }
.flow-fragment-f { --tone: var(--studio-coral); right: 7%; bottom: 10%; transform: translate(calc(var(--flow) * -205px), calc(var(--flow) * -145px)) rotate(calc(11deg - var(--flow) * 11deg)); }
.flow-lines { position: absolute; z-index: 1; inset: 22% 12%; opacity: calc(var(--flow) * .6); }
.flow-lines i { position: absolute; left: 5%; right: 5%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--studio-cyan), var(--studio-blue), transparent); transform: rotate(var(--r)) scaleX(var(--flow)); }
.flow-lines i:nth-child(1) { --r: 12deg; }.flow-lines i:nth-child(2) { --r: -15deg; }.flow-lines i:nth-child(3) { --r: 34deg; }.flow-lines i:nth-child(4) { --r: -35deg; }
.flow-product { width: 86%; height: 56%; position: absolute; z-index: 4; left: 7%; top: 24%; overflow: hidden; background: #f5f7fb; border: 1px solid rgba(255,255,255,.6); border-radius: 18px; box-shadow: 0 45px 120px rgba(21,67,255,.28), 0 0 0 1px rgba(54,221,240,.15); opacity: 1; transform: translateZ(calc(-220px + var(--flow) * 220px)) scale(calc(.63 + var(--flow) * .37)) rotateY(calc(15deg - var(--flow) * 15deg)); }
.flow-browser-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #e8ebf2; border-bottom: 1px solid #cbd1dc; }
.flow-browser-bar span { width: 7px; height: 7px; background: #b7bdc9; border-radius: 50%; }.flow-browser-bar span:first-child { background: var(--studio-coral); }.flow-browser-bar span:nth-child(2) { background: #ffc84d; }.flow-browser-bar span:nth-child(3) { background: var(--studio-mint); }
.flow-browser-bar i { width: 42%; height: 14px; margin-left: auto; margin-right: auto; background: #d5d9e2; border-radius: 999px; }
.flow-product-body { height: calc(100% - 38px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; padding: 8%; color: var(--studio-black); background: linear-gradient(135deg, #f8f9fb, #e9edf5); }
.flow-product-body > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.flow-product-body small { color: var(--studio-blue); font: 800 .55rem/1 ui-monospace, monospace; letter-spacing: .15em; }
.flow-product-body strong { max-width: 420px; margin-top: 12px; font-size: clamp(1.35rem, 2.5vw, 3rem); line-height: .95; letter-spacing: -.055em; }
.flow-product-body b { margin-top: 22px; padding: 10px 15px; color: #fff; background: var(--studio-black); border-radius: 999px; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.flow-product-body aside { align-self: center; aspect-ratio: .9; position: relative; background: var(--studio-blue); border-radius: 25px; box-shadow: 18px 18px 0 var(--studio-cyan), -13px -13px 0 var(--studio-coral); }
.flow-product-body aside i { position: absolute; height: 13%; background: rgba(255,255,255,.8); border-radius: 999px; }.flow-product-body aside i:nth-child(1) { width: 54%; left: 16%; top: 25%; }.flow-product-body aside i:nth-child(2) { width: 38%; left: 16%; top: 44%; }.flow-product-body aside i:nth-child(3) { width: 64%; left: 16%; top: 63%; }

.studio-assembly-steps { position: relative; z-index: 5; align-self: center; margin: 0; padding: 0; list-style: none; }
.studio-assembly-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.68); transition: color .35s ease, transform .35s ease; }
.studio-assembly-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.studio-assembly-steps li[data-active] { color: #fff; transform: translateX(-8px); }
.studio-assembly-steps li > span { padding-top: 2px; color: var(--studio-cyan); font: 800 .58rem/1 ui-monospace, monospace; }
.studio-assembly-steps li div { display: flex; flex-direction: column; gap: 5px; }
.studio-assembly-steps small { font: 800 .57rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.studio-assembly-steps strong { font-size: .88rem; letter-spacing: -.01em; }
.studio-assembly-steps p { max-height: 0; overflow: hidden; font-size: .73rem; line-height: 1.55; opacity: 0; transition: max-height .35s ease, opacity .35s ease; }
.studio-assembly-steps li[data-active] p { max-height: 80px; opacity: 1; }

/* Offers */
.studio-offers { padding: clamp(100px, 11vw, 180px) max(4vw, 50px); color: var(--ink); background: var(--page); }
.studio-offers-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 8vw; max-width: 1500px; margin: 0 auto 75px; }
.studio-offers-heading h2 { margin-top: 25px; }
.studio-offers-heading > p { max-width: 480px; padding-bottom: 8px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.studio-offer-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.studio-offer { min-height: 780px; position: relative; display: grid; grid-template-rows: auto minmax(330px, 1fr) auto; overflow: hidden; border-radius: 28px; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.studio-offer:hover { transform: translateY(-7px); box-shadow: 0 34px 80px rgba(0,0,0,.17); }
.studio-offer-essential { color: #fff; background: #3154ed; }
.studio-offer-growth { color: #07110d; background: #79e9c2; }
.studio-offer-store { color: #170807; background: #ff675c; }
.studio-offer-platform { color: #fff; background: #14151c; }
.studio-offer-top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 25px 28px 0; }
.studio-offer-top span, .studio-offer-top small { font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.studio-offer-top span { opacity: .55; }
.studio-offer-copy { position: relative; z-index: 5; padding: 32px; }
.studio-offer-copy h3 { max-width: 620px; font-size: clamp(2.25rem, 3.5vw, 4.8rem); font-weight: 800; line-height: .95; letter-spacing: -.065em; }
.studio-offer-copy > p { max-width: 620px; margin-top: 17px; font-size: .91rem; line-height: 1.6; opacity: .72; }
.studio-offer-copy ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; padding: 0; list-style: none; }
.studio-offer-copy li { padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: .63rem; font-weight: 750; opacity: .66; }
.studio-offer-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid currentColor; }
.studio-offer-copy > div > strong { font-size: .78rem; letter-spacing: .02em; }
.studio-offer-copy a { display: inline-flex; align-items: center; gap: 25px; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.product-preview { min-height: 370px; position: relative; margin: 20px 28px 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.studio-offer:hover .product-preview { transform: scale(1.018); }
.preview-browser { position: absolute; inset: 5% 2%; overflow: hidden; color: #0c0d12; background: #f9fafc; border-radius: 18px; box-shadow: 0 30px 60px rgba(8,20,80,.25); transform: rotate(-2deg); }
.preview-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 11px; background: #e6e9f0; }.preview-bar i { width: 7px; height: 7px; background: #b8bdc7; border-radius: 50%; }.preview-bar span { margin-left: auto; margin-right: auto; color: #848b98; font: 600 .52rem/1 ui-monospace, monospace; }
.preview-essential-body { height: calc(100% - 34px); position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8% 45% 8% 8%; background: linear-gradient(120deg, #f8f9fb 60%, #dfe5ef 60%); }
.preview-essential-body small { color: #3154ed; font: 800 .55rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.preview-essential-body strong { margin-top: 14px; font-size: clamp(1.65rem, 3vw, 3.7rem); line-height: .9; letter-spacing: -.07em; }
.preview-essential-body p { width: 78%; height: 6px; margin-top: 10px; background: #d2d7e0; border-radius: 99px; }.preview-essential-body p + p { width: 53%; margin-top: 6px; }
.preview-essential-body b { margin-top: 21px; padding: 10px 14px; color: #fff; background: #0b0d12; border-radius: 999px; font-size: .57rem; text-transform: uppercase; }
.preview-essential-body aside { width: 32%; aspect-ratio: .85; position: absolute; right: 8%; top: 15%; background: #3154ed; border-radius: 25px 25px 80px 25px; box-shadow: 18px 18px 0 #36ddf0; }

.preview-growth { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 18px; }
.preview-lead-card { min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: 32px; color: #fff; background: #0b1712; border-radius: 24px; box-shadow: 0 30px 65px rgba(5,20,14,.24); transform: rotate(-3deg); }
.preview-lead-card > span { font-size: clamp(3.3rem, 7vw, 7.5rem); font-weight: 850; line-height: .8; letter-spacing: -.08em; }
.preview-lead-card > small { margin-top: 18px; font: 800 .57rem/1.3 ui-monospace, monospace; letter-spacing: .13em; opacity: .65; }
.preview-lead-card > div { height: 60px; display: flex; align-items: flex-end; gap: 7px; margin-top: 24px; }.preview-lead-card i { flex: 1; height: var(--h); background: #79e9c2; border-radius: 5px 5px 0 0; }.preview-lead-card i:nth-child(1){--h:35%}.preview-lead-card i:nth-child(2){--h:52%}.preview-lead-card i:nth-child(3){--h:44%}.preview-lead-card i:nth-child(4){--h:75%}.preview-lead-card i:nth-child(5){--h:95%}
.preview-form { min-height: 230px; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: rgba(255,255,255,.75); border: 1px solid rgba(7,17,13,.16); border-radius: 20px; transform: rotate(3deg); }.preview-form small { font: 800 .55rem/1.2 ui-monospace, monospace; letter-spacing: .09em; }.preview-form > i { height: 30px; margin-top: 12px; background: rgba(7,17,13,.08); border-radius: 7px; }.preview-form button { height: 34px; margin-top: 12px; color: #fff; background: #0b1712; border: 0; border-radius: 999px; font-size: .6rem; font-weight: 800; }
.preview-notification { position: absolute; right: 4%; bottom: 6%; display: flex; align-items: center; gap: 8px; padding: 11px 15px; color: #07110d; background: #fff; border-radius: 999px; box-shadow: 0 13px 35px rgba(5,20,14,.2); font-size: .6rem; font-weight: 800; }.preview-notification i { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: #0b1712; border-radius: 50%; font-style: normal; }

.preview-store { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 15px; }
.preview-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; transform: rotate(-2deg); }.preview-products article { min-height: 240px; display: flex; flex-direction: column; padding: 12px; background: rgba(255,255,255,.8); border-radius: 15px; }.preview-products i { flex: 1; background: var(--c); border-radius: 10px 10px 35px 10px; }.preview-products article:nth-child(1) i{--c:#3154ed}.preview-products article:nth-child(2) i{--c:#ffb645}.preview-products article:nth-child(3) i{--c:#79e9c2}.preview-products small { margin-top: 10px; font: 800 .5rem/1 ui-monospace, monospace; opacity: .45; }.preview-products strong { margin-top: 5px; font-size: .63rem; }
.preview-cart { position: relative; z-index: 2; min-height: 280px; padding: 24px; color: #fff; background: #190d0c; border-radius: 22px; box-shadow: 0 25px 55px rgba(50,12,8,.22); transform: rotate(2deg); }.preview-cart > span { font: 800 .56rem/1 ui-monospace, monospace; letter-spacing: .11em; }.preview-cart p { display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; margin-top: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .58rem; }.preview-cart p i { width: 20px; aspect-ratio: 1; background: var(--studio-coral); border-radius: 5px; }.preview-cart p:nth-of-type(2) i { background: var(--studio-mint); }.preview-cart p b { font-size: .55rem; }.preview-cart > strong { display: flex; justify-content: space-between; margin-top: 17px; font-size: .65rem; }.preview-cart button { width: 100%; height: 38px; margin-top: 20px; color: #190d0c; background: #fff; border: 0; border-radius: 999px; font-size: .57rem; font-weight: 850; }

.preview-platform-shell { position: absolute; inset: 2%; display: grid; grid-template-columns: 56px 1fr; overflow: hidden; color: #eef2fb; background: #20232e; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.4); transform: rotate(-1.5deg); }.preview-platform-shell > aside { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 17px; background: #0d0e13; }.preview-platform-shell > aside b { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: var(--studio-violet); border-radius: 8px; font-size: .54rem; }.preview-platform-shell > aside i { width: 17px; height: 5px; background: rgba(255,255,255,.17); border-radius: 99px; }.preview-platform-shell > main { padding: 18px; }.preview-platform-shell header { display: flex; justify-content: space-between; font: 700 .54rem/1 ui-monospace, monospace; letter-spacing: .12em; }.preview-platform-shell header i { width: 24px; height: 24px; background: var(--studio-mint); border-radius: 50%; }.preview-platform-shell section { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }.preview-platform-shell article { padding: 13px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }.preview-platform-shell article small { font: 700 .43rem/1 ui-monospace, monospace; letter-spacing: .09em; opacity: .55; }.preview-platform-shell article strong { display: block; margin-top: 8px; font-size: 1.25rem; }.preview-platform-shell article div { height: 4px; margin-top: 9px; background: var(--studio-violet); border-radius: 99px; }.preview-platform-shell article + article div { background: var(--studio-mint); }.preview-chart { height: 100px; display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; padding: 13px; background: rgba(255,255,255,.04); border-radius: 11px; }.preview-chart i { flex: 1; height: var(--h); background: linear-gradient(to top, var(--studio-blue), var(--studio-cyan)); border-radius: 4px 4px 0 0; }.preview-chart i:nth-child(1){--h:28%}.preview-chart i:nth-child(2){--h:44%}.preview-chart i:nth-child(3){--h:38%}.preview-chart i:nth-child(4){--h:67%}.preview-chart i:nth-child(5){--h:55%}.preview-chart i:nth-child(6){--h:88%}.preview-platform-shell footer { display: flex; gap: 7px; margin-top: 10px; }.preview-platform-shell footer span { flex: 1; height: 22px; background: rgba(255,255,255,.05); border-radius: 6px; }
.preview-access { position: absolute; right: 5%; bottom: 4%; z-index: 3; padding: 10px 13px; color: #090b10; background: var(--studio-mint); border-radius: 999px; box-shadow: 0 12px 35px rgba(0,0,0,.3); font: 800 .52rem/1 ui-monospace, monospace; letter-spacing: .1em; }

.studio-open-brief { max-width: 1500px; min-height: 480px; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 6vw; margin: 18px auto 0; padding: clamp(45px, 6vw, 90px); color: #fff; background: #07090e; border-radius: 28px; }
.studio-open-brief > div:last-child { max-width: 760px; }
.studio-open-brief small { color: var(--studio-cyan); font: 800 .6rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.studio-open-brief h3 { margin-top: 19px; font-size: clamp(2.7rem, 4.7vw, 6rem); line-height: .92; letter-spacing: -.065em; }
.studio-open-brief p { max-width: 650px; margin-top: 20px; color: rgba(255,255,255,.62); font-size: .94rem; line-height: 1.7; }
.studio-open-brief .studio-button { margin-top: 26px; }
.studio-open-orbit { width: min(360px, 27vw); aspect-ratio: 1; position: relative; justify-self: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }.studio-open-orbit::before, .studio-open-orbit::after { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }.studio-open-orbit::after { inset: 34%; }.studio-open-orbit > span { position: absolute; inset: 37%; display: grid; place-items: center; background: var(--studio-blue); border-radius: 22px; box-shadow: 12px 12px 0 var(--studio-cyan); font-size: 3rem; font-weight: 900; }.studio-open-orbit i { width: 34px; aspect-ratio: 1; position: absolute; background: var(--tone); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }.studio-open-orbit i:nth-child(1){--tone:var(--studio-coral);left:8%;top:35%;transform:rotate(-18deg)}.studio-open-orbit i:nth-child(2){--tone:var(--studio-mint);right:10%;top:15%;transform:rotate(14deg)}.studio-open-orbit i:nth-child(3){--tone:var(--studio-violet);right:15%;bottom:10%;transform:rotate(-8deg)}

/* Integrations */
.studio-integrations { min-height: 850px; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 7vw; padding: 110px max(4vw, 50px); color: #090b10; background: #edf0f6; }
.studio-integrations-copy { max-width: 620px; justify-self: end; }
.studio-integrations-copy .studio-kicker { color: #404653; }
.studio-integrations-copy h2 { margin-top: 25px; font-size: clamp(3.5rem, 5.8vw, 7rem); line-height: .9; letter-spacing: -.075em; }.studio-integrations-copy h2 em { color: var(--studio-blue); font: inherit; font-style: italic; }
.studio-integrations-copy > p:last-of-type { max-width: 520px; margin-top: 28px; color: #596171; font-size: .94rem; line-height: 1.75; }
.studio-integrations-copy > a { display: inline-flex; align-items: center; gap: 28px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid #090b10; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.studio-integration-orbit { width: min(690px, 48vw); aspect-ratio: 1; position: relative; justify-self: start; border: 1px solid rgba(9,11,16,.13); border-radius: 50%; }.studio-integration-orbit::before, .studio-integration-orbit::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(9,11,16,.1); border-radius: 50%; }.studio-integration-orbit::after { inset: 32%; }.studio-orbit-core { position: absolute; z-index: 3; inset: 37%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: #090b10; border-radius: 30%; box-shadow: 18px 18px 0 var(--studio-blue); }.studio-orbit-core span { font-size: 2.4rem; font-weight: 900; letter-spacing: -.08em; }.studio-orbit-core small { margin-top: 6px; font: 700 .47rem/1 ui-monospace, monospace; letter-spacing: .11em; opacity: .58; }
.studio-orbit-item { position: absolute; z-index: 2; padding: 11px 15px; background: #fff; border: 1px solid rgba(9,11,16,.14); border-radius: 999px; box-shadow: 0 12px 35px rgba(20,30,60,.1); font: 750 .64rem/1 ui-monospace, monospace; letter-spacing: .04em; }.orbit-1{left:40%;top:1%}.orbit-2{right:8%;top:18%}.orbit-3{right:-2%;top:46%}.orbit-4{right:12%;bottom:15%}.orbit-5{left:45%;bottom:1%}.orbit-6{left:8%;bottom:15%}.orbit-7{left:-3%;top:48%}.orbit-8{left:9%;top:19%}.orbit-9{right:19%;top:34%;background:var(--studio-cyan)}.orbit-10{left:17%;top:38%;color:#fff;background:var(--studio-blue)}

/* Case */
.studio-case { position: relative; padding: clamp(110px, 11vw, 180px) max(4vw, 50px); color: #fff; background: #05070b; }
.studio-case::before { content: "CONTROL RUTA"; position: absolute; left: -1vw; top: 5vw; color: rgba(255,255,255,.025); font: 900 clamp(7rem, 18vw, 22rem)/.8 "Arial Black", sans-serif; letter-spacing: -.09em; white-space: nowrap; }
.studio-case-heading { position: relative; z-index: 2; max-width: 1500px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 7vw; margin: 0 auto 65px; }
.studio-case-heading .studio-kicker { margin-bottom: 25px; color: rgba(255,255,255,.72); }
.studio-case-heading h2 em { color: var(--studio-cyan); }
.studio-case-heading > p { max-width: 530px; padding-bottom: 8px; color: rgba(255,255,255,.58); font-size: .95rem; line-height: 1.75; }
.studio-case-stage { max-width: 1500px; min-height: clamp(760px, 62vw, 940px); position: relative; display: grid; place-items: center; margin: 0 auto; padding: clamp(76px, 7vw, 110px) clamp(44px, 7vw, 100px) clamp(110px, 10vw, 145px); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 42%, rgba(186,227,83,.12), transparent 38%), linear-gradient(145deg, #0d1715, #07100f 58%, #111923); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }
.studio-case-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 50px 50px; }
.studio-case-stage::after { content: ""; width: min(78vw, 1040px); aspect-ratio: 1; position: absolute; z-index: -1; left: 50%; top: 48%; border: 1px solid rgba(186,227,83,.15); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 70px rgba(186,227,83,.025), 0 0 0 140px rgba(54,221,240,.02); }
.studio-case-product { width: min(100%, 841px); position: relative; z-index: 2; margin: 0; overflow: hidden; background: #172521; border: 1px solid rgba(255,255,255,.3); border-radius: 17px; box-shadow: 0 55px 130px rgba(0,0,0,.58), 0 0 90px rgba(186,227,83,.08); }
.studio-case-browserbar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 15px; color: rgba(255,255,255,.72); background: #101816; border-bottom: 1px solid rgba(255,255,255,.12); }
.studio-case-browserbar > span { display: flex; gap: 5px; }.studio-case-browserbar > span i { width: 6px; aspect-ratio: 1; display: block; background: rgba(255,255,255,.27); border-radius: 50%; }.studio-case-browserbar > span i:first-child { background: #b8df54; }
.studio-case-browserbar strong { font: 750 .61rem/1 ui-monospace, monospace; letter-spacing: .04em; }.studio-case-browserbar small { justify-self: end; color: #b8df54; font: 800 .49rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.studio-case-product > img { width: 100%; height: auto; display: block; }
.studio-case-product figcaption { min-height: 40px; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 0 15px; color: rgba(255,255,255,.55); background: #101816; border-top: 1px solid rgba(255,255,255,.1); font: 750 .48rem/1.2 ui-monospace, monospace; letter-spacing: .09em; }
.studio-case-badges span { position: absolute; z-index: 4; padding: 10px 13px; color: #071022; background: var(--studio-cyan); border-radius: 999px; box-shadow: 0 12px 35px rgba(0,0,0,.3); font: 800 .55rem/1 ui-monospace, monospace; letter-spacing: .09em; }.studio-case-badges .case-badge-1{left:3%;top:18%}.studio-case-badges .case-badge-2{right:3%;top:24%;background:var(--studio-coral)}.studio-case-badges .case-badge-3{left:5%;bottom:18%;background:var(--studio-mint)}.studio-case-badges .case-badge-4{right:4%;bottom:15%;color:#fff;background:var(--studio-violet)}
.studio-case-live { position: absolute; z-index: 4; top: 18px; right: 22px; display: flex; align-items: center; gap: 8px; font: 800 .55rem/1 ui-monospace, monospace; letter-spacing: .11em; }.studio-case-live i { width: 7px; aspect-ratio: 1; background: #35e78b; border-radius: 50%; box-shadow: 0 0 12px #35e78b; }
.studio-case-details { max-width: 1500px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px auto 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.studio-case-details article { min-height: 150px; position: relative; padding: 24px; border-right: 1px solid rgba(255,255,255,.13); }.studio-case-details article:last-child { border-right: 0; }.studio-case-details article > span { position: absolute; right: 20px; top: 20px; color: rgba(255,255,255,.2); font: 800 .62rem/1 ui-monospace, monospace; }.studio-case-details small { color: var(--studio-cyan); font: 800 .57rem/1 ui-monospace, monospace; letter-spacing: .14em; }.studio-case-details p { max-width: 270px; margin-top: 28px; color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.55; }
.studio-case-actions { max-width: 1500px; display: flex; align-items: center; gap: 30px; margin: 32px auto 0; }.studio-case-actions > a:last-child { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* About */
.studio-about { display: grid; grid-template-columns: minmax(440px, .9fr) minmax(550px, 1.1fr); align-items: center; gap: clamp(55px, 7vw, 125px); padding: clamp(110px, 12vw, 190px) max(4vw, 50px); color: var(--ink); background: var(--page); }
.studio-about-portrait { position: relative; margin: 0; overflow: hidden; color: #fff; background: #0a0d13; border: 1px solid rgba(244,247,250,.18); border-radius: 18px; box-shadow: 0 38px 95px rgba(0,0,0,.24); }
.studio-about-portrait::before { content: ""; position: absolute; z-index: 3; inset: 10px; pointer-events: none; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.studio-about-photo { position: relative; overflow: hidden; background: #d8d8d8; }.studio-about-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,7,14,.02) 45%, rgba(3,7,14,.38)); }
.studio-about-photo img { width: 100%; height: auto; display: block; }
.studio-about-photo > span { position: absolute; z-index: 2; left: 22px; top: 22px; padding: 9px 11px; color: #071022; background: #f2f6fa; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font: 850 .52rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.studio-about-portrait figcaption { min-height: 235px; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 35px; padding: clamp(34px, 4vw, 52px); overflow: hidden; background: radial-gradient(circle at 95% 5%, rgba(54,221,240,.18), transparent 34%), linear-gradient(135deg, #111624, #090c13 68%); }.studio-about-portrait figcaption::after { content: ""; width: 170px; aspect-ratio: 1; position: absolute; right: -72px; bottom: -98px; border: 1px solid rgba(54,221,240,.25); border-radius: 50%; box-shadow: 0 0 0 24px rgba(59,91,255,.05); }
.studio-about-portrait blockquote { position: relative; z-index: 2; max-width: 560px; margin: 0; font-size: clamp(1.65rem, 2.2vw, 2.7rem); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.studio-about-portrait figcaption > small { position: relative; z-index: 2; color: rgba(255,255,255,.52); font: 700 .55rem/1.3 ui-monospace, monospace; letter-spacing: .12em; }
.studio-about-copy { align-self: center; max-width: 840px; }
.studio-about-copy .studio-kicker { color: var(--muted); }
.studio-about-copy h2 { margin-top: 25px; }.studio-about-copy h2 em { color: var(--studio-blue); }
.studio-about-copy > p:not(.studio-kicker) { max-width: 700px; margin-top: 24px; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.studio-about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }.studio-about-tags span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .65rem; font-weight: 750; }
.studio-research { margin-top: 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.studio-research header { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }.studio-research header span, .studio-research header small { font: 800 .58rem/1 ui-monospace, monospace; letter-spacing: .13em; }.studio-research header span { color: var(--studio-blue); }.studio-research header small { color: var(--muted); }.studio-research-row { display: grid; grid-template-columns: 70px 1fr; gap: 22px; padding: 26px 0 30px; }.studio-research-row > span { color: var(--studio-blue); font: 800 .65rem/1 ui-monospace, monospace; }.studio-research-row small { color: var(--muted); font: 700 .57rem/1 ui-monospace, monospace; letter-spacing: .09em; }.studio-research-row h3 { max-width: 650px; margin-top: 13px; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.025em; }.studio-research-row p { max-width: 640px; margin-top: 13px; color: var(--muted); font-size: .78rem; line-height: 1.65; }.studio-research-row strong { display: block; margin-top: 18px; font-size: .72rem; }.studio-research-row a { display: inline-flex; align-items: center; gap: 24px; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: .66rem; font-weight: 800; text-transform: uppercase; }

/* FAQ */
.studio-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; padding: clamp(100px, 11vw, 170px) max(4vw, 50px); color: var(--ink); background: var(--surface); border-top: 1px solid var(--line); }
.studio-faq-heading { align-self: start; position: sticky; top: 120px; }.studio-faq-heading h2 { margin-top: 25px; font-size: clamp(3rem, 5vw, 6rem); }.studio-faq-heading h2 em { color: var(--studio-blue); }
.studio-faq-list { border-top: 1px solid var(--line); }.studio-faq-list details { border-bottom: 1px solid var(--line); }.studio-faq-list summary { min-height: 92px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 15px; padding: 18px 0; cursor: pointer; list-style: none; }.studio-faq-list summary::-webkit-details-marker { display: none; }.studio-faq-list summary > span { color: var(--studio-blue); font: 800 .58rem/1 ui-monospace, monospace; }.studio-faq-list summary strong { font-size: 1rem; letter-spacing: -.015em; }.studio-faq-list summary i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.1rem; font-style: normal; transition: transform .3s ease, background .3s ease; }.studio-faq-list details[open] summary i { color: #fff; background: var(--studio-blue); transform: rotate(45deg); }.studio-faq-list details > p { max-width: 760px; padding: 0 48px 28px 60px; color: var(--muted); font-size: .86rem; line-height: 1.75; }

/* Quote */
.studio-quote { padding: clamp(105px, 10vw, 165px) max(4vw, 50px); color: #f4f7fa; background: #080a0f; }
.studio-quote-heading { max-width: 1500px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 7vw; margin: 0 auto 60px; }
.studio-quote-heading .studio-kicker { margin-bottom: 24px; color: rgba(255,255,255,.68); }.studio-quote-heading h2 em { color: var(--studio-cyan); }.studio-quote-heading > div:last-child > p { max-width: 520px; color: rgba(255,255,255,.58); font-size: .94rem; line-height: 1.7; }.studio-quote-heading > div:last-child > a { display: inline-flex; align-items: center; gap: 25px; margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.studio-quote .bf-quote-form { max-width: 1500px; margin: 0 auto; padding: clamp(28px, 4vw, 58px); color: #eef2fa; background: #12151d; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; }
.studio-quote .bf-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.studio-quote .bf-quote-progress { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 45px; padding: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,.13); }.studio-quote .bf-quote-progress li { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; color: rgba(255,255,255,.34); border-bottom: 2px solid transparent; }.studio-quote .bf-quote-progress li.active, .studio-quote .bf-quote-progress li.complete { color: #fff; border-bottom-color: var(--studio-cyan); }.studio-quote .bf-quote-progress span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 800 .58rem/1 ui-monospace, monospace; }.studio-quote .bf-quote-progress small { font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.studio-quote .bf-quote-step { margin: 0; padding: 0; border: 0; }.studio-quote .bf-quote-step[hidden] { display: none; }.studio-quote .bf-quote-step > legend { padding: 0; font-size: clamp(1.8rem, 2.7vw, 3.4rem); font-weight: 750; line-height: 1.05; letter-spacing: -.045em; }.studio-quote .bf-quote-step > p, .studio-quote .bf-capability-block > p { margin-top: 10px; color: rgba(255,255,255,.48); font-size: .78rem; }
.studio-quote .bf-goal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }.studio-quote .bf-goal-grid label { min-height: 155px; position: relative; cursor: pointer; }.studio-quote .bf-goal-grid input { position: absolute; opacity: 0; }.studio-quote .bf-goal-grid label > span { height: 100%; display: flex; flex-direction: column; padding: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; transition: background .25s ease, border-color .25s ease, transform .25s ease; }.studio-quote .bf-goal-grid label:hover > span, .studio-quote .bf-goal-grid label.selected > span { background: rgba(59,91,255,.14); border-color: var(--studio-blue); transform: translateY(-3px); }.studio-quote .bf-goal-grid i { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; }.studio-quote .bf-goal-grid label.selected i { background: var(--studio-cyan); box-shadow: inset 0 0 0 4px #12151d; }.studio-quote .bf-goal-grid strong { margin-top: auto; font-size: .85rem; }.studio-quote .bf-goal-grid small { margin-top: 6px; color: rgba(255,255,255,.47); font-size: .68rem; line-height: 1.45; }
.studio-quote .bf-capability-block { margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }.studio-quote .bf-capability-block > strong { font-size: .9rem; }.studio-quote .bf-capability-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.studio-quote .bf-capability-grid label { position: relative; cursor: pointer; }.studio-quote .bf-capability-grid input { position: absolute; opacity: 0; }.studio-quote .bf-capability-grid span { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: .7rem; }.studio-quote .bf-capability-grid label.selected span { color: #071022; background: var(--studio-cyan); border-color: var(--studio-cyan); }.studio-quote .bf-capability-grid i { font-style: normal; }
.studio-quote .bf-contact-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 35px; margin-top: 30px; }.studio-quote .bf-contact-fields > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.studio-quote .bf-contact-fields label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; color: rgba(255,255,255,.7); font-size: .67rem; font-weight: 700; letter-spacing: .04em; }.studio-quote .bf-contact-fields input, .studio-quote .bf-contact-fields select, .studio-quote .bf-contact-fields textarea { width: 100%; color: #fff; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; outline: 0; }.studio-quote .bf-contact-fields input, .studio-quote .bf-contact-fields select { height: 48px; padding: 0 13px; }.studio-quote .bf-contact-fields textarea { min-height: 130px; padding: 13px; resize: vertical; }.studio-quote .bf-contact-fields input:focus, .studio-quote .bf-contact-fields select:focus, .studio-quote .bf-contact-fields textarea:focus { border-color: var(--studio-cyan); box-shadow: 0 0 0 3px rgba(54,221,240,.12); }.studio-quote .bf-contact-fields select option { color: #111; background: #fff; }.studio-quote .bf-quote-recommendation { min-height: 100%; padding: 28px; background: var(--studio-blue); border-radius: 15px; }.studio-quote .bf-quote-recommendation > small { font: 800 .57rem/1 ui-monospace, monospace; letter-spacing: .13em; opacity: .7; }.studio-quote .bf-quote-recommendation > strong { display: block; margin-top: 25px; font-size: 1.55rem; line-height: 1.14; letter-spacing: -.04em; }.studio-quote .bf-quote-recommendation > p { margin-top: 19px; color: rgba(255,255,255,.67); font-size: .74rem; line-height: 1.6; }.studio-quote .bf-quote-recommendation > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 25px; }.studio-quote .bf-quote-recommendation > div span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: .58rem; }
.studio-quote .bf-quote-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: rgba(255,255,255,.55); font-size: .67rem; line-height: 1.5; }.studio-quote .bf-quote-consent input { margin-top: 3px; accent-color: var(--studio-cyan); }.studio-quote .bf-quote-consent a { text-decoration: underline; }
.studio-quote .bf-quote-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; }.studio-quote .bf-quote-actions button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; padding: 0 22px; border-radius: 999px; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.studio-quote .bf-quote-back { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.16); }.studio-quote .bf-quote-next, .studio-quote .bf-quote-submit { color: #07090e; background: var(--studio-cyan); border: 1px solid var(--studio-cyan); }.studio-quote .bf-quote-actions button:disabled { opacity: .35; cursor: not-allowed; }.studio-quote .bf-quote-privacy { margin-top: 15px; color: rgba(255,255,255,.4); font-size: .63rem; text-align: right; }.studio-quote .bf-quote-error { margin-top: 15px; padding: 12px; color: #ffb7b1; background: rgba(255,81,69,.1); border: 1px solid rgba(255,81,69,.25); border-radius: 9px; font-size: .7rem; }.studio-quote .bf-quote-error a { text-decoration: underline; }

/* After launch */
.studio-after { padding: clamp(100px, 10vw, 160px) max(4vw, 50px); color: var(--ink); background: var(--page); }
.studio-after-heading { max-width: 1500px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 7vw; margin: 0 auto 55px; }.studio-after-heading h2 { margin-top: 24px; }.studio-after-heading h2 em { color: var(--studio-blue); }.studio-after-heading > p { max-width: 500px; padding-bottom: 7px; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.studio-after-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.studio-after-grid article { min-height: 300px; position: relative; padding: 30px; border-right: 1px solid var(--line); }.studio-after-grid article:last-child { border-right: 0; }.studio-after-grid article > span { position: absolute; right: 24px; top: 24px; color: var(--muted); font: 800 .62rem/1 ui-monospace, monospace; opacity: .5; }.studio-after-grid small { color: var(--studio-blue); font: 800 .58rem/1 ui-monospace, monospace; letter-spacing: .14em; }.studio-after-grid h3 { max-width: 330px; margin-top: 75px; font-size: 2rem; line-height: .98; letter-spacing: -.05em; }.studio-after-grid p { max-width: 350px; margin-top: 20px; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.studio-after-note { max-width: 1500px; display: flex; align-items: center; gap: 10px; margin: 20px auto 0 !important; color: var(--muted); font-size: .7rem; }.studio-after-note i { width: 22px; height: 22px; display: grid; place-items: center; color: #071022; background: var(--studio-mint); border-radius: 50%; font-size: .65rem; font-style: normal; }

/* Footer */
.studio-footer { padding: 85px max(4vw, 50px) 28px; color: #f4f7fa; background: #05070b; border-top: 1px solid rgba(255,255,255,.14); }
.studio-footer-claim { display: flex; flex-direction: column; }.studio-footer-claim small { color: #a7f4fb; font: 800 .61rem/1 ui-monospace, monospace; letter-spacing: .14em; }.studio-footer-claim p { margin-top: 22px; font-size: clamp(3.8rem, 8vw, 10rem); font-weight: 850; line-height: .79; letter-spacing: -.08em; text-transform: uppercase; }
.studio-footer-links { display: grid; grid-template-columns: .8fr 1.2fr .8fr; gap: 6vw; margin-top: 95px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,.14); }.studio-footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }.studio-footer-links small { margin-bottom: 12px; color: rgba(255,255,255,.38); font: 800 .56rem/1 ui-monospace, monospace; letter-spacing: .13em; }.studio-footer-links a { display: inline-flex; align-items: center; gap: 18px; color: rgba(255,255,255,.72); font-size: .76rem; }.studio-footer-links a:hover { color: #fff; }
.studio-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 20px; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.1); font: 700 .55rem/1.3 ui-monospace, monospace; letter-spacing: .07em; }
.studio-mobile-quote { display: none; }

/* Non-interactive controls inside the visual product mockups. */
.preview-form > b { height:34px; display:grid; place-items:center; margin-top:12px; color:#fff; background:#0b1712; border-radius:999px; font-size:.6rem; font-weight:800; }
.preview-cart .preview-pay { width:100%; height:38px; display:grid; place-items:center; margin-top:20px; color:#190d0c; background:#fff; border-radius:999px; font-size:.57rem; font-weight:850; }
.preview-platform-main { padding:18px; }

/* Readability, accessibility and progressive rendering */
.studio-home { --studio-blue-text:#8fa2ff; --muted-strong:#c1c9d7; }
:root[data-theme="light"] .studio-home { --studio-blue-text:#244bd7; --muted-strong:#46505f; }
.studio-proof small { color:#244bd7; }
.studio-offer-top span,.studio-offer-copy > p,.studio-offer-copy li { opacity:1; }
.preview-bar span { color:#4c5564; font-weight:750; }
.preview-products small { color:#51494a; opacity:1; }
.preview-platform-shell > aside b { background:#5d40ce; }
.studio-case-details article > span { color:rgba(255,255,255,.58); }
.studio-research header span,.studio-research-row > span,.studio-after-grid small { color:var(--studio-blue-text); }
.studio-after-grid article > span { color:var(--muted-strong); opacity:1; }
.studio-footer-links small,.studio-footer-bottom { color:rgba(255,255,255,.58); }
.studio-quote .bf-capability-block { min-width:0; padding-right:0; padding-bottom:0; padding-left:0; border-right:0; border-bottom:0; border-left:0; }
.studio-quote .bf-capability-block > legend { padding:0; font-size:.9rem; font-weight:800; }
.studio-quote .bf-goal-grid input:focus-visible + span,.studio-quote .bf-capability-grid input:focus-visible + span { outline:3px solid var(--studio-cyan); outline-offset:3px; }
.studio-assembly-scene::after { content:"01 / INPUT"; position:absolute; z-index:7; left:14px; bottom:14px; color:rgba(255,255,255,.72); font:800 .52rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.studio-assembly[data-phase="1"] .studio-assembly-scene::after { content:"02 / MAP"; }
.studio-assembly[data-phase="2"] .studio-assembly-scene::after { content:"03 / UI"; }
.studio-assembly[data-phase="3"] .studio-assembly-scene::after { content:"04 / LIVE"; }
.studio-assembly[data-phase="0"] .flow-product { filter:grayscale(1) contrast(.72); }
.studio-assembly[data-phase="1"] .flow-product { filter:grayscale(.9) contrast(.82); }
.studio-assembly[data-phase="2"] .flow-product { filter:grayscale(.48) contrast(.95); }
.studio-assembly[data-phase="3"] .flow-product { filter:none; }

@media (max-width: 1250px) {
  .studio-header { gap: 18px; }
  .studio-desktop-nav { gap: 18px; }
  .studio-desktop-nav a { font-size: .62rem; }
  .studio-hero { grid-template-columns: .9fr 1.1fr; }
  .studio-hero h1 { font-size: clamp(4rem, 6.35vw, 5.2rem); }
  .studio-assembly-sticky { grid-template-columns: minmax(230px,.72fr) minmax(380px,1.25fr) minmax(250px,.72fr); gap: 25px; }
  .studio-assembly-heading h2 { font-size: 3.4rem; }
  .studio-offer { min-height: 700px; }
  .preview-growth, .preview-store { grid-template-columns: 1fr; }
  .preview-growth .preview-form, .preview-store .preview-cart { position: absolute; width: 42%; right: 0; bottom: 0; }
  .preview-products { width: 68%; }
}

@media (max-width: 1040px) {
  .studio-desktop-nav { display: none; }
  .studio-mobile-nav { display:block; position:relative; justify-self:end; }
  .studio-mobile-nav > summary { width:42px; height:42px; display:grid; place-content:center; gap:5px; cursor:pointer; list-style:none; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:10px; }
  .studio-mobile-nav > summary::-webkit-details-marker { display:none; }
  .studio-mobile-nav > summary span { width:18px; height:1px; display:block; background:#fff; }
  .studio-mobile-nav[open] > summary span:first-child { transform:translateY(3px) rotate(45deg); }
  .studio-mobile-nav[open] > summary span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .studio-mobile-nav > nav { width:min(330px,calc(100vw - 28px)); position:absolute; top:50px; right:0; display:flex; flex-direction:column; gap:2px; padding:12px; color:#fff; background:#0b0d13; border:1px solid rgba(255,255,255,.15); border-radius:14px; box-shadow:0 25px 60px rgba(0,0,0,.45); }
  .studio-mobile-nav > nav > a { min-height:46px; display:flex; align-items:center; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.08); font-size:.75rem; font-weight:750; }
  .studio-mobile-nav > nav .studio-mobile-nav-cta { justify-content:space-between; margin-top:8px; color:#05070b; background:var(--studio-cyan); border-radius:10px; }
  .studio-mobile-nav > nav > div { display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:9px; border-top:1px solid rgba(255,255,255,.1); }
  .studio-mobile-nav > nav > div > a { min-width:40px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:9px; font-size:.65rem; font-weight:850; }
  .studio-mobile-nav .theme-toggle { width:40px; height:38px; }
  .studio-header { grid-template-columns: auto 1fr auto; }
  .studio-header-actions { justify-self: end; }
  .studio-hero { grid-template-columns: .95fr 1.05fr; padding-left: 35px; padding-right: 35px; }
  .studio-hero h1 { font-size: 3.8rem; }
  .studio-hero-visual { height: 620px; }
  .studio-assembly-sticky { grid-template-columns: minmax(260px,.8fr) minmax(420px,1.2fr); }
  .studio-assembly-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); align-self: end; }
  .studio-assembly-steps li { grid-template-columns: 25px 1fr; border-bottom: 1px solid rgba(255,255,255,.13); }
  .studio-assembly-steps li[data-active] { transform: translateY(-5px); }
  .studio-assembly-steps p { display: none; }
  .studio-about { grid-template-columns: .8fr 1.2fr; gap: 45px; }
  .studio-about-portrait { min-height: 0; }
}

@media (max-width: 899px) {
  .studio-header { top:10px; width:calc(100% - 20px); grid-template-columns:auto 1fr; padding:7px 8px 7px 12px; }
  .studio-header-actions { display:none; }
  .studio-hero { min-height:auto; grid-template-columns:1fr; padding:112px 24px 72px; }
  .studio-hero h1 { max-width:760px; font-size:clamp(2.55rem,12vw,7rem); }
  .studio-hero-visual { height:auto; min-height:0; aspect-ratio:1.35; margin-top:12px; }
  .studio-hero-visual img { object-position:63% center; }
  .studio-scroll-cue { display:none; }
  .studio-proof { grid-template-columns:repeat(2,1fr); }
  .studio-proof div:nth-child(2) { border-right:0; }
  .studio-assembly { --flow:1; height:auto; }
  .studio-assembly-sticky { min-height:0; position:relative; grid-template-columns:1fr; padding:100px 28px; }
  .studio-assembly-scene { width:min(680px,100%); height:520px; justify-self:center; }
  .studio-assembly-steps { grid-column:auto; grid-template-columns:repeat(2,1fr); }
  .studio-assembly-steps li { color:#fff; }
  .studio-assembly-steps p { display:block; max-height:80px; color:rgba(255,255,255,.72); opacity:1; }
  .studio-offers-heading,.studio-case-heading,.studio-integrations,.studio-about,.studio-quote-heading,.studio-after-heading { grid-template-columns:1fr; }
  .studio-offer-grid { grid-template-columns:1fr; }
  .studio-case { padding-left:18px; padding-right:18px; }
  .studio-case-stage { min-height:0; display:block; padding:54px 10px 106px; border-radius:12px; }
  .studio-case-stage::after { width:120%; }
  .studio-case-product { width:100%; margin:0 auto; border-radius:10px; }
  .studio-case-browserbar { height:34px; padding:0 9px; }
  .studio-case-browserbar strong { font-size:.48rem; }
  .studio-case-browserbar small { font-size:.37rem; }
  .studio-case-product figcaption { min-height:34px; padding:0 9px; font-size:.35rem; }
  .studio-case-badges { position:absolute; z-index:4; left:10px; right:10px; bottom:12px; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .studio-case-badges span { position:static!important; display:grid; place-items:center; min-height:36px; padding:7px; border-radius:8px; font-size:.43rem; letter-spacing:.05em; text-align:center; }
  .studio-case-live { top:16px; right:13px; font-size:.43rem; }
  .studio-case-details { grid-template-columns:repeat(2,1fr); }
  .studio-case-details article:nth-child(2) { border-right:0; }
  .studio-about { padding-left:18px; padding-right:18px; }
  .studio-about-portrait { width:min(680px,100%); min-height:0; justify-self:center; }
  .studio-quote .bf-goal-grid { grid-template-columns:repeat(2,1fr); }
  .studio-quote .bf-contact-layout { grid-template-columns:1fr; }
  .studio-after-grid { grid-template-columns:1fr; }
  .studio-after-grid article { border-right:0; border-bottom:1px solid var(--line); }
  .studio-footer-links { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-home *, .studio-home *::before, .studio-home *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .studio-assembly { --flow: 1; height: auto; }
  .studio-assembly-sticky { position: relative; }
  .studio-assembly-steps li { color: rgba(255,255,255,.72); }
  .studio-assembly-steps p { max-height: 80px; opacity: .62; }
  .studio-hero-visual { transform: none; }
}