@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #0c0c0d;
  --bg-offset: #111113;
  --panel: #161618;
  --panel-hover: #1e1e21;
  --panel-light: #242429;
  --border: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 255, 255, 0.1);
  --text: #f5f5f7;
  --text-muted: #8e8e93;
  --text-dim: #5c5c61;
  
  /* Brand Easing Orange Gradient style */
  --accent-light: #ffb08a;
  --accent: #f93a00;
  --accent-strong: #f66800;
  --accent-deep: #a82600;
  --accent-soft: rgba(249, 58, 0, 0.12);
  --accent-soft-hover: rgba(249, 58, 0, 0.2);
  --accent-glow: rgba(249, 58, 0, 0.35);
  
  --gradient-accent: linear-gradient(135deg, #f93a00, #f66800);
  --gradient-dark: linear-gradient(180deg, rgba(22, 22, 24, 0.8) 0%, rgba(12, 12, 13, 0.95) 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 30%, #a3a7b0 100%);
  --gradient-orange-text: linear-gradient(135deg, #ffb08a 0%, #f93a00 100%);
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-elastic: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Base & Reset --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--panel-light);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Selection */
::selection {
  background: var(--accent-soft);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.orange-gradient-text {
  background: var(--gradient-orange-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Custom Cursor --- */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  display: none;
}

@media (pointer: fine) {
  .custom-cursor {
    display: block;
  }
}

.custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent-strong);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.08s linear, width 0.2s, height 0.2s, border-color 0.2s;
  display: none;
}

@media (pointer: fine) {
  .custom-cursor-follower {
    display: block;
  }
}

/* Cursor Hover states applied via JS */
body.cursor-hover .custom-cursor {
  width: 8px;
  height: 8px;
  background: #ffffff;
  mix-blend-mode: normal;
}
body.cursor-hover .custom-cursor-follower {
  width: 60px;
  height: 60px;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

body.cursor-accent .custom-cursor {
  background: #ffffff;
  mix-blend-mode: normal;
}
body.cursor-accent .custom-cursor-follower {
  width: 50px;
  height: 50px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* --- App Shell & Layout --- */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}

/* Background grid */
.grid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
}

/* Glowing ambient spots */
.glow-spot {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* --- Header / Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 100;
  background: rgba(12, 12, 13, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--text);
  z-index: 101;
}

.logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: invert(1);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.logo-link:hover .logo-img {
  transform: rotate(15deg) scale(1.1);
  filter: drop-shadow(0 0 8px var(--accent-glow)) invert(35%) sepia(87%) saturate(2258%) hue-rotate(345deg) brightness(101%) contrast(108%);
}

.logo-text span {
  color: inherit;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  padding: 6px 0;
}

.nav-link:hover, .nav-link.is-active {
  color: var(--text);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width var(--transition-normal);
}

.nav-link:hover::after, .nav-link.is-active::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Menu Toggle Button (Mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  cursor: pointer;
  z-index: 101;
}

.menu-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--text);
  transition: var(--transition-normal);
  border-radius: var(--radius-full);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-accent);
  color: #0c0c0d;
  box-shadow: 0 4px 20px rgba(249, 58, 0, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 58, 0, 0.45);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: 0.75s;
}

.btn-primary:hover::after {
  left: 120%;
}

.btn-secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--panel-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--text);
  padding: 12px 20px;
}

.btn-ghost:hover {
  color: var(--accent-light);
  background: rgba(255, 255, 255, 0.03);
}

/* --- Section Global --- */
.section {
  padding: 140px 0;
  position: relative;
  z-index: 10;
}

.section-header {
  max-width: 700px;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-tag {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.section-title {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.section-desc {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.6;
}

/* --- Sticky Stacking Card Sections (Experimental Overlay) --- */
.stack-container {
  position: relative;
  z-index: 10;
}

.stack-section {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--bg);
  overflow: hidden;
  border-top: 1px solid var(--border);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

.stack-section:nth-of-type(1) { z-index: 21; background-color: #0c0c0d; }
.stack-section:nth-of-type(2) { z-index: 22; background-color: #121214; }
.stack-section:nth-of-type(3) { z-index: 23; background-color: #161619; }
.stack-section:nth-of-type(4) { z-index: 24; background-color: #1a1a1f; }

/* Responsive stacks adjustment (Important UX: disable sticky stack if viewport height is small) */
@media (max-height: 700px), (max-width: 1024px) {
  .stack-section {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 100px 0;
    top: auto;
    box-shadow: none;
    border-top: 1px solid var(--border);
  }
}

/* --- Hero Section (Home) --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
  z-index: 5;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}

.hero .container {
  z-index: 10;
  pointer-events: none;
}

.hero-content {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-title {
  font-size: 76px;
  line-height: 1.05;
  font-weight: 900;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  pointer-events: auto;
}

/* --- Bento Grid / Experimental Layouts --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  width: 100%;
}

.bento-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-elastic), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.bento-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(249, 58, 0, 0.3);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(249, 58, 0, 0.05);
}

.bento-card-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bento-card-tag {
  font-family: monospace;
  font-size: 11px;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bento-card-title {
  font-size: 28px;
  font-weight: 800;
}

.bento-card-desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Bento size configurations */
.bento-col-12 { grid-column: span 12; }
.bento-col-8  { grid-column: span 8; }
.bento-col-6  { grid-column: span 6; }
.bento-col-4  { grid-column: span 4; }

/* Asymmetric panels layout */
.asymmetric-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.asymmetric-sidebar {
  border-right: 1px solid var(--border);
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: rgba(0,0,0,0.1);
}

.asymmetric-main {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

/* --- Interactive Showreel Widget --- */
.showreel-container {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.showreel-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) brightness(0.6);
  transition: transform var(--transition-slow), filter var(--transition-normal);
}

.showreel-container:hover .showreel-placeholder {
  transform: scale(1.03);
  filter: saturate(1) brightness(0.7);
}

.showreel-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transition: var(--transition-elastic);
}

.showreel-container:hover .showreel-btn {
  transform: scale(1.1);
  background: var(--accent);
  color: #000000;
}

/* Simulate timeline UI overlay (AE style) */
.showreel-ui {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition-normal);
}

.showreel-container:hover .showreel-ui {
  opacity: 1;
  transform: translateY(0);
}

.timeline-bar {
  flex-grow: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 20px;
  position: relative;
  border-radius: var(--radius-full);
}

.timeline-progress {
  height: 100%;
  width: 35%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.timeline-playhead {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.timeline-time {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Freelance Portfolio (Showcase deck) --- */
.portfolio-deck {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.deck-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border);
}

.deck-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.deck-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.deck-number {
  font-family: monospace;
  font-size: 16px;
  color: var(--accent);
  font-weight: 800;
}

.deck-title {
  font-size: 36px;
  font-weight: 900;
}

.deck-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.deck-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deck-tag {
  background: var(--panel-light);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--text-muted);
}

.deck-visual {
  height: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interactive SVG previews for SaaS Video styles */
.saas-ui-preview {
  width: 80%;
  height: 65%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  padding: 16px;
  overflow: hidden;
}

.saas-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.saas-ui-dot-row {
  display: flex;
  gap: 6px;
}

.saas-ui-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-hover);
}

.saas-ui-sidebar {
  width: 25%;
  height: 70%;
  border-right: 1px solid var(--border);
  position: absolute;
  left: 16px;
}

.saas-ui-content {
  margin-left: 30%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-ui-bar {
  height: 8px;
  background: var(--panel-light);
  border-radius: var(--radius-full);
  width: 100%;
}

.saas-ui-chart {
  height: 50px;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}

.saas-ui-line-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.deck-item:hover .saas-ui-line-path {
  stroke-dashoffset: 0;
}

/* --- Freelance Calculator Widget --- */
.calculator-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  box-shadow: var(--shadow-lg);
}

.calc-sliders {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.calc-slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}

.calc-value {
  color: var(--accent-light);
  font-family: monospace;
}

/* Standard HTML Range styling adapted */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: transform 0.15s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.calc-options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.calc-option-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.calc-option-btn:hover, .calc-option-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.calc-result-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  gap: 24px;
}

.calc-total-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.calc-total-price {
  font-size: 48px;
  font-weight: 900;
  color: var(--text);
}

.calc-total-timeline {
  font-size: 14px;
  color: var(--text-muted);
}

/* --- Plugins Layout & Easing Lab details --- */
.plugins-asymmetric-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 40px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* --- Interactive Easing Playground ("Lab") styling modifications --- */
.lab {
  background-color: var(--bg-offset);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.lab-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}

.lab-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bezier-editor-container {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

.bezier-canvas-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
}

.bezier-canvas {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  display: block;
}

.bezier-handle-point {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--text);
  border: 3px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bezier-handle-point:active {
  cursor: grabbing;
  background: var(--accent-light);
}

.bezier-handle-point.p0, .bezier-handle-point.p3 {
  background: var(--text-dim);
  border-color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.simulation-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sim-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sim-box-title {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sim-track {
  height: 48px;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.sim-ball {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-accent);
  box-shadow: 0 0 15px var(--accent-glow);
  position: absolute;
  left: 16px;
  transition-property: left;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.presets-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.preset-btn {
  background: var(--panel-light);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.preset-btn:hover, .preset-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.code-output {
  background: var(--bg);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-family: monospace;
  font-size: 12px;
  color: var(--accent-light);
  position: relative;
}

.code-label {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* --- Contact & Booking Section --- */
.contact {
  background-color: var(--bg-offset);
  border-top: 1px solid var(--border);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-title {
  font-size: 48px;
  font-weight: 900;
}

.contact-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.social-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition-normal);
}

.social-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--panel-hover);
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.social-card:hover .social-icon {
  background: var(--accent-soft);
  color: var(--accent-light);
  border-color: var(--accent);
}

.social-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social-name {
  font-size: 14px;
  font-weight: 700;
}

.social-handle {
  font-size: 11px;
  color: var(--text-muted);
}

/* Contact Form */
.contact-form-container {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 48px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.form-control {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  transition: var(--transition-normal);
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: 60px 0;
  background-color: var(--bg);
}

.footer-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-copy {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 24px;
  height: 24px;
  filter: invert(1);
  opacity: 0.5;
  transition: var(--transition-normal);
}

.footer-logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--accent-glow)) invert(35%) sepia(87%) saturate(2258%) hue-rotate(345deg) brightness(101%) contrast(108%);
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-link-groups {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.footer-link {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-link:hover {
  color: var(--text);
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  list-style: none;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.footer-social-link span {
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--text);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
}

.footer-social-link b {
  font-weight: 900;
}

.footer-social-link:hover {
  color: var(--text);
}

.footer-social-link:hover span {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Responsive adjustments --- */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 52px;
  }
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bento-col-12, .bento-col-8, .bento-col-6, .bento-col-4 {
    grid-column: span 1;
  }
  .asymmetric-panel {
    grid-template-columns: 1fr;
  }
  .asymmetric-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 40px;
  }
  .asymmetric-main {
    padding: 40px;
  }
  .deck-item {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .calculator-box {
    grid-template-columns: 1fr;
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }
  .section-header {
    margin-bottom: 48px;
  }
  .section-title {
    font-size: 36px;
  }
  .hero {
    min-height: auto;
    padding: 140px 0 80px;
  }
  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--bg);
    flex-direction: column;
    padding: 48px 24px;
    align-items: flex-start;
    gap: 32px;
    transition: var(--transition-normal);
    z-index: 99;
    border-top: 1px solid var(--border);
  }
  .nav-menu.is-active {
    left: 0;
  }
  .menu-toggle {
    display: flex;
  }
  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Home Showroom / Work Grid --- */
body.home-showroom {
  --bg: #f4f1ea;
  --bg-offset: #ebe6dc;
  --panel: #fffaf0;
  --panel-hover: #ffffff;
  --panel-light: #e7ded0;
  --border: rgba(28, 28, 28, 0.14);
  --border-hover: rgba(28, 28, 28, 0.28);
  --text: #171717;
  --text-muted: #6e695f;
  --text-dim: #9b9488;
  --accent: #f24a16;
  --accent-light: #ff7b45;
  --accent-strong: #cb2f00;
  --accent-soft: rgba(242, 74, 22, 0.12);
  --accent-soft-hover: rgba(242, 74, 22, 0.2);
  --accent-glow: rgba(242, 74, 22, 0.24);
  --gradient-accent: linear-gradient(135deg, #ff7b45, #f24a16);
  --shadow-sm: 0 2px 8px rgba(45, 36, 25, 0.08);
  --shadow-md: 0 10px 28px rgba(45, 36, 25, 0.12);
  --shadow-lg: 0 20px 50px rgba(45, 36, 25, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 420px),
    var(--bg);
  color: var(--text);
}

.home-showroom h1,
.home-showroom h2,
.home-showroom h3,
.home-showroom h4,
.home-showroom .logo-link {
  letter-spacing: 0;
}

.home-showroom .custom-cursor {
  background: var(--text);
  mix-blend-mode: normal;
}

.home-showroom .custom-cursor-follower {
  border-color: rgba(23, 23, 23, 0.32);
}

.home-showroom.cursor-hover .custom-cursor {
  background: var(--accent);
}

.home-showroom.cursor-hover .custom-cursor-follower {
  border-color: var(--accent);
  background: rgba(242, 74, 22, 0.08);
}

.home-showroom .grid-bg {
  opacity: 1;
  background-image:
    linear-gradient(rgba(28, 28, 28, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 28, 28, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}

.home-showroom .navbar {
  background: rgba(244, 241, 234, 0.82);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.home-showroom .logo-img,
.home-showroom .footer-logo {
  filter: invert(1);
}

.home-showroom .logo-link:hover .logo-img,
.home-showroom .footer-logo:hover {
  filter: invert(1) drop-shadow(0 0 8px var(--accent-glow));
}

.home-showroom .btn {
  border-radius: 6px;
  padding: 10px 18px;
}

.home-showroom .btn-secondary {
  background: rgba(255, 255, 255, 0.42);
  border-color: var(--border);
}

.home-showroom .btn-secondary:hover {
  background: #ffffff;
  border-color: var(--border-hover);
}

.showroom-page {
  position: relative;
  z-index: 10;
}

.showroom-intro {
  padding: 116px 0 26px;
}

.showroom-intro-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(300px, 1.45fr) minmax(180px, 0.64fr);
  gap: 32px;
  align-items: start;
}

.showroom-phrases,
.showroom-status {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.32;
  text-transform: uppercase;
}

.showroom-phrases {
  display: grid;
  gap: 5px;
}

.showroom-phrases p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showroom-center {
  display: grid;
  gap: 12px;
}

.showroom-kicker {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.showroom-center h1 {
  max-width: 760px;
  color: var(--text);
  font-size: clamp(30px, 5.4vw, 76px);
  font-weight: 900;
  line-height: 0.96;
}

.showroom-status {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.showroom-status a {
  color: var(--text);
}

.showroom-status a:hover {
  color: var(--accent-strong);
}

.showroom-work {
  padding: 0 0 72px;
}

.showroom-workbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding: 16px 0 22px;
  border-top: 1px solid var(--border);
}

.showroom-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.showroom-filter {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 5px;
  position: relative;
  text-transform: uppercase;
}

.showroom-filter::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--text);
  transition: width var(--transition-normal);
}

.showroom-filter:hover,
.showroom-filter.is-active {
  color: var(--text);
}

.showroom-filter:hover::after,
.showroom-filter.is-active::after {
  width: 100%;
}

.showroom-note {
  max-width: 320px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 20px;
  align-items: start;
}

.work-card {
  display: block;
  grid-column: span 2;
  min-width: 0;
  transform-origin: center top;
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    filter var(--transition-normal);
}

.work-card--large {
  grid-column: span 3;
}

.work-card--wide {
  grid-column: span 4;
}

.work-card.is-hidden {
  display: none;
}

.work-card:hover {
  transform: translateY(-4px);
}

.work-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ded4c5;
  border: 1px solid rgba(23, 23, 23, 0.12);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

.work-card--wide .work-media {
  aspect-ratio: 16 / 9;
}

.work-card--large .work-media {
  aspect-ratio: 16 / 10;
}

.work-card--tall .work-media {
  aspect-ratio: 3 / 4.4;
}

.work-card:hover .work-media {
  border-color: rgba(23, 23, 23, 0.32);
  box-shadow: var(--shadow-md);
}

.work-thumb,
.work-preview,
.work-video {
  position: absolute;
  inset: 0;
}

.work-thumb {
  z-index: 1;
  transition:
    opacity var(--transition-normal),
    transform var(--transition-slow),
    filter var(--transition-normal);
}

.work-video {
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.work-card.has-video.is-previewing .work-video,
.work-card.has-video:hover .work-video {
  opacity: 1;
}

.work-media[data-aspect="16/9"],
.showreel-frame[data-aspect="16/9"] {
  aspect-ratio: 16 / 9 !important;
}

.work-media[data-aspect="17/8"],
.showreel-frame[data-aspect="17/8"] {
  aspect-ratio: 17 / 8 !important;
}

.work-media[data-aspect="4/3"],
.showreel-frame[data-aspect="4/3"] {
  aspect-ratio: 4 / 3 !important;
}

.work-media[data-aspect="1/1"],
.showreel-frame[data-aspect="1/1"] {
  aspect-ratio: 1 / 1 !important;
}

.work-media[data-aspect="4/5"],
.showreel-frame[data-aspect="4/5"] {
  aspect-ratio: 4 / 5 !important;
}

.work-media[data-aspect="9/16"],
.showreel-frame[data-aspect="9/16"] {
  aspect-ratio: 9 / 16 !important;
}

.cms-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity var(--transition-normal),
    transform var(--transition-slow),
    filter var(--transition-normal);
}

.work-card:hover .cms-thumb,
.work-card.is-previewing .cms-thumb {
  transform: scale(1.025);
  filter: saturate(1.08);
}

.work-card.has-video:hover .cms-thumb,
.work-card.has-video.is-previewing .cms-thumb {
  opacity: 0;
}

.cms-placeholder-mark,
.cms-plugin-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.54);
  font-size: clamp(72px, 12vw, 190px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.cms-plugin-mark {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(42px, 8vw, 128px);
}

.cms-work-media .cms-placeholder-mark {
  display: none;
}

.cms-player {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.work-card.has-video:hover .cms-player,
.work-card.has-video.is-previewing .cms-player {
  opacity: 1;
  transform: translateY(0);
}

.cms-player-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
}

.cms-player-track {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.26);
}

.cms-player-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #ffffff;
}

.cms-type-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.work-preview {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.work-card:hover .work-thumb,
.work-card.is-previewing .work-thumb {
  transform: scale(1.025);
  filter: saturate(1.08);
}

.work-card:hover .work-preview,
.work-card.is-previewing .work-preview {
  opacity: 1;
}

.work-caption {
  display: grid;
  gap: 2px;
  padding-top: 9px;
}

.work-caption h2 {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.16;
  margin: 0;
  text-transform: uppercase;
}

.work-caption p {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.work-media--ui {
  background:
    radial-gradient(circle at 18% 78%, rgba(242, 74, 22, 0.16), transparent 24%),
    linear-gradient(135deg, #ece5d8, #cdd7d8 58%, #ecded0);
}

.ui-window {
  position: absolute;
  left: 15%;
  top: 18%;
  width: 70%;
  height: 54%;
  border: 1px solid rgba(23, 23, 23, 0.16);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 26px 42px rgba(45, 36, 25, 0.12);
}

.ui-window span {
  position: absolute;
  left: 9%;
  right: 9%;
  height: 8%;
  background: rgba(23, 23, 23, 0.1);
}

.ui-window span:nth-child(1) { top: 22%; width: 46%; }
.ui-window span:nth-child(2) { top: 40%; width: 68%; }
.ui-window span:nth-child(3) { top: 58%; width: 38%; background: var(--accent); }

.ui-window i {
  position: absolute;
  bottom: 11%;
  width: 18%;
  background: rgba(23, 23, 23, 0.14);
}

.ui-window i:nth-of-type(1) { left: 10%; height: 28%; }
.ui-window i:nth-of-type(2) { left: 38%; height: 42%; }
.ui-window i:nth-of-type(3) { left: 66%; height: 62%; background: rgba(242, 74, 22, 0.58); }

.ui-panel {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 30%;
  height: 22%;
  border: 1px solid rgba(23, 23, 23, 0.16);
  background: rgba(255, 255, 255, 0.58);
}

.ui-cursor {
  position: absolute;
  left: 58%;
  top: 52%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text);
  border-radius: 50%;
}

.work-card:hover .ui-cursor {
  animation: showroomCursor 1.1s ease-in-out infinite alternate;
}

.preview-line {
  position: absolute;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
}

.preview-line--a {
  left: 18%;
  top: 30%;
  width: 54%;
  animation: showroomLine 1.2s ease-in-out infinite;
}

.preview-line--b {
  left: 30%;
  top: 66%;
  width: 42%;
  animation: showroomLine 1.2s 0.2s ease-in-out infinite;
}

.preview-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(242, 74, 22, 0.12);
}

.preview-dot--a {
  left: 72%;
  top: 28%;
  animation: showroomPulse 0.9s ease-in-out infinite alternate;
}

.work-media--rig {
  background:
    linear-gradient(135deg, #dfe6de, #f4ead7),
    #dfe6de;
}

.rig-node {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fffaf0;
  border: 2px solid var(--text);
  border-radius: 50%;
  z-index: 2;
}

.rig-node--a { left: 21%; top: 22%; }
.rig-node--b { right: 18%; top: 26%; }
.rig-node--c { left: 48%; bottom: 18%; }

.rig-line {
  position: absolute;
  left: 29%;
  top: 34%;
  height: 2px;
  background: rgba(23, 23, 23, 0.34);
  transform-origin: left center;
}

.rig-line--a { width: 40%; transform: rotate(4deg); }
.rig-line--b { width: 38%; transform: rotate(48deg); }
.rig-line--c { left: 55%; width: 32%; transform: rotate(128deg); }

.preview-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: showroomSpin 2.4s linear infinite;
}

.preview-dot--b {
  left: 48%;
  top: 48%;
  animation: showroomOrbit 1.7s linear infinite;
}

.work-media--chart {
  background: linear-gradient(145deg, #ecdfce 0%, #d8e6e5 100%);
}

.chart-bar {
  position: absolute;
  bottom: 18%;
  width: 12%;
  background: rgba(23, 23, 23, 0.16);
}

.chart-bar--a { left: 16%; height: 22%; }
.chart-bar--b { left: 34%; height: 42%; }
.chart-bar--c { left: 52%; height: 32%; }
.chart-bar--d { left: 70%; height: 64%; background: rgba(242, 74, 22, 0.62); }

.chart-path {
  position: absolute;
  left: 14%;
  right: 12%;
  top: 28%;
  height: 36%;
  border-top: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  transform: skewY(-18deg);
}

.preview-scan {
  position: absolute;
  left: -18%;
  top: 0;
  width: 18%;
  height: 100%;
  background: rgba(255, 255, 255, 0.48);
  animation: showroomScan 1.2s ease-in-out infinite;
}

.work-media--timeline {
  background: linear-gradient(135deg, #ddd9cf, #ccd6e2);
}

.timeline-row {
  position: absolute;
  left: 9%;
  right: 9%;
  height: 2px;
  background: rgba(23, 23, 23, 0.18);
}

.timeline-row--a { top: 30%; }
.timeline-row--b { top: 50%; }
.timeline-row--c { top: 70%; }

.timeline-key {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fffaf0;
  border: 2px solid var(--accent);
  transform: rotate(45deg);
}

.timeline-key--a { left: 24%; top: calc(30% - 8px); }
.timeline-key--b { left: 48%; top: calc(50% - 8px); }
.timeline-key--c { left: 68%; top: calc(70% - 8px); }

.preview-playhead {
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 18%;
  width: 2px;
  background: var(--accent);
  animation: showroomPlayhead 1.45s ease-in-out infinite;
}

.work-media--macro {
  background: linear-gradient(135deg, #e7dbc7, #d5e2d8);
}

.macro-frame {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(23, 23, 23, 0.2);
  background: rgba(255, 255, 255, 0.42);
}

.macro-chip {
  position: absolute;
  height: 9%;
  background: rgba(23, 23, 23, 0.16);
}

.macro-chip--a { left: 25%; top: 32%; width: 46%; }
.macro-chip--b { left: 25%; top: 49%; width: 28%; background: var(--accent); }

.macro-focus {
  position: absolute;
  left: 53%;
  top: 42%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid var(--text);
  border-radius: 50%;
}

.preview-crop {
  position: absolute;
  left: 20%;
  top: 22%;
  width: 44%;
  aspect-ratio: 1;
  border: 2px solid var(--accent);
  animation: showroomCrop 1.1s ease-in-out infinite alternate;
}

.work-media--curve {
  background: linear-gradient(155deg, #e5ddcf, #d8e3e9);
}

.curve-axis {
  position: absolute;
  background: rgba(23, 23, 23, 0.18);
}

.curve-axis--x { left: 16%; right: 14%; bottom: 18%; height: 2px; }
.curve-axis--y { left: 16%; top: 14%; bottom: 18%; width: 2px; }

.curve-path {
  position: absolute;
  left: 19%;
  bottom: 21%;
  width: 58%;
  height: 48%;
  border-left: 3px solid var(--accent);
  border-top: 3px solid var(--accent);
  border-radius: 70% 20% 0 0;
  transform: skewX(-22deg);
}

.curve-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--text);
  background: #fffaf0;
  border-radius: 50%;
}

.curve-handle--a { left: 34%; bottom: 42%; }
.curve-handle--b { right: 18%; top: 18%; }

.preview-ball {
  position: absolute;
  left: 16%;
  bottom: 17%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  animation: showroomEaseBall 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.work-media--story {
  background: linear-gradient(120deg, #efe5d5, #d7dfd7);
}

.story-card {
  position: absolute;
  width: 24%;
  height: 46%;
  border: 1px solid rgba(23, 23, 23, 0.18);
  background: rgba(255, 255, 255, 0.52);
}

.story-card--a { left: 12%; top: 25%; }
.story-card--b { left: 38%; top: 20%; }
.story-card--c { left: 64%; top: 27%; }

.story-arrow {
  position: absolute;
  left: 28%;
  right: 24%;
  top: 74%;
  height: 2px;
  background: var(--accent);
}

.story-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}

.preview-frame {
  position: absolute;
  top: 18%;
  width: 24%;
  height: 48%;
  border: 2px solid var(--accent);
  animation: showroomFrame 1.2s ease-in-out infinite alternate;
}

.preview-frame--a { left: 18%; }
.preview-frame--b { left: 58%; animation-delay: 0.14s; }

.work-media--type {
  background: linear-gradient(135deg, #f0e5d1, #d8dde6);
}

.type-glyph {
  position: absolute;
  color: var(--text);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.type-glyph--a { left: 18%; top: 30%; }
.type-glyph--b { left: 38%; top: 26%; color: var(--accent); }
.type-glyph--c { left: 56%; top: 34%; }
.type-glyph--d { left: 72%; top: 28%; }

.work-card:hover .type-glyph {
  animation: showroomType 0.82s ease-in-out infinite alternate;
}

.type-glyph--b { animation-delay: 0.08s; }
.type-glyph--c { animation-delay: 0.16s; }
.type-glyph--d { animation-delay: 0.24s; }

.preview-typebar {
  position: absolute;
  left: 16%;
  height: 2px;
  background: var(--accent);
  animation: showroomLine 1s ease-in-out infinite;
}

.preview-typebar--a { top: 68%; width: 70%; }
.preview-typebar--b { top: 76%; width: 52%; animation-delay: 0.16s; }

.work-media--brief {
  background: linear-gradient(135deg, #dfd6c9, #d8e7df);
}

.brief-slider {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 2px;
  background: rgba(23, 23, 23, 0.2);
}

.brief-slider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.brief-slider--a { top: 32%; }
.brief-slider--a::after { left: 38%; }
.brief-slider--b { top: 50%; }
.brief-slider--b::after { left: 66%; }

.brief-total {
  position: absolute;
  left: 18%;
  bottom: 22%;
  width: 30%;
  height: 14%;
  background: rgba(23, 23, 23, 0.82);
}

.brief-button {
  position: absolute;
  right: 18%;
  bottom: 22%;
  width: 26%;
  height: 14%;
  background: var(--accent);
}

.preview-counter {
  position: absolute;
  left: 18%;
  bottom: 22%;
  width: 30%;
  height: 14%;
  background: var(--text);
  animation: showroomCounter 1s steps(3, end) infinite;
}

.work-media--reel {
  background: linear-gradient(135deg, #dce2df, #eee0ce);
}

.reel-tile {
  position: absolute;
  width: 32%;
  height: 34%;
  border: 1px solid rgba(23, 23, 23, 0.14);
  background: rgba(255, 255, 255, 0.52);
}

.reel-tile--a { left: 14%; top: 14%; }
.reel-tile--b { right: 14%; top: 14%; background: rgba(242, 74, 22, 0.22); }
.reel-tile--c { left: 14%; bottom: 14%; background: rgba(23, 23, 23, 0.12); }
.reel-tile--d { right: 14%; bottom: 14%; }

.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 32px rgba(45, 36, 25, 0.18);
}

.reel-play::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 19px;
  border-left: 18px solid #fffaf0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.work-card:hover .reel-play {
  animation: showroomPulseButton 0.9s ease-in-out infinite alternate;
}

.preview-ticker {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.preview-ticker--a {
  top: 33%;
  animation: showroomTicker 1.2s ease-in-out infinite;
}

.preview-ticker--b {
  top: 66%;
  animation: showroomTicker 1.2s 0.2s ease-in-out infinite reverse;
}

.showroom-footer {
  background: var(--bg-offset);
  border-top-color: var(--border);
}

@keyframes showroomCursor {
  from { transform: translate(0, 0); }
  to { transform: translate(36px, -28px); }
}

@keyframes showroomLine {
  0% { transform: scaleX(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes showroomPulse {
  from { transform: scale(0.82); }
  to { transform: scale(1.18); }
}

@keyframes showroomSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes showroomOrbit {
  from { transform: rotate(0deg) translateX(42px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(42px) rotate(-360deg); }
}

@keyframes showroomScan {
  from { transform: translateX(0); }
  to { transform: translateX(760%); }
}

@keyframes showroomPlayhead {
  from { left: 14%; }
  to { left: 84%; }
}

@keyframes showroomCrop {
  from { transform: translate(0, 0) scale(0.84); }
  to { transform: translate(28%, 18%) scale(1.16); }
}

@keyframes showroomEaseBall {
  0% { transform: translateX(0); }
  70%, 100% { transform: translateX(min(58vw, 210px)); }
}

@keyframes showroomFrame {
  from { transform: translateY(0); }
  to { transform: translateY(12px); }
}

@keyframes showroomType {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

@keyframes showroomCounter {
  0% { width: 18%; }
  50% { width: 34%; }
  100% { width: 26%; }
}

@keyframes showroomPulseButton {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes showroomTicker {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 1180px) {
  .showroom-intro-grid {
    grid-template-columns: 1fr 1.4fr;
  }

  .showroom-status {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-card,
  .work-card--large,
  .work-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .home-showroom .container {
    padding: 0 18px;
  }

  .home-showroom .navbar {
    height: 72px;
  }

  .home-showroom .nav-menu {
    top: 72px;
    height: calc(100vh - 72px);
    background: var(--bg);
  }

  .home-showroom .btn-cta-secondary,
  .home-showroom .btn-cta-primary {
    display: none;
  }

  .showroom-intro {
    padding: 104px 0 18px;
  }

  .showroom-intro-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .showroom-phrases {
    max-width: 100%;
  }

  .showroom-center h1 {
    font-size: clamp(34px, 13vw, 52px);
    line-height: 0.98;
  }

  .showroom-workbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .showroom-note {
    max-width: none;
    text-align: left;
  }

  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }

  .work-card,
  .work-card--large,
  .work-card--wide,
  .work-card--tall {
    grid-column: span 2;
  }

  .work-card--tall .work-media {
    aspect-ratio: 4 / 3;
  }

  .work-caption h2 {
    font-size: 12px;
  }

  .work-caption p {
    font-size: 10px;
  }
}

/* --- Dark Motion-First Homepage Override --- */
body.home-showroom {
  --bg: #010101;
  --bg-offset: #050505;
  --panel: #090909;
  --panel-hover: #111111;
  --panel-light: #171717;
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.34);
  --text: #f7f3ed;
  --text-muted: #8b8781;
  --text-dim: #4f4d49;
  --accent: #ff4b12;
  --accent-light: #ff8a45;
  --accent-strong: #ff3b00;
  --signal-green: #c7ff36;
  --signal-blue: #29d8ff;
  --signal-pink: #ff4fb8;
  --accent-soft: rgba(255, 75, 18, 0.13);
  --accent-soft-hover: rgba(255, 75, 18, 0.22);
  --accent-glow: rgba(255, 75, 18, 0.28);
  --gradient-accent: linear-gradient(135deg, #ff8a45, #ff3b00);
  --shadow-sm: 0 14px 42px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 24px 72px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 34px 120px rgba(0, 0, 0, 0.78);
  background: #010101;
  color: var(--text);
}

.home-showroom .grid-bg {
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-position: center top;
  background-size: 72px 72px;
}

.home-showroom .navbar {
  height: 74px;
  background: rgba(1, 1, 1, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.home-showroom .logo-img,
.home-showroom .footer-logo {
  background: #010101;
  filter: none;
}

.home-showroom .logo-link:hover .logo-img,
.home-showroom .footer-logo:hover {
  filter: drop-shadow(0 0 14px var(--accent-glow));
}

.home-showroom .logo-text,
.home-showroom .nav-link {
  color: var(--text);
}

.home-showroom .nav-link {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-showroom .nav-link:hover,
.home-showroom .nav-link.is-active {
  color: var(--text);
}

.home-showroom .nav-link::after {
  background: var(--accent);
}

.home-showroom .btn {
  border-radius: 0;
  padding: 10px 18px;
  text-transform: uppercase;
}

.home-showroom .btn-secondary {
  background: #070707;
  border-color: var(--border);
  color: var(--text);
}

.home-showroom .btn-secondary:hover {
  background: #141414;
  border-color: var(--border-hover);
}

.home-showroom .btn-primary {
  color: #050505;
}

.showroom-page {
  overflow: hidden;
}

.showroom-intro {
  padding: 96px 0 10px;
}

.showroom-intro-grid {
  grid-template-columns: minmax(160px, 0.54fr) minmax(420px, 1.68fr) minmax(150px, 0.48fr);
  gap: 26px;
}

.showroom-phrases,
.showroom-status,
.section-index {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.28;
}

.showroom-phrases,
.showroom-status {
  color: var(--text-dim);
}

.showroom-phrases p:first-child,
.showroom-status a,
.section-index span:first-child {
  color: var(--text);
}

.showroom-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.showroom-center h1 {
  max-width: 980px;
  color: var(--text);
  font-size: clamp(44px, 7.1vw, 98px);
  font-weight: 900;
  line-height: 0.86;
  text-wrap: balance;
}

.showroom-work {
  padding: 0 0 112px;
}

.showroom-workbar {
  align-items: start;
  border-top: 1px solid var(--border);
  gap: 28px;
  padding: 14px 0 16px;
}

.section-index {
  display: grid;
  gap: 3px;
  min-width: 190px;
  text-transform: uppercase;
}

.section-index span:last-child {
  color: var(--text-muted);
}

.showroom-note {
  max-width: 440px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.work-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.work-card {
  grid-column: span 4;
}

.work-card--hero {
  grid-column: span 7;
}

.work-card--large {
  grid-column: span 6;
}

.work-card--wide {
  grid-column: span 8;
}

.work-card--tall {
  grid-column: span 5;
}

.work-card--offset {
  margin-top: 58px;
}

.work-card:hover {
  transform: translateY(-8px);
}

.work-media {
  background: #080808;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  box-shadow: none;
}

.work-card--hero .work-media,
.work-card--large .work-media {
  aspect-ratio: 16 / 9;
}

.work-card--wide .work-media {
  aspect-ratio: 17 / 8;
}

.work-card--tall .work-media {
  aspect-ratio: 4 / 5;
}

.work-card:hover .work-media {
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(255, 75, 18, 0.12), var(--shadow-md);
}

.work-caption {
  gap: 3px;
  padding-top: 10px;
}

.work-caption h2 {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.work-caption p {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.work-media--ui {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, #050505 0%, #0c1214 58%, #190904 100%);
  background-size: 44px 44px, 44px 44px, auto;
}

.ui-window {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.42);
}

.ui-window span {
  background: rgba(255, 255, 255, 0.16);
}

.ui-window span:nth-child(3) {
  background: var(--accent);
}

.ui-window i {
  background: rgba(255, 255, 255, 0.14);
}

.ui-window i:nth-of-type(3) {
  background: rgba(255, 75, 18, 0.74);
}

.ui-panel {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.ui-cursor {
  border-color: var(--text);
}

.work-media--chart {
  background:
    linear-gradient(120deg, #060606 0%, #0d1411 55%, #130805 100%);
}

.chart-bar {
  background: rgba(255, 255, 255, 0.18);
}

.chart-bar--d {
  background: var(--signal-green);
}

.chart-path {
  border-color: var(--accent);
}

.work-media--macro {
  background:
    linear-gradient(135deg, #050505 0%, #111111 50%, #10140a 100%);
}

.macro-frame {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.macro-chip {
  background: rgba(255, 255, 255, 0.16);
}

.macro-chip--b {
  background: var(--accent);
}

.macro-focus {
  border-color: var(--text);
}

.work-media--story {
  background:
    linear-gradient(135deg, #050505 0%, #0d0f15 54%, #170711 100%);
}

.story-card {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.065);
}

.story-card--b {
  background: rgba(41, 216, 255, 0.1);
}

.story-arrow,
.story-arrow::after {
  border-color: var(--signal-blue);
}

.story-arrow {
  background: var(--signal-blue);
}

.work-media--brief {
  background:
    linear-gradient(135deg, #050505 0%, #0e1110 58%, #141008 100%);
}

.brief-slider {
  background: rgba(255, 255, 255, 0.22);
}

.brief-slider::after {
  background: var(--signal-green);
}

.brief-total {
  background: rgba(255, 255, 255, 0.14);
}

.brief-button {
  background: var(--accent);
}

.work-media--reel {
  background:
    linear-gradient(135deg, #050505 0%, #101014 52%, #180b04 100%);
}

.reel-tile {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.reel-tile--b {
  background: rgba(255, 75, 18, 0.28);
}

.reel-tile--c {
  background: rgba(199, 255, 54, 0.12);
}

.reel-play {
  background: var(--text);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
}

.reel-play::after {
  border-left-color: #050505;
}

.work-media--rig {
  background:
    linear-gradient(135deg, #050505 0%, #0d1513 54%, #071115 100%);
}

.rig-node {
  background: #050505;
  border-color: var(--text);
}

.rig-line {
  background: rgba(255, 255, 255, 0.32);
}

.work-media--timeline {
  background:
    linear-gradient(135deg, #050505 0%, #0e1016 58%, #140b05 100%);
}

.timeline-row {
  background: rgba(255, 255, 255, 0.2);
}

.timeline-key {
  background: #050505;
  border-color: var(--accent);
}

.work-media--curve {
  background:
    linear-gradient(155deg, #050505 0%, #0c1117 56%, #101409 100%);
}

.curve-axis {
  background: rgba(255, 255, 255, 0.18);
}

.curve-path {
  border-color: var(--signal-green);
}

.curve-handle {
  background: #050505;
  border-color: var(--text);
}

.preview-ball {
  background: var(--signal-green);
}

.work-media--type {
  background:
    linear-gradient(135deg, #050505 0%, #101010 48%, #150711 100%);
}

.type-glyph {
  color: var(--text);
}

.type-glyph--b {
  color: var(--signal-pink);
}

.preview-line,
.preview-playhead,
.preview-typebar,
.preview-ticker,
.preview-counter {
  background: var(--accent);
}

.preview-frame,
.preview-crop,
.preview-ring {
  border-color: var(--accent);
}

.preview-scan {
  background: rgba(255, 255, 255, 0.2);
}

.designer-tools {
  position: relative;
  z-index: 10;
  padding: 118px 0 120px;
  background:
    linear-gradient(180deg, #010101 0%, #050505 100%);
  border-top: 1px solid var(--border);
}

.tools-intro {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(320px, 1fr) minmax(220px, 0.5fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}

.tools-intro .showroom-kicker {
  align-self: start;
}

.tools-intro h2 {
  color: var(--text);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 900;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}

.tools-intro p {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.tools-grid .work-card {
  grid-column: span 3;
}

.tools-grid .work-card--wide {
  grid-column: span 6;
}

.tools-grid .work-card--tall {
  grid-column: span 3;
}

.showroom-footer {
  background: #010101;
  border-top-color: var(--border);
}

.home-showroom .footer-copy,
.home-showroom .footer-link {
  color: var(--text-muted);
}

.home-showroom .footer-link:hover {
  color: var(--text);
}

@media (max-width: 1180px) {
  .showroom-intro-grid {
    grid-template-columns: 1fr 1.55fr;
  }

  .showroom-status {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .work-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .work-card,
  .work-card--hero,
  .work-card--large,
  .work-card--wide,
  .work-card--tall,
  .tools-grid .work-card,
  .tools-grid .work-card--wide,
  .tools-grid .work-card--tall {
    grid-column: span 4;
  }

  .work-card--offset {
    margin-top: 0;
  }

  .tools-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .home-showroom .navbar {
    height: 72px;
  }

  .home-showroom .nav-menu {
    top: 72px;
    height: calc(100vh - 72px);
    background: #010101;
  }

  .showroom-intro {
    padding: 88px 0 10px;
  }

  .showroom-intro-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .showroom-center h1 {
    font-size: clamp(40px, 15vw, 64px);
    line-height: 0.88;
  }

  .showroom-work {
    padding-bottom: 76px;
  }

  .showroom-workbar {
    flex-direction: column;
    gap: 12px;
  }

  .showroom-note {
    max-width: none;
    text-align: left;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .work-card,
  .work-card--hero,
  .work-card--large,
  .work-card--wide,
  .work-card--tall,
  .tools-grid .work-card,
  .tools-grid .work-card--wide,
  .tools-grid .work-card--tall {
    grid-column: auto;
  }

  .work-card--wide .work-media,
  .work-card--tall .work-media {
    aspect-ratio: 4 / 3;
  }

  .designer-tools {
    padding: 80px 0 84px;
  }

  .tools-intro {
    gap: 14px;
    margin-bottom: 28px;
  }

  .tools-intro h2 {
    font-size: clamp(34px, 12vw, 52px);
  }
}

/* --- Compact Anagrama-like Pass --- */
body.home-showroom {
  background: #000000;
  color: #f2f2f2;
}

.home-showroom .grid-bg {
  display: none;
}

.home-showroom .navbar {
  height: 68px;
  background: rgba(0, 0, 0, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.home-showroom .logo-img {
  filter: invert(1);
}

.home-showroom .logo-link:hover .logo-img {
  filter: drop-shadow(0 0 8px var(--accent-glow)) invert(35%) sepia(87%) saturate(2258%) hue-rotate(345deg) brightness(101%) contrast(108%);
}

.home-showroom .logo-link {
  font-size: 20px;
}

.home-showroom .nav-menu {
  gap: 30px;
}

.home-showroom .nav-link,
.home-showroom .btn,
.showroom-phrases,
.showroom-status,
.showroom-kicker,
.section-index,
.showroom-note,
.work-caption h2,
.work-caption p {
  font-size: 10px;
  letter-spacing: 0;
}

.home-showroom .btn {
  min-height: 34px;
  padding: 8px 14px;
}

.showroom-intro {
  padding: 96px 0 14px;
}

.showroom-intro-grid {
  grid-template-columns: minmax(170px, 0.65fr) minmax(320px, 1.3fr) minmax(150px, 0.55fr);
  gap: 28px;
}

.showroom-center {
  gap: 8px;
}

.showroom-center h1 {
  max-width: 600px;
  font-size: clamp(20px, 2.15vw, 31px);
  font-weight: 900;
  line-height: 1;
}

.showroom-phrases,
.showroom-status,
.section-index {
  line-height: 1.22;
}

.showroom-status {
  gap: 4px;
}

.showreel-section {
  position: relative;
  z-index: 10;
  padding: 18px 0 28px;
}

.showreel-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  overflow: hidden;
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.showreel-video,
.showreel-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.showreel-video {
  object-fit: cover;
  z-index: 2;
}

.showreel-video:not([src]) {
  display: none;
}

.showreel-poster {
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 34%),
    var(--accent);
  background-position: center;
  background-size: cover;
}

.showreel-frame:hover .showreel-poster {
  background: #ffffff;
}

.showroom-work {
  padding: 0 0 84px;
}

.showroom-workbar {
  padding: 12px 0 16px;
}

.showroom-note {
  max-width: 310px;
}

.work-grid {
  gap: 20px;
}

.work-card:hover {
  transform: none;
}

.work-media,
.work-card--hero .work-media,
.work-card--large .work-media,
.work-card--wide .work-media,
.work-card--tall .work-media {
  aspect-ratio: 4 / 3;
}

.work-card--hero {
  grid-column: span 6;
}

.work-card--tall {
  grid-column: span 3;
}

.work-card--wide {
  grid-column: span 6;
}

.work-card {
  grid-column: span 3;
}

.motion-grid .work-card--hero {
  grid-column: span 6;
}

.motion-grid .work-card--tall {
  grid-column: span 3;
}

.motion-grid .work-card--wide {
  grid-column: span 6;
}

.motion-grid .work-card {
  grid-column: span 3;
}

.motion-grid .work-card--hero,
.motion-grid .work-card--wide {
  grid-column: span 6;
}

.work-card--offset {
  margin-top: 0;
}

.work-media {
  background: var(--accent) !important;
  border: 0;
  box-shadow: none;
  transition: none;
}

.work-card:hover .work-media,
.work-card:focus-visible .work-media {
  background: #ffffff !important;
  box-shadow: none;
}

.work-thumb,
.work-preview {
  display: none;
}

.work-caption {
  padding-top: 8px;
}

.work-caption h2 {
  line-height: 1.1;
}

.work-caption p {
  color: #8a8a8a;
  line-height: 1.16;
}

.designer-tools {
  padding: 76px 0 96px;
  background: #000000;
}

.tools-intro {
  display: block;
  margin-bottom: 20px;
}

.tools-intro h2 {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.tools-grid .work-card,
.tools-grid .work-card--wide,
.tools-grid .work-card--tall {
  grid-column: span 3;
}

@media (max-width: 1180px) {
  .showroom-intro-grid {
    grid-template-columns: 1fr 1.35fr;
  }

  .showroom-center h1 {
    font-size: clamp(24px, 4vw, 42px);
  }

  .work-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .work-card,
  .work-card--hero,
  .work-card--wide,
  .work-card--tall,
  .tools-grid .work-card,
  .tools-grid .work-card--wide,
  .tools-grid .work-card--tall {
    grid-column: span 4;
  }
}

@media (max-width: 760px) {
  .home-showroom .navbar {
    height: 64px;
  }

  .home-showroom .nav-menu {
    top: 64px;
    height: calc(100vh - 64px);
  }

  .showroom-intro {
    padding: 82px 0 12px;
  }

  .showroom-intro-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .showroom-center h1 {
    font-size: clamp(20px, 6.4vw, 28px);
    line-height: 1;
  }

  .showreel-section {
    padding: 12px 0 20px;
  }

  .showreel-frame {
    aspect-ratio: 4 / 3;
  }

  .showroom-workbar {
    gap: 10px;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-card,
  .work-card--hero,
  .work-card--wide,
  .work-card--tall,
  .tools-grid .work-card,
  .tools-grid .work-card--wide,
  .tools-grid .work-card--tall {
    grid-column: auto;
  }

  .designer-tools {
    padding: 56px 0 72px;
  }
}

/* --- Broken Editorial Grid Restore --- */
@media (min-width: 1181px) {
  .motion-grid .work-card {
    grid-column: span 4;
  }

  .motion-grid .work-card--hero {
    grid-column: span 7;
  }

  .motion-grid .work-card--tall {
    grid-column: span 5;
  }

  .motion-grid .work-card--wide {
    grid-column: span 8;
  }

  .motion-grid .work-card--offset {
    grid-column: span 4;
    margin-top: 72px;
  }

  .motion-grid .work-card:nth-child(6) {
    grid-column: span 4;
    margin-top: -44px;
  }

  .motion-grid .work-card--hero .work-media {
    aspect-ratio: 16 / 9;
  }

  .motion-grid .work-card--tall .work-media {
    aspect-ratio: 4 / 5;
  }

  .motion-grid .work-card--wide .work-media {
    aspect-ratio: 17 / 8;
  }

  .tools-grid .work-card {
    grid-column: span 3;
  }

  .tools-grid .work-card--wide {
    grid-column: span 6;
  }

  .tools-grid .work-card--tall {
    grid-column: span 3;
    margin-top: -34px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .motion-grid .work-card,
  .motion-grid .work-card--hero,
  .motion-grid .work-card--wide,
  .motion-grid .work-card--tall,
  .tools-grid .work-card,
  .tools-grid .work-card--wide,
  .tools-grid .work-card--tall {
    grid-column: span 4;
  }

  .motion-grid .work-card--hero,
  .motion-grid .work-card--wide {
    grid-column: span 8;
  }
}

/* --- Compact Intro Correction --- */
.showroom-intro {
  min-height: auto;
  display: block;
  padding: 76px 0 18px;
}

.showroom-intro-grid {
  align-items: start;
}

.showroom-center {
  text-align: center;
  justify-items: center;
}

.showroom-logo {
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
}

.showroom-center .showroom-kicker {
  margin-bottom: 8px;
}

.showroom-center h1 {
  text-align: center;
}

.showreel-section {
  padding-top: 8px;
}

@media (min-width: 1181px) {
  .showroom-intro .container {
    position: relative;
  }

  .showroom-center {
    grid-column: auto;
  }

  .showroom-phrases,
  .showroom-status {
    position: static;
    transform: none;
  }
}

@media (max-width: 760px) {
  .showroom-intro {
    min-height: auto;
    padding: 72px 0 14px;
  }

  .showroom-center {
    order: 0;
    margin-top: 0;
  }
}

/* --- Client Offer Top / Dense Studio Grid --- */
.home-showroom .navbar {
  transform: translateY(-110%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), background-color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-showroom.has-scrolled .navbar,
.home-showroom.nav-open .navbar {
  transform: translateY(0);
}

.home-showroom .logo-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: transparent;
  filter: none;
}

.home-showroom .logo-link:hover .logo-img {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.showroom-intro {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
}

.showroom-intro-grid {
  width: 100%;
  align-items: center;
}

.showroom-center {
  justify-items: center;
  text-align: center;
}

.showroom-logo {
  width: clamp(54px, 6.2vw, 86px);
  height: clamp(54px, 6.2vw, 86px);
  object-fit: contain;
  margin-bottom: 14px;
}

.showroom-center .showroom-kicker {
  margin-bottom: 12px;
  color: var(--text);
}

.showroom-center h1 {
  max-width: 560px;
  margin: 0 auto;
}

.showroom-phrases {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.showroom-phrases a {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.22;
  text-transform: uppercase;
}

.showroom-phrases a:first-child,
.showroom-phrases a:hover {
  color: var(--text);
}

.showroom-status {
  align-self: center;
}

.showreel-section {
  padding-top: 0;
}

.showroom-workbar {
  border-top: 0;
}

@media (min-width: 1181px) {
  .showroom-intro .container {
    position: relative;
  }

  .showroom-center {
    grid-column: 1 / -1;
  }

  .showroom-phrases,
  .showroom-status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .showroom-phrases {
    left: 0;
  }

  .showroom-status {
    right: 0;
  }

  .work-grid {
    grid-auto-flow: dense;
    grid-auto-rows: 20px;
    align-items: stretch;
  }

  .work-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
  }

  .work-media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto !important;
  }

  .motion-grid .work-card {
    grid-column: span 4;
    grid-row: span 8;
  }

  .motion-grid .work-card--hero {
    grid-column: span 7;
    grid-row: span 10;
  }

  .motion-grid .work-card--tall {
    grid-column: span 5;
    grid-row: span 14;
  }

  .motion-grid .work-card--offset {
    grid-column: span 4;
    grid-row: span 8;
    margin-top: 0;
  }

  .motion-grid .work-card--wide {
    grid-column: span 8;
    grid-row: span 9;
  }

  .motion-grid .work-card:nth-child(6) {
    grid-column: span 4;
    grid-row: span 8;
    margin-top: 0;
  }

  .tools-grid .work-card {
    grid-column: span 3;
    grid-row: span 8;
  }

  .tools-grid .work-card--wide {
    grid-column: span 6;
    grid-row: span 9;
  }

  .tools-grid .work-card--tall {
    grid-column: span 3;
    grid-row: span 11;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .showroom-intro {
    min-height: 100svh;
    padding: 0;
  }

  .showroom-center {
    order: -1;
    margin-top: 12px;
  }

  .showroom-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
  }

  .showroom-phrases {
    margin-top: 20px;
  }

  .showroom-status {
    justify-items: start;
    text-align: left;
  }

  .work-grid {
    gap: 14px;
  }

  .work-media,
  .work-card--hero .work-media,
  .work-card--large .work-media,
  .work-card--wide .work-media,
  .work-card--tall .work-media {
    aspect-ratio: 4 / 3;
  }
}

/* --- Final: intro is compact, only title text is centered --- */
.showroom-intro {
  min-height: auto;
  display: block;
  align-items: initial;
  padding: 76px 0 18px;
}

.showroom-intro-grid {
  width: auto;
  align-items: center;
}

.showroom-center {
  grid-column: auto;
  text-align: center;
  justify-items: center;
  margin-top: 0;
}

.showroom-logo {
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
}

.showroom-center .showroom-kicker {
  margin-bottom: 8px;
}

@media (min-width: 1181px) {
  .showroom-intro-grid {
    grid-template-columns: minmax(170px, 1fr) minmax(380px, 1.34fr) minmax(170px, 1fr);
  }

  .showroom-phrases,
  .showroom-status {
    position: static;
    transform: none;
    align-self: center;
  }
}

@media (max-width: 760px) {
  .showroom-intro {
    min-height: auto;
    padding: 72px 0 14px;
  }

  .showroom-center {
    order: 0;
    margin-top: 0;
  }

  .showroom-logo {
    width: 42px;
    height: 42px;
  }
}

/* --- Studio Subpages: Motion Service / Tools --- */
.studio-subpage {
  background: #000000;
}

.studio-subpage h1,
.studio-subpage h2,
.studio-subpage h3,
.studio-subpage .logo-link {
  letter-spacing: 0;
}

.studio-subpage .showroom-page {
  overflow: visible;
}

.studio-subpage .grid-bg,
.studio-subpage .glow-spot {
  display: none;
}

.studio-subpage .logo-img,
.studio-subpage .footer-logo {
  filter: none;
  opacity: 1;
}

.studio-subpage .nav-cta {
  min-width: 30px;
  justify-content: flex-end;
}

.studio-subpage .showroom-intro {
  padding-bottom: 16px;
}

.studio-subpage .showroom-center h1 {
  max-width: 650px;
  font-size: 34px;
  line-height: 0.96;
}

.studio-subpage .showroom-kicker {
  color: var(--text);
}

.studio-subpage .showreel-section {
  padding: 8px 0 54px;
}

.studio-subpage .showreel-frame {
  aspect-ratio: 16 / 6.2;
  border: 0;
}

.studio-subpage .showreel-poster {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 100%),
    var(--accent);
  background-size: 36px 36px, 36px 36px, auto;
}

.studio-subpage .showreel-frame:hover .showreel-poster {
  background: #ffffff;
}

.studio-section {
  position: relative;
  z-index: 10;
  padding: 74px 0 90px;
  background: #000000;
}

.studio-section + .studio-section {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.studio-subpage .showroom-work {
  padding-bottom: 90px;
}

.studio-subpage .showroom-workbar {
  border-top: 0;
  align-items: start;
  padding: 0 0 18px;
}

.studio-subpage .showroom-note {
  max-width: 430px;
  color: #7d7d7d;
  font-size: 11px;
  line-height: 1.28;
  text-align: right;
}

.studio-subpage .section-index {
  color: #7d7d7d;
}

.studio-subpage .section-index span:first-child {
  color: var(--text);
}

.studio-subpage .work-caption h2,
.studio-subpage .work-caption p {
  font-size: 10px;
  letter-spacing: 0;
}

.studio-media-mark {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 4;
  color: rgba(0, 0, 0, 0.82);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.work-card:hover .studio-media-mark {
  color: #000000;
}

.style-preview {
  position: absolute;
  inset: 18px;
  z-index: 3;
  color: #000000;
  pointer-events: none;
}

.style-preview span {
  position: absolute;
  display: block;
}

.style-preview--macro .macro-shell {
  inset: 13% 16% 18% 12%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 12% 18% / 32% 5px no-repeat,
    linear-gradient(currentColor 0 0) 12% 32% / 58% 5px no-repeat,
    linear-gradient(currentColor 0 0) 12% 46% / 46% 5px no-repeat;
  transform-origin: 34% 44%;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.macro-line {
  height: 6px;
  background: currentColor;
  opacity: 0.36;
}

.macro-line--a {
  left: 18%;
  right: 36%;
  top: 28%;
}

.macro-line--b {
  left: 18%;
  right: 48%;
  top: 43%;
}

.macro-line--c {
  left: 18%;
  right: 58%;
  top: 58%;
}

.macro-focus-box {
  left: 35%;
  top: 35%;
  width: 26%;
  aspect-ratio: 1;
  border: 4px solid currentColor;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), left 520ms cubic-bezier(0.16, 1, 0.3, 1), top 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.macro-cursor-dot {
  left: 69%;
  top: 60%;
  width: 16px;
  aspect-ratio: 1;
  background: currentColor;
  border-radius: 50%;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:is(:hover, :focus-visible) .macro-shell {
  transform: scale(1.28) translate(-7%, 5%);
}

.work-card:is(:hover, :focus-visible) .macro-focus-box {
  left: 30%;
  top: 28%;
  transform: scale(0.72);
}

.work-card:is(:hover, :focus-visible) .macro-cursor-dot {
  transform: translate(-120%, -155%) scale(0.72);
}

.style-preview--metric {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1px);
  background-size: 22% 22%;
}

.metric-bar {
  bottom: 10%;
  width: 16%;
  background: currentColor;
  transition: height 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-bar--a {
  left: 11%;
  height: 28%;
}

.metric-bar--b {
  left: 34%;
  height: 48%;
}

.metric-bar--c {
  left: 57%;
  height: 36%;
}

.metric-line {
  left: 13%;
  right: 11%;
  top: 42%;
  height: 30%;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  border-radius: 80% 20% 0 0;
  transform: translateY(18px) skewX(-18deg);
  opacity: 0.82;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-dot {
  right: 10%;
  top: 27%;
  width: 15px;
  aspect-ratio: 1;
  background: currentColor;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-counter {
  right: 8%;
  top: 9%;
  color: currentColor;
  font-size: clamp(16px, 3vw, 34px);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 240ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:is(:hover, :focus-visible) .metric-bar--a { height: 44%; }
.work-card:is(:hover, :focus-visible) .metric-bar--b { height: 68%; }
.work-card:is(:hover, :focus-visible) .metric-bar--c { height: 82%; }
.work-card:is(:hover, :focus-visible) .metric-line { transform: translateY(-8px) skewX(-18deg); }
.work-card:is(:hover, :focus-visible) .metric-dot { transform: scale(1); }
.work-card:is(:hover, :focus-visible) .metric-counter { opacity: 1; transform: translateY(0); }

.launch-frame {
  inset: 14% auto auto 10%;
  width: 30%;
  height: 52%;
  border: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.1);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}

.launch-frame--b {
  left: 35%;
  opacity: 0.62;
}

.launch-frame--c {
  left: 60%;
  opacity: 0.38;
}

.launch-playhead {
  left: 10%;
  bottom: 18%;
  width: 7%;
  height: 5px;
  background: currentColor;
}

.launch-flash {
  inset: 0;
  background: currentColor;
  opacity: 0;
}

.work-card:is(:hover, :focus-visible) .launch-frame--a { transform: translateX(-8%) scale(0.92); opacity: 0.46; }
.work-card:is(:hover, :focus-visible) .launch-frame--b { transform: translateX(-2%) scale(1.04); opacity: 1; }
.work-card:is(:hover, :focus-visible) .launch-frame--c { transform: translateX(8%) scale(0.92); opacity: 0.46; }
.work-card:is(:hover, :focus-visible) .launch-playhead { animation: launchPlayhead 900ms cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.work-card:is(:hover, :focus-visible) .launch-flash { animation: launchFlash 900ms steps(1, end) infinite; }

.tour-card {
  width: 27%;
  height: 40%;
  border: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.08);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-card--a {
  left: 7%;
  top: 18%;
}

.tour-card--b {
  left: 37%;
  top: 31%;
}

.tour-card--c {
  right: 6%;
  top: 18%;
}

.tour-path {
  height: 3px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-path--a {
  left: 31%;
  top: 40%;
  width: 18%;
  transform: rotate(17deg);
}

.tour-path--b {
  left: 59%;
  top: 40%;
  width: 18%;
  transform: rotate(-17deg);
}

.tour-cursor {
  left: 17%;
  top: 65%;
  width: 18px;
  aspect-ratio: 1;
  border: 4px solid currentColor;
  border-radius: 50%;
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:is(:hover, :focus-visible) .tour-card--a { transform: translateY(-8%); }
.work-card:is(:hover, :focus-visible) .tour-card--b { transform: translateY(10%) scale(1.05); }
.work-card:is(:hover, :focus-visible) .tour-card--c { transform: translateY(-8%); }
.work-card:is(:hover, :focus-visible) .tour-cursor { transform: translate(330%, -250%) scale(0.75); }

.onboarding-card {
  inset: 15% 12% 20%;
  border: 3px solid currentColor;
}

.onboarding-step {
  left: 21%;
  right: 22%;
  height: 6px;
  background: currentColor;
  opacity: 0.42;
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-step--a { top: 30%; }
.onboarding-step--b { top: 45%; }
.onboarding-step--c { top: 60%; }

.onboarding-progress {
  left: 21%;
  bottom: 28%;
  width: 18%;
  height: 6px;
  background: currentColor;
  transition: width 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-check {
  right: 18%;
  top: 31%;
  width: 24px;
  height: 14px;
  border-left: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:is(:hover, :focus-visible) .onboarding-step--a { opacity: 1; transform: translateX(8%); }
.work-card:is(:hover, :focus-visible) .onboarding-step--b { opacity: 0.78; transform: translateX(15%); }
.work-card:is(:hover, :focus-visible) .onboarding-step--c { opacity: 0.58; transform: translateX(22%); }
.work-card:is(:hover, :focus-visible) .onboarding-progress { width: 57%; }
.work-card:is(:hover, :focus-visible) .onboarding-check { transform: rotate(-45deg) scale(1); }

.social-tile {
  border: 3px solid currentColor;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.social-tile--wide {
  left: 8%;
  top: 18%;
  width: 60%;
  height: 26%;
}

.social-tile--square {
  left: 18%;
  bottom: 16%;
  width: 32%;
  aspect-ratio: 1;
}

.social-tile--vertical {
  right: 10%;
  top: 16%;
  width: 24%;
  height: 66%;
}

.social-safe {
  left: 30%;
  top: 30%;
  width: 34%;
  aspect-ratio: 1;
  border: 2px dashed currentColor;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.social-play {
  left: 47%;
  top: 45%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid currentColor;
  transform: translate(-50%, -50%);
}

.work-card:is(:hover, :focus-visible) .social-tile--wide { transform: translateX(12%) scaleX(0.86); }
.work-card:is(:hover, :focus-visible) .social-tile--square { transform: translate(68%, -10%) scale(0.88); }
.work-card:is(:hover, :focus-visible) .social-tile--vertical { transform: translateX(-44%) scaleY(0.92); }
.work-card:is(:hover, :focus-visible) .social-safe { opacity: 1; transform: scale(1); }
.work-card:is(:hover, :focus-visible) .social-play { animation: socialPlayPulse 720ms ease-in-out infinite alternate; }

@keyframes launchPlayhead {
  0% { left: 10%; width: 7%; }
  60% { left: 65%; width: 18%; }
  100% { left: 82%; width: 7%; }
}

@keyframes launchFlash {
  0%, 58%, 100% { opacity: 0; }
  60%, 64% { opacity: 0.12; }
}

@keyframes socialPlayPulse {
  from { transform: translate(-50%, -50%) scale(0.86); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}

.home-showroom .showroom-workbar--work-title {
  display: block;
  padding: 0 0 18px;
}

.home-showroom .work-intro-label {
  margin: 0;
}

.home-showroom .tools-intro > span {
  display: inline-block;
  color: var(--text);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.motion-service-page .style-preview {
  inset: 14px;
  color: #050505;
  overflow: hidden;
}

.motion-service-page .style-preview span {
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    width 560ms cubic-bezier(0.16, 1, 0.3, 1),
    height 560ms cubic-bezier(0.16, 1, 0.3, 1),
    left 560ms cubic-bezier(0.16, 1, 0.3, 1),
    right 560ms cubic-bezier(0.16, 1, 0.3, 1),
    top 560ms cubic-bezier(0.16, 1, 0.3, 1),
    bottom 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-service-page .macro-topbar {
  left: 6%;
  right: 6%;
  top: 7%;
  height: 10%;
  border: 3px solid currentColor;
  background:
    radial-gradient(circle at 8% 50%, currentColor 0 3px, transparent 4px),
    radial-gradient(circle at 14% 50%, currentColor 0 3px, transparent 4px),
    linear-gradient(currentColor 0 0) 78% 50% / 14% 3px no-repeat;
}

.motion-service-page .macro-sidebar {
  left: 6%;
  top: 21%;
  bottom: 10%;
  width: 17%;
  border: 2px dashed currentColor;
  background:
    linear-gradient(currentColor 0 0) 26% 18% / 44% 4px no-repeat,
    linear-gradient(currentColor 0 0) 26% 34% / 58% 4px no-repeat,
    linear-gradient(currentColor 0 0) 26% 50% / 42% 4px no-repeat;
  opacity: 0.72;
}

.motion-service-page .style-preview--macro .macro-shell {
  inset: 21% 8% 10% 27%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 9% 13% / 28% 4px no-repeat,
    linear-gradient(currentColor 0 0) 9% 25% / 52% 4px no-repeat,
    linear-gradient(currentColor 0 0) 9% 37% / 37% 4px no-repeat,
    linear-gradient(currentColor 0 0) 78% 14% / 12% 18% no-repeat,
    transparent;
  transform-origin: 50% 48%;
}

.motion-service-page .macro-card {
  border: 2px solid currentColor;
  background: rgba(0, 0, 0, 0.08);
}

.motion-service-page .macro-card--a {
  left: 34%;
  top: 53%;
  width: 18%;
  height: 21%;
}

.motion-service-page .macro-card--b {
  left: 56%;
  top: 53%;
  width: 24%;
  height: 21%;
}

.motion-service-page .macro-line {
  height: 4px;
  opacity: 0.5;
}

.motion-service-page .macro-line--a {
  left: 34%;
  right: 34%;
  top: 34%;
}

.motion-service-page .macro-line--b {
  left: 34%;
  right: 44%;
  top: 43%;
}

.motion-service-page .macro-line--c {
  left: 34%;
  right: 51%;
  top: 79%;
}

.motion-service-page .macro-focus-box {
  left: 53%;
  top: 33%;
  width: 25%;
  aspect-ratio: 1;
  border: 3px dashed currentColor;
  background: rgba(255, 255, 255, 0.1);
}

.motion-service-page .macro-zoom-ring {
  left: 48%;
  top: 26%;
  width: 36%;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.44;
  transform: scale(0.76);
}

.motion-service-page .macro-cursor-dot {
  left: 78%;
  top: 72%;
  width: 17px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 45%, 55% 59%, 40% 100%);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .macro-shell {
  transform: scale(1.18) translate(-6%, 5%);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .macro-focus-box {
  left: 47%;
  top: 29%;
  transform: scale(0.76);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .macro-zoom-ring {
  opacity: 0.9;
  transform: scale(1);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .macro-cursor-dot {
  transform: translate(-165%, -185%) scale(0.88);
}

.motion-service-page .style-preview--metric {
  background: none;
}

.motion-service-page .metric-panel {
  inset: 5%;
  border: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.04);
}

.motion-service-page .metric-nav {
  left: 10%;
  right: 10%;
  top: 10%;
  height: 8%;
  border-bottom: 3px solid currentColor;
  background:
    radial-gradient(circle at 4% 40%, currentColor 0 3px, transparent 4px),
    radial-gradient(circle at 11% 40%, currentColor 0 3px, transparent 4px),
    linear-gradient(currentColor 0 0) 88% 34% / 14% 4px no-repeat;
}

.motion-service-page .metric-kpi {
  top: 23%;
  width: 27%;
  height: 18%;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.1);
}

.motion-service-page .metric-kpi--a {
  left: 10%;
}

.motion-service-page .metric-kpi--b {
  left: 41%;
}

.motion-service-page .metric-kpi::before,
.motion-service-page .metric-kpi::after {
  position: absolute;
  left: 12%;
  color: currentColor;
  line-height: 1;
  letter-spacing: 0;
}

.motion-service-page .metric-kpi::before {
  top: 18%;
  font-size: clamp(13px, 2.1vw, 24px);
  font-weight: 900;
}

.motion-service-page .metric-kpi::after {
  bottom: 16%;
  font-size: 7px;
  font-weight: 900;
  opacity: 0.58;
}

.motion-service-page .metric-kpi--a::before {
  content: "84K";
}

.motion-service-page .metric-kpi--a::after {
  content: "USERS";
}

.motion-service-page .metric-kpi--b::before {
  content: "3.8";
}

.motion-service-page .metric-kpi--b::after {
  content: "RETENTION";
}

.motion-service-page .metric-chart {
  left: 10%;
  right: 8%;
  bottom: 10%;
  height: 42%;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.motion-service-page .metric-grid {
  left: 10%;
  right: 8%;
  bottom: 10%;
  height: 42%;
  background:
    linear-gradient(rgba(0, 0, 0, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 1px, transparent 1px);
  background-size: 100% 25%, 16.66% 100%;
}

.motion-service-page .metric-bar {
  bottom: 14%;
  width: 8%;
  background: currentColor;
}

.motion-service-page .metric-bar--a {
  left: 18%;
  height: 18%;
}

.motion-service-page .metric-bar--b {
  left: 30%;
  height: 29%;
}

.motion-service-page .metric-bar--c {
  left: 42%;
  height: 23%;
}

.motion-service-page .metric-line {
  left: 55%;
  right: 14%;
  top: 54%;
  height: 19%;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  border-radius: 70% 30% 0 0;
  opacity: 0.9;
  transform: translateY(10px) skewX(-18deg);
}

.motion-service-page .metric-dot {
  right: 11%;
  top: 43%;
  width: 13px;
  border-radius: 50%;
  transform: scale(0.75);
}

.motion-service-page .metric-spark {
  height: 3px;
  background: currentColor;
  opacity: 0.72;
  transform-origin: left center;
}

.motion-service-page .metric-spark--a {
  left: 55%;
  top: 66%;
  width: 16%;
  transform: rotate(-20deg);
}

.motion-service-page .metric-spark--b {
  left: 69%;
  top: 59%;
  width: 15%;
  transform: rotate(17deg);
}

.motion-service-page .metric-counter {
  right: 11%;
  top: 25%;
  font-size: clamp(15px, 2.4vw, 28px);
  opacity: 0.72;
  transform: translateY(0);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-kpi--a::before {
  content: "91K";
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-kpi--b::before {
  content: "4.4";
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-bar--a {
  height: 31%;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-bar--b {
  height: 43%;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-bar--c {
  height: 36%;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-line {
  transform: translateY(-5px) skewX(-18deg);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-dot {
  transform: scale(1);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .metric-counter {
  opacity: 1;
  transform: translateY(-4px) scale(1.04);
}

.motion-service-page .launch-timeline {
  left: 8%;
  right: 8%;
  bottom: 11%;
  height: 17%;
  border: 2px solid currentColor;
}

.motion-service-page .launch-track {
  left: 12%;
  right: 12%;
  height: 3px;
  background: currentColor;
  opacity: 0.58;
}

.motion-service-page .launch-track--a {
  bottom: 21%;
}

.motion-service-page .launch-track--b {
  bottom: 15%;
}

.motion-service-page .launch-scene {
  top: 14%;
  width: 24%;
  height: 36%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 18% 22% / 52% 4px no-repeat,
    linear-gradient(currentColor 0 0) 18% 39% / 34% 4px no-repeat;
}

.motion-service-page .launch-scene--a {
  left: 9%;
}

.motion-service-page .launch-scene--b {
  right: 9%;
}

.motion-service-page .launch-frame {
  top: 24%;
  width: 23%;
  height: 43%;
  background: rgba(255, 255, 255, 0.09);
}

.motion-service-page .launch-frame--a {
  left: 13%;
}

.motion-service-page .launch-frame--b {
  left: 38%;
}

.motion-service-page .launch-frame--c {
  left: 63%;
}

.motion-service-page .launch-caption-block {
  left: 14%;
  top: 70%;
  width: 33%;
  height: 5px;
  background: currentColor;
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.45);
}

.motion-service-page .launch-cta {
  right: 14%;
  top: 68%;
  width: 17%;
  height: 11%;
  border: 3px solid currentColor;
}

.motion-service-page .launch-playhead {
  left: 10%;
  bottom: 10%;
  width: 6%;
  height: 17%;
  background: currentColor;
}

.motion-service-page .tour-screen {
  inset: 8%;
  border: 3px solid currentColor;
}

.motion-service-page .tour-sidebar {
  left: 8%;
  top: 8%;
  bottom: 8%;
  width: 17%;
  border-right: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 23% 18% / 48% 4px no-repeat,
    linear-gradient(currentColor 0 0) 23% 32% / 58% 4px no-repeat,
    linear-gradient(currentColor 0 0) 23% 46% / 36% 4px no-repeat;
  opacity: 0.72;
}

.motion-service-page .tour-card {
  width: 19%;
  height: 29%;
  background:
    linear-gradient(currentColor 0 0) 17% 20% / 52% 4px no-repeat,
    linear-gradient(currentColor 0 0) 17% 39% / 34% 4px no-repeat,
    rgba(255, 255, 255, 0.1);
}

.motion-service-page .tour-card--a {
  left: 31%;
  top: 20%;
}

.motion-service-page .tour-card--b {
  left: 53%;
  top: 38%;
}

.motion-service-page .tour-card--c {
  right: 9%;
  top: 17%;
}

.motion-service-page .tour-path {
  height: 0;
  border-top: 3px dashed currentColor;
  background: transparent;
}

.motion-service-page .tour-path--a {
  left: 48%;
  top: 34%;
  width: 17%;
  transform: rotate(23deg);
}

.motion-service-page .tour-path--b {
  left: 69%;
  top: 36%;
  width: 14%;
  transform: rotate(-19deg);
}

.motion-service-page .tour-hotspot {
  width: 16px;
  aspect-ratio: 1;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: #ffffff;
}

.motion-service-page .tour-hotspot--a {
  left: 48%;
  top: 30%;
}

.motion-service-page .tour-hotspot--b {
  left: 67%;
  top: 50%;
}

.motion-service-page .tour-tooltip {
  right: 13%;
  bottom: 13%;
  width: 29%;
  height: 18%;
  border: 3px solid currentColor;
  background:
    linear-gradient(currentColor 0 0) 16% 34% / 54% 4px no-repeat,
    linear-gradient(currentColor 0 0) 16% 58% / 34% 4px no-repeat,
    #ffffff;
  opacity: 0.82;
}

.motion-service-page .tour-cursor {
  left: 33%;
  top: 72%;
  width: 18px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 45%, 55% 59%, 40% 100%);
  background: currentColor;
  border: 0;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .tour-card--a {
  transform: translateY(-8%);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .tour-card--b {
  transform: translateY(7%) scale(1.06);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .tour-card--c {
  transform: translateY(-7%);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .tour-tooltip {
  transform: translateY(-8px);
  opacity: 1;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .tour-cursor {
  transform: translate(430%, -310%) scale(0.82);
}

.motion-service-page .onboarding-card {
  inset: 10% 14% 11%;
  border: 3px solid currentColor;
  background: rgba(255, 255, 255, 0.08);
}

.motion-service-page .onboarding-avatar {
  left: 22%;
  top: 18%;
  width: 15%;
  aspect-ratio: 1;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, currentColor 0 16%, transparent 17%);
}

.motion-service-page .onboarding-field {
  left: 43%;
  right: 22%;
  height: 9%;
  border: 2px solid currentColor;
}

.motion-service-page .onboarding-field--a {
  top: 20%;
}

.motion-service-page .onboarding-field--b {
  top: 34%;
}

.motion-service-page .onboarding-step {
  left: 23%;
  right: auto;
  width: 11%;
  height: 11%;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
}

.motion-service-page .onboarding-step--a {
  top: 54%;
}

.motion-service-page .onboarding-step--b {
  top: 54%;
  left: 40%;
}

.motion-service-page .onboarding-step--c {
  top: 54%;
  left: 57%;
}

.motion-service-page .onboarding-progress {
  left: 23%;
  bottom: 20%;
  width: 20%;
  height: 7px;
}

.motion-service-page .onboarding-button {
  right: 22%;
  bottom: 16%;
  width: 25%;
  height: 12%;
  background: currentColor;
}

.motion-service-page .onboarding-check {
  left: 26%;
  top: 56%;
  right: auto;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .onboarding-step--a {
  transform: scale(1.04);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .onboarding-step--b {
  transform: translateX(3%) scale(1.04);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .onboarding-step--c {
  transform: translateX(6%) scale(1.04);
}

.motion-service-page .work-card:is(:hover, :focus-visible) .onboarding-progress {
  width: 51%;
}

.motion-service-page .work-card:is(:hover, :focus-visible) .onboarding-check {
  transform: rotate(-45deg) scale(1);
}

.motion-service-page .social-grid {
  inset: 8%;
  border: 2px dashed currentColor;
  opacity: 0.48;
}

.motion-service-page .social-tile {
  background:
    linear-gradient(currentColor 0 0) 13% 18% / 36% 4px no-repeat,
    linear-gradient(currentColor 0 0) 13% 34% / 23% 4px no-repeat,
    rgba(255, 255, 255, 0.08);
}

.motion-service-page .social-tile--wide {
  left: 9%;
  top: 13%;
  width: 56%;
  height: 24%;
}

.motion-service-page .social-tile--square {
  left: 16%;
  bottom: 14%;
  width: 31%;
}

.motion-service-page .social-tile--vertical {
  right: 9%;
  top: 12%;
  width: 25%;
  height: 70%;
}

.motion-service-page .social-safe {
  left: 35%;
  top: 24%;
  width: 28%;
  border: 2px dashed currentColor;
}

.motion-service-page .social-caption {
  left: 17%;
  bottom: 24%;
  width: 22%;
  height: 4px;
  background: currentColor;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.48), 0 16px 0 rgba(0, 0, 0, 0.28);
}

.motion-service-page .social-ratio-tag {
  right: 13%;
  top: 17%;
  width: 14%;
  height: 8%;
  border: 2px solid currentColor;
  background: #ffffff;
}

.motion-service-page .social-play {
  left: 76%;
  top: 47%;
}

/* --- Showcase UI Mockups Pass --- */
.motion-service-page .service-grid .work-card,
.motion-service-page .service-grid .work-card * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.motion-service-page .service-grid .work-card:is(:hover, :focus-visible) .work-media {
  background: var(--accent) !important;
}

.motion-service-page .service-grid .work-media {
  overflow: hidden;
}

@media (min-width: 1181px) {
  .motion-service-page .service-grid .work-card:nth-child(6) {
    grid-column: span 6;
    grid-row: span 8;
  }
}

.motion-service-page .service-grid .ui-shot,
.motion-service-page .service-grid .ui-shot * {
  cursor: inherit;
  pointer-events: none;
}

.motion-service-page .service-grid .ui-shot {
  inset: clamp(12px, 2.2vw, 30px);
  color: #070707;
  font-family: var(--font-sans);
  line-height: 1.1;
  overflow: hidden;
}

.motion-service-page .service-grid .ui-shot--landing,
.motion-service-page .service-grid .ui-shot--onboard {
  inset: clamp(12px, 1.5vw, 20px);
}

.motion-service-page .service-grid .ui-shot span,
.motion-service-page .service-grid .ui-shot i,
.motion-service-page .service-grid .ui-shot b,
.motion-service-page .service-grid .ui-shot em,
.motion-service-page .service-grid .ui-shot small,
.motion-service-page .service-grid .ui-shot strong,
.motion-service-page .service-grid .ui-shot button,
.motion-service-page .service-grid .ui-shot article,
.motion-service-page .service-grid .ui-shot aside,
.motion-service-page .service-grid .ui-shot main,
.motion-service-page .service-grid .ui-shot section,
.motion-service-page .service-grid .ui-shot nav,
.motion-service-page .service-grid .ui-shot footer,
.motion-service-page .service-grid .ui-shot div {
  position: relative;
  display: block;
  transform: none;
  transition: none;
}

.motion-service-page .service-grid .ui-shot button {
  border: 0;
  border-radius: 5px;
  background: #090909;
  color: #ffffff;
  font-size: clamp(7px, 0.62vw, 12px);
  font-weight: 800;
  line-height: 1;
  padding: 0;
  text-align: center;
}

.motion-service-page .service-grid .ui-app-window,
.motion-service-page .service-grid .ui-dashboard,
.motion-service-page .service-grid .ui-landing-card,
.motion-service-page .service-grid .ui-flow,
.motion-service-page .service-grid .ui-onboard-modal,
.motion-service-page .service-grid .ui-social-stage {
  width: 100%;
  height: 100%;
}

.ui-app-window {
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 19% 1fr;
  border: 2px solid #080808;
  border-radius: 7px;
  background: #f7f7f4;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.ui-sidebar {
  display: flex !important;
  flex-direction: column;
  gap: clamp(5px, 0.65vw, 10px);
  padding: clamp(10px, 1.25vw, 18px) clamp(7px, 0.85vw, 13px);
  background: #101010;
  color: #f8f8f6;
  font-size: clamp(6px, 0.56vw, 10px);
  font-weight: 800;
}

.ui-sidebar strong {
  margin-bottom: clamp(6px, 0.8vw, 12px);
  font-size: clamp(8px, 0.76vw, 14px);
}

.ui-sidebar span {
  padding: clamp(5px, 0.58vw, 9px) clamp(6px, 0.75vw, 11px);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.72);
}

.ui-sidebar span.is-active {
  background: rgba(249, 58, 0, 0.48);
  color: #ffffff;
}

.ui-sidebar small {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(5px, 0.5vw, 9px);
  font-weight: 800;
}

.ui-products-panel {
  padding: clamp(14px, 1.8vw, 30px);
  background: #f8f8f5;
}

.ui-panel-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(13px, 1.6vw, 26px);
}

.ui-panel-top strong {
  font-size: clamp(13px, 1.2vw, 24px);
  font-weight: 900;
}

.ui-panel-top button {
  width: clamp(56px, 7vw, 108px);
  height: clamp(21px, 2.2vw, 36px);
}

.ui-search-row {
  display: grid !important;
  grid-template-columns: 1fr 27%;
  gap: clamp(6px, 0.8vw, 14px);
  margin-bottom: clamp(12px, 1.25vw, 20px);
}

.ui-search-row span {
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.45);
  font-size: clamp(6px, 0.5vw, 10px);
  font-weight: 800;
  padding: clamp(7px, 0.75vw, 12px);
}

.ui-product-table {
  display: grid !important;
  grid-template-columns: 1fr 19% 19%;
  align-content: start;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.ui-product-table span,
.ui-product-table em,
.ui-product-table b {
  min-height: clamp(28px, 3.3vw, 54px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: clamp(6px, 0.58vw, 11px);
  font-style: normal;
  font-weight: 900;
  padding: clamp(8px, 0.95vw, 16px);
}

.ui-product-table em {
  color: #15893c;
}

.ui-product-table b {
  text-align: right;
}

.ui-loupe {
  position: absolute !important;
  right: 7%;
  top: 18%;
  z-index: 3;
  width: 34%;
  aspect-ratio: 1;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: clamp(5px, 0.7vw, 12px);
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
}

.ui-loupe i {
  width: clamp(26px, 4vw, 58px);
  aspect-ratio: 1;
  border-radius: 7px;
  background:
    linear-gradient(135deg, transparent 40%, #ffffff 41% 49%, transparent 50%),
    #111111;
}

.ui-loupe strong {
  font-size: clamp(11px, 1.12vw, 22px);
  font-weight: 900;
}

.ui-loupe span {
  color: rgba(0, 0, 0, 0.62);
  font-size: clamp(6px, 0.62vw, 11px);
  font-weight: 800;
}

.ui-loupe button {
  width: 58%;
  height: clamp(24px, 3vw, 46px);
  background: var(--accent);
}

.ui-cursor-shape {
  position: absolute !important;
  right: 9%;
  bottom: 24%;
  z-index: 5;
  width: clamp(22px, 2.6vw, 42px);
  aspect-ratio: 0.72;
  background: #070707;
  clip-path: polygon(0 0, 100% 55%, 58% 62%, 78% 100%, 58% 100%, 39% 66%, 0 88%);
  filter: drop-shadow(0 3px 0 #ffffff);
}

.ui-dashboard {
  padding: clamp(12px, 1.45vw, 24px);
  border: 2px solid #070707;
  background: #f5f4f1;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.ui-dash-top {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(10px, 1.1vw, 18px);
}

.ui-dash-top strong {
  font-size: clamp(10px, 0.95vw, 17px);
  font-weight: 900;
}

.ui-dash-top span {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  background: #ffffff;
  font-size: clamp(6px, 0.54vw, 10px);
  font-weight: 800;
  padding: clamp(5px, 0.58vw, 9px) clamp(7px, 0.75vw, 12px);
}

.ui-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 0.75vw, 12px);
  margin-bottom: clamp(9px, 1vw, 16px);
}

.ui-kpi-grid article,
.ui-chart-card {
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.ui-kpi-grid article {
  display: grid !important;
  gap: clamp(4px, 0.42vw, 8px);
  padding: clamp(10px, 1.05vw, 18px);
}

.ui-kpi-grid small {
  font-size: clamp(6px, 0.55vw, 10px);
  font-weight: 900;
}

.ui-kpi-grid strong {
  font-size: clamp(18px, 2.3vw, 38px);
  font-weight: 900;
}

.ui-kpi-grid span {
  color: #18a447;
  font-size: clamp(6px, 0.58vw, 11px);
  font-weight: 900;
}

.ui-chart-card {
  position: absolute !important;
  bottom: clamp(12px, 1.45vw, 24px);
  height: 44%;
  padding: clamp(10px, 1vw, 16px);
}

.ui-chart-card strong {
  font-size: clamp(6px, 0.62vw, 11px);
  font-weight: 900;
}

.ui-chart-card--bars {
  left: clamp(12px, 1.45vw, 24px);
  width: 46%;
}

.ui-chart-card--line {
  right: clamp(12px, 1.45vw, 24px);
  width: 46%;
}

.ui-bars {
  position: absolute !important;
  inset: 28% 10% 12%;
  display: flex !important;
  align-items: end;
  justify-content: space-around;
  background:
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px) 0 0 / 100% 25%;
}

.ui-bars i {
  width: 15%;
  background: #070707;
}

.ui-bars i:nth-child(1) { height: 43%; }
.ui-bars i:nth-child(2) { height: 78%; }
.ui-bars i:nth-child(3) { height: 55%; }
.ui-bars i:nth-child(4) { height: 70%; }

.ui-chart-card svg {
  position: absolute;
  inset: 28% 8% 10%;
  width: 84%;
  height: 62%;
  overflow: visible;
}

.ui-chart-card path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-landing-card {
  overflow: hidden;
  border-radius: 7px;
  background: #f8f8f5;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.ui-landing-card nav {
  display: grid !important;
  grid-template-columns: 1fr auto auto auto;
  gap: clamp(10px, 1.1vw, 18px);
  align-items: center;
  padding: clamp(12px, 1.4vw, 22px) clamp(15px, 1.8vw, 30px);
}

.ui-landing-card nav strong,
.ui-landing-card nav span,
.ui-landing-card nav b {
  font-size: clamp(6px, 0.55vw, 10px);
  font-weight: 900;
}

.ui-landing-card nav b {
  border-radius: 4px;
  background: #080808;
  color: #ffffff;
  padding: clamp(5px, 0.52vw, 9px) clamp(8px, 0.9vw, 14px);
}

.ui-landing-card section {
  max-width: 62%;
  padding: clamp(12px, 1.4vw, 24px) clamp(16px, 1.8vw, 30px) clamp(16px, 1.8vw, 30px);
}

.ui-landing-card small {
  display: inline-block !important;
  margin-bottom: clamp(8px, 0.8vw, 14px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.6);
  font-size: clamp(5px, 0.5vw, 9px);
  font-weight: 900;
  padding: clamp(4px, 0.45vw, 7px) clamp(7px, 0.8vw, 12px);
}

.ui-landing-card h3 {
  margin: 0 0 clamp(7px, 0.8vw, 13px);
  color: #111111;
  font-size: clamp(18px, 2vw, 32px);
  line-height: 0.98;
  letter-spacing: 0;
}

.ui-landing-card h3 em {
  color: var(--accent);
  font-style: normal;
}

.ui-landing-card p {
  max-width: 78%;
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  color: rgba(0, 0, 0, 0.56);
  font-size: clamp(7px, 0.72vw, 12px);
  font-weight: 800;
}

.ui-landing-card section div {
  display: flex !important;
  gap: clamp(7px, 0.8vw, 12px);
}

.ui-landing-card section button {
  width: clamp(56px, 6.4vw, 100px);
  height: clamp(22px, 2.4vw, 36px);
}

.ui-landing-card section button:first-child {
  background: var(--accent);
}

.ui-landing-card section button:last-child {
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: #ffffff;
  color: #151515;
}

.ui-device-stack {
  position: absolute !important;
  right: 5%;
  bottom: 7%;
  width: 38%;
  height: 64%;
}

.ui-device-stack i {
  position: absolute !important;
  inset: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #101010 0 18%, #ffffff 18%),
    #ffffff;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.ui-device-stack i:nth-child(1) {
  transform: translateX(20%) scale(0.88);
}

.ui-device-stack i:nth-child(2) {
  transform: translateX(10%) scale(0.94);
}

.ui-flow {
  display: grid !important;
  grid-template-columns: 16% repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 30px);
  align-items: center;
}

.ui-flow aside,
.ui-flow article,
.ui-flow-toast {
  border: 2px solid rgba(0, 0, 0, 0.82);
  border-radius: 8px;
  background: #f9f8f4;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.ui-flow aside {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: clamp(7px, 0.8vw, 13px);
  padding: clamp(12px, 1.2vw, 20px);
}

.ui-flow aside b {
  display: grid !important;
  place-items: center;
  width: clamp(18px, 2vw, 32px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #efefec;
  color: #111111;
  font-size: clamp(7px, 0.7vw, 12px);
}

.ui-flow aside b:first-child {
  background: var(--accent);
  color: #ffffff;
}

.ui-flow aside span {
  align-self: center;
  font-size: clamp(7px, 0.7vw, 12px);
  font-weight: 900;
}

.ui-flow article {
  min-height: 45%;
  padding: clamp(13px, 1.35vw, 22px);
}

.ui-flow article strong {
  margin-bottom: clamp(10px, 1vw, 16px);
  font-size: clamp(8px, 0.82vw, 14px);
  font-weight: 900;
}

.ui-flow article label,
.ui-flow article span {
  margin-bottom: clamp(7px, 0.75vw, 12px);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  background: #ffffff;
  font-size: clamp(6px, 0.62vw, 11px);
  font-weight: 800;
  padding: clamp(7px, 0.75vw, 12px);
}

.ui-flow article button {
  width: 100%;
  height: clamp(24px, 2.6vw, 42px);
  margin-top: clamp(10px, 1vw, 16px);
}

.ui-avatar-row {
  display: flex !important;
  gap: clamp(5px, 0.55vw, 9px);
  margin-bottom: clamp(7px, 0.75vw, 12px);
}

.ui-avatar-row i,
.ui-avatar-row b {
  width: clamp(17px, 1.8vw, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9c2a8;
}

.ui-avatar-row i:nth-child(2) { background: #9f8a77; }
.ui-avatar-row i:nth-child(3) { background: #7fb0c5; }
.ui-avatar-row b {
  display: grid !important;
  place-items: center;
  background: #eeeeeb;
  font-size: clamp(10px, 1vw, 16px);
}

.ui-flow-toast {
  position: absolute !important;
  right: 0;
  bottom: 4%;
  width: 38%;
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: clamp(8px, 0.9vw, 14px);
  align-items: center;
  padding: clamp(10px, 1vw, 16px);
}

.ui-flow-toast b {
  width: clamp(22px, 2.5vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #58ab3f;
}

.ui-flow-toast span {
  font-size: clamp(8px, 0.8vw, 13px);
  font-weight: 900;
}

.ui-flow-arrow {
  position: absolute !important;
  top: 48%;
  width: clamp(22px, 3vw, 48px);
  height: 2px;
  background: #070707;
}

.ui-flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  aspect-ratio: 1;
  border-right: 2px solid #070707;
  border-top: 2px solid #070707;
  transform: translateY(-50%) rotate(45deg);
}

.ui-flow-arrow--a { left: 41%; }
.ui-flow-arrow--b { left: 64%; }

.ui-onboard-modal {
  display: grid !important;
  grid-template-columns: 34% 1fr;
  grid-template-rows: 1fr auto;
  gap: clamp(7px, 0.85vw, 13px);
  padding: clamp(12px, 1.35vw, 22px);
  border: 2px solid #070707;
  border-radius: 8px;
  background: #f8f8f5;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.ui-onboard-modal > button {
  position: absolute !important;
  right: clamp(9px, 1vw, 16px);
  top: clamp(8px, 0.9vw, 14px);
  width: auto;
  height: auto;
  background: transparent;
  color: #111111;
  font-size: clamp(12px, 1.2vw, 20px);
}

.ui-person {
  width: 62%;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #f1bd98 0 16%, transparent 17%),
    radial-gradient(circle at 50% 36%, #222 0 27%, transparent 28%),
    linear-gradient(#f1bd98 0 0) 50% 48% / 24% 26% no-repeat,
    radial-gradient(circle at 50% 78%, #dadada 0 42%, transparent 43%),
    #e6e6e3;
}

.ui-onboard-modal section h3 {
  margin: 0 0 clamp(6px, 0.7vw, 11px);
  font-size: clamp(14px, 1.42vw, 24px);
  line-height: 1.02;
  letter-spacing: 0;
}

.ui-onboard-modal section h3 em {
  color: var(--accent);
  font-style: normal;
}

.ui-onboard-modal section p {
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  color: rgba(0, 0, 0, 0.54);
  font-size: clamp(7px, 0.72vw, 12px);
  font-weight: 800;
}

.ui-progress-dots {
  display: flex !important;
  gap: clamp(9px, 0.9vw, 14px);
}

.ui-progress-dots i {
  width: clamp(7px, 0.75vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}

.ui-progress-dots i:first-child {
  background: var(--accent);
}

.ui-onboard-modal aside {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 0.58vw, 9px);
}

.ui-onboard-modal aside span {
  display: grid !important;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  background: #ffffff;
  color: rgba(0, 0, 0, 0.54);
  font-size: clamp(5px, 0.48vw, 8px);
  font-weight: 800;
  padding: clamp(6px, 0.62vw, 10px);
}

.ui-onboard-modal aside b {
  color: #111111;
  font-size: clamp(6px, 0.58vw, 10px);
}

.ui-onboard-modal footer {
  display: none !important;
}

.ui-onboard-modal footer span,
.ui-onboard-modal footer strong {
  min-width: clamp(54px, 6vw, 96px);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  background: #ffffff;
  font-size: clamp(7px, 0.68vw, 12px);
  font-weight: 900;
  padding: clamp(9px, 0.9vw, 14px);
  text-align: center;
}

.ui-onboard-modal footer strong {
  background: #090909;
  color: #ffffff;
}

.ui-social-stage {
  display: grid !important;
  grid-template-columns: 1fr 0.68fr;
  gap: clamp(8px, 0.95vw, 16px);
  padding: clamp(10px, 1.1vw, 18px);
  border: 2px dashed rgba(0, 0, 0, 0.38);
}

.ui-social-card {
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.ui-social-card--light {
  padding: clamp(12px, 1.25vw, 20px);
  background: #f8f8f5;
}

.ui-social-card--light strong {
  margin-bottom: clamp(12px, 1.25vw, 20px);
  font-size: clamp(8px, 0.82vw, 14px);
}

.ui-social-card--light h3 {
  margin: 0 0 clamp(10px, 1vw, 16px);
  color: #111111;
  font-size: clamp(18px, 1.9vw, 32px);
  line-height: 0.98;
  letter-spacing: 0;
}

.ui-social-card--light h3 em {
  color: var(--accent);
  font-style: normal;
}

.ui-social-card--light p,
.ui-social-card--light small {
  max-width: 76%;
  color: rgba(0, 0, 0, 0.64);
  font-size: clamp(7px, 0.7vw, 12px);
  font-weight: 800;
}

.ui-social-card--light small {
  position: absolute !important;
  left: clamp(12px, 1.25vw, 20px);
  bottom: clamp(10px, 1.1vw, 18px);
  color: #111111;
}

.ui-social-card--dark {
  overflow: hidden;
  padding: clamp(11px, 1.15vw, 18px);
  background: #111111;
  color: #ffffff;
}

.ui-social-card--dark small {
  color: var(--accent);
  font-size: clamp(7px, 0.7vw, 12px);
  font-weight: 900;
}

.ui-social-card--dark h3 {
  margin: clamp(5px, 0.55vw, 9px) 0 clamp(12px, 1.4vw, 24px);
  color: #ffffff;
  font-size: clamp(22px, 2.1vw, 34px);
  letter-spacing: 0;
}

.ui-phone-preview {
  width: 78%;
  height: 38%;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16) 0 0) 14% 18% / 50% 6px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12) 0 0) 14% 37% / 42% 6px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.1) 0 0) 14% 56% / 54% 6px no-repeat,
    #242424;
}

.ui-social-card--dark button {
  position: absolute !important;
  right: clamp(18px, 2vw, 34px);
  top: 47%;
  width: clamp(36px, 4vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  font-size: clamp(13px, 1.4vw, 22px);
}

.ui-social-card--dark span {
  position: absolute !important;
  left: clamp(14px, 1.55vw, 26px);
  bottom: clamp(14px, 1.55vw, 26px);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(7px, 0.7vw, 12px);
  font-weight: 900;
}

.plugin-media {
  color: #000000;
}

.plugin-panel-preview {
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.plugin-panel-preview span,
.beatflow-preview span {
  background: #000000;
}

.plugin-panel-preview span:nth-child(1) {
  grid-column: 1 / -1;
}

.plugin-panel-preview span:nth-child(2) {
  opacity: 0.72;
}

.plugin-panel-preview span:nth-child(3) {
  opacity: 0.54;
}

.plugin-panel-preview span:nth-child(4) {
  opacity: 0.36;
}

.pinrig-visual-container {
  position: absolute;
  inset: 16%;
}

.pinrig-anchor,
.pinrig-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000000;
}

.pinrig-anchor-1 {
  left: 20%;
  top: 20%;
}

.pinrig-anchor-2 {
  right: 20%;
  top: 20%;
}

.pinrig-anchor-3 {
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
}

.pinrig-dot {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pinrig-line {
  position: absolute;
  height: 2px;
  background: #000000;
  transform-origin: left center;
}

.wordflow-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 18px;
  gap: 8px;
}

.wordflow-preview span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #000000;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.beatflow-preview {
  position: absolute;
  inset: 18px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.beatflow-preview span {
  flex: 1;
  min-height: 18%;
}

.beatflow-preview span:nth-child(1) { height: 30%; }
.beatflow-preview span:nth-child(2) { height: 78%; }
.beatflow-preview span:nth-child(3) { height: 46%; }
.beatflow-preview span:nth-child(4) { height: 92%; }
.beatflow-preview span:nth-child(5) { height: 58%; }
.beatflow-preview span:nth-child(6) { height: 72%; }

.curve-preview {
  position: absolute;
  inset: 18px;
}

.curve-preview-axis {
  position: absolute;
  background: #000000;
}

.curve-preview-axis--x {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.curve-preview-axis--y {
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
}

.curve-preview-line {
  position: absolute;
  left: 9%;
  right: 8%;
  top: 42%;
  height: 42%;
  border-top: 4px solid #000000;
  border-right: 4px solid #000000;
  border-radius: 70% 30% 0 0;
  transform: skewX(-18deg);
}

.dockit-preview {
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dockit-preview span,
.nest-preview span {
  position: relative;
  display: block;
}

.dockit-folder {
  background: #000000;
}

.dockit-folder--a {
  grid-row: span 2;
}

.dockit-folder--b {
  opacity: 0.72;
}

.dockit-file {
  background: rgba(0, 0, 0, 0.56);
}

.dockit-file--a,
.dockit-file--c {
  opacity: 0.76;
}

.nest-preview {
  position: absolute;
  inset: 18px;
}

.nest-node {
  position: absolute;
  border: 3px solid #000000;
  background: rgba(0, 0, 0, 0.08);
}

.nest-node--image {
  left: 7%;
  top: 16%;
  width: 31%;
  height: 38%;
}

.nest-node--note {
  left: 42%;
  top: 40%;
  width: 25%;
  height: 34%;
}

.nest-node--timer {
  right: 6%;
  top: 20%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
}

.nest-link {
  position: absolute;
  height: 3px;
  background: #000000;
  transform-origin: left center;
}

.nest-link--a {
  left: 34%;
  top: 43%;
  width: 19%;
  transform: rotate(19deg);
}

.nest-link--b {
  left: 64%;
  top: 40%;
  width: 17%;
  transform: rotate(-23deg);
}

.plugin-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  place-items: center;
  padding: 22px;
}

.plugin-preview-modal:target,
.plugin-preview-modal.is-targeted {
  display: grid;
}

.showroom-page:has(.plugin-preview-modal:target) {
  z-index: 2147482000;
}

.showroom-page:has(.plugin-preview-modal.is-targeted) {
  z-index: 2147482000;
}

.plugin-preview-backdrop {
  position: fixed;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.plugin-preview-window {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc((100svh - 44px) * 0.75), calc(100vw - 36px));
  height: min(746px, calc(100svh - 44px));
  max-height: calc(100svh - 44px);
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.plugin-preview-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.plugin-preview-topbar span,
.hub-preview-label {
  color: #7d7d7d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.plugin-preview-topbar h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.plugin-product-link {
  display: inline-block;
  margin-top: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.plugin-product-link:hover {
  color: var(--text);
}

.plugin-preview-close {
  width: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.plugin-preview-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.plugin-preview-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.plugin-preview-scroll::-webkit-scrollbar {
  width: 6px;
}

.plugin-preview-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}

.plugin-preview-window--real .plugin-preview-scroll--frame {
  padding: 0;
  overflow: hidden;
}

.plugin-preview-frame-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #121214;
}

.plugin-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #121214;
}

.plugin-preview-window--real .cep-mock,
.plugin-preview-window--real .preview-copy-grid {
  display: none;
}

.cep-mock {
  --cep-bg: #161617;
  --cep-panel: #1e1f22;
  --cep-panel-2: #24262a;
  --cep-line: #34373d;
  --cep-muted: #a3a7b0;
  --cep-accent: #f93a00;
  --cep-accent-2: #f66800;
  display: grid;
  gap: 12px;
  min-height: 640px;
  padding: 14px;
  background: var(--cep-bg);
  color: #f2f2f3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.35;
}

.plugin-preview-window--blue .cep-mock {
  --cep-accent: #62b0ff;
  --cep-accent-2: #318dff;
}

.cep-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.cep-top h3 {
  margin: 0;
  color: #f2f2f3;
  font-size: 22px;
  line-height: 1.05;
}

.cep-top span,
.cep-top small {
  color: var(--cep-muted);
  font-size: 11px;
  font-weight: 800;
}

.cep-top > span {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.cep-tabs {
  display: grid;
  gap: 8px;
}

.cep-tabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cep-tabs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cep-tabs--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cep-tabs span {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  color: var(--cep-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  border: 1px solid var(--cep-line);
  border-radius: 12px;
  background: var(--cep-panel);
}

.cep-tabs span.is-active {
  color: #f2f2f3;
  border-color: var(--cep-accent);
  background: var(--cep-panel-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cep-accent) 22%, transparent);
}

.cep-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--cep-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}

.cep-card--dark {
  background: #151517;
}

.cep-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cep-card-title span {
  color: #f2f2f3;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.cep-card-title small {
  color: var(--cep-muted);
  font-size: 10px;
  font-weight: 800;
}

.cep-preset-grid,
.pinrig-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cep-preset-grid span,
.pinrig-choice-grid span {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #f2f2f3;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  border: 1px solid var(--cep-line);
  border-radius: 12px;
  background: var(--cep-panel-2);
}

.cep-preset-grid span:first-child,
.pinrig-choice-grid span:nth-child(2) {
  border-color: var(--cep-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cep-accent) 18%, transparent), var(--cep-panel-2));
}

.cep-timeline {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #151517;
  background-size: 34px 34px;
}

.cep-timeline span {
  position: absolute;
  left: calc(11% + var(--i, 0) * 14%);
  bottom: 18px;
  width: 18%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cep-accent), var(--cep-accent-2));
}

.cep-timeline span:nth-child(1) { --i: 0; }
.cep-timeline span:nth-child(2) { --i: 1; bottom: 34px; }
.cep-timeline span:nth-child(3) { --i: 2; bottom: 50px; }
.cep-timeline span:nth-child(4) { --i: 3; bottom: 66px; }
.cep-timeline span:nth-child(5) { --i: 4; bottom: 34px; }

.cep-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cep-action-row span,
.dockit-toolbar span,
.cep-folder-strip span,
.nest-board-strip span {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: #f2f2f3;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid var(--cep-line);
  border-radius: 12px;
  background: var(--cep-panel-2);
}

.cep-action-row span.is-primary,
.cep-folder-strip span.is-active,
.nest-board-strip span.is-active {
  color: #120904;
  border-color: transparent;
  background: linear-gradient(180deg, var(--cep-accent), var(--cep-accent-2));
}

.cep-motion-demo {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  border-radius: 12px;
  background: #0f1012;
}

.cep-layer {
  position: absolute;
  width: 28%;
  height: 26%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cep-layer--a { left: 12%; top: 22%; }
.cep-layer--b { left: 35%; top: 42%; }
.cep-layer--c { left: 58%; top: 24%; }

.cep-playhead {
  position: absolute;
  left: 18%;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: var(--cep-accent);
  animation: cepPlayhead 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pinrig-stage {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #111214;
  background-size: 34px 34px;
  border-radius: 12px;
}

.pinrig-stage span {
  position: absolute;
}

.pinrig-stage-box {
  left: 18%;
  top: 20%;
  width: 54%;
  height: 48%;
  border: 2px solid rgba(255, 255, 255, 0.78);
}

.pinrig-stage-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cep-accent);
}

.pinrig-stage-node--a { left: 16%; top: 17%; }
.pinrig-stage-node--b { left: 69%; top: 17%; }
.pinrig-stage-node--c { left: 69%; top: 66%; }

.pinrig-stage-line {
  height: 2px;
  background: var(--cep-accent);
  transform-origin: left center;
}

.pinrig-stage-line--a {
  left: 20%;
  top: 22%;
  width: 53%;
}

.pinrig-stage-line--b {
  left: 72%;
  top: 23%;
  width: 44%;
  transform: rotate(92deg);
}

.pinrig-stage-measure {
  left: 38%;
  bottom: 18%;
  color: var(--cep-accent);
  font-size: 13px;
  font-weight: 900;
}

.cep-folder-strip,
.nest-board-strip {
  display: flex;
  gap: 7px;
  overflow: hidden;
  padding: 8px;
}

.cep-folder-strip span,
.nest-board-strip span {
  min-width: 78px;
  min-height: 30px;
}

.dockit-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

.dockit-file-list {
  display: grid;
  gap: 7px;
}

.dockit-file-list span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cep-panel-2);
}

.dockit-file-list i {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--cep-accent), var(--cep-accent-2));
}

.dockit-file-list strong,
.dockit-file-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dockit-file-list strong {
  color: #f2f2f3;
  font-size: 11px;
}

.dockit-file-list small {
  color: var(--cep-muted);
  font-size: 10px;
}

.nest-board-strip {
  margin-bottom: 0;
}

.nest-board-strip span:first-child {
  min-width: 34px;
}

.nest-board {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(249, 58, 0, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #111214;
  background-size: auto, 42px 42px, 42px 42px, auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.nest-board-toolbar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 7px;
  z-index: 2;
}

.nest-board-toolbar span {
  min-width: 44px;
  min-height: 30px;
  display: grid;
  place-items: center;
  color: #f2f2f3;
  font-size: 9px;
  font-weight: 900;
  border-radius: 10px;
  background: var(--cep-panel-2);
}

.nest-board-node {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: var(--cep-panel);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.nest-board-node strong {
  color: #f2f2f3;
  font-size: 12px;
}

.nest-board-node small {
  color: var(--cep-muted);
  font-size: 10px;
}

.nest-board-node--image {
  left: 12%;
  top: 23%;
  width: 42%;
  height: 28%;
}

.nest-board-node--note {
  right: 10%;
  top: 38%;
  width: 43%;
  height: 25%;
}

.nest-board-node--timer {
  left: 20%;
  bottom: 11%;
  width: 34%;
  height: 20%;
  border-color: var(--cep-accent);
}

.nest-board-link {
  position: absolute;
  height: 2px;
  background: var(--cep-accent);
  transform-origin: left center;
}

.nest-board-link--a {
  left: 42%;
  top: 43%;
  width: 25%;
  transform: rotate(12deg);
}

.nest-board-link--b {
  left: 38%;
  top: 66%;
  width: 23%;
  transform: rotate(-35deg);
}

.preview-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.preview-copy-grid article {
  display: grid;
  gap: 12px;
  min-height: 148px;
  align-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.preview-copy-grid span {
  color: #7d7d7d;
  font-size: 10px;
  font-weight: 900;
}

.preview-copy-grid h3 {
  color: var(--text);
  font-size: 17px;
  line-height: 1;
}

.preview-copy-grid p {
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.hub-preview-panel {
  min-height: 610px;
  display: grid;
  align-content: space-between;
  gap: 34px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.16) 1px, transparent 1px),
    var(--accent);
  background-size: 34px 34px;
  color: #000000;
}

.hub-preview-panel h3 {
  max-width: 10ch;
  color: #000000;
  font-size: 42px;
  line-height: 0.9;
}

.hub-preview-label {
  color: #000000;
}

.hub-preview-list {
  display: grid;
  gap: 8px;
}

.hub-preview-list span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  align-items: center;
  padding: 0 12px;
  color: #000000;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 2px solid #000000;
}

.hub-preview-list strong {
  font-size: 10px;
}

@keyframes cepPlayhead {
  0% { left: 18%; }
  52% { left: 70%; }
  100% { left: 84%; }
}

.plugin-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.plugin-title-row span {
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.plugin-caption p {
  max-width: 92%;
}

.studio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin-top: 9px;
}

.studio-tags li {
  color: #7d7d7d;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.studio-tags li::before {
  content: '/';
  color: var(--text);
  margin-right: 5px;
}

.studio-subpage .calculator-box,
.studio-subpage .contact-form-container,
.studio-subpage .lab-panel,
.studio-subpage .sim-box,
.studio-subpage .code-output,
.studio-subpage .bezier-editor-container,
.studio-subpage .sim-track {
  border-radius: 0;
  box-shadow: none;
}

.studio-subpage .calculator-box {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 22px;
  padding: 24px;
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

.studio-subpage .calc-sliders {
  gap: 24px;
}

.studio-subpage .calc-label-row,
.studio-field-label,
.studio-panel-heading,
.studio-subpage .calc-total-label,
.studio-subpage .form-group label {
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.studio-subpage .calc-value,
.studio-subpage .calc-total-timeline {
  color: #8a8a8a;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 900;
}

.studio-subpage input[type="range"] {
  height: 3px;
  background: #222222;
}

.studio-subpage input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  box-shadow: none;
}

.studio-subpage .calc-options-row {
  gap: 10px;
}

.studio-subpage .calc-option-btn,
.studio-subpage .preset-btn {
  border-radius: 0;
  background: #000000;
  border-color: rgba(255, 255, 255, 0.12);
  color: #8a8a8a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.studio-subpage .calc-option-btn:hover,
.studio-subpage .calc-option-btn.is-active,
.studio-subpage .preset-btn:hover,
.studio-subpage .preset-btn.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.studio-subpage .calc-result-panel {
  align-items: stretch;
  background: #000000;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 0;
  gap: 26px;
  padding: 24px;
  text-align: left;
}

.studio-subpage .calc-total-price {
  color: var(--text);
  font-size: 42px;
  line-height: 0.9;
}

.studio-process-grid,
.studio-tips-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.process-step,
.studio-tips-grid article {
  min-height: 230px;
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.process-step span,
.studio-tips-grid article span {
  color: #7d7d7d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.process-step h2,
.studio-tips-grid article h2,
.contact-title {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
}

.process-step p,
.studio-tips-grid article p,
.contact-desc {
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.28;
}

.studio-subpage .contact-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  gap: 22px;
  align-items: start;
}

.studio-subpage .contact-info {
  display: grid;
  gap: 18px;
}

.studio-contact-links {
  display: grid;
  gap: 5px;
}

.studio-contact-links a {
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.studio-contact-links a:hover {
  color: var(--accent);
}

.studio-subpage .contact-form-container {
  padding: 24px;
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
}

.studio-subpage .contact-form {
  gap: 16px;
}

.studio-subpage .form-row {
  gap: 14px;
}

.studio-subpage .form-control {
  min-height: 44px;
  border-radius: 0;
  background: #000000;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 13px;
}

.studio-subpage .form-control:focus {
  border-color: #ffffff;
  box-shadow: none;
}

.studio-subpage textarea.form-control {
  min-height: 132px;
}

.studio-subpage .contact-form .btn,
.studio-subpage .calc-result-panel .btn {
  width: 100%;
}

.studio-subpage .btn {
  border-radius: 0;
  color: #000000;
}

.studio-subpage .btn-primary {
  background: #ffffff;
  box-shadow: none;
}

.studio-subpage .btn-primary::after {
  display: none;
}

.tools-page .lab {
  background: #000000;
  border: 0;
}

.studio-lab-layout {
  gap: 20px;
  margin-top: 0;
}

.studio-lab-layout > *,
.studio-subpage .lab-panel,
.studio-subpage .simulation-panel,
.studio-subpage .sim-box {
  min-width: 0;
}

.studio-subpage .lab-panel,
.studio-subpage .sim-box {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.12);
  padding: 22px;
}

.studio-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.studio-panel-heading small {
  color: #7d7d7d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-subpage .bezier-editor-container,
.studio-subpage .sim-track,
.studio-subpage .code-output {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.12);
}

.studio-subpage .bezier-editor-container {
  overflow-x: auto;
}

.studio-subpage .sim-box-title {
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.studio-subpage .sim-box-title .btn {
  min-height: 30px;
  padding: 7px 14px;
}

.sim-stack,
.preset-block {
  display: grid;
  gap: 14px;
}

.studio-subpage .sim-track {
  height: 42px;
}

.studio-subpage .sim-ball {
  width: 18px;
  height: 18px;
  background: #ffffff;
  box-shadow: none;
}

.studio-subpage .presets-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.studio-subpage .code-output {
  color: #ffffff;
  min-height: 58px;
  padding: 22px 14px 12px;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.studio-subpage .code-label {
  color: #7d7d7d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.studio-tips-grid {
  margin-top: 34px;
}

.studio-subpage .footer {
  background: #000000;
}

.showroom-logo-link,
.footer-logo-link {
  display: block;
  line-height: 0;
  width: max-content;
}

.showroom-logo-link {
  margin-bottom: 8px;
}

.showroom-logo-link .showroom-logo {
  margin-bottom: 0;
}

.showroom-logo-link:hover .showroom-logo,
.footer-logo-link:hover .footer-logo {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

@media (min-width: 1181px) {
  .studio-subpage .service-grid .work-card:nth-child(6),
  .studio-subpage .plugin-catalog-grid .work-card:nth-child(6) {
    margin-top: -36px;
  }
}

@media (max-width: 1180px) {
  .studio-subpage .showroom-center h1 {
    font-size: 30px;
  }

  .studio-process-grid,
  .studio-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-subpage .calculator-box,
  .studio-subpage .contact-layout,
  .studio-lab-layout {
    grid-template-columns: 1fr;
  }

  .studio-subpage .showroom-note {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .studio-subpage .showroom-intro {
    padding: 70px 0 12px;
  }

  .studio-subpage .showroom-center h1 {
    font-size: 24px;
  }

  .studio-subpage .showreel-section {
    padding-bottom: 40px;
  }

  .studio-subpage .showreel-frame {
    aspect-ratio: 4 / 3;
  }

  .studio-section {
    padding: 58px 0 68px;
  }

  .studio-subpage .showroom-workbar {
    display: grid;
  }

  .studio-subpage .work-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .studio-subpage .work-card,
  .studio-subpage .work-card--hero,
  .studio-subpage .work-card--wide,
  .studio-subpage .work-card--tall,
  .studio-subpage .work-card--offset,
  .studio-subpage .tools-grid .work-card,
  .studio-subpage .tools-grid .work-card--wide,
  .studio-subpage .tools-grid .work-card--tall {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .studio-process-grid,
  .studio-tips-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process-step,
  .studio-tips-grid article {
    min-height: 170px;
  }

  .studio-subpage .calculator-box,
  .studio-subpage .contact-form-container,
  .studio-subpage .lab-panel,
  .studio-subpage .sim-box {
    padding: 18px;
  }

  .studio-subpage .calc-options-row,
  .studio-subpage .form-row,
  .studio-subpage .presets-container {
    grid-template-columns: 1fr;
  }

  .studio-subpage .calc-total-price {
    font-size: 34px;
  }

  .plugin-preview-modal {
    padding: 12px;
  }

  .plugin-preview-window {
    width: calc(100vw - 24px);
    height: calc(100svh - 24px);
    max-height: calc(100svh - 24px);
  }

  .plugin-preview-topbar {
    padding: 14px;
  }

  .plugin-preview-scroll {
    padding: 14px;
  }

  .cep-mock {
    min-height: 610px;
    padding: 12px;
  }

  .cep-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cep-tabs--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preview-copy-grid {
    grid-template-columns: 1fr;
  }

  .hub-preview-panel {
    min-height: 520px;
  }

  .hub-preview-panel h3 {
    font-size: 34px;
  }

  .studio-subpage .footer-layout,
  .studio-subpage .footer-link-groups,
  .studio-subpage .footer-links,
  .studio-subpage .footer-social-links {
    align-items: flex-start;
    justify-items: start;
    justify-content: flex-start;
    flex-direction: column;
  }
}

/* --- Final studio content/admin pass --- */
.index-brief-cta {
  padding: 10px 0 86px;
  background: #000000;
}

.index-brief-cta .container {
  display: flex;
  justify-content: center;
}

.index-brief-cta .btn {
  min-width: min(260px, 100%);
}

.plugin-catalog-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 20px;
  gap: 20px;
  align-items: stretch;
}

.plugin-catalog-grid .work-card,
.studio-subpage .plugin-catalog-grid .work-card {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-column: span 4;
  grid-row: span 8;
  min-height: 0;
  margin-top: 0 !important;
}

.plugin-catalog-grid .work-media,
.studio-subpage .plugin-catalog-grid .work-media {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
}

.plugin-catalog-grid .work-card--hero,
.studio-subpage .plugin-catalog-grid .work-card--hero {
  grid-column: span 7;
  grid-row: span 10;
}

.plugin-catalog-grid .work-card--tall,
.studio-subpage .plugin-catalog-grid .work-card--tall {
  grid-column: span 5;
  grid-row: span 14;
}

.plugin-catalog-grid .work-card--wide,
.studio-subpage .plugin-catalog-grid .work-card--wide {
  grid-column: span 8;
  grid-row: span 9;
}

.plugin-catalog-grid .work-card--offset,
.studio-subpage .plugin-catalog-grid .work-card--offset {
  grid-column: span 4;
  grid-row: span 8;
}

.plugin-catalog-grid .work-card:nth-child(6),
.studio-subpage .plugin-catalog-grid .work-card:nth-child(6) {
  grid-column: span 4;
  grid-row: span 8;
}

.plugin-catalog-grid .cms-plugin-mark {
  font-size: clamp(48px, 7vw, 112px);
  color: rgba(255, 255, 255, 0.42);
}

.plugin-catalog-grid .plugin-panel-preview,
.plugin-catalog-grid .pinrig-visual-container,
.plugin-catalog-grid .dockit-preview,
.plugin-catalog-grid .nest-preview,
.plugin-catalog-grid .curve-preview {
  display: none !important;
}

.plugin-catalog-grid .plugin-media:not(.cms-plugin-media)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ff3d00;
}

.plugin-preview-window--real .plugin-preview-scroll--frame {
  overflow-x: hidden;
  overflow-y: auto;
}

.plugin-preview-frame-wrap {
  height: auto;
  min-height: 100%;
}

.plugin-preview-frame {
  height: 640px;
  min-height: 100%;
}

.brief-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.brief-file-drop {
  position: relative;
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #000000;
  background-size: 18px 18px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

.brief-file-drop:hover,
.brief-file-drop:focus-within,
.brief-file-drop.is-dragover {
  border-color: #ffffff;
}

.brief-file-drop input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.brief-file-drop strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.brief-file-drop span,
.brief-form-status {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.brief-form-status {
  min-height: 15px;
  margin: -4px 0 0;
}

.brief-form-status[data-tone="success"] {
  color: #ffffff;
}

.brief-form-status[data-tone="error"] {
  color: var(--accent-light);
}

.brief-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.brief-file-list:empty {
  display: none;
}

.brief-file-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 10px;
  overflow: hidden;
  color: #000000;
  background: #ffffff;
}

.brief-file-tile button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ffffff;
  background: #000000;
  border: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.brief-file-tile strong {
  color: rgba(0, 0, 0, 0.22);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}

.brief-file-tile span {
  min-width: 0;
  overflow: hidden;
  color: #000000;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-info-section {
  padding: 8px 0 42px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.contact-info-grid article {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 18px;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-info-grid article > span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.contact-info-grid h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  line-height: 0.95;
}

.contact-info-grid p,
.contact-info-list,
.contact-page-links {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.contact-info-list,
.contact-page-links {
  display: grid;
  gap: 7px;
  list-style: none;
}

.contact-page-links a {
  color: var(--text);
  text-transform: uppercase;
}

.contact-page-links a:hover {
  color: var(--accent);
}

.contact-page-brief {
  padding-top: 42px;
}

.contact-form button[disabled] {
  cursor: wait;
  opacity: 0.62;
}

.footer-social-link {
  gap: 0;
}

.footer-social-link span {
  display: none;
}

.footer-social-link b {
  font-weight: inherit;
}

@media (max-width: 980px) {
  .plugin-catalog-grid .work-card,
  .plugin-catalog-grid .work-card--hero,
  .plugin-catalog-grid .work-card--large,
  .plugin-catalog-grid .work-card--wide,
  .plugin-catalog-grid .work-card--tall,
  .plugin-catalog-grid .work-card--offset,
  .studio-subpage .plugin-catalog-grid .work-card,
  .studio-subpage .plugin-catalog-grid .work-card--hero,
  .studio-subpage .plugin-catalog-grid .work-card--large,
  .studio-subpage .plugin-catalog-grid .work-card--wide,
  .studio-subpage .plugin-catalog-grid .work-card--tall,
  .studio-subpage .plugin-catalog-grid .work-card--offset {
    grid-column: 1 / -1;
    grid-row: auto;
    display: block;
  }

  .plugin-catalog-grid,
  .studio-subpage .plugin-catalog-grid {
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }

  .plugin-catalog-grid .work-media,
  .studio-subpage .plugin-catalog-grid .work-media {
    aspect-ratio: 4 / 3 !important;
    height: auto;
  }

  .contact-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-grid article {
    min-height: 190px;
  }
}