/* Studio layout: the existing palette and form behavior remain shared. */
:root { --container: min(1240px, calc(100% - 64px)); --muted: #bdbbc9; }
body { background: #08080b; }
body::before { background-size: 120px 120px; opacity: .45; }
.site-header { min-height: 88px; background: rgba(8,8,11,.93); }
.main-nav { font-size: 12px; gap: 28px; }
.brand img { width: 166px; filter: none; }
.header-cta { border-color: #595363; background: transparent; }
.header-cta:hover { background: #7c3aed; border-color: #7c3aed; }
.hero { min-height: 0; padding: 78px 0 0; }
.hero::before, .hero::after { display: none; }
.hero-copy { max-width: 1100px; margin: 0 auto; text-align: center; }
.eyebrow { font-size: 11px; }
.hero h1 { max-width: none; font-size: 88px; line-height: 1.05; margin-top: 24px; font-weight: 780; }
.hero h1 span { color: #f7f7fb; text-shadow: none; }
.hero h1 em { color: #b58bff; font-family: Georgia, serif; font-weight: 400; }
.hero-lead { max-width: 640px; margin: 26px auto 0; font-size: 18px; line-height: 1.7; }
.hero-actions { justify-content: center; margin-top: 28px; }
.button { font-weight: 650; border-radius: 4px; }
.button-primary { box-shadow: none; }
.hero-visual { position: relative; right: auto; bottom: auto; width: calc(100% - 64px); margin: 64px auto 48px; perspective: none; }
.browser-mockup { transform: none !important; border-color: #37313f; background: #101015; box-shadow: 0 30px 80px #0006; }
.browser-mockup::before { inset: -12px 24px auto; height: 12px; border: 1px solid #443054; border-bottom: 0; background: #1a1222; border-radius: 8px 8px 0 0; }
.browser-mockup::after { display: none; }
.mockup-top { min-height: 44px; background: #111116; border-radius: 8px 8px 0 0; }
.mockup-address { justify-self: center; width: min(340px,100%); font-family: monospace; border: 0; background: transparent; }
.mockup-body { min-height: 0; grid-template-columns: 56px minmax(0,1fr); background: #101016; padding: 20px; gap: 24px; border-radius: 0 0 8px 8px; }
.mockup-sidebar { padding: 8px; background: transparent; border: 0; }
.mini-logo { width: 30px; height: 30px; border-radius: 3px; transform: skewY(-14deg); box-shadow: none; }
.mockup-sidebar span { width: 24px; height: 3px; }
.mockup-main { min-height: 0; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 106px 106px; gap: 14px; }
.glass-card { backdrop-filter: none; }
.code-card { grid-column: 1; grid-row: 1; padding: 10px 18px; background: #211731; }
.code-line { height: 5px; margin: 10px 0; }
.metric-growth { grid-column: 2; grid-row: 1 / 3; background: #7c3aed; border: 0; }
.metric-speed { grid-column: 3; grid-row: 1 / 3; background: #15262b; border-color: #2c4950; }
.metric-card { transform: none; padding: 24px; align-content: center; gap: 20px; box-shadow: none; }
.metric-card span { color: #ebe4fa; font-size: 11px; }
.metric-card strong, .metric-speed strong { font-size: 25px; white-space: normal; }
.metric-card small { color: #e5ddec; font-size: 12px; line-height: 1.5; }
.dashboard-card { grid-column: 1; grid-row: 2; grid-template-columns: 96px minmax(0,1fr); transform: none; padding: 12px; box-shadow: none; background: #18181f; }
.dashboard-card strong { font-size: 17px; }
.dashboard-card small { font-size: 10px; }
.chart-bars { height: 66px; gap: 6px; }
.chart-bars span { transform-origin: bottom; animation: chart-grow 1.2s ease both; }
.chart-bars span:nth-child(2) { animation-delay: .1s; }
.chart-bars span:nth-child(3) { animation-delay: .2s; }
.chart-bars span:nth-child(4) { animation-delay: .3s; }
.visual-status { position: static; justify-content: center; display: flex; margin-top: 24px; font-size: 11px; }
.benefit-strip { position: relative; background: transparent; backdrop-filter: none; }
.benefit-strip article { padding: 24px; min-height: 128px; }
.benefit-strip h2 { font-size: 17px; font-weight: 650; }
.section { padding: 108px 0; }
.section-heading { grid-template-columns: 170px minmax(0,1fr); gap: 24px 50px; margin-bottom: 52px; }
.section-heading h2, .contact-copy h2 { font-size: 56px; font-weight: 720; line-height: 1.1; max-width: 870px; }
.section-heading p:not(.section-label) { margin-top: 0; font-size: 17px; }
.section-heading .section-label { margin-top: 12px; font-size: 10px; }
.services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto; gap: 0; border-top: 1px solid #35303e; border-bottom: 1px solid #35303e; }
.service-card, .service-card:first-child { grid-row: auto; min-height: 420px; padding: 32px; border: 0; border-right: 1px solid #35303e; border-radius: 0; background: transparent; }
.service-card:last-child { border-right: 0; }
.service-card:hover { transform: none; background: #15111e; }
.service-card::before, .service-card:first-child::before { font-size: 100px; bottom: 8px; right: 20px; color: #ffffff05; }
.service-card::after { transform: scaleX(0); }
.icon-box { width: 56px; height: 56px; border-radius: 50%; }
.service-card h3, .service-card:first-child h3 { margin: 48px 0 18px; font-size: 29px; font-weight: 650; }
.service-tags { padding-top: 30px; gap: 12px; }
.service-tags li { border: 0; border-radius: 0; border-bottom: 1px solid #51495d; padding: 6px 0; color: #aaa4b7; }
.service-link { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 13px; font-weight: 650; width: fit-content; padding: 8px 0; color: #dcc8ff; }
.service-link::after { content: '\2197'; font-size: 21px; transition: transform .2s; }
.service-link:hover::after { transform: translate(3px,-3px); }
.value-section { background: #ece9f2; box-shadow: 0 0 0 100vmax #ece9f2; }
.comparison-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.compare-card { border-radius: 0; padding: 38px; }
.highlight-card { background: #6d28d9; border-color: #6d28d9; box-shadow: none; }
.compare-card h3 { font-size: 24px; font-weight: 650; }
.value-points { margin-top: 32px; }
.value-points article { font-size: 16px; min-height: 110px; }
.target-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.target-card { padding: 26px; min-height: 290px; }
.target-card h3 { margin-top: 56px; font-size: 23px; font-weight: 650; }
.target-card p { font-size: 14px; }
.timeline { border-top: 0; gap: 0; }
.timeline-step { min-height: 270px; border-top: 1px solid #4c3e60; }
.timeline-step > span { font-family: Georgia,serif; font-style: italic; font-size: 64px; color: #a789d1; font-weight: 400; }
.timeline-step h3 { margin-top: 40px; font-size: 23px; font-weight: 650; }
.faq-section { gap: 80px; grid-template-columns: .8fr 1.2fr; }
.faq-section .section-heading h2 { font-size: 48px; }
.faq-list summary { font-size: 17px; font-weight: 550; padding: 26px 0; }
.contact-section { gap: 64px; grid-template-columns: 1fr 1.1fr; }
.contact-section::before { display: none; }
.contact-copy h2 { font-size: 56px; }
.contact-form { padding: 30px; border-radius: 8px; box-shadow: none; }
.site-footer { padding-top: 52px; }
:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 5px; }
.js .reveal { opacity: 1; translate: none; }
.js .reveal.is-visible { animation: studio-enter .65s ease both; }
@keyframes studio-enter { from { opacity: .6; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chart-grow { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@media (max-width: 1120px) {
  .hero h1 { font-size: 72px; }
  .hero-visual { margin: 56px auto 40px; width: calc(100% - 24px); }
  .metric-card { padding: 18px; }
  .metric-card strong, .metric-speed strong { font-size: 22px; }
  .target-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-section { grid-template-columns: 1fr; }
  .contact-copy { max-width: 800px; }
  .faq-section { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  :root { --container: calc(100% - 40px); }
  .hero { padding-top: 54px; }
  .hero h1 { font-size: 56px; }
  .section { padding: 76px 0; }
  .section-heading { display: block; }
  .section-heading h2, .contact-copy h2 { font-size: 44px; }
  .section-heading p:not(.section-label) { margin-top: 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:first-child { min-height: 0; padding: 28px 20px; border-right: 0; border-bottom: 1px solid #35303e; display: grid; grid-template-columns: 64px 1fr; column-gap: 24px; }
  .service-card .icon-box { grid-row: 1 / 5; }
  .service-card h3, .service-card:first-child h3 { margin: 0 0 16px; }
  .service-card p, .service-tags, .service-link { grid-column: 2; }
  .service-tags { margin: 0; padding-top: 18px; }
  .service-link { margin-top: 12px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .timeline-step, .timeline-step:not(:first-child) { min-height: 0; grid-template-columns: 86px 1fr; }
  .timeline-step h3 { margin-top: 0; }
  .mockup-body { grid-template-columns: minmax(0,1fr); gap: 0; }
  .mockup-sidebar { display: none; }
  .dashboard-card { grid-template-columns: 64px 1fr; gap: 8px; }
  .metric-card strong, .metric-speed strong { font-size: 20px; }
}
@media (max-width: 600px) {
  :root { --container: calc(100% - 32px); }
  .site-header { min-height: 72px; }
  .brand img { width: 140px; }
  .hero { padding-top: 40px; }
  .eyebrow { font-size: 9px; line-height: 1.5; }
  .eyebrow::before { flex-basis: 14px; width: 14px; margin-right: 8px; }
  .hero h1 { font-size: 38px; line-height: 1.13; margin-top: 24px; }
  .hero-lead { font-size: 15px; margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .hero-visual { width: 100%; margin: 40px auto 26px; }
  .mockup-body { padding: 12px; }
  .mockup-main { grid-template-columns: 1fr 1fr; grid-template-rows: 74px 122px; gap: 8px; }
  .code-card { grid-column: 1; grid-row: 1; padding: 4px 10px; }
  .code-line { margin: 7px 0; height: 4px; }
  .dashboard-card { grid-column: 2; grid-row: 1; padding: 8px; grid-template-columns: 48px 1fr; }
  .chart-bars { height: 44px; gap: 4px; }
  .dashboard-card strong { font-size: 14px; }
  .dashboard-card small { font-size: 8px; }
  .metric-growth { grid-column: 1; grid-row: 2; }
  .metric-speed { grid-column: 2; grid-row: 2; }
  .metric-card { padding: 14px; gap: 10px; }
  .metric-card span { font-size: 9px; }
  .metric-card strong, .metric-speed strong { font-size: 18px; }
  .metric-card small { font-size: 10px; }
  .visual-status { margin-top: 18px; }
  .benefit-strip { grid-template-columns: 1fr 1fr; }
  .benefit-strip article { padding: 18px 12px; min-height: 138px; border-right: 1px solid var(--line); }
  .benefit-strip h2 { font-size: 15px; }
  .benefit-strip p { font-size: 12px; }
  .section { padding: 64px 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .contact-copy h2, .faq-section .section-heading h2 { font-size: 34px; }
  .service-card, .service-card:first-child { padding: 26px 0; grid-template-columns: 44px minmax(0,1fr); column-gap: 16px; }
  .icon-box { width: 40px; height: 40px; }
  .icon-box svg { width: 21px; height: 21px; }
  .service-card h3, .service-card:first-child h3 { font-size: 24px; }
  .service-card p { font-size: 14px; }
  .target-grid { grid-template-columns: 1fr; }
  .target-card { min-height: 0; padding: 24px; }
  .target-card h3 { margin-top: 24px; }
  .compare-card { padding: 26px; }
  .contact-form { padding: 20px; }
  .contact-copy h2 { overflow-wrap: anywhere; }
}
@media (max-width: 360px) { .hero h1 { font-size: 33px; } }
/* Decorative brand study: no client work, metrics or simulated product UI. */
.brand-composition { width: min(1060px,100%); margin: 46px auto 52px; }
.brand-art { --art-x: 0px; --art-y: 0px; position: relative; width: 100%; aspect-ratio: 2.35; isolation: isolate; }
.art-tile { position: absolute; border: 1px solid #ffffff26; border-radius: 8px; box-shadow: 0 18px 32px #0008, inset 0 1px 0 #ffffff24; overflow: hidden; transition: translate 700ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms; }
.art-type { left: 4%; top: 8%; width: 25%; height: 49%; rotate: -7deg; background: linear-gradient(135deg,#28242f,#121115); translate: calc(var(--art-x) * -.6) calc(var(--art-y) * -.6); display: grid; place-items: center; }
.art-type > span { font-family: Georgia,serif; font-size: 110px; line-height: 1; color: #ece4fa; position: relative; z-index: 1; }
.type-baseline { position: absolute; inset: 20% 0; border-block: 1px solid #ad92cc38; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ad92cc20 calc(25% - 1px),#ad92cc20 25%); }
.art-grid { left: 74%; top: 10%; width: 22%; height: 48%; rotate: 8deg; background: linear-gradient(130deg,#16151c,#30223f); translate: calc(var(--art-x) * .5) calc(var(--art-y) * -.6); }
.contour { position: absolute; inset: 16%; border: 1px solid #be9ce5; border-radius: 6px; rotate: -12deg; }
.contour-two { inset: 23%; border-color: #a879fa; rotate: 0deg; }
.contour-three { inset: 30%; border-color: #9a55ff; rotate: 12deg; }
.contour-four { inset: 37%; background: #9750f7; border-color: #c295ff; rotate: 24deg; }
.art-brand { left: 31%; top: 12%; width: 40%; height: 72%; z-index: 2; rotate: -3deg; background: linear-gradient(135deg,#ffffff 0%,#f0edf5 48%,#d6cfdf 100%); border-color: #ffffffa6; display: flex; align-items: center; justify-content: center; translate: var(--art-x) var(--art-y); box-shadow: 0 24px 48px #0009,inset 0 1px 0 #fff,inset -2px -3px 0 #a79bb980; }
.art-brand img { width: 72%; height: auto; object-fit: contain; position: relative; z-index: 2; }
.brand-engraving { position: absolute; width: 33%; height: 140%; left: 48%; top: -20%; transform: skewX(-30deg); border-inline: 1px solid #38234c0d; background: #ffffff18; }
.brand-rule { position: absolute; left: 10%; right: 10%; bottom: 13%; height: 1px; background: #38234c26; }
.art-palette { left: 12%; top: 66%; width: 27%; height: 24%; z-index: 3; rotate: 4deg; padding: 13px; display: flex; gap: 5px; background: linear-gradient(135deg,#2e2738,#15111b); translate: calc(var(--art-x) * -.4) calc(var(--art-y) * .6); }
.art-palette span { flex: 1; background: #eee8f5; border-radius: 3px; box-shadow: inset 0 1px 0 #ffffff50; }
.art-palette span:nth-child(2) { background: #cdb2f3; }
.art-palette span:nth-child(3) { background: #a26cf0; }
.art-palette span:nth-child(4) { background: #7735d0; }
.art-palette span:nth-child(5) { background: #342144; }
.art-slash { left: 68%; top: 63%; width: 22%; height: 30%; z-index: 3; rotate: 7deg; background: linear-gradient(135deg,#f5f0fa,#c8bbd9); display: flex; align-items: center; justify-content: center; gap: 16px; translate: calc(var(--art-x) * -.7) calc(var(--art-y) * .7); }
.art-slash span { width: 16%; height: 55%; background: linear-gradient(140deg,#a86cff,#6324b7); transform: skewX(-30deg); box-shadow: 3px 3px 0 #4b1d8260; }
.art-slash span:last-child { translate: 0 10px; }
@media (max-width: 860px) {
  .brand-composition { margin: 36px auto 38px; }
  .art-type > span { font-size: 76px; }
  .art-palette { padding: 8px; gap: 4px; }
}
@media (max-width: 600px) {
  .brand-art { aspect-ratio: 1.6; }
  .art-type { left: 3%; top: 7%; width: 30%; height: 38%; }
  .art-type > span { font-size: 58px; }
  .art-brand { left: 26%; top: 24%; width: 49%; height: 53%; }
  .art-grid { left: 72%; top: 10%; width: 24%; height: 34%; }
  .art-palette { left: 7%; top: 71%; width: 32%; height: 20%; padding: 7px; gap: 3px; }
  .art-slash { left: 69%; top: 70%; width: 25%; height: 23%; gap: 10px; }
  .art-slash span:last-child { translate: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-tile { transition: none; translate: none; }
}
/* The logo's diagonal repeats in labels, section breaks and step numbers. */
.eyebrow::before,
.section-label::before {
  flex: 0 0 6px;
  width: 6px;
  height: 20px;
  margin: 0 17px 0 5px;
  background: currentColor;
  transform: skewX(-30deg);
}
.contact-copy .section-label::before { background: currentColor; }
.section::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 34px;
  width: 7px;
  height: 26px;
  background: #a879fa;
  box-shadow: 15px 0 0 #a879fa;
  transform: skewX(-30deg);
  pointer-events: none;
}
.value-section::after { background: #6d28d9; box-shadow: 15px 0 0 #6d28d9; }
.contact-section::after { background: #e8dafa; box-shadow: 15px 0 0 #e8dafa; }
.benefit-strip article > span,
.target-card > span,
.timeline-step > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.benefit-strip article > span::after,
.target-card > span::after,
.timeline-step > span::after {
  content: "";
  flex: 0 0 3px;
  width: 3px;
  height: 15px;
  margin-right: 5px;
  background: #a879fa;
  transform: skewX(-30deg);
  transition: transform 240ms ease;
}
.timeline-step > span { align-self: start; }
.timeline-step > span::after { flex-basis: 5px; width: 5px; height: 36px; }
.reveal.is-visible .section-label::before,
.reveal.is-visible .eyebrow::before {
  animation: slash-enter 650ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes slash-enter {
  from { opacity: 0; transform: translateY(8px) skewX(-30deg) scaleY(.4); }
  to { opacity: 1; transform: translateY(0) skewX(-30deg) scaleY(1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .benefit-strip article:hover > span::after,
  .target-card:hover > span::after,
  .timeline-step:hover > span::after { transform: translateY(-3px) skewX(-30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal.is-visible, .chart-bars span { animation: none; }
  .reveal.is-visible .section-label::before,
  .reveal.is-visible .eyebrow::before { animation: none; }
  .benefit-strip article > span::after,
  .target-card > span::after,
  .timeline-step > span::after { transition: none; }
}